/* =====================================================================
   Dra. Caroline Del Colle — sistema visual
   Conceito: presença, critério e cuidado. Abertura num palco escuro na cor do
   fundo do retrato; depois papel claro, luz quente e linhas finas do monograma C/D.
   Ritmo: palco escuro → papel (declaração + colagem) → papel (linha do tempo)
   → oliva (local) → papel (dúvidas) → areia (convite) → tinta (rodapé).
   ===================================================================== */

/* ---------- Fontes (OFL, hospedadas aqui; ver fontes/LICENSE-*) ---------- */
@font-face {
  font-family: 'Cormorant';
  src: url('fontes/cormorant-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fontes/cormorant-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fontes/cormorant-latin-wght-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant';
  src: url('fontes/cormorant-latin-ext-wght-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jakarta';
  src: url('fontes/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta';
  src: url('fontes/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta do dossiê + o "palco" (o marrom dourado do fundo do retrato 01, aprofundado) */
  --marfim: #f7f3ec;
  --papel: #fbf9f5;
  --areia: #ebe4d9;
  --areia-forte: #ded4c5;
  --taupe: #8a7968; /* só traços e números grandes */
  --taupe-texto: #66584b; /* texto pequeno sobre marfim ≈ 6,2:1 */
  --tinta: #2d2a27;
  --tinta-suave: #4a4540;
  --oliva: #39463e;
  --oliva-fundo: #323e37;
  --palco: #241c16;
  --palco-luz: #5a4430;
  --claro-suave: #d9cbb8; /* texto secundário sobre o palco */
  --luz: #c4a26a; /* a luz dourada das fotos: só linhas finas */
  --linha: rgb(45 42 39 / 0.14);

  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jakarta', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --margem: clamp(1.25rem, 0.6rem + 3.4vw, 4.5rem);
  --largura: 82rem;
  --topo: 4.5rem;
  --curva: cubic-bezier(0.22, 0.61, 0.24, 1);
  --curva-io: cubic-bezier(0.76, 0, 0.24, 1);
  --t: 420ms;
  --leitura: 36rem; /* medida confortável para parágrafos (~65 caracteres) */
}

/* Telas grandes: a escala inteira cresce junto (rem) */
@media (min-width: 1800px) {
  html {
    font-size: 112.5%;
  }
}

@media (min-width: 2300px) {
  html {
    font-size: 131.25%;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 1rem);
}

body {
  margin: 0;
  background: var(--marfim);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.0938rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--oliva);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--tinta);
  color: var(--marfim);
  text-decoration: none;
  border-radius: 2px;
}

.pular:focus {
  top: 1rem;
}

/* Selo de prévia dentro do topo (não cobre conteúdo); some na versão publicada */
.previa {
  flex: none;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--taupe-texto);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
}

@media (max-width: 420px) {
  .previa {
    display: none;
  }
}

/* ---------- Tipografia ---------- */
.rotulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-texto);
}

.rotulo::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Número do capítulo em serif itálico (I, II, III…) no lugar do traço */
.rotulo:has(.capitulo)::before {
  display: none;
}

.capitulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--luz);
  min-width: 1.4rem;
}

.rotulo--claro {
  color: var(--areia-forte);
}

.titulo-secao {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.titulo-secao em,
.abertura__mensagem em,
.convite__titulo em {
  font-style: italic;
  font-weight: 300;
  color: var(--taupe-texto);
}

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  white-space: nowrap;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 2px;
  background: var(--oliva);
  color: var(--marfim);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background-color 220ms var(--curva),
    box-shadow 220ms var(--curva),
    transform 220ms var(--curva);
}

.botao:hover {
  background: var(--oliva-fundo);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgb(36 28 22 / 0.55);
}

.botao:active {
  transform: translateY(1px);
}

.botao--compacto {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  font-size: 0.875rem;
}

.botao--largo {
  width: 100%;
}

.botao--grande {
  min-height: 3.75rem;
  padding: 0 2.2rem;
  font-size: 1.02rem;
}

