/* ==========================================================================
   Carolina Molina D'Aqui — Advocacia
   Site BPC/LOAS · paleta LUZ com bordô de âncora e ouro de ponte
   Tokens extraídos de "Carolina molina daqui/guide.css"
   ========================================================================== */

:root {
  /* Âncoras de marca */
  --vinho-noturno: #2F0F18;
  --bordo-profundo: #5C1E2D;
  --bordo: #6B2335;
  --dourado-antigo: #9A7A3D;
  --dourado-texto: #785F30;  /* dourado-antigo escurecido — só para texto, 4.5:1+ em qualquer fundo claro da página */
  --dourado-champagne: #C9A55C;
  --dourado-claro: #DDBF87;
  --marfim: #F4ECDA;
  --marfim-claro: #FAF5EC;

  /* Paleta LUZ */
  --rosa-po: #E8D0CC;
  --rosa-petal: #F1DEDA;
  --champanhe-claro: #EDDFC4;
  --perola: #FBF7EE;
  --malva: #BFA0A4;

  /* Neutros funcionais */
  --grafite: #2A1F22;
  --grafite-suave: #534549;
  --linha: rgba(154, 122, 61, 0.22);
  --linha-forte: rgba(154, 122, 61, 0.45);

  /* Três papéis tipográficos:
     display  — Italiana, só em h1/h2 e números grandes
     texto    — Jost, tudo que se lê (era Cormorant, trocado por legibilidade)
     citação  — Cormorant Garamond, só em itálicos grandes, onde ele brilha  */
  --font-display: 'Italiana', 'Cormorant Garamond', serif;
  --font-texto: 'Jost', system-ui, -apple-system, sans-serif;
  --font-citacao: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', system-ui, -apple-system, sans-serif;

  /* Italiana só existe no peso 400 — não há bold dela. Para engrossar os
     títulos usamos contorno da própria cor, com paint-order para o traço ficar
     atrás do preenchimento e não fechar os vazios das letras.
     0 = original · 0.019em = engrossada · 0.035em = limite do truque. */
  --titulo-peso: 0.019em;

  /* Raios — cantos arredondados para o site soar mais acolhedor.
     p = botões e campos · m = cartões e caixas · g = blocos grandes */
  --raio-p: 0.55rem;
  --raio-m: 0.9rem;
  --raio-g: 1.35rem;

  --medida: 36rem;      /* medida de leitura confortável */
  --largura: 72rem;     /* largura máxima do container */
  --respiro: clamp(4rem, 9vw, 7.5rem);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 64rem) {
  html { scroll-padding-top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--perola);
  color: var(--grafite);
  font-family: var(--font-texto);
  font-size: clamp(0.975rem, 0.35vw + 0.885rem, 1.0625rem);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--bordo-profundo); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--dourado-texto); }

:focus-visible {
  outline: 2px solid var(--bordo-profundo);
  outline-offset: 3px;
}

/* --------------------------------------------------------- tipografia -- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--bordo-profundo);
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1, h2 {
  -webkit-text-stroke: var(--titulo-peso) currentColor;
  paint-order: stroke fill;
}

h1 { font-size: clamp(2.15rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.95rem, 4vw, 3rem); }

h3 {
  font-family: var(--font-texto);
  font-size: clamp(1.08rem, 1.2vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vinho-noturno);
  line-height: 1.3;
  margin: 2.5rem 0 0.6rem;
}

p { margin: 0 0 1.25rem; max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--vinho-noturno); }

.etiqueta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin: 0 0 1.4rem;
  max-width: none;
}

/* No hero, esta linha carrega os dois termos que a pessoa busca — "benefício
   assistencial" e "transtorno do espectro autista". Precisa ler como
   informação, não como etiqueta discreta: maior, sem caixa-alta esticada. */
.etiqueta--hero {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bordo-profundo);
  margin-bottom: 1.1rem;
}

.abertura {
  font-family: var(--font-citacao);
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.65;
  color: var(--grafite-suave);
  font-style: italic;
}

/* Frase de assinatura da marca — respiro e contemplação */
.assinatura {
  font-family: var(--font-citacao);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--bordo-profundo);
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

/* ------------------------------------------------------------ estrutura -- */

