/* ═══════════════════════════════════════════════════════════
   GuidaGaita — Duelo ao entardecer
   Paleta de terra, tipografia de cartaz, molduras tintype.
   ═══════════════════════════════════════════════════════════ */

/* ── FONTES ──────────────────────────────────────────────────
   Servidas do próprio domínio (assets/fonts/), não do Google.
   Só o subset latino, que cobre todo o português — inclusive
   ã, ç, õ e os acentos. O Outfit é variável: um único arquivo
   de 32KB entrega de 400 a 700, no lugar dos sete pesos
   estáticos que a página pedia antes e nem usava.
   font-display: swap mantém o texto legível durante a carga. */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/outfit-latin-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Alfa Slab One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/alfa-slab-one-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Rye';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/rye-latin.woff2') format('woff2');
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

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

/* O <picture> existe só para o navegador escolher entre AVIF, WebP e o
   formato antigo — ele não deve participar do layout. Sem isto a caixa
   dele viraria o item flex de .offer__photos e o filho de .hero__photo,
   no lugar da própria imagem, e as regras que miram o <img> (height:100%,
   z-index, o leque das duas gaitas) passariam a medir a caixa errada. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

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

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
    /* Terra */
    --void:       #241A10;
    --dust:       #2F2417;
    --leather:    #453524;
    --leather-2:  #573F29;
    --hide:       #6E5238;

    /* Fogo */
    --ember:      #E2622C;
    --ember-hi:   #FF8544;
    --gold:       #E0A83E;
    --gold-hi:    #F7CC72;
    --rust:       #A84428;

    /* Tinta */
    --bone:       #F4EBDD;
    --sand:       #B8A692;
    --ash:        #8A7768;

    /* Linhas */
    --line:       rgba(232, 200, 160, .11);
    --line-warm:  rgba(226, 98, 44, .26);

    /* Fontes */
    --f-poster:   'Alfa Slab One', Georgia, serif;
    --f-wood:     'Rye', Georgia, serif;
    --f-body:     'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Movimento */
    --ease:       cubic-bezier(.16, 1, .3, 1);
    --ease-soft:  cubic-bezier(.33, 1, .68, 1);

    /* Métrica */
    --shell:      1160px;
    --gut:        1.35rem;
    --rhythm:     clamp(5rem, 11vw, 8.5rem);

    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    background: var(--void);
    color: var(--bone);
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
    /* Texto não selecionável em toda a página — sem campos de
       formulário aqui, não há nada que precise ficar selecionável,
       e assim o cursor também para de virar "I" ao passar por cima
       do texto. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
    /* Espaço para a barra fixa do celular não cobrir o rodapé */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* Brilho ambiente: sol poente no topo, brasa no rodapé.

   Antes isso era um `background-attachment: fixed` no próprio body.
   Esse modo impede o navegador de compor a rolagem na GPU: ele
   precisa repintar a camada inteira a cada quadro rolado, e numa
   página longa como esta é a principal fonte de engasgo no celular.

   Numa camada `position: fixed` própria o resultado visual é o
   mesmo, mas ela vira uma camada composta à parte — o scroll passa
   a ser só deslocamento de camada, sem repintura. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 100vw 62vh at 50% -8%,  rgba(226, 98, 44, .16), transparent 68%),
        radial-gradient(ellipse 70vw 45vh at 110% 82%, rgba(224, 168, 62, .07), transparent 70%),
        radial-gradient(ellipse 60vw 40vh at -10% 45%, rgba(168, 68, 40, .06), transparent 70%);
}

/* ── TEXTURAS DE AMBIENTE ────────────────────────────────── */
/* `inset` negativo dá folga para a textura deslizar sem mostrar a
   borda. Estava em -100%, o que fazia a camada ocupar 3x a largura
   E 3x a altura da tela — 9x a área visível sendo rasterizada e
   guardada em memória de GPU à toa. O deslocamento da animação
   chega a 3% do próprio tamanho, então -8% já é folga de sobra. */
.fx-grain {
    position: fixed;
    inset: -8%;
    z-index: 300;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 260px 260px;
    animation: grain-drift 700ms steps(4) infinite;
}

@keyframes grain-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-2%, -2%); }
    100% { transform: translate(3%, 1%); }
}

.fx-vignette {
    position: fixed;
    inset: 0;
    z-index: 290;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 68% at 50% 45%, transparent 42%, rgba(31, 22, 14, .32) 100%);
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.section {
    position: relative;
    padding-block: var(--rhythm);
}

/* ── FUNDO FOTOGRÁFICO DE SEÇÃO ──────────────────────────────
   Toda seção leva uma foto atrás do conteúdo. A intensidade sai
   de duas variáveis: --bg-op (quanto a foto aparece) e --veu
   (quanto a camada escura cobre). Seção com muito texto usa foto
   fraca e véu forte; seção narrativa, o contrário.
   ─────────────────────────────────────────────────────────── */
.has-bg {
    position: relative;
    overflow: hidden;
}

.section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Sépia mais leve e brilho maior: o tom anterior deixava a foto
       amuada, quase como se estivesse fora de foco. */
    filter: sepia(.22) saturate(1.12) contrast(1.12) brightness(.78);
    opacity: var(--bg-op, .4);
    /* Some seções (FAQ) travam esta altura via JS para o acordeão não
       recortar a foto de novo a cada clique; a transição só entra em
       ação nos raros recálculos por resize, não no toggle em si. */
    transition: height .3s var(--ease);
}

.has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        var(--void) 1%,
        rgba(36, 26, 16, var(--veu, .72)) 24%,
        rgba(36, 26, 16, var(--veu, .72)) 76%,
        var(--void) 99%);
}

.has-bg > .shell { position: relative; z-index: 2; }

/* As fotos */
/* A figura dele está bem à direita do quadro, não no centro — em
   telas estreitas o recorte "center" pegava só a área vazia perto
   da roda do trem, sobrando apenas a borda do braço. */
.section-bg--vagao     { background-position: 71% 48%; }
.section-bg--vagoes    { background-position: center 58%; }
.section-bg--encarando { background-position: center 26%; }
.section-bg--trem      { background-position: center 62%; }
.section-bg--duelo     { background-position: center 26%; }

/* Cada fundo sai em AVIF, WebP e JPG: o navegador fica com o primeiro
   formato que reconhece, e quem não entende image-set() cai no url()
   da linha de cima. A largura base aqui é a de celular (800px) — o
   bloco logo abaixo troca pela de 1280px em telas maiores, para o
   celular nunca baixar a foto grande.

   Estas fotos aguentam compressão pesada (q36) porque nunca são vistas
   limpas: entram com opacity .4-.8, filtro sépia e um véu escuro por
   cima (ver .section-bg e .has-bg::after). */
