/* Site de divulgação (D-50). Mesmos fundamentos do app (docs/design/SISTEMA_DE_DESIGN.md): fonte do sistema,
 * cor com papel e contraste medido (≥ 4,5:1, teste do gerador), alvo de toque ≥ 44 px, tema claro e escuro
 * pelo aparelho, ícones SVG do sistema único, frase com maiúscula só no início.
 * Visual da tela de entrada dos apps: as cores da Central — azul (a marca), âmbar (o ônibus escolar) e coral —,
 * a ilustração da criança com o ônibus e o mapa com a rota. As cores de DESENHO (pele, cabelo, folha) são as mesmas
 * nos dois temas; texto usa só os tokens --*-texto, cujo contraste o teste mede. */
:root {
  --marca: #2563eb;           /* fundo de botão (texto branco 5,2:1) e cor de ícone */
  --marca-forte: #1d4ed8;     /* pressionado/hover */
  --marca-texto: #1d4ed8;     /* a marca como TEXTO sobre fundo claro */
  --marca-suave: #e8efff;
  --ambar: #e9a100;           /* o ônibus escolar — só desenho e fundo */
  --ambar-texto: #875400;
  --ambar-suave: #fff3d6;
  --coral: #e4572e;
  --coral-forte: #c9461f;   /* UX-13: fundo com texto branco a 4,8:1 (o --coral dava 3,68:1) */
  --coral-texto: #ad3a17;
  --coral-suave: #fdebe4;
  --fundo: #f7f9fd;
  --fundo-alt: #eef3fb;
  --cartao: #ffffff;
  --texto: #0f172a;
  --texto-2: #475569;
  --linha: #e1e7f0;
  --realce: #e7edf6;
  --aviso: #8a3c0b;
  --aviso-suave: #fdf1d6;
  --ok: #15803d;
  --escuro-fixo: #0f172a;
  --claro-fixo: #f8fafc;
  --pele: #f2c4a0;
  --cabelo: #5b3624;
  --cabelo-adulto: #2b2118;
  --tronco: #8a5a3b;
  --folha: #4db36b;
  --sombra: 0 1px 2px rgb(15 23 42 / 5%), 0 10px 30px rgb(15 23 42 / 7%);
  --sombra-alta: 0 24px 60px rgb(37 99 235 / 16%), 0 8px 20px rgb(15 23 42 / 8%);
  --raio: 22px;
  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mao: 'Segoe Print', 'Bradley Hand', 'Marker Felt', 'Comic Sans MS', cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca-texto: #93b4ff;
    --marca-suave: #17264a;
    --ambar-texto: #f5c451;
    --ambar-suave: #332809;
    --coral-texto: #ff9c7d;
    --coral-suave: #3a1d14;
    --fundo: #0d1220;
    --fundo-alt: #121a2c;
    --cartao: #182236;
    --texto: #eef2f8;
    --texto-2: #a9b5c8;
    --linha: #27324a;
    --realce: #1f2a42;
    --aviso: #f5c46b;
    --aviso-suave: #33260c;
    --ok: #4ade80;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 35%);
    --sombra-alta: 0 24px 60px rgb(0 0 0 / 45%);
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--marca-texto); }
h1, h2, h3 { line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 850; letter-spacing: -0.025em; }
h3 { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; background: var(--marca); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 20; }
.pular:focus { top: 12px; }

