/* =============================================================
   A REGULAR SOLUÇÕES · LANDING PAGES (PGFN · Funrural · INSS de obra)
   Folha única, compartilhada pelas três LPs. É irmã de
   MARKETING/SITE/SITE/assets/css/styles.css: mesma linguagem, mesmos
   devices de assinatura, mesmos tokens. Nada aqui inaugura sistema novo.

   Direção: CORPORATIVA GEOMÉTRICA. Traço fino, canto reto, muito respiro,
   blocos sólidos de azul, laranja em dose cirúrgica.

   Fonte da verdade: IDENTIDADE/DESIGN-SYSTEM.md
   Identidade oficial de 2023, por Gustavo Caldeira (arte) e Beatriz Soares.

   ⚠️ Substitui integralmente a folha antiga, de direção editorial, que
      rodava paleta e tipografia serifada inventadas pela Vogel. Aquela
      folha foi arquivada em _BACKUP-LPS-ds-errado-2026-08-03/ e nenhuma
      regra dela sobreviveu aqui.

   Devices de assinatura, todos derivados do próprio monograma:
   1. Sistema de filetes de 1px (o monograma é linear e aberto).
   2. Guias verticais de coluna, como planta baixa.
   3. "Tick" laranja de 3px antes de todo rótulo de seção.
   4. Numeral geométrico grande como elemento de display.
   5. Blocos sólidos de azul, sem gradiente e sem sombra.

   ⚠️ Caminhos de asset são RELATIVOS de propósito. As LPs sobem em
      subpastas do subdomínio (lp.aregularsolucoes.com.br/pgfn/ etc.);
      caminho root-relative quebraria o CSS e as fontes.
   ============================================================= */

/* ======================= FONTE =======================
   TeX Gyre Adventor: linhagem livre da ITC Avant Garde, via URW Gothic
   Base-35, com MÉTRICA IDÊNTICA à original. Self-hospedada, GUST Font License.
   🚫 Só 400 e 700 existem. 300/500/600/800 fazem o browser sintetizar
      peso falso e distorcer a haste fina, que é a assinatura da marca. */