.section-bg--vagao {
    background-image: url('assets/bg-vagao-fallback.jpg');
    background-image: image-set(url('assets/bg-vagao-800.avif') type('image/avif'),
                                url('assets/bg-vagao-800.webp') type('image/webp'),
                                url('assets/bg-vagao-fallback.jpg') type('image/jpeg'));
}
.section-bg--vagoes {
    background-image: url('assets/bg-vagoes-fallback.jpg');
    background-image: image-set(url('assets/bg-vagoes-800.avif') type('image/avif'),
                                url('assets/bg-vagoes-800.webp') type('image/webp'),
                                url('assets/bg-vagoes-fallback.jpg') type('image/jpeg'));
}
.section-bg--encarando {
    background-image: url('assets/bg-encarando-fallback.jpg');
    background-image: image-set(url('assets/bg-encarando-800.avif') type('image/avif'),
                                url('assets/bg-encarando-800.webp') type('image/webp'),
                                url('assets/bg-encarando-fallback.jpg') type('image/jpeg'));
}
.section-bg--trem {
    background-image: url('assets/bg-trem-fallback.jpg');
    background-image: image-set(url('assets/bg-trem-800.avif') type('image/avif'),
                                url('assets/bg-trem-800.webp') type('image/webp'),
                                url('assets/bg-trem-fallback.jpg') type('image/jpeg'));
}
/* Reaproveita a foto do hero, então usa as mesmas variantes dela */
.section-bg--duelo {
    background-image: url('assets/hero-duelo-fallback.jpg');
    background-image: image-set(url('assets/hero-duelo-768.avif') type('image/avif'),
                                url('assets/hero-duelo-768.webp') type('image/webp'),
                                url('assets/hero-duelo-fallback.jpg') type('image/jpeg'));
}

@media (min-width: 801px) {
    .section-bg--vagao {
        background-image: url('assets/bg-vagao-fallback.jpg');
        background-image: image-set(url('assets/bg-vagao-1280.avif') type('image/avif'),
                                    url('assets/bg-vagao-1280.webp') type('image/webp'),
                                    url('assets/bg-vagao-fallback.jpg') type('image/jpeg'));
    }
    .section-bg--vagoes {
        background-image: url('assets/bg-vagoes-fallback.jpg');
        background-image: image-set(url('assets/bg-vagoes-1280.avif') type('image/avif'),
                                    url('assets/bg-vagoes-1280.webp') type('image/webp'),
                                    url('assets/bg-vagoes-fallback.jpg') type('image/jpeg'));
    }
    .section-bg--encarando {
        background-image: url('assets/bg-encarando-fallback.jpg');
        background-image: image-set(url('assets/bg-encarando-1280.avif') type('image/avif'),
                                    url('assets/bg-encarando-1280.webp') type('image/webp'),
                                    url('assets/bg-encarando-fallback.jpg') type('image/jpeg'));
    }
    .section-bg--trem {
        background-image: url('assets/bg-trem-fallback.jpg');
        background-image: image-set(url('assets/bg-trem-1280.avif') type('image/avif'),
                                    url('assets/bg-trem-1280.webp') type('image/webp'),
                                    url('assets/bg-trem-fallback.jpg') type('image/jpeg'));
    }
    .section-bg--duelo {
        background-image: url('assets/hero-duelo-fallback.jpg');
        background-image: image-set(url('assets/hero-duelo-1200.avif') type('image/avif'),
                                    url('assets/hero-duelo-1200.webp') type('image/webp'),
                                    url('assets/hero-duelo-fallback.jpg') type('image/jpeg'));
    }
}

/* Reenquadra a mesma foto quando ela se repete em outra seção */
.section-bg--alto { background-position: center 28%; }

/* Intensidade seção a seção — fotos mais presentes, véu mais leve */
.section--problema { --bg-op: .82; --veu: .50; }
.section--trilha   { --bg-op: .66; --veu: .58; }
.section--vozes    { --bg-op: .62; --veu: .60; }
.section--mentor   { --bg-op: .62; --veu: .60; }
.section--oferta   { --bg-op: .64; --veu: .58; }
.section--garantia { --bg-op: .62; --veu: .60; }
.section--faq      { --bg-op: .58; --veu: .62; }
.section--final    { --bg-op: .76; --veu: .46; }
.site-footer       { --bg-op: .48; --veu: .68; }

/* ── TIPOGRAFIA ──────────────────────────────────────────── */
.eyebrow {
    font-family: var(--f-wood);
    font-size: clamp(.68rem, 2.1vw, .78rem);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    line-height: 1.4;
}

.eyebrow--center { justify-content: center; }

.eyebrow__star {
    color: var(--ember);
    font-size: .8em;
    animation: star-glow 3.5s ease-in-out infinite;
}

@keyframes star-glow {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

.section__title {
    font-family: var(--f-poster);
    font-weight: 400;
    font-size: clamp(2.05rem, 6.4vw, 3.65rem);
    line-height: 1.06;
    letter-spacing: -.012em;
    color: var(--bone);
    text-wrap: balance;
    margin-bottom: 1.4rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .5);
}

.section__title--sm { font-size: clamp(1.7rem, 4.6vw, 2.5rem); }
.section__title--center { text-align: center; margin-inline: auto; }

.ink-gold {
    color: var(--gold);
    text-shadow: 0 0 34px rgba(224, 168, 62, .28);
}

.ink-rust { color: var(--rust); }

.prose {
    max-width: 62ch;
    color: var(--sand);
    font-size: clamp(1rem, 2.4vw, 1.09rem);
    line-height: 1.75;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prose--center {
    margin-inline: auto;
    text-align: center;
}

strong { color: var(--bone); font-weight: 600; }

/* ── LISTAS COM MARCA ────────────────────────────────────── */
.checks {
    display: flex;
    flex-direction: column;
    gap: .58rem;
}

.checks li {
    position: relative;
    padding-left: 1.75rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--sand);
}

.checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .2em;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid var(--line-warm);
    border-radius: 3px;
    background: rgba(226, 98, 44, .09) url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.4L4 7.4L10 1' stroke='%23E2622C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.checks--gold li::before {
    border-color: rgba(224, 168, 62, .3);
    background-color: rgba(224, 168, 62, .08);
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.4L4 7.4L10 1' stroke='%23E0A83E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── BOTÕES ──────────────────────────────────────────────── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1.05rem 2.1rem;
    min-height: 54px;
    border-radius: 7px;
    font-family: var(--f-body);
    font-size: clamp(.95rem, 2.4vw, 1.03rem);
    font-weight: 700;
    letter-spacing: .005em;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    transition: transform .28s var(--ease), box-shadow .32s var(--ease), border-color .25s, color .25s;
}

/* Botão principal — brasa viva */
.btn--solid {
    color: #1A0C04;
    background: linear-gradient(158deg, var(--gold-hi) 0%, var(--ember) 52%, var(--rust) 100%);
    background-size: 190% 190%;
    box-shadow:
        0 1px 0 rgba(255, 235, 200, .38) inset,
        0 -2px 12px rgba(120, 40, 10, .4) inset,
        0 12px 38px rgba(226, 98, 44, .38),
        0 2px 6px rgba(0, 0, 0, .45);
    transition: transform .28s var(--ease), box-shadow .32s var(--ease), background-position .6s var(--ease);
}

/* A pulsação da brasa.

   Antes era um @keyframes sobre `box-shadow`, que o navegador não
   consegue compor na GPU: cada quadro repinta o botão e a área do
   brilho, sem parar, em todos os botões laranja da página. Agora é
   uma camada interna animando só `opacity` — isso roda no
   compositor, sem repintura. Fica dentro do botão porque `.btn`
   recorta com overflow: hidden, o que na prática deu um brilho que
   nasce de dentro, ainda mais parecido com brasa. */
.btn--solid::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 115%, rgba(255, 198, 130, .75), rgba(255, 170, 90, .25) 45%, transparent 72%);
    pointer-events: none;
    opacity: .25;
    animation: ember-breathe 4.2s ease-in-out infinite;
}

@keyframes ember-breathe {
    0%, 100% { opacity: .2; }
    50%      { opacity: .85; }
}

/* Reflexo que varre o botão */
.btn--solid::after {
    content: '';
    position: absolute;
    top: 0;
    left: -140%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 245, 225, .5), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.btn--solid:hover::after,
.btn--solid:focus-visible::after { animation: sheen .85s var(--ease-soft); }

/* Varre por transform, não por `left`: mover `left` reposiciona o
   elemento e obriga o navegador a refazer layout a cada quadro. O
   deslocamento é 527% da própria largura do reflexo (55% do botão),
   equivalente ao trajeto de -140% a 150% que havia antes. */
@keyframes sheen { to { transform: skewX(-18deg) translateX(527%); } }

.btn--solid:hover {
    transform: translateY(-3px);
    background-position: 100% 100%;
    box-shadow:
        0 1px 0 rgba(255, 235, 200, .45) inset,
        0 -2px 12px rgba(120, 40, 10, .4) inset,
        0 18px 52px rgba(226, 98, 44, .48),
        0 3px 8px rgba(0, 0, 0, .5);
}

/* Segura a pulsação enquanto o cursor está em cima: quem já mirou o
   botão não precisa ser chamado. A regra vive no ::before porque é
   lá que a animação passou a morar. */
.btn--solid:hover::before { animation: none; opacity: .7; }

.btn--solid:active { transform: translateY(-1px) scale(.99); }

/* Botão contornado */
.btn--ghost {
    color: var(--bone);
    border: 1px solid var(--line-warm);
    background: rgba(226, 98, 44, .05);
}

.btn--ghost:hover {
    border-color: var(--gold);
    color: var(--gold-hi);
    background: rgba(224, 168, 62, .1);
}

/* Botão em texto */
.btn--link {
    padding: .5rem .2rem;
    min-height: auto;
    color: var(--gold);
    font-weight: 600;
    font-size: .96rem;
    border-radius: 3px;
}

.btn--link::before {
    content: '';
    position: absolute;
    left: .2rem;
    bottom: .35rem;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .32s var(--ease);
}

.btn--link:hover { color: var(--gold-hi); }
.btn--link:hover::before { width: calc(100% - .4rem); }

.btn__play {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    flex-shrink: 0;
}

.btn__play svg { width: 13px; height: 13px; margin-left: 1px; }

.btn--sm   { padding: .6rem 1.15rem; min-height: 42px; font-size: .85rem; }
.btn--lg   { padding: 1.25rem 2.8rem; min-height: 62px; font-size: clamp(1rem, 2.6vw, 1.12rem); }
.btn--block { display: flex; width: 100%; }

/* ── CABEÇALHO ───────────────────────────────────────────── */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    padding-block: .8rem;
    background: rgba(36, 26, 16, .78);
    border-bottom: 1px solid transparent;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .45s var(--ease), opacity .35s, border-color .35s;
}

/* O desfoque de fundo é caro: o navegador precisa recompor o que
   está atrás a cada quadro. Como o cabeçalho passa a primeira tela
   inteira escondido, só ligamos o efeito quando ele aparece de
   fato — o trecho mais pesado de rolagem (o hero, com a poeira em
   canvas) fica livre desse custo. */
.site-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    border-bottom-color: var(--line);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: color .25s;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--ember);
    flex-shrink: 0;
}

.brand__mark svg { width: 100%; height: 100%; }

.brand__name {
    font-family: var(--f-wood);
    font-size: 1.02rem;
    letter-spacing: .02em;
    color: var(--bone);
}

.brand:hover .brand__mark { color: var(--gold); }

.site-header__cta { display: none; }

/* ── BARRA FIXA MOBILE ───────────────────────────────────── */
.dock {
    position: fixed;
    inset: auto 0 0;
    z-index: 210;
    padding: .8rem var(--gut) calc(.8rem + env(safe-area-inset-bottom, 0px));
    /* Sem desfoque de fundo aqui de propósito: este fundo já é 97%
       opaco, então o efeito era praticamente invisível — mas custava
       uma recomposição por quadro numa camada fixa, justamente no
       celular, onde sobra menos folga de desempenho. */
    background: linear-gradient(to top, rgba(31, 22, 14, .98) 60%, rgba(31, 22, 14, .92));
    border-top: 1px solid var(--line);
    transition: transform .4s var(--ease), opacity .3s;
}

.dock.is-hidden {
    transform: translateY(105%);
    opacity: 0;
    pointer-events: none;
}

.btn--dock {
    width: 100%;
    padding: .95rem 1.3rem;
    min-height: 50px;
    font-size: .96rem;
}

/* A barra fixa já está sempre à vista; a brasa pulsando ali seria
   ruído constante no canto do olho. */
.btn--dock::before { animation: none; opacity: .3; }

