/* Rafaela Koling · v3: a cor passa da ameixa para o vinho do logo (ver DESIGN.md)
   Luxo discreto: tipografia fina, respiro, fotografia com passe-partout e movimento coreografado.
   Nada de dourado brilhando: o Provimento 205/2021 da OAB veda ostentação. */

:root {
  --papel: #F7F2EC;
  --rosado: #F4E9E4;
  --vinho: #87292B;           /* a cor do fundo do logo Franke & Koling */
  --vinho-hover: #A2353A;
  --vinho-profundo: #6A1C1F;
  --vinho-noite: #33100F;
  --tinta: #26191A;
  --tinta-suave: #574645;
  --bronze: #7A5A2C;
  --bronze-fio: #BF9F6E;
  --ouro-claro: #E9CCA0;
  --rosado-claro: #F2DAD3;
  --fio: #E4D7D2;
  --fio-rosado: #DDC9C3;
  --fio-vinho: rgb(242 218 211 / .26);

  --c-fundo: var(--papel);
  --c-texto: var(--tinta);
  --c-foco: #87292B;
  --f-titulo: "Noto Serif Display", ui-serif, serif;
  --raio-foto: 6px;
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: var(--vinho); color: var(--papel); }

/* ---------- tipografia ---------- */
.titulo-2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.375rem, 1.45rem + 3.7vw, 4.375rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--vinho);
  text-wrap: balance;
}
.titulo-2 em,
.hero__titulo em,
.contato__titulo em { font-style: italic; }
/* peso leve só em tela grande: no celular a serifa fina fica frágil demais para quem lê devagar */
@media (min-width: 1100px) {
  .titulo-2, .hero__titulo, .manifesto__texto, .contato__titulo, .rodape__marca { font-weight: 300; }
}

/* ---------- botões: o preenchimento sobe no hover ---------- */
.botao {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.625rem; padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--vinho); color: var(--papel);
  font-weight: 700; font-size: 1.125rem; line-height: 1.2; letter-spacing: .01em; text-decoration: none;
  transition: transform .15s var(--ease-quart);
}
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--vinho-profundo);
  transform: translateY(101%);
  transition: transform .55s var(--ease-expo);
}
.botao:hover::before { transform: none; }
.botao:active { transform: translateY(1px) scale(.99); }
.botao .ico { transition: transform .5s var(--ease-expo); }
.botao:hover .ico { transform: rotate(-8deg) scale(1.08); }
.botao--pequeno { min-height: 2.875rem; padding: .6rem 1.15rem; font-size: 1rem; }
.botao--claro { background: var(--ouro-claro); color: var(--vinho-noite); }
.botao--claro::before { background: var(--papel); }

/* ---------- dois contatos lado a lado (topo e contato): escritório e Dra. ---------- */
.contatos { display: flex; flex-wrap: wrap; gap: .75rem; }
.contato-wa {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 4rem; padding: .7rem 1.6rem .7rem 1.2rem;
  border-radius: 999px; border: 1px solid var(--vinho);
  background: var(--vinho); color: var(--papel); text-decoration: none; line-height: 1.2;
  transition: color .3s var(--ease-quart), border-color .3s var(--ease-quart), transform .15s var(--ease-quart);
}
/* os dois botões são iguais, parados e no hover */
.contato-wa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--vinho-profundo); transform: translateY(101%); transition: transform .55s var(--ease-expo);
}
.contato-wa:hover::before { transform: none; }
.contato-wa:hover { color: var(--papel); border-color: var(--vinho-profundo); }
.contato-wa:active { transform: translateY(1px); }
.contato-wa .ico { width: 1.6em; height: 1.6em; }
.contato-wa__txt { display: grid; }
.contato-wa__quem { font-weight: 700; font-size: 1.0625rem; }
.contato-wa__num { font-size: .9375rem; }
/* sobre o vinho do bloco de contato */
.contatos--claro .contato-wa { background: var(--ouro-claro); border-color: var(--ouro-claro); color: var(--vinho-noite); }
.contatos--claro .contato-wa::before { background: var(--papel); }
.contatos--claro .contato-wa:hover { color: var(--vinho-noite); border-color: var(--papel); }
@media (max-width: 560px) { .contatos { display: grid; width: 100%; } .contato-wa { width: 100%; } }

