/*
 * Juntei — site público. Celular primeiro; sem fonte externa e sem JavaScript.
 * Depende de /assets/tokens.css (cópia de design/tokens.css).
 * CSP: nenhum style="" inline nem <style> nas páginas — tudo aqui.
 * Movimento: tudo desliga com prefers-reduced-motion (fim do arquivo).
 */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* âncora não fica atrás do cabeçalho fixo */
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: var(--altura-linha);
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: var(--altura-linha-titulo); margin: 0; text-wrap: balance; }
p { margin: 0; }
p, li { text-wrap: pretty; }

a { color: var(--cor-primaria-texto); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }

.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;
}
.pular {
  position: absolute; left: var(--esp-4); top: -4rem; z-index: 50;
  background: var(--cor-primaria); color: var(--cor-primaria-contraste);
  padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-sm);
}
.pular:focus { top: var(--esp-2); }

.conteudo { width: 100%; max-width: var(--largura-conteudo); margin-inline: auto; padding-inline: var(--esp-5); }
@media (min-width: 48rem) { .conteudo { padding-inline: var(--esp-8); } }

/* ── Botões (pílula, com leve "bounce") ───────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo-toque); padding: 0 var(--esp-5);
  border-radius: var(--raio-pilula); border: 1.5px solid transparent;
  font: inherit; font-weight: var(--peso-forte); text-decoration: none; white-space: nowrap;
  transition: transform 0.35s var(--mola), background-color var(--duracao), box-shadow var(--duracao);
}
.botao:hover { transform: translateY(-2px); text-decoration: none; }
.botao:active { transform: translateY(0) scale(0.97); }
.botao-primario { background: var(--cor-primaria); color: var(--cor-primaria-contraste); box-shadow: 0 6px 18px rgb(37 99 235 / 0.28); }
.botao-primario:hover { background: var(--cor-primaria-hover); box-shadow: 0 10px 24px rgb(37 99 235 / 0.34); }
.botao-acento { background: var(--cor-acento-suave); color: var(--cor-acento-texto); border-color: color-mix(in srgb, var(--cor-acento) 45%, transparent); }
.botao-acento:hover { background: color-mix(in srgb, var(--cor-acento) 18%, var(--cor-acento-suave)); }
.botao-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao-secundario:hover { background: var(--superficie-2); }
.botao-grande { min-height: 3.25rem; padding: 0 var(--esp-8); font-size: var(--texto-lg); }
.botao svg { width: 1.15em; height: 1.15em; }
.botao .seta { transition: transform 0.35s var(--mola); }
.botao:hover .seta { transform: translateY(2px); }

/* ── Cabeçalho ────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fundo) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 4rem; }
.marca { display: inline-flex; align-items: center; min-height: var(--alvo-toque); color: var(--cor-primaria-texto); text-decoration: none; border-radius: var(--raio-sm); }
.marca svg { height: 2rem; width: auto; }
.topo nav { display: none; }
.topo nav ul { display: flex; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
.topo nav a {
  display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--esp-3);
  color: var(--texto-suave); text-decoration: none; font-weight: var(--peso-semi); border-radius: var(--raio-pilula);
}
.topo nav a:hover { color: var(--texto); background: var(--superficie-2); }
.topo nav a[aria-current="page"] { color: var(--cor-primaria-texto); background: var(--cor-primaria-suave); }
.topo .botao { min-height: 2.5rem; }
@media (min-width: 60rem) {
  .topo nav { display: block; margin-left: auto; }
  .topo .acoes { margin-left: var(--esp-2); }
}

/* Logo inline: as letras herdam currentColor; as moedas usam o verde da marca. */
.moeda { fill: var(--cor-acento); }
.moeda-anel { fill: none; stroke: var(--cor-acento-borda); }