/* ── MOLDURA TINTYPE ─────────────────────────────────────── */
.tintype {
    position: relative;
    padding: 9px;
    background:
        linear-gradient(150deg, var(--leather-2), var(--leather) 55%, #2F2318);
    border: 1px solid rgba(224, 168, 62, .2);
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(224, 168, 62, .1) inset,
        0 22px 60px rgba(0, 0, 0, .6),
        0 4px 14px rgba(0, 0, 0, .45);
    overflow: hidden;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}

.tintype img {
    width: 100%;
    border-radius: 2px;
    filter: sepia(.24) saturate(1.08) contrast(1.06) brightness(.96);
    transition: filter .55s var(--ease), transform .7s var(--ease);
}

/* Vinheta interna, como chapa antiga */
.tintype::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 2px;
    pointer-events: none;
    background: radial-gradient(ellipse 82% 78% at 50% 42%, transparent 45%, rgba(20, 10, 5, .5) 100%);
}

.tintype:hover {
    border-color: rgba(224, 168, 62, .42);
    box-shadow:
        0 1px 0 rgba(224, 168, 62, .16) inset,
        0 28px 74px rgba(0, 0, 0, .68),
        0 0 44px rgba(226, 98, 44, .16);
}

.tintype:hover img {
    filter: sepia(.1) saturate(1.14) contrast(1.06) brightness(1.02);
    transform: scale(1.03);
}

/* Cantoneiras douradas */
.tintype__corner {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--gold);
    opacity: .5;
    pointer-events: none;
    z-index: 2;
    transition: opacity .4s, width .4s var(--ease), height .4s var(--ease);
}

.tintype__corner--tl { top: 4px;    left: 4px;    border-right: 0; border-bottom: 0; }
.tintype__corner--tr { top: 4px;    right: 4px;   border-left: 0;  border-bottom: 0; }
.tintype__corner--bl { bottom: 4px; left: 4px;    border-right: 0; border-top: 0; }
.tintype__corner--br { bottom: 4px; right: 4px;   border-left: 0;  border-top: 0; }

.tintype:hover .tintype__corner { opacity: 1; width: 23px; height: 23px; }

.tintype--round {
    border-radius: 50%;
    padding: 7px;
}

.tintype--round img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: center 22%; }
.tintype--round::after { inset: 7px; border-radius: 50%; }

/* ── 1. HERO ─────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    /* No celular o texto encosta embaixo para a foto respirar em cima */
    align-items: flex-end;
    padding-block: 5rem 4.5rem;
    overflow: hidden;
}

/* A foto do duelo ocupa o topo do hero e derrete no fundo escuro.
   Recorte 5:4 em vez de tela cheia: numa tela estreita, "cover"
   fecharia tanto o enquadramento que sobraria só o rosto e o
   duelo — que é a ideia inteira da imagem — se perderia. */
.hero__photo {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 97%);
}

.hero__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center 24%;
    filter: sepia(.2) saturate(1.06) contrast(1.04) brightness(.86);
}

/* Véu que garante a leitura do texto sobre a foto */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(36, 26, 16, .14) 0%,
            rgba(36, 26, 16, .28) 26%,
            rgba(36, 26, 16, .78) 44%,
            var(--void) 62%),
        linear-gradient(to top, rgba(226, 98, 44, .11), transparent 48%);
}

.hero__dust {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .95;
}

.hero__grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.9rem;
    align-items: center;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero__title {
    font-family: var(--f-poster);
    font-weight: 400;
    font-size: clamp(2.3rem, 8.6vw, 4.15rem);
    line-height: 1.03;
    letter-spacing: -.015em;
    color: var(--bone);
    text-wrap: balance;
    margin-bottom: 1.35rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .6);
}

.hero__sub {
    max-width: 46ch;
    font-size: clamp(1.02rem, 2.7vw, 1.15rem);
    line-height: 1.7;
    color: var(--sand);
    margin-bottom: 1.6rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .85);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.6rem;
    margin-bottom: 2rem;
    width: 100%;
}

.hero__actions .btn--solid { flex: 1 1 260px; max-width: 380px; }

/* Números de prova — no celular a faixa rolante logo abaixo repete os
   mesmos dados, então some daqui para sobrar altura à foto do duelo. */
.stats {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
    width: 100%;
    max-width: 430px;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.stats__item { display: flex; flex-direction: column; gap: .1rem; }

.stats__num {
    font-family: var(--f-poster);
    font-size: clamp(1.2rem, 3.4vw, 1.45rem);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.stats__label {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ash);
}

/* Indicador de rolagem */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 6.5rem;
    z-index: 3;
    display: none;
    width: 26px;
    height: 44px;
    transform: translateX(-50%);
}

.scroll-hint__line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--line-warm), transparent);
    overflow: hidden;
}

.scroll-hint__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--ember);
    box-shadow: 0 0 12px var(--ember);
    animation: hint-fall 2.4s var(--ease-soft) infinite;
}

/* Desce por transform em vez de `top`: mover `top` refaz o layout a
   cada quadro; transform roda no compositor. */
@keyframes hint-fall {
    0%        { transform: translateY(-16px); opacity: 0; }
    22%       { opacity: 1; }
    78%       { opacity: 1; }
    100%      { transform: translateY(46px); opacity: 0; }
}

/* ── 2. FAIXA ROLANTE ────────────────────────────────────── */
.ticker {
    position: relative;
    overflow: hidden;
    padding-block: .95rem;
    border-block: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(226, 98, 44, .07), rgba(224, 168, 62, .045), rgba(226, 98, 44, .07));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: roll 34s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

@keyframes roll {
    to { transform: translateX(-50%); }
}

.ticker__group {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding-right: 1.6rem;
    flex-shrink: 0;
}

.ticker__group span {
    font-family: var(--f-wood);
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sand);
    white-space: nowrap;
}

.ticker__group b { color: var(--ember); font-size: .62rem; }

/* ── 3. PROBLEMA ─────────────────────────────────────────── */
.pains {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block: 2.6rem;
}

.pain {
    position: relative;
    padding: 1.7rem 1.5rem 1.6rem;
    background: linear-gradient(165deg, rgba(87, 63, 41, .62), rgba(47, 36, 23, .5));
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .35s, background .35s;
}

/* Marca de fogo que sobe pela borda esquerda */
.pain::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rust), var(--ember), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease);
}

.pain:hover {
    transform: translateY(-4px);
    border-color: var(--line-warm);
    background: linear-gradient(165deg, rgba(110, 82, 56, .7), rgba(47, 36, 23, .5));
}

