/* ============================================================
   Amanda Fontes Advocacia — paleta azul (Opção B)
   Tokens amostrados da proposta de honorários da própria Dra. Amanda:
   azul-marinho #0C1F37, marinho profundo #0A182F, dourado #CBA134,
   dourado claro #F6DB65. Escolha confirmada por ela em 25/07/2026.
   ============================================================ */
:root{
  --ink:#0C1F37;
  --ink-soft:#122845;
  --ink-deep:#0A182F;
  --paper:#F5F7FA;
  --paper-tint:#E6ECF4;
  --gold:#CBA134;
  --gold-deep:#8C6A16;
  --gold-lt:#F6DB65;
  --text:#16243A;
  --muted:#4E5F76;
  --line:rgba(12,31,55,.14);
  --line-gold:rgba(246,219,101,.24);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --pad:clamp(1.25rem,5vw,2.5rem);
  --gap-section:clamp(4.5rem,11vw,8.5rem);
  --measure:38rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:6rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.98rem + .25vw,1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.012em;line-height:1.08}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

/* Dourado vivo não tem contraste suficiente sobre o papel claro: nas seções
   claras o anel de foco usa o dourado profundo; nas escuras, o vivo. */
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.section--dark :focus-visible,.footer :focus-visible,
.site-header :focus-visible{outline-color:var(--gold)}
/* O botão flutuante é fixed: passeia por seção clara e escura, então nenhuma cor
   sozinha serve. Anel escuro com halo claro por fora funciona nas duas. */
.wa-float:focus-visible{
  outline-color:var(--ink-deep);
  box-shadow:0 0 0 7px rgba(246,248,252,.92),0 12px 30px -8px rgba(6,16,32,.7);
}

.wrap{max-width:78rem;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:var(--ink-deep);padding:.6rem 1rem}

/* ---------- Eyebrow: eco do lockup da logo (caps + fio) ---------- */
.eyebrow{
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-deep);
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 1.4rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:8rem}
/* Sobre o papel tingido o dourado profundo cai para 4,22:1 e a eyebrow é
   miúda (10,9px): nessas seções vai um grau mais fechado — 5,36:1. */