@font-face{
  font-family:"Adventor";
  src:url("../fonts/texgyreadventor-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Adventor";
  src:url("../fonts/texgyreadventor-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ======================= TOKENS ======================= */
:root{
  /* --- PALETA OFICIAL: as 4 cores da marca. Não adicionar cor nova. --- */
  --azul:#17374F;          /* PRIMÁRIA    */
  --laranja:#F3573A;       /* SECUNDÁRIA  */
  --branca:#EBEBEB;        /* TERCIÁRIA   */
  --cinza:#171717;         /* QUATERNÁRIA */

  /* --- DERIVADO: escalas de UI. Ferramentas, não cores de marca. --- */
  --azul-900:#0D1F2D;
  --azul-800:#12293C;
  --azul-600:#1F4A69;
  --azul-300:#93ADBE;   /* 5,28:1 sobre --azul: rótulo pequeno em bloco escuro */
  --azul-100:#D3DDE5;
  --laranja-700:#C33F26;
  --laranja-600:#E04A2F;
  --laranja-300:#F89B87;   /* 5,91:1 sobre azul: laranja legível em bloco escuro */

  --branco:#FFFFFF;
  --n-050:#F7F7F7;
  --n-200:#DCDCDC;
  --n-300:#C4C4C4;
  --n-700:#4A4A4A;

  /* --- Papéis semânticos --- */
  --bg:var(--branco);
  --texto:var(--cinza);           /* 15,04:1 sobre --branca */
  --texto-suave:var(--n-700);     /*  8,59:1 sobre --branca */
  --texto-marca:var(--azul);      /* 10,39:1 sobre --branca */
  --sobre-escuro:var(--branco);   /* 12,38:1 sobre --azul   */
  --sobre-escuro-suave:#A9BCC9;   /*  6,72:1 sobre --azul   */
  --linha:var(--n-200);
  --linha-escura:rgba(255,255,255,.16);
  --guia:rgba(23,55,79,.10);      /* guias verticais de coluna */

  /* ---- Laranja QUANDO VIRA TEXTO ----------------------------------------
     Medido, não estimado. O laranja oficial #F3573A dá:
        3,37:1 sobre branco · 2,83:1 sobre a branca #EBEBEB · 3,68:1 sobre azul
     Ou seja, sobre a própria superfície clara da marca ele reprova até o piso
     de texto grande, que é 3,0:1. Por isso o numeral, o rótulo grande e o
     grifo usam --acento-texto, e não o laranja puro.
        claro  → --laranja-600 #E04A2F: 3,39:1 sobre #EBEBEB e 4,05:1 sobre branco
        escuro → --laranja      #F3573A: 3,68:1 sobre azul, 5,32:1 sobre cinza
     🚫 Mesmo assim isto só vale para TEXTO GRANDE (≥24px, ou ≥18,66px bold).
        Laranja segue proibido em corpo de texto, em qualquer tom.
     ✅ O laranja PURO continua íntegro onde é elemento gráfico: tick, filete,
        borda, ícone, régua. Elemento gráfico não tem exigência de contraste. */
  --acento-texto: var(--laranja-600);

  --maxw:1200px;
  --gutter:clamp(1.25rem,4.5vw,3rem);
  --traco:1px;                    /* filete: mesma linguagem do monograma */
  --tick:3px;                     /* espessura do acento laranja */

  /* Raio pequeno. Canto arredondado grande descaracteriza a geometria. */
  --raio:2px;
  --raio-md:4px;
  /* Teto do DESIGN-SYSTEM. O print de referência da aba Parâmetros usa
     ~14px; aqui para em 8px, porque canto arredondado grande descaracteriza
     a geometria do monograma. É a única divergência deliberada do print. */
  --raio-cartao:8px;

  --ease:cubic-bezier(.2,.7,.2,1);

  /* Tipografia: escala 1.250, a terça maior */
  --fs-xs:.78rem;  --fs-sm:.9rem;   --fs-base:1rem;
  --fs-lg:1.125rem;
  --tracking:.18em;               /* caixa-alta curta, ecoa "S O L U Ç Õ E S" */

  --logo-h:150px;                 /* ≥140px: mínimo do lockup horizontal */
}

/* ======================= BASE ======================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:"Adventor","TeX Gyre Adventor","URW Gothic","Century Gothic",system-ui,-apple-system,sans-serif;
  font-weight:400;
  /* Avant Garde tem x-height alta: nunca abaixo de 16px, entrelinha ≥1,6 */
  font-size:clamp(1rem,.975rem + .12vw,1.0625rem);
  line-height:1.65;
  color:var(--texto);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
[hidden]{display:none !important}
::selection{background:var(--laranja);color:var(--cinza)}

h1,h2,h3,h4,h5{
  font-weight:700;line-height:1.14;margin:0;
  color:var(--texto-marca);letter-spacing:-.012em;
}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.section{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.mw{max-width:760px}
.mw-lg{max-width:860px}

/* --- Guias verticais de coluna: a planta baixa por trás da página --- */
@media (min-width:1024px){
  .section::before{
    content:"";position:absolute;inset:0;left:0;right:0;pointer-events:none;
    max-width:var(--maxw);margin-inline:auto;
    border-left:var(--traco) solid var(--guia);
    border-right:var(--traco) solid var(--guia);
  }
}

/* --- Superfícies --- */
.sec-clara{background:var(--branca)}
.sec-azul{background:var(--azul);color:var(--sobre-escuro);--guia:rgba(255,255,255,.10);--acento-texto:var(--laranja)}
.sec-preta{background:var(--cinza);color:var(--sobre-escuro);--guia:rgba(255,255,255,.10);--acento-texto:var(--laranja)}
/* Bloco escuro: o laranja puro volta, porque sobre azul e sobre cinza ele passa. */
.hero,.callout,.finalcta,.factstrip,.sim-result-head,.aud-cell.is-lead{--acento-texto:var(--laranja)}
/* Componente de superfície CLARA dentro de bloco escuro precisa reverter:
   a placa de documento e o cartão do simulador vivem dentro do hero. */
.doc,.sim-card,.bloco,.path,.gloss-item,.sim-doc,.sim-capture,.par-card,.par-row,
.sim-social,.sim-result-note,.aud-cell:not(.is-lead){--acento-texto:var(--laranja-600)}
.sec-azul h1,.sec-azul h2,.sec-azul h3,.sec-azul h4,
.sec-preta h1,.sec-preta h2,.sec-preta h3,.sec-preta h4{color:var(--branco)}

/* ======================= TIPOGRAFIA UTILITÁRIA ======================= */
.display{font-size:clamp(2.35rem,1.5rem + 3.9vw,4.25rem);line-height:1.06;letter-spacing:-.02em}
.h2{font-size:clamp(1.8rem,1.35rem + 2vw,2.75rem);line-height:1.12}
.h3{font-size:clamp(1.2rem,1.08rem + .6vw,1.5rem)}
.lead{
  font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.62;
  color:var(--texto-suave);max-width:62ch;font-weight:400;
}
.sec-azul .lead,.sec-preta .lead{color:var(--sobre-escuro-suave)}
.muted{color:var(--texto-suave)}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

/* Acento laranja em texto: SÓ em display ≥24px. Nunca em corpo (3,37:1). */
.acento{color:var(--acento-texto)}
.sec-azul .acento,.sec-preta .acento{color:var(--acento-texto)}

/* Rótulo de seção: tick laranja de 3px mais um label legível.
   O rótulo NÃO vai em laranja: laranja em texto pequeno reprova WCAG AA. */
.kicker{
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.15rem;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking);
  text-transform:uppercase;color:var(--texto-marca);
}
.kicker::before{content:"";width:38px;height:var(--tick);background:var(--laranja);flex:none}
.kicker.center{justify-content:center}
.sec-azul .kicker,.sec-preta .kicker,.kicker.on-dark{color:var(--branca)}

/* Numeral de etapa da página: o device 4, o numeral geométrico */
.secnum{
  display:block;font-size:1.6rem;font-weight:700;color:var(--acento-texto);
  line-height:1;letter-spacing:-.02em;margin-bottom:.55rem;
}

.rotulo{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-marca);display:block;
}
.sec-azul .rotulo,.sec-preta .rotulo{color:var(--azul-300)}

.rule{height:var(--traco);background:var(--linha);border:0;margin:0}
.rule-acento{width:56px;height:var(--tick);background:var(--laranja);border:0;margin:1.4rem 0 0}

/* Descritor fixo travado ao logo/título (governança de nome) */
.descriptor{
  display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-marca);font-weight:700;margin:0 0 1rem;
}
.sec-azul .descriptor,.sec-preta .descriptor,.hero .descriptor,.descriptor.on-dark{color:var(--branca)}

/* ======================= BOTÕES =======================
   CTA primário = AZUL com texto branco (12,38:1). Decisão de contraste,
   não de gosto: branco sobre laranja dá 3,37:1 e reprova AA.
   Em bloco escuro o primário vira LARANJA com label #171717 (5,32:1). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1;
  padding:1.05rem 1.7rem;border-radius:var(--raio);
  border:var(--traco) solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.btn svg[stroke]{fill:none}
.btn-lg{padding:1.2rem 2rem;font-size:1rem}
.btn-block{width:100%}

.btn-primary{background:var(--azul);color:var(--branco);border-color:var(--azul)}
.btn-primary:hover{background:var(--azul-800);border-color:var(--azul-800)}

/* Laranja SEMPRE com label escuro. Nunca label branco pequeno. */
.btn-acento{background:var(--laranja);color:var(--cinza);border-color:var(--laranja)}
.btn-acento:hover{background:var(--laranja-600);border-color:var(--laranja-600)}

.btn-ghost{background:transparent;border-color:var(--azul);color:var(--texto-marca)}
.btn-ghost:hover{background:var(--azul);color:var(--branco)}

/* Contexto escuro: azul sobre azul seria invisível. */
.sec-azul .btn-primary,.sec-preta .btn-primary,
.hero .btn-primary,.finalcta .btn-primary,.callout .btn-primary{
  background:var(--laranja);color:var(--cinza);border-color:var(--laranja);
}
.sec-azul .btn-primary:hover,.sec-preta .btn-primary:hover,
.hero .btn-primary:hover,.finalcta .btn-primary:hover,.callout .btn-primary:hover{
  background:var(--laranja-600);border-color:var(--laranja-600);
}
.btn-ghost.on-dark,
.sec-azul .btn-ghost,.sec-preta .btn-ghost,.hero .btn-ghost,.finalcta .btn-ghost,.callout .btn-ghost{
  border-color:rgba(255,255,255,.45);color:var(--branco);background:transparent;
}
.btn-ghost.on-dark:hover,
.sec-azul .btn-ghost:hover,.sec-preta .btn-ghost:hover,.hero .btn-ghost:hover,
.finalcta .btn-ghost:hover,.callout .btn-ghost:hover{
  border-color:var(--branco);background:rgba(255,255,255,.10);color:var(--branco);
}

.btnrow{display:flex;flex-wrap:wrap;gap:.85rem}

/* ======================= HEADER DA LP =======================
   Barra clara e sólida, sem menu: a LP tem um destino só.
   A assinatura sobre fundo claro é a bicolor laranja+azul (DS §4). */
.lp-header{
  position:sticky;top:0;z-index:60;
  background:var(--branco);
  border-bottom:var(--traco) solid var(--linha);
}
.lp-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:88px;
}
.lp-logo{display:block;flex:none}
.lp-logo img{width:var(--logo-h);height:auto}  /* 150px: acima do mínimo de 140px */

/* ======================= HERO =======================
   Bloco sólido de azul. Quando recebe fotografia (classe .tem-foto), a
   foto entra sob véu azul de alfa 0,78, que é o mesmo valor da grade de
   carrosséis e do site institucional. Sem gradiente e sem sombra:
   a marca é corporativa geométrica, não editorial. */
.hero{
  background:var(--azul);color:var(--sobre-escuro);
  border-bottom:var(--tick) solid var(--laranja);
  position:relative;overflow:hidden;
}
/* malha de planta baixa, 1px, quase imperceptível */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) var(--traco),transparent var(--traco)),
    linear-gradient(to bottom,rgba(255,255,255,.055) var(--traco),transparent var(--traco));
  background-size:88px 88px;
}
/* ---- FOTOGRAFIA EM BLOCO ESCURO (hero e CTA final) ----------------------
   Véu azul com alfa 0,78. A malha de planta baixa é desenhada POR CIMA do
   véu e soma branco: o pior pixel de cada foto foi medido com a malha
   incluída (ver assets/img/fotos/LEIA-ME.md).
   🔴 Regra herdada da grade de carrosséis e do site: sobre foto o laranja é
   só superfície, nunca tipo. Todo texto aqui é branco ou --branca.        */
