/* ============================================================================
   af-v2.css — RE-SKIN da landing ITBI: ESTRUTURA aprovada, não só cor
   ----------------------------------------------------------------------------
   Direção: WebBuilder-AF/projetos/landing-itbi/PROJECT_DESIGN.md
   Aprovada por Moabe em 2026-07-24 · Style Tile: .../STYLE_TILE.html

   Correção de rota (2026-07-24): a 1ª tentativa foi só sobreposição de tokens.
   Repintou o layout antigo e NÃO entregou a estrutura aprovada. Esta versão
   implementa a composição aprovada: nav de 4 itens, hero com carrossel e SEM
   cartão sobre a foto, o exemplo de simulação em dupla abaixo do hero, faixa
   escura na prescrição, escritório com foto full-bleed e os 3 compromissos
   dentro da imagem, 5 advogados, e botão flutuante na paleta.

   NÃO TOCA: conteúdo, textos normativos, disclaimer, consentimento, calc.js,
   aliquotas.json, selic.json, municipios.js, funil #simular.
   Nada aqui aplica ou interpreta regra da OAB.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  --navy:#17120f; --navy-2:#2c231d; --navy-3:#3a2e26; --navy-deep:#100c0a; --navy-ink:#17120f;
  --gold:#9a7440; --gold-2:#b8935c; --gold-hot:#b8935c; --gold-ink:#7d5c31;
  --bg:#f7f2e9; --cream:#f7f2e9; --cream-2:#f0e8da; --card:#fffdf8;
  --ink:#17120f; --ink-2:#54463b; --muted:#695c50;
  --line:#e6dcca; --line-cool:#e6dcca;
  --r-md:10px; --r-lg:16px; --r-xl:20px;
  --sh-soft:0 1px 2px rgba(23,18,15,.05),0 8px 20px -6px rgba(23,18,15,.08);
  --sh-med:0 2px 4px rgba(23,18,15,.05),0 18px 40px -10px rgba(23,18,15,.12);
  --sh-big:0 2px 4px rgba(23,18,15,.05),0 30px 66px -14px rgba(23,18,15,.18);
  --sh-gold:0 12px 26px -8px rgba(138,66,48,.28);
  /* Display: 4ª iteração. Depois de reprovar 4 sem-serifa (Instrument Sans,
     Bricolage, Schibsted e mais 6 candidatas), o Moabe reabriu a serifa —
     "desde que seja de fácil leitura". Literata é uma fonte DE LEITURA
     (desenhada para livro digital): serifas de junção macia, contraste baixo e
     corpo cheio no peso 600. Nada da excentricidade do Fraunces, que foi o que
     reprovou a serifa na 1ª rodada. */
  --display:'Poppins',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; --num:'Manrope',system-ui,sans-serif;
  --clay:#8a4230; --clay-2:#a1503b; --gap:#8f3a2e;
  --verde:#33513f; --verde-2:#3d6149;   /* do couro da poltrona — botao flutuante */
}
html{overflow-x:clip}

/* ------------------------------------------------------------ 2. TIPOGRAFIA */
h1,h2,h3{font-weight:600;letter-spacing:-.018em}
/* Literata tem eixo óptico: em display o desenho estreita a serifa e abre o
   contraste sozinho. Serifa pede tracking bem menos fechado que grotesca —
   apertar serifa cola as hastes e é o que faz "cansar de ler". */
h1{font-size:clamp(2.05rem,4.6vw,3.35rem);line-height:1.12;letter-spacing:-.022em;font-weight:600;
  font-variation-settings:'opsz' 72;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.18;letter-spacing:-.012em;
  font-variation-settings:'opsz' 48;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.004em;font-variation-settings:'opsz' 24}
body{line-height:1.62}
.hero-card .hl .v,.stats .n,.stat .n,#res-faixa,#contador .n,.extrato .v,
[id^="hx-"],[id^="ex-"],.big,.afv2-num{
  font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.022em;font-weight:700}
/* "STJ · Tema 1.113" não pode quebrar entre "Tema" e o número */
.stats .stat .n{font-size:clamp(1.25rem,2.2vw,1.72rem);white-space:nowrap}
/* Marcador de destaque no H1. Cobre a FRASE inteira que carrega a afirmação
   ("Pode ter pagado a maior."), não só as duas últimas palavras — pedido do
   Moabe em 2026-07-25. `box-decoration-break:clone` faz o marcador reaparecer
   em cada linha quando a frase quebra. */
.hero h1 .gold{-webkit-text-fill-color:currentColor;color:var(--navy);background:none;
  background-image:linear-gradient(transparent 32%,rgba(154,116,64,.19) 32%,rgba(154,116,64,.19) 94%,transparent 94%);
  padding:0 .12em;margin:0 -.02em;border-radius:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.kicker{color:var(--gold-ink)}
/* Numeração decorativa de seção (01/02/04) removida a pedido do Moabe: numerava
   seções que não são uma sequência. A regra fica aqui para o caso de o markup
   antigo voltar em alguma seção ainda não re-vestida. */
.secnum{display:none!important}

/* --------------------------------------------------- 3. NAV: 4 itens */
.topbar{background:rgba(247,242,233,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:600;color:var(--navy)}
.brand .oab{color:var(--muted)}
.afv2-nav{display:flex;align-items:center;gap:4px}
.afv2-nav a.lnk{color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:10px 14px;border-radius:8px;transition:background .25s,color .25s}
.afv2-nav a.lnk:hover{background:rgba(23,18,15,.06);color:var(--navy)}
.afv2-nav .afv2-cta{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;
  padding:11px 20px;border-radius:999px;font-size:.86rem;font-weight:600;text-decoration:none;margin-left:8px;
  transition:transform .25s,box-shadow .25s}
.afv2-nav .afv2-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(23,18,15,.28)}
.afv2-nav .afv2-cta svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}

