/* =========================================================
   SDIA · visual 2 · SITE (páginas públicas: início, planos, ajuda, entrar...)
   Títulos com serifa e componentes da página de apresentação.
   Vem depois do visual-2.css.
   ========================================================= */
:root { --font-display: var(--font-serifa); }
/* marca, números e telas de exemplo continuam na letra do sistema */
.brand b, .brand-name, .avatar, .kpi, .fact, .pcard .pp, .m-brand, .pwa-cab, .mock, .ilu, .pl .price, .steps li::before, .donut { --font-display: var(--font-body); }

/* ---------- títulos ---------- */
.hero.lp-hero h1, .sec-head h2, .final h2, .dest-txt h3, .extras-tit { font-family: var(--font-display); font-weight: 600; letter-spacing: -.018em; }
.hero.lp-hero h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; }
.sec-head h2, .final h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; }
.dest-txt h3 { letter-spacing: -.012em; }
.steps h3 { font-family: var(--font-body); }
/* a palavra em destaque: itálico vermelho no lugar do marca-texto */
.hero.lp-hero h1 mark, .sec-head h2 mark, .final h2 mark, .dest-txt h3 mark { color: var(--destaque); font-style: italic; font-weight: 500; }
.hero.lp-hero h1 mark::before, .sec-head h2 mark::before, .final h2 mark::before, .dest-txt h3 mark::before { display: none; }
/* sublinhado "à mão" do caderninho: no vermelho da marca (era azul) */
.grifo-mao { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 4, 90 12, 197 5' fill='none' stroke='%23e11d2a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); font-style: italic; font-weight: 500; }
.pl .price b { font-weight: 700; letter-spacing: -.02em; }

/* ---------- cabeçalho ---------- */
.lp-top .brand b { font-family: var(--font-body); font-weight: 800; }
.lp-nav a { font-weight: 500; }
.lp-nav a:hover { background: none; text-decoration: underline; text-underline-offset: 5px; }
.lp-top .plans-lnk { border: 0; background: none; box-shadow: none; font-weight: 600; }
.lp-top .plans-lnk:hover { background: none; text-decoration: underline; text-underline-offset: 5px; }
.lp-top .enter { background: var(--fg); border-color: var(--fg); color: var(--bg); box-shadow: none; }
.lp-top .enter:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); border-color: transparent; }