.container {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.secao { padding-block: var(--respiro); }
.secao--marfim { background: var(--marfim-claro); }
.secao--petala { background: var(--rosa-petal); }

.secao--vinho {
  background: var(--vinho-noturno);
  color: var(--marfim);
}
.secao--vinho h2, .secao--vinho h3 { color: var(--marfim); }
.secao--vinho .etiqueta { color: var(--dourado-claro); }
.secao--vinho strong { color: var(--dourado-claro); }
.secao--vinho a { color: var(--dourado-claro); }

.regra {
  border: 0;
  height: 1px;
  background: var(--linha);
  margin: 0;
}

.filete {
  width: 3.5rem;
  height: 1px;
  background: var(--dourado-champagne);
  margin: 2rem 0;
}

/* Duas colunas: texto corrido + coluna de apoio */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------- cabeçalho -- */

/* Fixo apenas no desktop: no celular, um cabeçalho de duas linhas grudado no
   topo comeria metade da tela. Lá o CTA persistente é o botão flutuante. */
.topo {
  z-index: 50;
  background: rgba(251, 247, 238, 0.93);
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 64rem) {
  .topo {
    position: sticky;
    top: 0;
    backdrop-filter: saturate(160%) blur(10px);
  }
}

.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}
@media (min-width: 64rem) {
  .topo__interno { flex-wrap: nowrap; padding-block: 0; min-height: 4.75rem; }
}

.topo__marca { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; min-width: 0; }
.topo__marca img { height: clamp(2.3rem, 5.5vw, 2.9rem); width: auto; }


/* Abaixo de 64rem a nav é um painel que abre pelo botão Menu. A faixa rolável
   que havia antes não se anunciava: ninguém adivinha que precisa arrastar. */
.nav {
  display: none;
  order: 3;
  flex-basis: 100%;
  flex-direction: column;
  border-top: 1px solid var(--linha);
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}
.nav[data-aberto] { display: flex; }

@media (min-width: 64rem) {
  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    order: 0;
    flex-basis: auto;
    gap: 1.9rem;
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }
}

.nav a {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite-suave);
  text-decoration: none;
  display: block;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid rgba(154, 122, 61, 0.14);
  transition: color .2s, border-color .2s;
}
.nav a:last-child { border-bottom: 0; }

@media (min-width: 64rem) {
  .nav a {
    font-size: 0.76rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
  }
  .nav a:last-child { border-bottom: 1px solid transparent; }
}
.nav a:hover { color: var(--bordo-profundo); border-bottom-color: var(--dourado-champagne); }

/* ------------------------------------------------------------- botões -- */

.botao {
  border-radius: var(--raio-p);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--bordo-profundo);
  color: var(--bordo-profundo);
  background: transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.botao:hover {
  background: var(--bordo-profundo);
  color: var(--marfim-claro);
  border-color: var(--bordo-profundo);
}

.botao--solido {
  background: var(--bordo-profundo);
  color: var(--marfim-claro);
}
.botao--solido:hover {
  background: var(--vinho-noturno);
  border-color: var(--vinho-noturno);
  color: var(--marfim-claro);
}

.botao--claro {
  border-color: var(--dourado-champagne);
  color: var(--dourado-claro);
}
.botao--claro:hover {
  background: var(--dourado-champagne);
  color: var(--vinho-noturno);
  border-color: var(--dourado-champagne);
}

/* No celular esse botão viraria uma terceira linha no cabeçalho, e o contato já
   está na faixa de navegação e no botão flutuante. */
.botao--compacto { display: none; padding: 0.6rem 1.1rem; font-size: 0.7rem; }
@media (min-width: 64rem) { .botao--compacto { display: inline-flex; } }

/* --------------------------------------------------------------- hero -- */

.hero {
  padding-block: clamp(4.5rem, 11vw, 9rem);
  background:
    radial-gradient(58rem 34rem at 82% -12%, var(--rosa-petal) 0%, transparent 62%),
    linear-gradient(180deg, var(--perola) 0%, var(--marfim-claro) 100%);
  border-bottom: 1px solid var(--linha);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero h1 { margin-bottom: 1.5rem; }
.hero .abertura { margin-bottom: 2.25rem; }

.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* Coluna da direita: retrato e, logo abaixo, a nota de atuação.
   No celular a grade empilha e a ordem se mantém. */
.hero__lado {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-self: center;
  width: 100%;
  max-width: min(30rem, 82vw);
}

.hero__nota {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--grafite-suave);
  /* 1.1rem abaixo da foto está o filete de ouro deslocado — a margem o libera */
  margin: 2.6rem 0 0;
  max-width: none;
  line-height: 1.75;
}