.faixa { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.faixa.estreita { max-width: 780px; }
.icone { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.icone.mini { width: 1.05em; height: 1.05em; color: var(--marca-texto); }
.fraco { color: var(--texto-2); }

/* Os três tons (segurança, papéis, confiança, recursos): o tom pinta fundo e ícone; o texto sai do --*-texto. */
.tom-azul { --tom: var(--marca); --tom-texto: var(--marca-texto); --tom-suave: var(--marca-suave); }
.tom-ambar { --tom: var(--ambar); --tom-texto: var(--ambar-texto); --tom-suave: var(--ambar-suave); }
.tom-coral { --tom: var(--coral); --tom-texto: var(--coral-texto); --tom-suave: var(--coral-suave); }

/* ── Botões (alvo ≥ 44 px, estado pressionado, foco visível) ── */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px;
  background: var(--marca); color: #fff; font-weight: 800; text-decoration: none; border: 1px solid transparent; transition: transform .15s, background .15s; }
.botao:hover { background: var(--marca-forte); }
.botao:active { transform: scale(.97); }
.botao.secundario { background: var(--cartao); color: var(--texto); border-color: var(--linha); }
.botao.secundario:hover { background: var(--fundo-alt); }
.botao.pequeno { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; border-radius: 999px; }
.botao.pilula { position: relative; overflow: hidden; min-height: 58px; padding: 0 26px 0 30px; border-radius: 999px; font-size: 1.0625rem;
  background: linear-gradient(110deg, var(--marca-forte), var(--marca) 60%, #3b82f6); box-shadow: 0 14px 30px rgb(37 99 235 / 35%); }
.botao.pilula::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%); animation: reflexo 5s ease-in-out 1.5s infinite;
  background: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 30%) 50%, transparent 75%); }
@keyframes reflexo { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.botao.claro { background: #fff; color: #1d4ed8; box-shadow: 0 14px 30px rgb(15 23 42 / 25%); }
.botao.claro:hover { background: #eef3ff; }
a:focus-visible, .botao:focus-visible, summary:focus-visible, .menu-botao:focus-visible, button:focus-visible { outline: 3px solid var(--marca-texto); outline-offset: 3px; }

/* ── Topo ── */
.topo { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 70%, transparent); padding-top: env(safe-area-inset-top, 0); }
.topo .faixa { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.3125rem; color: var(--texto); text-decoration: none; letter-spacing: -0.02em; }
.logo-pino { width: 34px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgb(37 99 235 / 30%)); }
.logo-pino.mini { width: 22px; filter: none; }
.lp-rastro { stroke: var(--marca); stroke-width: 3; stroke-linecap: round; }
.lp-pino { fill: var(--marca); } .lp-miolo { fill: var(--ambar); } .lp-bus { fill: var(--escuro-fixo); } .lp-vidro { fill: var(--ambar); }
.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > a:not(.botao) { color: var(--texto-2); text-decoration: none; font-weight: 650; font-size: 0.9375rem; padding: 10px 12px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.menu > a:not(.botao):hover { color: var(--texto); background: var(--fundo-alt); }
.menu .entrar { color: var(--marca-texto) !important; }
.idiomas { display: inline-flex; gap: 2px; margin: 0 6px; padding: 3px; border-radius: 999px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--cartao) 70%, transparent); }
.idiomas a { min-width: 44px; min-height: 38px; display: inline-grid; place-items: center; border-radius: 999px; color: var(--texto-2); text-decoration: none; font-size: 0.8125rem; font-weight: 800; }
.idiomas a[aria-current='true'] { color: var(--marca-texto); background: var(--cartao); box-shadow: var(--sombra); }
.menu-botao { display: none; margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); cursor: pointer; }
@media (max-width: 1040px) {
  .menu-botao { display: inline-grid; place-items: center; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--fundo); border-bottom: 1px solid var(--linha); padding: 8px 20px 16px; box-shadow: var(--sombra); }
  .topo[data-aberto] .menu { display: flex; }
  .idiomas { margin: 6px 0; align-self: flex-start; }
  .menu .botao { margin-top: 6px; }
}