.botao--claro {
  background: var(--marfim);
  color: var(--tinta);
}

.botao--claro:hover {
  background: #fff;
}

.botao--claro:focus-visible,
.link--claro:focus-visible {
  outline-color: var(--marfim);
}

.seta {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--curva);
}

a:hover > .seta {
  transform: translate(2px, -2px);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: rgb(45 42 39 / 0.3);
  transition: text-decoration-color 220ms var(--curva);
}

.link:hover {
  text-decoration-color: currentColor;
}

.link--claro {
  color: var(--marfim);
  text-decoration-color: rgb(247 243 236 / 0.4);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* ---------- Marca (monograma extraído da referência; trocar pelo SVG oficial) ---------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  text-decoration: none;
}

.marca__simbolo,
.local__simbolo,
.convite__simbolo {
  display: block;
  background: currentColor;
  -webkit-mask: url('img/monograma.png') center / contain no-repeat;
  mask: url('img/monograma.png') center / contain no-repeat;
}

.marca__simbolo {
  width: 1.9rem;
  aspect-ratio: 129 / 145;
  color: var(--taupe);
}

.marca__nome {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem);
  font-weight: 400;
  letter-spacing: clamp(0.1em, 0.06em + 0.2vw, 0.16em);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta);
}

/* ---------- Topo (transparente sobre o palco escuro da abertura; papel depois) ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: var(--marfim);
  transition:
    background-color var(--t) var(--curva),
    box-shadow var(--t) var(--curva);
}

.topo.rolou,
.topo.aberto {
  background: rgb(247 243 236 / 0.96);
  box-shadow: 0 1px 0 var(--linha);
}

@supports (backdrop-filter: blur(1px)) {
  .topo.rolou {
    background: rgb(247 243 236 / 0.84);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.js .topo.escuro:not(.aberto) {
  background: linear-gradient(180deg, rgb(26 20 15 / 0.55), transparent);
  box-shadow: none;
  backdrop-filter: none;
}

.js .topo.escuro.palco:not(.aberto) {
  background: rgb(36 28 22 / 0.94);
  box-shadow: 0 1px 0 rgb(247 243 236 / 0.08);
}

.js .topo.escuro:not(.aberto) .marca__nome,
.js .topo.escuro:not(.aberto) .topo__nav a,
.js .topo.escuro:not(.aberto) .topo__menu,
.js .topo.escuro:not(.aberto) .previa {
  color: var(--marfim);
}

.js .topo.escuro:not(.aberto) .marca__simbolo {
  color: var(--areia-forte);
}

.js .topo.escuro:not(.aberto) .topo__cta {
  background: var(--marfim);
  color: var(--tinta);
}

.js .topo.escuro:not(.aberto) :focus-visible {
  outline-color: var(--marfim);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--topo);
  max-width: calc(var(--largura) + var(--margem) * 2);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.topo__nav {
  display: none;
  margin-left: auto;
}

.topo__nav ul {
  display: flex;
  gap: 0.25rem;
}

.topo__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: none;
  position: relative;
}

.topo__nav a::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--curva);
}

.topo__nav a:hover::after,
.topo__nav a[aria-current='true']::after {
  transform: scaleX(1);
}

.topo__nav a[aria-current='true'] {
  color: var(--tinta);
}

.topo__cta {
  display: none;
}

/* Sem JavaScript o botão não teria função: só aparece quando o menu funciona */
.topo__menu {
  margin-left: auto;
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--tinta);
  cursor: pointer;
}

.js .topo__menu {
  display: grid;
}

.topo__menu-linhas {
  display: grid;
  gap: 6px;
  width: 1.5rem;
}

.topo__menu-linhas i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 260ms var(--curva);
}

.topo__menu[aria-expanded='true'] .topo__menu-linhas i:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.topo__menu[aria-expanded='true'] .topo__menu-linhas i:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.menu {
  height: calc(100svh - var(--topo));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem var(--margem) 2rem;
  background: var(--marfim);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.menu[hidden] {
  display: none;
}

.menu ol {
  display: grid;
}

.menu a[data-menu-link] {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linha);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  text-decoration: none;
}