/* Retrato — retângulo 4:5 com filete de ouro deslocado. Retângulo, e não círculo:
   lê como editorial em vez de avatar de rede social. */
.retrato {
  position: relative;
  margin: 0;
  width: 100%;
}
.retrato img {
  border-radius: var(--raio-g);
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
.retrato::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g);
  pointer-events: none;
}
@media (max-width: 46rem) {
  .retrato::after { inset: 0.7rem -0.7rem -0.7rem 0.7rem; }
}

/* ------------------------------------------------------ ornamento de seção -- */

.divisor {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 22rem;
  margin: 3.5rem auto 0;
}
.divisor::before,
.divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-forte));
}
.divisor::after { background: linear-gradient(90deg, var(--linha-forte), transparent); }

.divisor span {
  width: 0.45rem;
  height: 0.45rem;
  transform: rotate(45deg);
  border: 1px solid var(--dourado-champagne);
  flex: none;
}

/* ------------------------------------------------------------- esquema -- */

.esquema {
  margin: 3rem 0 0;
  max-width: 55rem;
}

.esquema figcaption {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--grafite-suave);
  margin-top: 1rem;
  max-width: 34rem;
}

/* --------------------------------------------------------------- listas -- */

.lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  max-width: var(--medida);
}

.lista li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--dourado-champagne);
}
.secao--vinho .lista li::before { background: var(--dourado-claro); }

/* Passo a passo — linha do tempo com nós numerados ligados por um filete */
.passos {
  counter-reset: passo;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--medida);
}
.passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 3.6rem;
  padding-bottom: 1.9rem;
}
.passos li:last-child { padding-bottom: 0; }

.passos li::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 2.1rem;
  bottom: 0;
  width: 1px;
  background: var(--linha);
}
.passos li:last-child::after { display: none; }

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--dourado-champagne);
  border-radius: 50%;
  background: var(--perola);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: var(--dourado-texto);
}

/* ---------------------------------------------------------- destaques -- */

.quadro {
  border-left: 2px solid var(--dourado-champagne);
  padding: 0.35rem 0 0.35rem 1.6rem;
  margin: 2rem 0;
  max-width: var(--medida);
}
.quadro p { font-family: var(--font-citacao); font-size: 1.15em; font-style: italic; color: var(--grafite-suave); }

.painel {
  border-radius: var(--raio-m);
  background: var(--perola);
  border: 1px solid var(--linha);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.secao--marfim .painel { background: var(--marfim); }
.painel h3 { margin-top: 0; }
.painel .lista { margin-bottom: 0; }

/* Variante de destaque para painel sobre fundo escuro — mesmo tratamento que
   .secao--vinho .cartao já usa, extraído aqui para não repetir style inline. */
.secao--vinho .painel--destaque {
  background: rgba(244, 236, 218, 0.06);
  border-color: rgba(201, 165, 92, 0.3);
}
.secao--vinho .painel--destaque h3 { color: var(--dourado-claro); }

.grade {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 46rem) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .grade--tres { grid-template-columns: repeat(3, 1fr); } }

.cartao {
  border-radius: var(--raio-m);
  border-top: 1px solid var(--linha-forte);
  padding-top: 1.4rem;
}
.cartao h3 { margin-top: 0; font-size: 1.15rem; }
.cartao p { font-size: 0.98rem; line-height: 1.7; margin-bottom: 0; }

/* Base legal */
.lei {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--grafite-suave);
  line-height: 1.7;
}
.secao--vinho .lei { color: var(--rosa-po); }

/* ------------------------------------------------------------------ faq -- */

.faq { max-width: 46rem; margin-top: 3rem; }

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

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative;
  font-family: var(--font-texto);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--vinho-noturno);
  line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--dourado-antigo);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--bordo-profundo); }

