/* =========================================================================
   VATSE ACADEMIA · página comercial
   -------------------------------------------------------------------------
   Esta folha foi refeita. A anterior falava brutalismo: cantos vivos, borda
   preta de 2px com sombra deslocada, foto dessaturada com mira de alvo,
   ruído sobre o herói, cinco lajes quase pretas e um bloco de ciano chapado
   ocupando meia tela. O dono pediu o contrário, e o contrário já estava
   escrito: é o padrão premium aprovado para os públicos da Vatse.

   As quatro decisões que sustentam a página:

   1. CLARO E AREJADO. O papel é branco, a alternância é entre branco e um
      cinza-gelo. Sobrou UM momento escuro, o fechamento, que é onde a
      mudança de atmosfera ainda significa alguma coisa.

   2. COR SÓ NO ACENTO. O ciano da marca vive em olho de seção, ícone,
      barra, sublinhado e no botão principal. Ele nunca pinta uma seção
      inteira. Como texto ele desce para --va-accent-ink, porque #20c7eb
      sobre branco rende 2.04:1 e some.

   3. FOTOGRAFIA DE VERDADE, EM COR. Sem grayscale, sem escurecer, sem véu
      de gradiente. Canto de 24px e sombra difusa.

   4. TIPOGRAFIA QUE RESPIRA. Peso 800 no lugar de 900, entreletra -.022em
      no lugar de -.055em, e o título de seção sai de 5.2rem para 3.4rem.
      No herói antigo as palavras encostavam umas nas outras.

   Cartão do padrão: borda 1px + sombra difusa + elevação no hover. Nunca
   borda colorida grossa, nunca sombra sólida deslocada.
   ========================================================================= */

.vac-sales {
    --va-accent: var(--sv-accent, #20c7eb);
    --va-accent-rgb: var(--sv-accent-rgb, 32, 199, 235);
    /* O acento como TINTA precisa de outro valor: o mesmo ciano que brilha
       preenchendo um botão desaparece quando vira texto sobre branco. */
    --va-accent-ink: #0b6d85;
    --va-accent-deep: #06272f;

    --va-ink: #0d1417;
    --va-ink-2: #38464c;
    --va-muted: #5f6b71;
    --va-paper: #ffffff;
    --va-soft: #f5f8f9;
    --va-line: #e6ecee;
    --va-dark: #0b1114;

    --va-sombra: 0 18px 44px -26px rgba(13, 20, 23, .22);
    --va-sombra-alta: 0 30px 70px -34px rgba(13, 20, 23, .3);
    --va-raio: 22px;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--va-paper);
    color: var(--va-ink);
    overflow-x: clip;
}

.vac-sales * { box-sizing: border-box; }
.vac-sales img { display: block; max-width: 100%; }
.vac-sales a { text-decoration: none; }

.vac-sales h1,
.vac-sales h2,
.vac-sales h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--va-ink);
}

[data-vac-reveal],
[data-vac-stagger] > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .68s cubic-bezier(.2, .7, .2, 1), transform .68s cubic-bezier(.2, .7, .2, 1);
}

[data-vac-reveal].is-visible,
[data-vac-stagger] > .is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   Olho de seção e botões
   -------------------------------------------------------------------------
   O olho vira pílula leve com borda sutil, que é o padrão dos outros
   públicos. Antes era um código monoespaçado colado no título.
   ------------------------------------------------------------------------- */

.vac-section-code,
.vac-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--va-line);
    background: var(--va-soft);
    /* O olho do herói quebra em duas linhas no celular: com line-height 1 as
       duas ficam coladas dentro da pílula. */
    font: 800 .68rem/1.45 'Plus Jakarta Sans', 'Inter', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--va-accent-ink);
}

.vac-kicker:before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--va-accent);
}

.vac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 800 .82rem/1 'Plus Jakarta Sans', 'Inter', sans-serif;
    letter-spacing: .01em;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.vac-btn:hover { transform: translateY(-2px); }

/* O ciano preenchido pede tinta escura: branco sobre ele rende 2.26:1. */
.vac-btn-hot {
    background: var(--va-accent);
    color: var(--va-accent-deep);
    box-shadow: 0 16px 34px -18px rgba(var(--va-accent-rgb), .8);
}

.vac-btn-hot:hover { box-shadow: 0 22px 44px -18px rgba(var(--va-accent-rgb), .9); }

