/* ==========================================================================
   Nathália Bernardes — sistema visual
   --------------------------------------------------------------------------
   Construído sobre o manual de marca dela, não sobre suposição:

     Aqua Profundo   #0F6E78   Pantone 322 U
     Verde Sereno    #91B8A6   Pantone 557 U
     Pêssego Suave   #F0B1A1   Pantone 7415 U
     Nuvem Matinal   #F5F2ED   Pantone 11-0602 TCX

   Tipografia: Goldplay (a fonte da marca), servida local em WOFF2.
   Logos, selo e pattern são os arquivos originais dela.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOLDPLAY — fonte da marca
   -------------------------------------------------------------------------- */
@font-face{ font-family:"Goldplay"; font-weight:300; font-style:normal;
  font-display:swap; src:url("fontes/goldplay-300.woff2") format("woff2") }
@font-face{ font-family:"Goldplay"; font-weight:400; font-style:normal;
  font-display:swap; src:url("fontes/goldplay-400.woff2") format("woff2") }
@font-face{ font-family:"Goldplay"; font-weight:400; font-style:italic;
  font-display:swap; src:url("fontes/goldplay-400i.woff2") format("woff2") }
@font-face{ font-family:"Goldplay"; font-weight:500; font-style:normal;
  font-display:swap; src:url("fontes/goldplay-500.woff2") format("woff2") }
@font-face{ font-family:"Goldplay"; font-weight:500; font-style:italic;
  font-display:swap; src:url("fontes/goldplay-500i.woff2") format("woff2") }
@font-face{ font-family:"Goldplay"; font-weight:600; font-style:normal;
  font-display:swap; src:url("fontes/goldplay-600.woff2") format("woff2") }
@font-face{ font-family:"Goldplay"; font-weight:700; font-style:normal;
  font-display:swap; src:url("fontes/goldplay-700.woff2") format("woff2") }

:root{
  /* --- as quatro cores da marca --- */
  --aqua:    #0F6E78;
  --verde:   #91B8A6;
  --pessego: #F0B1A1;
  --nuvem:   #F5F2ED;

  /* --- escalas derivadas, para contraste e profundidade --- */
  --aqua-900:#06373D; --aqua-800:#0A555D; --aqua-700:#0F6E78;
  --aqua-600:#178993; --aqua-400:#5CACB4; --aqua-200:#B7DCE0;
  --aqua-100:#DDEFF1; --aqua-50: #F0F8F9;

  --verde-800:#3F6455; --verde-700:#537C6B; --verde-600:#6E9885;
  --verde-500:#91B8A6; --verde-300:#BDD6CA; --verde-100:#E6F0EB;

  --pessego-800:#8E4636; --pessego-700:#964A37; --pessego-600:#D07A63;
  --pessego-500:#F0B1A1; --pessego-300:#F7D3C9; --pessego-100:#FCEEE9;

  --nuvem-50:#FBF9F6; --nuvem-100:#F5F2ED; --nuvem-200:#ECE7DF; --nuvem-300:#DFD8CD;

  --branco:#FFFFFF;
  --tinta:  #172D30;
  --tinta-2:#42585B;
  --tinta-3:#546466;
  --borda:  #E2DDD3;

  --fonte: "Goldplay", "Jost", system-ui, -apple-system, sans-serif;

  /* sombras com pigmento aqua, para não acinzentar a nuvem */
  --sombra-sm:0 1px 2px rgba(15,110,120,.05), 0 1px 3px rgba(15,110,120,.04);
  --sombra-md:0 4px 16px rgba(15,110,120,.07), 0 2px 6px rgba(15,110,120,.04);
  --sombra-lg:0 16px 40px rgba(15,110,120,.10), 0 5px 12px rgba(15,110,120,.05);
  --sombra-xl:0 32px 72px rgba(15,110,120,.13), 0 12px 24px rgba(15,110,120,.06);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-full:999px;

  --t-rapido:150ms; --t-medio:280ms; --t-lento:520ms;
  --curva:cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px }

body{
  margin:0;
  background:var(--nuvem-100);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:17px; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* height:auto é obrigatório: sem ele o atributo height do HTML continua
   valendo quando o CSS define só a largura, e a imagem estica. */
img{ max-width:100%; height:auto; display:block }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px }