.faq details > div { padding: 0 0 1.6rem; }
.faq details p { max-width: 42rem; }

/* -------------------------------------------------------------- contato -- */

.contato__linhas { margin-top: 2.5rem; }

.contato__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(221, 191, 135, 0.25);
  align-items: baseline;
}

.contato__rotulo {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dourado-claro);
  flex: 0 0 9rem;
}

.contato__valor { font-size: 1.1rem; }
.contato__valor a { text-decoration: none; border-bottom: 1px solid rgba(221, 191, 135, 0.4); }

/* --------------------------------------------------------------- rodapé -- */

.rodape {
  background: var(--vinho-noturno);
  color: var(--rosa-po);
  /* folga extra embaixo para o botão flutuante não cobrir o aviso legal */
  padding-block: 4rem 7rem;
  border-top: 1px solid rgba(201, 165, 92, 0.25);
}

.rodape__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 52rem) { .rodape__grid { grid-template-columns: 1fr auto; } }

.rodape img { height: 2.4rem; width: auto; margin-bottom: 1.5rem; }

.rodape p {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--malva);
  max-width: 32rem;
}

.rodape__oab {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dourado-claro);
  margin-bottom: 0.9rem;
}

.rodape__aviso {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(201, 165, 92, 0.18);
  font-size: 0.72rem !important;
  color: rgba(191, 160, 164, 0.75) !important;
  max-width: 46rem !important;
}

/* ---------------------------------------------------- whatsapp flutuante -- */

.flutuante {
  border-radius: var(--raio-p);
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bordo-profundo);
  color: var(--marfim-claro);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.05rem;
  border: 1px solid var(--dourado-antigo);
  box-shadow: 0 6px 28px rgba(47, 15, 24, 0.22);
  transition: background .25s;
}
.flutuante:hover { background: var(--vinho-noturno); color: var(--marfim-claro); }
@media (min-width: 64rem) { .flutuante { right: 2rem; bottom: 2rem; } }

/* ------------------------------------------------------------ utilidades -- */

.centro { text-align: center; }
.centro p, .centro .lista { margin-inline: auto; }

.visualmente-oculto {
  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: -9999px;
  top: 0;
  background: var(--bordo-profundo);
  color: var(--marfim-claro);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  z-index: 100;
}
.pular:focus { left: 0; }

@media print {
  .topo, .flutuante, .nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* ==========================================================================
   Componentes interativos e movimento
   ========================================================================== */

/* ----------------------------------------------------- revelação no scroll */

/* Só esconde quando há JS para revelar de volta — a classe .js é posta no
   <html> por um script inline no <head>. Sem JS, nada some. */
.js [data-revela] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js [data-revela].revelado {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-revela] { opacity: 1; transform: none; transition: none; }
}

.nav a.nav--atual {
  color: var(--bordo-profundo);
  border-bottom-color: var(--dourado-champagne);
}

/* ------------------------------------------------------------ checklist -- */

.checklist {
  margin-top: 3rem;
  border-top: 1px solid var(--linha-forte);
  padding-top: 2rem;
}

.checklist__cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: end;
  justify-content: space-between;
}
.checklist__cabeca h3 { margin-top: 0; }
.checklist__intro {
  font-size: 0.95rem;
  color: var(--grafite-suave);
  max-width: 32rem;
  margin: 0;
}

.checklist__medidor { flex: 0 0 12rem; }
.checklist__contagem {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.checklist__barra {
  border-radius: 99px;
  height: 2px;
  background: var(--linha);
  position: relative;
  overflow: hidden;
}
.checklist__barra::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progresso, 0%);
  background: var(--dourado-champagne);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .checklist__barra::after { transition: none; }
}

.checklist__grade {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}
@media (min-width: 52rem) { .checklist__grade { grid-template-columns: 1fr 1fr; } }

.checklist__grade fieldset { border: 0; margin: 0; padding: 0; }
.checklist__grade legend {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  padding: 0 0 0.9rem;
}

.checklist__grade label {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.6rem 0;
  cursor: pointer;
  line-height: 1.6;
  border-bottom: 1px solid rgba(154, 122, 61, 0.12);
}
.checklist__grade label:hover span { color: var(--bordo-profundo); }