.section--tint .eyebrow{color:#7A5A12}
.eyebrow--dark{color:var(--gold-lt)}
.eyebrow--dark::after{background:var(--line-gold)}

/* ---------- CTA em três camadas: sombra + bisel + face ----------
   Efeito "pushable" adaptado de uiverse.io/PriyanshuGupta28 (MIT),
   recolorido para o dourado da proposta (#CBA134 ≈ hsl(43,59%,50%)).
   Face dourada com texto marinho: é o par de cores da própria proposta e
   rende 6,8:1 de contraste, contra 4,4:1 do dourado com texto branco. */
.btn{
  position:relative;display:inline-block;padding:0;border:none;background:transparent;
  text-decoration:none;cursor:pointer;outline-offset:4px;
  transition:filter 250ms;-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.btn__shadow{
  position:absolute;inset:0;border-radius:3px;
  background:hsl(214,70%,4%);filter:blur(3px);
  transform:translateY(3px);will-change:transform;
  transition:transform 600ms cubic-bezier(.3,.7,.4,1);
}
.btn__edge{
  position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(to right,
    hsl(43,59%,22%) 0%,hsl(43,59%,34%) 8%,hsl(43,59%,30%) 92%,hsl(43,59%,18%) 100%);
}
.btn__front{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  position:relative;border-radius:3px;background:var(--gold);color:var(--ink-deep);
  font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.005em;
  padding:1.05rem 1.75rem;
  transform:translateY(-5px);will-change:transform;
  transition:transform 600ms cubic-bezier(.3,.7,.4,1);
}
.btn__front svg{width:1.15em;height:1.15em;flex:none}
.btn:hover{filter:brightness(112%)}
/* Curso maior que o original (5px→10px) porque o botão aqui é mais largo e
   de canto reto: com 2px o movimento não se lia. */
.btn:hover .btn__front{transform:translateY(-10px);transition:transform 250ms cubic-bezier(.3,.7,.4,1.5)}
.btn:active .btn__front{transform:translateY(-1px);transition:transform 34ms}
.btn:hover .btn__shadow{transform:translateY(7px);transition:transform 250ms cubic-bezier(.3,.7,.4,1.5)}
.btn:active .btn__shadow{transform:translateY(1px);transition:transform 34ms}
.btn:focus:not(:focus-visible){outline:none}

/* ============================== HEADER ============================== */
/* Na home o cabeçalho fica por cima do hero, que pinta atrás dele — sem
   emenda. Nas internas ganha fundo sólido, porque o conteúdo é claro. */
.site-header{position:relative;z-index:50;background:var(--ink)}
.is-home .site-header{position:absolute;top:0;left:0;right:0;background:transparent}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}

/* Lockup oficial horizontal da marca. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand__mark{height:auto;width:clamp(10.5rem,26vw,13.5rem)}

/* ---------- Menu ---------- */
.nav{display:flex;align-items:center;gap:clamp(1.25rem,2.6vw,2.1rem)}
.nav__list{display:flex;align-items:center;gap:clamp(1.25rem,2.6vw,2.1rem)}
.nav__link{
  font-size:.82rem;color:#C3D0DE;text-decoration:none;letter-spacing:.01em;
  padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  white-space:nowrap;display:inline-block;
}
.nav__link:hover{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}
.nav__list li{list-style:none}
.nav__cta .btn__front{padding:.72rem 1.2rem;font-size:.88rem}
.nav__toggle{
  display:none;align-items:center;gap:.55rem;background:none;border:1px solid var(--line-gold);
  border-radius:2px;color:var(--gold-lt);font-family:var(--sans);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.6rem .85rem;cursor:pointer;
}
.nav__bars{position:relative;width:1rem;height:.62rem;flex:none}
.nav__bars i,.nav__bars::before,.nav__bars::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .25s,opacity .2s;
}
.nav__bars::before{top:0}
.nav__bars i{top:50%;margin-top:-.5px}
.nav__bars::after{bottom:0}
.nav__toggle[aria-expanded="true"] .nav__bars::before{transform:translateY(.3rem) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bars i{opacity:0}
.nav__toggle[aria-expanded="true"] .nav__bars::after{transform:translateY(-.3rem) rotate(-135deg)}

/* =============================== HERO =============================== */
.hero{
  background:
    radial-gradient(120% 90% at 82% 8%,rgba(203,161,52,.14) 0%,transparent 58%),
    radial-gradient(85% 70% at 18% 62%,rgba(38,86,150,.30) 0%,transparent 62%),
    linear-gradient(180deg,var(--ink-deep) 0%,var(--ink) 55%,#0D2340 100%);
  color:#E6EDF6;
  padding-block:clamp(8rem,15vw,11rem) clamp(4rem,10vw,7rem);
  position:relative;overflow:hidden;
}
/* Faixa dourada de topo: mesma moldura que abre e fecha cada página da
   proposta de honorários. O par dela fecha o rodapé. */
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--gold);z-index:3;
}
.hero::after{
  content:"";position:absolute;inset:auto -12% -55% auto;width:min(46rem,90%);aspect-ratio:1;
  background:url("../img/simbolo-dourado.png") no-repeat center/contain;
  opacity:.045;pointer-events:none;
}
.hero__grid{display:grid;gap:clamp(2.75rem,6vw,4.5rem);align-items:end;position:relative;z-index:2}

/* ---------- Retrato: coluna direita no desktop, fundo no mobile ---------- */
.hero__figure{margin:0;position:relative;justify-self:end;width:100%;max-width:31rem}
.hero__figure::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:124%;height:104%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(203,161,52,.26) 0%,rgba(38,86,150,.18) 46%,transparent 70%);
}
.hero__figure img{position:relative;width:100%;height:auto}
.hero__copy{position:relative;z-index:3}
.hero__veil{display:none}
/* H1 é a linha-chave, pequena. O título de impacto é um parágrafo estilizado. */
.hero__h1{font-size:.72rem;font-weight:500;line-height:1.5}
.hero__h1::after{max-width:5rem}
.hero__title{
  font-family:var(--display);font-weight:300;letter-spacing:-.012em;line-height:1.08;
  font-size:clamp(2.05rem,1.2rem + 3.4vw,3.5rem);
  color:#F4F8FC;text-wrap:balance;
}
.hero__title em{font-style:italic;color:var(--gold-lt);font-weight:200}
/* Perguntas de abertura: a Dra. pediu que entrassem como SUBTÍTULO, um pouco
   menores que o título — mesma serifada, ~2/3 do corpo dele, uma por linha. */