.menu a[data-menu-link] span {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--taupe-texto);
}

.menu__id {
  font-size: 0.8rem;
  color: var(--taupe-texto);
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .topo__barra {
    gap: 0.75rem;
  }
  .topo__nav a {
    padding: 0 0.55rem;
  }
  .topo__nav a::after {
    left: 0.55rem;
    right: 0.55rem;
  }
  .previa {
    display: none;
  }
}

@media (min-width: 1024px) {
  .topo__nav,
  .topo__cta {
    display: flex;
  }
  .js .topo__menu,
  .menu {
    display: none !important;
  }
}

/* =====================================================================
   01 · ABERTURA — palco escuro na cor do fundo do retrato; o nome é o protagonista
   ===================================================================== */
.abertura {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(100svh, 64rem);
  background:
    radial-gradient(70% 80% at 78% 40%, var(--palco-luz) 0%, #3b2d22 42%, var(--palco) 100%);
  color: var(--marfim);
}

.abertura__retrato {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.abertura__foto,
.abertura__foto img {
  width: 100%;
  height: 100%;
}

.abertura__foto img {
  object-fit: cover;
  object-position: 50% 14%;
  /* o retrato se dissolve no palco: lateral e base */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 86%);
}

.abertura__texto {
  position: relative;
  display: grid;
  align-content: end;
  gap: 1rem;
  min-height: min(100svh, 64rem);
  padding: calc(var(--topo) + 1rem) var(--margem) 2.25rem;
}

.abertura__rotulo {
  margin-bottom: 0.25rem;
}

.abertura__nome {
  display: grid;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.2rem, 2rem + 6.2vw, 9.6rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 40px rgb(20 14 10 / 0.35);
}

.abertura__dra {
  font-style: italic;
  font-size: 0.32em;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--areia-forte);
}

.abertura__linha {
  display: block;
  overflow: clip;
  padding-bottom: 0.08em;
}

.abertura__linha > span {
  display: block;
}

.abertura__linha--recuo {
  padding-left: 0.9em;
}

.abertura__mensagem {
  max-width: 20ch;
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.35rem);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.abertura__mensagem em {
  color: var(--luz);
}

.abertura__apoio {
  max-width: 30rem;
  color: var(--claro-suave);
  font-size: 1rem;
  line-height: 1.55;
}

.abertura .acoes {
  margin-top: 0.75rem;
}

.abertura__id {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgb(247 243 236 / 0.18);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--claro-suave);
}

