/* Kroppo Fit — landing.
   Paleta do aplicativo: preto grafite, verde neon e o vermelho de acento. */

:root {
    --preto: #111111;
    --preto-2: #171717;
    --superficie: #1C1C1C;
    --borda: rgba(255,255,255,0.10);
    --verde: #B0D408;
    --verde-escuro: #8FAF1C;
    --vermelho: #E0161F;
    --texto: #ECEFE6;
    --texto-2: #A0A69A;
    --largura: 1140px;
    color-scheme: dark;
}

* { box-sizing: border-box; }

/* Rolagem suave nas âncoras do menu. scroll-padding-top desconta o cabeçalho
   fixo — sem isso o título da seção para escondido atrás dele. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* ── Revelação ao rolar ────────────────────────────────────────
   A classe 'anim' vem do animacoes.js. Sem JavaScript nada é escondido, então
   a página nunca fica em branco por causa de um script que não carregou. */
.anim .revelar {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}
.anim .revelar--on { opacity: 1; transform: none; }

/* Escalonamento: os filhos entram em sequência, dando ritmo sem exagero. */
.anim .revelar--d1 { transition-delay: .06s; }
.anim .revelar--d2 { transition-delay: .12s; }
.anim .revelar--d3 { transition-delay: .18s; }
.anim .revelar--d4 { transition-delay: .24s; }
.anim .revelar--d5 { transition-delay: .30s; }
.anim .revelar--d6 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .anim .revelar { opacity: 1; transform: none; transition: none; }
}

html, body {
    margin: 0;
    overflow-x: clip;
    background: var(--preto);
    color: var(--texto);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

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

/* ── Marca ─────────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .02em; }
.marca-nome { font-family: Michroma, "Archivo Black", Impact, sans-serif; font-size: 1.05rem; }
.marca-fit { color: var(--verde); }

.logo-k { width: 30px; height: 30px; flex-shrink: 0; }

/* ── Cabeçalho ─────────────────────────────────────────────── */
.topo {
    position: sticky; top: 0; z-index: 50;
    background: rgba(17,17,17,0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borda);
}
.topo-inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.topo-links { display: none; gap: 26px; margin-left: auto; font-size: .92rem; color: var(--texto-2); }
.topo-links a:hover { color: var(--texto); }
.topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 900px) {
    .topo-links { display: flex; }
    .topo-acoes { margin-left: 0; }
}