/* --------------------------------------------------- 4. HERO: claro + foto,
   SEM cartão sobre a imagem (o exemplo de simulação foi para a dupla abaixo) */
.hero{position:relative;overflow:hidden;color:var(--ink);background:#e8dccb;padding:0 0 84px}
.hero .dots,.hero .blob{display:none!important}
.hero .grain{opacity:.03}
.afv2-slides{position:absolute;inset:0;z-index:0;overflow:hidden;max-width:100vw}
.afv2-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.afv2-slide.on{opacity:1}
.afv2-slide i{position:absolute;inset:0;display:block;background-size:cover;background-position:center right;transform:scale(1.03)}
.afv2-slide.on i{animation:afv2kb 8.5s ease-out forwards}
@keyframes afv2kb{from{transform:scale(1.03)}to{transform:scale(1.09)}}
.afv2-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(247,242,233,.97) 0%,rgba(247,242,233,.90) 26%,
    rgba(247,242,233,.42) 48%,rgba(247,242,233,.03) 68%,rgba(247,242,233,0) 82%)}
.hero .wrap{position:relative;z-index:3}
.hero-grid{display:block!important}           /* uma coluna: a foto ocupa a direita */
.hero-grid>div{max-width:640px}
.hero .wrap:first-of-type{padding-top:62px}
.afv2-dots{position:relative;z-index:3;display:flex;gap:9px;margin:30px auto 0;max-width:1120px;padding:0 22px}
.afv2-dots b{width:34px;height:3px;border-radius:2px;background:rgba(23,18,15,.18);cursor:pointer;transition:background .3s}
.afv2-dots b.on{background:var(--gold)}
/* kicker no lugar do badge grande */
.afv2-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--gold-ink);font-family:var(--sans);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px}
.afv2-eyebrow::before{content:'';width:32px;height:1px;background:var(--gold-ink);opacity:.65}
.hero h1{color:var(--navy);max-width:24ch;margin-top:0}
.hero p.sub{color:var(--ink-2);font-weight:400;max-width:56ch}
.afv2-under{margin:14px 0 20px}
.selo{color:var(--ink-2);gap:10px;margin-top:0}
.selo span{background:rgba(255,255,255,.62);border:1px solid var(--line);padding:9px 15px;border-radius:999px;font-weight:500}
.selo svg{stroke:var(--gold-ink);width:14px;height:14px}
/* ---- Avaliações do Google (hero, prova social, rodapé) ----
   Passaram a ser LINKS para o perfil real do escritório (173 avaliações). */
.gstars{color:var(--ink-2);text-decoration:none;border-radius:8px;
  transition:color .2s ease}
.gstars .st{color:var(--gold-ink)} .gstars b{color:var(--navy)}
.gstars .ext{font-style:normal;color:var(--gold-ink);margin-left:2px;
  display:inline-block;transition:transform .2s ease}
.gstars:hover{color:var(--navy)} .gstars:hover .ext{transform:translate(2px,-2px)}

.gbadge{text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.gbadge:hover{border-color:rgba(154,116,64,.5);box-shadow:var(--sh-soft);transform:translateY(-2px)}
.social h2 .afv2-num{color:var(--gold-ink);font-weight:800}
/* .glink é flex com gap: o <b> do número virava item e abria buraco dos dois
   lados. Volta a ser texto corrido. */
.glink{display:inline-block;gap:0}
.glink b{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:800}

/* Link para o site institucional, dentro da foto do escritório */
.afv2-site{display:inline-block;margin-top:clamp(20px,2.4vw,30px);color:#fff;
  font-family:var(--sans);font-size:.87rem;font-weight:600;text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid rgba(184,147,92,.75);
  text-shadow:0 1px 14px rgba(0,0,0,.5);transition:border-color .2s ease,color .2s ease}
.afv2-site:hover{color:var(--gold-2);border-color:var(--gold-2)}

/* --- Os três passos ---------------------------------------------------------
   Refeitos em 2026-07-25: eram cartão branco com sombra + pílula em gradiente
   + ladrilho de ícone arredondado — o combo mais template que existe. Agora o
   tratamento é editorial e usa a linguagem que a página já tem: filete bronze
   (a mesma do eyebrow e dos compromissos) e o numeral na família dos números.
   Sem caixa, sem sombra, sem gradiente. */
.afv2-passos{gap:0!important}
@media(min-width:800px){.afv2-passos{grid-template-columns:repeat(3,1fr);gap:0!important}}

.afv2-passo{position:relative;padding:26px 0 4px}
/* filete de topo: só ele delimita a coluna */
.afv2-passo::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--gold);opacity:.42;transition:opacity .3s ease}
.afv2-passo:hover::before{opacity:1}
@media(min-width:800px){
  .afv2-passo{padding:26px 34px 4px 0}
  .afv2-passo + .afv2-passo{padding-left:34px}
  /* divisor vertical entre colunas, no lugar da borda do cartão */
  .afv2-passo + .afv2-passo::after{content:'';position:absolute;top:26px;bottom:10px;left:0;
    width:1px;background:linear-gradient(180deg,rgba(154,116,64,.34),transparent)}
}

