/* ===================================================================
   FRANCO · NOVO SITE · sistema visual. Derivado de assets/franco-lp.css,
   com mais ar e contraste: raios unificados, botoes/tags/selos em pilula,
   grades de 2-3 colunas a 1 coluna em 820px, menu recolhido em 900px.
   Carregado SO pelas paginas novas; o franco-lp.css continua servindo as
   paginas ainda nao migradas.
   =================================================================== */

:root{
  --pet:#0B2A33; --deep:#061A20; --deep2:#08222A; --verde:#4ADE80; --vesc:#14742F;
  --creme:#F5F2EA; --cinza:#8A958F; --amb:#FBBF24; --erro:#F87171;
  --linha:rgba(245,242,234,.12); --linha-forte:rgba(245,242,234,.28);
  --txt:#F5F2EA; --txt2:#E4ECEA; --txt3:#AFC2C8; --txt4:#8FA0A6;
  --claro:#FFFFFF; --sobre-claro:#3A4A50; --sobre-claro-2:#5C6B70;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-sans:'Geist',-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,Menlo,monospace;
  /* raios (DESIGN.md · Shapes) */
  --r-sm:8px; --r-md:14px; --r-lg:18px; --r-full:999px;
  /* espacos (DESIGN.md · Layout & Spacing) */
  --gutter:40px; --largura:1180px; --secao:96px; --respiro:40px;
  --nav-h:64px;
  /* tokens que o form-valida.css espera, se algum dia carregar junto */
  --atencao:#FBBF24; --border-dark-strong:rgba(245,242,234,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-sans);background:var(--deep);color:var(--txt);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.serif{font-family:var(--font-serif);font-weight:400}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-mono)}

.wrap{max-width:var(--largura);margin:0 auto;padding:0 var(--gutter)}

/* kicker + numeros de secao (Geist Mono verde, .08em) */
.kick{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--verde);font-weight:500;display:inline-flex;align-items:baseline;gap:8px}
.kick.esc{color:var(--vesc)}
.kick .kn{color:var(--verde);font-weight:600}
.blk.creme .kick .kn{color:var(--vesc)}
.hf{white-space:nowrap}

/* a11y */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:12px;z-index:120;background:var(--verde);color:var(--pet);padding:10px 16px;border-radius:var(--r-sm);font-weight:600}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:2px}
.blk.creme :focus-visible,.panel-claro :focus-visible{outline-color:var(--vesc)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== botoes (pilula, min 44px) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:var(--font-sans);font-size:14.5px;padding:11px 22px;border-radius:var(--r-full);cursor:pointer;border:1px solid var(--linha-forte);background:transparent;color:var(--creme);font-weight:500;letter-spacing:.01em;transition:border-color .2s,filter .2s,transform .2s;line-height:1.2;text-align:center}
.btn:hover{border-color:var(--verde)}
.btn.p{background:var(--verde);border-color:var(--verde);color:var(--pet);font-weight:600}
.btn.p:hover{filter:brightness(1.08)}
.btn.esc{color:var(--pet);border-color:rgba(11,42,51,.35)}
.btn.esc:hover{border-color:var(--vesc)}
.link{color:var(--verde);font-weight:500}
.link:hover{text-decoration:underline}
.blk.creme .link,.panel-claro .link{color:var(--vesc)}
/* alvo de toque minimo (44px) para links que ficam sozinhos numa linha */
.tap44{display:inline-flex;align-items:center;min-height:44px}
.links-linha{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 28px}

/* bloco de portas */
.portas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.portas.center{justify-content:center}

