/* ============================================================
   A Porta · site.css
   Base global (reset, tipografia, botões, header, rodapé, primitivos LGPD,
   lightbox, botão flutuante, reveal baseline). SÓ TOKENS (tokens.css).
   Regras de cada seção ficam no <style> escopado por #id dentro da página.
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
html{overflow-x:clip} /* nunca no body: quebraria position:sticky */
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-display-regular);line-height:var(--lh-heading);
  letter-spacing:var(--tr-tight);text-wrap:balance}
p{text-wrap:pretty}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
ul,ol{padding:0;list-style:none}
:where(a,button,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:3px}
strong,b{font-weight:600}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---------- layout ---------- */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--px));margin-inline:auto;padding-inline:var(--px)}
.section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.tone-bg{background:var(--c-bg);--sec-alt:var(--c-surface)}
.tone-surface{background:var(--c-surface);--sec-alt:var(--c-bg)}
.tone-dark{background:var(--c-dark);color:var(--c-white);--sec-alt:color-mix(in srgb,var(--c-white) 6%,var(--c-dark))}

/* ---------- tipografia utilitária ---------- */
.eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--c-n500);margin-bottom:var(--space-6)}
.eyebrow__idx{flex:none;white-space:nowrap;color:var(--c-text)}
.eyebrow__idx::after{content:"";display:inline-block;width:28px;height:var(--line-w);background:var(--c-n400);
  vertical-align:middle;margin-left:var(--space-3)}
.tone-dark .eyebrow{color:var(--c-accent)}
.tone-dark .eyebrow__idx{color:var(--c-white)}
.tone-dark .eyebrow__idx::after{background:var(--c-accent)}
.t2{font-size:var(--fs-h2);max-width:22ch}
.em{font-weight:var(--fw-display-strong)}
.lead{font-size:var(--fs-lead);line-height:1.55}
.muted{color:var(--c-muted)}

/* ---------- botões (CTA = WhatsApp, exceção aprovada) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:52px;
  padding:var(--space-4) var(--space-8);border-radius:var(--r-sm);font-family:var(--font-body);font-weight:600;
  font-size:1rem;line-height:1.2;background:var(--c-primary);color:var(--c-white);border:1px solid var(--c-primary);
  transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
.btn svg{width:20px;height:20px;flex:none}
.btn--light{background:var(--c-white);color:var(--c-text);border-color:var(--c-white)}
.btn--light:hover{background:var(--c-surface);border-color:var(--c-surface)}
.btn--light:focus-visible{outline-color:var(--c-white)}
.tone-dark .btn{background:var(--c-white);color:var(--c-text);border-color:var(--c-white)}
.tone-dark .btn:hover{background:var(--c-surface);border-color:var(--c-surface)}
.tone-dark .btn:focus-visible{outline-color:var(--c-white)}
@media (max-width:560px){.btn{padding:var(--space-4) var(--space-6)}}

/* linha de CTA de seção: microcopy + botão */
.cta-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8);
  margin-top:clamp(var(--space-12),5vw,var(--space-16));padding-top:var(--space-8);border-top:var(--line-w) solid var(--c-line)}
.cta-line__q{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.25;max-width:30ch;flex:1 1 280px}
.tone-dark .cta-line{border-top-color:var(--c-line-on-dark)}

/* ---------- header + lockup ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;
  color:var(--c-white);background:transparent;border-bottom:var(--line-w) solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.site-header.is-solid{background:color-mix(in srgb,var(--c-bg) 94%,transparent);color:var(--c-text);
  border-bottom-color:var(--c-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lockup{display:inline-flex;align-items:center;gap:var(--space-3);flex:none}
.lockup__sym{position:relative;width:46px;height:46px;flex:none}
.lockup__sym img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s var(--ease)}
.lockup__sym .is-dark{opacity:0}
.site-header.is-solid .lockup__sym .is-light{opacity:0}
.site-header.is-solid .lockup__sym .is-dark{opacity:1}
.lockup__word{font-family:var(--font-display);font-weight:var(--fw-display-regular);font-size:1rem;
  letter-spacing:var(--tr-wide);text-transform:uppercase;white-space:nowrap}
.header-cta{min-height:44px;padding:var(--space-3) var(--space-6);font-size:.9375rem;background:var(--c-white);
  color:var(--c-text);border-color:var(--c-white)}
.header-cta:hover{background:var(--c-surface);border-color:var(--c-surface)}
.site-header.is-solid .header-cta{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}
.site-header.is-solid .header-cta:hover{background:var(--c-primary-dark)}
@media (max-width:560px){.header-cta{display:none}}
/* páginas sem hero escuro: header já nasce sólido */
.page-doc .site-header{background:var(--c-bg);color:var(--c-text);border-bottom-color:var(--c-line)}
.page-doc .lockup__sym .is-light{opacity:0}
.page-doc .lockup__sym .is-dark{opacity:1}
.page-doc .header-cta{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}