.hero__asks{margin-top:1.25rem;display:grid;gap:.15rem;max-width:34rem}
.hero__ask{
  font-family:var(--display);font-weight:300;letter-spacing:-.008em;
  font-size:clamp(1.4rem,1.05rem + 1.5vw,2.35rem);line-height:1.22;
  color:#DCE6F1;text-wrap:balance;
}
.hero__lede{margin-top:1.6rem;max-width:34rem;color:#BCCADB;font-size:1.08rem;line-height:1.68}
.hero__asks + .hero__lede{margin-top:1.45rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid var(--line-gold);
  font-size:.83rem;color:#8FA0B5;
}
.hero__trust li{display:flex;align-items:center;gap:.5rem}
.hero__trust li::before{content:"";width:4px;height:4px;background:var(--gold-lt);opacity:.7;border-radius:50%;flex:none}

/* ============================== SEÇÕES ============================== */
.section{padding-block:var(--gap-section)}
.section--tint{background:var(--paper-tint)}
.section--dark{background:var(--ink);color:#DCE6F1}
.section__title{font-size:clamp(1.85rem,1.2rem + 2.4vw,3.05rem);max-width:20ch;text-wrap:balance}
.section--dark .section__title{color:#F4F8FC}
.section__lede{margin-top:1.1rem;max-width:var(--measure);color:var(--muted)}
.section--dark .section__lede{color:#9FB0C4}

/* CTA ao fim de cada seção. */
.section__cta{margin-top:clamp(2.5rem,6vw,3.75rem)}

/* ---------- Vozes: o que a mãe realmente diz ---------- */
.voices{display:grid;gap:1px;margin-top:clamp(2.5rem,6vw,3.75rem);background:var(--line)}
.voice{background:var(--paper);padding:clamp(1.6rem,4vw,2.3rem)}
/* A Dra. achou as frases "apagadas" em azul e pediu branca ou dourada.
   Branca sumiria no papel claro desta seção, então fica o dourado profundo
   (4,6:1 sobre --paper, passa AA). */
.voice__quote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.22rem,1.05rem + .6vw,1.55rem);line-height:1.32;color:var(--gold-deep);
  margin-bottom:.85rem;text-wrap:balance;
}
.voice__body{color:var(--muted);font-size:.98rem;line-height:1.62}
.voices-close{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.9rem;border-top:1px solid var(--line);
  font-family:var(--display);font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);font-weight:300;
  line-height:1.35;max-width:36rem;text-wrap:balance;
}

/* ---------- Caminhos jurídicos ---------- */
.paths{display:grid;gap:clamp(1.75rem,4vw,2.75rem);margin-top:clamp(2.5rem,6vw,3.75rem)}
.path{padding-top:1.4rem;border-top:2px solid var(--gold-deep);max-width:34rem}
.path__name{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin-bottom:.7rem}
.path__body{color:var(--muted);font-size:.99rem}
.paths-close{
  margin-top:clamp(2.5rem,5vw,3.25rem);max-width:38rem;
  font-family:var(--display);font-weight:300;line-height:1.35;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);text-wrap:balance;
}
.paths-note{
  margin-top:1.5rem;font-size:.88rem;line-height:1.6;color:var(--muted);
  max-width:40rem;padding-left:1.1rem;border-left:1px solid var(--gold-deep);
}