.hero-foto,.cta-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}
.hero-veu,.cta-veu{position:absolute;inset:0;background:var(--azul);opacity:.78;z-index:0}
/* No CTA final o véu é mais fechado que os 0,78 do hero, e a razão é de
   composição, não de gosto: ali o texto é centralizado e ocupa a largura
   inteira, ou seja, não existe coluna livre de foto por baixo das linhas.
   Com 0,86 o pior pixel do composto sai de 5,56:1 para 7,01:1 contra o
   branco, e a fotografia continua legível como contexto.                 */
.finalcta .cta-veu{opacity:.86}
.hero.tem-foto::before,.finalcta.tem-foto::before{z-index:1}
.hero.tem-foto > .wrap,.finalcta.tem-foto > .wrap{z-index:2}
/* O acento laranja não entra em texto sobre foto: sobre o composto ele cai
   para ~2,2:1. Esta regra existe para impedir que um .acento escape para
   dentro de um <h1> numa passada futura. */
.tem-foto .acento{color:var(--branca)}
.tem-foto .hero-sub,.tem-foto .finalcta p{color:var(--branca)}
.finalcta.tem-foto p{color:var(--branca)}
.finalcta.tem-foto .assur{color:var(--branca)}

.hero-grid{
  display:grid;grid-template-columns:1.25fr .75fr;gap:0;align-items:stretch;
  position:relative;z-index:1;
}
/* Item de grid nasce com min-width:auto: se o conteúdo tiver min-content maior
   que a coluna, a faixa inteira estoura a viewport. Em 320px foi a placa de
   documento que empurrou o hero para fora da tela. */
.hero-grid > *,.sim-grid > *,.auth-grid > *,.duo > *,.paths > *{min-width:0}
.hero-grid.solo{grid-template-columns:1fr;max-width:900px}
.hero-copy{
  padding-block:clamp(3rem,6.5vw,5.5rem);
  padding-right:clamp(2rem,4vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-grid.solo .hero-copy{padding-right:0}
/* flex-wrap:nowrap de propósito: com wrap, no celular o texto inteiro pulava
   para a segunda linha e deixava o ponto laranja sozinho na primeira.
   Sem wrap, o texto quebra dentro do próprio item, ao lado do ponto. */
.hero-flag{
  display:inline-flex;align-items:flex-start;gap:.7rem;align-self:flex-start;flex-wrap:nowrap;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking);
  text-transform:uppercase;color:var(--branca);line-height:1.5;
  border:var(--traco) solid rgba(255,255,255,.3);border-radius:var(--raio);
  padding:.5rem .95rem;margin-bottom:1.6rem;max-width:100%;
}
.hero-flag .dot{width:7px;height:7px;background:var(--laranja);flex:none;margin-top:.42em}
.hero h1{
  color:var(--branco);
  font-size:clamp(2.05rem,1.35rem + 3.4vw,3.85rem);
  line-height:1.07;letter-spacing:-.022em;
}
.hero h1 .acento{color:var(--acento-texto)}
.hero-sub{
  margin:1.6rem 0 2.3rem;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  line-height:1.62;color:var(--sobre-escuro-suave);max-width:54ch;
}
.hero-sub b{color:var(--branco);font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}

/* Garantias do hero: filete de 1px entre itens, tick laranja como marcador */
.hero-assurance{
  display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;margin-top:2.1rem;
  padding-top:1.5rem;border-top:var(--traco) solid var(--linha-escura);
}
.hero-assurance span{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.88rem;color:var(--branca);line-height:1.5;
}
.hero-assurance span::before{content:"";width:14px;height:var(--tick);background:var(--laranja);flex:none}

.hero-media{
  border-left:var(--traco) solid var(--linha-escura);
  padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(2.25rem,4.5vw,3.5rem) clamp(1.75rem,3vw,2.75rem);
  display:flex;flex-direction:column;justify-content:center;
}

/* ======================= PLACA DE DOCUMENTO =======================
   Substitui o mockup de papel timbrado do sistema antigo, que trazia a
   logo recolorida em dourado. É desenho geométrico na linguagem do
   monograma: filete de 1px, canto reto, marcas de canto em laranja.
   Nenhuma foto e nenhuma pessoa. */
.doc{
  position:relative;background:var(--branca);border:var(--traco) solid var(--linha);
  border-top:var(--tick) solid var(--laranja);border-radius:var(--raio);
  padding:1.6rem 1.5rem 1.5rem;
}
.doc::before,.doc::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.doc::before{top:10px;right:10px;border-top:var(--traco) solid var(--laranja);border-right:var(--traco) solid var(--laranja)}
.doc::after{bottom:10px;left:10px;border-bottom:var(--traco) solid var(--laranja);border-left:var(--traco) solid var(--laranja)}
/* padding-right reserva a faixa do selo, que é absoluto no canto superior.
   Sem isso o selo cobre o nome do órgão. */
.doc-top{
  display:flex;align-items:center;gap:.9rem;padding:.4rem 7.5rem 1.1rem 0;
  border-bottom:var(--traco) solid var(--linha);
}
.doc-sigla{
  width:52px;height:52px;flex:none;display:grid;place-items:center;
  border:var(--traco) solid var(--azul);border-radius:var(--raio);
  font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--texto-marca);
}
.doc-org{min-width:0}
.doc-org strong{display:block;font-size:.9rem;font-weight:700;color:var(--texto-marca);line-height:1.3;overflow-wrap:break-word}
.doc-org span{display:block;font-size:.78rem;color:var(--texto-suave);line-height:1.45;margin-top:.2rem}
.doc-tag{
  display:inline-block;margin:1.2rem 0 .7rem;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--texto-suave);
}
.doc-title{font-size:1.02rem;font-weight:700;color:var(--texto-marca);line-height:1.4;margin:0 0 1.1rem}
.doc-line{height:var(--traco);background:var(--n-300);margin-bottom:.6rem}
.doc-line.w90{width:90%} .doc-line.w80{width:80%} .doc-line.w70{width:70%}
.doc-line.w60{width:60%} .doc-line.w50{width:50%}
.doc-flag{
  display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;align-items:center;
  margin-top:1.4rem;padding-top:1.2rem;border-top:var(--traco) solid var(--linha);
}
/* ≥24px em bold é o piso para laranja sobre claro (3,37:1). 1,85rem passa. */
.doc-flag .big{
  font-size:1.85rem;font-weight:700;color:var(--acento-texto);line-height:1.05;
  letter-spacing:-.02em;flex:0 0 auto;
}
/* flex-basis alto força a quebra de linha quando a coluna aperta,
   em vez de espremer o texto de apoio numa sanfona de 2 palavras. */
.doc-flag small{font-size:.84rem;line-height:1.55;color:var(--texto-suave);flex:1 1 14rem}
/* Selo do canto: rótulo em caixa-alta dentro de tarja sólida */
.doc-selo{
  position:absolute;top:-1px;right:-1px;background:var(--azul);color:var(--branca);
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.42rem .8rem;
}
.doc--regular .doc-flag .big{
  font-size:1.35rem;display:inline-flex;align-items:center;gap:.5rem;max-width:none;
}
.doc--regular .doc-flag .big svg{width:26px;height:26px;flex:none}