/* ===== cabecalho novo ===== */
.site-nav{position:sticky;top:0;z-index:60;background:rgba(6,26,32,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);transition:padding .2s}
.site-nav-in{max-width:var(--largura);margin:0 auto;padding:0 var(--gutter);height:var(--nav-h);display:flex;align-items:center;gap:26px;transition:height .2s}
.site-nav.is-scrolled .site-nav-in{height:56px}
.logo{display:flex;align-items:center;gap:9px;min-height:44px}
.logo .sq{width:28px;height:28px;border-radius:var(--r-sm);background:var(--verde);display:flex;align-items:center;justify-content:center;color:var(--pet);font-weight:700;font-size:15px}
.logo .word{font-family:var(--font-serif);font-size:20px;letter-spacing:-.01em}
#site-menu{display:flex;align-items:center;flex:1;gap:16px}
.nav-links{display:flex;gap:16px;font-size:13.5px;color:var(--txt2)}
.nav-links a{padding:14px 0;border-bottom:2px solid transparent;line-height:1.2;white-space:nowrap}
.nav-links a:hover{color:var(--verde)}
.nav-links a[aria-current="page"],.nav-links a[aria-current="location"]{color:var(--verde);border-bottom-color:var(--verde)}
.nav-entrar{margin-left:auto;min-height:44px;padding:11px 20px;font-size:14px}
.nav-menu-btn{display:none;margin-left:auto;align-items:center;gap:9px;min-height:44px;padding:8px 14px;border-radius:var(--r-full);border:1px solid var(--linha-forte);background:transparent;color:var(--creme);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer}
.nav-menu-btn .ic{display:flex;flex-direction:column;gap:4px}
.nav-menu-btn .ic span{width:18px;height:2px;background:var(--creme);border-radius:2px;display:block}
/* botao de fechar o painel: escondido por padrao (desktop e menu recolhido);
   so aparece dentro do painel aberto no celular (regra abaixo). */
.nav-panel-close{display:none}

@media (max-width:1150px){
  .nav-menu-btn{display:inline-flex}
  /* sem JS: o menu fica visivel como lista simples abaixo da barra */
  #site-menu{position:static;flex-direction:column;align-items:stretch;gap:8px;flex:0 0 auto;width:100%;border-top:1px solid var(--linha);padding:14px 0 8px;order:3}
  /* paginas de CSS misto (planos, gestao) herdam .nav-links{margin-left:14px}
     do franco-lp.css, que recuava os links do painel. Zeramos aqui. */
  #site-menu .nav-links{margin-left:0}
  .site-nav-in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px}
  .site-nav.is-scrolled .site-nav-in{height:auto}
  .nav-links{flex-direction:column;gap:2px}
  .nav-links a{padding:12px 4px;font-size:17px;border-bottom:1px solid var(--linha)}
  .nav-links a[aria-current="page"],.nav-links a[aria-current="location"]{border-bottom-color:var(--linha)}
  .nav-entrar{margin:10px 0 0;width:100%}
  /* com JS: o menu vira painel de tela inteira, escondido ate abrir */
  html.js #site-menu{display:none}
  html.js .site-nav-in{flex-wrap:nowrap;height:var(--nav-h);padding:0 var(--gutter)}
  /* painel absoluto ancorado ao .site-nav (sticky): o backdrop-filter do nav
     criava bloco de contencao e prendia um position:fixed ao cabecalho.
     top:100% desce o painel para baixo da barra; fundo OPACO. */
  html.js #site-menu[data-open]{display:flex;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 64px);height:calc(100dvh - 64px);z-index:80;background:#061A20;padding:72px var(--gutter) 32px;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);justify-content:flex-start}
  html.js #site-menu[data-open] .nav-links a{font-size:20px}
  html.js #site-menu[data-open] .nav-panel-close{display:inline-flex;position:absolute;top:14px;right:var(--gutter);width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-full);border:1px solid var(--linha-forte);background:transparent;color:var(--creme);font-size:16px;cursor:pointer}
}

