/* =====================================================================
   BLACK 2026 | ISA PRA SEMPRE :: PAGINA DE OBRIGADA (pos-cadastro)
   Rota: /obrigado/  (src/obrigado/index.html)
   Componentes reaproveitados da captacao, carregados antes deste arquivo:
     faixa-assinatura-2026.css  -> .fx26 (faixa dourada em marquee)
     final-2026.css             -> .fn26 (secao final) e .fn26-btn (CTA dourado com reflexo)
   Este arquivo so traz o que a captacao nao tem: hero de confirmacao,
   moldura do video vertical, cards dos passos, linha do tempo e aviso.
   Paleta e fontes: as mesmas tokens da campanha (champagne, preto quente, dourados).
   ===================================================================== */

@font-face {
    font-family: "Bigola Display";
    src: url("../assets/fonts/Bigola-Display-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Bigola Display";
    src: url("../assets/fonts/Bigola-Display-Italic.woff2") format("woff2");
    font-weight: 400; font-style: italic; font-display: swap;
}

/* layout: coluna central estreita (hero e video), grade de 2 cards com o passo 2 dominante, faixa, linha do tempo, fechamento */
:root {
    color-scheme: dark;
    --ob-ink-0: #070504;
    --ob-ink-1: #0A0705;
    --ob-ink-2: #120B07;
    --ob-ink-3: #1A130E;
    --ob-ivory: #F4ECDF;
    --ob-champ: #E9D9C2;
    --ob-muted: rgba(233, 217, 194, .74);
    --ob-faint: rgba(233, 217, 194, .5);
    --ob-gold: #C9A05A;
    --ob-gold-soft: #D8B36A;
    --ob-gold-hi: #F0D99A;
    --ob-copper: #9B7437;
    --ob-paper-1: #F5EEE5;
    --ob-paper-2: #EDE0CF;
    --ob-paper-3: #E3D2BA;
    --ob-paper-ink: #1E150F;
    --ob-paper-mid: #5C4636;
    --ob-line: rgba(216, 179, 106, .28);
    --ob-display: "Bigola Display", "Laviossa", Georgia, serif;
    --ob-text: "Poppins", "Plus Jakarta Sans", Arial, sans-serif;
    --ob-gutter: clamp(20px, 4vw, 48px);
    /* .fn26-btn usa --fn-text; fora da .fn26 ele vem daqui */
    --fn-text: var(--ob-text);
}

html, body { background: var(--ob-ink-1); }
body {
    margin: 0;
    color: var(--ob-ivory);
    font-family: var(--ob-text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.ob26-page *, .ob26-page *::before, .ob26-page *::after { box-sizing: border-box; }
.ob26-page img { max-width: 100%; height: auto; }

/* ---------- elementos compartilhados ---------- */
.ob26-eyebrow {
    margin: 0;
    padding-left: .32em;
    font-family: var(--ob-text); font-weight: 600; font-size: 11.5px; line-height: 1.4;
    letter-spacing: .32em; text-transform: uppercase; color: var(--ob-gold);
}
.ob26-title {
    margin: 0;
    font-family: var(--ob-display); font-weight: 400;
    font-size: clamp(30px, 3.3vw, 46px); line-height: 1.12;
    letter-spacing: 0; color: var(--ob-ivory); text-wrap: balance;
}

/* CTA: pele identica ao .fn26-btn da captacao; aqui so largura, icone e quebra de linha */
.ob26-btn.fn26-btn {
    width: 100%; max-width: none;
    gap: 12px;
    min-height: 60px;
    padding: 16px 24px;
    font-size: 14px; line-height: 1.35; letter-spacing: .14em;
    text-align: center; text-wrap: balance;
}
.ob26-btn-label { display: inline; }
.ob26-btn svg { display: inline-block; width: 21px; height: 21px; margin: 0 12px 0 0; vertical-align: -5px; }
.ob26-btn--main.fn26-btn { min-height: 66px; font-size: 15px; letter-spacing: .16em; }

/* =====================================================================
   SECAO 1 :: CONFIRMACAO + VIDEO
   ===================================================================== */
.ob26-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(34px, 3.6vw, 52px) var(--ob-gutter) clamp(44px, 4.4vw, 64px);
    text-align: center;
    background:
        radial-gradient(ellipse 70% 38% at 50% 0%, rgba(214, 164, 92, .16) 0%, rgba(214, 164, 92, 0) 70%),
        radial-gradient(ellipse 50% 30% at 50% 62%, rgba(120, 86, 48, .16) 0%, rgba(120, 86, 48, 0) 72%),
        linear-gradient(180deg, var(--ob-ink-2) 0%, var(--ob-ink-1) 60%, var(--ob-ink-1) 100%);
}
/* simbolo da marca como textura, como na secao final da captacao */
.ob26-mark {
    position: absolute; z-index: -1; left: 50%; top: 120px;
    width: min(130vw, 1100px); aspect-ratio: 1000 / 831;
    transform: translateX(-46%);
    background: url("../assets/images/cerebro-isa-pra-sempre.webp") center / contain no-repeat;
    opacity: .05; pointer-events: none;
}
.ob26-hero-inner { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ob26-logo { margin: 0 0 clamp(20px, 2.2vw, 28px); line-height: 0; }
.ob26-logo img { display: block; width: clamp(180px, 15vw, 230px); height: auto; }

.ob26-ok {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 22px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(216, 179, 106, .38); border-radius: 999px;
    background: rgba(216, 179, 106, .06);
    font-family: var(--ob-text); font-weight: 600; font-size: 11px; line-height: 1;
    letter-spacing: .28em; text-transform: uppercase; color: var(--ob-gold-soft);
}
.ob26-ok svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ob-gold-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ob26-h { margin: 0 0 16px; font-family: var(--ob-display); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
.ob26-h-1 {
    display: block;
    font-style: italic;
    font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04;
    padding-bottom: .06em; margin-bottom: .12em;
    color: var(--ob-gold-soft);
    background: linear-gradient(100deg, #f7e6b0 0%, #d8b36a 48%, #a97c3c 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ob26-h-2 { display: block; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; color: var(--ob-ivory); }

.ob26-lede {
    margin: 0 auto clamp(22px, 2.2vw, 30px); max-width: 31em;
    font-family: var(--ob-text); font-weight: 300;
    font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; color: rgba(255, 255, 255, .8);
    text-wrap: pretty;
}
.ob26-lede::before {   /* filete dourado da hero da captacao */
    content: ""; display: block; width: 72px; height: 1px; margin: 0 auto 18px;
    background: linear-gradient(90deg, rgba(216, 179, 106, 0), var(--ob-gold-soft), rgba(216, 179, 106, 0));
}

/* ---------- moldura do video vertical (VTurb) ----------
   Proporcao 9:16 preservada. Desktop: 420px. Mobile: quase toda a largura,
   limitada pela altura da tela para nao afastar demais os CTAs. */
.ob26-video {
    position: relative;
    width: min(100%, 420px);
    max-width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    border: 1px solid transparent;
    background:
        radial-gradient(ellipse 80% 50% at 50% 40%, rgba(214, 164, 92, .10) 0%, rgba(214, 164, 92, 0) 70%) padding-box,
        linear-gradient(180deg, #17100B 0%, #0B0806 100%) padding-box,
        linear-gradient(160deg, rgba(240, 217, 154, .75), rgba(184, 132, 47, .3) 50%, rgba(216, 179, 106, .6)) border-box;
    box-shadow:
        0 44px 90px -34px rgba(0, 0, 0, .95),
        0 0 70px rgba(201, 150, 80, .12),
        inset 0 1px 0 rgba(255, 244, 214, .08);
}
.ob26-video-slot {
    position: absolute; inset: 0;
    border-radius: 19px; overflow: hidden;
}
/* o player colado ocupa a moldura inteira */
.ob26-video-slot > * { width: 100% !important; max-width: 100% !important; height: 100%; margin: 0 !important; display: block; }

/* =====================================================================
   PLACEHOLDER TEMPORARIO DO VIDEO (VTURB_EMBED)
   Provisorio: so serve para visualizar a pagina enquanto o VTurb nao entra.
   Ao colar o codigo real, apague o <div class="ob26-video-ph"> no HTML.
   Pode apagar este bloco de CSS tambem; sem o placeholder ele nao tem efeito
   e a moldura volta sozinha para a largura definitiva (420px no desktop).
   ===================================================================== */
@media (min-width: 768px) {
    /* desktop: moldura temporaria com ~340px enquanto o placeholder existir */
    .ob26-video:has(.ob26-video-ph) { width: min(100%, 340px); }
}
.ob26-video-ph {
    position: absolute !important; inset: 0; width: auto !important; height: auto !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(ellipse 75% 45% at 50% 45%, rgba(216, 179, 106, .07) 0%, rgba(216, 179, 106, 0) 72%),
        linear-gradient(180deg, #241A12 0%, #1C140E 100%);
}
.ob26-video-ph-a {
    font-family: var(--ob-text); font-weight: 500; font-size: 12px; line-height: 1.3;
    letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: rgba(233, 217, 194, .62);
}
.ob26-video-ph-b {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 400; font-size: 11.5px; line-height: 1.3;
    letter-spacing: .08em; color: rgba(216, 179, 106, .62);
}
.ob26-video-ph-b::before {
    content: ""; display: block; width: 28px; height: 1px; margin: 2px auto 12px;
    background: rgba(216, 179, 106, .35);
}
.ob26-video-ph-c {
    margin-top: 6px;
    font-family: var(--ob-text); font-weight: 300; font-size: 10.5px; line-height: 1.3;
    letter-spacing: .04em; color: rgba(233, 217, 194, .36);
}
/* ===================== /PLACEHOLDER TEMPORARIO ===================== */

.ob26-hold { margin: clamp(26px, 2.6vw, 34px) 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob26-hold-a {
    margin: 0;
    font-family: var(--ob-display); font-weight: 400;
    font-size: clamp(23px, 2.1vw, 29px); line-height: 1.2; color: var(--ob-ivory);
}
.ob26-hold-b {
    margin: 0; padding-left: .22em;
    font-family: var(--ob-text); font-weight: 500; font-size: 12px; line-height: 1.5;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ob-gold-soft);
}
.ob26-down {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-top: 6px; border-radius: 50%;
    color: var(--ob-gold-hi); text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .38);
    transition: box-shadow .25s ease, background-color .25s ease;
}
.ob26-down svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: ob26-nudge 2.6s ease-in-out infinite; }
@keyframes ob26-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.ob26-down:hover { background-color: rgba(216, 179, 106, .08); box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .7); }
.ob26-down:focus-visible { outline: 2px solid var(--ob-gold-hi); outline-offset: 3px; }

/* =====================================================================
   SECAO 2 :: OS DOIS PASSOS
   Transicao preto quente -> champagne (o inverso da entrada dos Sorteios).
   Passo 1: card marfim (linguagem da secao 2 da captacao).
   Passo 2: card carvao com borda dourada e fio de ouro (Experiencia/Sorteios),
   maior e com selo "Mais importante".
   ===================================================================== */
.ob26-steps {
    position: relative;
    padding: clamp(120px, 10vw, 160px) var(--ob-gutter) clamp(76px, 7.4vw, 108px);
    background:
        radial-gradient(ellipse 60% 30% at 50% 58%, rgba(255, 250, 241, .55) 0%, rgba(255, 250, 241, 0) 70%),
        linear-gradient(180deg, var(--ob-ink-1) 0, #1A130E 26px, #6A5543 66px, #C9B498 104px, var(--ob-paper-3) 132px, var(--ob-paper-2) 45%, var(--ob-paper-1) 100%);
}
.ob26-grid {
    scroll-margin-top: 48px;
    max-width: 1080px; margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(22px, 2.6vw, 36px);
    align-items: center;
}
.ob26-card { position: relative; min-width: 0; border-radius: 22px; }
.ob26-card-body { display: flex; flex-direction: column; gap: 14px; }

.ob26-step {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 6px;
    font-family: var(--ob-text); font-weight: 600; font-size: 12px; line-height: 1;
    letter-spacing: .28em; text-transform: uppercase;
}
.ob26-step::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }

.ob26-card-title {
    margin: 0 0 4px;
    font-family: var(--ob-display); font-weight: 400;
    line-height: 1.12; letter-spacing: 0; text-wrap: balance;
}
.ob26-card p.ob26-p {
    margin: 0;
    font-family: var(--ob-text); font-weight: 400; font-size: 15px; line-height: 1.68;
    text-wrap: pretty;
}
.ob26-card .ob26-btn { margin-top: 12px; }

/* ---------- passo 1 ---------- */
.ob26-card--one {
    padding: clamp(28px, 2.8vw, 38px) clamp(24px, 2.6vw, 36px) clamp(28px, 2.8vw, 36px);
    background: linear-gradient(180deg, #FFFCF7 0%, #F6EFE2 100%);
    border: 1px solid rgba(155, 116, 55, .22);
    box-shadow: 0 24px 46px -22px rgba(64, 40, 16, .38), inset 0 1px 0 rgba(255, 255, 255, .9);
    color: var(--ob-paper-ink);
}
.ob26-card--one .ob26-step { color: var(--ob-copper); }
.ob26-card--one .ob26-card-title { font-size: clamp(25px, 2.2vw, 31px); color: var(--ob-paper-ink); }
.ob26-card--one p.ob26-p { color: var(--ob-paper-mid); }
.ob26-card--one p.ob26-gift { color: var(--ob-paper-ink); font-weight: 500; }
.ob26-gift svg { width: 17px; height: 17px; margin: 0 6px -3px 0; fill: none; stroke: var(--ob-copper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- passo 2 (acao principal) ---------- */
.ob26-card--two {
    --gw-cycle: 8s;
    padding: clamp(40px, 3.6vw, 50px) clamp(26px, 3vw, 44px) clamp(30px, 3vw, 42px);
    border: 1px solid transparent;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(214, 164, 92, .12) 0%, rgba(214, 164, 92, 0) 70%) padding-box,
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .01) 0 1px, rgba(255, 255, 255, 0) 1px 5px) padding-box,
        linear-gradient(165deg, #1A130E 0%, #15100D 50%, #0D0A08 100%) padding-box,
        linear-gradient(160deg, rgba(240, 217, 154, .85), rgba(184, 132, 47, .45) 55%, rgba(216, 179, 106, .75)) border-box;
    box-shadow:
        0 46px 90px -30px rgba(40, 26, 12, .7),
        0 12px 26px -8px rgba(40, 26, 12, .28),
        0 0 0 6px rgba(216, 179, 106, .10),
        0 0 60px rgba(201, 150, 80, .22);
    color: var(--ob-ivory);
}
.ob26-flag {
    position: absolute; top: 0; left: clamp(26px, 3vw, 44px);
    transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px calc(14px + .26em);
    border: 1px solid #9a7132; border-radius: 999px;
    font-family: var(--ob-text); font-weight: 600; font-size: 10.5px; line-height: 1;
    letter-spacing: .26em; text-transform: uppercase; color: #17110a;
    text-shadow: 0 1px 0 rgba(255, 246, 220, .5);
    background: linear-gradient(180deg, #fbf0cc 0%, #efd79b 22%, #dcb872 48%, #c79a50 62%, #e2c27c 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
    z-index: 4;
}
.ob26-flag svg { width: 11px; height: 11px; fill: #6e4c1c; margin-left: -.26em; }
.ob26-card--two .ob26-step { color: var(--ob-gold-soft); }
.ob26-card--two .ob26-card-title { font-size: clamp(28px, 2.7vw, 38px); color: #F7F1E8; }
.ob26-card--two p.ob26-p { color: rgba(244, 236, 223, .78); font-weight: 300; }
.ob26-card--two p.ob26-key {
    font-family: var(--ob-display); font-weight: 400; font-style: italic;
    font-size: clamp(20px, 1.7vw, 23px); line-height: 1.3; color: var(--ob-gold-hi);
}
.ob26-card--two p.ob26-p strong { font-weight: 500; color: var(--ob-champ); }
.ob26-quiet {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 4px; padding-top: 16px;
    border-top: 1px solid rgba(216, 179, 106, .2);
}
.ob26-quiet svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--ob-gold-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ob26-card--two .ob26-quiet p.ob26-p { font-size: 14px; line-height: 1.6; color: rgba(233, 217, 194, .66); }

/* fio de ouro no contorno real do card (mesmo componente .gw dos Sorteios da captacao) */
.gw { position: relative; }
.gw-wire { position: absolute; left: -1px; top: -1px; overflow: visible; pointer-events: none; z-index: 3; }
.gw-wire rect { fill: none; stroke-linecap: round; opacity: 0; }
.gw-line { stroke-width: 1.6; stroke-dasharray: 110 890; }
.gw-halo { stroke-width: 4.2; stroke-dasharray: 110 890; }
.gw-live .gw-line { animation: ob26-line var(--gw-cycle, 8s) cubic-bezier(.45, .05, .45, .95) infinite; animation-delay: var(--gw-delay, 0s); }
.gw-live .gw-halo { animation: ob26-halo var(--gw-cycle, 8s) cubic-bezier(.45, .05, .45, .95) infinite; animation-delay: var(--gw-delay, 0s); }
@keyframes ob26-line { 0% { stroke-dashoffset: 0; opacity: 0; } 6% { opacity: 1; } 34% { opacity: 1; } 40% { stroke-dashoffset: -1000; opacity: 0; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes ob26-halo { 0% { stroke-dashoffset: 0; opacity: 0; } 6% { opacity: .3; } 34% { opacity: .3; } 40% { stroke-dashoffset: -1000; opacity: 0; } 100% { stroke-dashoffset: -1000; opacity: 0; } }

/* =====================================================================
   SECAO 3 :: O QUE ACONTECE AGORA (linha do tempo) + AVISO
   ===================================================================== */
.ob26-next {
    position: relative;
    padding: clamp(80px, 7.6vw, 116px) var(--ob-gutter) clamp(84px, 8vw, 120px);
    background:
        radial-gradient(ellipse 60% 34% at 50% 30%, rgba(120, 86, 48, .18) 0%, rgba(120, 86, 48, 0) 70%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .008) 0 1px, rgba(255, 255, 255, 0) 1px 5px),
        linear-gradient(180deg, #0C0907 0%, #0A0806 70%, #080605 100%);
}
.ob26-next-inner { max-width: 1040px; margin: 0 auto; }
.ob26-next-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: clamp(44px, 4.6vw, 64px); }

.ob26-tl {
    --tl-node: 26px;
    position: relative;
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
}
.ob26-tl::before {   /* trilho dourado ligando as tres etapas */
    content: ""; position: absolute;
    top: calc(var(--tl-node) / 2); left: calc(100% / 6); right: calc(100% / 6); height: 1px;
    background: linear-gradient(90deg, rgba(216, 179, 106, .85), rgba(216, 179, 106, .35) 50%, rgba(240, 217, 154, .9));
}
.ob26-tl li { position: relative; margin: 0; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob26-node {
    position: relative; z-index: 1;
    width: var(--tl-node); height: var(--tl-node); margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #0B0806;
    box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .7);
}
.ob26-node::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--ob-gold-soft); }
.ob26-tl li:first-child .ob26-node { box-shadow: inset 0 0 0 1px var(--ob-gold-hi), 0 0 0 5px rgba(216, 179, 106, .12), 0 0 18px rgba(240, 217, 154, .35); }
.ob26-tl li:first-child .ob26-node::after { background: var(--ob-gold-hi); }
.ob26-tl li:last-child .ob26-node { background: linear-gradient(180deg, #fbf0cc 0%, #dcb872 45%, #b3843c 100%); box-shadow: 0 0 0 5px rgba(216, 179, 106, .12), 0 0 22px rgba(240, 217, 154, .3); }
.ob26-tl li:last-child .ob26-node::after { background: #2a1c0e; }
.ob26-when {
    margin: 0; padding-left: .22em;
    font-family: var(--ob-text); font-weight: 600; font-size: 13px; line-height: 1.3;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ob-gold-soft);
}
.ob26-what {
    margin: 0; max-width: 19em;
    font-family: var(--ob-text); font-weight: 300; font-size: 15px; line-height: 1.62;
    color: var(--ob-muted); text-wrap: balance;
}

/* aviso de seguranca: atencao sem alarme, dentro do dourado da campanha */
.ob26-alert {
    max-width: 760px; margin: clamp(56px, 5.6vw, 80px) auto 0;
    padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px);
    border-radius: 18px;
    border: 1px solid transparent;
    background:
        linear-gradient(160deg, #1D150F 0%, #140F0B 60%, #100C09 100%) padding-box,
        linear-gradient(160deg, rgba(240, 217, 154, .7), rgba(184, 132, 47, .3) 55%, rgba(216, 179, 106, .55)) border-box;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px rgba(201, 150, 80, .07);
}
.ob26-alert-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ob26-alert-icon {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(216, 179, 106, .18), rgba(216, 179, 106, .03) 70%);
    box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .45);
}
.ob26-alert-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ob-gold-hi); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ob26-alert-title {
    margin: 0; padding-left: .3em;
    font-family: var(--ob-text); font-weight: 600; font-size: 13px; line-height: 1;
    letter-spacing: .3em; text-transform: uppercase; color: var(--ob-gold-hi);
}
.ob26-alert-body { display: flex; flex-direction: column; gap: 8px; }
.ob26-alert-body p {
    margin: 0;
    font-family: var(--ob-text); font-weight: 300; font-size: 15px; line-height: 1.66; color: var(--ob-muted);
    text-wrap: pretty;
}
.ob26-alert-body p:first-child { color: var(--ob-ivory); font-weight: 400; }
.ob26-alert-body strong { font-weight: 500; color: var(--ob-champ); }
.ob26-alert-body strong.ob26-nw { white-space: nowrap; }

/* =====================================================================
   SECAO FINAL :: usa a .fn26 da captacao; so a divisa com a secao anterior
   ===================================================================== */
.ob26-page .fn26 { border-top: 1px solid rgba(216, 179, 106, .14); }
.ob26-page .fn26-logo { margin-bottom: 26px; }
.ob26-page .fn26-eyebrow { margin-bottom: 16px; }
.ob26-page .fn26 .fn26-title { margin-bottom: 22px; }
.ob26-page .fn26-body { margin-bottom: 30px; }
.ob26-page .fn26-cta { max-width: 460px; }

/* ---------- entradas (uma vez; o conteudo e visivel por padrao) ---------- */
.ob26-r.ob26-ready { opacity: 0; translate: 0 16px; }
.ob26-r.ob26-ready.ob26-in { opacity: 1; translate: 0 0; transition: opacity .6s cubic-bezier(.22, .7, .25, 1), translate .6s cubic-bezier(.22, .7, .25, 1); }
.ob26-grid .ob26-r.ob26-in:nth-child(2) { transition-delay: .12s; }
.ob26-tl .ob26-r.ob26-in:nth-child(2) { transition-delay: .1s; }
.ob26-tl .ob26-r.ob26-in:nth-child(3) { transition-delay: .2s; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1024px) {
    .ob26-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
    .ob26-btn.fn26-btn { letter-spacing: .12em; padding: 15px 18px; }
}
/* empilha os cards antes de apertar a leitura */
@media (max-width: 880px) {
    .ob26-grid { grid-template-columns: 1fr; max-width: 560px; gap: 40px; }
}
@media (max-width: 720px) {
    /* linha do tempo vertical */
    .ob26-tl { grid-template-columns: 1fr; gap: 26px; max-width: 460px; margin: 0 auto; }
    .ob26-tl::before {
        top: calc(var(--tl-node) / 2); bottom: auto; left: calc(var(--tl-node) / 2); right: auto;
        width: 1px; height: calc(100% - var(--tl-node));
        background: linear-gradient(180deg, rgba(216, 179, 106, .85), rgba(216, 179, 106, .35) 50%, rgba(240, 217, 154, .9));
    }
    .ob26-tl li {
        display: grid; grid-template-columns: var(--tl-node) minmax(0, 1fr);
        column-gap: 18px; row-gap: 6px; align-items: start; text-align: left;
    }
    .ob26-node { grid-row: 1 / span 2; margin: 0; }
    .ob26-when { padding-left: 0; padding-top: 6px; }
    .ob26-what { max-width: none; text-wrap: pretty; }
}
@media (max-width: 767px) {
    .ob26-hero { padding: 26px 20px 40px; }
    .ob26-mark { top: 90px; width: 170vw; opacity: .045; }
    .ob26-logo { margin-bottom: 22px; }
    .ob26-logo img { width: min(180px, 50vw); }
    .ob26-ok { font-size: 10px; letter-spacing: .22em; padding: 7px 14px 7px 10px; margin-bottom: 18px; }
    .ob26-h { margin-bottom: 18px; }
    .ob26-h-1 { font-size: clamp(34px, 9.6vw, 42px); }
    .ob26-h-2 { font-size: clamp(22px, 6vw, 26px); }
    .ob26-lede { font-size: 15px; line-height: 1.66; margin-bottom: 26px; }
    .ob26-lede::before { margin-bottom: 14px; }
    /* video: quase a largura toda, sem passar de ~74% da altura da tela */
    .ob26-video { width: min(100%, calc(74vh * 9 / 16)); border-radius: 18px; }
    .ob26-video { width: min(100%, calc(74svh * 9 / 16)); }
    .ob26-video-slot { border-radius: 17px; }
    /* hero compacta: video aparece mais cedo na primeira tela */
    .ob26-hero { padding-top: 18px; }
    .ob26-logo { margin-bottom: 14px; }
    .ob26-logo img { width: min(150px, 42vw); }
    .ob26-ok { margin-bottom: 12px; }
    .ob26-h { margin-bottom: 10px; }
    .ob26-h-1 { font-size: clamp(30px, 8.4vw, 36px); }
    .ob26-lede { margin-bottom: 16px; }
    .ob26-lede::before { margin-bottom: 10px; }
    .ob26-hold { margin-top: 24px; gap: 8px; }
    .ob26-hold-a { font-size: 22px; }
    .ob26-hold-b { font-size: 11px; letter-spacing: .18em; }

    .ob26-steps { padding: 104px 18px 72px; }
    .ob26-grid { gap: 38px; }
    .ob26-card { border-radius: 20px; }
    .ob26-card--one { padding: 26px 20px 24px; }
    .ob26-card--two { padding: 38px 20px 26px; }
    .ob26-flag { left: 20px; }
    .ob26-step { font-size: 11.5px; letter-spacing: .24em; }
    .ob26-card--one .ob26-card-title { font-size: 25px; }
    .ob26-card--two .ob26-card-title { font-size: 28px; }
    .ob26-card p.ob26-p { font-size: 15px; line-height: 1.64; }
    .ob26-card--two p.ob26-key { font-size: 20px; }
    .ob26-btn.fn26-btn { min-height: 58px; padding: 15px 16px; font-size: 13px; letter-spacing: .1em; gap: 10px; }
    .ob26-btn--main.fn26-btn { min-height: 62px; font-size: 13.5px; letter-spacing: .12em; }
    .ob26-btn svg { width: 19px; height: 19px; margin-right: 9px; vertical-align: -4px; }

    .ob26-next { padding: 64px 20px 72px; }
    .ob26-next-head { gap: 12px; margin-bottom: 36px; }
    .ob26-eyebrow { font-size: 10.5px; letter-spacing: .26em; }
    .ob26-title { font-size: clamp(27px, 7.6vw, 32px); }
    .ob26-alert { margin-top: 48px; padding: 20px 18px 22px; border-radius: 16px; }
    .ob26-alert-body p { font-size: 14.5px; }
    .ob26-page .fn26-cta { max-width: none; }
}
@media (max-width: 360px) {
    .ob26-ok { letter-spacing: .16em; }
    .ob26-btn.fn26-btn { letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
    .ob26-down svg { animation: none; }
    .gw-wire { display: none; }
    .ob26-r.ob26-ready { opacity: 1 !important; translate: none !important; transition: none !important; }
}