/* ---------- menu do cabeçalho: com quem falar ---------- */
.escolha-wa { position: relative; }
.escolha-wa > summary { list-style: none; cursor: pointer; }
.escolha-wa > summary::-webkit-details-marker { display: none; }
.escolha-wa__painel {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  width: min(21rem, calc(100vw - 2 * var(--gutter)));
  padding: .5rem; border-radius: 16px;
  background: var(--papel);
  box-shadow: 0 12px 26px -12px rgb(51 16 15 / .38);
  transition: opacity .25s var(--ease-quart), transform .35s var(--ease-expo);
}
@starting-style { .escolha-wa[open] .escolha-wa__painel { opacity: 0; transform: translateY(-6px); } }
.escolha-wa__titulo { padding: .6rem .9rem .35rem; font-size: .9375rem; color: var(--tinta-suave); }
.escolha-wa__op {
  display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; align-items: center;
  padding: .85rem .9rem; border-radius: 12px; text-decoration: none; color: var(--tinta);
  transition: background-color .2s var(--ease-quart);
}
.escolha-wa__op:hover, .escolha-wa__op:focus-visible { background: var(--rosado); }
.escolha-wa__op .ico { grid-row: span 2; width: 1.6rem; height: 1.6rem; color: var(--vinho); }
.escolha-wa__op strong { font-size: 1.0625rem; line-height: 1.2; color: var(--vinho); }
.escolha-wa__op span { font-size: .9375rem; color: var(--tinta-suave); }

/* ---------- abertura em cortina (uma vez por sessão) ---------- */
.intro { display: none; }
.com-intro .intro { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.intro__folha {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--vinho);
  transition: transform 1.1s var(--ease-expo);
}
.intro__folha::after { content: ""; position: absolute; inset: 0; background-image: var(--grao); opacity: .08; mix-blend-mode: soft-light; }
.intro__folha--esq { left: 0; }
.intro__folha--dir { right: 0; }
.intro__marca {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  color: var(--papel); text-align: center;
  animation: intro-surge .9s var(--ease-quart) both;
  transition: opacity .35s var(--ease-quart);
}
.intro__nome { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); letter-spacing: -0.02em; line-height: 1; }
.intro__fio { width: 4rem; height: 1px; background: var(--ouro-claro); transform-origin: center; animation: intro-fio 1s var(--ease-expo) .15s both; }
.intro__area { font-size: .8125rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro-claro); }
.intro-abre .intro__folha--esq { transform: translateX(-101%); }
.intro-abre .intro__folha--dir { transform: translateX(101%); }
.intro-abre .intro__marca { opacity: 0; }
@keyframes intro-surge { from { opacity: 0; transform: translateY(10px); } }
@keyframes intro-fio { from { transform: scaleX(0); } }

/* ---------- topo: some ao descer, volta ao subir, mostra o quanto já foi lido ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--papel);
  transition: transform .5s var(--ease-expo), box-shadow .3s var(--ease-quart);
}
.topo.is-rolado { box-shadow: 0 1px 0 var(--fio); }
.topo.is-escondido { transform: translateY(-100%); }
.topo__progresso {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--bronze-fio);
  transform-origin: left; transform: scaleX(var(--leitura, 0));
}
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.marca { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.marca__nome { font-family: var(--f-titulo); font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: -0.015em; color: var(--vinho); white-space: nowrap; }
.marca__sep { width: 1px; height: 2.125rem; background: var(--fio-rosado); }
.marca__area { font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.topo__nav { display: none; gap: 2.25rem; }
.topo__nav a { position: relative; padding-block: .5rem; font-size: 1rem; text-decoration: none; }
.topo__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px;
  background: var(--bronze-fio); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-expo);
}
.topo__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 560px) { .marca__sep, .marca__area { display: none; } }
@media (min-width: 1100px) { .topo__nav { display: flex; } }

/* ---------- 1 · primeira dobra ---------- */
.hero {
  --hero-topo: clamp(3rem, 7vw, 6rem);
  --hero-base: clamp(5rem, 9vw, 8rem);
  position: relative; overflow: clip;
  padding-block: var(--hero-topo) var(--hero-base);
}
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.5rem, 7vw, 4.5rem); align-items: center; }
.fio { flex: none; width: 3rem; height: 1px; background: var(--bronze-fio); transform-origin: left; }
.hero__titulo {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  line-height: .98; letter-spacing: -0.035em;
  color: var(--vinho); text-wrap: balance;
}
.hero__lead { margin-top: 2.25rem; max-width: 34ch; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.6; }
.hero__acao { margin-top: 2.75rem; display: grid; justify-items: start; gap: 1rem; }
.hero__fone { font-size: 1rem; line-height: 1.45; color: var(--tinta-suave); }