/* ===== secoes ===== */
.blk{padding:var(--secao) 0}
/* home unica: ritmo editorial mais longo (extensao no padrao navigare, uma pagina so). So a home; subpaginas mantem o --secao padrao. */
body[data-page="home"]{--secao:200px}
.blk.deep2{background:var(--deep2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.blk.creme{background:var(--creme);color:var(--pet)}
.blk.creme .intro,.blk.creme p{color:var(--sobre-claro)}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.sec-head{max-width:760px;margin-bottom:var(--respiro)}
.blk h2,.sec-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.12;margin-top:12px}
.blk h2 .em,.sec-head h2 .em{color:var(--verde);font-style:normal}
.blk.creme h2 .em{color:var(--vesc)}
.intro{font-size:16.5px;color:var(--txt3);max-width:680px;margin-top:14px}
.apoio{font-size:16px;color:var(--txt2);max-width:680px;margin-top:12px}
.blk.creme .apoio{color:var(--sobre-claro)}

/* ===== hero de produto ===== */
.phero{position:relative;padding:calc(var(--secao) - 8px) 0 var(--secao);overflow:hidden;background:radial-gradient(120% 90% at 80% 12%,rgba(74,222,128,.10),transparent 60%),linear-gradient(180deg,#0a2530,var(--deep))}
.phero .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.phero h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(32px,4.4vw,54px);line-height:1.08;margin:14px 0 14px}
.phero .lead{font-size:19px;color:var(--txt2);margin-bottom:12px;max-width:640px}
.phero .sup{font-size:15.5px;color:var(--txt3);max-width:560px}

/* ===== cartoes escuros genericos ===== */
.card{border:1px solid var(--linha);border-radius:var(--r-lg);padding:24px;background:rgba(255,255,255,.02)}
.card h3{font-size:17px;margin-bottom:8px;font-family:var(--font-sans);font-weight:600}
.card p{font-size:14.5px;color:var(--txt3)}
.blk.creme .card{border-color:#E4DECF;background:#fff}
.blk.creme .card p{color:var(--sobre-claro-2)}

/* grades */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:var(--respiro);align-items:stretch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--respiro)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--respiro)}

/* ===== ficha ilustrativa (cartao escuro) ===== */
/* padding-bottom reservado (>=52px) para o selo absoluto nao cobrir o texto */
.ficha{position:relative;border:1px solid var(--linha);border-radius:var(--r-lg);background:rgba(9,33,41,.7);padding:26px 24px 52px;max-width:520px}
.ficha .ficha-head{border-bottom:1px solid var(--linha);padding-bottom:14px;margin-bottom:14px}
.ficha .ficha-head .titulo{font-family:var(--font-serif);font-size:20px;line-height:1.2}
.ficha .ficha-head .titulo .num{font-family:var(--font-mono);font-size:15px;color:var(--txt2)}
.ficha .ficha-head .fonte{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--txt4);margin-top:8px;line-height:1.5}
.ficha .sub-lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt4);margin:16px 0 8px}
.ficha .tags{display:flex;flex-wrap:wrap;gap:8px}
.ficha .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--linha);font-size:13.5px;color:var(--txt2)}
.ficha .row:last-of-type{border-bottom:0}
.ficha .row .prova{font-family:var(--font-mono);font-size:11px;color:var(--txt4);white-space:nowrap}
.ficha .num{font-family:var(--font-mono)}
.ficha .parecer{margin-top:16px;border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.07);border-radius:var(--r-md);padding:16px}
.ficha .parecer .lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);font-weight:700;margin-bottom:8px}
.ficha .parecer p{font-size:14px;color:var(--txt);line-height:1.5}
.ficha .parecer .assin{font-family:var(--font-mono);font-size:11px;color:var(--txt3);margin-top:10px}
.ficha .selo{position:absolute;right:14px;bottom:12px}
/* tag longa (ex.: "Comportamento de pagamento...") quebra dentro do cartao
   em TODAS as larguras, inclusive na ficha compacta da #plataforma no desktop */
.ficha .tag{white-space:normal}