.pain:hover::before { transform: scaleX(1); }

.pain__num {
    display: block;
    font-family: var(--f-poster);
    font-size: 2.1rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(226, 98, 44, .42);
    margin-bottom: .7rem;
}

.pain__title {
    font-family: var(--f-body);
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--bone);
    margin-bottom: .55rem;
    letter-spacing: -.01em;
}

.pain p { color: var(--sand); font-size: .95rem; line-height: 1.68; }

/* A virada */
.turn {
    position: relative;
    max-width: 60ch;
    margin-block: 2.6rem;
    padding: 1.9rem 1.6rem 1.9rem 2.1rem;
    background: linear-gradient(120deg, rgba(226, 98, 44, .1), rgba(226, 98, 44, .02));
    border: 1px solid var(--line-warm);
    border-left: 3px solid var(--ember);
    border-radius: 0 6px 6px 0;
}

.turn p {
    font-family: var(--f-poster);
    font-size: clamp(1.25rem, 3.6vw, 1.75rem);
    line-height: 1.3;
    color: var(--bone);
    text-wrap: balance;
}

/* ── 5. TRILHA / MÓDULOS ─────────────────────────────────── */
.trail {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 3rem;
}

/* Corda pontilhada ligando as etapas (só no desktop) */
.trail__rope { display: none; }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    padding: 1.5rem;
    background: linear-gradient(168deg, rgba(87, 63, 41, .55), rgba(47, 36, 23, .45));
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}

.card:hover {
    transform: translateY(-6px);
    border-color: var(--line-warm);
    box-shadow: 0 26px 66px rgba(0, 0, 0, .5);
}

.card .tintype {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    transform: rotate(-1deg);
}

/* Recorte uniforme: as fotos são 2:3 e deixariam os cartões
   desproporcionalmente altos no enquadramento original. */
.card .tintype img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Cada foto tem o assunto numa altura diferente do quadro */
.trail .card:nth-of-type(1) .tintype img { object-position: center 20%; }
.trail .card:nth-of-type(2) .tintype img { object-position: center 32%; }
.trail .card:nth-of-type(3) .tintype img { object-position: center 26%; }

.card:nth-of-type(even) .tintype { transform: rotate(1.2deg); }
.card:hover .tintype { transform: rotate(0deg); }

.card__body { display: flex; flex-direction: column; gap: .6rem; }

.card__tag {
    font-family: var(--f-wood);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ember);
}

.card__title {
    font-family: var(--f-body);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--bone);
    line-height: 1.25;
}

.card__body > p { color: var(--sand); font-size: .94rem; line-height: 1.68; }

.card .checks {
    padding-top: .95rem;
    margin-top: .35rem;
    border-top: 1px solid var(--line);
}

.card .checks li { font-size: .87rem; }

/* ── 6. DEPOIMENTOS ──────────────────────────────────────── */
.quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-top: 2.8rem;
}

/* Coluna flex para a assinatura poder ser empurrada até a base: os
   depoimentos têm tamanhos diferentes, e como a grade iguala a altura
   dos cartões, sem isso a assinatura do texto mais curto ficaria
   boiando no meio, com um vão vazio embaixo. */
.quote {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.9rem 1.6rem 1.5rem;
    background: linear-gradient(168deg, rgba(87, 63, 41, .55), rgba(47, 36, 23, .45));
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: transform .45s var(--ease), border-color .35s;
}

.quote:hover { transform: translateY(-4px); border-color: var(--line-warm); }

/* Aspas decorativas */
.quote::before {
    content: '\201C';
    position: absolute;
    top: .35rem;
    left: 1rem;
    font-family: var(--f-poster);
    font-size: 3.6rem;
    line-height: 1;
    color: rgba(226, 98, 44, .2);
    pointer-events: none;
}

.quote blockquote p {
    position: relative;
    color: var(--bone);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.15rem;
}

.quote__who {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* Encosta na base do cartão, alinhando as assinaturas entre
       depoimentos de tamanhos diferentes */
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.quote__face {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-warm);
    flex-shrink: 0;
}

.quote__who span { display: flex; flex-direction: column; line-height: 1.35; }
.quote__who strong { font-size: .93rem; color: var(--bone); }
.quote__who small  { font-size: .78rem; color: var(--ash); }

/* ── 7. MENTOR ───────────────────────────────────────────── */
.mentor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.2rem;
    align-items: center;
    padding: 2.2rem 1.5rem;
    background: linear-gradient(160deg, rgba(87, 63, 41, .5), rgba(47, 36, 23, .38));
    border: 1px solid var(--line);
    border-radius: 10px;
}

.mentor__figure { justify-self: center; width: 100%; max-width: 230px; }

.mentor__body { display: flex; flex-direction: column; gap: .95rem; align-items: flex-start; }
.mentor__body > p { color: var(--sand); font-size: .98rem; line-height: 1.72; }
.mentor__body .section__title { margin-bottom: 0; }

.creds {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .2rem;
}

.creds li {
    padding: .34rem .8rem;
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--sand);
    background: rgba(226, 98, 44, .07);
    border: 1px solid var(--line-warm);
    border-radius: 40px;
}

/* ── 8. OFERTA ───────────────────────────────────────────── */
.section--oferta .shell { display: flex; flex-direction: column; align-items: center; }

/* Dois cartões: um em cima do outro no celular, lado a lado a
   partir do tablet. Cada .offer preenche a própria coluna do grid,
   por isso perdeu o max-width fixo que tinha quando era só um. */
.offers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    width: 100%;
    max-width: 980px;
    margin-top: 1.5rem;
    align-items: start;
}