.hero__foto { position: relative; isolation: isolate; }
.hero__painel {
  position: absolute; z-index: -1; overflow: hidden;
  top: 12%; bottom: calc(-1 * var(--hero-base)); left: 28%; right: calc(-1 * var(--gutter));
  background: var(--vinho);
}
.hero__painel::after { content: ""; position: absolute; inset: 0; background-image: var(--grao); opacity: .09; mix-blend-mode: soft-light; }
.hero__img { position: relative; overflow: hidden; border-radius: var(--raio-foto); aspect-ratio: 4 / 5; }
.hero__img img,
.recorte img {
  width: 100%; height: 100%; object-fit: cover;
  --escala: 1.1;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--escala));
  transition: --escala 1.8s var(--ease-expo);
}
.hero__img img { object-position: 50% 28%; }
/* passe-partout: um filete claro por dentro da foto */
.hero__img::after,
.recorte::after {
  content: ""; position: absolute; inset: clamp(8px, 1.2vw, 14px); z-index: 1;
  border: 1px solid rgb(247 242 236 / .38); border-radius: 3px; pointer-events: none;
}
/* a legenda tem fundo vinho próprio: some dentro do painel e garante o contraste
   mesmo se a largura da foto mudar; a largura máxima a mantém dentro da área do painel */
.hero__foto figcaption {
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  width: fit-content; max-width: 68%; margin: 1.1rem 0 0 auto; padding: .35rem 0 .35rem .75rem;
  background: var(--vinho);
  font-size: .9375rem; line-height: 1.4; letter-spacing: .02em; text-align: right; color: var(--rosado-claro);
}
.hero__foto figcaption::before { content: ""; width: 2rem; height: 1px; background: var(--ouro-claro); opacity: .7; }

@media (min-width: 900px) {
  .hero__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero__painel {
    top: calc(-1 * var(--hero-topo)); bottom: calc(-1 * var(--hero-base)); left: 40%;
    right: calc((min(100vw - 2 * var(--gutter), var(--largura)) - 100vw) / 2);
  }
  .hero__foto figcaption { max-width: 56%; }
}

/* entrada da primeira dobra */
.js .hero__painel { transform: scaleX(0); transform-origin: right; }
.js .hero__img { clip-path: inset(0 50% 0 50% round var(--raio-foto)); }
.js .hero__img img { --escala: 1.32; }
.js .hero__lead,
.js .hero__acao,
.js .hero__foto figcaption { opacity: 0; transform: translateY(14px); }
.js .hero__titulo .p__i { filter: blur(8px); }

.is-pronto .hero__painel { transform: none; transition: transform 1.25s var(--ease-expo); }
.is-pronto .hero__img { clip-path: inset(0 0 0 0 round var(--raio-foto)); transition: clip-path 1.45s var(--ease-expo) .25s; }
.is-pronto .hero__img img { --escala: 1.1; }
.is-pronto .hero__titulo .p__i {
  transform: none; filter: none;
  transition: transform 1.25s var(--ease-expo) calc(.25s + var(--k, 0) * 60ms), filter 1s var(--ease-quart) calc(.25s + var(--k, 0) * 60ms);
}
.is-pronto .hero__lead,
.is-pronto .hero__acao,
.is-pronto .hero__foto figcaption {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-quart) var(--atraso, 0s), transform 1s var(--ease-expo) var(--atraso, 0s);
}
.hero__lead { --atraso: .7s; }
.hero__acao { --atraso: .85s; }
.hero__foto figcaption { --atraso: 1.3s; }

/* ---------- 2 · manifesto: as palavras acendem conforme a leitura ---------- */
.manifesto { padding-block: clamp(6rem, 13vw, 11rem) clamp(5rem, 11vw, 9rem); }
.manifesto__texto {
  max-width: 22ch;
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(2.125rem, 1.25rem + 3.6vw, 4.5rem);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--vinho);
}
.manifesto__texto .mp { color: rgb(135 41 43 / .18); transition: color .6s var(--ease-quart); }
.manifesto__texto .mp.on { color: var(--vinho); }
.manifesto__texto em .mp.on { color: var(--bronze); }
.manifesto__assina { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; font-family: var(--f-titulo); font-style: italic; font-size: 1.375rem; color: var(--bronze); }