.checklist__grade input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.2rem;
  border: 1px solid var(--linha-forte);
  background: var(--perola);
  cursor: pointer;
  position: relative;
  top: 0.2rem;
  transition: background .2s, border-color .2s;
}
.checklist__grade input:checked {
  background: var(--bordo-profundo);
  border-color: var(--bordo-profundo);
}
.checklist__grade input:checked::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.1rem;
  width: 0.22rem;
  height: 0.45rem;
  border: solid var(--marfim-claro);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.checklist__grade input:focus-visible { outline: 2px solid var(--bordo-profundo); outline-offset: 2px; }
.checklist__grade input:checked + span { color: var(--grafite-suave); text-decoration: line-through; }

/* --------------------------------------------------  motivos da negativa -- */

.motivos { margin: 1rem 0 3.5rem; }

.motivos__abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
}

.motivo__botao {
  border-radius: var(--raio-p);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite-suave);
  background: transparent;
  border: 1px solid var(--linha);
    padding: 0.65rem 1.05rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.motivo__botao:hover { border-color: var(--dourado-champagne); color: var(--bordo-profundo); }
.motivo__botao[aria-selected="true"] {
  background: var(--bordo-profundo);
  border-color: var(--bordo-profundo);
  color: var(--marfim-claro);
}
.motivo__botao:focus-visible { outline: 2px solid var(--bordo-profundo); outline-offset: 3px; }

.motivo__detalhe {
  margin-top: 1.75rem;
  border-left: 2px solid var(--dourado-champagne);
  padding: 0.25rem 0 0.25rem 1.6rem;
  max-width: 44rem;
}
.motivo__detalhe h3 { margin-top: 0; }
.motivo__detalhe p { font-size: 1rem; line-height: 1.75; }
.motivo__detalhe p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Ícones, caixas e chamadas para WhatsApp
   ========================================================================== */

.sprite { display: none; }

.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
  color: var(--dourado-antigo);
}
.icone--zap { width: 1.05em; height: 1.05em; color: currentColor; }

/* h3 com ícone vira linha alinhada pelo topo do texto */
h3:has(> .icone) {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
h3 > .icone { width: 1.05em; height: 1.05em; }

.secao--vinho .icone { color: var(--dourado-claro); }

/* ----------------------------------------------------  cartões em caixa -- */

.cartao {
  border: 1px solid var(--linha);
  border-top: 2px solid var(--dourado-champagne);
  background: var(--perola);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  transition: border-color .25s, transform .25s;
}
.secao--marfim .cartao { background: var(--marfim); }
.secao--vinho .cartao {
  background: rgba(244, 236, 218, 0.05);
  border-color: rgba(201, 165, 92, 0.28);
  border-top-color: var(--dourado-champagne);
}
.cartao:hover { border-color: var(--linha-forte); }
.cartao h3 { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cartao:hover { transform: translateY(-2px); }
}

/* --------------------------------------------------------  painel caixa -- */

.painel { border-top: 2px solid var(--dourado-champagne); }

/* ------------------------------------------------------  chamada WhatsApp */

.cta-zap {
  border-radius: var(--raio-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--marfim);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--bordo-profundo);
}
/* :not() para o modificador escuro não ser atropelado por este seletor —
   dois nomes de classe venciam .cta-zap--forte, que tem só um. */
.secao--marfim .cta-zap:not(.cta-zap--forte) { background: var(--perola); }

.cta-zap__texto { flex: 1 1 22rem; }
.cta-zap h3 { margin: 0 0 0.4rem; }
.cta-zap p { margin: 0; font-size: 0.95rem; color: var(--grafite-suave); max-width: 40rem; }

.cta-zap--forte {
  background: var(--vinho-noturno);
  border-color: var(--vinho-noturno);
  border-left-color: var(--dourado-champagne);
}
.cta-zap--forte h3 { color: var(--marfim); }
.cta-zap--forte p { color: var(--rosa-po); }
.cta-zap--forte .icone { color: var(--dourado-claro); }
.cta-zap--forte .botao--solido {
  background: var(--dourado-champagne);
  border-color: var(--dourado-champagne);
  color: var(--vinho-noturno);
}
.cta-zap--forte .botao--solido:hover {
  background: var(--dourado-claro);
  border-color: var(--dourado-claro);
  color: var(--vinho-noturno);
}

