/* ═══════════════════════════════════════════════════════════════════════════
   WF Advocacia — folha de estilo da landing page

   BLOCO 1 é a cópia VERBATIM do <style> de `WF Advocacia Home.dc.html`
   (Claude Design). NÃO reescreva estes seletores: vários deles casam por
   substring com os estilos inline do markup (`a[style*="border-radius:100px"]`,
   `div[style*="rgba(201,162,39,0.18)"]`, `[style*="auto-fit"]`). Mexer nos
   estilos inline dos templates OU nestes seletores quebra hovers e reveals.

   BLOCO 2 traz apenas o que o protótipo resolvia em JavaScript por
   `window.innerWidth` / `innerHeight` e que, em SSR, precisa ser CSS.

   BLOCO 0 são os tokens de largura da página, únicos e compartilhados por
   todos os partials.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────── BLOCO 0 — tokens de largura ─────────────────────────
   O conteúdo acompanha a largura da tela em vez de ficar preso numa coluna
   central estreita: a medida do design é de gutters ≈ 5,3% da viewport
   (≈100px numa tela de 1893px), não uma caixa de 1180px.

   --wrap    trava a página em 1920px para que, em monitores ultrawide, a
             linha de texto não vire uma faixa ilegível; até 1920px a página
             é fluida e os gutters mandam sozinhos.
   --gutter  5,3vw, com piso de 20px (celular) e teto de 104px (o valor que
             5,3vw atinge justamente aos ~1920px, então a transição para o
             --wrap é contínua, sem salto).
   --gutter-nav  idêntico, só com o piso de 18px do cabeçalho: abaixo de
             360px a marca + o botão de menu só cabem com esses 4px extras
             (ver o ajuste de 320px no BLOCO 2).
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --wrap:1920px;
  --gutter:clamp(20px,5.3vw,104px);
  --gutter-nav:clamp(18px,5.3vw,104px);
}

/* ─────────────────────────── BLOCO 1 — design ─────────────────────────── */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Archivo',system-ui,sans-serif;color:#1C2733;background:#0A1A2F;-webkit-font-smoothing:antialiased}
a{color:#B98A1F;text-decoration:none}
a:hover{color:#C9A227}
section[id]{scroll-margin-top:84px}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[data-faq] summary .faq-sign::after{content:"+"}
details[data-faq][open] summary .faq-sign::after{content:"\2212"}

/* --- Micro-interações (UI/UX) --- */
a[style*="border-radius:100px"]{transition:transform .22s ease, box-shadow .22s ease, filter .22s ease}
a[style*="border-radius:100px"]:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,162,39,0.18)}
a[style*="#C9A227"][style*="border-radius:100px"]:hover{filter:brightness(1.05)}

a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid #C9A227;outline-offset:3px;border-radius:2px}