/* ---------- painéis vinho: começam recuados e se expandem até a borda ao entrar ----------
   O fundo é da própria seção (o recorte é que muda), para o contraste ser o real.
   overflow: clip (e não hidden) para não quebrar o position: sticky dos títulos. */
.painel {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: var(--secao);
  background: var(--vinho); color: var(--papel);
  --c-foco: var(--ouro-claro);
  clip-path: inset(
    calc((1 - var(--p, 1)) * 3.5rem)
    calc((1 - var(--p, 1)) * max(var(--gutter) * .75, (100% - var(--largura)) / 2 - 1rem))
    round calc((1 - var(--p, 1)) * 40px)
  );
}
/* textura de veludo + um brilho bronze que passeia devagar */
.painel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grao); opacity: .09; mix-blend-mode: soft-light; }
.painel__brilho {
  position: absolute; z-index: -1; left: 50%; top: 50%; pointer-events: none;
  width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax;
  background: radial-gradient(closest-side, rgb(233 204 160 / .16), rgb(233 204 160 / 0));
  animation: veludo 26s ease-in-out infinite alternate;
}
@keyframes veludo {
  from { transform: translate3d(-28%, -20%, 0); }
  to { transform: translate3d(26%, 22%, 0); }
}

/* ---------- 3 · situações ---------- */
.situacoes__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.situacoes .titulo-2 { color: var(--papel); }
.situacoes__sub { margin-top: 1.5rem; max-width: 30ch; color: var(--rosado-claro); }
.situacoes__lista li { position: relative; }
.situacoes__lista li::before,
.situacoes__lista li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--fio-vinho); transform-origin: left;
}
.situacoes__lista li::before { top: 0; }
.situacoes__lista li:last-child::after { bottom: 0; }
.sit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center;
  margin-inline: -1rem; padding: 1.6rem 1rem;
  text-decoration: none;
  transition: background-color .4s var(--ease-quart);
}
.sit__frase {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--papel); text-wrap: pretty;
  transition: transform .65s var(--ease-expo);
}
.sit__beneficio {
  grid-column: 1; margin-top: .45rem;
  font-size: 1rem; letter-spacing: .02em; color: var(--rosado-claro);
  transition: transform .65s var(--ease-expo) .04s, color .35s var(--ease-quart);
}
.sit__seta {
  position: relative; isolation: isolate; overflow: hidden;
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid var(--fio-vinho); color: var(--ouro-claro);
  transition: color .35s var(--ease-quart), border-color .35s var(--ease-quart);
}
.sit__seta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--ouro-claro); transform: scale(0);
  transition: transform .55s var(--ease-expo);
}
.sit__seta .ico { width: 1.25rem; height: 1.25rem; transition: transform .55s var(--ease-expo); }
.sit:hover, .sit:focus-visible { background: rgb(247 242 236 / .04); }
.sit:hover .sit__frase, .sit:focus-visible .sit__frase,
.sit:hover .sit__beneficio, .sit:focus-visible .sit__beneficio { transform: translateX(.6rem); }
.sit:hover .sit__beneficio, .sit:focus-visible .sit__beneficio { color: var(--ouro-claro); }
.sit:hover .sit__seta, .sit:focus-visible .sit__seta { color: var(--vinho); border-color: var(--ouro-claro); }
.sit:hover .sit__seta::before, .sit:focus-visible .sit__seta::before { transform: none; }
.sit:hover .sit__seta .ico, .sit:focus-visible .sit__seta .ico { transform: translateX(3px); }
.sit:focus-visible { outline-offset: -3px; }

/* cada linha: o filete se desenha e a frase sobe logo depois */
.js [data-reveal="linha"] { opacity: 1; transform: none; }
.js [data-reveal="linha"]::before { transform: scaleX(0); transition: transform 1.1s var(--ease-expo) var(--d, 0ms); }
.js [data-reveal="linha"] .sit { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-quart) calc(var(--d, 0ms) + .12s), transform .9s var(--ease-expo) calc(var(--d, 0ms) + .12s), background-color .4s var(--ease-quart); }
.js [data-reveal="linha"].is-in::before { transform: none; }
.js [data-reveal="linha"].is-in .sit { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .situacoes__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5rem; align-items: start; }
  .situacoes__cabeca { position: sticky; top: 7rem; }
}