.arco {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.arco path {
  fill: none;
  stroke: var(--luz);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.arco__d {
  opacity: 0.55;
}

/* Celular e tablet: retrato no alto, nome sobre a base dissolvida do retrato */
@media (max-width: 1023px) {
  .abertura__retrato {
    bottom: auto;
    height: 64svh;
  }
  .abertura__foto img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .abertura__texto {
    padding-top: calc(64svh - 6.5rem);
  }
  .arco {
    top: 8%;
    right: -18%;
    width: 46%;
    aspect-ratio: 100 / 125;
  }
}

@media (min-width: 560px) and (max-width: 1023px) {
  .abertura__retrato {
    height: 70svh;
  }
  .abertura__texto {
    padding-top: calc(70svh - 9rem);
  }
}

/* Desktop: retrato à direita fundido ao palco; nome cruza a borda da foto */
@media (min-width: 1024px) {
  .abertura__retrato {
    left: auto;
    width: 60%;
  }
  .abertura__foto img {
    object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, #000 70%, transparent 100%);
    mask-composite: intersect;
  }
  .abertura__texto {
    align-content: center;
    padding: calc(var(--topo) + 2rem) var(--margem) 3rem max(var(--margem), calc((100vw - var(--largura)) / 2));
    max-width: none;
  }
  .abertura__texto > :not(.abertura__nome) {
    max-width: 34rem;
  }
  .arco {
    left: 36%;
    top: 22%;
    width: 22%;
    aspect-ratio: 100 / 125;
  }
}

/* =====================================================================
   02 · SOBRE — declaração tipográfica + colagem (retrato sobre faixa de areia + ficha)
   ===================================================================== */
.sobre {
  padding: clamp(5rem, 3.5rem + 7vw, 10rem) var(--margem) clamp(4rem, 3rem + 5vw, 8rem);
}

.sobre > * {
  max-width: var(--largura);
  margin-inline: auto;
}

.sobre__cabeca {
  display: grid;
  gap: 1.25rem;
}

/* A declaração: o texto que acende enquanto se lê (com JS); sem JS, já aparece inteiro */
.declaracao {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  max-width: 24em;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.4rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  color: var(--tinta);
}

.js .declaracao .palavra {
  color: rgb(45 42 39 / 0.2);
  transition: color 360ms var(--curva);
}

.js .declaracao .palavra.acesa {
  color: var(--tinta);
}

.colagem {
  position: relative;
  display: grid;
  gap: 2rem;
  margin-top: clamp(3rem, 2rem + 5vw, 6.5rem);
}

/* faixa de areia atrás do retrato: une foto e ficha numa mesma composição */
.colagem::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(var(--margem) * -1);
  right: 22%;
  top: 18%;
  bottom: -2rem;
  background: var(--areia);
}

.colagem__retrato {
  margin-left: 14%;
}

.colagem__retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}

.colagem__ficha {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.colagem__texto {
  max-width: var(--leitura);
  color: var(--tinta-suave);
  font-size: 1.05rem;
}

.ficha {
  display: grid;
  max-width: var(--leitura);
  border-top: 1px solid var(--linha);
}

.ficha div {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linha);
}

.ficha dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe-texto);
}

.ficha dd {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
}

.ficha small,
.ficha__ano {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--taupe-texto);
}

@media (min-width: 560px) {
  .ficha div {
    grid-template-columns: 8.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}

@media (min-width: 1024px) {
  /* título à esquerda, declaração à direita, na mesma altura; a colagem ocupa as duas colunas */
  .sobre {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    max-width: calc(var(--largura) + var(--margem) * 2);
    margin-inline: auto;
  }
  .sobre > * {
    max-width: none;
    margin-inline: 0;
  }
  .sobre__cabeca {
    align-content: start;
  }
  .declaracao {
    margin-top: 0;
    max-width: 19em;
  }
  .colagem {
    grid-column: 1 / -1;
  }
  .colagem {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: end;
  }
  .colagem::before {
    left: calc(max(var(--margem), (100vw - var(--largura)) / 2) * -1);
    right: 30%;
    top: 22%;
    bottom: -3rem;
  }
  .colagem__retrato {
    order: 2;
    margin: 0 0 -1rem;
  }
  .colagem__ficha {
    padding: 0 0 2rem;
  }
}

/* =====================================================================
   03 · ATENDIMENTO — título fixo + linha do tempo
   ===================================================================== */
.atendimento {
  background: var(--papel);
  padding: clamp(5rem, 3.5rem + 6vw, 9rem) var(--margem);
  border-top: 1px solid var(--linha);
}

.atendimento__grade {
  display: grid;
  gap: 2.5rem;
  max-width: var(--largura);
  margin-inline: auto;
}

.atendimento__cabeca {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.atendimento__nota {
  max-width: 24rem;
  font-size: 0.9rem;
  color: var(--taupe-texto);
}

.etapas {
  position: relative;
  display: grid;
}

/* a linha contínua que liga as etapas */
.etapas::before {
  content: '';
  position: absolute;
  left: 1.75rem;
  top: 1.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--luz), rgb(138 121 104 / 0.35));
}

.etapas li {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1.25rem;
  padding: 0 0 2.5rem;
}

.etapa__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px rgb(138 121 104 / 0.55);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  color: var(--taupe-texto);
}