div[style*="border-left:3px solid #C9A227"],
div[style*="rgba(201,162,39,0.18)"],
div[style*="padding:30px 26px 28px"],
div[style*="border-radius:6px"]{transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease, border-color .32s ease, background-color .32s ease}
div[style*="border-left:3px solid #C9A227"]:hover,
div[style*="padding:30px 26px 28px"]:hover{transform:translateY(-5px)!important;border-color:#C9A227!important;box-shadow:0 16px 38px rgba(10,26,47,0.13)}
div[style*="rgba(201,162,39,0.18)"]:hover{transform:translateY(-5px)!important;border-color:rgba(201,162,39,0.5)!important;background-color:rgba(255,255,255,0.06)!important;box-shadow:0 16px 38px rgba(0,0,0,0.28)}
section[style*="#0A1A2F"] div[style*="border-radius:6px"]:hover{transform:translateY(-4px)!important;border-color:rgba(201,162,39,0.4)!important;box-shadow:0 16px 38px rgba(0,0,0,0.3)}

details[data-faq]{transition:border-color .25s ease, box-shadow .25s ease}
details[data-faq]:hover{border-color:#C9A227}
details[data-faq][open]{border-color:#C9A227;box-shadow:0 8px 26px rgba(10,26,47,0.08)}
details[data-faq] summary .faq-sign{transition:transform .25s ease}
details[data-faq][open] summary .faq-sign{transform:rotate(180deg)}

header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:#C9A227;transition:width .28s cubic-bezier(.22,.61,.36,1)}
header nav a:hover::after{width:100%}

a[data-dossier]:hover{border-color:#0A1A2F!important;box-shadow:0 16px 36px rgba(10,26,47,0.12);transform:translateY(-4px)}
a[data-dossier]:hover [data-tab]{background:#C9A227!important;color:#0A1A2F!important}
a[data-area]:hover{border-color:rgba(201,162,39,0.6)!important;background-color:rgba(255,255,255,0.06)!important;transform:translateY(-4px)}
a[data-area]:hover [data-areaarrow]{opacity:1;transform:translateX(0)}
article[data-step]:hover{box-shadow:0 0 0 3px #E4D9B8,0 14px 32px rgba(10,26,47,0.10)!important;transform:translateY(-4px)}
a[aria-label="Falar no WhatsApp"]{transition:transform .22s ease, box-shadow .22s ease}
a[aria-label="Falar no WhatsApp"]:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 30px rgba(37,211,102,0.4)}

/* ──────────────────── BLOCO 2 — o que era JS no protótipo ─────────────────
   O protótipo alternava por `vw >= 1024` (nav) e `vh >= 700` (citação do hero).
   Em SSR não há viewport: renderizamos os dois estados e alternamos por media
   query, nos MESMOS pontos de corte. Ganho: funciona sem JS e sem salto de
   layout (CLS) na primeira pintura.
   ───────────────────────────────────────────────────────────────────────── */

/* O rótulo do botão flutuante é editável no painel, então o hover não pode
   depender do texto do aria-label. Mantemos o seletor original acima (para
   fidelidade) e ancoramos no data-attribute. */
a[data-wafloat]{transition:transform .22s ease, box-shadow .22s ease}
a[data-wafloat]:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 30px rgba(37,211,102,0.4)}

/* Assinatura do desenvolvedor no rodapé. O `!important` é a mesma técnica do
   BLOCO 1: a cor mora no atributo `style`, então o hover precisa dele para
   vencer o inline. */
a[data-credito]{transition:color .22s ease, border-color .22s ease}
a[data-credito]:hover{color:#C9A227 !important;border-color:#C9A227}

/* Cabeçalho: mobile primeiro */
[data-nav-desktop],
[data-nav-actions],
[data-hero-watermark]{display:none}
[data-nav-toggle]{display:grid}
[data-menu-mobile]{display:none}
header[data-menu-open="true"] [data-menu-mobile]{display:flex}

@media (min-width:1024px){
  [data-nav-desktop]{display:flex}
  [data-nav-actions]{display:flex}
  [data-hero-watermark]{display:block}
  [data-nav-toggle]{display:none}
  /* Se a janela crescer com o menu aberto, ele some — como no protótipo. */
  header[data-menu-open="true"] [data-menu-mobile]{display:none}
}

/* Citação do hero: só quando há altura suficiente (era `vh >= 700`). */
[data-hero-quote]{display:none}
@media (min-height:700px){
  [data-hero-quote]{display:block}
}

/* Telas de 320px (iPhone SE): a marca completa + o botão de menu não cabem
   nos 284px úteis do cabeçalho. Reduzimos a marca proporcionalmente em vez
   de deixar o botão vazar. Acima de 360px nada muda. */
@media (max-width:359px){
  [data-logo]{gap:10px}
  [data-logo] > svg{width:34px;height:25px}
  [data-logo-name]{font-size:14.5px;letter-spacing:0.3px}
  [data-logo-sub]{font-size:8.5px;letter-spacing:1.8px}
}

/* Área de toque dos links de texto (WCAG 2.5.8 exige 24x24 CSS px).
   O padding é compensado por margem negativa: o alvo cresce 12px sem
   deslocar um pixel do layout do design. Só em telas de toque — no
   desktop, o espaçamento entre os links já satisfaz a exceção da norma. */
@media (pointer:coarse){
  footer a,
  [data-menu-mobile] a,
  [data-cta="cta_email"],
  [data-cta="cta_instagram"],
  [data-cta="hero_explore"],
  [data-cta="prova_instagram"]{padding-block:6px;margin-block:-6px}
}

/* As imagens substituem o <image-slot> do Claude Design (scaffold da
   ferramenta, não é de produção). `display:contents` no <picture> preserva
   exatamente a caixa que o slot ocupava. */
picture{display:contents}

/* Sem JavaScript, nada pode ficar preso em opacity:0 pelo reveal. */
.no-js [data-reveal]{opacity:1 !important;transform:none !important}

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