.vac-btn-line {
    background: var(--va-paper);
    color: var(--va-ink);
    border-color: #d5dee1;
}

.vac-btn-line:hover { border-color: #b5c4c9; }

.vac-btn-dark { background: var(--va-ink); color: #fff; }
.vac-btn-dark:hover { background: #04191f; }

.vac-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vac-actions-center { justify-content: center; }

/* -------------------------------------------------------------------------
   Herói
   ------------------------------------------------------------------------- */

.vac-hero {
    position: relative;
    padding: clamp(56px, 6vw, 84px) 0 0;
    background:
        radial-gradient(1100px 520px at 88% 4%, rgba(var(--va-accent-rgb), .10), transparent 62%),
        linear-gradient(180deg, #fbfdfd, var(--va-paper) 60%);
}

.vac-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: clamp(36px, 4vw, 58px);
    align-items: center;
    padding-bottom: clamp(56px, 6vw, 90px);
}

.vac-hero-copy h1 {
    /* 6.6rem com -.055em fazia "Mais aluno" virar "Maisaluno". */
    font-size: clamp(2.6rem, 4.6vw, 4.2rem);
    line-height: 1.03;
    letter-spacing: -.028em;
    margin: 20px 0 22px;
    max-width: 13ch;
}

.vac-hero-copy h1 em {
    font-style: normal;
    color: var(--va-accent-ink);
}

.vac-hero-copy > p {
    color: var(--va-muted);
    line-height: 1.78;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    max-width: 50ch;
}

.vac-signal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--va-muted);
}

.vac-signal b {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c86f;
    margin-right: 7px;
}

.vac-hero-stage { position: relative; min-height: 600px; }

/* A fotografia volta a ter cor: era ela que carregava a energia da academia
   e o filtro cinza tirava exatamente isso. */
.vac-athlete {
    position: absolute;
    right: 0;
    top: 0;
    width: 78%;
    height: 62%;
    margin: 0;
    border-radius: var(--va-raio);
    overflow: hidden;
    box-shadow: var(--va-sombra-alta);
}

.vac-athlete img { width: 100%; height: 100%; object-fit: cover; }

.vac-os {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 78%;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--va-paper);
    border: 1px solid var(--va-line);
    box-shadow: var(--va-sombra-alta);
}

.vac-os-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 15px;
    border-bottom: 1px solid var(--va-line);
    font-size: .54rem;
    letter-spacing: .12em;
    color: var(--va-muted);
}

.vac-os-top > span { display: flex; gap: 5px; }
.vac-os-top i { width: 8px; height: 8px; border-radius: 50%; background: #dbe3e6; }
.vac-os-top i:first-child { background: #ff9c93; }
.vac-os-top i:nth-child(2) { background: #ffd070; }
.vac-os-top i:nth-child(3) { background: #6fd99a; }
.vac-os-top small { color: var(--va-accent-ink); text-transform: uppercase; }
.vac-os img { width: 100%; height: auto; }

/* Os cartões flutuantes viram vidro sobre a foto, não caixas pretas. */
.vac-float {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: var(--va-sombra);
}

.vac-float small {
    display: block;
    font-size: .5rem;
    letter-spacing: .1em;
    color: var(--va-muted);
}

.vac-float strong { display: block; font-size: .82rem; margin-top: 3px; color: var(--va-ink); }
.vac-float span { display: block; font-size: .58rem; color: var(--va-muted); margin-top: 2px; }
.vac-float-retention { right: 4%; top: 7%; }
/* O cartão de check-in caía sobre o título do painel ("Visão Geral") e
   depois sobre o menu. Ancorado embaixo, ele encosta no canto inferior
   esquerdo da moldura, onde só existe o chip do usuário. */
.vac-float-checkin { left: -22px; bottom: 7%; }

.vac-ring {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(var(--va-accent) 82%, #e7eef0 0);
    font: 800 .6rem/1 'Plus Jakarta Sans', sans-serif;
    color: var(--va-ink);
}

.vac-ring span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--va-paper);
}

.vac-float-checkin > i { color: var(--va-accent-ink); font-size: 1.1rem; }

.vac-phone {
    position: absolute;
    z-index: 5;
    /* Puxado para fora da moldura: sobre o painel ele cobria a lista de
       alunos recentes, que é justamente a prova da tela. */
    right: -34px;
    bottom: -26px;
    width: 194px;
    padding: 14px 14px 18px;
    border-radius: 28px;
    background: var(--va-paper);
    border: 7px solid var(--va-ink);
    box-shadow: var(--va-sombra-alta);
}

.vac-phone-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .54rem;
    letter-spacing: .1em;
    color: var(--va-muted);
    margin-bottom: 11px;
}

.vac-phone-pass {
    padding: 13px;
    border-radius: 16px;
    background: linear-gradient(140deg, rgba(var(--va-accent-rgb), .16), rgba(var(--va-accent-rgb), .05));
    margin-bottom: 10px;
}

.vac-phone-pass small { display: block; font-size: .46rem; letter-spacing: .1em; color: var(--va-accent-ink); }
.vac-phone-pass strong { display: block; font-size: .8rem; margin: 6px 0 7px; }

.vac-phone-pass > span {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--va-ink);
    color: #fff;
    font-size: .44rem;
    letter-spacing: .1em;
}

.vac-phone-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 9px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--va-line);
    font-size: .56rem;
}