/* ══ CAPA ═════════════════════════════════════════════════════════════════ */
/* Cores próprias da capa, por tema (mesmo esquema do tokens.css: sistema + data-theme). */
:root {
  --capa-malha-1: rgb(59 118 246 / 0.20);
  --capa-malha-2: rgb(147 184 253 / 0.38);
  --capa-malha-3: rgb(16 185 129 / 0.16);
  --capa-topo: #f2f6ff;
  --capa-bolha-1: rgb(96 150 250 / 0.30);
  --capa-bolha-2: rgb(52 211 153 / 0.26);
  --capa-bolha-3: rgb(147 184 253 / 0.45);
  --capa-titulo-a: #2563eb;
  --capa-titulo-b: #047857;  /* verde-700: o 600 media 2,65:1 no fundo azulado do celular */
  --capa-sombra-celular: rgb(29 78 216 / 0.20);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --capa-malha-1: rgb(37 99 235 / 0.42);
    --capa-malha-2: rgb(30 58 138 / 0.60);
    --capa-malha-3: rgb(16 185 129 / 0.16);
    --capa-topo: #0d1830;
    --capa-bolha-1: rgb(59 118 246 / 0.28);
    --capa-bolha-2: rgb(16 185 129 / 0.20);
    --capa-bolha-3: rgb(96 150 250 / 0.22);
    --capa-titulo-a: #6096fa;
    --capa-titulo-b: #34d399;
    --capa-sombra-celular: rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  --capa-malha-1: rgb(37 99 235 / 0.42);
  --capa-malha-2: rgb(30 58 138 / 0.60);
  --capa-malha-3: rgb(16 185 129 / 0.16);
  --capa-topo: #0d1830;
  --capa-bolha-1: rgb(59 118 246 / 0.28);
  --capa-bolha-2: rgb(16 185 129 / 0.20);
  --capa-bolha-3: rgb(96 150 250 / 0.22);
  --capa-titulo-a: #6096fa;
  --capa-titulo-b: #34d399;
  --capa-sombra-celular: rgb(0 0 0 / 0.5);
}

.capa {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--esp-10) var(--esp-16);
  background:
    radial-gradient(56rem 34rem at 100% 0%, var(--capa-malha-1), transparent 62%),
    radial-gradient(40rem 30rem at 0% 95%, var(--capa-malha-2), transparent 62%),
    radial-gradient(26rem 20rem at 72% 92%, var(--capa-malha-3), transparent 66%),
    linear-gradient(180deg, var(--capa-topo), var(--fundo));
}
@media (min-width: 60rem) { .capa { padding-block: var(--esp-16) var(--esp-24); min-height: calc(100svh - 4rem); display: grid; align-items: center; } }

/* Bolhas orgânicas do fundo (decorativas) */
.bolha {
  position: absolute; z-index: -1; pointer-events: none; filter: blur(2px);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: bolha 18s ease-in-out infinite alternate;
}
.bolha-1 {
  width: 22rem; height: 22rem; right: -7rem; top: 2rem;
  background: linear-gradient(135deg, var(--capa-bolha-1), transparent 70%);
}
.bolha-2 {
  width: 14rem; height: 14rem; left: -5rem; bottom: 4rem; animation-duration: 22s;
  background: linear-gradient(45deg, var(--capa-bolha-2), transparent 72%);
}
.bolha-3 {
  width: 8rem; height: 8rem; left: 46%; top: -2.5rem; animation-duration: 15s;
  background: linear-gradient(200deg, var(--capa-bolha-3), transparent 75%);
}
@keyframes bolha {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg); }
  50%  { border-radius: 63% 37% 40% 60% / 55% 62% 38% 45%; transform: translate(-1rem, 1.25rem) rotate(18deg); }
  100% { border-radius: 38% 62% 55% 45% / 48% 36% 64% 52%; transform: translate(0.75rem, -0.75rem) rotate(-10deg); }
}

.capa .conteudo { display: grid; gap: var(--esp-12); align-items: center; }
@media (min-width: 60rem) { .capa .conteudo { grid-template-columns: 1.12fr 0.88fr; gap: var(--esp-10); } }

.capa-texto > * { animation: subir 0.8s var(--mola) both; }
.capa-texto > :nth-child(2) { animation-delay: 0.06s; }
.capa-texto > :nth-child(3) { animation-delay: 0.12s; }
.capa-texto > :nth-child(4) { animation-delay: 0.18s; }
.capa-texto > :nth-child(5) { animation-delay: 0.24s; }
.capa-texto > :nth-child(6) { animation-delay: 0.30s; }
@keyframes subir { from { opacity: 0; transform: translateY(1.5rem); } }

.selo {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: 0.375rem var(--esp-4) 0.375rem var(--esp-3); margin-bottom: var(--esp-6);
  background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--texto); border-radius: var(--raio-pilula); font-size: var(--texto-sm); font-weight: var(--peso-semi);
}
.selo::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cor-acento); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-acento) 22%, transparent);
}