.etapas h3 {
  margin-top: 0.55rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.12;
}

.etapas p {
  margin-top: 0.5rem;
  max-width: 32rem;
  color: var(--tinta-suave);
}

@media (min-width: 1024px) {
  .atendimento__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 8rem);
  }
  .atendimento__cabeca {
    position: sticky;
    top: calc(var(--topo) + 2.5rem);
    align-self: start;
  }
  .etapas li {
    grid-template-columns: 4.25rem 1fr;
    column-gap: 2rem;
    padding-bottom: 3.5rem;
  }
  .etapas::before {
    left: 2.125rem;
  }
  .etapa__n {
    width: 4.25rem;
    height: 4.25rem;
    font-size: 1.75rem;
  }
  .etapas h3 {
    margin-top: 0.8rem;
  }
}

/* ---------- Conteúdo educativo (rascunho) ---------- */
.educativo {
  padding: clamp(4.5rem, 3rem + 6vw, 8rem) var(--margem);
  background: var(--papel);
  border-block: 1px dashed var(--taupe);
}

.educativo > * {
  max-width: var(--largura);
  margin-inline: auto;
}

.educativo__aviso {
  margin-bottom: 2rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #9a4a2e;
  background: #f3e6df;
  color: #6b2f1c;
  font-size: 0.875rem;
  font-weight: 600;
}

.educativo__cabeca {
  display: grid;
  gap: 1.25rem;
}

.educativo__lead {
  max-width: 40rem;
  color: var(--tinta-suave);
}

.educativo__perguntas {
  display: grid;
  margin-top: 3rem;
  border-top: 1px solid var(--linha);
}

.educativo__perguntas article {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linha);
}

.educativo__perguntas h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.educativo__perguntas p {
  max-width: 44rem;
  color: var(--tinta-suave);
}

.educativo__fecho {
  margin-top: 2rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  max-width: 40rem;
}

.educativo__fontes {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--taupe-texto);
}

@media (min-width: 1024px) {
  .educativo__perguntas article {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
  }
}

/* =====================================================================
   04 · LOCALIZAÇÃO — faixa oliva; a cidade como tipografia
   ===================================================================== */
.local {
  position: relative;
  overflow: hidden;
  background: var(--oliva);
  color: var(--marfim);
  padding: clamp(5rem, 3.5rem + 6vw, 9rem) var(--margem);
}

.local__simbolo {
  position: absolute;
  right: -8%;
  bottom: -22%;
  width: min(36rem, 70vw);
  aspect-ratio: 129 / 145;
  color: var(--marfim);
  opacity: 0.06;
  pointer-events: none;
}

.local__grade {
  position: relative;
  display: grid;
  gap: 2.5rem;
  max-width: var(--largura);
  margin-inline: auto;
}

.local__cabeca {
  display: grid;
  gap: 1rem;
}

.local__cidade {
  display: flex;
  align-items: flex-start;
  gap: 0.15em;
  font-family: var(--serif);
  font-size: clamp(4rem, 2rem + 9vw, 11rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.local__cidade .local__uf {
  margin-top: 0.12em;
  font-family: var(--sans);
  font-size: 0.14em;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--areia-forte);
}

.local__dados {
  display: grid;
  gap: 1.5rem;
  align-content: end;
}

.local__titulo {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.05;
}

.local__lista {
  display: grid;
  border-top: 1px solid rgb(247 243 236 / 0.2);
}

.local__lista div {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgb(247 243 236 / 0.2);
}

.local__lista dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--areia-forte);
}

.local__lista dd,
.local__lista address {
  font-style: normal;
  font-size: 1.08rem;
  line-height: 1.5;
}

@media (min-width: 560px) {
  .local__lista div {
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}

@media (min-width: 1024px) {
  .local__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(3rem, 6vw, 7rem);
  }
}

/* =====================================================================
   05 · DÚVIDAS — título fixo à esquerda, respostas à direita
   ===================================================================== */
