/* =============================================================================
   MENTORIA PERFORMANCE — Folha de estilo
   -----------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset e base
   3.  Layout
   4.  Tipografia de seção
   5.  Botões
   6.  Componentes
   7.  Cabeçalho
   8.  Hero
   9.  Currículo
   10. Público
   11. Benefícios
   12. Depoimentos e lightbox
   13. Mentor
   14. Oferta
   15. FAQ
   16. CTA final
   17. Rodapé e barra fixa
   18. Animações
   19. Responsivo
   ========================================================================== */


/* 1. DESIGN TOKENS ========================================================= */

:root {
    /* Superfícies — do mais profundo ao mais elevado */
    --fundo-base:      #050607;
    --fundo-superficie:#0A0C0D;
    --fundo-elevado:   #101314;
    --fundo-cartao:    rgba(255, 255, 255, 0.028);
    --fundo-vidro:     rgba(8, 10, 11, 0.82);

    /* Texto */
    --texto-primario:  #F2F5F4;
    --texto-secundario:#A9B2AF;
    --texto-terciario: #79817F;

    /* Acento — verde herdado da identidade Performance Trade */
    --acento:          #2FD41B;
    --acento-claro:    #7CFC3A;
    --acento-profundo: #12930A;
    --acento-tenue:    rgba(47, 212, 27, 0.10);
    --acento-borda:    rgba(47, 212, 27, 0.32);
    --acento-sobre:    #04170A;
    --acento-gradiente:linear-gradient(135deg, var(--acento-claro) 0%, var(--acento) 48%, var(--acento-profundo) 100%);

    /* Bordas */
    --borda-sutil:  rgba(255, 255, 255, 0.07);
    --borda-media:  rgba(255, 255, 255, 0.12);
    --borda-forte:  rgba(255, 255, 255, 0.20);

    /* Tipografia */
    --fonte-display: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --fonte-corpo:   'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

    --t-display: clamp(2.15rem, 1.2rem + 4.6vw, 4.6rem);
    --t-h2:      clamp(1.85rem, 1.25rem + 2.6vw, 3rem);
    --t-h3:      clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    --t-corpo-g: clamp(1.02rem, 0.97rem + 0.28vw, 1.18rem);
    --t-corpo:   1rem;
    --t-pequeno: 0.875rem;
    --t-micro:   0.75rem;

    /* Espaçamento — base 8pt */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
    --e-9: 6rem;     --e-10: 8rem;

    --secao-y: clamp(4.5rem, 3rem + 7vw, 8rem);

    /* Raios */
    --raio-p: 8px;
    --raio-m: 14px;
    --raio-g: 22px;
    --raio-pill: 999px;

    /* Sombras */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
    --sombra-3: 0 32px 72px -24px rgba(0, 0, 0, 0.85);
    --brilho-acento: 0 12px 40px -12px rgba(47, 212, 27, 0.45);

    /* Movimento */
    --transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicao-lenta: 480ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Estrutura */
    --largura-max: 1200px;
    --altura-cabecalho: 72px;
}


/* 2. RESET E BASE ========================================================== */

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

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
    /* Sem overflow-x aqui de propósito: tanto `hidden` quanto `clip` na raiz
       fazem o position: sticky do retrato do mentor parar de funcionar.
       O scroll lateral é evitado na origem — nenhum elemento estoura a viewport. */
}

body {
    background-color: var(--fundo-base);
    color: var(--texto-secundario);
    font-family: var(--fonte-corpo);
    font-size: var(--t-corpo);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.sem-rolagem { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--fonte-display);
    color: var(--texto-primario);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-weight: 700;
    text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
    background: var(--acento);
    color: var(--acento-sobre);
}

:focus-visible {
    outline: 2px solid var(--acento-claro);
    outline-offset: 3px;
    border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fundo-base); }