/* ── Botões ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px; padding: 12px 22px; font-weight: 700; font-size: .95rem;
    border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, filter .12s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-verde { background: var(--verde); color: #111; }
.btn-linha { border-color: var(--borda); color: var(--texto); }
.btn-linha:hover { border-color: var(--verde); color: var(--verde); }
.btn-sm { padding: 9px 16px; font-size: .88rem; border-radius: 10px; }

/* ── Herói ─────────────────────────────────────────────────── */
.heroi { position: relative; padding: 88px 0 72px; overflow: hidden; }
.heroi::before {
    content: ''; position: absolute; inset: -30% 30% 40% -20%;
    background: radial-gradient(closest-side, rgba(176,212,8,.16), transparent);
    pointer-events: none;
}
.heroi-grid { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .heroi-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

.selo {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px;
    font-size: .78rem; color: var(--texto-2);
}
.selo b { color: var(--verde); }

.heroi h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; }
.heroi h1 em { font-style: normal; color: var(--verde); }
.heroi-sub { margin-top: 18px; font-size: 1.06rem; color: var(--texto-2); max-width: 46ch; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.heroi-nota { margin-top: 14px; font-size: .8rem; color: var(--texto-2); }

/* Telefone ilustrativo */
.fone {
    position: relative; margin: 0 auto; width: min(280px, 78vw); aspect-ratio: 9/19;
    border-radius: 34px; border: 1px solid var(--borda); background: var(--preto-2);
    box-shadow: 0 30px 70px rgba(0,0,0,.55); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.fone-topo { display: flex; align-items: center; justify-content: space-between; font-size: .62rem; color: var(--texto-2); }
.fone-card { border: 1px solid var(--borda); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.02); }
.fone-titulo { font-weight: 700; font-size: .82rem; }
.fone-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fone-chip { font-size: .6rem; border-radius: 7px; padding: 3px 8px; background: rgba(255,255,255,.07); color: var(--texto-2); }
.fone-chip--v { background: rgba(176,212,8,.18); color: var(--verde); }
.fone-barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.fone-barra i { display: block; height: 100%; width: 62%; background: var(--verde); }

/* ── Seções ────────────────────────────────────────────────── */
.secao { padding: 76px 0; border-top: 1px solid var(--borda); }
.secao-cabeca { max-width: 620px; margin-bottom: 40px; }
.secao-tag { color: var(--verde); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.secao h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; margin-top: 10px; letter-spacing: -.01em; }
.secao-sub { margin-top: 12px; color: var(--texto-2); }

.grade { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grade-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grade-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grade-3 { grid-template-columns: repeat(3, 1fr); } }

.cartao {
    border: 1px solid var(--borda); border-radius: 18px; padding: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    transition: border-color .15s ease, transform .15s ease;
}
.cartao:hover { border-color: rgba(176,212,8,.4); transform: translateY(-2px); }
.cartao-icone {
    width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    background: rgba(176,212,8,.14); color: var(--verde); margin-bottom: 16px;
}
.cartao h3 { font-size: 1.05rem; font-weight: 700; }
.cartao p { margin-top: 8px; color: var(--texto-2); font-size: .92rem; }

/* Passos */
.passos { counter-reset: passo; display: grid; gap: 26px; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passo { position: relative; padding-left: 56px; }
.passo::before {
    counter-increment: passo; content: counter(passo);
    position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--verde); color: #111; font-weight: 800;
}
.passo h3 { font-size: 1rem; font-weight: 700; padding-top: 8px; }
.passo p { margin-top: 6px; color: var(--texto-2); font-size: .92rem; }

/* ── Planos ────────────────────────────────────────────────── */
.plano {
    display: flex; flex-direction: column; border: 1px solid var(--borda);
    border-radius: 20px; padding: 28px; background: var(--superficie);
}
.plano--destaque { border-color: var(--verde); box-shadow: 0 0 0 1px rgba(176,212,8,.35), 0 20px 50px rgba(0,0,0,.4); }
.plano-fita {
    align-self: flex-start; background: var(--verde); color: #111; font-size: .66rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
}
.plano-nome { font-size: 1.2rem; font-weight: 800; }
.plano-desc { margin-top: 6px; color: var(--texto-2); font-size: .9rem; min-height: 2.6em; }
.plano-preco { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 4px; }
.plano-valor { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plano-periodo { color: var(--texto-2); font-size: .86rem; }
.plano-teste { color: var(--verde); font-size: .84rem; font-weight: 600; }
.plano-lista { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; }
.plano-lista li { display: flex; gap: 10px; font-size: .92rem; color: var(--texto); }
.plano-lista svg { flex-shrink: 0; color: var(--verde); margin-top: 3px; }
.plano .btn { margin-top: auto; width: 100%; }

.vazio {
    border: 1px dashed var(--borda); border-radius: 18px; padding: 48px 24px;
    text-align: center; color: var(--texto-2);
}

/* ── Chamada final ─────────────────────────────────────────── */
.chamada {
    border: 1px solid var(--borda); border-radius: 24px; padding: 52px 32px; text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(176,212,8,.14), transparent 65%);
}
.chamada h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; }
.chamada p { margin: 14px auto 0; color: var(--texto-2); max-width: 52ch; }
.chamada-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ── Rodapé ────────────────────────────────────────────────── */
.rodape { border-top: 1px solid var(--borda); padding: 40px 0; color: var(--texto-2); font-size: .86rem; }
.rodape-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 20px; }
.rodape a:hover { color: var(--verde); }

/* ── Faixa de números ──────────────────────────────────────── */
.faixa { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--preto-2); }
.faixa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 40px 0; }
@media (min-width: 860px) { .faixa-grid { grid-template-columns: repeat(4, 1fr); } }
.faixa-item { text-align: center; }
.faixa-valor { font-size: 1.9rem; font-weight: 800; color: var(--verde); line-height: 1; letter-spacing: -.02em; }
.faixa-rotulo { margin-top: 8px; font-size: .84rem; color: var(--texto-2); }