/* ---------- topo (hero) ---------- */
.hero.lp-hero { gap: var(--esp-16); padding-block: var(--esp-20) var(--esp-20); }
.hero.lp-hero::after { background: none !important; }
.hero.lp-hero::before { opacity: .55; }   /* a rede neural fica, mais discreta */
.hero-kicker { color: var(--muted); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-xs); margin-bottom: var(--esp-5); }
.hero.lp-hero .sub { margin-top: var(--esp-6); max-width: 46ch; }
.hero.lp-hero .ctas { align-items: center; gap: var(--esp-5); margin-top: var(--esp-8); }
.hero.lp-hero .ctas a.primary { height: 52px; padding: 0 var(--esp-6); border-radius: var(--raio-md); box-shadow: none; }
/* um botão só: a demonstração vira link */
.hero.lp-hero .ctas a.ghost { height: auto; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero.lp-hero .ctas a.ghost:hover { color: var(--accent); background: none; }
.hero.lp-hero .ctas a.ghost svg { display: none; }
/* as três garantias: uma linha de texto, sem "checks" verdes */
.hero.lp-hero .ticks { gap: 0; margin-top: var(--esp-5); font-weight: 500; }
.hero.lp-hero .ticks svg { display: none; }
.hero.lp-hero .ticks li:not(:last-child)::after { content: "·"; margin-inline: var(--esp-2); color: var(--muted); }

/* seletor de ramo e painel de exemplo */
.demo-rot { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.tipo { min-height: 34px; padding: 0 var(--esp-3); background: none; font-weight: 600; font-size: var(--fs-sm); }
.mock, .ilu { border-radius: var(--raio-lg); }
.mock { box-shadow: var(--sombra-3); }
.ilu { box-shadow: var(--sombra-1); }

/* ---------- seções: mais respiro, menos caixas ---------- */
.sec { padding-block: var(--esp-24); }
.sec-head { margin-bottom: var(--esp-12); }
.sec-head p { font-size: var(--fs-lg); }
.band { background: none; border-block: 0; border-top: 1px solid var(--line); }
.faixa-tom { background: var(--surface-2); border-block: 0; }
#antes-depois { border-top: 1px solid var(--line); }

/* recursos: os dois destaques de baixo sem moldura */
.dest-item:not(:first-child) { padding: 0; border: 0; border-radius: 0; background: none; }
.dest-item:first-child { padding-bottom: var(--esp-16); }
.dest { row-gap: var(--esp-16); }
.extras { margin-top: var(--esp-20); padding-top: var(--esp-12); }
.extras-tit { font-size: var(--fs-2xl); margin-bottom: var(--esp-8); }
.extras-lista { gap: var(--esp-8) var(--esp-12); }
.extras-lista .plan, .extras-lista .plan.emp, .extras-lista .plan.pro { color: var(--muted); border-color: var(--line); }

/* três passos: números em tinta, sem vermelho */
.steps li:last-child::before { border-color: var(--fg); background: var(--fg); color: var(--bg); }

/* segurança: lista simples, sem caixas nem selo verde */
.secu ul { gap: 0; }
.secu li { padding: var(--esp-5) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.secu li:last-child { border-bottom: 1px solid var(--line); }
.secu li .ic { width: 36px; height: 36px; background: none; border: 1px solid var(--line); color: var(--fg); box-shadow: none; }
.secu li .ic svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* planos: três colunas na mesma altura; o recomendado só tem a borda em tinta */
.pl { border-radius: var(--raio-lg); box-shadow: none; padding: var(--esp-8) var(--esp-6); }
.pl.hot { transform: none; margin: 0; inset: auto; top: 0; padding: var(--esp-8) var(--esp-6); background: var(--surface); border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.pl h3 { color: var(--fg) !important; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; }
.pl .tag { top: -11px; background: var(--fg); color: var(--bg); }
.pl a { border-radius: var(--raio-md); }

/* dúvidas: linhas, não caixinhas */
.faq { gap: 0; border-top: 1px solid var(--line); }
.faq details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.faq summary { padding: var(--esp-5) 0; border-radius: 0; font-weight: 600; font-size: var(--fs-md); }
.faq summary:hover { background: none; color: var(--accent); }
.faq details p { padding: 0 0 var(--esp-5); }

/* chamada final: bloco em tinta, com o único botão vermelho */
.final { border: 0; border-radius: var(--raio-lg); background: var(--fg); color: var(--bg); box-shadow: none; padding: var(--esp-16) var(--esp-12); }
.final h2 { color: var(--bg); }
.final p { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.final .ctas a.ghost { background: none; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); box-shadow: none; }
.final .ctas a.ghost:hover { border-color: var(--bg); }
.final .ctas a.primary { box-shadow: none; }
.final :focus-visible { outline-color: var(--bg); }

/* rodapé: o aplicativo para Windows desceu para cá */
.foot-app { display: flex; justify-content: center; padding-block: 0 var(--esp-6); }
.foot-app .pwa-btn { height: 40px; border: 0; background: none; box-shadow: none; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.foot-app .pwa-btn:hover { color: var(--fg); background: none; }

@media (max-width: 1000px) {
  .hero.lp-hero { gap: var(--esp-10); padding-block: var(--esp-12) var(--esp-16); }
  .sec { padding-block: var(--esp-16); }
  .sec-head { margin-bottom: var(--esp-8); }
  .final { padding: var(--esp-10) var(--esp-6); }
  .hero.lp-hero .ctas { gap: var(--esp-4); }
}
@media (max-width: 680px) { .tipo { min-height: 44px; } }
@media (max-width: 640px) {
  .hero.lp-hero .ticks { display: block; line-height: 1.7; }
  .hero.lp-hero .ticks li { display: inline; }
}

/* links dentro dos títulos de seção: tinta sublinhada (era o azul padrão do navegador) */
.sec-head a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sec-head a:hover { color: var(--accent); }
/* os três planos exatamente do mesmo tamanho */
.plans { align-items: stretch; }

/* =========================================================
   DEMAIS PÁGINAS PÚBLICAS (planos, ajuda, demonstração, segurança, termos, entrar, catálogo)
   ========================================================= */
/* títulos em caixa normal (eram em MAIÚSCULAS com letras afastadas) */
h1, .h1, body h2.h1, .pitch h2, .lock-card h2, .cmp h2, .closing h2, .dm-sec h2, .dm-closing h2, .dm-perfis h3, .tm-head h1, .tm-sum h2 { text-transform: none; letter-spacing: -.012em; font-weight: 600; }
h1 { line-height: 1.08; }
/* topo de Planos e da Demonstração (o da página inicial tem regra própria, .hero.lp-hero) */
.hero h1, .dm-hero h1 { font-size: clamp(32px, 4.6vw, 50px); }
/* a parte em destaque do título: itálico vermelho, como na página inicial */
h1 em, .h1 em, .dm-hero h1 em, .pitch h2 em { font-style: italic; font-weight: 500; color: var(--destaque); }
/* etiqueta acima do título: discreta, sem vermelho */
.eyebrow, .hero .eyebrow, .tm-head .eyebrow, .ct-top .eyebrow, .dm-eyebrow { color: var(--muted); letter-spacing: .14em; font-weight: 600; }

/* planos (página Planos): mesma sobriedade dos planos do início */
.pc { border-radius: var(--raio-lg); padding: var(--esp-8) var(--esp-6); }
.pc.hot { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); background: var(--surface); }
.pricing .pc h2 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg) !important; }   /* !important: a cor de cada plano vem escrita no próprio HTML (style=) */
.pc .tag { top: -11px; background: var(--fg); color: var(--bg); }
.pc .price { --font-display: var(--font-body); }
.pc .price b { font-weight: 700; letter-spacing: -.02em; }
.pc li svg { color: var(--muted); }
.pc li.inherit svg { color: var(--fg); }
.pc .cta { border-radius: var(--raio-md); }
.cmp h2, .closing h2 { font-size: clamp(24px, 3vw, 32px); }
.cmp thead th { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cmp thead th.hot { color: var(--fg); }
.cmp td.hot { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.yes { color: var(--fg); }
.closing { border-radius: var(--raio-lg); }

/* demonstração */
.dm-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.dm-ticks { gap: 0; }
.dm-ticks svg { display: none; }
.dm-ticks li:not(:last-child)::after { content: "·"; margin-inline: var(--esp-2); }

/* ajuda, segurança e termos: o quadro de resumo sem moldura vermelha nem degradê */
.tm-sum { border-color: var(--line); background: var(--surface); }


/* entrar: a aba escolhida em tinta e o convite da esquerda como botão simples (o vermelho fica no "Entrar") */
.auth-tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.pitch-cta.primary { background: none; color: var(--fg); border: 1px solid var(--fg); box-shadow: none; }
.pitch-cta.primary:hover { background: var(--fg); color: var(--bg); filter: none; }

/* alto contraste do Windows: o bloco final e o plano recomendado continuam se destacando */
@media (forced-colors: active) {
  .final { border: 1px solid CanvasText; }
  .pl.hot, .pc.hot { border-width: 2px; }
}
/* entrar: "Ver planos" e o botão de tema ficavam por cima do canto da aba "Criar conta" */
@media (min-width: 901px) { .auth-tabs { margin-top: var(--esp-6); } }
/* celular: enquanto o aviso de cookies está aberto, o rodapé ganha um respiro para os últimos links não ficarem cobertos */
@media (max-width: 680px) { body:has(.sd-cookies) { padding-bottom: 112px; } }
/* Planos em tela média: a descrição de cada plano reserva duas linhas, para preço e botão ficarem alinhados nos três */
@media (min-width: 901px) and (max-width: 1160px) { .pc .pub { min-height: 3em; } }