.offer {
    position: relative;
    width: 100%;
    padding: 2.1rem 1.6rem 1.9rem;
    background: linear-gradient(168deg, var(--leather-2), var(--leather) 60%, #2F2318);
    border: 1px solid rgba(224, 168, 62, .28);
    border-radius: 10px;
    box-shadow:
        0 1px 0 rgba(224, 168, 62, .13) inset,
        0 30px 80px rgba(0, 0, 0, .62);
    overflow: hidden;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.offer:hover {
    transform: translateY(-5px);
    box-shadow:
        0 1px 0 rgba(224, 168, 62, .18) inset,
        0 38px 96px rgba(0, 0, 0, .7),
        0 0 60px rgba(226, 98, 44, .12);
}

/* O cartão com a gaita bônus ganha um contorno mais forte para o
   olho ir direto a ele — é o upgrade que vale mais a pena vender. */
.offer--featured {
    border-color: rgba(224, 168, 62, .5);
    box-shadow:
        0 1px 0 rgba(224, 168, 62, .22) inset,
        0 30px 80px rgba(0, 0, 0, .62),
        0 0 50px rgba(224, 168, 62, .1);
}

.offer--featured:hover {
    box-shadow:
        0 1px 0 rgba(224, 168, 62, .26) inset,
        0 38px 96px rgba(0, 0, 0, .7),
        0 0 70px rgba(224, 168, 62, .2);
}

/* Reserva espaço pro selo não cair por cima da primeira linha do
   título em cartões estreitos (celular) */
.offer--featured .offer__title,
.offer--featured .offer__name { padding-right: 6.5rem; }

.offer__badge {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    padding: .32rem .75rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1A0C04;
    background: linear-gradient(150deg, var(--gold-hi), var(--gold));
    border-radius: 40px;
    box-shadow: 0 4px 14px rgba(224, 168, 62, .35);
}

/* Fita de brasa no topo do cartão */
/* A fita corre por transform, não por `background-position`.

   Animar background-position repinta a faixa a cada quadro, e são
   duas em tela. Agora a fita é só uma janela que recorta, e quem se
   move é a camada de dentro: o gradiente tem o dobro da largura com
   o padrão repetido duas vezes, então deslocar 50% cai exatamente no
   início do ciclo e o laço fecha sem emenda. */
.offer__ribbon {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    overflow: hidden;
}

.offer__ribbon::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 200%;
    background: linear-gradient(90deg,
        var(--rust), var(--ember), var(--gold-hi), var(--ember),
        var(--rust), var(--ember), var(--gold-hi), var(--ember), var(--rust));
    animation: ribbon-flow 7s linear infinite;
}

@keyframes ribbon-flow {
    to { transform: translateX(-50%); }
}

.offer__head { margin-bottom: 1.5rem; }

/* ── VITRINE DAS GAITAS BÔNUS ──────────────────────────────────
   Círculo giratório (raios + brilho pulsante) atrás das duas fotos
   com fundo transparente, abertas em leque para sugerir "escolha
   a sua cor" sem esconder nenhuma das duas.
   ─────────────────────────────────────────────────────────── */
.offer__photos {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 190px;
    margin-bottom: .6rem;
}

/* Miolo pulsante — a mesma brasa usada no resto do site.
   "ellipse" em vez de "circle": a caixa é bem mais larga que alta,
   e um "circle" precisa crescer até alcançar os cantos — nessa
   largura, ele fica tão grande que em cima/baixo ainda está quase
   opaco quando a caixa corta. "ellipse" acompanha a proporção da
   caixa, então o degradê chega a transparente de forma simétrica
   nos quatro lados, exatamente como já acontecia nas laterais. */
.offer__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at center, rgba(247, 204, 114, .32) 0%, transparent 62%),
        radial-gradient(ellipse at center, rgba(226, 98, 44, .4) 0%, rgba(224, 168, 62, .16) 42%, transparent 74%);
    animation: offer-pulse 5s ease-in-out infinite;
}

@keyframes offer-pulse {
    0%, 100% { transform: scale(.92); opacity: .75; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Miolo giratório — raios de sol em leque, estilo selo de oferta.

   O padrão antigo (7° sólido + 15° vazio = período de 22°) não
   dividia 360° de forma exata — 360/22 = 16,36 — então no fecho da
   volta sobrava um raio cortado, fora do ritmo dos outros: a
   assimetria. As bordas também eram um corte binário (sólido para
   transparente sem transição), que o navegador rasteriza como um
   degrau serrilhado em vez de uma borda lisa: o "pixelado".

   Correção: 20 raios finos de 18° cada (360 ÷ 18 = 20 exato, sem
   resto) e cada raio nasce e morre em transparente — sem degrau.
   Uma máscara radial ainda afina a ponta central e a borda externa,
   então os raios em si não terminam em corte reto nenhum. */
.offer__spin {
    position: absolute;
    z-index: 1;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg,
            transparent      0deg,
            transparent      6deg,
            var(--gold-hi)   9deg,
            transparent      12deg,
            transparent      18deg),
        radial-gradient(circle, rgba(224, 168, 62, .18), transparent 68%);
    -webkit-mask-image: radial-gradient(circle, transparent 22%, #000 44%, #000 78%, transparent 100%);
            mask-image: radial-gradient(circle, transparent 22%, #000 44%, #000 78%, transparent 100%);
    filter: drop-shadow(0 0 22px rgba(226, 98, 44, .3));
    animation: offer-spin 25s linear infinite;
}

@keyframes offer-spin { to { transform: rotate(360deg); } }

.offer__gaita {
    position: relative;
    z-index: 2;
    width: 132px;
    height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}

/* Abertas em leque, uma levemente na frente da outra — flutuando
   sozinhas o tempo todo (sem depender de hover), com durações e um
   atraso diferentes entre elas para não balançarem em sincronia
   perfeita, o que pareceria mecânico em vez de natural. */
.offer__gaita--rosa {
    animation: gaita-float-rosa 4.6s ease-in-out infinite;
}

.offer__gaita--azul {
    z-index: 3;
    animation: gaita-float-azul 5.4s ease-in-out infinite .4s;
}

@keyframes gaita-float-rosa {
    0%, 100% { transform: translateX(14px) translateY(0)   rotate(-11deg); }
    50%      { transform: translateX(14px) translateY(-7px) rotate(-7deg); }
}

@keyframes gaita-float-azul {
    0%, 100% { transform: translateX(-14px) translateY(0)   rotate(9deg); }
    50%      { transform: translateX(-14px) translateY(-8px) rotate(13deg); }
}

.offer__colors {
    margin-bottom: 1.4rem;
    text-align: center;
    font-size: .85rem;
    color: var(--sand);
}

.offer__colors strong { color: var(--gold-hi); }

/* Rótulo curto ("Curso" / "Curso + Gaita") que identifica o cartão
   de cara, antes da descrição completa do produto abaixo dele. */
.offer__title {
    font-family: var(--f-poster);
    font-weight: 400;
    font-size: clamp(1.35rem, 3.6vw, 1.65rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--gold-hi);
    margin-bottom: .5rem;
    text-shadow: 0 0 22px rgba(224, 168, 62, .22);
}

.offer__name {
    font-family: var(--f-body);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bone);
    letter-spacing: -.01em;
}

.offer__anchor {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .8rem;
    font-size: .82rem;
    color: var(--ash);
}

.offer__anchor s {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--sand);
    text-decoration-color: var(--rust);
    text-decoration-thickness: 2px;
}

.offer__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.3rem;
    padding-block: 1.35rem;
    border-block: 1px solid var(--line);
    margin-bottom: 1.6rem;
}