/* ======================= FAIXA DE FATOS ======================= */
.factstrip{background:var(--cinza);color:var(--branca)}
.factstrip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.fact{padding:clamp(1.8rem,3vw,2.5rem) clamp(1rem,2vw,1.8rem);border-right:var(--traco) solid rgba(255,255,255,.14)}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:0}
.fact .n{font-size:clamp(1.7rem,1.25rem + 1.4vw,2.4rem);font-weight:700;color:var(--acento-texto);line-height:1;letter-spacing:-.02em}
.fact .n .u{font-size:.55em;letter-spacing:0}
.fact .l{font-size:.88rem;color:#B4B4B4;margin:.65rem 0 0;line-height:1.5;max-width:30ch}
.factstrip .fonte{
  font-size:.8rem;color:#9A9A9A;padding-bottom:1.6rem;margin:0;line-height:1.6;
}

/* ======================= CAMINHOS LEGAIS ======================= */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--traco);background:var(--linha)}
.paths.tri{grid-template-columns:repeat(3,1fr)}
.path{
  background:var(--branco);padding:clamp(1.8rem,3vw,2.4rem);
  display:flex;flex-direction:column;
  border-top:var(--tick) solid transparent;transition:border-color .26s var(--ease);
}
.sec-clara .path{background:var(--branca)}
.path:hover{border-top-color:var(--laranja)}
.path .path-tag{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);display:block;margin-bottom:.7rem;
}
.path h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin-bottom:.35rem}
.path .path-org{font-size:.85rem;color:var(--texto-suave);margin:0 0 1.3rem}
.path-nums{display:grid;gap:0;margin-bottom:1.3rem;border-top:var(--traco) solid var(--linha)}
.path-nums > div{display:flex;gap:1.1rem;align-items:baseline;padding:.95rem 0;border-bottom:var(--traco) solid var(--linha)}
.path-nums .pn{font-size:1.5rem;font-weight:700;color:var(--acento-texto);line-height:1;flex:none;min-width:6.4rem;letter-spacing:-.02em}
.path-nums .pl{font-size:.9rem;line-height:1.55;color:var(--texto-suave)}
.path p{font-size:.95rem;line-height:1.65;color:var(--texto-suave)}
.path b{color:var(--texto-marca);font-weight:700}
.path .path-deadline{
  margin-top:auto;padding-top:1.1rem;border-top:var(--traco) solid var(--linha);
  font-size:.92rem;color:var(--texto-suave);
}
.paths-src{
  font-size:.86rem;line-height:1.7;color:var(--texto-suave);
  margin:1.6rem 0 0;padding-top:1.2rem;border-top:var(--traco) solid var(--linha);
}
.paths-src b{color:var(--texto-marca);font-weight:700}

/* ======================= SIMULADOR / DIAGNÓSTICO ======================= */
.sim-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.sim-intro .lead{margin-bottom:1.6rem}
.badge-lead{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-marca);border:var(--traco) solid var(--azul);border-radius:var(--raio);
  padding:.45rem .85rem;
}
.badge-lead svg{width:15px;height:15px;color:var(--laranja);flex:none}
.sim-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sim-list li{
  display:flex;gap:.9rem;align-items:flex-start;color:var(--texto-suave);
  font-size:.98rem;line-height:1.6;padding:.95rem 0;border-top:var(--traco) solid var(--linha);
}
.sim-list li:last-child{border-bottom:var(--traco) solid var(--linha)}
.sim-list .ck{width:20px;height:20px;color:var(--laranja);flex:none;margin-top:3px}
.sim-list b{color:var(--texto-marca);font-weight:700}

.sim-card{
  background:var(--branco);border:var(--traco) solid var(--linha);
  border-top:var(--tick) solid var(--laranja);border-radius:var(--raio);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.sec-clara .sim-card{background:var(--branco)}
.sim-card > h3{font-size:1.35rem;margin-bottom:.5rem}
.sim-card > .muted{font-size:.94rem;line-height:1.6;margin-bottom:1.6rem}

.sim-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.field{margin-bottom:1.05rem;display:flex;flex-direction:column;gap:.4rem}
.field-full{grid-column:1 / -1}
.field label,.field > .field-lbl{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-marca);line-height:1.45;
}
.field .req{color:var(--laranja)}
.inp{
  width:100%;padding:.9rem 1rem;border:var(--traco) solid var(--n-300);border-radius:var(--raio);
  background:var(--branco);color:var(--texto);font-size:1rem;
  transition:border-color .2s,box-shadow .2s;
}
.inp::placeholder{color:#6B6B6B}
.inp:focus{outline:none;border-color:var(--azul);box-shadow:inset 0 0 0 var(--traco) var(--azul)}
select.inp{
  appearance:none;padding-right:2.5rem;background-repeat:no-repeat;background-position:right 1rem center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317374F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Estado de erro: laranja é o alerta da marca, porque a paleta oficial
   não tem cor de erro dedicada. */
.inp-err{border-color:var(--laranja) !important;box-shadow:inset 0 0 0 var(--traco) var(--laranja)}

/* Grupo de opções por radio: pílula de canto reto, selecionada em azul sólido */
/* position:relative prende o input escondido ao próprio grupo. Sem isso ele
   é posicionado contra um ancestral qualquer e o foco de teclado rola a
   página para um canto sem relação com a pergunta. */
.seg{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--traco);background:var(--linha);border:var(--traco) solid var(--linha)}
.seg.wrap2{grid-template-columns:repeat(2,1fr)}
.seg input{position:absolute;top:0;left:0;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--branco);color:var(--texto-marca);
  font-size:.92rem;font-weight:700;letter-spacing:0;text-transform:none;
  padding:.85rem .7rem;cursor:pointer;line-height:1.3;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.seg label:hover{background:var(--n-050)}
.seg input:checked + label{background:var(--azul);color:var(--branco)}
.seg input:focus-visible + label{outline:3px solid var(--laranja);outline-offset:-3px}

/* --- Resultado --- */
.sim-result{margin-top:1.6rem;border-top:var(--traco) solid var(--linha);padding-top:1.6rem}
.sim-result-head{background:var(--azul);color:var(--sobre-escuro);padding:1.5rem 1.6rem;border-left:var(--tick) solid var(--laranja)}
.sim-result-head .cap{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking);
  text-transform:uppercase;color:var(--azul-300);margin-bottom:.6rem;
}
.sim-result-head .val{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);font-weight:700;color:var(--acento-texto);line-height:1.1;letter-spacing:-.02em}
.sim-result-head .val b{color:var(--branco);font-weight:700}
/* Manchete qualitativa do diagnóstico da PGFN: é frase, não número,
   portanto vai em branco e não em laranja. */
.sim-result-head .val.is-texto{font-size:1.08rem;font-weight:400;color:var(--sobre-escuro);line-height:1.55;letter-spacing:0}
#sim-inss-sub{
  display:block;font-size:.86rem;font-weight:400;letter-spacing:0;
  color:var(--sobre-escuro-suave);margin-top:.7rem;line-height:1.5;
}

.sim-social{
  display:flex;gap:.9rem;align-items:flex-start;margin-top:var(--traco);
  background:var(--branca);border-left:var(--tick) solid var(--azul);
  padding:1.15rem 1.4rem;font-size:.93rem;line-height:1.6;color:var(--texto-suave);
}
.sim-social svg{width:20px;height:20px;color:var(--laranja);flex:none;margin-top:2px}
.sim-social b{color:var(--texto-marca);font-weight:700}

/* Mapa de caminhos (diagnóstico PGFN) */
.sim-doc{border:var(--traco) solid var(--linha);border-top:0;padding:1.4rem 1.5rem}
.map-cap{
  display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:.95rem;
}
.map-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.map-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  border:var(--traco) solid var(--azul);border-radius:var(--raio);
  padding:.45rem .85rem;font-size:.88rem;font-weight:700;color:var(--texto-marca);
}
.map-tag svg{width:15px;height:15px;color:var(--laranja);flex:none}
.map-tag.off{border-color:var(--n-300);color:var(--n-700);font-weight:400;opacity:.75}