.capa h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 3.9rem); font-weight: var(--peso-extra);
  letter-spacing: -0.035em; line-height: 1.04;
}
.capa h1 .linha { display: block; }
.capa h1 .destaque {
  color: var(--cor-primaria-texto);
  background: linear-gradient(90deg, var(--capa-titulo-a) 10%, var(--capa-titulo-b) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em; /* descendente do "j" não corta no clip */
}
.capa .lead { margin-top: var(--esp-6); font-size: var(--texto-lg); color: var(--texto-suave); max-width: 33rem; }
@media (min-width: 48rem) { .capa .lead { font-size: var(--texto-xl); } }
.capa .chamadas { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-8); }
@media (max-width: 29.99rem) { .capa .chamadas .botao { flex: 1 1 100%; } }

.selos { list-style: none; margin: var(--esp-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.selos li {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: 0.3rem var(--esp-3); border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--superficie) 60%, transparent); border: 1px solid var(--borda);
  font-size: var(--texto-sm); color: var(--texto-suave); font-weight: var(--peso-medio);
}
.selos svg { width: 1rem; height: 1rem; color: var(--cor-primaria-texto); flex: none; }

/* ── Palco do celular ─────────────────────────────────── */
.palco { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; padding-block: var(--esp-6); container-type: inline-size; }
.celular {
  position: relative; z-index: 1;
  width: 72%; margin-inline: auto; aspect-ratio: 9 / 17.6;
  padding: 0.6rem; border-radius: 2.9rem;
  background: linear-gradient(160deg, #2a3550, #0d1424);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.08) inset, var(--sombra-lg), 0 40px 80px var(--capa-sombra-celular);
  font-size: 3cqi; /* a tela escala com o palco: mesma proporção no celular e no desktop */
  animation: celular-entra 1s var(--mola) 0.15s both;
}
@container (min-width: 28rem) { .celular { width: 62%; font-size: 2.6cqi; } }
@keyframes celular-entra { from { opacity: 0; transform: translateY(3rem) scale(0.94) rotate(-2deg); } }

.celular-tela {
  position: relative; height: 100%; overflow: hidden; border-radius: 2.35rem;
  background: var(--fundo); color: var(--texto);
  display: flex; flex-direction: column;
}
.ilha { position: absolute; top: 0.6em; left: 50%; translate: -50% 0; width: 32%; height: 1.9em; border-radius: 1em; background: #05080f; z-index: 2; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 0.95em 1.9em 0; font-size: 0.95em; font-weight: var(--peso-forte); }
.status svg { width: 3.6em; height: 1em; }

.app { flex: 1; display: flex; flex-direction: column; gap: 0.95em; padding: 1.6em 1.15em 0; min-height: 0; }
.app-topo { display: flex; align-items: center; justify-content: space-between; }
.app-oi { font-size: 1em; color: var(--texto-suave); }
.app-oi strong { display: block; font-family: var(--fonte-titulo); font-size: 1.45em; color: var(--texto); }
.avatar { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); font-weight: var(--peso-forte); }

.saldo {
  border-radius: 1.4em; padding: 1.1em 1.2em; color: #fff;
  background:
    radial-gradient(12em 8em at 100% 0%, rgb(52 211 153 / 0.35), transparent 70%),
    linear-gradient(135deg, #3b76f6, #1d4ed8 60%, #1e40af);
  box-shadow: 0 0.8em 1.8em rgb(29 78 216 / 0.35);
}
.saldo-rotulo { font-size: 0.92em; opacity: 0.9; }
.saldo-valor {
  display: block; margin-top: 0.15em; font-family: var(--fonte-titulo); font-weight: var(--peso-extra);
  font-size: 2.15em; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.saldo-valor::after { content: "R$ 7.722,72"; }
.juntou {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.6em;
  padding: 0.3em 0.7em; border-radius: 999px; font-size: 0.88em; font-weight: var(--peso-forte);
  background: #d1fae5; color: #065f46; white-space: nowrap;
}
.juntou svg { width: 1em; height: 1em; }

.bancos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15em; }
.bancos li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75em; padding: 0.55em 0.2em; border-bottom: 1px solid var(--borda); }
.bancos li:last-child { border-bottom: 0; }
.bancos .nome { font-weight: var(--peso-semi); line-height: 1.2; white-space: nowrap; }
.bancos .nome small { display: block; font-size: 0.85em; font-weight: var(--peso-normal); color: var(--texto-suave); }
.bancos .valor { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.logo-banco { width: 2.4em; height: 2.4em; border-radius: 0.8em; display: grid; place-items: center; }
.logo-banco svg { width: 1.35em; height: 1.35em; }
.logo-banco-1 { background: linear-gradient(135deg, #3b76f6, #1e40af); }
.logo-banco-2 { background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
.logo-banco-3 { background: linear-gradient(135deg, #14b8a6, #0f766e); }

.abas { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.6em 0.6em 1.3em; border-top: 1px solid var(--borda); background: var(--superficie); }
.abas span { display: grid; justify-items: center; gap: 0.2em; font-size: 0.78em; color: var(--texto-suave); font-weight: var(--peso-semi); }
.abas svg { width: 1.6em; height: 1.6em; }
.abas .ativa { color: var(--cor-primaria-texto); }

/* Camadas que flutuam (vidro fosco) */
.flutua {
  position: absolute; z-index: 2;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--sombra-lg); border-radius: 1.5rem; color: var(--texto);
  font-size: clamp(10px, 2.9cqi, 14px);
}
.fatura {
  left: 0; top: 66%; width: min(40%, 13rem); padding: 0.85em;
  animation: entra-esq 0.9s var(--mola) 0.55s both, flutuar 6s ease-in-out 1.5s infinite;
}
.cartao-mini {
  aspect-ratio: 1.586; border-radius: 0.9em; padding: 0.75em 0.85em; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(10em 6em at 110% -10%, rgb(52 211 153 / 0.55), transparent 65%),
    linear-gradient(135deg, #1e3a8a, #2563eb);
}
.cartao-mini .chip { width: 1.9em; height: 1.4em; border-radius: 0.35em; background: linear-gradient(135deg, #e2e8f0, #94a3b8); }
.cartao-mini .numero { font-size: 0.85em; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.fatura-info { display: grid; gap: 0.35em; justify-items: start; margin-top: 0.7em; }
.fatura-info span { display: block; font-size: 0.8em; color: var(--texto-suave); }
.fatura-info strong { display: block; font-family: var(--fonte-titulo); font-size: 1.2em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vence { font-size: 0.75em; font-weight: var(--peso-forte); padding: 0.25em 0.6em; border-radius: 999px; background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); white-space: nowrap; }

.dica-flutuante {
  right: 0; bottom: 3%; width: min(52%, 16.5rem); padding: 0.9em 1em;
  display: grid; grid-template-columns: auto 1fr; gap: 0.75em; align-items: center;
  animation: entra-dir 0.9s var(--mola) 0.75s both, flutuar 7s ease-in-out 1.8s infinite reverse;
}
.dica-flutuante img { width: 2.9em; height: 2.9em; }
.dica-flutuante p { font-size: 0.92em; line-height: 1.35; }
.dica-flutuante strong { display: block; color: var(--cor-acento-texto); font-size: 0.9em; margin-bottom: 0.1em; }
.dica-flutuante em { font-style: normal; font-weight: var(--peso-forte); color: var(--cor-primaria-texto); white-space: nowrap; }

@keyframes entra-esq { from { opacity: 0; transform: translateX(-2rem) scale(0.9); } }
@keyframes entra-dir { from { opacity: 0; transform: translateX(2rem) scale(0.9); } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Saldo contando: inteiro registrado (@property) animado; reais e centavos montados por counter().
   Sem suporte a round()/mod(), fica o texto fixo acima (nunca mostra número errado). */
@property --saldo-reais { syntax: "<integer>"; inherits: false; initial-value: 7722; }
@property --saldo-cent { syntax: "<integer>"; inherits: false; initial-value: 72; }
@property --saldo-mil { syntax: "<integer>"; inherits: false; initial-value: 7; }
@property --saldo-resto { syntax: "<integer>"; inherits: false; initial-value: 722; }
@counter-style jt-tres { system: extends decimal; pad: 3 "0"; }
@counter-style jt-dois { system: extends decimal; pad: 2 "0"; }
@supports (width: round(down, 10px, 1px)) and (width: mod(10px, 3px)) {
  .saldo-valor {
    --saldo-reais: 7722; --saldo-cent: 72;
    --saldo-mil: round(down, var(--saldo-reais) / 1000, 1);
    --saldo-resto: mod(var(--saldo-reais), 1000);
    counter-reset: jt-mil var(--saldo-mil) jt-resto var(--saldo-resto) jt-cent var(--saldo-cent);
    animation: contar 1.8s var(--suave) 0.7s both;
  }
  .saldo-valor::after { content: "R$ " counter(jt-mil) "." counter(jt-resto, jt-tres) "," counter(jt-cent, jt-dois); }
}
@keyframes contar { from { --saldo-reais: 1000; --saldo-cent: 0; } }

/* ── Seções ───────────────────────────────────────────── */
.secao { padding-block: var(--esp-16); }
@media (min-width: 48rem) { .secao { padding-block: var(--esp-24); } }
.secao-alt { background: var(--superficie-2); }

.sobretitulo {
  display: inline-flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3);
  color: var(--cor-primaria-texto); font-size: var(--texto-sm); font-weight: var(--peso-extra);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sobretitulo::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cor-acento); }
.titulo-secao { font-size: var(--texto-2xl); font-weight: var(--peso-extra); letter-spacing: -0.02em; }
.lead-secao { margin-top: var(--esp-3); color: var(--texto-suave); font-size: var(--texto-lg); max-width: var(--largura-texto); }
.cabeca-secao { margin-bottom: var(--esp-10); }
@media (min-width: 48rem) { .titulo-secao { font-size: var(--texto-3xl); } }

/* ── Passos ───────────────────────────────────────────── */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); counter-reset: passo; }
@media (min-width: 48rem) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passo, .recurso {
  position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: var(--esp-6); box-shadow: var(--sombra);
  transition: transform 0.4s var(--mola), box-shadow var(--duracao);
}
.passo:hover, .recurso:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.passo { counter-increment: passo; }
.passo::before {
  content: counter(passo); position: absolute; top: var(--esp-5); right: var(--esp-5);
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--cor-acento); color: var(--cor-acento-contraste);
  font-family: var(--fonte-titulo); font-weight: var(--peso-extra); line-height: 1;
}
.icone {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--esp-4);
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; /* "blob" */
  background: var(--cor-primaria-suave); color: var(--cor-primaria-texto);
}
.icone svg { width: 1.6rem; height: 1.6rem; }
.passo h3, .recurso h3 { font-size: var(--texto-xl); font-weight: var(--peso-extra); }
.passo p, .recurso p { margin-top: var(--esp-2); color: var(--texto-suave); }

/* ── Recursos ─────────────────────────────────────────── */
.recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); }
@media (min-width: 40rem) { .recursos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .recursos { grid-template-columns: repeat(3, 1fr); } }
.recurso-destaque {
  color: #ffffff; border-color: transparent;
  background:
    radial-gradient(16rem 10rem at 100% 0%, rgb(52 211 153 / 0.35), transparent 70%),
    linear-gradient(135deg, #2563eb, #1e40af);
}
.recurso-destaque p { color: rgb(255 255 255 / 0.92); }
.recurso-destaque .icone { background: rgb(255 255 255 / 0.16); color: #ffffff; }
.recurso-destaque a { color: #ffffff; font-weight: var(--peso-forte); }
.recurso-destaque :focus-visible { outline-color: #ffffff; }
.em-breve {
  display: inline-flex; align-items: center; vertical-align: 0.2em; margin-left: var(--esp-1);
  padding: 0.1rem 0.55rem; border-radius: var(--raio-pilula); border: 1px solid var(--borda);
  background: var(--superficie-2); color: var(--texto-suave);
  font-family: var(--fonte); font-size: var(--texto-xs); font-weight: var(--peso-semi); letter-spacing: 0.02em; white-space: nowrap;
}
.recurso-destaque .em-breve { background: rgb(15 27 51 / 0.28); border-color: rgb(255 255 255 / 0.28); color: #ffffff; }

/* ── Princípios ───────────────────────────────────────── */
.principios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
@media (min-width: 48rem) { .principios { grid-template-columns: repeat(2, 1fr); gap: var(--esp-4) var(--esp-6); } }
.principios li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-4); align-items: start;
  padding: var(--esp-5); background: var(--superficie); border-radius: var(--raio-lg); border: 1px solid var(--borda);
}
.principios .num {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--cor-acento); color: var(--cor-acento-contraste);
  font-family: var(--fonte-titulo); font-weight: var(--peso-extra);
  box-shadow: inset 0 0 0 4px var(--cor-acento-borda);
}
.principios h3 { font-size: var(--texto-lg); font-weight: var(--peso-extra); }
.principios p { margin-top: var(--esp-1); color: var(--texto-suave); }
.principios-mascote { display: flex; align-items: center; gap: var(--esp-4); margin-top: var(--esp-8); color: var(--texto-suave); }
.principios-mascote img { width: 4rem; height: 4rem; flex: none; }

/* ── Privacidade (bloco da home) — sério e claro ──────── */
.cofre {
  display: grid; gap: var(--esp-8);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-xl);
  padding: var(--esp-8) var(--esp-6); box-shadow: var(--sombra);
}
@media (min-width: 60rem) { .cofre { grid-template-columns: 1.1fr 0.9fr; padding: var(--esp-12); gap: var(--esp-12); align-items: center; } }
.citacao {
  margin: var(--esp-6) 0 0; padding: var(--esp-4) var(--esp-5);
  border-left: 4px solid var(--cor-primaria); background: var(--cor-primaria-suave); border-radius: 0 var(--raio) var(--raio) 0;
}
.citacao p { font-size: var(--texto-lg); }
.citacao p + p { margin-top: var(--esp-3); font-size: var(--texto-base); }
.garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); }
.garantias li { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: start; }
.garantias .icone { width: 2.75rem; height: 2.75rem; margin: 0; }
.garantias .icone svg { width: 1.35rem; height: 1.35rem; }
.garantias p { color: var(--texto-suave); font-size: var(--texto-sm); }
.garantias strong { display: block; color: var(--texto); font-size: var(--texto-base); }
.mais { display: inline-flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-6); font-weight: var(--peso-forte); min-height: var(--alvo-toque); }

/* ── Perguntas frequentes ─────────────────────────────── */
.perguntas { max-width: 48rem; display: grid; gap: var(--esp-3); }
.perguntas details { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 0 var(--esp-5); }
.perguntas details[open] { box-shadow: var(--sombra); }
.perguntas summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4);
  min-height: 3.5rem; padding: var(--esp-3) 0; cursor: pointer; list-style: none;
  font-weight: var(--peso-forte); font-size: var(--texto-lg);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); font-weight: var(--peso-extra); line-height: 1;
  transition: transform 0.35s var(--mola);
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details > div { padding-bottom: var(--esp-5); color: var(--texto-suave); max-width: var(--largura-texto); }
.perguntas details > div p + p { margin-top: var(--esp-3); }