::-webkit-scrollbar-thumb {
    background: #23282a;
    border-radius: var(--raio-pill);
    border: 2px solid var(--fundo-base);
}
::-webkit-scrollbar-thumb:hover { background: #333a3c; }

.pular-para-conteudo {
    position: absolute;
    top: -100px;
    left: var(--e-4);
    z-index: 200;
    padding: var(--e-3) var(--e-5);
    background: var(--acento);
    color: var(--acento-sobre);
    font-weight: 600;
    border-radius: var(--raio-p);
    transition: top var(--transicao);
}
.pular-para-conteudo:focus { top: var(--e-4); }

.icone {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}


/* 3. LAYOUT ================================================================ */

.container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--estreito { max-width: 820px; }

.secao {
    position: relative;
    padding-block: var(--secao-y);
}

/* Faixas alternadas para dar ritmo vertical à página */
.secao--publico,
.secao--mentor,
.secao--faq { background: var(--fundo-superficie); }

.secao--curriculo::before,
.secao--beneficios::before,
.secao--oferta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(47, 212, 27, 0.07), transparent 70%);
    pointer-events: none;
}

.secao > .container { position: relative; z-index: 1; }

.secao__rodape {
    display: flex;
    justify-content: center;
    margin-top: var(--e-8);
}


/* 4. TIPOGRAFIA DE SEÇÃO =================================================== */

.sobretitulo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--fonte-display);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: var(--e-4);
}

.sobretitulo::before {
    content: '';
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--acento));
}

.secao__cabecalho {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    text-align: center;
}

.secao__cabecalho--esquerda {
    margin-inline: 0;
    text-align: left;
    margin-bottom: var(--e-6);
}

.secao__cabecalho--esquerda .sobretitulo::before { display: none; }

.secao__titulo { font-size: var(--t-h2); }

.secao__apoio {
    margin-top: var(--e-4);
    font-size: var(--t-corpo-g);
    color: var(--texto-secundario);
    max-width: 62ch;
}

.secao__cabecalho:not(.secao__cabecalho--esquerda) .secao__apoio {
    margin-inline: auto;
}

.destaque {
    color: var(--acento);
    background: linear-gradient(180deg, var(--acento-claro), var(--acento));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.prosa p + p { margin-top: var(--e-4); }
.prosa p {
    font-size: var(--t-corpo-g);
    color: var(--texto-secundario);
}
.prosa p:first-child { color: var(--texto-primario); }


/* 5. BOTÕES ================================================================ */

.botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 48px;
    padding: 0.85rem 1.6rem;
    font-family: var(--fonte-display);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: center;
    border-radius: var(--raio-pill);
    transition: transform var(--transicao), box-shadow var(--transicao),
                background-color var(--transicao), border-color var(--transicao), color var(--transicao);
    will-change: transform;
}

.botao__seta {
    width: 1.05em;
    height: 1.05em;
    transition: transform var(--transicao);
}

.botao:hover .botao__seta { transform: translateX(4px); }

.botao--primario {
    background: var(--acento-gradiente);
    color: var(--acento-sobre);
    box-shadow: var(--brilho-acento);
}

.botao--primario::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 55%);
    opacity: 0.9;
    pointer-events: none;
}

.botao--primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 48px -12px rgba(47, 212, 27, 0.6);
}

.botao--primario:active { transform: translateY(0); }

.botao--fantasma {
    background: rgba(255, 255, 255, 0.03);
    color: var(--texto-primario);
    border: 1px solid var(--borda-media);
    backdrop-filter: blur(8px);
}

.botao--fantasma:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--borda-forte);
    transform: translateY(-2px);
}

.botao--pequeno {
    min-height: 42px;
    padding: 0.6rem 1.2rem;
    font-size: 0.84rem;
}

/* No mobile o rótulo longo do CTA cabe em uma linha só com a caixa mais
   justa; a partir de 600px o botão volta ao tamanho cheio. */
.botao--grande {
    min-height: 56px;
    padding: 1.05rem 1.5rem;
    font-size: 0.96rem;
}

@media (min-width: 600px) {
    .botao--grande {
        padding: 1.05rem 2.2rem;
        font-size: 1.02rem;
    }
}

.botao--bloco { display: flex; width: 100%; }


/* 6. COMPONENTES =========================================================== */

/* Selo / badge */
.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.45rem 0.95rem 0.45rem 0.75rem;
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: var(--texto-primario);
    background: var(--acento-tenue);
    border: 1px solid var(--acento-borda);
    border-radius: var(--raio-pill);
}

.selo__pulso {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento);
    flex: none;
}

.selo__pulso::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--acento);
    animation: pulsar 2.4s ease-out infinite;
}

/* Lista com checks */
.lista-checada {
    display: grid;
    gap: var(--e-3);
    margin-bottom: var(--e-6);
}

.lista-checada li {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    font-size: var(--t-corpo-g);
    color: var(--texto-primario);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--borda-sutil);
}