/* ---------- fotos: abrem como cortina ao entrar na tela ----------
   O observador fica na figure: com o clip-path no próprio alvo, o IntersectionObserver
   do Chrome mede área visível zero e a cortina nunca abriria. */
.recorte { position: relative; overflow: hidden; border-radius: var(--raio-foto); }
.js [data-reveal="cortina"] { opacity: 1; transform: none; }
.js [data-reveal="cortina"] .recorte {
  clip-path: inset(0 50% 0 50% round var(--raio-foto));
  transition: clip-path 1.3s var(--ease-expo);
}
.js [data-reveal="cortina"] .recorte img { --escala: 1.3; }
.js [data-reveal="cortina"].is-in .recorte { clip-path: inset(0 0 0 0 round var(--raio-foto)); }
.js [data-reveal="cortina"].is-in .recorte img { --escala: 1.1; }
figure figcaption.legenda {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1rem; font-size: .9375rem; color: var(--tinta-suave);
}
figure figcaption.legenda::before { content: ""; width: 2rem; height: 1px; background: var(--bronze-fio); }

/* ---------- 4 · como funciona ---------- */
.como { padding-block: var(--secao); }
.como__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
.como__intro { margin-top: 1.5rem; max-width: 34ch; color: var(--tinta-suave); }
.como__foto { margin-top: 2.75rem; max-width: 24rem; }

.passos { position: relative; display: grid; gap: clamp(3rem, 6vw, 4.5rem); padding-left: 5.25rem; }
.passos::before,
.passos::after { content: ""; position: absolute; left: calc(1.75rem - .5px); top: 1.75rem; bottom: 1.75rem; width: 1px; }
.passos::before { background: var(--fio); }
.passos::after { background: var(--bronze-fio); transform-origin: top; transform: scaleY(var(--p, 1)); }
.passo { position: relative; }
.passo__n {
  position: absolute; left: -5.25rem; top: -.35rem;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--papel); border: 1px solid var(--fio);
  font-family: var(--f-titulo); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--tinta-suave);
  transition: border-color .7s var(--ease-quart) .15s, color .7s var(--ease-quart) .15s;
}
/* ao ser alcançado, o número acende e solta um anel que se desfaz */
.passo__n::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--bronze-fio); opacity: 0;
}
.passo.is-in .passo__n,
html:not(.js) .passo__n { border-color: var(--bronze-fio); color: var(--bronze); }
.passo.is-in .passo__n::after { animation: anel 1.4s var(--ease-expo) calc(var(--d, 0ms) + .2s); }
@keyframes anel { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.passo h3 {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--vinho);
}
.passo p { margin-top: .75rem; max-width: 44ch; }

@media (min-width: 900px) {
  .como__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 7rem); }
  .como__lado { position: sticky; top: 7rem; align-self: start; }
  .passos { margin-top: 1rem; }
}

/* ---------- 5 · quem sou ---------- */
.quem { padding-block: var(--secao); background: var(--rosado); }
.quem__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.quem__texto > * + * { margin-top: 1.35rem; }
.quem__texto p { max-width: 58ch; }
.quem__texto .titulo-2 { margin-bottom: .75rem; }
.citacao p {
  font-family: var(--f-titulo); font-style: italic; font-weight: 400;
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem); line-height: 1.3;
  color: var(--vinho); text-wrap: balance;
}
.citacao--quem { margin-block: 2.25rem !important; padding-block: 2rem; border-block: 1px solid var(--fio-rosado); }
.assinatura {
  margin-top: 2.25rem !important;
  font-family: var(--f-titulo); font-style: italic; font-weight: 300;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1; color: var(--vinho);
}
.credenciais {
  display: grid; gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: 2.25rem !important; padding-top: 1.75rem; border-top: 1px solid var(--fio-rosado);
}
.credenciais dt { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.credenciais dd { margin-top: .35rem; font-size: 1.0625rem; font-weight: 700; }

@media (min-width: 900px) {
  .quem__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 7rem); }
}

/* ---------- 6 · documentos: o palco da balança 3D ----------
   Fundo vinho-noite para a luz de cena funcionar. No computador o palco fica preso à
   direita e cada item da lista que cruza o meio da tela acende e derruba o seu documento;
   no celular nada fica preso: o palco vem entre o título e a lista. */