/* tags de estado (pilula, com texto) */
.tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:var(--r-full);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tag.ok{background:rgba(74,222,128,.16);color:var(--verde)}
.tag.amb{background:rgba(251,191,36,.16);color:var(--amb)}
.tag.bad{background:rgba(248,113,113,.18);color:#F6A9A9}
.tag.neutro{background:rgba(245,242,234,.10);color:var(--txt3)}

/* selo de ilustracao (pilula) */
.selo{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt4);border:1px solid var(--linha);border-radius:var(--r-full);padding:4px 12px;display:inline-block;background:rgba(6,26,32,.6)}
.blk.creme .selo{color:var(--sobre-claro-2);border-color:#CFC8B8;background:transparent}
.legenda{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--txt4);margin-top:12px}
.blk.creme .legenda{color:var(--sobre-claro-2)}

/* reduced-motion: cabecalho nao encolhe e botoes nao transicionam */
@media (prefers-reduced-motion:reduce){
  .site-nav,.site-nav-in,.btn{transition:none}
}

/* ===== fontes ===== */
.fonte-card h3{font-family:var(--font-serif);font-weight:400;font-size:20px;margin-bottom:8px}

/* ===== pilha de camadas · variante em linha ===== */
.pilha{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:var(--respiro)}
.pilha .camada{flex:1 1 170px;border:1px solid var(--linha);border-radius:var(--r-md);background:rgba(255,255,255,.02);padding:14px 14px;min-width:150px}
.pilha .camada .cn{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--verde);font-weight:700}
.pilha .camada .ct{font-family:var(--font-sans);font-weight:600;font-size:14px;margin:4px 0 4px}
.pilha .camada p{font-size:12.5px;color:var(--txt3);line-height:1.4}
.pilha .seta{align-self:center;color:var(--verde);font-size:18px;flex:0 0 auto}

/* ===== telas ilustradas (nota) ===== */
.tela{position:relative;border:1px solid var(--linha);border-radius:var(--r-lg);background:rgba(9,33,41,.7);padding:20px 20px 52px}
.tela .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:14px;color:var(--txt2)}
.tela .row:last-child{border-bottom:0}
.tela .lab{font-family:var(--font-mono);color:var(--cinza);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tela .bolha{background:rgba(6,26,32,.6);border:1px solid var(--linha);border-radius:var(--r-md);padding:10px 12px;font-size:13.5px;color:var(--txt2);margin:8px 0}
.tela .bolha.eu{background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.3)}
.tela .selo{position:absolute;right:12px;bottom:10px}
.tela .alertas{margin-top:12px;display:grid;gap:8px}
.tela .alerta{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--txt2);border-top:1px solid var(--linha);padding-top:10px}
.tela .alerta .dot{width:8px;height:8px;border-radius:50%;background:var(--amb);margin-top:5px;flex:0 0 auto}

/* ===== planos (cartoes claros + tabela) ===== */
.planos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--respiro);align-items:stretch}
.plano{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid rgba(11,42,51,.14);border-radius:var(--r-lg);padding:28px 22px 24px;color:var(--sobre-claro)}
.plano.rec{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde) inset}
.plano .rec-tag{position:absolute;top:-12px;left:22px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--verde);color:var(--pet);padding:5px 12px;border-radius:var(--r-full)}
.plano .nome{font-family:var(--font-serif);font-size:26px;color:var(--pet);font-weight:400}
.plano .preco{font-family:var(--font-mono);font-size:24px;color:var(--pet);font-weight:500;line-height:1.1;margin:2px 0 8px}
.plano .preco .un{font-size:13px;color:var(--sobre-claro-2);font-weight:400}
.plano ul{list-style:none;display:grid;gap:7px;margin:4px 0 18px}
.plano li{font-size:14px;color:var(--sobre-claro);padding-left:18px;position:relative;line-height:1.4}
.plano li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--verde)}
.plano li .num{font-family:var(--font-mono);color:var(--pet)}
.plano li.avulsos{color:var(--sobre-claro-2);font-size:13px}
.plano .btn{width:100%;margin-top:auto}