.lista-checada li:last-child { border-bottom: 0; }

.lista-checada--compacta li {
    font-size: var(--t-corpo);
    padding: var(--e-2) 0;
    color: var(--texto-secundario);
}

.lista-checada__marca {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--acento-tenue);
    border: 1px solid var(--acento-borda);
    color: var(--acento);
}

.lista-checada__marca .icone { width: 14px; height: 14px; stroke-width: 2.4; }

/* Cartões */
.cartoes {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: 1fr;
}

.cartao {
    position: relative;
    padding: var(--e-6);
    background: var(--fundo-cartao);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-g);
    overflow: hidden;
    transition: transform var(--transicao-lenta), border-color var(--transicao),
                background-color var(--transicao);
}

.cartao::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--acento-borda), transparent);
    opacity: 0;
    transition: opacity var(--transicao);
}

.cartao:hover {
    transform: translateY(-4px);
    border-color: var(--borda-media);
    background: rgba(255, 255, 255, 0.05);
}

.cartao:hover::before { opacity: 1; }

.cartao__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--e-5);
    border-radius: var(--raio-m);
    background: var(--acento-tenue);
    border: 1px solid var(--acento-borda);
    color: var(--acento);
}

.cartao__icone .icone { width: 22px; height: 22px; }

.cartao__icone--sutil {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--borda-sutil);
    color: var(--texto-terciario);
}

.cartao__titulo {
    font-size: var(--t-h3);
    margin-bottom: var(--e-3);
}

.cartao__texto {
    font-size: 0.96rem;
    color: var(--texto-secundario);
}

.cartao--nota {
    background: linear-gradient(140deg, rgba(47, 212, 27, 0.07), rgba(255, 255, 255, 0.02));
    border-color: var(--acento-borda);
}

.cartao__texto--grande {
    font-size: var(--t-corpo-g);
    color: var(--texto-primario);
}

/* Bloco dividido (texto + mídia) */
.dividido {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: center;
}

.dividido__midia { position: relative; }

.moldura {
    position: relative;
    border-radius: var(--raio-g);
    overflow: hidden;
    border: 1px solid var(--borda-media);
    box-shadow: var(--sombra-3);
}

/* A arte original é um banner panorâmico com o assunto à direita: o
   enquadramento privilegia esse lado em vez de cortar no centro. */
.moldura img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: 82% center;
    filter: saturate(1.05) contrast(1.03) brightness(1.1);
    transition: transform var(--transicao-lenta);
}

.moldura:hover img { transform: scale(1.03); }

.moldura::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(5, 6, 7, 0.5));
    pointer-events: none;
}

/* O brilho fica contido na largura do pai: um inset negativo na horizontal
   criava scroll lateral no mobile. O blur já espalha a luz o suficiente. */
.moldura__brilho {
    position: absolute;
    inset: -12% 0 auto 0;
    height: 70%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(47, 212, 27, 0.22), transparent 70%);
    filter: blur(48px);
    z-index: -1;
}


/* 7. CABEÇALHO ============================================================= */

.cabecalho {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    height: var(--altura-cabecalho);
    display: flex;
    align-items: center;
    transition: background-color var(--transicao), border-color var(--transicao),
                backdrop-filter var(--transicao);
    border-bottom: 1px solid transparent;
}

.cabecalho[data-fixado] {
    background: var(--fundo-vidro);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: var(--borda-sutil);
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
}

.cabecalho__marca img {
    width: auto;
    height: 30px;
    transition: opacity var(--transicao);
}

.cabecalho__marca:hover img { opacity: 0.82; }

.cabecalho__nav {
    position: fixed;
    inset: var(--altura-cabecalho) 0 auto 0;
    display: grid;
    gap: var(--e-2);
    padding: var(--e-5) clamp(1.25rem, 4vw, 2.5rem) var(--e-7);
    background: var(--fundo-elevado);
    border-bottom: 1px solid var(--borda-sutil);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.cabecalho__nav[data-aberto] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cabecalho__lista { display: grid; gap: var(--e-1); }

.cabecalho__link {
    display: block;
    padding: var(--e-3) 0;
    font-family: var(--fonte-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--texto-secundario);
    border-bottom: 1px solid var(--borda-sutil);
    transition: color var(--transicao);
}

.cabecalho__link:hover,
.cabecalho__link[aria-current='true'] { color: var(--acento); }

.cabecalho__cta-mobile { margin-top: var(--e-4); }
.cabecalho__cta { display: none; }

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--e-3);
}