.botao--zap { white-space: nowrap; }

/* -------------------------------------------------------------- redes -- */

.redes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.rede {
  border-radius: var(--raio-p);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dourado-claro);
  border: 1px solid rgba(201, 165, 92, 0.4);
  padding: 0.6rem 1rem;
  transition: background .2s, border-color .2s, color .2s;
}
.rede .icone { width: 1.15em; height: 1.15em; color: currentColor; }
.rede:hover {
  background: rgba(201, 165, 92, 0.12);
  border-color: var(--dourado-champagne);
  color: var(--dourado-claro);
}

.redes--rodape { margin: 0 0 1.5rem; }
.redes--rodape .rede { padding: 0.55rem; }
.redes--rodape .rede .icone { width: 1.1rem; height: 1.1rem; }

/* Recolhe o botão fixo quando um CTA de WhatsApp está na tela */
.flutuante {
  transition: background .25s, opacity .25s, transform .25s;
}
.flutuante--oculto {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .flutuante--oculto { transition: none; }
}

/* ==========================================================================
   Menu do celular, esquema refluível e assinatura do rodapé
   ========================================================================== */

/* ------------------------------------------------------- botão de menu -- */

.menu-botao {
  border-radius: var(--raio-p);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordo-profundo);
  background: transparent;
  border: 1px solid var(--linha-forte);
    padding: 0.6rem 0.95rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.menu-botao:hover { border-color: var(--dourado-champagne); }
.menu-botao .icone { color: currentColor; width: 1.15rem; height: 1.15rem; }
.menu-botao__fechar { display: none; }
.menu-botao[aria-expanded="true"] .menu-botao__abrir { display: none; }
.menu-botao[aria-expanded="true"] .menu-botao__fechar { display: inline-block; }
.menu-botao[aria-expanded="true"] {
  background: var(--bordo-profundo);
  border-color: var(--bordo-profundo);
  color: var(--marfim-claro);
}

@media (min-width: 64rem) { .menu-botao { display: none; } }

/* ------------------------------------------------  esquema que reflui  -- */

.esq {
  border-radius: var(--raio-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--linha);
  background: var(--perola);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.secao--marfim .esq { background: var(--marfim-claro); }

.esq__no {
  border-radius: var(--raio-p);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: 0.8rem 1.75rem;
  max-width: none;
}
.esq__no--inicio { background: var(--bordo-profundo); color: var(--marfim-claro); }
.esq__no--fim { background: var(--vinho-noturno); color: var(--dourado-claro); }

.esq__liga {
  width: 1px;
  height: 1.75rem;
  background: var(--dourado-champagne);
  flex: none;
}

.esq__frentes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
}
@media (min-width: 46rem) {
  .esq__frentes { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.esq__frente {
  border-radius: var(--raio-p);
  border: 1px solid rgba(154, 122, 61, 0.38);
  padding: 1.25rem;
}

.esq__titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordo-profundo);
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--linha);
  max-width: none;
}

.esq__frente ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.esq__frente li {
  border-radius: var(--raio-p);
  background: var(--marfim);
  padding: 0.9rem 1rem;
  line-height: 1.5;
}
.secao--marfim .esq__frente li { background: var(--perola); }

.esq__frente strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--grafite);
  margin-bottom: 0.15rem;
}
.esq__frente span {
  display: block;
  font-size: 0.85rem;
  color: var(--grafite-suave);
}

.esq__nota {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--grafite-suave);
  margin: 1rem 0 0;
  text-align: center;
  max-width: none;
}

/* -------------------------------------------------  assinatura rodapé  -- */

.rodape__marca {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201, 165, 92, 0.2);
}
.rodape__marca img { height: clamp(3rem, 7vw, 3.8rem); width: auto; margin: 0; }
.rodape__marca .rodape__oab {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--dourado-claro);
}

/* ==========================================================================
   Versão 2 — resumo do topo, blocos de atalho e o formulário de cinco
   perguntas. Tudo aqui é usado só por index-v2.html; index.html não tem
   nenhum destes seletores e continua com o mesmo desenho de antes.
   ========================================================================== */