.sim-result-note{
  display:flex;gap:.9rem;align-items:flex-start;
  border:var(--traco) solid var(--linha);border-top:0;padding:1.25rem 1.5rem;
  font-size:.94rem;line-height:1.65;color:var(--texto-suave);
}
.sim-result-note .ck{width:19px;height:19px;color:var(--laranja);flex:none;margin-top:3px}
.sim-result-note b{color:var(--texto-marca);font-weight:700}

/* --- Abas do resultado -------------------------------------------------
   Duas pílulas dentro de uma trilha arredondada, com ícone à esquerda do
   rótulo, como no print de referência. Continuam sendo abas de verdade,
   com role=tab e navegação por teclado — o que mudou é a forma.
   O acento da aba ativa é o tick laranja, que é elemento gráfico e não
   texto, portanto não tem exigência de contraste. */
.sim-tabs{
  display:flex;gap:.3rem;margin-top:var(--traco);padding:.3rem;
  background:var(--branca);border:var(--traco) solid var(--linha);
  border-radius:var(--raio-cartao);
}
.sim-tab{
  flex:1;appearance:none;background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  border-radius:calc(var(--raio-cartao) - 2px);
  font-family:inherit;font-size:.92rem;font-weight:700;color:var(--texto-suave);
  padding:.62rem .7rem;cursor:pointer;line-height:1.25;position:relative;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.sim-tab svg{width:16px;height:16px;flex:none}
.sim-tab:hover{color:var(--texto-marca)}
.sim-tab.is-on{
  background:var(--branco);color:var(--texto-marca);
  box-shadow:0 1px 2px rgba(23,55,79,.10);
}
.sim-tab.is-on::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:0;width:34px;height:var(--tick);background:var(--laranja);
  border-radius:0 0 var(--raio) var(--raio);
}
.sim-tab:focus-visible{outline:3px solid var(--laranja);outline-offset:-3px}
.sim-panel:focus-visible{outline:3px solid var(--laranja);outline-offset:-3px}

/* --- Aba Parâmetros: a memória de cálculo em CARTÕES -------------------
   Rodada 2, 25 de agosto de 2026.

   MOTIVO: a aba deixou de ser só memória de cálculo dentro da página. A
   equipe da A Regular roda o cálculo para o cliente que já atende, tira um
   print desta aba e envia pelo WhatsApp. O arranjo original — quatro
   cartões .par-group empilhados, cada um com borda, respiro de 1,15rem e
   título próprio, mais a nota longa do Manual do SERO no fim — media
   1.880px em 390×844 e exigia três prints.

   ⚠️ A RODADA 1 ERROU O ALVO e está registrada aqui para não voltar: ela
   compactou tudo em linhas de filete, com rótulo grande à esquerda e valor
   pequeno à direita. Coube na tela, mas inverteu a hierarquia e encolheu os
   textos. O Victor reprovou nos dois pontos.

   A REGRA DE HIERARQUIA, que é o coração deste layout:
       rótulo PEQUENO e rebaixado em cima · valor GRANDE e forte embaixo.
   🚫 Se faltar altura, comprima nesta ordem: gap entre cartões, padding do
      cartão, altura do fecho, corpo do rótulo de seção. O corpo do VALOR
      não se comprime — foi exatamente a queixa do cliente.

   TRADUÇÃO DE COR: o print de referência é de um simulador de terceiro e
   usa lilás, rosa e verde, que são PROIBIDOS nesta conta. Copiou-se o
   arranjo, não a paleta:
       fundo lilás claro → --branca #EBEBEB      cartão branco → branco
       valor preto       → --azul #17374F/700    rótulo cinza  → --n-700
       destaque lilás    → --azul-100 + borda azul
       destaque rosa     → laranja muito claro + --laranja-700
       fecho verde       → bloco sólido --azul, valor --laranja-300
   Único ponto do print que NÃO se reproduz: o raio de ~14px. Aqui é 8px,
   que é o teto do DESIGN-SYSTEM — canto arredondado grande descaracteriza
   a geometria da marca. */

.par-corpo{background:var(--branca);padding:.55rem .6rem .7rem}

/* Cabeçalho do recibo: nomeia o documento que o cliente recebe. A marca não
   se repete aqui — o cabeçalho da página é sticky e já entrega o logo no
   topo de todo print. Ver o comentário no HTML. */
.par-marca{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  border:var(--traco) solid var(--linha);border-top:0;
  background:var(--azul);padding:.4rem 1rem;
}
/* Fica pronto para o caso de o logo voltar para dentro do recibo:
   140px é o mínimo do lockup horizontal (DESIGN-SYSTEM.md §4). */
.par-marca img{width:140px;height:auto;display:block;flex:none}
.par-marca-doc{
  font-size:.66rem;font-weight:700;letter-spacing:.09em;line-height:1.35;
  text-transform:uppercase;color:var(--branco);white-space:nowrap;
}
.par-marca-lbl{
  text-align:right;font-size:.58rem;font-weight:400;letter-spacing:.05em;
  line-height:1.35;text-transform:uppercase;color:var(--azul-300);
  white-space:nowrap;
}

/* Rótulo de seção: solto sobre o fundo, sem faixa, sem borda e sem tick —
   é assim no print, e é o que devolve respiro entre os grupos. */
.par-sec{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;line-height:1.25;
  text-transform:uppercase;color:var(--texto-suave);
  padding:.3rem .2rem .2rem;
}
.par-sec:first-child{padding-top:.15rem}

/* --- Os cartões --- */
.par-cards{display:grid;gap:.42rem}
/* "Fator" nunca carrega mais que um percentual curto; a área pode chegar a
   "100.000,00 m²". Coluna igual cortava o m² do primeiro cartão. */
.par-cards.c-area{grid-template-columns:1.15fr .72fr 1.15fr}
/* O VAU é sempre da ordem de milhares; o custo da obra pode passar de
   R$ 23 milhões. Coluna igual estourava o segundo cartão. */
.par-cards.c-custo{grid-template-columns:.84fr 1.16fr}
/* Quatro colunas proporcionais ao que cada uma carrega: "Social" tem o
   rótulo mais curto mas o valor pode ser "100%", e "Destinação" tem o
   rótulo mais longo. Coluna igual cortava um ou outro. O respiro lateral
   também encolhe aqui — é gordura de cartão, não corpo de valor. */
.par-cards.c-pct{grid-template-columns:.95fr 1.02fr 1fr 1.12fr}
.c-pct .par-card{padding-inline:.32rem}
/* PROPORÇÃO — em tela de celular, quatro colunas davam cartões de ~65px de
   largura por 83px de altura: os únicos EM PÉ numa peça em que todo o resto
   é deitado (área 2,1:1 · custo 2,7:1 · remuneração 8,3:1). Era o que fazia
   o recibo parecer desproporcional no print. Em 2×2 o cartão fica ~2,4:1 e
   entra no mesmo compasso dos outros grupos, o rótulo para de quebrar em
   duas linhas e o qualificador (que é o que o cliente confere: "Alvenaria",
   "Obra nova") volta a ser lido de relance. */
@media (max-width:460px){
  .par-cards.c-pct{grid-template-columns:1fr 1fr}
  .c-pct .par-card{padding:.34rem .5rem}
  .c-pct .par-k{min-height:0}
  /* Em 2×2 sobra largura e falta altura, então o qualificador sai da
     terceira linha e senta ao lado do valor, na mesma base. Duas linhas
     em vez de três, sem encolher nada: devolve ~28px ao orçamento do
     print, que é o que separa o pior caso de precisar de rolagem. */
  .c-pct .par-card{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"k k" "v q";
    align-items:baseline;column-gap:.32rem;row-gap:.1rem;
  }
  .c-pct .par-k{grid-area:k}
  .c-pct .par-v{grid-area:v}
  .c-pct .par-q{grid-area:q;margin:0;padding:0;line-height:1.2;text-align:left}
}
/* Os quatro rótulos reservam duas linhas e os qualificadores encostam no
   pé do cartão. Assim os quatro percentuais ficam na mesma altura de
   leitura, em vez de flutuarem cada um num nível. Não custa altura: a
   linha já era definida pelo cartão mais alto. */