.vac-phone-row:last-of-type { border-bottom: 0; }
.vac-phone-row i { color: var(--va-accent-ink); }
.vac-phone-row b { display: block; font-size: .64rem; }
.vac-phone-row small { display: block; color: var(--va-muted); margin-top: 2px; }

.vac-phone-chart { display: flex; align-items: end; gap: 5px; height: 46px; margin-top: 12px; }

.vac-phone-chart span {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: rgba(var(--va-accent-rgb), .28);
}

.vac-phone-chart span:nth-child(2n) { background: var(--va-accent); }

/* Trilho do fluxo: faixa leve, não uma barra preta. */
.vac-rail {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--va-line);
    border-bottom: 1px solid var(--va-line);
    background: var(--va-soft);
}

.vac-rail-inner {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    overflow: auto;
    white-space: nowrap;
}

.vac-rail-inner span {
    font: 800 .68rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    color: var(--va-ink-2);
}

.vac-rail-inner i { color: var(--va-accent); font-size: .6rem; }
.vac-rail-inner:focus-visible { outline: 2px solid var(--va-accent-ink); outline-offset: -4px; }

/* -------------------------------------------------------------------------
   Cabeçalhos de seção
   -------------------------------------------------------------------------
   O olho fica ACIMA do título, empilhado. Nas seções 04 e 06 ele estava numa
   coluna ao lado, e o dono apontou isso como erro nas duas.
   ------------------------------------------------------------------------- */

.vac-circuit-head,
.vac-control-heading,
.vac-members-heading,
.vac-public-head {
    display: block;
    max-width: 860px;
    margin-bottom: clamp(38px, 4vw, 58px);
}

.vac-circuit-head h2,
.vac-control-heading h2,
.vac-members-heading h2,
.vac-public-head h2,
.vac-money h2,
.vac-radar-copy h2 {
    font-size: clamp(1.9rem, 3.2vw, 3.4rem);
    line-height: 1.08;
    margin: 18px 0 0;
}

/* 18px depois de um título de quatro linhas em 46px lê como texto colado.
   O apoio precisa de um respiro proporcional ao tamanho do título. */
.vac-circuit-head p,
.vac-public-head p,
.vac-radar-copy p,
.vac-money-lead {
    margin: clamp(20px, 2vw, 30px) 0 0;
    max-width: 58ch;
    color: var(--va-muted);
    line-height: 1.78;
}

.vac-public-head .vac-btn { margin-top: 26px; }

/* -------------------------------------------------------------------------
   01 · O circuito
   ------------------------------------------------------------------------- */

.vac-circuit { padding: clamp(76px, 8vw, 124px) 0; background: var(--va-paper); }

.vac-circuit-track {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 14px;
}

/* O cartão do padrão: borda fina, sombra difusa, elevação no hover. A versão
   anterior usava borda preta de 2px com um bloco sólido deslocado atrás. */
.vac-circuit-track article {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 28px;
    border-radius: var(--va-raio);
    border: 1px solid var(--va-line);
    background: var(--va-paper);
    box-shadow: var(--va-sombra);
    transition: transform .25s ease, box-shadow .25s ease;
}

.vac-circuit-track article:hover { transform: translateY(-4px); box-shadow: var(--va-sombra-alta); }