/* ── Hero ── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(28px, 5vw, 64px) 110px;
  background: radial-gradient(900px 480px at 88% -8%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%),
    radial-gradient(600px 380px at -10% 100%, color-mix(in srgb, var(--ambar) 14%, transparent), transparent 70%), var(--fundo); }
.hero-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }
.hero-texto { position: relative; }
.bilhete { display: inline-block; margin: 0 0 14px; transform: rotate(-5deg); font-family: var(--mao); font-size: 1.125rem; line-height: 1.2; color: var(--marca-texto);
  border-bottom: 2px solid currentColor; border-radius: 0 0 50% 50% / 0 0 8px 8px; padding-bottom: 2px; }
.selo { display: flex; align-items: center; gap: 8px; color: var(--marca-texto); font-weight: 800; font-size: 0.9375rem; margin-bottom: 14px; }
.lead { color: var(--texto-2); font-size: 1.1875rem; max-width: 60ch; margin-top: 18px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nota { margin-top: 14px; color: var(--texto-2); font-size: 0.9375rem; }
.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--linha);
  font-size: 0.875rem; font-weight: 650; color: var(--texto); box-shadow: var(--sombra); }
.hero-visual { position: relative; display: grid; }
.cena { justify-self: end; width: min(78%, 440px); margin-bottom: -34px; position: relative; z-index: 1; overflow: visible; }
.flutua { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: var(--cartao); box-shadow: var(--sombra-alta); font-size: .875rem; line-height: 1.25; animation: flutuar 6s ease-in-out infinite; }
.flutua > .icone { width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: #fff; background: var(--ok); }
.flutua span { display: flex; flex-direction: column; font-weight: 800; }
.flutua time { font-size: .75rem; font-weight: 700; color: var(--texto-2); }
.conferido { left: -14px; bottom: -22px; }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ondas { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; z-index: -1; }
.onda1 { fill: color-mix(in srgb, var(--marca) 22%, var(--fundo)); } .onda2 { fill: var(--marca-forte); }

/* A cena (a mesma da tela de entrada). */
.ce-nuvem { fill: color-mix(in srgb, var(--cartao) 86%, var(--marca)); animation: vento 16s ease-in-out infinite alternate; }
.ce-n2 { animation-duration: 22s; }
.ce-tronco { fill: var(--tronco); } .ce-folha { fill: var(--folha); } .ce-f2 { fill: color-mix(in srgb, var(--folha) 78%, var(--texto)); }
.ce-chao { fill: color-mix(in srgb, var(--folha) 20%, var(--fundo)); }
.ce-lataria { fill: var(--ambar); } .ce-teto { fill: color-mix(in srgb, var(--ambar) 70%, var(--coral)); } .ce-faixa { fill: var(--escuro-fixo); }
.ce-janela { fill: color-mix(in srgb, var(--escuro-fixo) 72%, var(--marca)); }
.ce-letreiro { fill: var(--escuro-fixo); font-weight: 900; font-size: 17px; letter-spacing: .04em; font-style: italic; font-family: var(--fonte); }
.ce-farol, .ce-calota { fill: var(--claro-fixo); } .ce-pneu { fill: var(--escuro-fixo); } .ce-raio { stroke: var(--escuro-fixo); stroke-width: 2; }
.ce-camisa { fill: var(--coral); } .ce-manga { fill: none; stroke: var(--coral); stroke-width: 11; stroke-linecap: round; }
.ce-alca { fill: none; stroke: var(--marca); stroke-width: 6; stroke-linecap: round; }
.ce-mochila { fill: var(--marca); }
.ce-onibus { animation: chegar 1.8s cubic-bezier(.16, .84, .28, 1) both; }
.ce-roda { animation: girar 1.8s cubic-bezier(.16, .84, .28, 1) both; }
.ce-braco { transform-origin: 80px 206px; transform-box: view-box; animation: acenar 1.4s ease-in-out infinite; }
.ce-cabeca { transform-origin: 104px 192px; transform-box: view-box; animation: balancar 3.2s ease-in-out infinite; }
@keyframes chegar { from { transform: translateX(200px); } to { transform: none; } }
@keyframes girar { from { transform: rotate(-720deg); } to { transform: none; } }
@keyframes acenar { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(16deg); } }
@keyframes balancar { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes vento { from { transform: none; } to { transform: translateX(18px); } }

/* O mapa de exemplo. */
.mapa-cartao { position: relative; z-index: 2; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 3; max-width: 100%;
  border: 6px solid color-mix(in srgb, var(--cartao) 88%, transparent); background: var(--cartao); box-shadow: var(--sombra-alta); }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-terreno { fill: var(--realce); } .mp-lago { fill: color-mix(in srgb, var(--marca) 22%, var(--cartao)); } .mp-praca { fill: color-mix(in srgb, var(--folha) 32%, var(--cartao)); }
.mp-rua { fill: none; stroke: var(--cartao); stroke-width: 6; } .mp-larga { stroke-width: 10; } .mp-fina { stroke-width: 4; }
.mp-halo { fill: none; stroke: color-mix(in srgb, var(--marca) 25%, transparent); stroke-width: 12; stroke-linecap: round; }
.mp-trajeto { fill: none; stroke: var(--marca); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; animation: tracar 2.4s ease-out both; }
@keyframes tracar { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.mp-parada { fill: var(--cartao); stroke: var(--marca); stroke-width: 3; }
.mp-casa { fill: var(--marca); stroke: var(--cartao); stroke-width: 3; } .mp-casa-icone { fill: none; stroke: var(--claro-fixo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-pin { fill: var(--marca); } .mp-pin-borda { fill: var(--cartao); stroke: var(--marca); stroke-width: 2.5; }
.mp-onibus-halo { fill: color-mix(in srgb, var(--ambar) 32%, transparent); } .mp-lataria { fill: var(--ambar); stroke: var(--escuro-fixo); stroke-width: 1.2; }
.mp-escuro { fill: var(--escuro-fixo); }
.rs-pele { fill: var(--pele); } .rs-cabelo { fill: var(--cabelo); } .rs-cabelo-adulto { fill: var(--cabelo-adulto); } .rs-olho { fill: var(--escuro-fixo); }
.rs-bochecha { fill: var(--coral); opacity: .3; } .rs-laco { fill: var(--coral); }
.rs-boca { fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-linecap: round; }
.mp-menu { position: absolute; left: 4%; top: 8%; margin: 0; padding: 6px; list-style: none; display: flex; flex-direction: column; gap: 2px;
  border-radius: 16px; background: color-mix(in srgb, var(--cartao) 94%, transparent); box-shadow: var(--sombra-alta); font-size: .75rem; font-weight: 700; }
.mp-menu li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; color: var(--texto-2); }
.mp-menu li.ativo { background: var(--marca-suave); color: var(--marca-texto); }
.mp-menu .icone { width: 15px; height: 15px; }
.mp-exemplo { position: absolute; right: 4%; bottom: 6%; padding: 3px 10px; border-radius: 999px; background: var(--cartao); color: var(--texto-2);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px dashed var(--linha); }
.mp-cartao { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--cartao) 96%, transparent); box-shadow: var(--sombra-alta); font-size: .75rem; line-height: 1.25; white-space: nowrap; }
.mp-cartao b { display: block; color: var(--texto); } .mp-cartao small { display: flex; align-items: center; gap: 3px; color: var(--texto-2); font-size: .6875rem; }
.mp-cartao .ok { color: var(--ok); font-weight: 800; } .mp-cartao .icone { width: 13px; height: 13px; }
.mp-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ambar-suave); color: var(--ambar-texto); }
.mp-rota { left: 33%; top: 8%; } .mp-ana { right: 3%; top: 8%; animation: pulo 9s ease-in-out infinite; }
.mp-avatar { width: 34px; height: 28px; }
.mp-zoom { position: absolute; right: 4%; top: 46%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--cartao); box-shadow: var(--sombra-alta); font-weight: 800; }
.mp-zoom span { display: grid; place-items: center; width: 28px; height: 26px; } .mp-zoom span + span { border-top: 1px solid var(--linha); }
@keyframes pulo { 0%, 58%, 72%, 100% { transform: none; } 64% { transform: translateY(-5px) scale(1.04); } }
@media (max-width: 520px) { .mp-menu, .mp-zoom { display: none; } .mp-rota { left: 3%; } .cena { width: 82%; margin-bottom: -52px; } .conferido { left: 8px; } }