.c-pct .par-k{font-size:.72rem;overflow-wrap:anywhere;hyphens:auto}
.c-pct .par-q{margin-top:auto;padding-top:.14rem}

.par-card{
  background:var(--branco);border:var(--traco) solid var(--linha);
  border-radius:var(--raio-cartao);box-shadow:0 1px 2px rgba(23,55,79,.05);
  padding:.42rem .5rem;min-width:0;
  display:flex;flex-direction:column;gap:.1rem;
}
.par-k{
  font-size:.72rem;font-weight:400;color:var(--texto-suave);line-height:1.25;
}
.par-v{
  font-size:1.06rem;font-weight:700;color:var(--texto-marca);
  line-height:1.15;letter-spacing:-.01em;
}
/* Hierarquia do recibo: os treze valores não têm o mesmo papel. Área,
   fator e percentuais são PARÂMETROS (suporte). VAU, custo da obra,
   remuneração e abatimento são a MOEDA do cálculo. O INSS é a CONCLUSÃO.
   Antes os treze saíam no mesmo corpo e o cliente não sabia onde olhar. */
.c-custo .par-v,.par-row .par-v{font-size:1.14rem}
/* Unidade e qualificador: micro-texto de apoio. Nunca disputam com o valor. */
.par-u{font-size:.68em;font-weight:700}
.par-cur{font-size:.66em;font-weight:700;letter-spacing:0}
.par-ref{font-size:.62rem;font-weight:400;color:var(--texto-suave);line-height:1.2;white-space:nowrap}
.par-ref b{font-weight:700;color:var(--texto-marca)}
.par-ref:empty{display:none}
.par-q{
  display:block;font-size:.62rem;font-weight:400;color:var(--texto-suave);
  line-height:1.25;margin-top:.1rem;
  /* Qualificador é palavra, não número: quebrar dentro dele é aceitável,
     e é o que impede o corte de "multifamiliar" e "habitacional". */
  overflow-wrap:anywhere;hyphens:auto;
}
.par-q:empty{display:none}

/* Custo da obra: o cartão destacado do print. Lilás lá, azul claro aqui.
   Azul #17374F sobre --azul-100 #D3DDE5 dá 8,4:1. */
.par-card.is-forte{background:var(--azul-100);border-color:var(--azul);}
.par-card.is-forte .par-k{color:var(--azul-800)}

/* --- Remuneração: cartões de largura total ---
   Aqui o próprio print troca de arranjo: rótulo à esquerda e valor à
   direita, na mesma linha. */
.par-rows{display:grid;gap:.42rem}
.par-row{
  background:var(--branco);border:var(--traco) solid var(--linha);
  border-radius:var(--raio-cartao);box-shadow:0 1px 2px rgba(23,55,79,.05);
  padding:.42rem .7rem;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.par-row .par-k{flex:1 1 auto}
.par-row .par-v{flex:0 1 auto;text-align:right}
.par-row .par-q{display:inline;margin:0;font-size:.64rem}

/* Abatimento de concreto: SEM REALCE (decisão do Victor, 25/ago/2026).
   O tratamento anterior — fundo rosa, borda e valor laranja, como no print
   de referência — foi retirado: na maioria dos casos o abatimento é zero,
   e realçar em laranja aquilo que NÃO se aplica invertia a leitura do
   recibo. A linha agora é comum e vem por último, depois do Imposto.
   O modificador .is-abate saiu do HTML; nada mais o aplica. */

/* "não se aplica": estado, não valor. Peso normal e corpo menor para não
   competir com os números que de fato entraram no cálculo. */
.par-na{
  font-size:.78rem;font-weight:400;color:var(--texto-suave);
  letter-spacing:0;white-space:nowrap;
}

/* Fecho: bloco sólido, rótulo e valor centralizados, valor em corpo de
   manchete. É o número que o cliente procura primeiro no print. */
.par-fecho{
  margin-top:.5rem;background:var(--azul);border-radius:var(--raio-cartao);
  border-left:var(--tick) solid var(--laranja);
  padding:.62rem 1rem .68rem;text-align:center;
}
.par-fecho-lbl{
  display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;
  line-height:1.35;text-transform:uppercase;color:var(--branco);
}
.par-fecho-val{
  display:block;font-size:1.78rem;font-weight:700;color:var(--laranja-300);
  line-height:1.15;letter-spacing:-.02em;margin-top:.12rem;
}

/* Lastro: a procedência inteira, recolhida. Sai do enquadramento do print,
   não sai da página. Fechar o <details> nunca apaga o texto. */
.par-lastro{border:var(--traco) solid var(--linha);border-top:0;background:var(--branco)}
.par-lastro > summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  padding:.32rem 1rem;font-size:.74rem;font-weight:700;line-height:1.3;
  color:var(--texto-marca);
}
.par-lastro > summary::-webkit-details-marker{display:none}
.par-lastro > summary::before{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--laranja);border-bottom:2px solid var(--laranja);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.par-lastro[open] > summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.par-lastro > summary:hover{background:var(--n-050)}
.par-lastro > summary:focus-visible{outline:3px solid var(--laranja);outline-offset:-3px}
.par-lastro-corpo{padding:0 1rem .9rem;border-top:var(--traco) solid var(--linha)}
.memo-note{font-size:.84rem;line-height:1.7;color:var(--texto-suave);margin:.8rem 0 0}
.memo-note b{color:var(--texto-marca);font-weight:700}
.par-nota{font-size:.84rem;line-height:1.7;color:var(--texto-suave);margin:.8rem 0 0}
.par-nota b{color:var(--texto-marca);font-weight:700}
.par-nota:empty{display:none}

/* Captura */
.sim-capture{border:var(--traco) solid var(--linha);border-top:0;padding:1.5rem}
.sim-capture .cap-title{font-size:1.05rem;font-weight:700;color:var(--texto-marca);margin:0 0 .5rem;line-height:1.35}
.sim-capture .cap-sub,.sim-capture > p{font-size:.93rem;line-height:1.65;color:var(--texto-suave);margin:0 0 1.15rem}
.cap-fields{display:grid;gap:.75rem;margin-bottom:1rem}
.cap-err{
  margin:0 0 1rem;padding:.8rem .95rem;font-size:.9rem;font-weight:700;line-height:1.45;
  border-left:var(--tick) solid var(--laranja);background:#FDE1DB;color:#8F2C17;border-radius:var(--raio);
}
.cap-fine{font-size:.83rem;line-height:1.6;color:var(--texto-suave);margin:.95rem 0 0}
.finelabel{font-size:.83rem;line-height:1.7;color:var(--texto-suave);margin:1.3rem 0 0}
.finelabel b{color:var(--texto-marca);font-weight:700}

/* ======================= GLOSSÁRIO ======================= */
.gloss{display:grid;gap:var(--traco);background:var(--linha);border:var(--traco) solid var(--linha)}
.gloss-item{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1.4rem;align-items:start;
  background:var(--branco);padding:1.25rem 1.4rem;
}
.sec-clara .gloss-item{background:var(--branca)}
.gloss-k{
  font-size:.88rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-marca);line-height:1.35;
  border-left:var(--tick) solid var(--laranja);padding-left:.8rem;
}
.gloss-v{font-size:.94rem;line-height:1.62;color:var(--texto-suave)}
.gloss-v b{color:var(--texto-marca);font-weight:700}