.tabela-wrap{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.comparativa{width:100%;min-width:560px;border-collapse:collapse;background:#fff;border:1px solid rgba(11,42,51,.14);border-radius:var(--r-md);font-size:14px;color:var(--sobre-claro)}
table.comparativa th,table.comparativa td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(11,42,51,.10)}
table.comparativa thead th{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--pet);background:rgba(11,42,51,.04)}
table.comparativa thead th:first-child{position:sticky;left:0;z-index:2;background:#fff}
table.comparativa tbody th[scope="row"]{font-weight:600;color:var(--pet);background:#fff;position:sticky;left:0;z-index:1}
table.comparativa .grupo th{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--pet);background:#EEF0F1;font-weight:600;position:sticky;left:0;z-index:1}
table.comparativa .grupo td{background:#EEF0F1}
table.comparativa .col-plus{background:rgba(74,222,128,.10)}
table.comparativa thead th.col-plus{background:rgba(74,222,128,.18)}
table.comparativa .ok{color:var(--vesc);font-weight:700}
table.comparativa .num-dif{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--pet)}
table.comparativa tr:last-child th,table.comparativa tr:last-child td{border-bottom:none}
@media (max-width:820px){table.comparativa th[scope=row],table.comparativa th[scope=rowgroup],table.comparativa thead th:first-child{max-width:150px;min-width:130px;white-space:normal}table.comparativa td,table.comparativa thead th:not(:first-child){min-width:104px}}
.tabela-nota{margin:18px 0 0;text-align:center;font-size:14px;color:var(--txt3);line-height:1.5}
.tabela-nota a{color:var(--verde);font-weight:600}

/* ===== acordeao FAQ ===== */
.faq{margin-top:var(--respiro);display:grid;gap:12px;max-width:820px}
.faq details{border:1px solid var(--linha);border-radius:var(--r-md);background:rgba(255,255,255,.02);padding:0 22px}
.blk.creme .faq details{border-color:#E4DECF;background:#fff}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;font-size:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--font-mono);color:var(--verde);font-size:12px;margin-right:12px}
.blk.creme .faq summary .n{color:var(--vesc)}
.faq summary:after{content:"+";color:var(--verde);font-size:20px;line-height:1}
.blk.creme .faq summary:after{color:var(--vesc)}
.faq details[open] summary:after{content:"\2013"}
.faq .ans{padding:0 0 18px;color:var(--txt3);font-size:15px;line-height:1.6}
.blk.creme .faq .ans{color:var(--sobre-claro)}
.faq .ans p+p{margin-top:8px}

/* ===== faixa de ponte ===== */
.ponte{padding:44px 0 24px}
.ponte p{text-align:center;font-size:16.5px;color:var(--txt3);max-width:820px;margin:0 auto}

/* ===== acao final ===== */
.final{background:linear-gradient(180deg,#0a2530,var(--deep));padding:var(--secao) 0}
.final .wrap{text-align:center}
.final h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,4vw,46px);line-height:1.1;margin-bottom:8px}
.final .sub{color:var(--txt3);font-size:16px;max-width:520px;margin:14px auto 0}

/* ===== rodape ===== */
footer.site-footer{background:var(--deep);border-top:1px solid var(--linha);padding:56px 0 28px;font-size:13px;color:var(--txt3)}
.ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:34px}
.fabout{color:var(--txt3);font-size:14px;max-width:360px;margin-top:12px;line-height:1.55}
.fcol .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt4);margin-bottom:12px}
.fcol a{display:flex;align-items:center;min-height:44px;padding:5px 0;color:var(--txt2)}
.fcol a:hover{color:var(--verde)}
.frod{border-top:1px solid var(--linha);padding-top:22px}
.frod .flinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px}
.frod .flinks a{display:inline-flex;align-items:center;min-height:44px;color:var(--txt2)}
.frod .flinks a:hover{color:var(--verde)}
.frod .aviso{max-width:900px;line-height:1.6;color:var(--txt3)}
.frod .dados{margin-top:12px;font-size:12px;color:var(--txt4);line-height:1.6}