.docs {
  padding-block: var(--secao);
  background: var(--vinho-noite); color: var(--papel);
  --c-foco: var(--ouro-claro);
  overflow-x: clip; /* a luz de cena passa da borda; clip (e não hidden) para não soltar o palco preso */
}
.docs .titulo-2 { color: var(--papel); }
.docs .titulo-2 em { color: var(--ouro-claro); }
.docs__grade {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cabeca" "palco" "lista";
  gap: 2.5rem;
}
.docs__cabeca { grid-area: cabeca; }
.docs__cabeca p { margin-top: 1.5rem; max-width: 32ch; color: var(--rosado-claro); }
.docs__palco { grid-area: palco; }
.docs__lista { grid-area: lista; display: grid; column-gap: 3rem; }
.docs__lista li {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding-block: 1.25rem; border-top: 1px solid var(--fio-vinho);
  transition: color .6s var(--ease-quart);
}
.docs__lista small { display: block; font-size: 1.0625rem; color: var(--rosado-claro); transition: color .6s var(--ease-quart); }
.check {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; margin-top: -.1rem; border-radius: 50%;
  border: 1px solid rgb(233 204 160 / .55); color: var(--ouro-claro);
  transition: background-color .6s var(--ease-quart), color .6s var(--ease-quart), border-color .6s var(--ease-quart), transform .6s var(--ease-expo);
}
.check svg { width: 1.05rem; height: 1.05rem; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* o visto se desenha quando o item aparece */
.js .docs__lista [data-reveal] .check svg { stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease-quart) calc(var(--d, 0ms) + .3s); }
.js .docs__lista [data-reveal].is-in .check svg { stroke-dashoffset: 0; }

.palco { position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 5; max-height: 78vh; margin-inline: auto; }
/* luz de cena: feixe vindo do alto à esquerda e poça quente onde a balança pisa */
.palco::before {
  content: ""; position: absolute; inset: -12% -18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 62% at 30% 8%, rgb(255 226 189 / .10), rgb(255 226 189 / 0) 70%),
    radial-gradient(ellipse 46% 13% at 50% 86%, rgb(233 204 160 / .17), rgb(233 204 160 / 0) 72%);
}
.palco__tela { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-quart); }
.palco.is-aceso .palco__tela { opacity: 1; }
.palco__reserva { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.palco.sem-webgl .palco__reserva { display: block; }
.palco.sem-webgl .palco__tela { display: none; }
.palco__legenda {
  margin-top: 1rem; text-align: center; text-wrap: balance;
  font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  color: var(--ouro-claro);
}

@media (min-width: 700px) and (max-width: 899px) { .docs__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .docs__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "cabeca palco" "lista palco";
    column-gap: clamp(3rem, 6vw, 6rem); row-gap: 3rem; align-items: start;
  }
  .docs__palco { position: sticky; top: 9vh; align-self: start; }
  .palco { height: 76vh; aspect-ratio: auto; max-height: none; }
  /* cada item vira um capítulo: apagado até cruzar o meio da tela, aceso depois */
  /* respiro no fim: o palco segue preso enquanto o último documento cai e a balança se acomoda */
  .docs__lista { padding-bottom: 40vh; }
  .docs__lista li { min-height: 17vh; align-items: center; }
  /* só com a cena 3D rodando (o balanca3d.js põe .com-palco); sem ela a lista fica toda acesa */
  .docs.com-palco .docs__lista li { color: rgb(242 218 211 / .6); }
  .docs.com-palco .docs__lista li small { color: rgb(242 218 211 / .6); }
  .docs.com-palco .docs__lista li.is-ativo { color: var(--papel); }
  .docs.com-palco .docs__lista li.is-ativo small { color: var(--rosado-claro); }
  .docs.com-palco .docs__lista li.is-ativo .check { background: var(--ouro-claro); border-color: var(--ouro-claro); color: var(--vinho-noite); transform: scale(1.08); }
}