/* ── Chamada final ────────────────────────────────────── */
.chamada-final {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; text-align: center; color: #ffffff;
  border-radius: var(--raio-xl); padding: var(--esp-12) var(--esp-6);
  background:
    radial-gradient(20rem 14rem at 100% 0%, rgb(52 211 153 / 0.35), transparent 70%),
    radial-gradient(18rem 14rem at 0% 100%, rgb(96 150 250 / 0.45), transparent 70%),
    linear-gradient(135deg, #2563eb, #1e3a8a);
}
.chamada-final img { width: 6.5rem; height: 6.5rem; margin-bottom: var(--esp-4); animation: pular 2.6s var(--mola) infinite; }
@keyframes pular { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-10px); } }
.chamada-final h2 { font-size: var(--texto-3xl); font-weight: var(--peso-extra); }
@media (min-width: 48rem) { .chamada-final h2 { font-size: var(--texto-4xl); } }
.chamada-final p { margin: var(--esp-3) auto 0; max-width: 32rem; font-size: var(--texto-lg); }
.chamada-final .botao { margin-top: var(--esp-8); background: #ffffff; color: #1d4ed8; box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); }
.chamada-final .botao:hover { background: #eff5ff; }
.chamada-final .ja-convidado { margin-top: var(--esp-6); font-size: var(--texto-sm); font-weight: var(--peso-semi); }
.chamada-final .ja-convidado a { display: inline-block; padding: 0.7rem var(--esp-1); color: #ffffff; font-weight: var(--peso-extra); } /* inline-block: 44px de alvo sem sair da linha de base */
.chamada-final :focus-visible { outline-color: #ffffff; }

/* ══ LISTA DE ESPERA ══════════════════════════════════════════════════════
   Formulário sem JavaScript: POST /api/lista-espera → 303 para /obrigado.html ou /lista-erro.html.
   Validação = a do navegador (required + type=email). CSP: form-action 'self'. */
:root {
  --lista-botao: #047857;            /* verde-700: branco por cima 5,48:1 */
  --lista-botao-hover: #065f46;
  --lista-botao-texto: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lista-botao: #34d399;          /* verde-400: #052e1f por cima */
    --lista-botao-hover: #6ee7b7;
    --lista-botao-texto: #052e1f;
  }
}
:root[data-theme="dark"] {
  --lista-botao: #34d399;
  --lista-botao-hover: #6ee7b7;
  --lista-botao-texto: #052e1f;
}

.lista { position: relative; display: grid; gap: var(--esp-3); text-align: left; }
.lista-rotulo { font-weight: var(--peso-forte); text-wrap: balance; }
.lista-linha { display: grid; gap: var(--esp-2); }
@media (min-width: 30rem) { .lista-linha { grid-template-columns: minmax(0, 1fr) auto; } }

.campo {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0 var(--esp-5);
  border: 1.5px solid var(--borda-forte); border-radius: var(--raio-pilula);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: var(--texto-base); /* 16px: o iPhone não dá zoom no foco */
}
.campo::placeholder { color: var(--texto-suave); opacity: 1; }
.campo:hover { border-color: var(--texto-suave); }
.campo:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--cor-primaria); }
.campo:user-invalid { border-color: var(--perigo); }

.botao-lista { min-height: 3rem; background: var(--lista-botao); color: var(--lista-botao-texto); }
.botao-lista:hover { background: var(--lista-botao-hover); }

/* A caixa de aceite: a linha inteira é o alvo de toque (rótulo envolve o checkbox). */
.lista-aceite {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: start;
  min-height: var(--alvo-toque); padding-block: var(--esp-1); cursor: pointer;
  font-size: var(--texto-sm); color: var(--texto-suave);
}
.lista-aceite input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--cor-primaria); cursor: pointer; }
.lista-aceite input:user-invalid { outline: 2px solid var(--perigo); outline-offset: 2px; }
.lista-nota { margin-top: calc(-1 * var(--esp-2)); padding-left: calc(1.25rem + var(--esp-3)); font-size: var(--texto-sm); color: var(--texto-suave); }
.lista-nota a { font-weight: var(--peso-semi); white-space: nowrap; } /* link fora do rótulo: tocar no texto do aceite nunca navega */