/* --------------------------------------------------------------------------
   O grifo — uma palavra por título, em itálico da própria fonte da marca.
   Aqua e não pêssego: o pêssego é lindo mas não passa contraste em texto.
   -------------------------------------------------------------------------- */
.grifo{
  font-style:italic; font-weight:500;
  color:var(--aqua-700);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */
.pular-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--aqua-800); color:#fff;
  padding:12px 22px; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.pular-link:focus{ left:0 }
:focus-visible{ outline:3px solid var(--aqua-600); outline-offset:3px; border-radius:var(--r-sm) }

/* ==========================================================================
   BARRA DE PROGRESSO
   ========================================================================== */
.progresso{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:100; pointer-events:none; background:var(--aqua-100);
}
.progresso i{
  display:block; width:100%; height:100%;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--verde-500), var(--aqua-700), var(--pessego-500));
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:16px 32px;
  font-family:var(--fonte); font-size:16px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:none; border-radius:var(--r-full);
  background:var(--aqua-700); color:#fff; box-shadow:var(--sombra-md);
  transition:background var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
}
.botao:hover{ background:var(--aqua-800); box-shadow:var(--sombra-lg) }
.botao svg{ width:18px; height:18px; flex:none }
.botao-grande{ min-height:62px; padding:20px 44px; font-size:17px }

.botao-2{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:16px 30px;
  font-size:16px; font-weight:500; text-decoration:none; cursor:pointer;
  border-radius:var(--r-full); background:transparent; color:var(--aqua-800);
  border:1.5px solid var(--aqua-200);
  transition:border-color var(--t-medio) var(--curva), background var(--t-medio) var(--curva);
}
.botao-2:hover{ border-color:var(--aqua-600); background:var(--aqua-50) }

/* ==========================================================================
   TOPO FIXO
   ========================================================================== */
.topo{
  position:sticky; top:0; z-index:80;
  background:rgba(245,242,237,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda);
}
.topo-grade{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px }
/* o <a> precisa dos 44px de alvo de toque, não só a imagem dentro dele */
.topo-logo{ display:inline-flex; align-items:center; min-height:48px }
.topo-logo img{ height:44px; width:auto }
.topo-cta{ display:flex; align-items:center; gap:18px }
.topo-tel{
  font-size:14.5px; font-weight:500; color:var(--tinta-2); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
}
.topo-tel:hover{ color:var(--aqua-700) }
.topo-tel svg{ width:17px; height:17px; color:var(--aqua-600) }
.topo-tel-num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.topo .botao{ min-height:46px; padding:12px 24px; font-size:15px }

/* ==========================================================================
   ABERTURA
   ========================================================================== */
.abre{
  position:relative; overflow:hidden;
  padding:clamp(56px,7vh,96px) 0 clamp(56px,8vh,104px);
  background:
    radial-gradient(900px 620px at 88% 8%, var(--aqua-50) 0%, transparent 60%),
    radial-gradient(620px 520px at 4% 92%, var(--pessego-100) 0%, transparent 62%),
    linear-gradient(180deg, var(--nuvem-50), var(--nuvem-100));
}
.abre-pattern{
  position:absolute; right:-6%; top:-10%; width:min(52vw,720px);
  opacity:.26; pointer-events:none; z-index:0;
}
.abre-grade{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}

.sobrescrito{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--aqua-800); background:var(--aqua-100);
  border-radius:var(--r-full); padding:9px 18px; margin:0 0 26px;
}
.sobrescrito::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--pessego-500); flex:none;
}

.abre-h1{
  font-weight:300;
  font-size:clamp(34px,5.1vw,62px); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 24px; color:var(--tinta);
}
.abre-h1 .linha{ display:block }
.abre-h1 strong{ font-weight:600 }

.abre-fala{ font-size:18px; color:var(--tinta-2); max-width:50ch; margin:0 0 34px }
.abre-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px }