/* ---------- rodapé ---------- */
.site-footer{background:var(--c-dark);color:var(--c-white);padding-block:var(--space-16) var(--space-8);
  border-top:var(--line-w) solid var(--c-line-on-dark)}
.foot__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-12)}
.foot__brand p{margin-top:var(--space-4);color:color-mix(in srgb,var(--c-white) 72%,transparent);max-width:34ch;font-size:var(--fs-small)}
.foot__label{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--space-3)}
.foot__col p,.foot__col a{font-size:var(--fs-small);color:color-mix(in srgb,var(--c-white) 82%,transparent);line-height:1.7}
.foot__col a{text-decoration:underline;text-decoration-color:var(--c-line-on-dark);text-underline-offset:3px}
.foot__col a:hover{color:var(--c-white);text-decoration-color:var(--c-white)}
/* CTA do rodapé (WhatsApp) é link de texto dentro do parágrafo, mas é CTA de verdade
   (data-cta-merlin): garante área de toque >=44px no mobile sem alterar o texto/copy. */
.foot__col a[data-cta-merlin]{display:inline-block;padding-block:14px}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);
  padding-top:var(--space-6);border-top:var(--line-w) solid var(--c-line-on-dark);font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.06em;color:color-mix(in srgb,var(--c-white) 60%,transparent)}
.foot__base a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr;gap:var(--space-8)}}
/* espaço para o botão flutuante não cobrir a base do rodapé no mobile */
@media (max-width:560px){.site-footer{padding-bottom:calc(var(--space-8) + 72px)}}

/* ---------- botão flutuante WhatsApp (canto INFERIOR DIREITO) ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--c-primary);color:var(--c-white);
  border:var(--line-w) solid color-mix(in srgb,var(--c-white) 28%,transparent);box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease),background .2s var(--ease)}
.wa-float:hover{background:var(--c-primary-dark);transform:translateY(-2px)}
.wa-float svg{width:28px;height:28px}
.wa-float:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
@media (max-width:560px){.wa-float{right:14px;bottom:14px;width:54px;height:54px}}

/* ---------- banner de cookies (SEMPRE À ESQUERDA) ---------- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:70;width:min(360px,calc(100% - 120px));
  background:var(--c-bg);color:var(--c-text);border:var(--line-w) solid var(--c-n200);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);padding:var(--space-4) var(--space-6);font-size:var(--fs-small);line-height:1.5}
.cookie[hidden]{display:none}
.cookie{transition:transform .35s var(--ease),opacity .35s var(--ease)}
.cookie.is-tucked{transform:translateY(calc(100% + 32px));opacity:0;pointer-events:none}
.cookie p a{text-decoration:underline;text-underline-offset:3px}
.cookie__actions{display:flex;gap:var(--space-3);margin-top:var(--space-3)}
.cookie__actions button{min-height:40px;padding:var(--space-2) var(--space-4);border-radius:var(--r-sm);font-weight:600;font-size:.8125rem}
.cookie__ok{background:var(--c-primary);color:var(--c-white)}
.cookie__no{border:var(--line-w) solid var(--c-n400)}
@media (max-width:560px){.cookie{left:12px;bottom:12px;width:calc(100% - 12px - 80px);padding:var(--space-3) var(--space-4);font-size:.8125rem}
  .cookie__actions{margin-top:var(--space-2)}.cookie__actions button{min-height:40px;flex:1 1 0}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c-dark) 94%,transparent);padding:var(--space-12) var(--space-4)}
.lb.is-open{display:flex}
.lb__stage{margin:0;max-width:min(1200px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.lb__stage img{max-height:78vh;width:auto;max-width:100%;border-radius:var(--r-sm)}
.lb__cap{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:color-mix(in srgb,var(--c-white) 78%,transparent);text-align:center}
.lb__btn{position:absolute;color:var(--c-white);width:48px;height:48px;display:grid;place-items:center;
  border:var(--line-w) solid var(--c-line-on-dark);border-radius:var(--r-pill);font-size:1.4rem;line-height:1}
.lb__btn:hover{background:color-mix(in srgb,var(--c-white) 12%,transparent)}
.lb__x{top:16px;right:16px}
.lb__prev{left:16px;top:50%;transform:translateY(-50%)}
.lb__next{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb__prev,.lb__next{top:auto;bottom:16px;transform:none}.lb__prev{left:calc(50% - 60px)}.lb__next{right:calc(50% - 60px)}}

/* ---------- reveal baseline (a etapa 7 enriquece) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.js [data-reveal="fade"]{transform:none}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-delay="1"]{transition-delay:.08s}
html.js [data-delay="2"]{transition-delay:.16s}
html.js [data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- página de documento (política) ---------- */
.doc{padding-top:calc(var(--header-h) + var(--space-16));padding-bottom:var(--space-24)}
.doc__body{max-width:72ch}
.doc__body h1{font-size:var(--fs-h2);margin-bottom:var(--space-3)}
.doc__body h2{font-size:var(--fs-h3);margin:var(--space-12) 0 var(--space-3)}
.doc__body p,.doc__body li{color:var(--c-text);margin-bottom:var(--space-3)}
.doc__body ul{list-style:disc;padding-left:1.2em}
.doc__meta{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;color:var(--c-n500)}

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