/* rodape minimo (campanha) */
footer.min-footer{background:var(--deep);border-top:1px solid var(--linha);padding:30px 0;font-size:12.5px;color:var(--txt3)}
footer.min-footer .flinks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
footer.min-footer .flinks a{display:inline-flex;align-items:center;min-height:44px}
footer.min-footer a{color:var(--txt2)}
footer.min-footer a:hover{color:var(--verde)}
footer.min-footer .aviso{line-height:1.6;color:var(--txt4)}

/* ===== modais legais ===== */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(6,26,32,.72);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.is-open{display:flex}
.modal{position:relative;width:min(720px,100%)}
.modal.modal-wide{width:min(860px,100%)}
.modal,.modal.modal-wide{max-height:86vh;overflow:auto;background:#0C2E38;border:1px solid var(--linha);border-radius:var(--r-lg);padding:32px;box-shadow:0 30px 80px rgba(6,26,32,.5)}
.modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--linha);background:transparent;color:var(--creme);cursor:pointer;font-size:14px}
.modal-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
.modal-title{font-family:var(--font-serif);font-weight:400;font-size:30px;margin:10px 0 6px;line-height:1.1}
.modal-title em{color:var(--verde)}
.modal-sub{font-size:13px;color:var(--txt4);margin-bottom:18px}
.modal-body-prose h4{font-size:15px;margin:18px 0 6px;color:var(--creme)}
.modal-body-prose h5{font-size:14px;margin:16px 0 6px;color:var(--creme)}
.modal-body-prose p,.modal-body-prose li{font-size:14px;color:var(--txt2);line-height:1.55}
.modal-body-prose ul,.modal-body-prose ol{padding-left:20px;margin:8px 0 14px}
.modal-body-prose li{margin-bottom:6px}
.modal-body-prose a{color:var(--verde);text-decoration:underline}
.modal-body-prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:12px 0 18px;font-size:13px}
.modal-body-prose th,.modal-body-prose td{min-width:132px;padding:10px 12px;border:1px solid var(--linha);text-align:left;vertical-align:top;color:var(--txt2)}
.modal-body-prose th{background:rgba(74,222,128,.09);color:var(--creme);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.modal-body-prose strong{color:var(--creme)}
.modal-body-prose .legal-version-note{margin-top:26px;padding-top:16px;border-top:1px solid var(--linha);font-size:13px;color:var(--txt3)}

/* modal "Agendar demonstracao" (Franco Gestao): form sobrio, coerente com .btn/.card */
.modal-overlay[hidden]{display:none}
#modal-demo .modal{max-width:520px}
#form-gestao{margin-top:6px}
.form-linha{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-linha label{font-size:13px;color:var(--txt3)}
.form-linha input{width:100%;min-height:44px;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--linha-forte);background:rgba(255,255,255,.04);color:var(--txt);font-family:var(--font-sans);font-size:16px}
.form-linha input::placeholder{color:var(--txt4)}
.form-linha input:focus{outline:none;border-color:var(--verde)}
#form-gestao .btn.p{width:100%;margin-top:4px}
.form-aviso{font-size:13px;color:var(--txt4);line-height:1.5;margin-top:14px}
.form-aviso a{color:var(--verde);text-decoration:underline}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:var(--creme);color:var(--pet);padding:12px 18px;border-radius:var(--r-md);font-size:14px;z-index:110;transition:.25s;pointer-events:none;max-width:90vw}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ===== campanha /leitura/ ===== */
.camp-top{position:sticky;top:0;z-index:40;background:rgba(6,26,32,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.camp-top .wrap{height:56px;display:flex;align-items:center}
.camp-hero{padding:34px 0 26px;background:radial-gradient(120% 90% at 80% 10%,rgba(74,222,128,.10),transparent 60%),linear-gradient(180deg,#0a2530,var(--deep))}
.camp-hero h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,8vw,40px);line-height:1.1;margin:12px 0}
.camp-hero .apoio{font-size:16px;color:var(--txt2);margin-top:10px}
.camp-sec{padding:34px 0}
.camp-sec.deep2{background:var(--deep2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.camp-sec h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(22px,6vw,30px);line-height:1.14}
.camp-ficha-img{width:100%;height:auto;max-width:420px;margin:12px auto 0;border-radius:var(--r-lg)}
.camp-motivos{display:grid;gap:16px;margin-top:18px}
.camp-motivo h2{font-family:var(--font-serif);font-weight:400;font-size:19px;margin-bottom:4px}
.camp-motivo p{font-size:14.5px;color:var(--txt3);line-height:1.5}
.camp-preco{font-family:var(--font-mono);font-size:26px;color:var(--verde);font-weight:500}
.camp-acao{display:grid;gap:12px;margin-top:18px}
.camp-acao .btn.p{width:100%;font-size:16px}
.camp-acao .link-wa{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;font-size:15px}

/* ===== responsivo ===== */
@media (max-width:900px){
  :root{--gutter:24px;--secao:64px}
  /* o ritmo editorial longo (--secao:200px) vale so no desktop; no celular a
     home volta ao respiro padrao das outras paginas. */
  body[data-page="home"]{--secao:64px}
  .phero .cols{grid-template-columns:1fr}
  .final .wrap{text-align:center}
}
@media (max-width:820px){
  .grid2,.grid3,.grid4,.jornada,.planos-grid,.pilha{grid-template-columns:minmax(0,1fr)}
  .pilha{flex-direction:column}
  .pilha .seta{transform:rotate(90deg)}
  .ftop{grid-template-columns:1fr;gap:26px}
  /* no celular a ficha vira lista vertical: tags e provas podem quebrar */
  .ficha .tag{white-space:normal}
  .ficha .row .prova{white-space:normal}
}
@media (max-width:560px){
  .portas .btn{width:100%}
}

/* ===================================================================
   HOME · blocos proprios (hero com foto, linha do tempo, cartoes de
   produto, pilha de camadas completa, prova). Usam so os tokens do
   sistema; nada de itálico, numeros em Geist Mono.
   =================================================================== */

/* texto tecnico de apoio no hero */
.phero .tech{font-size:14.5px;color:var(--txt3);max-width:600px;margin-top:16px;line-height:1.5}

/* acoes de resumo (ex.: bloco Franco Gestao) */
.resumo-acoes{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* pilha de camadas · variante completa (empilhada de baixo p/ cima) + tabela */
.tec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;margin-top:var(--respiro)}
.pilha-v{display:flex;flex-direction:column-reverse;gap:8px}
.pilha-v .camada{border:1px solid var(--linha);border-radius:var(--r-md);background:rgba(255,255,255,.02);padding:14px 16px;transition:border-color .2s,background .2s}
.pilha-v .camada:hover,.pilha-v .camada:focus-within,.pilha-v .camada:focus{border-color:var(--verde);background:rgba(74,222,128,.06);outline:none}
.pilha-v .camada .top{display:flex;align-items:baseline;gap:10px}
.pilha-v .camada .cn{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--verde);font-weight:700}
.pilha-v .camada .ct{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--txt)}
.pilha-v .camada .desc{font-size:13.5px;color:var(--txt3);line-height:1.45;margin-top:5px}
.pilha-v .camada:hover .desc,.pilha-v .camada:focus-within .desc,.pilha-v .camada:focus .desc{color:var(--txt)}

/* overflow:visible para a <caption> (fora do border-box) nao ser cortada */
.tab-ia{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--linha);border-radius:var(--r-md);overflow:visible}
.tab-ia caption{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt4);padding:0 0 10px}
.tab-ia th,.tab-ia td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha);line-height:1.4}
.tab-ia thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--verde);background:rgba(74,222,128,.06)}
.tab-ia tbody th{font-weight:600;color:var(--txt);font-family:var(--font-sans);font-size:13px}
.tab-ia td{color:var(--txt3)}
.tab-ia td.franco{color:var(--txt);background:rgba(74,222,128,.05)}
.tab-ia thead th.franco{background:rgba(74,222,128,.12)}
.tab-ia tr:last-child th,.tab-ia tr:last-child td{border-bottom:0}
.tec-fecho{margin-top:24px;font-family:var(--font-serif);font-size:22px;color:var(--txt);line-height:1.25;max-width:760px}