.offer__parcel, .offer__cash { display: flex; flex-direction: column; gap: .1rem; }

.offer__small {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ash);
}

.offer__big {
    font-family: var(--f-poster);
    font-size: clamp(2.5rem, 9vw, 3.35rem);
    line-height: .98;
    letter-spacing: -.02em;
    background: linear-gradient(150deg, var(--gold-hi), var(--ember) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
}

.offer__big sup { font-size: 46%; top: -.62em; }

.offer__or {
    font-size: .82rem;
    color: var(--ash);
    align-self: center;
}

.offer__cash-value {
    font-family: var(--f-poster);
    font-size: 1.45rem;
    line-height: 1.1;
    color: var(--gold);
}

.offer__list { margin-bottom: 1.7rem; }

/* O item que diferencia o cartão com a gaita bônus */
.offer__bonus {
    color: var(--gold-hi) !important;
    font-weight: 700;
}

.offer__note {
    margin-top: .9rem;
    text-align: center;
    font-size: .78rem;
    color: var(--ash);
}

/* ── 9. GARANTIA ─────────────────────────────────────────── */
.warranty {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
    align-items: center;
    justify-items: center;
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
    padding: 2.4rem 1.6rem;
    background: linear-gradient(160deg, rgba(226, 98, 44, .07), rgba(47, 36, 23, .4));
    border: 1px solid var(--line-warm);
    border-radius: 10px;
}

.warranty__seal {
    width: 118px;
    height: 118px;
    flex-shrink: 0;
    color: var(--gold);
    filter: drop-shadow(0 0 22px rgba(224, 168, 62, .3));
}

.warranty__seal svg { width: 100%; height: 100%; }

.warranty__seal svg > circle:first-child {
    transform-origin: 50% 50%;
    animation: seal-turn 34s linear infinite;
}

@keyframes seal-turn { to { transform: rotate(360deg); } }

.warranty__seal-num {
    font-family: var(--f-poster);
    font-size: 34px;
    fill: var(--gold-hi);
}

.warranty__seal-word {
    font-family: var(--f-wood);
    font-size: 13px;
    letter-spacing: .14em;
    fill: var(--gold);
}

.warranty__body { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.warranty__body .eyebrow { justify-content: center; margin-bottom: 0; }
.warranty__body .section__title { margin-bottom: 0; }
.warranty__body > p { color: var(--sand); font-size: 1rem; line-height: 1.72; max-width: 52ch; }

.warranty__fine { font-size: .8rem !important; color: var(--ash) !important; }

/* ── 10. FAQ ─────────────────────────────────────────────── */
.faq {
    max-width: 760px;
    margin-top: 2.4rem;
}

.faq__item {
    border-bottom: 1px solid var(--line);
    transition: border-color .3s;
}

.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item[open] { border-bottom-color: var(--line-warm); }

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding-block: 1.3rem;
    min-height: 56px;
    list-style: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bone);
    letter-spacing: -.005em;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold); }

/* Cruz que gira ao abrir */
.faq__item summary::after {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background:
        linear-gradient(var(--sand), var(--sand)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--sand), var(--sand)) center / 1.5px 11px no-repeat;
    transition: transform .4s var(--ease), border-color .3s, background-size .3s;
}

.faq__item[open] summary::after {
    transform: rotate(135deg);
    border-color: var(--ember);
    background-image:
        linear-gradient(var(--ember), var(--ember)),
        linear-gradient(var(--ember), var(--ember));
}

.faq__body {
    padding-bottom: 1.35rem;
    animation: faq-open .42s var(--ease);
}

@keyframes faq-open {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.faq__body p { color: var(--sand); font-size: .96rem; line-height: 1.75; max-width: 64ch; }

/* ── 11. CHAMADA FINAL ───────────────────────────────────── */
.section--final {
    position: relative;
    overflow: hidden;
    padding-block: clamp(5.5rem, 13vw, 9.5rem);
    border-top: 1px solid var(--line);
}

/* Mantém o brilho de brasa por cima do véu padrão */
.section--final::after {
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(226, 98, 44, .13), transparent 70%),
        linear-gradient(to bottom,
            var(--void) 1%,
            rgba(36, 26, 16, var(--veu)) 24%,
            rgba(36, 26, 16, var(--veu)) 76%,
            var(--void) 99%);
}

.final__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.35rem;
}

.final__title {
    font-family: var(--f-poster);
    font-weight: 400;
    font-size: clamp(2.2rem, 7.4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--bone);
    text-wrap: balance;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .6);
}

.final__mini {
    font-size: .82rem;
    letter-spacing: .05em;
    color: var(--ash);
}

/* ── RODAPÉ ──────────────────────────────────────────────── */
.site-footer {
    padding-block: 2.6rem;
    border-top: 1px solid var(--line);
    background: rgba(31, 22, 14, .5);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.site-footer__copy { font-size: .8rem; color: var(--ash); }

.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }

.site-footer__nav a {
    font-size: .8rem;
    color: var(--ash);
    transition: color .25s;
}

.site-footer__nav a:hover { color: var(--gold); }