/* ---------- Passos: sequência real, por isso numerada ---------- */
.steps{counter-reset:step;margin-top:clamp(2.5rem,6vw,4rem);display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.6rem,3.5vw,2.2rem);border-top:1px solid var(--line-gold);
}
.step:last-child{border-bottom:1px solid var(--line-gold)}
.step__num{
  grid-row:span 2;font-family:var(--display);font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  font-weight:200;color:var(--gold-lt);opacity:.6;line-height:1;padding-top:.15rem;
}
.step__num::before{counter-increment:step;content:"0" counter(step)}
.step__name{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);color:#F4F8FC;margin-bottom:.55rem}
.step__body{color:#9FB0C4;font-size:.99rem;max-width:36rem}

/* ---------- A advogada ---------- */
.about{display:grid;gap:clamp(2.25rem,5vw,4rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.about__photo{
  margin:0;position:relative;aspect-ratio:4/5;background:var(--ink-soft);
  border:1px solid var(--line);overflow:hidden;
}
.about__photo::before{
  content:"";position:absolute;inset:0;
  background:url("../img/simbolo-dourado.png") no-repeat center/48%;opacity:.16;
}
.about__photo img{position:relative;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.about__text p+p{margin-top:1.15rem}
.about__text p{color:var(--muted);max-width:34rem}
.about__text .about__lead{color:var(--text);font-size:1.1rem}
.about__sign{
  margin-top:2rem;padding-top:1.35rem;border-top:1px solid var(--line);
  font-family:var(--display);font-size:1.28rem;color:var(--text);
}
.about__sign span{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-top:.5rem}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2.25rem,5vw,3.5rem);max-width:48rem}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__q{
  cursor:pointer;list-style:none;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.08rem,1rem + .45vw,1.32rem);font-weight:300;
  line-height:1.35;color:var(--text);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";position:absolute;right:.35rem;top:1.85rem;width:.72rem;height:.72rem;
  border-right:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .3s;
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg)}
.faq__a{padding:0 2.5rem 1.5rem 0;color:var(--muted);max-width:44rem;font-size:.99rem}

/* ---------- Fechamento ---------- */
.close{text-align:center}
.close__title{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);color:#F4F8FC;margin-inline:auto;max-width:18ch;text-wrap:balance}
.close__lede{margin:1.35rem auto 0;max-width:34rem;color:#9FB0C4}
.close__actions{margin-top:2.3rem;display:flex;justify-content:center}
.close__micro{
  margin-top:1.5rem;font-size:.8rem;color:#7E92AC;display:flex;flex-wrap:wrap;
  justify-content:center;gap:.4rem 1.1rem;
}

/* ========================= PÁGINAS INTERNAS ========================= */
.pagina{padding-block:clamp(3.5rem,8vw,6rem) var(--gap-section)}
.entrada__cabecalho{margin-bottom:clamp(2rem,4vw,3rem)}
.entrada__titulo{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);max-width:22ch;text-wrap:balance}
.entrada__capa{margin:0 0 clamp(2rem,4vw,3rem)}
.entrada__rodape{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.9rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
}
.entrada__assinatura{font-family:var(--display);font-size:1.15rem}

.prosa{max-width:var(--measure)}
.prosa p,.prosa ul,.prosa ol,.prosa blockquote,.prosa figure,.prosa table{margin-block:0 1.25rem}
.prosa h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);margin-block:2.5rem 1rem}
.prosa h3{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);margin-block:2rem .75rem}
.prosa a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:.18em}
.prosa ul,.prosa ol{padding-left:1.35rem}
.prosa ul li{list-style:disc}
.prosa ol li{list-style:decimal}
.prosa li{margin-bottom:.5rem}
.prosa blockquote{
  border-left:2px solid var(--gold-deep);padding-left:1.25rem;
  font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--text);
}
.prosa img{margin-block:1.5rem}

.lista{display:grid;gap:clamp(1.75rem,4vw,2.5rem);max-width:48rem}
.lista__item{padding-bottom:clamp(1.75rem,4vw,2.5rem);border-bottom:1px solid var(--line)}
.lista__titulo{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem)}
.lista__titulo a{text-decoration:none}
.lista__titulo a:hover{color:var(--gold-deep)}
.lista__meta{margin-top:.45rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.lista__resumo{margin-top:.9rem;color:var(--muted)}

.pagina__acoes{margin-block:2rem 1.5rem}
.link-voltar{color:var(--gold-deep);text-decoration:underline;text-underline-offset:.18em}
.pagination{margin-top:3rem;display:flex;gap:.75rem;flex-wrap:wrap}
.pagination .page-numbers{
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:2px;text-decoration:none;font-size:.9rem;
}
.pagination .current{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)}