.vac-circuit-track b {
    font: 800 .68rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    color: var(--va-accent-ink);
}

.vac-circuit-track article > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(var(--va-accent-rgb), .12);
    color: var(--va-accent-ink);
    font-size: 1.05rem;
    margin: 20px 0 18px;
}

.vac-circuit-track h3 { font-size: 1.12rem; margin: 0 0 10px; }
.vac-circuit-track p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--va-muted); }

.vac-circuit-arrow {
    align-self: center;
    color: #c3d0d4;
    font-size: 1.1rem;
}

.vac-circuit-proof {
    margin: clamp(42px, 5vw, 70px) 0 0;
    border-radius: var(--va-raio);
    overflow: hidden;
    border: 1px solid var(--va-line);
    background: var(--va-paper);
    box-shadow: var(--va-sombra);
}

.vac-circuit-proof img { width: 100%; height: auto; }

.vac-circuit-proof figcaption {
    padding: 16px 22px 20px;
    border-top: 1px solid var(--va-line);
    font-size: .84rem;
    color: var(--va-muted);
}

/* -------------------------------------------------------------------------
   02 · Control room
   ------------------------------------------------------------------------- */

.vac-control { padding: clamp(76px, 8vw, 124px) 0; background: var(--va-soft); }

.vac-control-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1.62fr .38fr;
    gap: 16px;
    align-items: start;
}

.vac-screen-main {
    margin: 0;
    border-radius: var(--va-raio);
    overflow: hidden;
    background: var(--va-paper);
    border: 1px solid var(--va-line);
    box-shadow: var(--va-sombra-alta);
}

.vac-screen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--va-line);
    font: 800 .64rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--va-ink-2);
}

.vac-screen-top small { font-weight: 600; letter-spacing: .04em; color: var(--va-muted); text-transform: none; }
.vac-screen-main img { width: 100%; height: auto; }

/* Os módulos deixam de flutuar soltos por cima da tela e viram uma coluna de
   indicadores ao lado dela: quem lê números não deveria brigar com o print. */
.vac-control-stage .vac-module {
    position: static;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--va-line);
    background: var(--va-paper);
    box-shadow: var(--va-sombra);
}

.vac-module small {
    display: block;
    font: 800 .58rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .1em;
    color: var(--va-muted);
}

.vac-module strong { display: block; font-size: 1.65rem; margin: 10px 0 6px; }
.vac-module span { display: block; font-size: .72rem; color: var(--va-muted); }
.vac-module span i { color: var(--va-accent-ink); margin-right: 4px; }

.vac-control-stage .vac-module-a { grid-column: 2; grid-row: 1; }
.vac-control-stage .vac-module-b { grid-column: 2; grid-row: 2; }
.vac-control-stage .vac-module-c { grid-column: 2; grid-row: 3; }
.vac-control-stage .vac-module-d { grid-column: 2; grid-row: 4; }
.vac-control-stage .vac-screen-main { grid-column: 1; grid-row: 1 / span 4; }

/* -------------------------------------------------------------------------
   03 · Radar de retenção
   ------------------------------------------------------------------------- */

.vac-radar { padding: clamp(76px, 8vw, 124px) 0; background: var(--va-paper); }

.vac-radar-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: clamp(36px, 4vw, 64px);
    align-items: center;
}

/* Sem mira de alvo e sem filtro: a foto é da academia, não de um dossiê. */
.vac-radar-photo {
    position: relative;
    min-height: 520px;
    border-radius: var(--va-raio);
    overflow: hidden;
    box-shadow: var(--va-sombra-alta);
}

.vac-radar-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vac-radar-tag {
    position: absolute;
    z-index: 3;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    color: var(--va-ink);
    font: 800 .66rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .04em;
    box-shadow: var(--va-sombra);
}

.vac-radar-tag-a { left: 7%; top: 12%; }
.vac-radar-tag-b { right: 7%; top: 46%; }
.vac-radar-tag-c { left: 12%; bottom: 11%; }

.vac-alert-stack { display: grid; gap: 10px; margin-top: 30px; }

.vac-alert-stack > div {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--va-line);
    background: var(--va-paper);
    box-shadow: var(--va-sombra);
}

.vac-alert-stack i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(var(--va-accent-rgb), .12);
    color: var(--va-accent-ink);
}

