/* ═══════════════════════════════════════════════════════════════════════════
   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:calc(84px + var(--preview-bar,0px))}
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)}

/* ── Balões de rede social (social-float.njk) ──────────────────────────────
   Mesma técnica do botão flutuante: o design mora no `style` inline e aqui
   ficam só os estados (hover, foco, entrada e o recorte do celular).

   A entrada é opt-in do JavaScript: `data-armed` só existe depois que o
   site.js liga o efeito. Sem JS — ou se ele falhar — nenhuma regra abaixo
   casa e os balões ficam simplesmente visíveis, que é o estado que importa. */
[data-socialpill]{transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease, box-shadow .22s ease, border-color .22s ease}
[data-socialpill]:hover{transform:translateX(6px);border-color:rgba(201,162,39,0.85);box-shadow:0 14px 32px rgba(3,10,20,0.42)}
[data-socialpill]:focus-visible{outline:2px solid #C9A227;outline-offset:3px}

[data-socialfloat][data-armed] [data-socialpill]{opacity:0;transform:translateX(-115%)}
[data-socialfloat][data-armed][data-shown] [data-socialpill]{opacity:1;transform:translateX(0)}
[data-socialfloat][data-armed][data-shown] [data-socialpill]:hover{transform:translateX(6px)}

/* Celular: o rótulo sai e sobra o disco com a marca. Ele encosta na borda
   esquerda (o design é uma "aba"), então o padding é assimétrico. O nome do
   link continua no `aria-label` — o leitor de tela não perde nada. */
@media (max-width:599px){
  [data-socialpill-label]{display:none}
  [data-socialpill]{padding:11px 14px 11px 11px!important;gap:0!important}
  [data-socialfloat]{gap:8px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important}
}

/* Telas baixas (paisagem no celular): os balões cobririam o conteúdo útil. */
@media (max-height:439px){
  [data-socialfloat]{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  [data-socialpill]{transition:box-shadow .22s ease, border-color .22s ease}
  [data-socialpill]:hover{transform:none}
  [data-socialfloat][data-armed] [data-socialpill]{opacity:1;transform:none}
}

/* 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{height:28px;width:auto}
  [data-logo-name]{font-size:14.5px;letter-spacing:0.3px}
  [data-logo-sub]{font-size:8.5px;letter-spacing:1.8px}
}

/* Áreas de atuação: recorte do mobile.
   Mesma técnica do BLOCO 2 — o SSR manda a seção inteira e a media query
   decide o que aparece. O `<details>` é irmão ANTERIOR da grade no HTML
   (o `~` não olha para trás) e volta para baixo dela pelo `order`.
   Acima do corte nada disso existe: o botão some e todos os cards voltam,
   na ordem em que o painel os organizou. */
[data-areas-more]{display:none}

@media (max-width:599px){
  [data-areas-more]{display:block}
  [data-areas-more] summary{list-style:none}
  [data-areas-more] summary::-webkit-details-marker{display:none}
  [data-areas-sign]{transition:transform .25s ease}
  [data-areas-more][open] [data-areas-sign]{transform:rotate(180deg)}

  /* O `!important` daqui para baixo não é preguiça: o design mora em
     atributos `style` inline (fidelidade ao Claude Design), e inline vence
     qualquer seletor de folha. Mesma técnica do hover no BLOCO 1. */
  [data-areas-grid] [data-area][data-area-mobile="false"]{display:none!important}
  /* Aberto, revela os recolhidos. `flex` e não `block`: é o display que o
     card usa no inline para empilhar número, título e descrição. Vence o
     `none` acima por ser mais específico, com os dois em `!important`. */
  [data-areas-more][open] ~ [data-areas-grid] [data-area][data-area-mobile="false"]{
    display:flex!important;
    /* `animation` e não `transition`: transição nenhuma dispara a partir de
       `display:none` — o card não tem estado anterior de onde sair.

       `backwards` e NÃO `both`: o preenchimento de uma animação vence
       qualquer declaração normal, e `both` deixaria o `transform:none` do
       último quadro grudado no card para sempre — matando o `translateY(-4px)`
       do hover (BLOCO 1). `backwards` só vale ANTES de começar, que é
       justamente o que a cascata precisa: quem tem atraso fica invisível
       esperando a vez, em vez de piscar visível e sumir. */
    animation:wf-area-entra .34s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay:var(--wf-atraso,0ms);
  }

  /* Saindo: o JS segura o fechamento por 160ms e marca `data-fechando`, senão
     o `display:none` levaria os cards embora antes de qualquer animação. Sem
     cascata e mais rápido que a entrada — saída que se demora vira espera. */
  [data-areas-more][data-fechando] ~ [data-areas-grid] [data-area][data-area-mobile="false"]{
    animation:wf-area-sai .16s cubic-bezier(.22,.61,.36,1) forwards;
  }

  /* Sobem para o lugar, em vez de aparecerem do nada. O deslocamento é
     pequeno de propósito: são até sete cards de uma vez, e um percurso maior
     viraria bagunça em movimento. */
  @keyframes wf-area-entra{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:none}
  }
  @keyframes wf-area-sai{
    from{opacity:1;transform:none}
    to{opacity:0;transform:translateY(-8px)}
  }

  /* Menos cards na tela compra espaço: os que ficam respiram mais. */
  [data-areas-grid] [data-area]{gap:11px!important;padding:26px 22px!important}
  [data-areas-grid] [data-area] strong{font-size:19.5px!important}
  [data-areadesc]{font-size:14.5px!important;line-height:1.6!important}
}

/* Á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.
   Os botões do menu ficam de fora ([data-menu-cta]): já passam dos 44px de
   altura, não precisam do reforço, e a margem negativa fazia o alvo invadir
   o vão entre os dois — toque na borda do WhatsApp caía no "Ligar agora". */
@media (pointer:coarse){
  footer a,
  [data-menu-mobile] a:not([data-menu-cta]),
  [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}

/* ─────────────────── Formulário de captação (#contato) ───────────────────
   O design do Claude Design não tinha formulário: nada aqui existe no BLOCO 1,
   e por isso tudo mora neste bloco, ancorado em data-attributes.

   Dois vazios do BLOCO 1 que precisam ser preenchidos:

    · O hover da pílula casa com `a[style*="border-radius:100px"]` — só <a>.
      O envio é um <button>, então repetimos a regra para ele.
    · O anel de foco dourado cobre a, button e summary. Campo de formulário
      ficaria com o anel padrão do navegador, que destoa da paleta.
   ───────────────────────────────────────────────────────────────────────── */

button[data-lead-submit]{transition:transform .22s ease, box-shadow .22s ease, filter .22s ease}
button[data-lead-submit]:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,162,39,0.18);filter:brightness(1.05)}
button[data-lead-submit]:disabled{opacity:.6;cursor:progress}