.credenciais{
  display:flex; flex-wrap:wrap; gap:18px 44px; margin:0;
  padding-top:28px; border-top:1px solid var(--borda);
}
.credenciais div{ display:flex; flex-direction:column; gap:3px }
.credenciais dt{ font-size:19px; font-weight:600; color:var(--aqua-700); white-space:nowrap }
.credenciais dd{
  margin:0; font-size:11.5px; color:var(--tinta-3);
  letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}

/* --- o retrato --- */
.abre-retrato{ position:relative; max-width:460px; margin-inline:auto; width:100% }
.retrato{
  position:relative; margin:0; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sombra-xl);
}
.retrato img{ width:100%; height:auto; display:block }
/* moldura deslocada em pêssego — recurso da papelaria dela */
.abre-retrato::before{
  content:""; position:absolute; inset:-22px -22px 34px 34px;
  border:1.5px solid var(--pessego-500); border-radius:var(--r-xl);
  z-index:-1;
}
.abre-desce{
  position:relative; z-index:1;
  display:flex; justify-content:center;
  margin:clamp(40px,6vh,72px) 0 0;
}
.abre-desce svg{ width:19px; height:19px; color:var(--aqua-600) }

/* ==========================================================================
   ETAPAS
   ========================================================================== */
.narrativa{ position:relative }
.passo{ position:relative; padding:clamp(64px,8.5vh,116px) 0 }

.passo-fundo{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  clip-path:inset(0 -100vmax);
}
.passo--branco .passo-fundo{ background-color:var(--branco); box-shadow:0 0 0 100vmax var(--branco) }
.passo--verde  .passo-fundo{ background-color:var(--verde-100); box-shadow:0 0 0 100vmax var(--verde-100) }
.passo--aqua   .passo-fundo{ background-color:var(--aqua-800);  box-shadow:0 0 0 100vmax var(--aqua-800) }

.passo-marca{ display:flex; align-items:center; gap:16px; margin:0 0 20px }
.passo-num{
  font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--pessego-700);
  flex:none; padding:5px 11px; border:1px solid var(--pessego-300);
  border-radius:var(--r-full); background:var(--pessego-100);
}
.passo-titulo{
  font-weight:300; font-size:clamp(26px,3.5vw,42px);
  line-height:1.16; letter-spacing:-.022em; margin:0; max-width:22ch;
}
.passo-marca .fio{ flex:1; height:1px; min-width:20px; background:linear-gradient(90deg,var(--borda),transparent) }

.passo-intro{ font-size:17.5px; color:var(--tinta-2); max-width:60ch; margin:0 0 42px }

.passo-destaque{
  font-size:clamp(21px,2.6vw,31px); font-weight:300; font-style:italic;
  line-height:1.36; color:var(--aqua-800);
  border-left:2px solid var(--pessego-500); padding-left:26px;
  margin:0 0 30px; max-width:40ch;
}

/* seção escura */
.passo--aqua .passo-titulo,
.passo--aqua .passo-destaque{ color:var(--nuvem-50) }
.passo--aqua .passo-intro{ color:var(--aqua-100) }
.passo--aqua .passo-num{ color:var(--pessego-300); border-color:rgba(240,177,161,.4); background:rgba(240,177,161,.12) }
.passo--aqua .grifo{ color:var(--pessego-300) }
.passo--aqua .passo-marca .fio{ background:linear-gradient(90deg,rgba(255,255,255,.28),transparent) }

/* ==========================================================================
   CARTÕES
   ========================================================================== */
.grade-cartoes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }

.cartao{
  position:relative; overflow:hidden;
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--sombra-sm);
  transition:box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
.cartao:hover{ box-shadow:var(--sombra-lg); border-color:var(--aqua-200) }

.cartao-idx{
  position:absolute; right:22px; top:20px;
  font-size:13px; font-weight:600; letter-spacing:.1em;
  color:var(--verde-800); pointer-events:none;
}
.cartao-icone{
  width:52px; height:52px; border-radius:var(--r-md);
  display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(150deg,var(--aqua-50),var(--aqua-100));
  border:1px solid var(--aqua-200); color:var(--aqua-700);
}
.cartao-icone svg{ width:24px; height:24px }
.cartao h3{ font-size:20px; font-weight:600; margin:0 0 10px; letter-spacing:-.01em }
.cartao h3+p{ position:relative; padding-top:14px }
.cartao h3+p::before{ content:""; position:absolute; left:0; top:0; width:34px; height:2px; background:var(--pessego-500) }
.cartao p{ margin:0; font-size:15.5px; color:var(--tinta-2); line-height:1.65 }