/* Isca para robôs: fora da tela para pessoas (classe, não estilo inline — a CSP proíbe),
   fora da árvore de acessibilidade (aria-hidden) e da ordem de tabulação (tabindex=-1). */
.lista-isca {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
}

/* Na capa: cartão de vidro discreto, abaixo dos selos — não compete com o "Entrar". */
.capa .lista {
  margin-top: var(--esp-6); max-width: 36rem; padding: var(--esp-4) var(--esp-5); /* 36rem ≈ largura da fila de selos */
  background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* No bloco final (fundo azul nos dois temas): cores fixas, não tokens. */
.chamada-final .lista { width: 100%; max-width: 34rem; margin-top: var(--esp-8); color-scheme: light; } /* campo e caixa claros também no tema escuro */
.chamada-final .campo { background: #ffffff; color: #0f1b33; border-color: transparent; box-shadow: 0 6px 18px rgb(0 0 0 / 0.16); }
.chamada-final .campo::placeholder { color: #4a5873; }
.chamada-final .campo:focus-visible { outline-color: #ffffff; outline-offset: 3px; }
.chamada-final .campo:user-invalid { border-color: #c81e1e; }
.chamada-final .lista .botao { margin-top: 0; min-height: 3rem; font-size: var(--texto-base); }
.chamada-final .lista-aceite, .chamada-final .lista-rotulo { color: #ffffff; }
.chamada-final .lista-aceite input { accent-color: #10b981; }
.chamada-final .lista-aceite input:user-invalid { outline-color: #ffffff; }
.chamada-final .lista-nota { margin: calc(-1 * var(--esp-2)) 0 0; max-width: none; color: #ffffff; font-size: var(--texto-sm); }
.chamada-final .lista-nota a { color: #ffffff; }

/* ── Páginas de resposta (obrigado / erro) ───────────── */
.recado { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--esp-16); }
.recado .conteudo { max-width: 40rem; }
.recado img { width: 8rem; height: 8rem; margin: 0 auto var(--esp-6); }
.recado-festa img { animation: pular 2.6s var(--mola) infinite; }
.recado-erro img { animation: balancar 3s ease-in-out infinite; }
.recado h1 { font-size: var(--texto-4xl); font-weight: var(--peso-extra); letter-spacing: -0.02em; }
.recado .destaque { color: var(--cor-acento-texto); }
.recado p { margin-top: var(--esp-4); color: var(--texto-suave); font-size: var(--texto-lg); }
.recado ul { margin: var(--esp-4) auto 0; padding-left: var(--esp-5); max-width: 30rem; text-align: left; color: var(--texto-suave); }
.recado li + li { margin-top: var(--esp-2); }
.recado .miudo { font-size: var(--texto-sm); }
.recado .chamadas { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; margin-top: var(--esp-8); }
@media (max-width: 29.99rem) { .recado .chamadas .botao { flex: 1 1 100%; } }

/* ── Rodapé ───────────────────────────────────────────── */
.rodape { padding-block: var(--esp-10); border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: var(--texto-sm); }
.rodape .conteudo { display: grid; gap: var(--esp-4); }
@media (min-width: 48rem) { .rodape .conteudo { grid-template-columns: 1fr auto; align-items: center; } }
.rodape .marca svg { height: 1.5rem; }
.rodape p { margin-top: var(--esp-3); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); }
.rodape a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--esp-2); color: var(--texto-suave); }
.rodape p a { padding: 0; min-height: 0; color: var(--cor-primaria-texto); }
.rodape a:hover { color: var(--texto); }

/* ── Página de texto (privacidade) ────────────────────── */
.documento { padding-block: var(--esp-12) var(--esp-16); }
.documento .conteudo { max-width: 48rem; }
.documento h1 { font-size: var(--texto-4xl); font-weight: var(--peso-extra); letter-spacing: -0.02em; }
.documento .atualizado { margin-top: var(--esp-3); color: var(--texto-suave); font-size: var(--texto-sm); }
.documento h2 { font-size: var(--texto-2xl); font-weight: var(--peso-extra); margin-top: var(--esp-12); scroll-margin-top: 5rem; }
.documento h2 + p, .documento h2 + ul { margin-top: var(--esp-4); }
.documento p + p, .documento ul + p, .documento p + ul { margin-top: var(--esp-4); }
.documento ul { padding-left: var(--esp-5); }
.documento li + li { margin-top: var(--esp-2); }
.documento li::marker { color: var(--cor-primaria-texto); }
.documento .citacao { margin-top: var(--esp-8); }
.indice {
  margin-top: var(--esp-8); padding: var(--esp-5) var(--esp-6);
  background: var(--superficie-2); border-radius: var(--raio-lg);
}
.indice h2 { margin: 0; font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); }
.indice ol { margin: var(--esp-3) 0 0; padding-left: var(--esp-5); }
.indice li + li { margin-top: 0; }
.indice a { display: block; padding-block: 0.6rem; }
.quadro { margin-top: var(--esp-5); padding: var(--esp-5); border-radius: var(--raio-lg); background: var(--superficie-2); }
.quadro-alerta { background: var(--alerta-suave); }
.tabela-rolagem { margin-top: var(--esp-5); overflow-x: auto; overflow-y: hidden; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.tabela-rolagem table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); min-width: 34rem; }
.tabela-rolagem th, .tabela-rolagem td { text-align: left; vertical-align: top; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--borda); }
.tabela-rolagem tr:last-child td { border-bottom: 0; }
.tabela-rolagem th { background: var(--superficie-2); font-weight: var(--peso-forte); }
.tabela-rolagem td:first-child { font-weight: var(--peso-semi); }

/* ── 404 ──────────────────────────────────────────────── */
.nao-achou { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--esp-16); }
.nao-achou img { width: 8rem; height: 8rem; margin: 0 auto var(--esp-6); animation: balancar 3s ease-in-out infinite; }
@keyframes balancar { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.nao-achou h1 { font-size: var(--texto-4xl); font-weight: var(--peso-extra); }
.nao-achou p { margin-top: var(--esp-3); color: var(--texto-suave); font-size: var(--texto-lg); }
.nao-achou .chamadas { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; margin-top: var(--esp-8); }

/* ── Movimento reduzido: tudo parado, tudo no estado final ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}