[data-lead-form] input:focus-visible,
[data-lead-form] select:focus-visible,
[data-lead-form] textarea:focus-visible{outline:2px solid #C9A227;outline-offset:3px}

/* O contorno claro do campo escurece um pouco no hover — mesmo gesto dos
   cards do design, na escala de um controle. */
[data-lead-form] input:hover,
[data-lead-form] select:hover,
[data-lead-form] textarea:hover{border-color:#C9A227}
[data-lead-form] input,
[data-lead-form] select,
[data-lead-form] textarea{transition:border-color .22s ease, box-shadow .22s ease}

/* Campo recusado. O `!important` é a mesma técnica do BLOCO 1: a borda mora
   no atributo `style` do template, e inline vence qualquer seletor. */
[data-lead-form] [aria-invalid="true"]{border-color:#E3766D !important;box-shadow:0 0 0 3px rgba(179,38,30,0.18)}

.lead-erro{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:#F2B4AE}

/* `hidden` precisa vencer o `display`, e sozinho não vence.
   O `[hidden]{display:none}` do navegador tem especificidade 0,1,0: perde para
   o `display:flex` que o <form> traz no atributo `style` (o design é todo
   inline) e para o `display:block` da regra acima. Sem este bloco, esconder o
   formulário depois do envio não esconde nada — a confirmação apareceria
   embaixo do formulário ainda preenchido —, e cada mensagem de erro vazia
   ocuparia uma linha entre os campos. */
[data-lead-form][hidden],
[data-lead-sucesso][hidden],
[data-lead-erros][hidden],
[data-lead-desligamento][hidden],
.lead-erro[hidden]{display:none !important}

/* O placeholder precisa ser legível sem competir com o texto digitado.
   #5F6A76 sobre o #F7F5F0 dos campos rende 5,06:1 — acima dos 4,5:1 da WCAG
   1.4.3. Não é purismo: "Ex.: 03/2024" e "Ex.: SP" são o único lugar da tela
   que diz o formato esperado, e sem JavaScript não há máscara para corrigir
   quem errar. Um exemplo que não se lê é um campo que volta com erro.
   O `opacity:1` desfaz o esmaecimento que o Firefox aplica por conta. */
[data-lead-form] ::placeholder{color:#5F6A76;opacity:1}

/* 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;
  }
}