/* bento: grade uniforme deixa a seção monótona */
@media (min-width:1025px){
  .grade-bento{ grid-template-columns:repeat(6,1fr) }
  .grade-bento > :nth-child(1),
  .grade-bento > :nth-child(2){ grid-column:span 3 }
  .grade-bento > :nth-child(3),
  .grade-bento > :nth-child(4),
  .grade-bento > :nth-child(5){ grid-column:span 2 }
  .grade-bento > :nth-child(6){
    grid-column:span 6; display:grid; grid-template-columns:auto 1fr; gap:0 28px; align-items:center;
  }
  .grade-bento > :nth-child(6) .cartao-icone{ grid-row:span 2; margin-bottom:0 }
  .grade-bento > :nth-child(6) h3{ align-self:end; margin:0 }
  .grade-bento > :nth-child(6) h3+p{ padding-top:8px }
  .grade-bento > :nth-child(6) h3+p::before{ display:none }
}

/* ==========================================================================
   ETAPAS DO ACOMPANHAMENTO
   ========================================================================== */
.etapas{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.etapas li{
  display:grid; grid-template-columns:52px 1fr; gap:0 22px; align-items:start;
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--r-lg); padding:28px 30px; box-shadow:var(--sombra-sm);
}
.etapa-num{
  grid-row:span 3; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--aqua-700); color:#fff; font-size:17px; font-weight:600;
}
.etapas h3{ font-size:20px; font-weight:600; margin:8px 0 8px }
.etapas p{ margin:0 0 12px; font-size:15.5px; color:var(--tinta-2) }
.etapa-meta{
  font-size:13px; font-weight:600; color:var(--aqua-800);
  background:var(--aqua-50); border:1px solid var(--aqua-200);
  border-radius:var(--r-full); padding:5px 14px; display:inline-block;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-lista{ max-width:840px }
.faq-lista details{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--r-md); margin-bottom:12px; box-shadow:var(--sombra-sm);
}
.faq-lista details[open]{ box-shadow:var(--sombra-md); border-color:var(--aqua-200) }
.faq-lista summary{
  cursor:pointer; list-style:none; padding:22px 26px; min-height:54px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:16.5px; font-weight:500; color:var(--tinta);
}
.faq-lista summary::-webkit-details-marker{ display:none }
.faq-lista summary::after{
  content:""; flex:none; width:10px; height:10px;
  border-right:2px solid var(--aqua-600); border-bottom:2px solid var(--aqua-600);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--t-medio) var(--curva);
}
.faq-lista details[open] summary::after{ transform:rotate(-135deg) translateY(-3px) }
.faq-lista details p{ margin:0; padding:0 26px 24px; font-size:15.5px; color:var(--tinta-2); max-width:64ch }

/* ==========================================================================
   CITAÇÃO
   ========================================================================== */
.faixa-citacao{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--aqua-700),var(--aqua-900));
  color:var(--nuvem-50); padding:clamp(64px,9vw,116px) 0;
  border-radius:var(--r-xl); margin-block:clamp(40px,6vh,80px);
}
.faixa-citacao::before{
  content:""; position:absolute; inset:16px; border-radius:calc(var(--r-xl) - 8px);
  border:1px solid rgba(240,177,161,.28); pointer-events:none;
}
.faixa-marca{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(34vw,320px); opacity:.10; pointer-events:none;
}
.citacao{
  position:relative; z-index:1; max-width:26ch; margin:0 auto; text-align:center;
  font-weight:300; font-style:italic;
  font-size:clamp(24px,3.5vw,42px); line-height:1.3; letter-spacing:-.015em;
}
.citacao em{ font-style:italic; color:var(--pessego-300); font-weight:500 }
.citacao-assina{
  position:relative; z-index:1; margin:26px auto 0; text-align:center;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#E3F0E9;
}

/* ==========================================================================
   FIM
   ========================================================================== */