.cabecalho__alternador {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--raio-p);
    border: 1px solid var(--borda-media);
    color: var(--texto-primario);
    transition: border-color var(--transicao), background-color var(--transicao);
}

.cabecalho__alternador:hover {
    border-color: var(--borda-forte);
    background: rgba(255, 255, 255, 0.04);
}

.cabecalho__alternador .icone { width: 20px; height: 20px; }
.cabecalho__alternador .icone--fechar { display: none; }
.cabecalho__alternador[aria-expanded='true'] .icone--menu { display: none; }
.cabecalho__alternador[aria-expanded='true'] .icone--fechar { display: block; }

.cabecalho__progresso {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--acento-gradiente);
}

.cabecalho__cortina {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(5, 6, 7, 0.65);
    backdrop-filter: blur(2px);
}


/* 8. HERO ================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    /* Espaçamento enxuto no mobile para o CTA primário ficar acima da dobra;
       a folga cresce a partir do breakpoint de tablet. */
    padding-block: calc(var(--altura-cabecalho) + var(--e-5)) var(--e-8);
    overflow: hidden;
    isolation: isolate;
}

.hero__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.75) brightness(0.55);
}

.hero__veu {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(72% 60% at 50% 12%, rgba(47, 212, 27, 0.16), transparent 62%),
        linear-gradient(180deg, rgba(5, 6, 7, 0.86) 0%, rgba(5, 6, 7, 0.74) 45%, var(--fundo-base) 96%);
}

.hero__grade {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(78% 68% at 50% 38%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(78% 68% at 50% 38%, #000 20%, transparent 78%);
}

.hero__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero__sobre {
    margin-top: var(--e-4);
    font-family: var(--fonte-display);
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--texto-secundario);
    text-transform: uppercase;
}

.hero__titulo {
    margin-top: var(--e-3);
    max-width: 18ch;
    font-size: var(--t-display);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.hero__apoio {
    margin-top: var(--e-4);
    max-width: 60ch;
    font-size: var(--t-corpo-g);
    color: var(--texto-secundario);
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

.metricas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    max-width: 900px;
    margin-top: var(--e-6);
    background: var(--borda-sutil);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-m);
    overflow: hidden;
}

.metricas__item {
    padding: var(--e-5) var(--e-3);
    background: rgba(5, 6, 7, 0.6);
    backdrop-filter: blur(8px);
}

.metricas__valor {
    font-family: var(--fonte-display);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--texto-primario);
    font-variant-numeric: tabular-nums;
}

.metricas__afixo { color: var(--acento); }

.metricas__rotulo {
    margin-top: var(--e-2);
    font-size: var(--t-pequeno);
    color: var(--texto-terciario);
}

.hero__rolar {
    position: absolute;
    left: 50%;
    bottom: var(--e-5);
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--borda-media);
    color: var(--texto-terciario);
    animation: flutuar 2.6s ease-in-out infinite;
    transition: color var(--transicao), border-color var(--transicao);
}

.hero__rolar:hover { color: var(--acento); border-color: var(--acento-borda); }


/* 9. CURRÍCULO ============================================================= */

.modulos {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: 1fr;
    counter-reset: modulo;
}

.modulo {
    position: relative;
    padding: var(--e-6);
    background: var(--fundo-cartao);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-g);
    overflow: hidden;
    transition: transform var(--transicao-lenta), border-color var(--transicao),
                background-color var(--transicao);
}

.modulo::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--acento-gradiente);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--transicao-lenta);
}

.modulo:hover {
    transform: translateY(-4px);
    border-color: var(--borda-media);
    background: rgba(255, 255, 255, 0.05);
}

.modulo:hover::after { transform: scaleX(1); }

.modulo__numero {
    position: absolute;
    top: var(--e-5);
    right: var(--e-5);
    font-family: var(--fonte-display);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    font-variant-numeric: tabular-nums;
    transition: color var(--transicao);
}

.modulo:hover .modulo__numero { color: rgba(47, 212, 27, 0.16); }

.modulo__icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--e-5);
    border-radius: var(--raio-m);
    background: var(--acento-tenue);
    border: 1px solid var(--acento-borda);
    color: var(--acento);
}