/* ======================= LISTA DE ATRIBUTOS ======================= */
.feature-list{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:0}
.feature-list li{
  display:flex;gap:.85rem;align-items:flex-start;color:var(--texto-suave);
  line-height:1.6;padding:.9rem 0;border-top:var(--traco) solid var(--linha);font-size:.98rem;
}
.feature-list li:last-child{border-bottom:var(--traco) solid var(--linha)}
.feature-list .ck{width:20px;height:20px;color:var(--laranja);flex:none;margin-top:3px}
.feature-list b{color:var(--texto-marca);font-weight:700}
.sec-azul .feature-list li,.sec-preta .feature-list li,.callout .feature-list li{
  color:var(--sobre-escuro-suave);border-top-color:var(--linha-escura);
}
.sec-azul .feature-list li:last-child,.sec-preta .feature-list li:last-child,.callout .feature-list li:last-child{
  border-bottom-color:var(--linha-escura);
}
.sec-azul .feature-list b,.sec-preta .feature-list b,.callout .feature-list b{color:var(--branco)}

/* ======================= CARTÃO EM BLOCO ======================= */
.bloco{background:var(--branco);border:var(--traco) solid var(--linha);border-top:var(--tick) solid var(--laranja);padding:clamp(1.6rem,3vw,2.2rem)}
.sec-clara .bloco{background:var(--branco)}
.bloco h3{font-size:1.25rem;margin-bottom:.8rem}
.bloco p{font-size:.96rem;line-height:1.65;color:var(--texto-suave)}
.bloco b{color:var(--texto-marca);font-weight:700}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3rem)}

/* Callout escuro */
.callout{background:var(--azul);color:var(--sobre-escuro);padding:clamp(1.9rem,3.5vw,2.8rem);border-left:var(--tick) solid var(--laranja)}
.callout h3{color:var(--branco);font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem);margin-bottom:.9rem}
.callout p{color:var(--sobre-escuro-suave);font-size:1rem;line-height:1.65}
.callout b{color:var(--branco);font-weight:700}
.callout .btnrow{margin-top:1.7rem}

/* ======================= ETAPAS ======================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.8vw,2.2rem);margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.steps.tri{grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding-top:2.9rem;border-top:var(--traco) solid var(--linha)}
.step::after{content:"";position:absolute;top:calc(-1 * var(--tick));left:0;width:48px;height:var(--tick);background:var(--laranja)}
.step .n{
  position:absolute;top:1.05rem;left:0;
  font-size:1.7rem;font-weight:700;color:var(--acento-texto);line-height:1;letter-spacing:-.02em;
}
.step h3,.step h4{font-size:1.12rem;margin-bottom:.5rem;line-height:1.3}
.step p{color:var(--texto-suave);font-size:.95rem;line-height:1.62;margin:0}
.sec-azul .step,.sec-preta .step{border-top-color:var(--linha-escura)}
.sec-azul .step p,.sec-preta .step p{color:var(--sobre-escuro-suave)}

/* ======================= PÚBLICO ======================= */
.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--traco);background:var(--linha);border:var(--traco) solid var(--linha);margin-top:clamp(2.2rem,4vw,3rem)}
.aud-cell{
  background:var(--branco);padding:clamp(1.7rem,2.8vw,2.2rem);
  border-top:var(--tick) solid transparent;transition:border-color .26s var(--ease),background .26s var(--ease);
}
.sec-clara .aud-cell{background:var(--branca)}
.aud-cell:hover{border-top-color:var(--laranja);background:var(--n-050)}
.aud-cell.is-lead{background:var(--azul);color:var(--sobre-escuro);border-top-color:var(--laranja)}
.aud-cell.is-lead:hover{background:var(--azul-800)}
.aud-cell.is-lead h4{color:var(--branco)}
.aud-cell.is-lead p{color:var(--sobre-escuro-suave)}
.aud-cell.is-lead .aud-ic{border-color:rgba(255,255,255,.32)}
.aud-tag{
  display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--branca);margin-bottom:.9rem;
}
.aud-ic{
  width:46px;height:46px;border:var(--traco) solid var(--azul);border-radius:var(--raio);
  display:grid;place-items:center;color:var(--laranja);margin-bottom:1.15rem;
}
.aud-ic svg{width:22px;height:22px}
.aud-cell h4{font-size:1.1rem;margin-bottom:.55rem;line-height:1.3}
.aud-cell p{color:var(--texto-suave);font-size:.94rem;line-height:1.6;margin:0}

/* ======================= AUTORIDADE ======================= */
.auth-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
/* Moldura de fotografia, proporção 5:4. Nenhum texto entra aqui.
   A camada azul de 0,22 existe por um motivo de paleta, não de estética:
   a cena de obra é dominada por terracota, e sem ela o quadro disputa
   atenção com o laranja da marca, que é o acento. Com ela, a foto
   aproxima-se do azul primário e o laranja continua sendo o único acento
   da página. Valor baixo de propósito: a cena precisa continuar legível. */
.auth-placa{position:relative;border:var(--traco) solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--azul);aspect-ratio:5/4}
.auth-placa img{width:100%;height:100%;object-fit:cover;display:block}
.auth-placa::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--azul);opacity:.22;
}
.auth-placa .marca-canto{
  position:absolute;z-index:1;bottom:0;left:0;width:56px;height:var(--tick);
  background:var(--laranja);
}
.auth-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.chip{
  display:inline-flex;align-items:center;gap:.55rem;
  border:var(--traco) solid var(--azul);border-radius:var(--raio);
  padding:.45rem .85rem;font-size:.86rem;font-weight:700;color:var(--texto-marca);
}
.chip svg{width:15px;height:15px;color:var(--laranja);flex:none}
.sec-azul .chip,.sec-preta .chip{border-color:rgba(255,255,255,.32);color:var(--branca)}

/* ======================= FAQ ======================= */
.faq-head{max-width:640px;margin-bottom:clamp(2.2rem,4vw,3rem)}
.faq-wrap{max-width:860px;border-top:var(--traco) solid var(--linha)}
.faq-item{border-bottom:var(--traco) solid var(--linha)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:1.45rem .2rem;
  font-size:1.08rem;font-weight:700;color:var(--texto-marca);line-height:1.35;
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
}
.faq-q:hover{color:var(--azul-600)}
.faq-q .pm{width:22px;height:22px;flex:none;position:relative}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--laranja)}
.faq-q .pm::before{top:50%;left:0;right:0;height:var(--tick);transform:translateY(-50%)}
.faq-q .pm::after{left:50%;top:0;bottom:0;width:var(--tick);transform:translateX(-50%);transition:opacity .3s var(--ease)}
.faq-item.open .pm::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{margin:0 0 1.5rem;color:var(--texto-suave);line-height:1.72;max-width:72ch}
.faq-a b{color:var(--texto-marca);font-weight:700}