/* por que agora */
.porque{display:grid;gap:16px;max-width:760px;margin-top:var(--respiro)}
.porque p{font-size:16.5px;color:var(--txt2);line-height:1.55}

/* botoes do cabecalho.
   .nav-bar-ctas = na BARRA (fora do painel recolhivel): "Falar com a Franco"
   fica visivel em qualquer largura; "Acessar plataforma" (.nav-desk-only) so
   no desktop. .nav-ctas = DENTRO do painel (#site-menu): so aparece no menu
   recolhido (<=1150px), listando os dois botoes. */
.nav-bar-ctas{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-ctas{display:none;gap:10px}
.nav-ctas .btn,.nav-bar-ctas .btn{min-height:44px;padding:10px 16px;font-size:14px;white-space:nowrap}

/* plataforma: telas ilustradas que linkam para a pagina do produto */
.ilus{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:var(--respiro);align-items:start}
/* #plataforma: telas ilustradas nao-clicaveis, cada uma com legenda de uma frase */
.ilu-fig{margin:0;display:flex;flex-direction:column;gap:14px}
.ilu-fig .ficha,.ilu-fig .tela{max-width:none;padding-bottom:66px}
.ilu-fig figcaption{font-size:14.5px;color:var(--txt3);line-height:1.45}

/* sobre nos: manifesto + compromissos + linha da empresa (faixa creme) */
.manifesto p{font-size:17px;line-height:1.6;max-width:760px;margin-top:16px}
.sobre-comp{margin-top:64px}
.compromissos{margin-top:var(--respiro)}
.compromisso-card h3{font-family:var(--font-serif);font-weight:400;font-size:20px;margin-bottom:8px;color:var(--txt)}
.blk.creme .compromisso-card h3{color:var(--pet)}
.empresa-linha{margin-top:48px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--sobre-claro-2);line-height:1.6}