.modulo__icone .icone { width: 21px; height: 21px; }

.modulo__titulo {
    font-size: var(--t-h3);
    margin-bottom: var(--e-2);
    padding-right: var(--e-7);
}

.modulo__texto {
    font-size: 0.94rem;
    color: var(--texto-secundario);
}


/* 11. BENEFÍCIOS =========================================================== */

.secao--beneficios .cartao--nota {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--e-4);
}


/* 12. DEPOIMENTOS E LIGHTBOX =============================================== */

.secao--depoimentos { overflow: hidden; }

.carrossel {
    position: relative;
    margin-top: var(--e-6);
}

.carrossel__trilha {
    display: flex;
    gap: var(--e-4);
    /* O primeiro card alinha com a coluna de texto do container; em telas
       estreitas cai para a mesma sarjeta lateral das demais seções. */
    padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), calc((100% - var(--largura-max)) / 2));
    padding-block: var(--e-2) var(--e-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.carrossel__trilha::-webkit-scrollbar { display: none; }

.carrossel__item {
    flex: none;
    width: clamp(230px, 66vw, 288px);
    scroll-snap-align: center;
}

.depoimento {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--raio-m);
    overflow: hidden;
    border: 1px solid var(--borda-media);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra-2);
    transition: transform var(--transicao-lenta), border-color var(--transicao),
                box-shadow var(--transicao);
}

.depoimento img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transicao-lenta);
}

.depoimento__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 7, 0.35) 0%, transparent 22%, transparent 62%, rgba(5, 6, 7, 0.92) 100%);
    pointer-events: none;
}

.depoimento__acao {
    position: absolute;
    left: 50%;
    bottom: var(--e-4);
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.4rem 0.9rem;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-primario);
    background: rgba(10, 12, 13, 0.85);
    border: 1px solid var(--borda-media);
    border-radius: var(--raio-pill);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transicao), transform var(--transicao);
}

.depoimento__acao .icone { width: 13px; height: 13px; }

.depoimento:hover,
.depoimento:focus-visible {
    transform: translateY(-4px);
    border-color: var(--acento-borda);
    box-shadow: var(--sombra-3), 0 0 0 1px var(--acento-borda);
}

.depoimento:hover img,
.depoimento:focus-visible img { transform: scale(1.04); }

.depoimento:hover .depoimento__acao,
.depoimento:focus-visible .depoimento__acao {
    opacity: 1;
    transform: translateY(0);
}

.carrossel__seta {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 3;
    translate: 0 -50%;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: var(--fundo-vidro);
    border: 1px solid var(--borda-media);
    color: var(--texto-primario);
    backdrop-filter: blur(10px);
    box-shadow: var(--sombra-2);
    transition: background-color var(--transicao), border-color var(--transicao),
                opacity var(--transicao), transform var(--transicao);
}

.carrossel__seta:hover {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--acento-sobre);
}

.carrossel__seta[disabled] {
    opacity: 0.25;
    pointer-events: none;
}

.carrossel__seta--anterior { left: clamp(0.5rem, 2vw, 1.5rem); }
.carrossel__seta--proximo  { right: clamp(0.5rem, 2vw, 1.5rem); }

.carrossel__seta--anterior .icone { transform: rotate(90deg); }
.carrossel__seta--proximo .icone  { transform: rotate(-90deg); }

/* Lightbox */
.lightbox {
    width: min(96vw, 480px);
    max-width: none;
    max-height: 94svh;
    padding: 0;
    margin: auto;
    background: transparent;
    border: 0;
    overflow: visible;
    color: var(--texto-primario);
}

.lightbox::backdrop {
    background: rgba(2, 3, 4, 0.92);
    backdrop-filter: blur(6px);
}

.lightbox__imagem {
    width: 100%;
    max-height: 82svh;
    object-fit: contain;
    border-radius: var(--raio-m);
    border: 1px solid var(--borda-media);
    box-shadow: var(--sombra-3);
    background: var(--fundo-elevado);
}

.lightbox__fechar {
    position: absolute;
    top: -52px;
    right: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--borda-media);
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto-primario);
    transition: background-color var(--transicao);
}

.lightbox__fechar:hover { background: rgba(255, 255, 255, 0.14); }

.lightbox__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--borda-media);
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto-primario);
    transition: background-color var(--transicao);
}

.lightbox__nav:hover { background: rgba(255, 255, 255, 0.14); }