/* ── A faixa azul com os registros de uma viagem, rolando ── */
.faixa-eventos { background: var(--marca-forte); color: #fff; overflow: hidden; padding-block: 14px 18px; }
/* Cada cópia leva o próprio respiro (padding), então -50% é sempre um número inteiro de cópias: o laço não dá salto.
 * No celular, 2 cópias em vez de 4: a faixa animada vira uma camada da GPU, e 4 cópias × a densidade da tela passavam
 * de 8.192 px — o limite de textura da GPU por software, onde a captura do CI falhou ("Unable to capture screenshot"). */
.trilho { display: flex; width: max-content; animation: rolar 48s linear infinite; }
.copia { display: flex; gap: 14px; padding-right: 14px; }
@media (max-width: 720px) { .copia:nth-child(n + 3) { display: none; } .trilho { animation-duration: 24s; } }
.evento { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgb(255 255 255 / 14%); font-weight: 700; white-space: nowrap; }
.evento .icone.mini { color: #fff; }
.evento time { font-variant-numeric: tabular-nums; opacity: .85; }
@keyframes rolar { to { transform: translateX(-50%); } }

/* ── Seções ── */
.secao { padding-block: clamp(60px, 8vw, 104px); }
.secao.alt { background: var(--fundo-alt); }
.secao > .faixa > .lead { margin-bottom: 40px; }
.grade { display: grid; gap: 20px; }
.grade.tres { grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.cartao, .papel { position: relative; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s; }
.cartao::before, .papel::before { content: ''; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--tom-suave); z-index: 0; }
.cartao > *, .papel > * { position: relative; }
.cartao:hover, .papel:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.cartao p, .papel li { color: var(--texto-2); }
.icone-grande { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--tom-suave, var(--marca-suave)); color: var(--tom-texto, var(--marca-texto)); flex: 0 0 auto; }
.icone-grande .icone { width: 26px; height: 26px; }
.papel .onde { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--tom-suave); color: var(--tom-texto); font-size: .8125rem; font-weight: 800; }
.papel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.papel li { display: flex; gap: 10px; align-items: flex-start; }
.papel li .icone { margin-top: 0.3em; color: var(--tom-texto); }