@media (max-width:1150px){
  /* "Acessar plataforma" sai da barra e passa a viver no painel */
  .nav-desk-only{display:none}
  .nav-bar-ctas{margin-left:auto;gap:8px}
  .nav-menu-btn{margin-left:8px}
  /* painel recolhido lista os 7 itens + os DOIS botoes, em coluna */
  #site-menu .nav-ctas{display:flex;flex-direction:column;align-items:stretch;margin-top:12px;margin-left:0;width:100%}
  html.js #site-menu[data-open] .nav-ctas{margin-top:14px}
  .nav-ctas .btn{width:100%}
}
/* larguras estreitas: encolhe barra e botoes sem perder o alvo de 44px */
@media (max-width:420px){
  html.js .site-nav-in{padding-left:12px;padding-right:12px}
  .nav-bar-ctas{gap:6px}
  .nav-bar-ctas .btn{padding:8px 10px;font-size:12px}
  .nav-menu-btn{padding:8px 8px;margin-left:6px;gap:6px}
  .logo{gap:7px}
  .logo .word{font-size:17px}
}
/* ate 360px: so o icone do menu (o nome acessivel "Menu" continua no texto,
   escondido por font-size) e o logo vira so o quadrado F; sem isso a barra
   exige ~352px e a pagina rola de lado a 320px (reflow WCAG 1.4.10) */
@media (max-width:360px){
  .logo .word{display:none}
  .nav-menu-btn{font-size:0;gap:0;min-width:44px;justify-content:center}
  .tab-ia th,.tab-ia td{padding:10px 8px;font-size:13px}
}
@media (max-width:820px){
  .tec-grid{grid-template-columns:minmax(0,1fr)}
}