/* ============================== RODAPÉ ============================== */
/* A faixa dourada de baixo fecha a página como fecha cada folha da proposta. */
.footer{
  background:var(--ink-deep);color:#8DA0B8;padding-block:clamp(3rem,7vw,4.5rem);
  font-size:.88rem;border-bottom:6px solid var(--gold);
}
.footer__top{display:grid;gap:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(246,219,101,.14)}
.footer__logo img{width:clamp(11rem,30vw,13.5rem);height:auto;margin:-.9rem 0 .35rem -.7rem}
.footer__line{margin-top:.3rem}
.footer__line a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid transparent}
.footer__line a:hover{border-bottom-color:var(--gold-lt)}
.footer__menu{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.footer__menu a{color:#8DA0B8;text-decoration:none;font-size:.83rem}
.footer__menu a:hover{color:var(--gold-lt)}
.footer__legal{margin-top:2.25rem;font-size:.78rem;line-height:1.65;color:#7285A0;max-width:56rem}
.footer__credit{margin-top:1.5rem;font-size:.72rem;color:#7286A8}

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float{
  position:fixed;z-index:60;
  right:clamp(1rem,3vw,1.75rem);
  bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom));
  width:3.5rem;height:3.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--ink-deep);
  box-shadow:0 12px 30px -8px rgba(6,16,32,.7);
  opacity:0;visibility:hidden;transform:translateY(.75rem) scale(.9);
  transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s,background .25s;
}
.wa-float.is-on{opacity:1;visibility:visible;transform:none}
.wa-float:hover{background:#B88F26}
.wa-float svg{width:1.75rem;height:1.75rem}

/* ========================== BANNER LGPD ========================== */
/* Sem isto, .lgpd{display:flex} venceria o atributo [hidden] do navegador e o
   banner nunca poderia ser escondido nem exibido pelo JS. */
.lgpd[hidden],.lgpd-reabrir[hidden]{display:none}
.lgpd{
  position:fixed;left:0;right:0;bottom:0;z-index:99999;
  padding:clamp(.75rem,2vw,1.25rem);
  display:flex;justify-content:center;
  animation:lgpdEntra .35s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lgpdEntra{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.lgpd__caixa{
  width:min(44rem,100%);
  background:rgba(12,31,55,.97);
  border:1px solid var(--line-gold);border-radius:3px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  padding:clamp(1.15rem,3vw,1.6rem);
  color:#BCCADB;
}
.lgpd__titulo{font-family:var(--display);font-size:1.2rem;color:#F4F8FC;margin-bottom:.5rem}
.lgpd__texto{font-size:.9rem;line-height:1.6}
.lgpd__texto a{color:var(--gold-lt)}
.lgpd__categorias{margin-top:1.15rem;border-top:1px solid var(--line-gold);padding-top:.5rem}
.lgpd__cat{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.8rem;border-bottom:1px solid rgba(246,219,101,.14);
}
.lgpd__cat strong{display:block;color:#DCE6F1;font-weight:500;font-size:.92rem}
.lgpd__cat span{display:block;font-size:.8rem;color:#8DA0B8;margin-top:.15rem}
.lgpd__switch{position:relative;flex:none;width:2.6rem;height:1.45rem;cursor:pointer}
.lgpd__switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.lgpd__switch span{
  position:absolute;inset:0;border-radius:999px;
  background:rgba(246,219,101,.18);border:1px solid var(--line-gold);
  transition:background .2s;
}
.lgpd__switch span::after{
  content:"";position:absolute;top:50%;left:.18rem;transform:translateY(-50%);
  width:1rem;height:1rem;border-radius:50%;background:#8DA0B8;transition:transform .2s,background .2s;
}
.lgpd__switch input:checked + span{background:var(--gold)}
.lgpd__switch input:checked + span::after{transform:translate(1.1rem,-50%);background:var(--ink-deep)}
.lgpd__switch input:disabled + span{opacity:.55;cursor:not-allowed}
.lgpd__switch input:focus-visible + span{outline:2px solid var(--gold-lt);outline-offset:2px}
.lgpd__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.25rem}
.lgpd__btn{
  font-family:var(--sans);font-size:.88rem;font-weight:500;
  padding:.7rem 1.15rem;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;
}
.lgpd__btn--principal{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)}
.lgpd__btn--principal:hover{background:#B88F26;border-color:#B88F26}
.lgpd__btn--ghost{background:transparent;border-color:var(--line-gold);color:var(--gold-lt)}
.lgpd__btn--ghost:hover{border-color:var(--gold-lt);background:rgba(246,219,101,.08)}
.lgpd__link{
  background:none;border:none;cursor:pointer;color:#8FA0B5;font-family:var(--sans);
  font-size:.85rem;text-decoration:underline;text-underline-offset:.18em;padding:.5rem;
}
.lgpd__link:hover{color:var(--gold-lt)}

.lgpd-reabrir{
  position:fixed;z-index:59;
  left:clamp(1rem,3vw,1.75rem);
  bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom));
  background:rgba(12,31,55,.9);color:var(--gold-lt);
  border:1px solid var(--line-gold);border-radius:999px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.55rem .95rem;cursor:pointer;transition:background .2s,color .2s;
}
.lgpd-reabrir:hover{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)}

/* ============================= RESPONSIVO ============================= */
/* Abaixo de 56rem o retrato vira fundo do hero, com véu por cima. */
@media (max-width:55.99rem){
  .nav__toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink);border-bottom:1px solid var(--line-gold);
    padding:.5rem var(--pad) 1.35rem;
    opacity:0;visibility:hidden;transform:translateY(-.5rem);
    transition:opacity .25s,transform .25s,visibility .25s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{display:block;padding:.95rem 0;border-bottom:1px solid rgba(246,219,101,.14);font-size:1rem}
  .nav__cta{margin-top:1.15rem;width:100%}

  .hero{padding-bottom:clamp(2.5rem,7vw,4rem)}
  .hero::after{display:none}
  .hero__grid{gap:0}
  .hero__figure{
    position:absolute;right:-24%;bottom:-2%;z-index:0;
    width:min(26rem,108%);max-width:none;pointer-events:none;
  }
  .hero__figure::before{opacity:.5}
  .hero__figure img{opacity:.3}
  /* Véu duplo: escurece de cima para baixo e ainda puxa a borda esquerda,
     que é onde o texto corre. */
  .hero__veil{
    display:block;position:absolute;inset:-1px -50vw;z-index:1;pointer-events:none;
    background:
      linear-gradient(to right,var(--ink) 0%,rgba(12,31,55,.92) 60%,rgba(12,31,55,.6) 100%),
      linear-gradient(to bottom,var(--ink) 0%,var(--ink) 40%,rgba(12,31,55,.86) 72%,rgba(12,31,55,.72) 100%);
  }

  /* Banner enxuto no celular: na primeira visita ele divide a tela com o
     CTA do hero, então quanto menos altura ocupar, melhor. */
  .lgpd{padding:.6rem}
  .lgpd__caixa{padding:1rem}
  .lgpd__titulo{font-size:1.02rem;margin-bottom:.35rem}
  .lgpd__texto{font-size:.85rem;line-height:1.5}
  .lgpd__acoes{margin-top:.9rem;gap:.5rem}
  .lgpd__acoes .lgpd__btn{flex:1 1 auto;padding:.65rem .9rem;font-size:.85rem}
  .lgpd__link{flex:1 1 100%;text-align:center;padding:.25rem}
}
@media (min-width:56rem){
  .hero__grid{grid-template-columns:1.08fr .92fr;gap:clamp(3rem,5vw,5rem);align-items:center}
  .voices{grid-template-columns:repeat(3,1fr)}
  .paths{grid-template-columns:1fr 1fr;gap:clamp(2.25rem,4vw,3.25rem)}
  .about{grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,5vw,4.5rem)}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (min-width:40rem) and (max-width:55.99rem){
  .voices{grid-template-columns:1fr 1fr}
}
@media (max-width:39.99rem){
  .hero__actions .btn{flex:1 1 100%}
}

/* Barra de admin não pode cobrir o cabeçalho absoluto da home. */
.admin-bar.is-home .site-header{top:32px}
@media screen and (max-width:782px){
  .admin-bar.is-home .site-header{top:46px}
}

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