/* ======================= CTA FINAL ======================= */
.finalcta{background:var(--azul);color:var(--sobre-escuro);text-align:center;position:relative;overflow:hidden;--guia:rgba(255,255,255,.10)}
.finalcta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) var(--traco),transparent var(--traco)),
    linear-gradient(to bottom,rgba(255,255,255,.055) var(--traco),transparent var(--traco));
  background-size:88px 88px;
}
.finalcta .wrap{position:relative;z-index:1}
.finalcta .in{max-width:760px;margin-inline:auto}
.finalcta .descriptor{color:var(--branca)}
.finalcta h2{color:var(--branco);font-size:clamp(1.85rem,1.35rem + 2.2vw,2.9rem);line-height:1.14}
.finalcta p{color:var(--sobre-escuro-suave);font-size:1.08rem;line-height:1.62;margin:1.2rem auto 2.3rem;max-width:58ch}
.finalcta .btnrow{justify-content:center}
.finalcta .assur{
  font-size:.88rem;color:var(--azul-300);margin:2rem 0 0;line-height:1.6;
}

/* ======================= FOOTER ======================= */
.lp-footer{background:var(--cinza);color:var(--sobre-escuro-suave);padding-block:clamp(2.75rem,5vw,3.75rem) 2rem;border-top:var(--tick) solid var(--laranja)}
.lp-footer .logo-plate{display:block;margin-bottom:1.2rem}
.lp-footer img{width:170px;height:auto}
.lp-footer .fdesc{
  display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--branca);font-weight:700;margin-bottom:1rem;
}
.lp-footer p{font-size:.92rem;line-height:1.7;color:#B4B4B4;max-width:70ch}
.fcontact{display:flex;flex-wrap:wrap;gap:.2rem 1.8rem;margin-top:1.4rem}
/* Alvo de toque: estes três links tinham 25px de altura, contra os 44px
   mínimos (WCAG 2.5.5). São os dois WhatsApp e o Instagram — justamente
   os links que mais importam num rodapé de captação. O padding vertical
   cresce dentro do gap que já existia, então não empurra o rodapé. */
.fcontact a{
  font-size:.92rem;font-weight:700;color:var(--branca);
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:var(--traco) solid transparent;transition:border-color .2s var(--ease);
}
.fcontact a:hover{border-bottom-color:var(--laranja)}
.fbot{
  margin-top:2.2rem;padding-top:1.5rem;border-top:var(--traco) solid rgba(255,255,255,.14);
  font-size:.84rem;color:#9A9A9A;line-height:1.6;
}
.lp-footer .finelabel{color:#9A9A9A;margin-top:1.3rem;max-width:80ch}
.lp-footer .finelabel b{color:var(--branca)}

/* ======================= WHATSAPP FLUTUANTE ======================= */
.wafloat{
  position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:.55rem;
  background:var(--azul);color:var(--branco);font-weight:700;padding:.85rem 1.1rem;
  border-radius:var(--raio);border-left:var(--tick) solid var(--laranja);
  transition:background .22s var(--ease);
}
.wafloat:hover{background:var(--azul-800)}
.wafloat svg{width:24px;height:24px;fill:currentColor}
.wafloat .lbl-wa{font-size:.9rem}

/* ======================= REVEAL (motion contido) ======================= */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ======================= RESPONSIVO ======================= */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding-right:0;padding-bottom:clamp(1.75rem,3.5vw,2.5rem)}
  .hero-media{border-left:0;border-top:var(--traco) solid var(--linha-escura);padding:2rem 0 3rem}
  .sim-grid,.auth-grid,.duo{grid-template-columns:1fr}
  .aud-grid,.steps{grid-template-columns:1fr 1fr}
  .steps.tri{grid-template-columns:1fr 1fr}
  .paths.tri{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--logo-h:140px}  /* nunca abaixo do mínimo do lockup horizontal */
  .lp-header .wrap{min-height:74px}
  .lp-header .btn{padding:.85rem 1.1rem;font-size:.9rem}
  .paths{grid-template-columns:1fr}
  .factstrip .wrap{grid-template-columns:1fr 1fr}
  .fact{border-bottom:var(--traco) solid rgba(255,255,255,.14);padding-left:0}
  .fact:nth-child(2n){border-right:0}
  .gloss-item{grid-template-columns:1fr;gap:.7rem}
  .gloss-k{border-left:0;padding-left:0;border-top:var(--tick) solid var(--laranja);padding-top:.7rem}
}
@media (max-width:620px){
  .sim-fields{grid-template-columns:1fr}
  .seg,.seg.wrap2{grid-template-columns:1fr}
  .aud-grid,.steps,.steps.tri{grid-template-columns:1fr}
  .factstrip .wrap{grid-template-columns:1fr}
  .fact:last-child{border-bottom:0}
  /* Recibo dos Parâmetros em tela de celular: o alvo é caber inteiro em um
     print só. Encolhem as gorduras — gap, padding e rótulo — nunca o corpo
     do valor. Ver o bloco .par-* acima para a ordem de compressão. */
  .par-marca{padding-inline:.62rem}
  .par-fecho,.par-lastro > summary,.par-lastro-corpo{padding-inline:.8rem}
  /* O lastro fica FORA do enquadramento do print, então crescer aqui não
     custa nada ao recibo — e é um alvo de toque real. */
  .par-lastro > summary{min-height:44px;display:flex;align-items:center}
  .par-corpo{padding:.45rem .5rem .55rem}
  .par-cards,.par-rows{gap:.38rem}
  .par-card{padding:.42rem .46rem}
  /* 🚫 NÃO reapertar o respiro lateral dos percentuais: em 2×2 (regra de
     460px) o cartão tem largura de sobra, e .28rem fazia o rótulo colar
     na borda. */
  .c-pct .par-card{padding-inline:.5rem}
  .par-row{padding:.4rem .6rem}
  /* 44px é o piso de alvo de toque (WCAG 2.5.5). Estas duas abas são o
     controle que a equipe da Regular opera dezenas de vezes por dia no
     celular; custam 9px no orçamento do print e valem cada um. */
  .sim-tab{padding:.72rem .5rem;font-size:.88rem;min-height:44px}
  .sim-tab svg{width:15px;height:15px}
  .sim-capture,.sim-doc,.sim-result-note{padding-inline:1.1rem}
  .sim-result-head{padding:1.25rem 1.2rem}
  .doc-flag{flex-direction:column;align-items:flex-start;gap:.7rem}
  .doc{padding:1.4rem 1.1rem 1.2rem}
  .doc-top{padding-right:5.4rem}
  .doc-selo{font-size:.62rem;letter-spacing:.1em;padding:.36rem .6rem}
  .doc-sigla{width:44px;height:44px;font-size:.74rem}
  .path-nums > div{flex-direction:column;gap:.35rem}
  .path-nums .pn{min-width:0}
  .wafloat .lbl-wa{display:none}
  .lp-header .lbl-full{display:none}
  .lp-header .btn{padding:.8rem .9rem}
  .btn{white-space:normal;text-align:center}
}
@media (max-width:340px){
  /* Abaixo dos dois viewports-alvo (390 e 360) não há largura para os dois
     rótulos da faixa. Some o secundário inteiro — nunca meia palavra. */
  .par-marca-lbl{display:none}
  /* E o número não cabe nas colunas lado a lado. Aqui o ARRANJO cede, não
     o número: valor cortado num recibo fiscal pode ser lido errado, o que
     é pior do que o print precisar de rolagem numa tela de 320px. */
  .par-cards.c-area{grid-template-columns:1fr 1fr}
  .par-cards.c-custo{grid-template-columns:1fr}
  .par-cards.c-pct{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){

  /* 🚫 --logo-h NÃO desce abaixo de 140px: é o mínimo do lockup horizontal
     (DESIGN-SYSTEM.md §4). Em 320px quem cede é o CTA, que fica só com o
     ícone (.lbl-full oculto acima), não a marca. */
  :root{--gutter:1.1rem}
  .hero-assurance{gap:.5rem 1.1rem}
}