.duvidas {
  display: grid;
  gap: 2rem;
  max-width: calc(var(--largura) + var(--margem) * 2);
  margin-inline: auto;
  padding: clamp(5rem, 3.5rem + 6vw, 9rem) var(--margem) clamp(3rem, 2rem + 4vw, 6rem);
}

.duvidas__cabeca {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.duvidas__lista {
  border-top: 1px solid var(--linha);
}

.duvidas details {
  border-bottom: 1px solid var(--linha);
}

.duvidas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  transition: color 200ms var(--curva);
}

.duvidas summary:hover {
  color: var(--taupe-texto);
}

.duvidas summary::-webkit-details-marker {
  display: none;
}

.duvidas summary::after {
  content: '';
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1.5px solid var(--taupe);
  border-bottom: 1.5px solid var(--taupe);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 260ms var(--curva);
}

.duvidas details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.duvidas details p {
  padding-bottom: 1.5rem;
  max-width: var(--leitura);
  color: var(--tinta-suave);
}

.duvidas details a {
  text-underline-offset: 0.25em;
}

@media (min-width: 1024px) {
  .duvidas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 8rem);
  }
  .duvidas__cabeca {
    position: sticky;
    top: calc(var(--topo) + 2.5rem);
    align-self: start;
  }
}

/* =====================================================================
   06 · CONVITE — fechamento centrado, arcos do monograma ao fundo
   ===================================================================== */
.convite {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  padding: clamp(5rem, 3.5rem + 7vw, 10rem) var(--margem);
  background: var(--areia);
  text-align: center;
}

.convite__arcos {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(46rem, 130vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.convite__arcos circle {
  fill: none;
  stroke: var(--luz);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}

.convite > :not(.convite__arcos) {
  position: relative;
}

.convite__simbolo {
  width: 3rem;
  aspect-ratio: 129 / 145;
  color: var(--taupe);
}

.convite__titulo {
  max-width: 15em;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4.4rem);
  font-weight: 300;
  line-height: 1.05;
  text-wrap: balance;
}

.convite__acoes {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--tinta);
  color: var(--areia-forte);
  padding: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) var(--margem) 2rem;
  font-size: 0.9rem;
}

.rodape > * {
  max-width: var(--largura);
  margin-inline: auto;
}

.rodape__assinatura {
  width: min(20rem, 70vw);
  aspect-ratio: 678 / 268;
  background: var(--areia-forte);
  -webkit-mask: url('img/assinatura.png') left center / contain no-repeat;
  mask: url('img/assinatura.png') left center / contain no-repeat;
  margin-bottom: 3rem;
  margin-left: 0;
}

.rodape__colunas {
  display: grid;
  gap: 2rem;
}

.rodape__titulo {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b7ab9c;
}

.rodape a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  color: var(--marfim);
  text-decoration-color: rgb(247 243 236 / 0.35);
  text-underline-offset: 0.3em;
}

.rodape a:focus-visible {
  outline-color: var(--marfim);
}

.rodape__privacidade {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(247 243 236 / 0.14);
  color: #c9bfb2;
  text-wrap: pretty;
}

.rodape__privacidade > span {
  display: block;
  max-width: 52rem;
}

.rodape__privacidade strong {
  color: var(--marfim);
  font-weight: 600;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: #b7ab9c;
}

.rodape__base a {
  color: #b7ab9c;
}

@media (min-width: 768px) {
  .rodape__colunas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- CTA fixo no celular (só depois da abertura; some na localização em diante) ---------- */
.cta-fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.6rem var(--margem) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(247 243 236 / 0.94);
  box-shadow: 0 -1px 0 var(--linha);
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform 300ms var(--curva),
    visibility 0s linear 300ms;
}

.cta-fixo.visivel {
  transform: none;
  visibility: visible;
  transition: transform 300ms var(--curva);
}

@media (min-width: 1024px) {
  .cta-fixo {
    display: none;
  }
}

@media (max-width: 1023px) {
  .rodape {
    padding-bottom: 6rem;
  }
}