.lightbox__nav--anterior { left: -60px; }
.lightbox__nav--proximo  { right: -60px; }
.lightbox__nav--anterior .icone { transform: rotate(90deg); }
.lightbox__nav--proximo .icone  { transform: rotate(-90deg); }

.lightbox__contador {
    margin-top: var(--e-3);
    text-align: center;
    font-size: var(--t-pequeno);
    color: var(--texto-terciario);
    font-variant-numeric: tabular-nums;
}


/* 13. MENTOR =============================================================== */

/* Moldura editorial vertical: acomoda o retrato de estúdio de corpo parcial,
   que um recorte circular cortaria mal. */
.retrato {
    position: relative;
    max-width: 440px;
    margin-inline: auto;
    border-radius: var(--raio-g);
    overflow: hidden;
    border: 1px solid var(--borda-media);
    box-shadow: var(--sombra-3);
}

.retrato img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    background: var(--fundo-elevado);
    filter: contrast(1.04) saturate(1.02);
}

.retrato__legenda {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 2px;
    padding: var(--e-8) var(--e-5) var(--e-5);
    background: linear-gradient(180deg, transparent, rgba(5, 6, 7, 0.55) 45%, rgba(5, 6, 7, 0.94));
}

.retrato__legenda strong {
    font-family: var(--fonte-display);
    font-size: 1.15rem;
    color: var(--texto-primario);
}

.retrato__legenda span {
    font-size: var(--t-pequeno);
    color: var(--acento);
    letter-spacing: 0.02em;
}

.retrato__aura {
    position: absolute;
    inset: 8% 4% 12% 4%;
    border-radius: var(--raio-g);
    background: radial-gradient(circle, rgba(47, 212, 27, 0.26), transparent 70%);
    filter: blur(56px);
    z-index: -1;
}

.linha-do-tempo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-4);
    margin-top: var(--e-6);
    padding-top: var(--e-6);
    border-top: 1px solid var(--borda-sutil);
}

.linha-do-tempo dt {
    font-family: var(--fonte-display);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
    font-weight: 800;
    line-height: 1;
    color: var(--acento);
    font-variant-numeric: tabular-nums;
}

.linha-do-tempo dd {
    margin-top: var(--e-2);
    font-size: var(--t-pequeno);
    color: var(--texto-terciario);
}


/* 14. OFERTA =============================================================== */

.oferta {
    display: grid;
    gap: 0;
    max-width: 1000px;
    margin-inline: auto;
    background: linear-gradient(150deg, rgba(47, 212, 27, 0.08), rgba(255, 255, 255, 0.02) 45%);
    border: 1px solid var(--acento-borda);
    border-radius: var(--raio-g);
    overflow: hidden;
    box-shadow: var(--sombra-3), 0 0 80px -40px rgba(47, 212, 27, 0.5);
}

.oferta__preco {
    padding: clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
    background: rgba(5, 6, 7, 0.5);
    border-bottom: 1px solid var(--borda-sutil);
}

.oferta__plano {
    font-family: var(--fonte-display);
    font-size: var(--t-pequeno);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-terciario);
}

.oferta__acesso {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-3);
    padding: 0.35rem 0.85rem;
    font-size: var(--t-pequeno);
    font-weight: 600;
    color: var(--acento);
    background: var(--acento-tenue);
    border: 1px solid var(--acento-borda);
    border-radius: var(--raio-pill);
}

.oferta__acesso .icone { width: 15px; height: 15px; }

.oferta__valor {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--e-2);
    margin-top: var(--e-5);
    font-family: var(--fonte-display);
    color: var(--texto-primario);
    font-variant-numeric: tabular-nums;
}

.oferta__parcelas {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    font-weight: 700;
    color: var(--texto-secundario);
}

.oferta__de {
    font-family: var(--fonte-corpo);
    font-size: var(--t-corpo);
    color: var(--texto-terciario);
}

.oferta__numero {
    font-size: clamp(3rem, 2rem + 5vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(180deg, #FFFFFF, #9FE894);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.oferta__avista {
    margin-top: var(--e-2);
    margin-bottom: var(--e-6);
    font-size: var(--t-corpo-g);
    color: var(--texto-secundario);
}

.selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-2) var(--e-5);
    margin-top: var(--e-5);
}

.selos__item {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-pequeno);
    color: var(--texto-terciario);
}