/* O diário no "celular". */
.prova-grade { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .prova-grade { grid-template-columns: 1.1fr .9fr; } }
.lista-check { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check .icone { margin-top: .3em; }
.celular-diario { margin: 0; justify-self: center; width: min(100%, 380px); background: var(--cartao); border: 8px solid color-mix(in srgb, var(--texto) 88%, var(--marca)); border-radius: 40px;
  box-shadow: var(--sombra-alta); overflow: hidden; transform: rotate(2deg); }
.tela-topo { display: flex; align-items: center; gap: 10px; padding: 22px 20px 16px; background: linear-gradient(120deg, var(--marca-forte), var(--marca)); color: #fff; font-weight: 800; }
.diario { list-style: none; margin: 0; padding: 20px 20px 8px; }
.diario li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.diario li::before { content: ''; position: absolute; left: calc(3.4rem + 1px); top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); transform: translateX(-4px); }
.diario li:not(:last-child)::after { content: ''; position: absolute; left: calc(3.4rem + 1px); top: 20px; bottom: 2px; width: 2px; background: var(--linha); }
.diario li.aviso::before { background: var(--coral); }
.diario li.fim::before { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.diario time { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--texto-2); font-size: 0.9375rem; }
.diario span { display: flex; flex-direction: column; padding-left: 12px; }
.diario small { color: var(--texto-2); font-size: 0.8125rem; }
.celular-diario figcaption { padding: 0 20px 18px; color: var(--texto-2); font-size: 0.8125rem; }

/* ── Famílias: os recursos novos, em mosaico ── */
.familias { background: radial-gradient(700px 400px at 100% 0%, color-mix(in srgb, var(--coral) 10%, transparent), transparent 70%),
  radial-gradient(700px 400px at 0% 100%, color-mix(in srgb, var(--marca) 10%, transparent), transparent 70%), var(--fundo); }
.selo.novo { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--coral-suave); color: var(--coral-texto); }
.bento { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bento { grid-template-columns: 1fr 1fr; } .recurso-chat, .recurso-quem { grid-column: span 2; } }
@media (min-width: 1040px) { .bento { grid-template-columns: repeat(3, 1fr); } .recurso-chat { grid-column: span 2; } .recurso-quem { grid-column: span 3; } }
.recurso { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.recurso-desenho { position: relative; min-height: 200px; display: grid; place-items: center; padding: 22px; overflow: hidden;
  background: linear-gradient(160deg, var(--tom-suave), color-mix(in srgb, var(--tom-suave) 40%, var(--cartao))); }
.recurso-texto { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.recurso-texto h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.recurso-texto .icone-grande { width: 40px; height: 40px; border-radius: 12px; } .recurso-texto .icone-grande .icone { width: 21px; height: 21px; }
.recurso-texto p { color: var(--texto-2); }
.etiqueta-plus { padding: 2px 10px; border-radius: 999px; background: var(--ambar); color: var(--escuro-fixo); font-size: .75rem; font-weight: 900; letter-spacing: .02em; }
@media (min-width: 1040px) { .recurso-quem { flex-direction: row; } .recurso-quem .recurso-desenho { flex: 0 0 46%; } .recurso-quem .recurso-texto { justify-content: center; padding: 28px 36px; } }

/* Chat: as bolhas, a figurinha pulando e o confete (o efeito em tela cheia, em miniatura). */
.chat { position: relative; width: min(100%, 420px); display: flex; flex-direction: column; gap: 10px; }
.bolha { display: flex; align-items: flex-end; gap: 8px; max-width: 80%; }
.bolha span { padding: 10px 14px; border-radius: 18px; font-weight: 650; font-size: .9375rem; box-shadow: var(--sombra); }
.bolha.dela span { background: var(--cartao); color: var(--texto); border-bottom-left-radius: 6px; }
.bolha.minha { align-self: flex-end; } .bolha.minha span { background: var(--marca); color: #fff; border-bottom-right-radius: 6px; }
.mini-rosto { width: 36px; height: 30px; flex: 0 0 auto; }
.figurinha { align-self: flex-end; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-right: 14px; }
.figurinha svg { width: 64px; height: 64px; animation: saltar 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; transform-origin: 50% 100%; }
.figurinha small { font-size: .6875rem; font-weight: 700; color: var(--texto-2); }
.estrela { fill: var(--ambar); stroke: var(--escuro-fixo); stroke-width: 2; stroke-linejoin: round; } .olhinho { fill: var(--escuro-fixo); }
.sorriso { fill: none; stroke: var(--escuro-fixo); stroke-width: 2.4; stroke-linecap: round; }
@keyframes saltar { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-14px) scale(.95, 1.06) rotate(-6deg); } 55% { transform: translateY(0) scale(1.08, .92); } 70% { transform: rotate(5deg); } }
.confete { position: absolute; top: -30px; width: 8px; height: 14px; border-radius: 2px; background: var(--c); animation: cair 3.4s linear infinite; animation-delay: var(--d); left: var(--x); }
.c0 { --c: var(--coral); --x: 6%; --d: 0s; } .c1 { --c: var(--ambar); --x: 16%; --d: .7s; } .c2 { --c: var(--marca); --x: 27%; --d: 1.5s; } .c3 { --c: var(--folha); --x: 38%; --d: .3s; }
.c4 { --c: var(--coral); --x: 49%; --d: 2.1s; } .c5 { --c: var(--marca); --x: 60%; --d: 1.1s; } .c6 { --c: var(--ambar); --x: 71%; --d: 2.6s; } .c7 { --c: var(--folha); --x: 80%; --d: .9s; }
.c8 { --c: var(--coral); --x: 90%; --d: 1.8s; } .c9 { --c: var(--ambar); --x: 97%; --d: 2.9s; }
@keyframes cair { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(300px) rotate(540deg); opacity: 0; } }