/* cabeçalho: kicker + numeral grande + marca de linha alinhada à direita */
.afv2-passo .ord{display:flex;align-items:flex-end;gap:12px;margin-bottom:18px}
.afv2-passo .ord .k{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-ink);padding-bottom:.42em}
.afv2-passo .ord b{font-size:clamp(2.1rem,4vw,2.9rem);line-height:.82;color:var(--gold-ink);
  font-weight:800;letter-spacing:-.03em}
/* a marca não tem ladrilho: é um desenho de linha, e só */
.afv2-passo .mk{width:30px;height:30px;margin-left:auto;fill:none;stroke:var(--gold);
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.8;
  transition:opacity .3s ease,transform .3s ease}
.afv2-passo:hover .mk{opacity:1;transform:translateY(-2px)}

.afv2-passo h3{font-size:1.12rem;color:var(--navy);margin-bottom:8px}
.afv2-passo p{color:var(--ink-2);font-size:.93rem;line-height:1.66;max-width:34ch}
@media(prefers-reduced-motion:reduce){
  .afv2-passo .mk,.afv2-passo::before{transition:none}
  .afv2-passo:hover .mk{transform:none}
}
@media(max-width:799px){
  .afv2-passo{padding:24px 0 26px}
  .afv2-passo p{max-width:none}
}

/* Linhas de link do rodapé */
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}

/* Contador: o cartão é escuro, mas o <strong> herdava o espresso do texto —
   "simulações realizadas" ficava preto sobre preto. */
.contador .l{color:rgba(255,255,255,.74)}
.contador .l strong{color:#fff}
.contador .n{color:var(--gold-2)}

/* Pendência que sobrou do laudo de 2026-07-24: os links "Simular este caso →"
   dos cenários usavam --bronze (4,25:1 no branco) e reprovavam AA. Passam a
   usar --bronze-ink (5,46:1), que é o token de bronze PARA TEXTO. */
.slide .go{color:var(--gold-ink)}
.slide .go:hover{color:var(--clay)}
.stats{border-top:1px solid rgba(23,18,15,.12);padding-top:26px;margin-top:34px;max-width:640px}
.stat{background:none!important;border:0!important;box-shadow:none!important;padding:0 !important}
.stats .n,.stat .n{color:var(--navy)} .stats .l,.stat .l{color:var(--muted)}

/* --------------------------------------- 5. DUPLA: exemplo + chamada ao funil
   Sobe e invade o hero (divisão por sobreposição, aprovada).                 */
.afv2-duo{position:relative;z-index:6;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;
  margin:-56px auto 0;max-width:1120px;padding:0 22px 76px}
.afv2-duo>.hero-card{flex:1 1 560px;margin:0}
.hero-card{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;
  box-shadow:var(--sh-big);padding:30px 32px 26px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.hero-card:hover{transform:translateY(-4px)}
.hero-card .stamp2{display:none}
.hero-card .hk{color:var(--muted)}
.hero-card .hl{background:transparent!important;border:0!important;border-bottom:1px solid var(--cream-2)!important;border-radius:0!important}
.hero-card .hl .l{color:var(--ink-2)} .hero-card .hl .v{color:var(--navy)}
.hero-card .hl.gold{background:linear-gradient(180deg,#fdf7ef,#fbf2e6)!important;
  border:1px solid rgba(154,116,64,.28)!important;border-radius:10px!important;margin-top:10px}
.hero-card .hl.gold .l{color:var(--ink-2)} .hero-card .hl.gold .v{color:var(--gap);font-size:1.55rem}
.hero-card .hsel{color:var(--muted)}
.afv2-ask{flex:1 1 420px;max-width:520px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-big);padding:30px 32px 28px}
.afv2-ask h3{font-family:var(--display);font-size:1.25rem;color:var(--navy);margin-bottom:6px}
.afv2-ask .lead{color:var(--ink-2);font-size:.92rem;line-height:1.6;margin-bottom:20px}
.afv2-ask ul{list-style:none;margin:0 0 24px}
.afv2-ask li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--ink);margin-bottom:12px;line-height:1.5}
.afv2-ask li svg{flex:0 0 auto;width:18px;height:18px;stroke:var(--gold-ink);fill:none;stroke-width:2.3;margin-top:2px}
.afv2-ask .go{display:block;text-align:center;background:var(--clay);color:#fff;padding:15px;border-radius:var(--r-md);
  font-weight:600;text-decoration:none;transition:background .25s,transform .25s}
.afv2-ask .go:hover{background:var(--clay-2);transform:translateY(-2px)}
.afv2-ask .note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:.75rem;color:var(--muted)}
.afv2-tag{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:6px}

/* ------------------------------------------------------------- 6. BOTÕES */
.btn{font-family:var(--sans);font-weight:600;border-radius:var(--r-md);padding:15px 28px}
.btn-primary{background:var(--clay);color:#fff;box-shadow:var(--sh-gold)}
.btn-primary:hover{background:var(--clay-2);box-shadow:0 16px 34px -8px rgba(138,66,48,.34)}
.btn-primary:after{display:none!important}
.btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-2)}
.btn-outline{background:var(--card);color:var(--navy);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--gold);background:#fff}
.btn-ghost{background:transparent;color:var(--navy);border:0;border-bottom:1.5px solid rgba(154,116,64,.45);
  border-radius:0;padding:4px 2px 3px}