.selos__item .icone { width: 16px; height: 16px; color: var(--acento); }

.oferta__conteudo { padding: clamp(2rem, 1.5rem + 2vw, 3rem); }

.oferta__rotulo {
    font-family: var(--fonte-display);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: var(--e-4);
}

.garantia {
    display: flex;
    align-items: flex-start;
    gap: var(--e-4);
    margin-top: var(--e-6);
    padding: var(--e-5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-m);
}

.garantia__selo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    background: var(--acento-tenue);
    border: 1px solid var(--acento-borda);
    color: var(--acento);
}

.garantia__titulo {
    font-size: 1.02rem;
    margin-bottom: var(--e-2);
}

.garantia__texto {
    font-size: 0.92rem;
    color: var(--texto-secundario);
}


/* 15. FAQ ================================================================== */

.acordeao { display: grid; gap: var(--e-3); }

.acordeao__item {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-m);
    overflow: hidden;
    transition: border-color var(--transicao), background-color var(--transicao);
}

.acordeao__item:hover { border-color: var(--borda-media); }

.acordeao__item[open] {
    border-color: var(--acento-borda);
    background: rgba(47, 212, 27, 0.045);
}

.acordeao__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-5);
    font-family: var(--fonte-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--texto-primario);
    cursor: pointer;
    list-style: none;
    min-height: 60px;
}

.acordeao__pergunta::-webkit-details-marker { display: none; }

.acordeao__marca {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--borda-media);
    color: var(--texto-secundario);
    transition: transform var(--transicao), color var(--transicao), border-color var(--transicao);
}

.acordeao__marca .icone { width: 15px; height: 15px; }

.acordeao__item[open] .acordeao__marca {
    transform: rotate(180deg);
    color: var(--acento);
    border-color: var(--acento-borda);
}

.acordeao__resposta {
    padding: 0 var(--e-5) var(--e-5);
    color: var(--texto-secundario);
    max-width: 68ch;
}


/* 16. CTA FINAL ============================================================ */

.cta-final {
    position: relative;
    padding-block: clamp(4rem, 3rem + 6vw, 7rem);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.cta-final__fundo { position: absolute; inset: 0; z-index: -1; }

.cta-final__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.7) brightness(0.35);
}

.cta-final__veu {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 50% 50%, rgba(47, 212, 27, 0.18), transparent 68%),
        linear-gradient(180deg, var(--fundo-base), rgba(5, 6, 7, 0.72) 50%, var(--fundo-base));
}

.cta-final__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-final__titulo {
    max-width: 20ch;
    font-size: var(--t-h2);
    font-weight: 800;
}

.cta-final__apoio {
    margin-top: var(--e-4);
    margin-bottom: var(--e-6);
    max-width: 54ch;
    font-size: var(--t-corpo-g);
    color: var(--texto-secundario);
}


/* 17. RODAPÉ E BARRA FIXA ================================================== */

.rodape {
    padding-block: var(--e-8) calc(var(--e-7) + env(safe-area-inset-bottom, 0px));
    background: var(--fundo-superficie);
    border-top: 1px solid var(--borda-sutil);
}

.rodape__disclaimer {
    max-width: 78ch;
    margin-inline: auto;
    padding-bottom: var(--e-7);
    font-size: var(--t-pequeno);
    line-height: 1.7;
    color: var(--texto-terciario);
    text-align: center;
    border-bottom: 1px solid var(--borda-sutil);
}

.rodape__barra {
    display: grid;
    justify-items: center;
    gap: var(--e-4);
    padding-top: var(--e-6);
    text-align: center;
}

.rodape__marca img {
    width: auto;
    height: 32px;
    opacity: 0.75;
    transition: opacity var(--transicao);
}

.rodape__marca:hover img { opacity: 1; }

.rodape__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-4);
    font-size: var(--t-pequeno);
}

.rodape__links a { color: var(--texto-terciario); transition: color var(--transicao); }
.rodape__links a:hover { color: var(--acento); }

.rodape__copy {
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
    color: var(--texto-terciario);
}

.barra-fixa {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-3) clamp(1rem, 4vw, 1.5rem);
    padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
    background: var(--fundo-vidro);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--borda-sutil);
    transform: translateY(110%);
    transition: transform var(--transicao-lenta);
}

.barra-fixa[data-visivel] { transform: translateY(0); }