.vac-alert-stack b { display: block; font-size: .95rem; font-weight: 700; }
.vac-alert-stack small { display: block; font-size: .78rem; color: var(--va-muted); margin-top: 3px; }

.vac-alert-stack strong {
    font: 800 .68rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .1em;
    color: var(--va-accent-ink);
}

/* -------------------------------------------------------------------------
   04 · Portal do aluno
   ------------------------------------------------------------------------- */

.vac-members { padding: clamp(76px, 8vw, 124px) 0; background: var(--va-soft); }

.vac-member-devices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
    justify-items: center;
}

.vac-member-phone {
    width: 100%;
    max-width: 300px;
    padding: 16px 16px 20px;
    border-radius: 30px;
    background: var(--va-paper);
    border: 8px solid var(--va-ink);
    box-shadow: var(--va-sombra-alta);
}

/* Os aparelhos ficavam tortos, um empurrando o outro. Alinhados, eles leem
   como três telas do mesmo app, que é o que a seção afirma. */
.vac-member-phone-a,
.vac-member-phone-b,
.vac-member-phone-c { transform: none; }
.vac-member-phone-b { margin-top: -22px; }

.vac-member-phone header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 800 .6rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    color: var(--va-muted);
    margin-bottom: 13px;
}

.vac-member-phone header i { color: var(--va-accent-ink); }

.vac-member-cover {
    position: relative;
    margin: 0 0 14px;
    height: 128px;
    border-radius: 16px;
    overflow: hidden;
}

.vac-member-cover--wide { height: 104px; }
.vac-member-cover img { width: 100%; height: 100%; object-fit: cover; }

.vac-member-cover figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font: 800 .56rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .08em;
    color: var(--va-ink);
}

.vac-member-identity { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }

.vac-member-identity > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(var(--va-accent-rgb), .16);
    font: 800 .8rem/1 'Plus Jakarta Sans', sans-serif;
    color: var(--va-accent-ink);
}

.vac-member-identity h3 { font-size: .92rem; margin: 0; }
.vac-member-identity small { font-size: .7rem; color: var(--va-muted); }

.vac-member-qr {
    display: grid;
    place-items: center;
    margin: 14px 0 10px;
    padding: 20px;
    border-radius: 16px;
    background: var(--va-soft);
    border: 1px solid var(--va-line);
    font-size: 2.6rem;
    color: var(--va-ink);
}

.vac-member-phone > p {
    margin: 0;
    text-align: center;
    font-size: .62rem;
    letter-spacing: .1em;
    color: var(--va-muted);
}

.vac-class-mini {
    display: grid;
    gap: 3px;
    padding: 12px 0;
    border-bottom: 1px solid var(--va-line);
}

.vac-class-mini small { font-size: .58rem; letter-spacing: .08em; color: var(--va-muted); }
.vac-class-mini h3 { font-size: .92rem; margin: 0; }
.vac-class-mini span { font-size: .7rem; color: var(--va-accent-ink); font-weight: 700; }

.vac-member-phone button {
    width: 100%;
    margin-top: 16px;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--va-accent);
    color: var(--va-accent-deep);
    font: 800 .72rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .08em;
    cursor: pointer;
}

.vac-kpi-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--va-line);
}

.vac-kpi-mini span { font-size: .6rem; letter-spacing: .08em; color: var(--va-muted); }
.vac-kpi-mini strong { font-size: .92rem; }

.vac-bars-mini { display: flex; align-items: end; gap: 5px; height: 54px; margin: 16px 0 8px; }

.vac-bars-mini i {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: rgba(var(--va-accent-rgb), .3);
}

.vac-bars-mini i:nth-child(3),
.vac-bars-mini i:nth-child(5),
.vac-bars-mini i:nth-child(7) { background: var(--va-accent); }
.vac-bars-mini i:nth-child(1) { height: 42%; }
.vac-bars-mini i:nth-child(2) { height: 58%; }
.vac-bars-mini i:nth-child(3) { height: 78%; }
.vac-bars-mini i:nth-child(4) { height: 50%; }
.vac-bars-mini i:nth-child(5) { height: 88%; }
.vac-bars-mini i:nth-child(6) { height: 64%; }
.vac-bars-mini i:nth-child(7) { height: 96%; }

.vac-member-phone-c > small { display: block; font-size: .62rem; color: var(--va-muted); }