/* ── Blocos alternados (personal / aluno) ──────────────────── */
/* padding-block, não padding: o .bloco divide o elemento com o .wrap e não pode zerar o respiro lateral. */
.bloco { display: grid; gap: 40px; align-items: center; padding-block: 64px; }
@media (min-width: 900px) { .bloco { grid-template-columns: 1fr 1fr; gap: 64px; } }
@media (min-width: 900px) { .bloco--inverso .bloco-visual { order: -1; } }

.bloco-tag {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    border-radius: 999px; padding: 5px 14px; font-size: .74rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
}
.bloco-tag--verde { background: rgba(176,212,8,.16); color: var(--verde); }
.bloco-tag--vermelho { background: rgba(224,22,31,.16); color: #FF6B6B; }

.bloco h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.bloco > div > p { margin-top: 14px; color: var(--texto-2); }

.lista-check { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check svg { flex-shrink: 0; color: var(--verde); margin-top: 4px; }
.lista-check b { display: block; font-size: .96rem; }
.lista-check span { color: var(--texto-2); font-size: .9rem; }

/* ── Mosaico de telas ──────────────────────────────────────── */
.mosaico { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.tela {
    border: 1px solid var(--borda); border-radius: 16px; padding: 14px;
    background: var(--superficie); display: flex; flex-direction: column; gap: 10px;
}
.tela-titulo { font-size: .78rem; font-weight: 700; }
.tela-sub { font-size: .66rem; color: var(--texto-2); }
.tela-linha { display: flex; align-items: center; gap: 8px; }
.tela-bolha { width: 22px; height: 22px; border-radius: 7px; background: rgba(176,212,8,.16); flex-shrink: 0; }
.tela-barra { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); flex: 1; overflow: hidden; }
.tela-barra i { display: block; height: 100%; background: var(--verde); }

/* ── Perguntas ─────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
    border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie);
    padding: 0 20px; transition: border-color .15s ease;
}
.faq details[open] { border-color: rgba(176,212,8,.4); }
.faq summary {
    cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: .98rem;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; color: var(--verde); font-size: 1.4rem; font-weight: 400; line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: '−'; }
.faq p { padding: 0 0 20px; color: var(--texto-2); font-size: .93rem; }

/* ── Aparelho (mockup em CSS) ──────────────────────────────── */
.aparelho {
    position: relative;
    width: min(300px, 80vw);
    aspect-ratio: 9 / 19.5;
    margin: 0 auto;
    border-radius: 46px;
    padding: 10px;
    background: linear-gradient(160deg, #3A3A3A, #101010 42%, #2A2A2A);
    box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}

.aparelho--pequeno { width: min(230px, 66vw); }
.aparelho--inclinado { transform: rotate(-4deg); }

.aparelho-tela {
    position: relative; height: 100%; border-radius: 37px; overflow: hidden;
    background: linear-gradient(180deg, #161616, #0E0E0E);
    display: flex; flex-direction: column;
}

.aparelho-ilha {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 34%; height: 22px; border-radius: 999px; background: #000; z-index: 3;
}

.aparelho-status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px 6px; font-size: .58rem; color: var(--texto-2); font-weight: 600;
}
.aparelho-status-icones { letter-spacing: 2px; }

.aparelho-conteudo {
    flex: 1; min-height: 0; overflow: hidden;
    padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 9px;
}

/* Botões físicos, para a moldura não parecer um retângulo qualquer. */
.aparelho-botao { position: absolute; width: 3px; border-radius: 3px; background: #2E2E2E; }
.aparelho-botao--silencioso { left: -3px; top: 108px; height: 26px; }
.aparelho-botao--vol1 { left: -3px; top: 150px; height: 46px; }
.aparelho-botao--vol2 { left: -3px; top: 206px; height: 46px; }
.aparelho-botao--power { right: -3px; top: 168px; height: 72px; }

/* Reflexo diagonal discreto no vidro. */
.aparelho-brilho {
    position: absolute; inset: 10px; border-radius: 37px; pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%);
}

/* Conteúdo de exemplo dentro da tela */
.mini { border: 1px solid var(--borda); border-radius: 13px; padding: 10px 11px; background: rgba(255,255,255,.03); }
.mini-titulo { font-size: .74rem; font-weight: 700; line-height: 1.25; }
.mini-sub { font-size: .6rem; color: var(--texto-2); margin-top: 3px; }
.mini-chips { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.mini-chip { font-size: .55rem; border-radius: 6px; padding: 3px 7px; background: rgba(255,255,255,.07); color: var(--texto-2); }
.mini-chip--v { background: rgba(176,212,8,.18); color: var(--verde); }
.mini-chip--r { background: rgba(224,22,31,.16); color: #FF7A7A; }
.mini-barra { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.mini-barra i { display: block; height: 100%; background: var(--verde); }
.mini-botao {
    margin-top: auto; text-align: center; border-radius: 11px; padding: 9px;
    background: var(--verde); color: #111; font-weight: 800; font-size: .68rem;
}
.mini-cabeca { display: flex; align-items: center; gap: 7px; }
.mini-icone { width: 24px; height: 24px; border-radius: 8px; background: rgba(176,212,8,.16); flex-shrink: 0; }

/* Dupla de aparelhos sobrepostos, nos blocos por público. */
.dupla { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.dupla .aparelho:nth-child(2) { position: absolute; right: 4%; top: 8%; z-index: 2; }
@media (max-width: 700px) { .dupla .aparelho:nth-child(2) { display: none; } }

/* ── Notebook (mockup em CSS) ──────────────────────────────── */
.note { width: 100%; max-width: 880px; margin: 0 auto; }

.note-tampa {
    position: relative;
    border-radius: 16px 16px 6px 6px;
    padding: 10px 10px 12px;
    background: linear-gradient(160deg, #C9CCD1, #8E9298 40%, #B6BABF);
    box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

.note-tela {
    position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden;
    background: #0D0D0D; border: 1px solid #000;
    display: flex; flex-direction: column;
}

/* Entalhe da câmera, como no aparelho da referência. */
.note-entalhe {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 130px; height: 18px; border-radius: 0 0 9px 9px; background: #000; z-index: 3;
}

.note-conteudo { flex: 1; min-height: 0; overflow: hidden; display: flex; }

.note-brilho {
    position: absolute; inset: 10px 10px 12px; border-radius: 8px; pointer-events: none;
    background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%);
}

/* Base com leve trapézio e o recorte do touchpad. */
.note-base {
    position: relative; height: 14px; margin: 0 -3%;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #B6BABF, #8B9095);
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
}
.note-dobradica {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 16%; height: 6px; border-radius: 0 0 8px 8px;
    background: rgba(0,0,0,.22);
}

/* ── Conteúdo da tela do notebook (app web) ────────────────── */
.web { display: flex; width: 100%; font-size: .62rem; }

.web-lateral {
    width: 26%; min-width: 120px; border-right: 1px solid var(--borda);
    padding: 12px 10px; display: flex; flex-direction: column; gap: 7px;
    background: rgba(255,255,255,.02);
}
.web-marca { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .6rem; margin-bottom: 6px; }
.web-item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; color: var(--texto-2); }
.web-item--on { background: rgba(176,212,8,.14); color: var(--verde); font-weight: 700; }
.web-ponto { width: 12px; height: 12px; border-radius: 4px; background: currentColor; opacity: .55; flex-shrink: 0; }

.web-corpo { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.web-titulo { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.web-sub { font-size: .58rem; color: var(--texto-2); }

.web-cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.web-cartao { border: 1px solid var(--borda); border-radius: 9px; padding: 8px; background: rgba(255,255,255,.02); }
.web-num { font-size: .95rem; font-weight: 800; color: var(--verde); line-height: 1; }
.web-rot { font-size: .5rem; color: var(--texto-2); margin-top: 3px; }

.web-painel { border: 1px solid var(--borda); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.02); flex: 1; min-height: 0; }
.web-linha { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--borda); }
.web-linha:last-child { border-bottom: none; }
.web-tag { font-size: .48rem; border-radius: 5px; padding: 2px 6px; background: rgba(255,255,255,.07); color: var(--texto-2); }
.web-tag--v { background: rgba(176,212,8,.18); color: var(--verde); }
.web-barra { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); flex: 1; overflow: hidden; }
.web-barra i { display: block; height: 100%; background: var(--verde); }

/* Gráfico simplificado do painel do admin. */
.web-grafico { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin-top: 8px; }
.web-grafico i { flex: 1; background: linear-gradient(180deg, var(--verde), rgba(176,212,8,.25)); border-radius: 2px 2px 0 0; }

@media (max-width: 640px) {
    .web-lateral { display: none; }
    .web-cartoes { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet (mockup em CSS) ────────────────────────────────── */
.tab {
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    border-radius: 20px; padding: 9px;
    background: linear-gradient(155deg, #2C2C2E, #0C0C0C 45%, #232325);
    box-shadow: 0 26px 60px rgba(0,0,0,.55);
}
.tab-tela {
    height: 100%; border-radius: 13px; overflow: hidden; background: #0D0D0D;
    display: flex; flex-direction: column;
}
.tab-conteudo { flex: 1; min-height: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tab-brilho {
    position: absolute; inset: 9px; border-radius: 13px; pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 36%);
}

/* ── Trio de aparelhos ─────────────────────────────────────── */
.trio {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: end;
    justify-items: center;
}
.trio .tab, .trio .note, .trio .aparelho { max-width: 100%; }

@media (min-width: 900px) {
    /* Tablet à esquerda, notebook à direita e o celular à frente, entre os dois —
       a mesma leitura do mockup de referência. */
    .trio { grid-template-columns: 0.9fr 1.35fr; gap: 0; padding-bottom: 30px; }
    .trio .tab { grid-column: 1; width: 88%; justify-self: end; margin-right: -6%; z-index: 1; }
    .trio .note { grid-column: 2; z-index: 0; }
    .trio .aparelho {
        position: absolute; left: 46%; bottom: -8px; transform: translateX(-50%);
        width: 168px; z-index: 3;
    }
}

/* Reflexo no chão, como na referência. */
.trio-reflexo {
    height: 90px; margin-top: -10px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 70%);
    filter: blur(2px);
    mask-image: linear-gradient(180deg, #000, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    pointer-events: none;
}

/* ── Selos de loja ─────────────────────────────────────────── */
.lojas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.lojas--esquerda { justify-content: flex-start; }

.loja {
    display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--borda);
    border-radius: 12px; padding: 10px 18px; background: rgba(255,255,255,.03);
    transition: border-color .15s ease, transform .12s ease;
}
.loja:hover { border-color: var(--verde); transform: translateY(-1px); }
.loja-txt { text-align: left; line-height: 1.2; }
.loja-txt small { display: block; font-size: .62rem; color: var(--texto-2); }
.loja-txt b { font-size: .9rem; }
/* iPhone ainda não publicado: opacidade menor sinaliza sem impedir o clique. */
.loja--breve { opacity: .6; }
.loja--breve:hover { opacity: 1; }

/* ── Rodapé em colunas ─────────────────────────────────────── */
.rodape-grid { display: grid; gap: 32px; grid-template-columns: 1fr; padding-bottom: 32px; }
@media (min-width: 760px) { .rodape-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } }
.rodape-col h4 { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); margin-bottom: 14px; }
.rodape-col nav { display: grid; gap: 10px; }
.rodape-sobre { color: var(--texto-2); font-size: .88rem; margin-top: 14px; max-width: 42ch; }
.rodape-base { border-top: 1px solid var(--borda); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
    .btn:hover, .cartao:hover { transform: none; }
}

/* ── Prints reais do app dentro dos aparelhos ──────────────── */
.print { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.note-tela .print, .tab-tela .print, .aparelho-tela .print { flex: 1; min-height: 0; height: auto; }
/* Faixa da barra de status alta o bastante para a ilha dinâmica não invadir o print. */
.aparelho-status { min-height: 38px; box-sizing: border-box; flex-shrink: 0; }

/* ── Elementos que "saltam" da tela ────────────────────────── */
.palco { position: relative; padding: 0 40px; }

.salta {
    position: absolute; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 16px;
    background: rgba(28, 28, 28, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(176,212,8,.08);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    white-space: nowrap; line-height: 1.2;
    animation: salta-flutua 5s ease-in-out infinite;
}
.salta b { display: block; font-size: .86rem; }
.salta small { display: block; font-size: .68rem; color: var(--texto-2); }
.salta--dir { right: -48px; }
.salta--esq { left: -52px; }
.salta--2 { animation-delay: -2.5s; }
.salta-icone {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center; font-size: .95rem;
    background: rgba(255,255,255,.08);
}
.salta-icone--v { background: var(--verde); color: #111; font-weight: 800; }
.salta--conquista { border-color: rgba(255,197,49,.45); }
.salta--conquista small { color: #FFC531; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .6rem; }

@keyframes salta-flutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Entrada: o elemento "pula" para fora da tela quando o bloco aparece. */
.anim .revelar .salta, .anim .revelar .medalha-salta { opacity: 0; transform: scale(.4) translateY(30px); }
.anim .revelar--on .salta {
    opacity: 1;
    animation: salta-entra .7s cubic-bezier(.34,1.56,.64,1) .35s both, salta-flutua 5s ease-in-out 1.1s infinite;
}
.anim .revelar--on .salta--2 { animation-delay: .6s, -1.4s; }
@keyframes salta-entra {
    from { opacity: 0; transform: scale(.4) translateY(30px); }
    to { opacity: 1; transform: none; }
}

/* Medalha de conquista saltando do celular, como no app. */
.medalha-salta {
    position: absolute; z-index: 6; left: 50%; top: -38px;
    width: 96px; height: 96px; margin-left: -48px;
    display: grid; place-items: center;
}
.anim .revelar--on .medalha-salta { opacity: 1; transform: none; animation: medalha-pula 1s cubic-bezier(.34,1.56,.64,1) .3s both, medalha-balanca 4s ease-in-out 1.3s infinite; }
.medalha {
    position: relative; z-index: 2;
    width: 84px; height: 84px; border-radius: 50%;
    display: grid; place-items: center; color: #3A2A00;
    background: radial-gradient(circle at 32% 28%, #FFF1A8, #FFC531 45%, #D99A00 100%);
    border: 4px solid #FFE27A;
    box-shadow: 0 0 0 6px rgba(255,197,49,.18), 0 18px 40px rgba(0,0,0,.55), 0 0 40px rgba(255,197,49,.45);
}
.medalha-raios {
    position: absolute; inset: -40px; border-radius: 50%; z-index: 1;
    background: repeating-conic-gradient(rgba(255,197,49,.30) 0deg 10deg, transparent 10deg 30deg);
    mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    animation: raios-gira 12s linear infinite;
}
.faisca {
    position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 2px;
    background: #FFE27A; transform: rotate(45deg);
    animation: faisca-pisca 2.4s ease-in-out infinite;
    left: calc(50% + var(--x) - 4px); top: calc(50% + var(--y) - 4px);
}
.faisca:nth-of-type(2) { animation-delay: -.6s; background: var(--verde); }
.faisca:nth-of-type(3) { animation-delay: -1.2s; }
.faisca:nth-of-type(4) { animation-delay: -1.8s; background: #fff; }

@keyframes medalha-pula {
    0% { opacity: 0; transform: translateY(160px) scale(.3); }
    60% { opacity: 1; transform: translateY(-14px) scale(1.12); }
    100% { opacity: 1; transform: none; }
}
@keyframes medalha-balanca { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-6px); } }
@keyframes raios-gira { to { transform: rotate(360deg); } }
@keyframes faisca-pisca { 0%, 100% { opacity: 0; transform: rotate(45deg) scale(.3); } 50% { opacity: 1; transform: rotate(45deg) scale(1.1); } }

/* No celular da página, os destaques encostam na moldura para não estourar a largura. */
@media (max-width: 700px) {
    .palco { padding: 0 12px; }
    .salta { padding: 8px 11px; }
    .salta b { font-size: .78rem; }
    .salta--dir { right: -10px; }
    .salta--esq { left: -10px; }
}
@media (prefers-reduced-motion: reduce) {
    .salta, .medalha-salta, .medalha-raios, .faisca { animation: none !important; }
}

/* Print do celular: começa sob a barra de status e corta o que sobrar embaixo. */
.print-moldura { flex: 1; min-height: 0; overflow: hidden; }
/* O print inteiro cabe na tela (sem cortar o menu do app embaixo); a sobra
   lateral some no fundo escuro, da mesma cor do app. */
.aparelho-tela .print-moldura { background: #121212; }
.aparelho-tela .print-moldura .print { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
/* Faixa da barra de gestos, para o menu do app não encostar na borda. */
.aparelho-gesto { flex-shrink: 0; height: 22px; display: grid; place-items: center; background: #121212; }
.aparelho-gesto::after { content: ""; width: 34%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.55); }
.trio .aparelho-gesto { height: 13px; }
.trio .aparelho-gesto::after { height: 3px; }

/* Notebook preto, combinando com o celular e o tablet. */
.note-tampa { background: linear-gradient(160deg, #2E2E30, #0C0C0C 42%, #232325); }
.note-base { background: linear-gradient(180deg, #2A2A2C, #121212); }
.note-dobradica { background: rgba(255,255,255,.08); }

/* Celular pequeno do trio: cantos, ilha e moldura na mesma proporção do grande. */
    .trio .aparelho { border-radius: 28px; padding: 6px; }
    .trio .aparelho-tela { border-radius: 23px; }
    .trio .aparelho-brilho { inset: 6px; border-radius: 23px; }
    .trio .aparelho-ilha { top: 6px; height: 13px; width: 30%; }
    .trio .aparelho-status { min-height: 24px; padding: 7px 12px 3px; font-size: .45rem; }
    .trio .aparelho-botao { display: none; }
/* Vídeo-GIF: sem controles nem botões de picture-in-picture por cima. */
video[data-gif] { pointer-events: none; }
video[data-gif]::-webkit-media-controls { display: none !important; }

/* ── Celular (página) ──────────────────────────────────────── */
@media (max-width: 899px) {
    /* Trio vira notebook com o celular encostado no canto: três aparelhos
       empilhados ocupavam três telas de rolagem. */
    .trio { display: block; position: relative; padding: 0 0 46px; }
    .trio .tab { display: none; }
    .trio .note { width: 100%; }
    .trio .aparelho { position: absolute; right: 2%; bottom: 0; width: 26vw; max-width: 130px; margin: 0; z-index: 3; }
    .trio .aparelho-gesto { height: 9px; }
    .trio .aparelho-status { min-height: 18px; padding: 5px 9px 2px; font-size: .38rem; }
    .trio .aparelho-ilha { height: 10px; top: 5px; }
    .trio .aparelho { border-radius: 17px; padding: 4px; }
    .trio .aparelho-tela, .trio .aparelho-brilho { border-radius: 13px; }
    .trio .aparelho-brilho { inset: 4px; }
}
@media (max-width: 700px) {
    /* Destaques dentro da largura da página: fora dela eram cortados. */
    .palco { padding: 0 34px; }
    .salta--dir { right: -26px; }
    .salta--esq { left: -26px; }
    .dupla { min-height: 0; padding: 0 30px; }
    .dupla .salta--esq { left: -22px; }
    .dupla .salta--dir { right: -22px; }
    .aparelho--inclinado { transform: none; }
}

/* Menu das seções no celular (details nativo: funciona sem JavaScript). */
.menu-mob { position: relative; }
.menu-mob summary {
    list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; border: 1px solid var(--borda); color: var(--texto);
}
.menu-mob summary::-webkit-details-marker { display: none; }
.menu-mob nav {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
    display: flex; flex-direction: column; padding: 8px; border-radius: 16px;
    background: #181818; border: 1px solid var(--borda); box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.menu-mob nav a { padding: 12px 14px; border-radius: 10px; color: var(--texto); font-weight: 600; }
.menu-mob nav a:active, .menu-mob nav a:hover { background: rgba(176,212,8,.12); color: var(--verde); }
.menu-mob nav hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 4px; }
@media (min-width: 900px) { .menu-mob { display: none; } }
@media (max-width: 899px) { .topo-acoes .btn-linha { display: none; } .topo-inner { gap: 10px; } }
/* No celular só cabe um aparelho por bloco; no do aluno fica o das conquistas,
   que é o da medalha saltando. */
@media (max-width: 700px) {
    #aluno .dupla .aparelho:nth-child(1) { display: none; }
    #aluno .dupla .aparelho:nth-child(2) {
        display: block; position: relative; right: auto; top: auto;
        width: min(300px, 80vw); margin-top: 40px;
    }
}