.btn-ghost:hover{background:transparent;border-color:var(--gold)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:4px}

/* ------------------------------------- 7. BOTÃO FLUTUANTE na paleta
   Redesenhado em 2026-07-25: o espresso sobre marfim recuava demais e o botão
   "sumia". Agora usa a terracota do CTA primário (é a mesma ação: falar com o
   escritório), com o glifo num disco de vidro e filete bronze. Sobe de 18px
   para 30/34px — só o suficiente para sair da beira da tela. Sem pulso. */
.wa-float{right:22px!important;bottom:30px!important;
  background:var(--verde)!important;color:#fff!important;
  font-family:var(--sans)!important;font-weight:600!important;font-size:.88rem!important;
  letter-spacing:-.005em;border-radius:999px!important;padding:11px 20px 11px 11px!important;gap:11px!important;
  border:1px solid rgba(247,242,233,.22)!important;animation:none!important;
  box-shadow:0 2px 6px rgba(23,18,15,.16),0 16px 34px -12px rgba(51,81,63,.6)!important;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.wa-float:hover{transform:translateY(-3px);background:var(--verde-2)!important;
  box-shadow:0 3px 8px rgba(23,18,15,.22),0 22px 44px -12px rgba(51,81,63,.68)!important}
.wa-float svg{width:32px!important;height:32px!important;padding:7px;box-sizing:border-box;
  fill:var(--gold-2)!important;border-radius:999px;background:rgba(184,147,92,.16);flex:none}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none} .wa-float:hover{transform:none}}
@media(max-width:560px){
  /* o rótulo continua visível no celular — é a ação principal da página */
  .wa-float{right:14px!important;bottom:22px!important;padding:9px 16px 9px 9px!important;
    font-size:.82rem!important;gap:9px!important}
  .wa-float span{display:inline!important}
  .wa-float svg{width:28px!important;height:28px!important;padding:6px}
}
footer{padding-bottom:112px}

/* ----------------------------------------------- 8. SEÇÕES / DIVISÕES */
.afv2-defs{position:absolute;width:0;height:0;overflow:hidden}
.afv2-cut{clip-path:polygon(0 22px,100% 0,100% 100%,0 100%);margin-top:-22px;padding-top:calc(72px + 22px)}

/* --- Transições em forma ---------------------------------------------------
   A divisão entre seções era sempre uma reta horizontal. Agora cada seção pode
   entrar por uma ARESTA RECORTADA, definida em <clipPath> no index.html com
   clipPathUnits="objectBoundingBox" — coordenadas de 0 a 1, então a mesma forma
   serve de 390px a desktop largo sem nenhuma coordenada fixa.
   Regra de uso: não repetir a mesma forma em seções vizinhas. */
.afv2-corte-onda,.afv2-corte-onda-longa,.afv2-corte-arco,
.afv2-corte-inclinado,.afv2-corte-inclinado-r{
  margin-top:-22px;padding-top:calc(82px + 22px);position:relative;z-index:1}