/* Chamada: o rosto com os anéis tocando. */
.chamada { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.aneis { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 10px; }
.aneis::before, .aneis::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--tom); animation: tocar 2.2s ease-out infinite; }
.aneis::after { animation-delay: 1.1s; }
.rosto-grande { width: 80px; height: 80px; padding: 8px 4px 4px; border-radius: 50%; background: var(--cartao); position: relative; }
@keyframes tocar { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.chamada small { color: var(--texto-2); font-weight: 700; }
.botoes-chamada { display: flex; gap: 12px; margin-top: 12px; }
.botoes-chamada span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cartao); color: var(--texto); box-shadow: var(--sombra); }
.botoes-chamada .desligar { background: var(--coral); color: #fff; }

/* Câmera: o interior do veículo, com o "ao vivo" piscando. */
.camera { position: relative; width: min(100%, 320px); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra-alta); border: 4px solid var(--escuro-fixo); }
.camera svg { display: block; width: 100%; height: auto; }
.cam-fundo { fill: #27334d; } .cam-chao { fill: #1b2436; } .cam-banco { fill: #3d4c6e; } .cam-janela { fill: #7ea6e6; opacity: .6; }
.ao-vivo { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font-size: .75rem; font-weight: 800; }
.ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: piscar 1.2s ease-in-out infinite; }
.camera time { position: absolute; right: 10px; bottom: 8px; color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes piscar { 50% { opacity: .2; } }

/* O celular da criança. */
.mini-celular { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 170px; padding: 18px 16px; border-radius: 28px; background: var(--cartao);
  border: 6px solid color-mix(in srgb, var(--texto) 88%, var(--marca)); box-shadow: var(--sombra-alta); text-align: center; }
.mini-onibus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ambar); color: var(--escuro-fixo); margin-bottom: 6px; animation: flutuar 3s ease-in-out infinite; }
.mini-celular small { color: var(--texto-2); font-size: .75rem; font-weight: 700; }
.mini-celular b { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.02em; color: var(--marca-texto); }
.placa { display: flex; flex-direction: column; margin-top: 6px; padding: 4px 10px; border-radius: 8px; border: 2px solid var(--texto); font-weight: 900; letter-spacing: .08em; font-size: .9375rem; }
.placa small { font-size: .5625rem; letter-spacing: .02em; }