.barra-fixa__info { display: grid; line-height: 1.3; }

.barra-fixa__preco {
    font-family: var(--fonte-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--texto-primario);
}

.barra-fixa__nota {
    font-size: var(--t-micro);
    color: var(--texto-terciario);
}

/* No mobile a barra fixa já é o canal de contato persistente; o botão
   flutuante entra a partir de 900px, onde a barra sai de cena. */
.flutuante-whatsapp {
    display: none;
    position: fixed;
    right: clamp(1rem, 4vw, 1.75rem);
    bottom: clamp(1rem, 4vw, 1.75rem);
    z-index: 91;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--acento-gradiente);
    color: var(--acento-sobre);
    box-shadow: var(--brilho-acento);
    transition: transform var(--transicao);
}

.flutuante-whatsapp:hover { transform: scale(1.06); }
.flutuante-whatsapp .icone { width: 26px; height: 26px; }


/* 18. ANIMAÇÕES ============================================================ */

/* O estado escondido só é aplicado quando há JS para revelar de volta —
   sem JS, a página inteira permanece visível. */
.js [data-revelar] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js [data-revelar].revelado {
    opacity: 1;
    transform: none;
}

[data-revelar-atraso='1'] { transition-delay: 80ms; }
[data-revelar-atraso='2'] { transition-delay: 160ms; }
[data-revelar-atraso='3'] { transition-delay: 240ms; }
[data-revelar-atraso='4'] { transition-delay: 320ms; }
[data-revelar-atraso='5'] { transition-delay: 400ms; }

@keyframes pulsar {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

@keyframes flutuar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}


/* 19. RESPONSIVO =========================================================== */

@media (min-width: 600px) {
    /* Com mais altura disponível, o hero volta a respirar. */
    .hero__acoes { margin-top: var(--e-7); }
    .metricas { margin-top: var(--e-8); }

    .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rodape__barra {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        justify-items: start;
        text-align: left;
    }
    .rodape__links { justify-content: center; }
    .rodape__copy { justify-self: end; }
}

@media (min-width: 900px) {
    :root { --altura-cabecalho: 80px; }

    .hero { padding-block: calc(var(--altura-cabecalho) + var(--e-7)) var(--e-9); }

    .cabecalho__nav {
        position: static;
        display: flex;
        align-items: center;
        gap: var(--e-6);
        padding: 0;
        background: none;
        border: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .cabecalho__lista {
        display: flex;
        align-items: center;
        gap: var(--e-6);
    }

    .cabecalho__link {
        padding: var(--e-2) 0;
        font-size: 0.9rem;
        font-weight: 500;
        border: 0;
        position: relative;
    }

    .cabecalho__link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: var(--acento);
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform var(--transicao);
    }

    .cabecalho__link:hover::after,
    .cabecalho__link[aria-current='true']::after { transform: scaleX(1); }

    .cabecalho__cta-mobile { display: none; }
    .cabecalho__cta { display: inline-flex; }
    .cabecalho__alternador { display: none; }
    .cabecalho__cortina { display: none; }

    .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cartoes .cartao--nota { grid-column: span 2; }

    .modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .dividido { grid-template-columns: 1fr 1.05fr; }
    .dividido--invertido .dividido__midia { order: 2; }

    /* A biografia é longa: o retrato acompanha a leitura em vez de flutuar
       no meio de uma coluna vazia. */
    .secao--mentor .dividido { align-items: start; }
    .secao--mentor .dividido__midia {
        position: sticky;
        top: calc(var(--altura-cabecalho) + var(--e-6));
    }

    .oferta { grid-template-columns: 0.95fr 1.05fr; }

    .oferta__preco {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 0;
        border-right: 1px solid var(--borda-sutil);
    }

    .oferta__acesso { align-self: center; }

    .carrossel__seta { display: grid; }

    .barra-fixa { display: none; }
    .flutuante-whatsapp { display: grid; }
}

@media (min-width: 1100px) {
    .carrossel__item { width: 300px; }
}

/* Preferências do usuário --------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-revelar] { opacity: 1; transform: none; }
}

@media print {
    .cabecalho, .barra-fixa, .flutuante-whatsapp, .hero__rolar,
    .carrossel__seta, .lightbox { display: none !important; }

    body { background: #fff; color: #000; }
    .js [data-revelar] { opacity: 1 !important; transform: none !important; }
}