/* ---------- 7 · dúvidas ---------- */
/* respiro no topo também: desde 15/10 a seção anterior é o palco escuro, não papel */
.duvidas { padding-block: var(--secao); }
.duvidas__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.duvida { border-top: 1px solid var(--fio); }
.duvida:last-child { border-bottom: 1px solid var(--fio); }
.duvida summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.6rem;
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem); line-height: 1.3; color: var(--vinho);
  transition: color .3s var(--ease-quart);
}
.duvida summary:hover { color: var(--vinho-hover); }
.mais {
  position: relative; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--fio-rosado);
  transition: transform .5s var(--ease-expo), background-color .3s var(--ease-quart), border-color .3s;
}
.mais::before,
.mais::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: var(--vinho); transition: background-color .3s;
}
.mais::after { transform: rotate(90deg); }
.duvida summary:hover .mais { border-color: var(--vinho); }
.duvida[open] .mais { transform: rotate(135deg); background: var(--vinho); border-color: var(--vinho); }
.duvida[open] .mais::before,
.duvida[open] .mais::after { background: var(--papel); }
.duvida .resp { padding-bottom: 1.75rem; max-width: 60ch; }
.duvida .resp p { transition: opacity .5s var(--ease-quart) .1s, transform .6s var(--ease-expo) .1s; }
@starting-style { .duvida[open] .resp p { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 900px) { .duvidas__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5rem; } }

/* ---------- 8 · contato ---------- */
.contato { padding-block: clamp(6rem, 12vw, 10rem) var(--secao); }
.contato__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.contato__titulo {
  max-width: 12ch;
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem); line-height: .98; letter-spacing: -0.035em;
  color: var(--papel);
}
.contato__titulo em { color: var(--ouro-claro); }
.contato__acao { display: grid; justify-items: start; gap: 1.25rem; }
.contato__dados {
  display: grid; gap: 1.75rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding-top: 2.25rem; border-top: 1px solid var(--fio-vinho);
}
.contato__dados dt { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rosado-claro); }
.contato__dados dd { margin-top: .5rem; font-size: 1.0625rem; }
.link-fio {
  color: var(--ouro-claro); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-expo);
}
.link-fio:hover { background-size: 0 1px; background-position: 100% 100%; }

.contato__texto { display: grid; gap: 2.5rem; }
.contato__foto { width: 100%; max-width: 22rem; }

@media (min-width: 900px) {
  .contato__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 4rem; }
  .contato__foto { justify-self: end; }
  .contato__dados { grid-column: 1 / -1; margin-top: 1.5rem; }
}

/* ---------- rodapé ---------- */
.rodape {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 8vw, 6rem) 6.5rem;
  background: var(--vinho-noite); color: var(--rosado-claro);
  font-size: 1rem;
}
.rodape__topo { display: grid; gap: 2rem; }
.rodape__nav { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.rodape__nav a { color: var(--papel); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-expo); }
.rodape__nav a:hover { background-size: 100% 1px; }
.rodape__dados p + p { margin-top: .35rem; }
.rodape__marca {
  margin-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--f-titulo); font-weight: 400;
  font-size: min(11.2vw, 10.5rem); line-height: .9; letter-spacing: -0.045em;
  color: var(--papel); white-space: nowrap;
}
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding-top: 1.5rem; border-top: 1px solid rgb(242 218 211 / .2);
  font-size: .9375rem;
}
@media (min-width: 700px) { .rodape__topo { grid-template-columns: 1fr 1fr; } .rodape__dados { text-align: right; } }
@media (min-width: 900px) { .rodape { padding-bottom: 2.5rem; } }

.wa-barra {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: var(--vinho); color: var(--papel); box-shadow: 0 -1px 0 rgb(51 16 15 / .25);
}
.wa-barra__op {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.875rem; padding: .55rem .75rem;
  color: var(--papel); text-decoration: none; font-weight: 700; font-size: 1.0625rem; line-height: 1.15;
}
.wa-barra__op + .wa-barra__op { border-left: 1px solid rgb(247 242 236 / .22); }
.wa-barra__op small { display: block; font-size: .8125rem; font-weight: 400; color: var(--rosado-claro); }
.wa-barra__op:active { background: var(--vinho-profundo); }
@media (min-width: 900px) { .wa-barra { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .painel__brilho { animation: none; }
  .js [data-reveal="cortina"] .recorte { clip-path: none; }
  .manifesto__texto .mp { color: var(--vinho); }
  .js [data-reveal="linha"]::before { transform: none; }
  .js [data-reveal="linha"] .sit { opacity: 1; transform: none; }
  .js .docs__lista [data-reveal] .check svg { stroke-dashoffset: 0; }
  .passo.is-in .passo__n::after { animation: none; }
}