/* ── REVELAÇÃO AO ROLAR ──────────────────────────────────── */
/* Só esconde se o JS estiver vivo — sem JS, tudo aparece normalmente. */
.js .reveal {
    opacity: 0;
    transform: translateY(13px);
    transition:
        opacity .42s var(--ease-soft) var(--d, 0ms),
        transform .42s var(--ease-soft) var(--d, 0ms);
    will-change: opacity, transform;
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ═══════════ CENTRALIZAÇÃO — PROBLEMA E FAQ (todas as telas) ═
   Diferente do bloco de mobile abaixo, este vale em qualquer
   largura: estas duas seções ficam centralizadas também no
   tablet e no desktop, igual à oferta e à chamada final. As
   demais seções (trilha, depoimentos, mentor) não são tocadas
   aqui — continuam alinhadas à esquerda a partir do tablet.

   O texto das respostas do FAQ (`.faq__body p`) fica de fora de
   propósito: são parágrafos de leitura mais longos, e centralizar
   várias linhas de texto corrido prejudica a leitura.
   ─────────────────────────────────────────────────────────── */
.section--problema .eyebrow,
.section--faq .eyebrow {
    justify-content: center;
}

.section--problema .section__title,
.section--faq .section__title {
    text-align: center;
    margin-inline: auto;
}

.section--problema .prose {
    text-align: center;
    margin-inline: auto;
}

.section--problema .pain {
    text-align: center;
}

.section--problema .turn {
    text-align: center;
    margin-inline: auto;
}

.section--faq .faq {
    margin-inline: auto;
}

.section--faq .faq__item summary {
    justify-content: center;
    text-align: center;
    gap: .75rem;
}

/* ═══════════ CENTRALIZAÇÃO — SÓ MOBILE (até 619px) ═══════════
   Textos e blocos migram para o centro da tela no celular. A partir
   do tablet (620px+) os overrides abaixo simplesmente não se aplicam
   e o layout volta ao alinhamento à esquerda já definido nas seções
   TABLET/DESKTOP mais abaixo — nada muda para telas maiores.

   Listas com marca (checklists) ficam de fora de propósito: o texto
   de cada item é ancorado ao próprio ícone de check à esquerda, e
   centralizar o texto desalinharia visualmente marca e frase.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 619.98px) {
    .eyebrow { justify-content: center; }

    .section__title,
    .prose,
    .pain,
    .turn p,
    .card__tag,
    .card__title,
    .card__body > p,
    .quote blockquote p,
    .mentor__body > p,
    .offer__title,
    .offer__name {
        text-align: center;
    }

    .prose,
    .turn { margin-inline: auto; }

    .hero__copy {
        align-items: center;
        text-align: center;
    }

    .hero__actions { justify-content: center; }

    .card__body { align-items: center; }

    .quote {
        text-align: center;
    }

    .quote::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .quote__who {
        justify-content: center;
        text-align: center;
    }

    .mentor__body {
        align-items: center;
    }

    .creds { justify-content: center; }

    .offer__head,
    .offer__price {
        justify-content: center;
        text-align: center;
    }

    .faq__item summary {
        justify-content: center;
        text-align: center;
        gap: .75rem;
    }

    /* Espaçamento vertical pela metade: o ritmo base foi pensado para
       telas largas, e no celular o vão entre seções e entre blocos
       ficava exagerado. */
    :root { --rhythm: clamp(2.5rem, 5.5vw, 4.25rem); }

    .section--final { padding-block: clamp(2.75rem, 6.5vw, 4.75rem); }

    .pains  { margin-block: 1.3rem; }
    .turn   { margin-block: 1.3rem; }
    .trail  { margin-top: 1.5rem; }
    .quotes { margin-top: 1.4rem; }
    .offer  { margin-top: .75rem; }
    .faq    { margin-top: 1.2rem; }
    .warranty { gap: .9rem; }
    .mentor   { gap: 1.1rem; }
}

/* ═══════════ TABLET — 620px ═══════════ */
@media (min-width: 620px) {
    :root { --gut: 2rem; }

    .pains  { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
    .quotes { grid-template-columns: repeat(2, 1fr); }
    .trail  { grid-template-columns: repeat(3, 1fr); }

    .stats  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 520px; }

    .mentor {
        grid-template-columns: auto 1fr;
        gap: 2.5rem;
        padding: 2.6rem 2.2rem;
    }
    .mentor__figure { max-width: 210px; }
    .mentor__body { align-items: flex-start; }

    .warranty {
        grid-template-columns: auto 1fr;
        justify-items: start;
        text-align: left;
        padding: 2.6rem 2.4rem;
        gap: 2.2rem;
    }
    .warranty__body { align-items: flex-start; }
    .warranty__body .eyebrow { justify-content: flex-start; }

    .offer { padding: 2.5rem 2.2rem 2.1rem; }

    .dock { display: none; }
    body { padding-bottom: 0; }
    .site-header__cta { display: inline-flex; }
}

/* ═══════════ DESKTOP — 940px ═══════════ */
@media (min-width: 940px) {
    :root { --gut: 3rem; }

    /* Os dois cartões de oferta ficam lado a lado a partir daqui —
       mais estreito que isso, o preço grande (clamp em vw) não cabe
       na coluna e quebra feio. */
    .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hero {
        align-items: center;
        padding-block: 8rem 6rem;
    }

    /* Texto confinado à coluna da esquerda; a direita fica para a foto */
    .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

    /* A foto desce da direita e sua borda esquerda derrete no escuro,
       para o rosto dele não ficar embaixo do título. */
    .hero__photo {
        inset: 0 -6% 0 26%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    }

    .hero__photo img {
        height: 100%;
        aspect-ratio: auto;
        object-position: center 30%;
    }

    .hero__scrim {
        background:
            linear-gradient(100deg,
                rgba(36, 26, 16, .92) 0%,
                rgba(36, 26, 16, .74) 30%,
                rgba(36, 26, 16, .34) 52%,
                rgba(36, 26, 16, .22) 72%,
                rgba(36, 26, 16, .5) 100%),
            linear-gradient(to bottom,
                rgba(36, 26, 16, .5) 0%,
                transparent 26%,
                rgba(36, 26, 16, .45) 78%,
                var(--void) 99%);
    }

    .scroll-hint { display: block; }

    /* Dois depoimentos: mantém duas colunas e centraliza o par. Com
       três colunas sobraria uma vazia e os cartões encostariam à
       esquerda. O limite de largura evita que dois cartões fiquem
       esticados demais numa tela larga. */
    .quotes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 860px;
        margin-inline: auto;
    }

    /* Corda pontilhada ligando as três etapas */
    .trail { gap: 2rem; }

    .trail__rope {
        display: block;
        position: absolute;
        top: 120px;
        left: 12%;
        right: 12%;
        height: 1px;
        z-index: 0;
        background-image: linear-gradient(90deg, var(--line-warm) 50%, transparent 50%);
        background-size: 9px 1px;
        opacity: .7;
    }

    .card { padding: 1.8rem; }
    .card .tintype { max-width: 100%; }

    .mentor__figure { max-width: 250px; }

    .pain { padding: 2rem 1.8rem 1.9rem; }

    .turn { padding: 2.2rem 2rem 2.2rem 2.6rem; }
}

/* ── PONTEIRO FINO: efeitos só onde faz sentido ──────────── */
@media (hover: none) {
    .tintype:hover { transform: none; }
    .card:hover, .pain:hover, .quote:hover, .offer:hover { transform: none; }
}

/* ── MOVIMENTO REDUZIDO ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

    .js .reveal { opacity: 1; transform: none; }
    .fx-grain { animation: none; }
    .ticker__track { animation: none; }
    .hero__dust { display: none; }
    .scroll-hint { display: none; }
}