/* =============================================================================
   persona.css — o visual das PÁGINAS DE PERSONA redesenhadas (`instancias/<slug>.html` com
   `<body class="persona marca-<slug>">`) e, por derivação, da landing de cada instância.

   POR QUE UMA FOLHA À PARTE, e não mais uma camada do `comercial.css`: a porta e as páginas
   ainda não redesenhadas continuam no tema espacial (escuro, ouro), e esta folha é o tema CLARO
   da persona — fundo branco, texto grafite, um acento só. Ela é carregada DEPOIS do
   `comercial.css` e fica FORA de `@layer`, então vence qualquer regra em camada sem
   `!important`; e tudo aqui é escopado por `body.persona`, então página que não a declara não
   muda um pixel.

   A COR DA MARCA é fixa por instância e mora num lugar só, a tabela `body.marca-<slug>` logo
   abaixo — a página comercial e a landing derivada leem a mesma linha. A classe também vale fora
   do `<body>` (`.marca-<slug>`): a porta pinta cada card com a cor da página para onde ele leva.
   Lá só o `--m` vale nos dois temas, porque o escuro deriva os outros tokens no `<body>`. O par
   `body.marca-x, .marca-x` não se encurta: sozinho, `.marca-x` perde do `body.persona` no
   próprio `<body>`. Cada marca declara:
     --m        o acento (fundo do botão principal, destaques, faixa do contato)
     --m-ink    o texto SOBRE o acento (contraste AA conferido com --m)
     --m-texto  o acento usado como TEXTO sobre branco (AA ≥ 4.5:1)
     --m-suave  o fundo lavado (selos, caixas de destaque)
     --m-linha  a borda tingida
     --m-fundo  o fundo escuro da faixa "Como funciona", puxado para o tom da marca
     --m-grifo  o marca-texto do título (default --m-linha: acento escuro atrás de texto escuro
                não se lê; só a marca de acento claro grifa com --m)

   A landing derivada (`comercial.py landing`) copia esta folha para
   `landing/_comum/static/landing/persona.css` como qualquer asset referenciado; o
   `landing.local.css` da instância, se existir, continua carregado e só redeclara variável do
   tema espacial — aqui ele não pesa. Zero estilo inline: a landing tem CSP.

   CLARO E ESCURO, como o sistema: a página segue o aparelho (`prefers-color-scheme`) sem JS
   nenhum — é o "Sistema" do seletor. O seletor Claro/Escuro/Sistema vem no `<nav>` canônico da
   pasta comercial (`_dashboard_html.seletor_tema`; na landing, ao lado do "Entrar", traduzido),
   e o `landing.js` grava a escolha em `m3Theme` (a chave das páginas do
   sistema fora do shell, mesmo domínio) e marca o `<html>` como o sistema marca: `.dark` ou
   `data-bs-theme="light"`. O escuro só troca os tokens `--p-*`; os da marca derivam de `--m`
   por `color-mix`, então a tabela abaixo continua sendo a única linha por instância.
   ============================================================================= */