.abertura--curta { margin-bottom: 2.5rem; }

/* --------------------------------------------  resumo em seis frases  ---- */

/* A resposta curta, logo abaixo do hero. Cada item é uma frase que fecha
   sozinha — quem parar aqui já sabe o essencial. */
.resumo {
  display: grid;
  gap: 1.75rem clamp(1.75rem, 4vw, 3.25rem);
  grid-template-columns: 1fr;
  margin-top: 2.75rem;
}
@media (min-width: 46rem) { .resumo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .resumo { grid-template-columns: repeat(3, 1fr); } }

.resumo__item { border-top: 1px solid var(--linha-forte); padding-top: 1.1rem; }

.resumo__chave {
  font-family: var(--font-texto);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--vinho-noturno);
  line-height: 1.35;
  margin: 0 0 0.45rem;
  max-width: none;
}

.resumo__nota {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--grafite-suave);
  margin: 0;
  max-width: none;
}

/* ----------------------------------------  atalho para o formulário  ----- */

.atalho {
  border-radius: var(--raio-m);
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linha);
}
.atalho > p { margin: 0; flex: 1 1 24rem; font-size: 0.98rem; color: var(--grafite-suave); }

.atalho__acao {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.9rem;
  flex: 0 1 22rem;
}
.atalho__nota {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--grafite-suave);
  margin: 0;
  max-width: 22rem;
}

/* Título de bloco dentro de uma seção: mesmo peso do h3, mas com respiro de
   subtítulo, para não parecer legenda do parágrafo anterior. */
.titulo-bloco {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}

.duo--folga { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.frase-assinatura {
  font-family: var(--font-citacao);
  font-size: 1.3em;
  font-style: italic;
  color: var(--dourado-claro);
  margin-top: 2rem;
}

/* ==========================================================================
   Formulário de cinco perguntas
   ========================================================================== */

.quiz {
  border-radius: var(--raio-g);
  background: var(--marfim);
  border: 1px solid var(--linha);
  border-top: 2px solid var(--dourado-champagne);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.75rem;
  max-width: 48rem;
}

.quiz__medidor { margin-bottom: 2.25rem; }
.quiz__medidor[hidden] { display: none; }

/* Sem JS os cinco blocos aparecem de uma vez, cada um com sua divisa. */
.quiz__passo {
  border: 0;
  margin: 0;
  padding: 0 0 2.5rem;
  min-width: 0;   /* fieldset não encolhe em grade sem isto */
}
.quiz__passo + .quiz__passo { border-top: 1px solid var(--linha); padding-top: 2.5rem; }
.js .quiz__passo { padding-bottom: 0; }
.js .quiz__passo + .quiz__passo { border-top: 0; padding-top: 0; }
.quiz__passo[hidden] { display: none; }

.quiz__passo legend {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.2;
  color: var(--bordo-profundo);
  padding: 0;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.quiz__ajuda {
  font-size: 0.95rem;
  color: var(--grafite-suave);
  margin: -0.75rem 0 1.5rem;
}

.quiz__opcoes { display: grid; gap: 0.7rem; }

.quiz__opcao {
  border-radius: var(--raio-p);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.4rem;      /* alvo de toque confortável no celular */
  padding: 0.85rem 1.15rem;
  background: var(--perola);
  border: 1px solid var(--linha);
  cursor: pointer;
  line-height: 1.5;
  transition: border-color .2s, background .2s;
}
.quiz__opcao:hover { border-color: var(--dourado-champagne); }
.quiz__opcao:has(input:checked) {
  border-color: var(--bordo-profundo);
  background: var(--marfim-claro);
}
.quiz__opcao:has(input:focus-visible) {
  outline: 2px solid var(--bordo-profundo);
  outline-offset: 2px;
}

.quiz__opcao input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: var(--marfim-claro);
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: background .2s, border-color .2s;
}
.quiz__opcao input:checked { background: var(--bordo-profundo); border-color: var(--bordo-profundo); }
.quiz__opcao input:checked::after {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  background: var(--marfim-claro);
}
/* o contorno vive na etiqueta inteira, não no círculo */
.quiz__opcao input:focus-visible { outline: none; }

.quiz__rotulo { display: block; }
.quiz__opcao:has(input:checked) .quiz__rotulo { color: var(--vinho-noturno); font-weight: 500; }

.quiz__nota {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--grafite-suave);
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--dourado-champagne);
}