.fim-caixa{
  position:relative; overflow:hidden; text-align:center;
  background:var(--branco); border:1px solid var(--aqua-200);
  border-radius:var(--r-xl); padding:clamp(44px,6vw,72px);
  box-shadow:var(--sombra-lg);
}
.fim-selo{ width:96px; margin:0 auto 22px }
.fim-caixa > p{ color:var(--tinta-2); margin:0 0 32px; font-size:17.5px; max-width:48ch; margin-inline:auto }
.fim-alt{ margin:26px auto 0 !important; font-size:14.5px; color:var(--tinta-3) }
.fim-alt a{
  color:var(--aqua-700); font-weight:600; display:inline-block; padding:11px 6px; margin:-11px -6px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.fim-alt a:hover{ color:var(--aqua-800) }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape{ background:var(--aqua-900); color:var(--aqua-100); padding:64px 0 30px }
.rodape-grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; align-items:start }
.rodape-logo{ width:210px; margin-bottom:20px }
.rodape-crn{ margin:0; font-size:14px; line-height:1.75; color:var(--verde-300) }
.rodape-col h3{
  font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--pessego-300); margin:0 0 16px;
}
.rodape-col ul{ list-style:none; margin:0; padding:0 }
.rodape-col li{ margin-bottom:4px; font-size:14.5px; color:var(--aqua-100) }
.rodape-col a{
  color:#fff; display:inline-block; padding:13px 0;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.35);
}
.rodape-col a:hover{ text-decoration-color:var(--pessego-500) }
.rodape-base{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12) }
.rodape-aviso{ margin:0; font-size:12.5px; line-height:1.7; color:var(--verde-300) }
.rodape-aviso a{
  color:var(--verde-300); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.35);
  display:inline-block; padding:13px 2px; margin:-13px 0;
}
.rodape-aviso a:hover{ color:var(--branco); text-decoration-color:var(--pessego-500) }

/* --------------------------------------------------------------------------
   Crédito do desenvolvedor
   --------------------------------------------------------------------------
   Discreto de propósito: o rodapé é dela, não meu. Fica numa faixa própria,
   centralizado, no menor peso da página — presente para quem procura, mudo
   para quem não procura. Só ganha cor no hover.
   -------------------------------------------------------------------------- */
.rodape-autor{
  margin:0; padding:18px 24px 4px; text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.rodape-autor a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:12px; letter-spacing:.02em; color:var(--verde-300);
  text-decoration:none; opacity:.72; transition:opacity .18s ease, color .18s ease;
}
.rodape-autor a:hover{ opacity:1; color:var(--branco) }
.grs-selo{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:5px; background:var(--nuvem-100); color:var(--tinta);
  font-size:8.5px; font-weight:700; letter-spacing:.04em;
}
.grs-nome{ font-weight:600; letter-spacing:.06em }

/* ==========================================================================
   PÁGINA DE TEXTO (política de privacidade)
   ========================================================================== */