/* -------------------------------------------------------------------------
   05 · Recorrência
   -------------------------------------------------------------------------
   Era aqui que o ciano chapado tomava meia tela. A cor agora está onde ela
   informa: nas barras de peso de cada plano.
   ------------------------------------------------------------------------- */

.vac-money { padding: clamp(76px, 8vw, 124px) 0; background: var(--va-paper); }

.vac-money-grid {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: clamp(36px, 4vw, 64px);
    align-items: center;
}

.vac-money-board {
    border-radius: var(--va-raio);
    border: 1px solid var(--va-line);
    background: var(--va-paper);
    box-shadow: var(--va-sombra-alta);
    overflow: hidden;
}

.vac-money-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--va-line);
    background: var(--va-soft);
}

.vac-money-head span {
    font: 800 .64rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    color: var(--va-muted);
}

.vac-money-head strong { font: 800 1rem/1 'Plus Jakarta Sans', sans-serif; color: var(--va-ink); }

.vac-money-row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--va-line);
}

.vac-money-row > div:first-child span { display: block; font-weight: 700; font-size: .95rem; }
.vac-money-row > div:first-child small { display: block; font-size: .76rem; color: var(--va-muted); margin-top: 3px; }

.vac-money-bar { height: 8px; border-radius: 999px; background: #eef3f4; overflow: hidden; }
.vac-money-bar i { display: block; height: 100%; border-radius: 999px; background: var(--va-accent); }
.vac-money-row b { font: 800 .98rem/1 'Plus Jakarta Sans', sans-serif; color: var(--va-ink); }

.vac-money-total { padding: 22px 24px; background: var(--va-soft); }
.vac-money-total > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

.vac-money-total span {
    font: 800 .64rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .12em;
    color: var(--va-muted);
}

.vac-money-total strong { font: 800 1.35rem/1 'Plus Jakarta Sans', sans-serif; color: var(--va-ink); }
.vac-money-split { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: .78rem; }
.vac-money-ok { color: #1a7f4b; }
.vac-money-due { color: #9a6412; }

/* -------------------------------------------------------------------------
   06 · Sua marca na rua
   ------------------------------------------------------------------------- */

.vac-public { padding: clamp(76px, 8vw, 124px) 0; background: var(--va-soft); }

.vac-public-collage {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    min-height: 460px;
}

.vac-pub-browser {
    position: relative;
    grid-row: 1 / span 2;
    margin: 0;
    border-radius: var(--va-raio);
    overflow: hidden;
    box-shadow: var(--va-sombra-alta);
}

.vac-pub-browser img { width: 100%; height: 100%; object-fit: cover; }

.vac-pub-browser figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 26px 24px;
    background: linear-gradient(180deg, transparent, rgba(8, 14, 16, .82));
    color: #fff;
}

.vac-pub-browser figcaption span {
    display: block;
    font: 800 .64rem/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .82);
}

.vac-pub-browser figcaption b { display: block; font-size: 1.5rem; margin-top: 8px; }

.vac-pub-shot {
    margin: 0;
    border-radius: var(--va-raio);
    overflow: hidden;
    box-shadow: var(--va-sombra);
}

.vac-pub-shot img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   Átomos do núcleo em superfície clara
   -------------------------------------------------------------------------
   Planos, dúvidas e captação vêm de core.css. Sobre papel eles precisam das
   quatro correções de sempre: tinta da superfície, botão de vidro que some,
   sublinhado apagado pelo reset de link e respiro entre as seções.
   ------------------------------------------------------------------------- */

.vac-components { background: var(--va-paper); }
.vac-componente { padding: clamp(72px, 8vw, 120px) 0; }
.vac-componente + .vac-componente { padding-top: 0; }
.vac-componente .vac-section-code { margin-bottom: 18px; }

.vac-componente h2 {
    font-size: clamp(1.9rem, 3.2vw, 3.4rem);
    line-height: 1.08;
    margin: 18px 0 0;
}

.vac-componente-apoio {
    max-width: 60ch;
    margin: clamp(20px, 2vw, 30px) 0 clamp(38px, 4vw, 58px);
    color: var(--va-muted);
    line-height: 1.78;
}
.vac-componente .sv-planos, .vac-componente .sv-duvidas, .vac-componente .sv-lead { padding: 0; background: transparent; }
.vac-componente .sv-planos__nota { margin-top: clamp(26px, 3vw, 38px); }

.vac-components .sc-btn-glass { background: var(--va-paper); color: var(--va-ink); border: 1px solid #d5dee1; }
.vac-components .sc-btn-glass:hover { background: var(--va-soft); color: var(--va-ink); border-color: #b5c4c9; }
.vac-components .sv-plano { border-radius: var(--va-raio); background: var(--va-paper); box-shadow: var(--va-sombra); }
.vac-components .sv-plano--ancora { box-shadow: var(--va-sombra-alta); }
.vac-components .vatse-commercial-field input { background: var(--va-paper); border-color: #d5dee1; color: var(--va-ink); }
.vac-components { --sv-accent-ink: #0b6d85; }

.vac-components .sv-planos__nota a,
.vac-components .sv-duvidas__aside a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Fechamento
   -------------------------------------------------------------------------
   O único momento escuro da página. Com cinco lajes pretas ele não dizia
   nada; sozinho, ele fecha.
   ------------------------------------------------------------------------- */

.vac-final {
    padding: clamp(88px, 9vw, 148px) 0;
    background: radial-gradient(900px 420px at 50% 0%, rgba(var(--va-accent-rgb), .16), transparent 64%), var(--va-dark);
    text-align: center;
}

.vac-final-inner { max-width: 920px; margin-inline: auto; }
.vac-final .vac-section-code { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #7fe1f5; }

.vac-final h2 {
    font-size: clamp(2rem, 3.6vw, 3.6rem);
    line-height: 1.08;
    margin: 20px auto 0;
    max-width: 20ch;
    color: #fff;
}

.vac-final h2 em { font-style: normal; color: #7fe1f5; }
.vac-final .vac-btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.vac-final .vac-btn-line:hover { border-color: rgba(255, 255, 255, .5); }

/* -------------------------------------------------------------------------
   Telas menores
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .vac-hero-grid,
    .vac-radar-grid,
    .vac-money-grid { grid-template-columns: 1fr; }

    /* margin-inline:auto num item de grade cancela o stretch: o palco passava
       a se medir pelo conteúdo, e como todo o conteúdo dele é absoluto isso
       dava largura ZERO. A foto e o painel do herói sumiam no celular. */
    .vac-hero-stage { min-height: 520px; width: 100%; max-width: 720px; margin-inline: auto; }
    .vac-control-stage { grid-template-columns: 1fr; }
    .vac-control-stage .vac-screen-main { grid-column: 1; grid-row: auto; }
    .vac-control-stage .vac-module { grid-column: 1 !important; grid-row: auto !important; }
    .vac-control-stage { grid-template-areas: none; }
    .vac-circuit-track { grid-template-columns: repeat(2, 1fr); }
    .vac-circuit-arrow { display: none; }
    .vac-member-devices { grid-template-columns: repeat(2, 1fr); }
    .vac-member-phone-b { margin-top: 0; }
    .vac-public-collage { grid-template-columns: 1fr; grid-template-rows: auto; }
    .vac-pub-browser { grid-row: auto; min-height: 320px; }
    .vac-pub-shot { min-height: 220px; }
}

@media (max-width: 720px) {
    .vac-hero-copy h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
    .vac-actions { display: grid; }
    .vac-btn { width: 100%; }
    /* A composição em camadas do herói é feita para uma tela larga. Em 390px
       os cartões flutuantes viram colunas de uma palavra e o celular cobre o
       painel. No lugar de encolher tudo, o palco vira empilhamento: foto e
       painel, um sob o outro, em tamanho legível. O celular sai porque a
       seção 04 já mostra três telas do portal, maiores e no contexto certo. */
    .vac-hero-stage { min-height: 0; display: grid; gap: 14px; }
    .vac-athlete,
    .vac-os { position: static; width: 100%; }
    .vac-athlete { height: 210px; }
    .vac-float,
    .vac-phone { display: none; }
    .vac-circuit-track,
    .vac-member-devices { grid-template-columns: 1fr; }
    .vac-money-row { grid-template-columns: 1fr auto; }
    .vac-money-bar { grid-column: 1 / -1; order: 3; }
    .vac-rail-inner { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    [data-vac-reveal],
    [data-vac-stagger] > * { opacity: 1; transform: none; transition: none !important; }
}