/* ---------- menu de navegação (2026-10-02, pedido do operador) ---------- */
.site-nav{margin-left:auto}
.site-nav__list{display:flex;align-items:center;gap:clamp(1.25rem,2.2vw,2.25rem);list-style:none;margin:0;padding:0}
.site-nav__list a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;
  color:inherit;text-decoration:none;opacity:.86;transition:opacity .25s var(--ease)}
.site-nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:var(--line-w);background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.site-nav__list a:hover,.site-nav__list a:focus-visible{opacity:1}
.site-nav__list a:hover::after,.site-nav__list a:focus-visible::after{transform:scaleX(1)}
.site-nav__cta{display:none}
.nav-toggle{display:none;position:relative;width:44px;height:44px;flex:none;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
.nav-toggle__bar{position:absolute;left:11px;right:11px;height:var(--line-w);background:currentColor;transition:transform .3s var(--ease)}
.nav-toggle__bar:first-child{top:18px}
.nav-toggle__bar:last-child{top:25px}
.site-header.is-open .nav-toggle__bar:first-child{transform:translateY(3.5px) rotate(45deg)}
.site-header.is-open .nav-toggle__bar:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:900px){
  .site-header .container{gap:var(--space-4)}
  .header-cta{margin-left:auto}
  .nav-toggle{display:block}
  .site-nav{position:fixed;left:0;right:0;top:var(--header-h);margin:0;padding:var(--space-6) var(--px) var(--space-8);
    background:var(--c-bg);color:var(--c-text);border-bottom:var(--line-w) solid var(--c-line);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
  .site-header.is-open .site-nav{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__list li{border-bottom:var(--line-w) solid var(--c-line)}
  .site-nav__list a{display:flex;min-height:56px;font-family:var(--font-display);font-size:1.375rem;opacity:1}
  .site-nav__list a::after{display:none}
  .site-nav__cta{display:block;margin-top:var(--space-6)}
  .site-nav__cta .btn{width:100%;justify-content:center}
  .site-header.is-open{background:var(--c-bg);color:var(--c-text);border-bottom-color:var(--c-line)}
  .site-header.is-open .lockup__sym .is-light{opacity:0}
  .site-header.is-open .lockup__sym .is-dark{opacity:1}
  .site-header.is-open .header-cta{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}
}
@media (max-width:560px){.nav-toggle{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.site-nav,.site-nav__list a::after,.nav-toggle__bar{transition:none}}

/* ---------- Lenis (smooth scroll leve, desktop) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}