body.persona{
  --m:#f2a900; --m-ink:#1a1407; --m-texto:#8a5a00;
  --m-suave:#fff7e0; --m-linha:#f1d58a; --m-fundo:#17181c;
  --p-fundo:#ffffff; --p-fundo2:#f6f7f9; --p-txt:#16181d; --p-mut:#5a6270;
  --p-linha:#e4e7ec; --p-sombra:0 1px 2px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.08);
  --m-grifo:var(--m-linha); --p-nav:rgba(255,255,255,.92);
  --p-largura:1120px;
  /* vw, e não %: o mesmo valor em qualquer profundidade (o menu do nav o usa como margem negativa). */
  --p-gutter:max(20px, calc((100vw - var(--p-largura)) / 2));
}
body.marca-construtora, .marca-construtora{--m:#f2a900; --m-ink:#1a1407; --m-texto:#8a5a00;
  --m-suave:#fff7e0; --m-linha:#f1d58a; --m-fundo:#17181c; --m-grifo:#f2a900}
body.marca-educacaobasica, .marca-educacaobasica{--m:#c2410c; --m-ink:#fff; --m-texto:#c2410c;
  --m-suave:#fff3eb; --m-linha:#fbcfb3; --m-fundo:#2a140b}
body.marca-educacaosuperior, .marca-educacaosuperior{--m:#1d4ed8; --m-ink:#fff; --m-texto:#1d4ed8;
  --m-suave:#eef3ff; --m-linha:#c3d3fb; --m-fundo:#0d1a3a}
body.marca-escolalivre, .marca-escolalivre{--m:#0f7a55; --m-ink:#fff; --m-texto:#0f7a55;
  --m-suave:#e9f7f1; --m-linha:#b3e3cf; --m-fundo:#0b2a20}
body.marca-osc, .marca-osc{--m:#c0264b; --m-ink:#fff; --m-texto:#b0213f;
  --m-suave:#fdedf1; --m-linha:#f4c0cc; --m-fundo:#2e0d16}
body.marca-startup, .marca-startup{--m:#0b7a93; --m-ink:#fff; --m-texto:#0a6f86;
  --m-suave:#e8f6f9; --m-linha:#b0dde8; --m-fundo:#0a2730}
body.marca-estetica, .marca-estetica{--m:#a8456b; --m-ink:#fff; --m-texto:#963d5f;
  --m-suave:#fbeef3; --m-linha:#efc3d4; --m-fundo:#2c0f1b}
body.marca-supermercado, .marca-supermercado{--m:#2e7d32; --m-ink:#fff; --m-texto:#2a6f2e;
  --m-suave:#edf7ee; --m-linha:#bfe0c1; --m-fundo:#0e2410}
body.marca-publico, .marca-publico{--m:#2f4a73; --m-ink:#fff; --m-texto:#2f4a73;
  --m-suave:#eef2f8; --m-linha:#c9d4e6; --m-fundo:#0f1a2b}
body.marca-porta{--m:#f5c542; --m-ink:#1a1407; --m-texto:#8a5a00;
  --m-suave:#fff7e0; --m-linha:#f1d58a; --m-fundo:#0b1020; --m-grifo:#f5c542}

/* O escuro, duas vezes o mesmo bloco: pelo aparelho (sem escolha explícita de claro) e pela
   escolha explícita (`html.dark`). CSS não reaproveita bloco entre seletor e media query. */
@media (prefers-color-scheme:dark){
  html:not([data-bs-theme="light"]) body.persona{color-scheme:dark;
    --p-fundo:#101216; --p-fundo2:#171a20; --p-txt:#eceef2; --p-mut:#a4abb7; --p-linha:#2a2f39;
    --p-sombra:0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4); --p-nav:rgba(16,18,22,.88);
    --m-texto:color-mix(in srgb, var(--m) 60%, #fff); --m-suave:color-mix(in srgb, var(--m) 14%, #101216);
    --m-linha:color-mix(in srgb, var(--m) 45%, #101216); --m-grifo:color-mix(in srgb, var(--m) 55%, #101216);
    --m-fundo:color-mix(in srgb, var(--m) 12%, #0b0c0f)}
}
html.dark body.persona{color-scheme:dark;
  --p-fundo:#101216; --p-fundo2:#171a20; --p-txt:#eceef2; --p-mut:#a4abb7; --p-linha:#2a2f39;
  --p-sombra:0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4); --p-nav:rgba(16,18,22,.88);
  --m-texto:color-mix(in srgb, var(--m) 60%, #fff); --m-suave:color-mix(in srgb, var(--m) 14%, #101216);
  --m-linha:color-mix(in srgb, var(--m) 45%, #101216); --m-grifo:color-mix(in srgb, var(--m) 55%, #101216);
  --m-fundo:color-mix(in srgb, var(--m) 12%, #0b0c0f)}

/* --- base ------------------------------------------------------------------ */
body.persona{
  color:var(--p-txt); background:var(--p-fundo); background-image:none;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body.persona a{color:var(--m-texto)}
body.persona h1, body.persona h2, body.persona h3{color:var(--p-txt); letter-spacing:-.02em; line-height:1.15}
body.persona h2{font-size:clamp(28px,3.4vw,40px); font-weight:800; margin:0 0 14px}
body.persona h3{font-size:19px; font-weight:700; margin:0 0 8px}
body.persona p{margin:0 0 14px}
body.persona b{color:inherit}
body.persona .overline{
  display:inline-block; margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--m-texto);
}
body.persona .lead{max-width:720px; margin:0 0 36px; font-size:18px; color:var(--p-mut)}
body.persona :focus-visible{outline:3px solid var(--m); outline-offset:3px}
body.persona main{max-width:none; margin:0; padding:0}
body.persona section{padding:96px var(--p-gutter); scroll-margin-top:72px}
body.persona .pv-cinza{background:var(--p-fundo2)}
@media (max-width:640px){
  body.persona section{padding-block:64px}
  body.persona .lead{font-size:17px}
}

/* --- botões ---------------------------------------------------------------- */
body.persona .pv-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:10px;
  font-size:16px; font-weight:700; line-height:1.2; text-decoration:none;
  color:var(--m-ink); background:var(--m); border:2px solid var(--m);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.persona .pv-btn:hover{filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(16,24,40,.14); text-decoration:none; color:var(--m-ink)}
body.persona .pv-btn::after{content:"\2192"; font-weight:700}
body.persona .pv-btn.pv-sec{color:var(--p-txt); background:transparent; border-color:var(--p-linha)}
body.persona .pv-btn.pv-sec:hover{border-color:var(--p-txt); color:var(--p-txt); box-shadow:none}
body.persona .pv-btn.pv-sec::after{content:"\2193"}
body.persona .pv-acoes{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px}

/* --- nav ------------------------------------------------------------------- */
body.persona nav{
  position:sticky; top:0; z-index:50; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:0 var(--p-gutter); background:var(--p-nav); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--p-linha);
}
body.persona nav .brand{
  display:inline-flex; align-items:center; gap:10px; padding:14px 0; margin-right:12px;
  font-size:15px; font-weight:800; letter-spacing:.08em; color:var(--p-txt); background:none;
}
body.persona nav .brand img{width:30px; height:30px; border-radius:50%;
  box-shadow:0 0 0 3px var(--m)}
body.persona nav .brand:hover{background:none; color:var(--p-txt)}
/* O menu entre personas (só na página comercial; a landing o remove) vira uma faixa fina acima
   da barra principal: navegação do site, separada da navegação da página. */
body.persona nav .menu{
  order:-1; flex:0 0 calc(100% + 2 * var(--p-gutter)); display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center;
  margin:0 calc(-1 * var(--p-gutter)); padding:6px var(--p-gutter);
  background:var(--p-fundo2); border-bottom:1px solid var(--p-linha);
}
body.persona nav .menu a{font-size:12.5px; padding:3px 10px; border-radius:6px; color:var(--p-mut); letter-spacing:0}
body.persona nav .menu a:hover{color:var(--p-txt); background:var(--p-linha)}
body.persona nav .menu a[aria-current="page"]{color:var(--m-ink); background:var(--m); font-weight:700}
body.persona nav .sp{flex:1}
body.persona nav .ancoras{
  order:1; flex-basis:auto; display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  margin:0; padding:0; border:0;
}
body.persona nav .ancoras a{display:inline-flex; align-items:center; line-height:1.25;
  font-size:14.5px; font-weight:500; padding:8px 10px; border-radius:8px;
  color:var(--p-mut); letter-spacing:0}
body.persona nav .ancoras a:hover{color:var(--p-txt); background:var(--p-fundo2); text-decoration:none}
body.persona nav .ancoras a[href="#contato"]{
  margin-left:8px; font-weight:700; color:var(--m-ink); background:var(--m);
}
body.persona nav .ancoras a[href="#contato"]:hover{filter:brightness(1.06); color:var(--m-ink); background:var(--m)}
/* Só na landing: o portal e o chip "Entrar" (landing.css) vão para depois das âncoras. */
body.persona nav .chip-portal{order:2; padding:6px 8px; font-size:14px; font-weight:500; color:var(--p-mut)}
body.persona nav .chip-portal:hover{color:var(--p-txt)}
body.persona nav .login-pop{order:3; margin-left:6px}
body.persona nav .chip-login{
  padding:8px 16px; border-radius:8px; font-size:14px; letter-spacing:0;
  color:var(--p-txt); background:var(--p-fundo); border:1.5px solid var(--p-linha);
}
body.persona nav .chip-login:hover{color:var(--p-txt); background:var(--p-fundo2); border-color:var(--p-txt); filter:none}
body.persona nav .login-painel{background:var(--p-fundo); border-color:var(--p-linha); box-shadow:var(--p-sombra)}
body.persona nav .login-titulo{color:var(--m-texto)}
body.persona nav .login-form label{color:var(--p-mut)}
body.persona nav .login-form input[type=text], body.persona nav .login-form input[type=password]{
  color:var(--p-txt); background:var(--p-fundo2); border-color:var(--p-linha)}
body.persona nav .login-form input:focus{outline-color:var(--m)}
body.persona nav .login-enviar{color:var(--m-ink); background:var(--m); border-radius:8px}
body.persona nav .login-esqueci{color:var(--p-mut)}
body.persona nav .login-erro{color:#b42318; background:#fef3f2; border-color:#fecdca}
/* O seletor de tema (só na landing; nasce `hidden` e o `landing.js` o mostra). O ícone do botão é o
   da escolha atual, que o JS marca em `html[data-m3-tema]` — sem marca, "Sistema". Ele vem
   depois do "Entrar" no HTML (`_bloco_tema`), e a ordem visual segue a do teclado. */
body.persona nav .tema-pop{order:3; position:relative; margin-left:6px}
body.persona nav .tema-chip{display:grid; place-items:center; width:38px; height:38px; padding:0;
  border-radius:8px; cursor:pointer; color:var(--p-txt); background:var(--p-fundo); border:1.5px solid var(--p-linha)}
body.persona nav .tema-chip:hover{border-color:var(--p-txt)}
body.persona nav .tema-ico{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
body.persona nav .tema-chip .tema-ico{display:none}
html:not([data-m3-tema]) body.persona nav .tema-chip .tema-ico-sistema,
html[data-m3-tema="auto"] body.persona nav .tema-chip .tema-ico-sistema,
html[data-m3-tema="light"] body.persona nav .tema-chip .tema-ico-claro,
html[data-m3-tema="dark"] body.persona nav .tema-chip .tema-ico-escuro{display:block}
body.persona nav .tema-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:150px;
  padding:6px; border-radius:10px; background:var(--p-fundo); border:1px solid var(--p-linha); box-shadow:var(--p-sombra)}
body.persona nav .tema-menu button{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border:0; border-radius:6px; font:inherit; font-size:14px; text-align:left; cursor:pointer;
  color:var(--p-txt); background:none}
body.persona nav .tema-menu button:hover{background:var(--p-fundo2)}
body.persona nav .tema-menu button[aria-pressed="true"]{color:var(--m-texto); font-weight:700}
/* Na landing o nav ganha o seletor de tema, o chip "Entrar" e, quando licenciado, os links do portal: as âncoras
   secundárias saem antes, para a barra caber numa linha. */
body.persona nav:has(.login-pop) .ancoras a:is([href="#duvidas"],[href="#quem-somos"],[href="#planos"]){display:none}
@media (max-width:1300px){
  body.persona nav:has(.login-pop) .ancoras a:not([href="#contato"]){display:none}
}
@media (max-width:980px){
  body.persona nav .ancoras a:not([href="#contato"]){display:none}
}
@media (max-width:640px){
  body.persona nav{padding:0 16px}
  body.persona nav .menu{flex-basis:calc(100% + 32px); margin:0 -16px; padding:6px 16px}
  body.persona nav .brand{font-size:13px}
  body.persona nav .ancoras a[href="#contato"]{margin-left:0; padding:7px 12px; font-size:13.5px}
  body.persona nav .chip-portal{padding:0 6px 8px; font-size:12.5px}
  /* No celular a marca fica só no logo: a linha de cima é logo, "Fale conosco" e "Entrar". */
  body.persona nav:has(.login-pop) .brand{font-size:0; gap:0}
  body.persona nav:has(.login-pop) .chip-portal{order:4}
  body.persona nav .chip-login{padding:6px 12px; font-size:13.5px}
  body.persona nav .tema-chip{width:34px; height:34px}
}

/* --- hero ------------------------------------------------------------------ */
body.persona .pv-hero{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:56px; align-items:center;
  padding:72px var(--p-gutter) 80px;
  background:
    radial-gradient(700px 420px at 92% 18%, var(--m-suave), transparent 70%),
    linear-gradient(var(--p-fundo), var(--p-fundo));
}
body.persona .pv-selo{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 22px; padding:6px 14px 6px 8px;
  border-radius:999px; font-size:14px; font-weight:600; color:var(--p-txt);
  background:var(--m-suave); border:1px solid var(--m-linha);
}
body.persona .pv-selo::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--m);
  box-shadow:0 0 0 4px var(--p-fundo)}
body.persona .pv-hero h1{
  margin:0 0 20px; font-size:clamp(36px,4.6vw,58px); font-weight:800; line-height:1.06; letter-spacing:-.03em;
}
body.persona .pv-marca-texto{
  background:linear-gradient(transparent 62%, var(--m-grifo) 62%, var(--m-grifo) 90%, transparent 90%);
  padding:0 2px;
}
body.persona .pv-sub{max-width:560px; font-size:19px; color:var(--p-mut)}
body.persona .pv-garantias{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 0; padding:0; list-style:none;
  font-size:14.5px; color:var(--p-mut);
}
body.persona .pv-garantias li{display:flex; align-items:center; gap:8px}
body.persona .pv-garantias li::before, body.persona .pv-lista li::before{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--m) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
body.marca-construtora .pv-garantias li::before, body.marca-construtora .pv-lista li::before,
body.marca-porta .pv-garantias li::before, body.marca-porta .pv-lista li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%231a1407' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* A tela do produto numa moldura de navegador; a segunda tela flutua por cima, no canto. */
body.persona .pv-vitrine{position:relative; isolation:isolate; margin:0; padding:0 0 48px 0}
body.persona .pv-janela{
  margin:0; border-radius:14px; overflow:hidden; background:var(--p-fundo);
  border:1px solid var(--p-linha); box-shadow:var(--p-sombra), 0 30px 60px -20px rgba(16,24,40,.25);
}
body.persona .pv-janela::before{
  content:""; display:block; height:30px; border-bottom:1px solid var(--p-linha);
  background:
    radial-gradient(circle at 18px 15px, #ff5f57 5px, transparent 5.5px),
    radial-gradient(circle at 36px 15px, #febc2e 5px, transparent 5.5px),
    radial-gradient(circle at 54px 15px, #28c840 5px, transparent 5.5px),
    var(--p-fundo2);
}
body.persona .pv-janela img{display:block; width:100%; height:auto}
body.persona .pv-vitrine .pv-flutua{
  position:absolute; left:-36px; bottom:0; width:62%;
  transform:rotate(-1.5deg); border-color:var(--m-linha);
}
body.persona .pv-vitrine::after{
  content:""; position:absolute; z-index:-1; right:-18px; top:-18px; width:46%; height:60%;
  border-radius:18px; background:var(--m); opacity:.9;
}
@media (max-width:980px){
  body.persona .pv-hero{grid-template-columns:minmax(0,1fr); gap:40px; padding-top:48px}
  body.persona .pv-vitrine{max-width:640px}
  body.persona .pv-vitrine .pv-flutua{left:auto; right:-8px; width:58%}
}

/* --- faixa de formatos/fatos ------------------------------------------------- */
body.persona .pv-fatos{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0 var(--p-gutter);
  list-style:none; background:var(--p-fundo2); border-block:1px solid var(--p-linha);
}
body.persona .pv-fatos li{padding:28px 24px; border-left:1px solid var(--p-linha)}
body.persona .pv-fatos li:first-child{border-left:0; padding-left:0}
body.persona .pv-fatos b{display:block; margin-bottom:4px; font-size:24px; font-weight:800; color:var(--p-txt)}
body.persona .pv-fatos span{font-size:14.5px; color:var(--p-mut)}
@media (max-width:860px){
  body.persona .pv-fatos{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.persona .pv-fatos li{border-left:0; padding:20px 12px 20px 0}
}

/* --- linhas de recurso: texto + tela, alternando o lado ----------------------- */
body.persona .pv-cabeca{max-width:760px; margin-bottom:56px}
body.persona .pv-recurso{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:center; margin:0 0 88px;
}
body.persona .pv-recurso:last-child{margin-bottom:0}
body.persona .pv-recurso:nth-of-type(even) .pv-recurso-texto{order:2}
body.persona .pv-rotulo{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--m-texto); margin:0 0 10px}
body.persona .pv-recurso h3{font-size:clamp(22px,2.4vw,28px); font-weight:800; margin:0 0 16px}
body.persona .pv-hoje{
  margin:0 0 20px; padding:12px 16px; border-radius:10px; font-size:15.5px; color:var(--p-mut);
  background:var(--p-fundo2); border-left:3px solid var(--p-linha);
}
body.persona .pv-hoje b{color:var(--p-txt)}
body.persona .pv-lista{margin:0; padding:0; list-style:none}
body.persona .pv-lista li{display:flex; gap:12px; align-items:flex-start; margin:0 0 12px; font-size:16px}
body.persona .pv-lista li::before{margin-top:3px}
@media (max-width:900px){
  body.persona .pv-recurso{grid-template-columns:minmax(0,1fr); gap:28px; margin-bottom:64px}
  body.persona .pv-recurso:nth-of-type(even) .pv-recurso-texto{order:0}
}

/* --- como funciona: a faixa escura -------------------------------------------- */
body.persona .pv-escuro{background:var(--m-fundo); color:#e7e9ee}
body.persona .pv-escuro h2, body.persona .pv-escuro h3{color:#fff}
body.persona .pv-escuro .overline{color:var(--m)}
body.marca-educacaobasica .pv-escuro .overline, body.marca-escolalivre .pv-escuro .overline,
body.marca-startup .pv-escuro .overline, body.marca-osc .pv-escuro .overline,
body.marca-educacaosuperior .pv-escuro .overline,
body.marca-estetica .pv-escuro .overline, body.marca-supermercado .pv-escuro .overline{color:var(--m-linha)}
/* Acento escuro demais até para o `--m-linha` derivado no tema escuro: um tom claro fixo, nos dois temas. */
body.marca-publico .pv-escuro .overline{color:color-mix(in srgb, var(--m) 40%, #fff)}
body.persona .pv-escuro a{color:#fff; text-decoration:underline; text-underline-offset:3px}
body.persona .pv-escuro .lead{color:#b4bac6}
body.persona .pv-passos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0;
  list-style:none; counter-reset:passo;
}
body.persona .pv-passos li{
  counter-increment:passo; position:relative; padding:28px 26px 26px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
body.persona .pv-passos li::before{
  content:counter(passo); display:grid; place-items:center; width:40px; height:40px; margin-bottom:18px;
  border-radius:10px; font-size:18px; font-weight:800; color:var(--m-ink); background:var(--m);
}
body.persona .pv-passos .pv-prazo{display:block; margin-bottom:4px; font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#9aa1ad}
body.persona .pv-passos h3{margin-bottom:8px}
body.persona .pv-passos p{margin:0; font-size:15.5px; color:#c3c8d2}
body.persona .pv-metodo{
  max-width:860px; margin:36px 0 0; padding:20px 24px; border-radius:12px; font-size:15.5px;
  color:#c3c8d2; border:1px dashed rgba(255,255,255,.22);
}
body.persona .pv-metodo b{color:#fff}
@media (max-width:860px){body.persona .pv-passos{grid-template-columns:minmax(0,1fr)}}

/* --- persona sem tela de produto (estetica): hero de uma coluna e recursos em grade ------ */
body.persona .pv-hero-so{grid-template-columns:minmax(0,860px)}
body.persona .pv-recursos-grade{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px}
@media (max-width:900px){body.persona .pv-recursos-grade{grid-template-columns:minmax(0,1fr)}}

/* --- cenários (plano landingcenarios) ---------------------------------------------
   O `comercial.css` oculta todo `svg.vsvg` (decisão de 2026-09-10) e pinta o SVG com a paleta
   escura do dashboard; aqui o gráfico de cenários volta a aparecer e lê as cores da PERSONA. */
body.persona .pv-cenarios svg.vsvg{
  display:block; width:100%; height:auto; --txt:var(--p-txt); --muted:var(--p-mut); --line:var(--p-linha)}
body.persona .pv-cenarios figure{margin:0 0 32px; max-width:860px}
body.persona .pv-cenarios .pv-explica{display:grid; gap:14px; max-width:760px}
body.persona .pv-cenarios .pv-explica p{margin:0; color:var(--p-mut)}
body.persona .pv-cenarios .pv-explica b{color:var(--p-txt)}

/* --- planos ----------------------------------------------------------------- */
body.persona .pv-planos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
body.persona .pv-planos-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.persona .pv-plano{
  padding:32px; border-radius:16px; background:var(--p-fundo); border:1px solid var(--p-linha);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
body.persona .pv-plano.pv-destaque{border:2px solid var(--m); box-shadow:var(--p-sombra)}
body.persona .pv-plano .pv-para{font-size:15px; color:var(--p-mut); margin:0 0 18px}
body.persona .pv-plano h3{font-size:24px; font-weight:800}
body.persona .pv-tag{display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px;
  vertical-align:middle; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--m-ink); background:var(--m)}
body.persona .pv-incluido{
  margin-top:20px; padding:28px 32px; border-radius:16px; background:var(--p-fundo);
  border:1px solid var(--p-linha);
}
body.persona .pv-incluido h3{font-size:17px; margin-bottom:16px}
body.persona .pv-incluido .pv-lista{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 32px}
body.persona .pv-nota{margin:20px 0 0; font-size:15px; color:var(--p-mut)}
@media (max-width:820px){
  body.persona .pv-planos, body.persona .pv-planos-3, body.persona .pv-incluido .pv-lista{grid-template-columns:minmax(0,1fr)}
}

/* --- parceiro fundador -------------------------------------------------------- */
body.persona .pv-fundador{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center;
  padding:44px; border-radius:20px; background:var(--m-suave); border:1px solid var(--m-linha);
}
body.persona .pv-fundador h2{font-size:clamp(24px,2.8vw,32px)}
body.persona .pv-fundador .lead{margin-bottom:0; font-size:17px}
@media (max-width:860px){body.persona .pv-fundador{grid-template-columns:minmax(0,1fr); padding:28px}}

/* --- dúvidas: acordeão sem JS --------------------------------------------------- */
body.persona .pv-faq{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 20px; align-items:start}
body.persona .pv-faq details{border-radius:12px; background:var(--p-fundo); border:1px solid var(--p-linha)}
body.persona .pv-faq details[open]{border-color:var(--m-linha); box-shadow:0 4px 14px rgba(16,24,40,.06)}
body.persona .pv-faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px;
  cursor:pointer; list-style:none; font-size:16.5px; font-weight:700;
}
body.persona .pv-faq summary::-webkit-details-marker{display:none}
body.persona .pv-faq summary::after{
  content:"+"; flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font-size:20px; font-weight:500; line-height:1; color:var(--p-txt); background:var(--p-fundo2);
  transition:transform .2s ease;
}
body.persona .pv-faq details[open] summary::after{transform:rotate(45deg); color:var(--m-ink); background:var(--m)}
body.persona .pv-faq details p{margin:0; padding:0 20px 20px; color:var(--p-mut)}
@media (max-width:820px){body.persona .pv-faq{grid-template-columns:minmax(0,1fr)}}

/* --- quem somos (copy injetada pelo `dashboard.py quemsomos`) ------------------------
   O miolo vem pronto (overline, h2, parágrafos soltos, sem invólucro): o título flutua à
   esquerda e os parágrafos correm à direita dele. */
body.persona #quem-somos{display:flow-root}
body.persona #quem-somos .overline, body.persona #quem-somos h2{float:left; clear:left; width:40%}
body.persona #quem-somos h2{font-size:clamp(24px,2.8vw,32px)}
body.persona #quem-somos .lead{max-width:none; margin:0 0 16px 48%; font-size:16.5px}
@media (max-width:860px){
  body.persona #quem-somos .overline, body.persona #quem-somos h2{float:none; width:auto}
  body.persona #quem-somos .lead{margin-left:0}
}

/* --- contato: a faixa na cor da marca ------------------------------------------- */
body.persona .pv-contato{background:var(--m); color:var(--m-ink); text-align:center}
body.persona .pv-contato h2{color:var(--m-ink); font-size:clamp(30px,4vw,46px); max-width:820px; margin:0 auto 16px}
body.persona .pv-contato .overline{color:var(--m-ink); opacity:.75}
body.persona .pv-contato .lead{margin:0 auto 32px; color:var(--m-ink); opacity:.85}
body.persona .pv-contato .pv-acoes{justify-content:center}
body.persona .pv-contato .pv-btn{color:var(--m); background:var(--m-ink); border-color:var(--m-ink)}
body.persona .pv-contato .pv-btn:hover{color:var(--m)}
body.marca-construtora .pv-contato .pv-btn, body.marca-porta .pv-contato .pv-btn{color:#fff;
  background:#16181d; border-color:#16181d}
body.marca-construtora .pv-contato .pv-btn:hover, body.marca-porta .pv-contato .pv-btn:hover{color:#fff}
body.persona .pv-email{font-size:17px; font-weight:700; color:var(--m-ink); text-decoration:underline;
  text-underline-offset:4px}
body.persona .pv-email:hover{color:var(--m-ink)}

/* --- rodapé (o `<footer>` canônico de `_dashboard_html.rodape()`) -------------------- */
body.persona footer{
  max-width:none; margin:0; padding:40px var(--p-gutter) 48px; text-align:center;
  font-size:14px; color:var(--p-mut); background:var(--p-fundo); border-top:1px solid var(--p-linha);
}
body.persona footer .brandicon img{width:40px; border-radius:50%}
body.persona footer .brandtext{margin:10px 0 0}
body.persona footer .brandtext b{color:var(--p-txt)}
body.persona footer .atualizada{text-align:center; font-size:12px; color:#8a919c; margin-top:6px}

/* --- a porta (`comercial/index.html`, `<body class="persona marca-porta porta">`) -------------
   Gerada pelo `dashboard.py painel`. Usa os blocos da persona e acrescenta três peças dela: o hero
   escuro com as telas de três segmentos, os cards de segmento (cada um na cor da página para
   onde leva) e a faixa do setor público, que fala com outro leitor. */
body.porta .pt-hero{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:48px; align-items:center;
  padding:80px var(--p-gutter) 96px; color:#fff;
  background:
    radial-gradient(640px 420px at 86% 18%, rgba(245,197,66,.18), transparent 70%),
    radial-gradient(560px 400px at 6% 100%, rgba(96,120,255,.16), transparent 70%),
    #0b1020;
}
body.porta .pt-hero h1{
  margin:0 0 20px; color:#fff; font-size:clamp(34px,3.7vw,50px); font-weight:800; line-height:1.08;
  letter-spacing:-.03em;
}
body.porta .pt-hero .pv-marca-texto{background:none; padding:0; color:var(--m)}
body.porta .pt-hero .pv-selo{color:#e6e9f0; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
body.porta .pt-hero .pv-selo::before{box-shadow:0 0 0 4px rgba(245,197,66,.2)}
body.porta .pt-hero .pv-sub{color:#c3c8d2}
body.porta .pt-hero .pv-garantias{color:#c3c8d2}
body.porta .pt-hero .pv-btn.pv-sec{color:#fff; border-color:rgba(255,255,255,.32)}
body.porta .pt-hero .pv-btn.pv-sec:hover{color:#fff; border-color:#fff}
body.porta .pt-mosaico{position:relative; isolation:isolate; padding:40px 0 84px 32px}
body.porta .pt-tela{position:relative; border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.65)}
body.porta .pt-tela figcaption{
  position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px 5px 8px; border-radius:999px; font-size:13px; font-weight:700; color:#16181d;
  background:rgba(255,255,255,.95); box-shadow:0 4px 14px rgba(0,0,0,.2);
}
body.porta .pt-tela:nth-child(1) figcaption{left:auto; right:12px}
body.porta .pt-tela figcaption::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--m)}
body.porta .pt-tela:nth-child(1){width:88%; margin-left:auto}
body.porta .pt-tela:nth-child(2){position:absolute; left:0; bottom:0; width:50%; transform:rotate(-2deg)}
body.porta .pt-tela:nth-child(3){position:absolute; right:-18px; top:-6px; width:36%; transform:rotate(2.5deg)}
@media (max-width:980px){
  body.porta .pt-hero{grid-template-columns:minmax(0,1fr); gap:32px; padding-top:56px}
  body.porta .pt-mosaico{max-width:640px; padding-left:16px}
}
@media (max-width:640px){
  body.porta .pt-mosaico{padding:24px 0 64px}
  body.porta .pt-tela:nth-child(1){width:100%}
  body.porta .pt-tela:nth-child(2){width:62%; left:-6px}
  body.porta .pt-tela:nth-child(3){display:none}
  body.porta .pt-tela:nth-child(1) figcaption{top:42px; bottom:auto}
}

body.porta .pt-grupo{margin:0 0 44px}
body.porta .pt-grupo-titulo{
  display:flex; align-items:center; gap:14px; margin:0 0 20px; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--p-mut);
}
body.porta .pt-grupo-titulo::after{content:""; flex:1; height:1px; background:var(--p-linha)}
body.porta .pt-segs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
body.porta .pt-seg{
  display:flex; flex-direction:column; overflow:hidden; border-radius:14px; text-decoration:none;
  color:var(--p-txt); background:var(--p-fundo); border:1px solid var(--p-linha); box-shadow:var(--p-sombra);
  transition:transform .15s ease, border-color .15s ease;
}
body.porta .pt-seg:hover{transform:translateY(-3px); border-color:var(--m); color:var(--p-txt); text-decoration:none}
/* O castor do segmento sobre um halo na cor da página; o fundo puxa a cor para o tema da porta. */
body.porta .pt-seg-castor{
  display:flex; align-items:flex-end; justify-content:center; height:184px; padding-top:18px; overflow:hidden;
  background:
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--m) 38%, transparent) 0 46%, transparent 47%),
    color-mix(in srgb, var(--m) 9%, var(--p-fundo));
  border-bottom:4px solid var(--m);
}
body.porta .pt-seg-castor img{display:block; height:160px; width:auto; transform-origin:50% 100%;
  transition:transform .25s ease}
body.porta .pt-seg:hover .pt-seg-castor img{transform:translateY(-4px) scale(1.05)}
body.porta .pt-seg-texto{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px}
body.porta .pt-seg h3{font-size:18px; margin:0 0 8px}
body.porta .pt-seg p{flex:1; margin:0 0 16px; font-size:15px; color:var(--p-mut)}
/* O texto do link na cor do segmento, puxada para o tom do texto: lê-se nos dois temas. */
body.porta .pt-seg-ir{font-size:14.5px; font-weight:700; color:color-mix(in srgb, var(--m) 55%, var(--p-txt))}
body.porta .pt-seg-ir::after{content:"\2192"; display:inline-block; margin-left:8px; transition:transform .15s ease}
body.porta .pt-seg:hover .pt-seg-ir::after{transform:translateX(3px)}
@media (max-width:640px){
  body.porta .pt-seg{flex-direction:row}
  body.porta .pt-seg-castor{flex:0 0 112px; height:auto; min-height:150px; padding-top:12px;
    border-bottom:0; border-right:4px solid var(--m)}
  body.porta .pt-seg-castor img{height:120px}
}
body.porta .pt-publico{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px;
  margin:8px 0 0; padding:24px 28px; border-radius:14px; text-decoration:none; color:var(--p-txt);
  background:var(--p-fundo2); border:1px dashed var(--p-linha); transition:border-color .15s ease;
}
body.porta .pt-publico:hover{border-color:var(--p-mut); color:var(--p-txt); text-decoration:none}
body.porta .pt-publico > div{flex:1 1 320px}
body.porta .pt-publico-castor{flex:none; display:grid; place-items:end center; width:88px; height:88px;
  overflow:hidden; border-radius:50%; background:color-mix(in srgb, var(--p-mut) 16%, var(--p-fundo))}
body.porta .pt-publico-castor img{display:block; height:80px; width:auto}
body.porta .pt-publico h3{margin:0 0 4px; font-size:18px}
body.porta .pt-publico p{max-width:640px; margin:0; font-size:15px; color:var(--p-mut)}

@media (prefers-reduced-motion:reduce){
  body.persona .pv-btn, body.persona .pv-faq summary::after{transition:none}
  body.persona .pv-vitrine .pv-flutua{transform:none}
  body.porta .pt-seg, body.porta .pt-seg-castor img, body.porta .pt-seg-ir::after{transition:none}
  body.porta .pt-tela:nth-child(n){transform:none}
}

/* ── Landing longa (F7 do acervoargumentos__landingargumentos): sumário fixo e os blocos que
   vieram das subpáginas e do acervo. A página é gerada (`comercial.py landing --slug`). ── */
body.persona .pv-sumario{position:sticky; top:var(--p-nav-h, 64px); z-index:5; background:var(--p-fundo, #fff);
  border-bottom:1px solid var(--p-linha); padding:10px 0; overflow-x:auto; scrollbar-width:none}
body.persona .pv-sumario::-webkit-scrollbar{display:none}
body.persona .pv-sumario ol{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 auto; padding:0 24px; max-width:1180px;
  list-style:none; white-space:nowrap; font-size:14px}
body.persona .pv-sumario a{color:var(--p-mut); text-decoration:none}
body.persona .pv-sumario a:hover, body.persona .pv-sumario a:focus-visible{color:var(--p-txt);
  text-decoration:underline}
/* Desktop quebra em duas linhas; no celular a faixa rola de lado (sem barra nativa). */
@media (max-width:720px){body.persona .pv-sumario ol{flex-wrap:nowrap}}
/* Um menu só: na página com sumário, o cabeçalho fica com a marca, o «Fale conosco» e o tema — as
   âncoras de seção moram no sumário. (A `.ancoras` continua no HTML: o `.cta` da landing deriva dela.) */
body.persona:has(.pv-sumario) nav .ancoras a:not([href="#contato"]){display:none}
body.persona section[id]{scroll-margin-top:calc(var(--p-nav-h, 64px) + 96px)}
body.persona .pv-cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px; margin-top:24px}
body.persona .pv-cartao{border:1px solid var(--p-linha); border-radius:12px; padding:18px 20px}
body.persona .pv-cartao h3{margin:0 0 6px; font-size:17px; line-height:1.3}
body.persona .pv-cartao p{margin:0; color:var(--p-mut); line-height:1.55}
body.persona .pv-tabela{overflow-x:auto; margin-top:20px}
body.persona .pv-tabela table{width:100%; border-collapse:collapse; font-size:15px}
body.persona .pv-tabela th, body.persona .pv-tabela td{text-align:left; vertical-align:top;
  padding:9px 10px; border-bottom:1px solid var(--p-linha)}
body.persona .pv-reflexao{margin-top:22px; padding:14px 18px; border-left:3px solid var(--m, currentColor);
  background:var(--p-fundo2)}
body.persona .pv-cumpre{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px 28px; margin-top:24px}
body.persona .pv-cumpre-modulo h3{margin:0 0 8px; font-size:17px}
body.persona .pv-franqueza{margin-top:22px}
body.persona .pv-franqueza dt{font-weight:700; margin-top:14px}
body.persona .pv-franqueza dd{margin:4px 0 0; color:var(--p-mut); line-height:1.55}