/* ---------- Movimento (com intenção; tudo legível sem ele) ---------- */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms var(--curva),
    transform 520ms var(--curva);
}

.js [data-revelar].visivel {
  opacity: 1;
  transform: none;
}

/* Etapas entram em cascata */
.js .etapas li:nth-child(2) { transition-delay: 70ms; }
.js .etapas li:nth-child(3) { transition-delay: 140ms; }
.js .etapas li:nth-child(4) { transition-delay: 210ms; }

/* Abertura, em sequência (linguagem da demo Órbita):
   a marca chega com as letras se aproximando → o retrato abre do centro para a tela e acende →
   o nome sobe linha a linha → "escuta." entra inclinada → mensagem, ações e CRMs → o menu por último.
   Depois, o retrato respira devagar e uma luz quente pulsa sobre ele. */
.js .marca__nome {
  animation: marca-chega 1600ms var(--curva) 150ms both;
}

.js .topo__nav,
.js .topo__cta,
.js .topo__menu,
.js .previa {
  animation: aparece 1200ms var(--curva) 2100ms both;
}

.js .abertura__retrato {
  animation: retrato-abre 2000ms var(--curva-io) 300ms both;
}

.js .abertura__foto img {
  animation:
    retrato-acende 2600ms var(--curva) 300ms both,
    retrato-respira 26s ease-in-out 3200ms infinite alternate;
}

.abertura__brilho {
  position: absolute;
  z-index: -1;
  top: 18%;
  left: 50%;
  width: min(46rem, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 205 150 / 0.16), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  translate: -50% 0;
}

@media (min-width: 1024px) {
  .abertura__brilho {
    left: 66%;
    top: 8%;
  }
}

.js .abertura__brilho {
  animation:
    aparece 1600ms ease 1400ms both,
    brilho 7s ease-in-out 3000ms infinite alternate;
}

.js .abertura__rotulo {
  animation: sobe 1100ms var(--curva) 1100ms both;
}

.js .abertura__dra {
  animation: sobe 1100ms var(--curva) 1250ms both;
}

.js .abertura__linha > span {
  animation: linha-sobe 1400ms var(--curva) 1400ms both;
}

.js .abertura__linha--recuo > span {
  animation-delay: 1540ms;
}

.js .abertura__mensagem {
  animation: sobe 1200ms var(--curva) 1800ms both;
}

.js .abertura__mensagem em {
  display: inline-block;
  animation: inclinada-entra 1500ms var(--curva) 2150ms both;
}

.js .abertura__apoio,
.js .abertura .acoes,
.js .abertura__id {
  animation: sobe 1200ms var(--curva) 2050ms both;
}

.js .abertura .acoes { animation-delay: 2150ms; }
.js .abertura__id { animation-delay: 2300ms; }

/* Traços do monograma se desenham uma vez */
.js .arco path,
.js .convite__arcos circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .arco path {
  animation: traco 1800ms var(--curva) 2000ms forwards;
}

.js .arco .arco__d {
  animation-delay: 2300ms;
}

.js .convite.visivel .convite__arcos circle {
  animation: traco 2200ms var(--curva) forwards;
}

.js .convite.visivel .convite__arcos circle + circle {
  animation-delay: 300ms;
}

@keyframes marca-chega {
  from {
    opacity: 0;
    letter-spacing: 0.7em;
  }
}

@keyframes retrato-abre {
  from {
    clip-path: inset(24% 30% 30% 30%);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes retrato-acende {
  from {
    transform: scale(1.3);
    filter: saturate(0.5) brightness(0.3);
  }
}

@keyframes retrato-respira {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05) translate3d(-1%, -0.6%, 0);
  }
}

@keyframes brilho {
  from {
    opacity: 0.55;
    scale: 0.94;
  }
  to {
    opacity: 1;
    scale: 1.06;
  }
}

@keyframes inclinada-entra {
  from {
    opacity: 0;
    transform: translateY(0.14em) skewX(-8deg);
  }
}

@keyframes linha-sobe {
  from {
    transform: translateY(125%);
  }
}