/* ---------------------------------------------------------  navegação  --- */

.quiz__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
}
.quiz__acoes[hidden] { display: none; }
.quiz__acoes .botao--solido:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bordo-profundo);
}

.quiz__voltar {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite-suave);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linha-forte);
  padding: 0.35rem 0;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.quiz__voltar:hover { color: var(--bordo-profundo); border-color: var(--dourado-champagne); }
.quiz__voltar[hidden] { display: none; }

/* ---------------------------------------------------------  resultado  --- */

.quiz__resultado[hidden] { display: none; }
.quiz__resultado:focus { outline: none; }

.quiz__leitura {
  font-size: 1.06rem;
  line-height: 1.7;
  margin: 0.5rem 0 2rem;
  max-width: 40rem;
}

.quiz__resumo {
  border-radius: var(--raio-m);
  background: var(--perola);
  border: 1px solid var(--linha);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.quiz__resumo-titulo {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin: 0 0 1rem;
}
.quiz__resumo .lista { margin: 0; }
.quiz__resumo .lista li { font-size: 0.95rem; }
.quiz__resumo .lista strong { font-weight: 600; }

.quiz__privacidade {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--grafite-suave);
  margin: 1.75rem 0 0;
  max-width: 38rem;
}

.quiz__saida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

/* ---------------------------------------------  saída direta / sem JS  --- */

.quiz__direto {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}
.quiz__direto p {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--grafite-suave);
  margin: 0;
  max-width: none;
}

/* Rótulo de dois termos no botão do cabeçalho não pode quebrar em duas linhas */
.botao--compacto { white-space: nowrap; }

/* Dois cartões dentro de metade de um .duo ficariam com um quarto da largura
   cada — em coluna, cada um ocupa a metade inteira e o texto respira. */
.duo .grade--coluna { grid-template-columns: 1fr; }

/* Quando uma coluna é bem mais curta que a outra, `align-items: start` deixa
   um vazio inteiro embaixo dela. Centrar reparte esse vazio em dois e a linha
   volta a parecer equilibrada. Só onde a diferença é grande — no resto, o topo
   alinhado continua sendo o certo. */
@media (min-width: 62rem) {
  .duo--centro { align-items: center; }
}

/* Respiro entre seções, recalibrado para a v2 ------------------------------
   O valor original — clamp(4rem, 9vw, 7.5rem) — encosta no teto em monitor de
   desktop: 120 px de cada lado, 240 px entre uma seção e a seguinte, onze
   vezes na página. Medido em 1512 px, isso é 24% da página em branco, contra
   8% no celular, onde o mesmo clamp cai no piso.

   O novo valor deixa o celular exatamente como estava (6vw de 375 px ainda
   fica abaixo do piso de 4rem) e corta um terço do respiro no desktop. Fica
   generoso — a marca pede isso — sem virar travessia de vazio.

   Escopado em .compacto para o index.html continuar com o desenho de antes. */
.compacto { --respiro: clamp(4rem, 6vw, 5rem); }

/* Título que abre uma coluna do .duo não carrega a margem de intervalo: ela
   existe para separar blocos empilhados, e aqui o bloco começa na linha. */
.duo > div > h3:first-child { margin-top: 0; }

/* Corpo do tipo do herói, recalibrado para o título longo -----------------
   O título pedido tem 22 palavras. No tamanho original — teto de 4,6rem —
   ocupava 10 linhas e 824 px, empurrando a abertura e o botão para fora da
   primeira dobra num monitor de 1512 px. Medido: 3,1rem dá 6 linhas e deixa o
   botão a 788 px, com folga.

   O h2 desce junto: com o h1 em 3,1rem e o h2 no teto de 3rem, título de
   página e título de seção ficariam do mesmo tamanho, e a hierarquia sumiria.

   Escopado em .compacto — o index.html mantém a escala de antes. */
.compacto .hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.compacto h2 { font-size: clamp(1.75rem, 3.2vw, 2.45rem); }