.legal{ padding:clamp(48px,7vh,88px) 0 clamp(56px,8vh,96px); background:var(--nuvem-50) }
.legal-wrap{ max-width:760px }
.legal-h1{
  font-weight:300; font-size:clamp(32px,4.4vw,50px); line-height:1.12;
  letter-spacing:-.02em; margin:6px 0 10px; color:var(--tinta);
}
.legal-data{ margin:0 0 30px; font-size:13px; color:var(--tinta-3) }
.legal-abre{
  margin:0 0 40px; padding-bottom:32px; font-size:18px; line-height:1.7;
  color:var(--tinta-2); border-bottom:1px solid var(--borda);
}
.legal-bloco{ margin-bottom:38px }
.legal-bloco h2{
  font-size:19px; font-weight:600; color:var(--aqua-800);
  margin:0 0 14px; letter-spacing:-.005em;
}
.legal-bloco p{ margin:0 0 14px; font-size:16px; line-height:1.75; color:var(--tinta-2) }
.legal-bloco strong{ color:var(--tinta); font-weight:600 }
.legal-bloco a{
  color:var(--aqua-700); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal-bloco a:hover{ color:var(--aqua-800) }
.legal-lista{ margin:0 0 14px; padding-left:20px }
.legal-lista li{
  margin-bottom:11px; font-size:16px; line-height:1.75; color:var(--tinta-2);
}
.legal-lista li::marker{ color:var(--verde-600) }
/* O parágrafo que responde "vocês me rastreiam?". É a informação que a leitora
   mais procura numa política, então não fica escondido no meio do corpo. */
.legal-destaque{
  padding:18px 22px; border-radius:var(--r-md);
  background:var(--verde-100); border:1px solid var(--verde-300);
  font-size:16.5px !important; color:var(--verde-800) !important; font-weight:500;
}
/* Impossível confundir com texto pronto: falta a Nathália preencher. */
.legal-preencher{
  background:#FFE9B8; color:#7A3B00; border:1px dashed #B8862A;
  border-radius:var(--r-sm); padding:1px 7px; font-size:.92em; font-weight:600;
}
.legal-volta{ margin:44px 0 0; padding-top:32px; border-top:1px solid var(--borda) }

@media (max-width:560px){
  .legal-bloco h2{ font-size:18px }
  .legal-abre{ font-size:17px }
}

/* ==========================================================================
   PÁGINA DE ERRO
   ========================================================================== */
.erro{
  display:grid; place-items:center; text-align:center;
  min-height:calc(100vh - 260px); padding:clamp(56px,9vh,110px) 0;
  background:
    radial-gradient(760px 520px at 80% 6%, var(--aqua-50) 0%, transparent 62%),
    var(--nuvem-50);
}
.erro-caixa{ max-width:620px }
.erro-h1{
  font-weight:300; font-size:clamp(34px,5vw,56px); line-height:1.1;
  letter-spacing:-.025em; margin:8px 0 18px; color:var(--tinta);
}
.erro-fala{ font-size:17.5px; line-height:1.7; color:var(--tinta-2); margin:0 0 34px }
.erro-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

@media (max-width:560px){
  .erro-cta{ flex-direction:column; align-items:stretch }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1024px){
  .grade-cartoes{ grid-template-columns:repeat(2,1fr) }
  .rodape-grade{ grid-template-columns:1fr 1fr; gap:36px }
}

@media (max-width:900px){
  .abre-grade{ grid-template-columns:1fr; gap:52px }
  .abre-retrato{ order:-1; max-width:380px }
  .abre-pattern{ display:none }
  /* Ela pediu o número à vista para quem não clica em link. Escondê-lo no
     celular — onde vem a maior parte do tráfego — anulava o pedido. Aqui o
     número vira o próprio botão: cabe em 375px e leva direto ao WhatsApp. */
  .topo .botao{ display:none }
  .topo-tel{
    background:var(--aqua-700); color:var(--branco); font-weight:600;
    border-radius:var(--r-full); padding:11px 18px; min-height:46px; font-size:14.5px;
  }
  .topo-tel:hover{ color:var(--branco); background:var(--aqua-800) }
  .topo-tel svg{ color:var(--branco) }
}

@media (max-width:560px){
  body{ font-size:16px }
  .grade-cartoes{ grid-template-columns:1fr }
  .abre-cta{ flex-direction:column; align-items:stretch }
  .botao,.botao-2{ width:100% }
  .etapas li{ grid-template-columns:1fr; gap:14px; padding:24px 22px }
  .etapa-num{ grid-row:auto }
  .credenciais{ gap:18px 30px }
  .rodape-grade{ grid-template-columns:1fr; gap:30px }
  .topo-logo img{ height:36px }
  .abre-retrato::before{ inset:-10px -10px 20px 20px }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .abre-desce{ display:none }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Contato — o número à vista
   --------------------------------------------------------------------------
   Parte das visitantes não clica em link de WhatsApp: abre o número, anota ou
   salva na agenda. Por isso ele aparece escrito, além de ser clicável.
   -------------------------------------------------------------------------- */
.rodape-col .numero{
  display:block; font-variant-numeric:tabular-nums;
  color:var(--verde-300); text-decoration:none; font-size:14px; margin-top:2px;
}
.rodape-espaco{ margin-top:14px !important }

.fim-numero{
  margin:20px auto 0; font-size:15.5px; color:var(--tinta-2);
}
.fim-numero strong{
  color:var(--aqua-800); font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.fim-alt{ margin:10px auto 0 !important }