@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes traco {
  to {
    stroke-dashoffset: 0;
  }
}

/* Linha do tempo: o traço se desenha com a rolagem e cada etapa acende quando ele chega */
.js .etapas::before {
  transform-origin: top;
  transform: scaleY(var(--progresso, 0));
}

.etapa__n {
  transition:
    background-color 450ms var(--curva),
    color 450ms var(--curva),
    box-shadow 450ms var(--curva),
    transform 450ms var(--curva);
}

.js .etapas li.ativa .etapa__n {
  background: var(--oliva);
  color: var(--marfim);
  box-shadow: inset 0 0 0 1px var(--oliva), 0 0 0 6px rgb(196 162 106 / 0.18);
  transform: scale(1.04);
}

/* Retrato da apresentação: revela de baixo para cima, a imagem assenta */
.js .colagem__retrato[data-revelar] {
  opacity: 1;
  transform: none;
}

.js .colagem__retrato[data-revelar] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition:
    clip-path 1200ms var(--curva),
    transform 1600ms var(--curva);
}

.js .colagem__retrato[data-revelar].visivel img {
  clip-path: inset(0);
  transform: none;
}

/* A cidade entra letra a letra */
.local__letras {
  display: inline-flex;
}

.js .local__cidade[data-revelar] {
  transform: none;
}

.js .local__cidade .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition:
    opacity 700ms var(--curva),
    transform 900ms var(--curva);
  transition-delay: calc(var(--i) * 55ms);
}

.js .local__cidade.visivel .letra {
  opacity: 1;
  transform: none;
}

/* Profundidade na rolagem (o JS só aplica sem movimento reduzido) */
.abertura__retrato,
.local__simbolo {
  will-change: transform;
}

@keyframes aparece {
  from {
    opacity: 0;
  }
}

/* Movimento reduzido: sem deslocamentos, zoom ou paralaxe; ficam só os esmaecimentos e os traços */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js [data-revelar] {
    transform: none;
    transition: opacity 700ms ease;
  }
  .js .abertura__retrato {
    animation: none;
  }
  .js .marca__nome,
  .js .abertura__mensagem em,
  .js .abertura__brilho,
  .js .abertura__foto img,
  .js .abertura__linha > span,
  .js .abertura__dra,
  .js .abertura__rotulo,
  .js .abertura__mensagem,
  .js .abertura__apoio,
  .js .abertura .acoes,
  .js .abertura__id {
    animation-name: aparece;
  }
  .js .colagem__retrato[data-revelar] {
    opacity: 0;
    transition: opacity 900ms ease;
  }
  .js .colagem__retrato[data-revelar].visivel {
    opacity: 1;
  }
  .js .colagem__retrato[data-revelar] img {
    clip-path: none;
  }
  .js .colagem__retrato[data-revelar] img,
  .js .local__cidade .letra,
  .js .etapas li.ativa .etapa__n,
  .botao:hover,
  .botao:active {
    transform: none;
  }
  .abertura__retrato,
  .local__simbolo {
    will-change: auto;
  }
}

/* Impressão: só o essencial (identificação, local e contato) */
@media print {
  .topo,
  .cta-fixo,
  .previa,
  .arco,
  .local__simbolo,
  .convite__arcos {
    display: none !important;
  }
  .abertura,
  .local {
    background: none;
    color: var(--tinta);
  }
}

/* Números (CRM, ano, endereço) com algarismos alinhados: a Cormorant usa os "antigos" por padrão */
.ficha dd,
.local__lista dd,
.local__lista address,
.duvidas p,
.etapa__n {
  font-variant-numeric: lining-nums;
}

/* Celulares baixos (ex.: 360×740): retrato um pouco menor para o botão caber na primeira tela */
@media (max-width: 559px) and (max-height: 780px) {
  .abertura__retrato {
    height: 58svh;
  }
  .abertura__texto {
    padding-top: calc(58svh - 6rem);
    gap: 0.85rem;
  }
}