.afv2-corte-onda{clip-path:url(#corte-onda)}               /* senoide, 2 períodos */
.afv2-corte-onda-longa{clip-path:url(#corte-onda-longa)}   /* senoide, 1 período */
.afv2-corte-arco{clip-path:url(#corte-arco)}               /* arco simétrico */
.afv2-corte-inclinado{clip-path:url(#corte-inclinado)}     /* reta caindo à direita */
.afv2-corte-inclinado-r{clip-path:url(#corte-inclinado-r)} /* reta subindo à direita */
/* seção .tight tem padding curto; o recorte come parte dele */
.tight.afv2-corte-onda,.tight.afv2-corte-onda-longa,.tight.afv2-corte-arco,
.tight.afv2-corte-inclinado,.tight.afv2-corte-inclinado-r{
  padding-top:calc(52px + 22px)}

/* --- Sistema de tons -------------------------------------------------------
   Toda seção DECLARA seu tom. Antes, as seções sem fundo deixavam aparecer a
   cor do documento, e a aresta recortada revelava uma lasca de um terceiro tom
   entre as duas seções — foi exatamente isso que apareceu no FAQ.
   Regra: tom A e tom B se alternam; nunca deixar seção sem tom. */
.afv2-tom-a{background-color:var(--cream)}    /* marfim, o mesmo do documento */
.afv2-weave,.afv2-tom-b{background-color:var(--cream-2)}  /* um tom abaixo */
/* .discover trazia um gradiente BRANCO do visual antigo — era o terceiro tom */
.discover.afv2-tom-a{background-image:none}
/* a foto do escritório encosta na seção anterior, sem faixa clara no meio */
.afv2-sem-topo{padding-top:0}

/* --- Tramas ----------------------------------------------------------------
   Todas usam a MESMA tinta (--tram), que muda sozinha entre claro e escuro.
   Trocar de trama é trocar uma classe; a cor não precisa ser tocada. */

/* 1. carbono trançado (default) — duas diagonais opostas ladrilhadas em xadrez.
      É o deslocamento de meio ladrilho que faz ler "trançado", não "listrado". */
.afv2-carbon,.afv2-weave{
  background-image:
    repeating-linear-gradient(45deg,var(--tram) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,var(--tram) 0 1px,transparent 1px 5px);
  background-size:14px 14px;
  background-position:0 0,7px 7px}

/* 2. losango — as mesmas diagonais SEM o xadrez e mais abertas: vira treliça */
.trama-losango{
  background-image:
    repeating-linear-gradient(45deg,var(--tram) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,var(--tram) 0 1px,transparent 1px 22px);
  background-size:auto;background-position:0 0}

/* 3. ponto — malha de pontos, a mais silenciosa das cinco */
.trama-ponto{
  background-image:radial-gradient(var(--tram) 1.1px,transparent 1.1px);
  background-size:18px 18px;background-position:0 0}

/* 4. nervura — sulcos paralelos de espessura alternada (fibra em uma direção) */
.trama-nervura{
  background-image:
    repeating-linear-gradient(115deg,var(--tram) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(115deg,var(--tram) 0 2px,transparent 2px 54px);
  background-size:auto;background-position:0 0}

/* 5. favo — três feixes a 60° formam uma treliça triangular/hexagonal */
.trama-favo{
  background-image:
    repeating-linear-gradient(0deg,var(--tram) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(60deg,var(--tram) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-60deg,var(--tram) 0 1px,transparent 1px 26px);
  background-size:auto;background-position:0 0}

/* Tinta do escuro baixada de 5,5% para 3,2%: o listrado da 1ª versão ficou
   forte demais na faixa dos 5 anos. Aqui a trama é matéria, não padrão. */
.afv2-carbon{--tram:rgba(255,255,255,.032);background-color:var(--navy);color:#fff}
.afv2-carbon h2,.afv2-carbon h3{color:#fff}
.afv2-carbon p{color:rgba(255,255,255,.76)} .afv2-carbon strong,.afv2-carbon b{color:#fff}
.afv2-carbon .badge-prazo{border-color:rgba(184,147,92,.55);color:var(--gold-2);background:rgba(184,147,92,.12)}
.afv2-carbon .urgencia .num .v{color:var(--gold-2)}
.afv2-carbon .urgencia .num .u{color:rgba(255,255,255,.55)}

/* --- Prescrição: o quadro VIRA a seção ------------------------------------
   Era um cartão escuro flutuando sobre um fundo escuro — dois retângulos
   concêntricos, e o de fora não fazia trabalho nenhum. O bloco agora é a
   própria seção: sem fundo, sem borda, sem raio e sem sombra no filho. */
.urgencia.afv2-bleed{background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;overflow:visible;gap:clamp(20px,3vw,56px);align-items:center}
.urgencia.afv2-bleed::before{display:none}          /* o halo redondo do cartão */
.afv2-carbon:has(.afv2-bleed){padding:clamp(76px,9vw,124px) 0 clamp(68px,8vw,112px)}
.urgencia.afv2-bleed .num .v{font-size:clamp(4.6rem,13vw,9.5rem);line-height:.86;}
.urgencia.afv2-bleed .num .u{font-size:.72rem;letter-spacing:.34em;margin-top:14px}
.urgencia.afv2-bleed .tx h3{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:500;
  letter-spacing:-.026em}
.urgencia.afv2-bleed .tx p{font-size:clamp(.98rem,1.35vw,1.1rem);max-width:64ch}
.urgencia.afv2-bleed .afv2-win{max-width:none;margin-top:clamp(28px,3.4vw,44px)}
.urgencia.afv2-bleed .afv2-win .t{height:clamp(52px,7vw,78px)}
@media(max-width:760px){
  .urgencia.afv2-bleed{grid-template-columns:1fr;gap:6px;text-align:left}
  .urgencia.afv2-bleed .num{text-align:left}
  .urgencia.afv2-bleed .num .v{font-size:clamp(3.6rem,20vw,5.6rem)}
}

/* Versão clara da mesma trama, para as seções em marfim. Tinta espresso a 4%:
   dá matéria ao fundo sem virar ruído atrás do texto.
   Fundo em --cream-2, um tom abaixo do fundo da página: sem essa diferença a
   aresta recortada seria marfim sobre marfim e a forma não apareceria. */
.afv2-weave{--tram:rgba(23,18,15,.045);background-color:var(--cream-2)}
.afv2-weave.sobre-branco{background-color:var(--card)}

/* Faceta geométrica: UMA lâmina diagonal ancorada no canto superior direito,
   de tamanho fixo — não uma banda atravessando a seção inteira (a 1ª versão
   virava um X gigante). Mesma inclinação de 45° da trama, para ler como o
   mesmo material dobrado, não como enfeite solto. */
.afv2-weave::before,.afv2-carbon::before{content:'';position:absolute;z-index:0;
  pointer-events:none;top:0;right:0;width:min(46vw,520px);height:100%;
  background:linear-gradient(135deg,transparent 0 46%,var(--faceta) 46% 62%,transparent 62%)}
.afv2-weave{--faceta:rgba(154,116,64,.045)}
.afv2-carbon{--faceta:rgba(184,147,92,.06)}
/* nada de faceta em tela estreita: vira listra atrás do texto */
@media(max-width:700px){.afv2-weave::before,.afv2-carbon::before{display:none}}
.afv2-weave > *,.afv2-carbon > *{position:relative;z-index:1}

/* ------------------------------------------ 9. JANELA DE 60 MESES */
.afv2-win{margin-top:30px;max-width:660px}
.afv2-win .t{display:flex;gap:3px;align-items:flex-end;height:46px}
.afv2-win .t i{flex:1;background:var(--gold-2);border-radius:1px;height:38%;opacity:0;transform:scaleY(.3);
  transform-origin:bottom;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
.afv2-win.in .t i{opacity:1;transform:none}
.afv2-win .t i.dead{background:rgba(255,255,255,.16);height:22%}
.afv2-win .t i.now{height:100%;background:#fff}
.afv2-win .lab{display:flex;justify-content:space-between;margin-top:12px;font-size:.72rem;color:rgba(255,255,255,.5)}
.afv2-win .cap{margin-top:12px;font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.5}

/* --------------------------- 10. ESCRITÓRIO: foto full-bleed + texto dentro */
.afv2-office{position:relative;min-height:clamp(430px,45vw,600px);display:flex;align-items:flex-start;
  background-size:cover;background-position:center 32%;margin-bottom:52px}
.afv2-office .sc{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,14,11,.91) 0%,rgba(18,14,11,.82) 34%,
    rgba(18,14,11,.55) 54%,rgba(18,14,11,.16) 72%,rgba(18,14,11,0) 88%)}
.afv2-office .in{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;
  padding:clamp(70px,7vw,100px) 22px clamp(96px,9vw,120px)}
.afv2-office h2{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);margin-bottom:14px}
.afv2-office .kicker{color:var(--gold-2)}
.afv2-office>.in>p{color:rgba(255,255,255,.84);text-shadow:0 1px 16px rgba(0,0,0,.45);
  max-width:56ch;font-size:1.02rem;line-height:1.68}
.afv2-office .tag{position:absolute;top:18px;right:20px;z-index:3;font-family:var(--num);font-size:.6rem;
  font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.72);background:rgba(23,18,15,.42);
  border:1px solid rgba(255,255,255,.22);padding:5px 9px;border-radius:6px}
/* os 3 compromissos DENTRO da imagem, em faixa */
.afv2-vows{display:flex;gap:26px;margin-top:clamp(28px,3.4vw,44px);max-width:900px}
.afv2-vows>div{flex:1 1 0;padding-left:20px;border-left:1px solid rgba(255,255,255,.20)}
.afv2-vows>div:first-child{padding-left:0;border-left:0}
/* Era 01/02/03. Os três compromissos não são uma sequência — numerá-los dava
   ordem a algo que não tem. Vira um filete bronze, a mesma marca do eyebrow. */
.afv2-vows i{display:block;width:26px;height:2px;background:var(--gold-2);
  border-radius:2px;margin-bottom:12px}
.afv2-vows b{display:block;font-family:var(--display);font-size:1rem;color:#fff;margin-bottom:6px;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.afv2-vows p{font-size:.86rem;color:rgba(255,255,255,.74);line-height:1.55;text-shadow:0 1px 14px rgba(0,0,0,.5)}
/* equipe: 5 advogados */
.afv2-teamh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.afv2-teamh b{font-family:var(--display);font-size:1.25rem;color:var(--navy)}
.afv2-teamh small{color:var(--muted);font-size:.8rem}
.afv2-team{display:flex;flex-wrap:wrap;gap:16px}
.afv2-adv{flex:1 1 200px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:24px 22px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.afv2-adv:hover{transform:translateY(-4px);border-color:rgba(154,116,64,.5);box-shadow:0 18px 38px rgba(23,18,15,.10)}
.afv2-adv .av{width:52px;height:52px;border-radius:50%;background:var(--navy);color:var(--gold-2);display:grid;
  place-items:center;font-family:var(--display);font-size:1rem;font-weight:600;margin-bottom:16px}
.afv2-adv.socio .av{background:linear-gradient(150deg,var(--gold),#7d5c31);color:#fff}
.afv2-adv .role{font-family:var(--num);font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:7px}
.afv2-adv .nm{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--navy);line-height:1.3;margin-bottom:5px}
.afv2-adv .ob{font-family:var(--num);font-size:.8rem;font-weight:600;color:var(--muted)}

/* ------------------------------------------------- 11. MOVIMENTO / SEGURANÇA */
.marquee,.mq,.orbit{display:none!important}
@media (scripting: none){ [data-reveal]{opacity:1!important;transform:none!important} }
html.afv2-fallback [data-reveal]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .afv2-slide.on i{animation:none} .afv2-win .t i{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
}

/* ------------------------------------------------------------- 12. MOBILE */
@media (max-width:1000px){
  .afv2-nav a.lnk{display:none}
  .hero{padding-bottom:clamp(180px,44vw,300px)}
  .afv2-scrim{background:linear-gradient(180deg,rgba(247,242,233,.97) 0%,rgba(247,242,233,.95) 42%,
    rgba(247,242,233,.58) 63%,rgba(247,242,233,.06) 82%,rgba(247,242,233,0) 100%)}
  .afv2-slide i{background-position:center 68%}
  .hero .wrap:first-of-type{padding-top:40px}
  .afv2-duo{margin-top:24px;padding-bottom:44px}
  .afv2-duo>.hero-card,.afv2-ask{flex:1 1 100%;max-width:none;padding:24px 20px}
  .afv2-office{min-height:clamp(360px,86vw,470px);align-items:flex-end}
  .afv2-office .sc{background:linear-gradient(180deg,rgba(18,14,11,.30) 0%,rgba(18,14,11,.58) 46%,rgba(18,14,11,.88) 100%)}
  .afv2-vows{flex-direction:column;gap:0;max-width:none}
  .afv2-vows>div{padding:0 0 0 18px;border-left:1px solid rgba(255,255,255,.20);margin-bottom:20px}
  .afv2-vows>div:first-child{padding-left:18px;border-left:1px solid rgba(255,255,255,.20)}
  .afv2-cut{padding-top:calc(52px + 22px)}
}

/* ============================================================================
   TELA DE RESULTADO (#tela3) — reestruturada em 2026-07-25
   Problemas corrigidos: números quebrando em 3 linhas, muito texto competindo,
   veredito não legível "de bater o olho", botão do WhatsApp desalinhado no
   cartão e "refazer simulação" com peso de botão principal.
   ============================================================================ */

/* --- cabeçalho: o veredito é a primeira coisa que o olho pega --- */
.res2{border-radius:var(--r-lg)!important;border-color:var(--line)!important}
.res2-head{padding:26px 30px!important;background:var(--card);align-items:flex-start!important}
.res2-head .st-ic{width:40px!important;height:40px!important;margin-top:2px}
.res2-head .tt{font-family:var(--display)!important;font-size:1.18rem!important;font-weight:600!important;
  letter-spacing:-.01em;color:var(--navy)!important;text-transform:none}
.res2-head .ss{font-size:.85rem!important;color:var(--muted)!important;margin-top:4px!important}
.res2-body{padding:26px 30px!important}

/* --- o número: um só, grande, sem concorrência --- */
.res2-faixa{background:linear-gradient(180deg,#fdf7ef,#fbf2e6)!important;
  border:1px solid rgba(154,116,64,.30)!important;border-radius:14px!important;
  padding:26px 24px 22px!important;margin-bottom:22px!important}
.res2-faixa .fl{font-family:var(--sans)!important;font-size:.68rem!important;font-weight:700!important;
  letter-spacing:.2em!important;color:var(--gold-ink)!important}
.res2-faixa .fv{font-family:var(--num)!important;font-weight:800!important;
  font-size:clamp(2rem,5.6vw,3.1rem)!important;color:var(--gap)!important;
  letter-spacing:-.03em!important;line-height:1.04!important;margin-top:10px!important;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.res2-faixa .fsub{font-family:var(--sans);font-size:.8rem;color:var(--ink-2);margin-top:8px}
.res2-faixa .fpiso{font-family:var(--sans);font-size:.76rem;color:var(--muted);margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(154,116,64,.20);font-variant-numeric:tabular-nums}

/* --- texto normativo: presente e legível, mas visualmente secundário --- */
.res2-texto{font-size:.92rem!important;line-height:1.68!important;color:var(--ink-2)!important}
.res2-texto strong{color:var(--navy)}

/* --- tiles: 2 colunas para o número caber numa linha (era 4, cortava) --- */
.res2-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;margin-top:20px!important}
.res2-tile{background:var(--cream-2)!important;border:1px solid var(--line);border-radius:11px!important;
  padding:13px 15px!important;min-width:0}
.res2-tile .tl{font-size:.62rem!important;letter-spacing:.14em!important;color:var(--muted)!important;font-weight:600}
.res2-tile .tv{font-family:var(--num)!important;font-weight:700!important;font-size:1rem!important;
  color:var(--navy)!important;margin-top:5px!important;white-space:nowrap;overflow:visible;
  word-break:normal!important;letter-spacing:-.02em}

/* --- avisos: mais quietos, sem caixa amarela gritando --- */
.res2 .res-nota-aliquota{font-size:.78rem!important;background:var(--cream-2)!important;
  border:1px solid var(--line)!important;color:var(--ink-2)!important;border-radius:10px!important}
.res2 .disclaimer-box{border-left:3px solid var(--gold)!important;background:var(--cream-2)!important;
  font-size:.78rem!important;line-height:1.6!important;color:var(--muted)!important;border-radius:0 10px 10px 0!important}
.res2 .disclaimer-box strong{color:var(--ink-2)}
.selic-nota{font-size:.7rem!important;color:var(--muted)!important}

/* --- rodapé do cartão: CTA ocupa a largura e o refazer é discreto embaixo --- */
.res2-foot{padding:22px 30px 24px!important;background:var(--cream-2)!important;
  border-top:1px solid var(--line)!important;text-align:center}
.res2-foot .acoes{display:flex!important;flex-direction:column;gap:10px;margin:0!important;align-items:stretch!important}
.res2-foot .acoes .btn{width:100%;justify-content:center}
/* o botão do WhatsApp no cartão: verde do WhatsApp sai; entra o espresso da página */
.btn-wa{background:var(--navy)!important;color:#fff!important;
  box-shadow:0 2px 6px rgba(23,18,15,.16),0 14px 30px -10px rgba(23,18,15,.5)!important;
  border-radius:var(--r-md)!important;font-weight:600}
.btn-wa:hover{background:var(--navy-2)!important;transform:translateY(-2px)}
.btn-wa svg{fill:var(--gold-2)!important}
/* refazer: link quieto, não botão concorrente */
.afv2-refazer{display:inline-block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--muted);
  padding:6px 4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.afv2-refazer:hover{color:var(--navy);border-bottom-color:rgba(154,116,64,.45)}

@media(max-width:520px){
  .res2-head,.res2-body,.res2-foot{padding-left:20px!important;padding-right:20px!important}
  .res2-faixa .fv{font-size:clamp(1.6rem,8.4vw,2.2rem)!important}
  .res2-grid{grid-template-columns:1fr!important}
}

/* ============================================================================
   RESULTADO — legal design / visual law (2026-07-25, 2ª rodada)
   Ordem de leitura: veredito → número → como chegamos nele → dados → passo →
   letra miúda. Tudo em grade simétrica; nada de número cortado.
   ============================================================================ */

/* o número nunca corta: encolhe antes de estourar */
.res2-faixa .fv{white-space:nowrap;overflow:visible;
  font-size:clamp(1.5rem,4.6vw,2.7rem)!important;max-width:100%}

/* --- 2. COMO CHEGAMOS A ESSE NÚMERO — extrato vertical: rótulo à esquerda,
       valor à direita. Escolhido por não estourar com valores de qualquer
       tamanho (R$ 13.215.646,54 quebrava em 3 colunas). --- */
.afv2-caminho{margin-bottom:22px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);overflow:hidden}
.afv2-caminho .ct{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding:15px 18px 0;margin:0}
.afv2-caminho .cg{display:block;padding:12px 18px 16px}
.afv2-caminho .cs{display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;
  column-gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2,#f0e8da);position:static}
.afv2-caminho .cs:last-child{border-bottom:0;padding-bottom:4px}
.afv2-caminho .cn{position:static;transform:none;width:22px;height:22px;border-radius:50%;
  background:var(--cream-2);color:var(--gold-ink);border:1px solid rgba(154,116,64,.3);
  font-family:var(--num);font-size:.66rem;font-weight:800;display:grid;place-items:center;
  align-self:center}
.afv2-caminho .cl{font-family:var(--sans);font-size:.9rem;color:var(--ink-2);text-align:left;
  min-height:0;display:block;line-height:1.35;margin:0}
.afv2-caminho .cd{grid-column:2;grid-row:2;font-size:.72rem;color:var(--muted);margin-top:2px;
  line-height:1.4;text-align:left}
.afv2-caminho .cvv{font-family:var(--num);font-weight:800;font-size:1.02rem;color:var(--navy);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:visible;text-overflow:clip;text-align:right;grid-column:3}
/* a linha do resultado ganha peso e a cor semântica da diferença */
.afv2-caminho .cs--out{background:linear-gradient(90deg,rgba(154,116,64,.07),rgba(154,116,64,0));
  margin:6px -18px 0;padding:14px 18px 14px;border-top:1px solid rgba(154,116,64,.28);border-bottom:0}
.afv2-caminho .cs--out .cn{background:var(--gap);color:#fff;border-color:var(--gap)}
.afv2-caminho .cs--out .cl{color:var(--navy);font-weight:600}
.afv2-caminho .cs--out .cvv{color:var(--gap);font-size:1.18rem}
/* operadores: discretos, na coluna do numeral */
.afv2-caminho .csep{display:none}

/* --- 3. dados informados: 4 colunas iguais, número numa linha --- */
.afv2-dados-t{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.res2-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;margin-top:0!important}
.res2-tile{padding:13px 15px!important;text-align:left}
.res2-tile .tv{font-size:.95rem!important;white-space:nowrap;overflow:visible;text-overflow:clip}

/* --- 4. próximo passo: uma linha, clara --- */
.afv2-proximo{display:flex;gap:14px;align-items:center;margin-top:20px;padding:16px 18px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.afv2-proximo .pi{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--navy);
  color:var(--gold-2);display:grid;place-items:center;font-size:.95rem;font-weight:700}
.afv2-proximo b{display:block;font-family:var(--display);font-size:.95rem;color:var(--navy);margin-bottom:2px}
.afv2-proximo span{font-size:.85rem;color:var(--ink-2);line-height:1.5}

/* --- 5. letra miúda: agrupada, aberta por quem quiser (progressive disclosure) --- */
.afv2-mini{margin-top:20px;border:1px solid var(--line);border-radius:12px;background:var(--cream-2);
  overflow:hidden}
.afv2-mini>summary{cursor:pointer;padding:14px 18px;font-family:var(--sans);font-size:.82rem;
  font-weight:600;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:10px;
  transition:color .2s}
.afv2-mini>summary::-webkit-details-marker{display:none}
.afv2-mini>summary::before{content:'+';font-family:var(--num);font-weight:800;color:var(--gold-ink);
  width:18px;height:18px;border:1px solid rgba(154,116,64,.45);border-radius:5px;
  display:grid;place-items:center;font-size:.8rem;flex:none}
.afv2-mini[open]>summary::before{content:'–'}
.afv2-mini>summary:hover{color:var(--navy)}
.afv2-mini .mi{padding:0 18px 18px}
.afv2-mini .res2-texto p{margin-bottom:8px}
.afv2-mini .disclaimer-box{margin-top:12px!important;background:var(--card)!important}

@media(max-width:560px){
  .afv2-caminho .cs{grid-template-columns:22px 1fr;row-gap:4px}
  .afv2-caminho .cvv{grid-column:2;text-align:left;font-size:1.08rem}
  .res2-grid{grid-template-columns:1fr!important}
}
@media(max-width:430px){
  .res2-faixa .fv{font-size:clamp(1.35rem,7.6vw,1.9rem)!important}
  .res2-grid{grid-template-columns:1fr!important}
}