/* Botão de ajuda: discreto, com o pulso. */
.ajuda { display: grid; place-items: center; }
.botao-ajuda { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--coral-forte); color: #fff; font-weight: 900; font-size: 1.125rem;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--coral) 45%, transparent); }
.botao-ajuda::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--coral); opacity: .5; animation: tocar 2.6s ease-out infinite; }

/* Quem leva hoje. */
.quem { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.quem .veiculo, .quem .pessoa { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--cartao); box-shadow: var(--sombra); }
.quem .veiculo { color: var(--ambar-texto); } .quem .veiculo b { color: var(--texto); letter-spacing: .06em; }
.quem .pessoa span { display: flex; flex-direction: column; line-height: 1.2; } .quem .pessoa small { color: var(--texto-2); font-size: .75rem; }
.quem .mini-rosto { width: 42px; height: 36px; }

/* ── Plus da família ── */
.plus-banda { position: relative; overflow: hidden; color: #fff; padding-block: clamp(56px, 7vw, 88px);
  background: radial-gradient(600px 300px at 90% 10%, rgb(233 161 0 / 28%), transparent 70%), linear-gradient(125deg, #0b2566, #1d4ed8); }
.plus-grade { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .plus-grade { grid-template-columns: 1.1fr .9fr; } }
.plus-banda p { color: #e3ebff; margin-top: 14px; max-width: 58ch; }
.plus-banda .sempre { display: flex; gap: 8px; font-size: .9375rem; color: #d6e2ff; }
.plus-banda .sempre .icone { color: #ffd166; margin-top: .25em; }
.plus-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plus-itens li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 16%); font-weight: 650; }
.plus-itens li > .icone { width: 36px; height: 36px; padding: 7px; border-radius: 12px; background: rgb(255 255 255 / 14%); color: #ffd166; }
.plus-itens .grande { font-size: 1.75rem; font-weight: 900; color: #ffd166; letter-spacing: -0.03em; min-width: 3.2ch; }

/* ── Confiança ── */
.grade.confianca { margin: 36px 0 0; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.confianca > div { padding: 22px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.confianca dt { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.125rem; line-height: 1.25; }
.confianca dt .icone-grande { width: 42px; height: 42px; border-radius: 13px; } .confianca dt .icone-grande .icone { width: 22px; height: 22px; }
.confianca dd { margin: 10px 0 0; color: var(--texto-2); }

/* ── Planos ── */
.planos { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.plano { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s; }
.plano:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.plano .para-quem { color: var(--texto-2); font-size: 0.9375rem; min-height: 3em; }
.plano .preco { font-size: 1.625rem; font-weight: 900; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.plano .minimo { color: var(--texto-2); font-size: 0.875rem; min-height: 1.4em; }
.plano ul { list-style: none; margin: 14px 0 20px; padding: 14px 0 0; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; }
.plano ul li::before { content: '✓'; color: var(--marca-texto); font-weight: 900; margin-right: 8px; }
.plano .botao { margin-top: auto; border-radius: 999px; }
.nota-planos { display: flex; gap: 8px; align-items: flex-start; margin-top: 24px; color: var(--texto-2); font-size: 0.9375rem; }

/* ── Perguntas ── */
#perguntas h2 { margin-bottom: 28px; }
details { background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; margin-bottom: 10px; padding: 0 20px; box-shadow: var(--sombra); }
summary { list-style: none; cursor: pointer; font-weight: 800; padding: 18px 40px 18px 0; position: relative; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; position: absolute; right: 8px; top: 26px; width: 10px; height: 10px; border-right: 2.5px solid var(--marca-texto); border-bottom: 2.5px solid var(--marca-texto); transform: rotate(45deg); transition: transform .2s; }
details[open] summary::after { transform: rotate(-135deg); top: 30px; }
details p { color: var(--texto-2); padding-bottom: 18px; max-width: 65ch; }

/* ── Chamada final (com o ônibus passando) e rodapé ── */
.final { position: relative; overflow: hidden; color: #fff; text-align: center; padding-block: clamp(56px, 8vw, 96px) 0;
  background: radial-gradient(700px 300px at 50% 0%, rgb(255 255 255 / 14%), transparent 70%), linear-gradient(160deg, #1d4ed8, #0b2566); }
.final .bilhete { color: #ffd166; }
.final p:not(.bilhete) { margin: 14px auto 28px; max-width: 52ch; color: #e3ebff; }
.estrada { position: relative; height: 96px; margin-top: 48px; background: linear-gradient(#0a1d4f, #0a1d4f) bottom / 100% 34px no-repeat; }
.estrada::before { content: ''; position: absolute; left: 0; right: 0; bottom: 16px; height: 3px; background: repeating-linear-gradient(90deg, #ffd166 0 26px, transparent 26px 52px); }
.onibus-final { position: absolute; bottom: 18px; left: 0; width: 110px; height: auto; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 35%)); animation: passar 14s linear infinite; }
.of-lataria { fill: #e9a100; } .of-escuro { fill: #0f172a; } .of-vidro { fill: #1e3a78; } .of-farol { fill: #f8fafc; }
@keyframes passar { from { transform: translateX(-130px); } to { transform: translateX(calc(100vw + 20px)); } }
.rodape { padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0)); color: var(--texto-2); font-size: 0.875rem; }
.rodape .faixa { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.rodape-marca { display: inline-flex; align-items: center; gap: 8px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.rodape a { color: var(--texto-2); min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }

/* ── Páginas internas (cadastro, termos) ── */
.pagina-interna { padding-block: clamp(32px, 6vw, 64px); }
.pagina-interna h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.pagina-interna .lead { margin-bottom: 28px; }
.documento { white-space: pre-wrap; line-height: 1.7; }
.aviso-minuta { background: var(--aviso-suave); color: var(--aviso); border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; font-weight: 600; }

/* Consentimento de medição (D-79): barra no pé, sem cobrir o conteúdo inteiro; os dois botões com o MESMO peso. */
.consentimento { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--cartao); color: var(--texto);
  border-top: 1px solid var(--linha); box-shadow: 0 -8px 24px rgb(0 0 0 / .08); padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
.consentimento .faixa { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consentimento p { margin: 0; flex: 1 1 22rem; font-size: .9375rem; }
.consentimento .acoes { display: flex; gap: 8px; flex: 0 0 auto; }
.rodape .link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.rodape .redes { display: flex; gap: 12px; flex-wrap: wrap; }

/* Menos movimento: tudo parado (o ônibus do mapa, que é SMIL, o site.js tira). A faixa de eventos vira linha fixa. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .faixa-eventos { overflow-x: auto; }
  .confete { display: none; }
}