/* ============================================================================
   CHEGUEI — página de vendas
   Brand kit v1.1 · paleta terracota/cream/ink · Fraunces + DM Sans + Caveat
   ============================================================================ */

:root {
    --terracota: #C4502E;
    --terracota-dark: #8E3818;
    --mostarda: #E8A52C;
    --coral: #E87B5C;
    --cream: #F4E8D8;
    --cream-soft: #FAF2E5;
    --cream-dark: #E8D6BC;
    --ink: #1A1410;
    --ink-soft: #3A2E26;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
    background-color: var(--cream) !important;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Tipografia ===== */
h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

h1.fw-bold,
h2.fw-bold,
h3.fw-bold {
    font-weight: 900 !important;
}

.font-body {
    font-family: 'DM Sans', sans-serif !important;
}

.font-script {
    font-family: 'Caveat', cursive !important;
    font-weight: 700;
}

em, .em {
    font-style: italic;
    color: var(--terracota);
}

/* Wordmark do Cheguei (texto + bolinha terracota com "lá" cursivo) */
.cheguei-mark {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    display: inline-block;
}
.cheguei-mark .dot {
    --la-color: var(--cream);
    display: inline-block;
    position: relative;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--terracota);
    margin-left: 0.04em;
    vertical-align: baseline;
    line-height: 0;
}
.cheguei-mark .dot::after {
    content: 'lá';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 0.18em;
    color: var(--la-color);
    line-height: 1;
    white-space: nowrap;
}
/* Wordmark sobre fundo escuro/terracota */
.cheguei-mark.on-dark { color: var(--cream); }
.cheguei-mark.on-dark .dot { background: var(--cream); --la-color: var(--terracota); }

/* ===== Cores utilitárias ===== */
.bg-cream    { background-color: var(--cream) !important; }
.bg-cream-dark { background-color: var(--cream-dark) !important; }
.bg-terracota { background-color: var(--terracota) !important; }
.bg-ink      { background-color: var(--ink) !important; }
.cor-terracota { color: var(--terracota) !important; }
.cor-mostarda  { color: var(--mostarda) !important; }
.cor-cream     { color: var(--cream) !important; }
.cor-ink-soft  { color: var(--ink-soft) !important; }

/* ===== Esconder/exibir com delay ===== */
.esconder { display: none !important; }

/* ===== Eyebrow / labels ===== */
.eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terracota);
}

/* ============================================================================
   SEÇÃO 1 — Hero (VSL)
   ============================================================================ */
.hero {
    background: var(--ink);
    color: var(--cream);
    padding: 32px 0 24px;
}
.hero .cheguei-mark { font-size: 32px; }
.hero h1.lead-line {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1.2;
    color: var(--cream);
    margin: 16px 0 20px;
}
.hero h1.lead-line em { color: var(--mostarda); }
.hero .post-vsl {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--cream);
    margin: 24px 0 12px;
}
.hero .post-vsl em { color: var(--mostarda); }

/* CTA fixo no rodapé (que aparece após o delay do vídeo) */
.cta-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--terracota);
    color: var(--cream) !important;
    border: none;
    border-radius: 0;
    padding: 18px 16px;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 -8px 24px rgba(26, 20, 16, 0.18);
    animation: cta-pulse 1.6s infinite;
}
.cta-fixed:hover { color: var(--cream); background: var(--terracota-dark); }

@keyframes cta-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ============================================================================
   SEÇÃO 2 — "Sua plataforma"
   ============================================================================ */
.plataforma-section {
    background: var(--cream-soft);
    padding: 48px 0;
}
.plataforma-section h2 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 32px;
    color: var(--ink);
    margin-bottom: 8px;
}
.plataforma-section .sub {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--ink-soft);
    margin-bottom: 24px;
}
.img-plat {
    width: 100% !important;
    height: auto !important;
    max-width: 360px !important;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(196, 80, 46, 0.18);
}

/* ============================================================================
   SEÇÃO 3 — Oferta
   ============================================================================ */
.oferta-section {
    background: var(--ink);
    color: var(--cream);
    padding: 48px 0;
}
.oferta-section h2 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 28px;
    line-height: 1.1;
    color: var(--cream);
    margin-bottom: 24px;
}
.oferta-section h2 em { color: var(--mostarda); }

.oferta-box {
    background: var(--cream);
    color: var(--ink);
    border-radius: 8px;
    padding: 32px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cream-dark);
}
.oferta-box .item {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 6px 0;
    color: var(--ink);
}
.oferta-box .item .check {
    color: var(--terracota);
    font-weight: 700;
    margin-right: 6px;
}
.oferta-box .item .price {
    color: var(--ink-soft);
    font-weight: 500;
}
.oferta-box hr {
    border: none;
    border-top: 1px dashed var(--cream-dark);
    margin: 18px 0;
}
.oferta-box .total-de {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
}
.oferta-box .total-de s { opacity: 0.7; }
.oferta-box .por {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    margin: 12px 0 -4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.oferta-box .preco-parcela {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 44px;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 4px 0;
}
.oferta-box .preco-parcela .destaque { color: var(--terracota); }
.oferta-box .vista {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 16px;
}
.oferta-box .vista strong { color: var(--terracota); font-weight: 700; }

.btn-cta {
    display: inline-block;
    width: 100%;
    background: var(--terracota);
    color: var(--cream) !important;
    border: none;
    border-radius: 6px;
    padding: 18px 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    margin: 16px 0 12px;
    box-shadow: 0 12px 28px rgba(196, 80, 46, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-cta:hover {
    background: var(--terracota-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(196, 80, 46, 0.45);
    color: var(--cream);
}

.img-pagamentos {
    max-width: 100%;
    height: auto;
    margin-top: 12px;
    opacity: 0.85;
}

.bonus-list-card {
    margin-top: 28px;
    padding: 24px;
    background: rgba(244, 232, 216, 0.06);
    border: 1px solid rgba(244, 232, 216, 0.18);
    border-radius: 8px;
}
.bonus-list-card .eyebrow { color: var(--mostarda); margin-bottom: 6px; }
.bonus-list-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--cream);
    margin-bottom: 14px;
}
.bonus-list-card .bonus-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    padding: 10px 0;
    border-top: 1px dashed rgba(244, 232, 216, 0.18);
    color: var(--cream);
}
.bonus-list-card .bonus-item:first-of-type { border-top: none; }
.bonus-list-card .bonus-item .ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--terracota);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 14px;
}
.bonus-list-card .bonus-item .copy strong {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--cream);
    display: block;
    margin-bottom: 2px;
}
.bonus-list-card .bonus-item .copy span {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: rgba(244, 232, 216, 0.75);
    line-height: 1.5;
}

/* ============================================================================
   SEÇÃO 4 — Institucional / Quem é a Rosana
   ============================================================================ */
.institucional-section {
    background: var(--cream);
    padding: 56px 0;
}
.institucional-section .eyebrow { margin-bottom: 12px; }
.institucional-section h2 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 20px;
}
.institucional-section h2 em { color: var(--terracota); }
.institucional-section .lead {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0 auto 36px;
}
.institucional-section .lead strong { color: var(--ink); font-weight: 700; }

.numeros-card {
    background: var(--cream-dark);
    border-radius: 12px;
    padding: 36px 24px;
    box-shadow: 0 1px 0 rgba(26, 20, 16, 0.05);
}
.numeros-card .numeros-titulo {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 24px;
}
.numero-bloco .numero {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 38px;
    color: var(--terracota);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}
.numero-bloco .numero-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
}
.numero-bloco .numero-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.assinatura-rosana {
    margin-top: 32px;
    text-align: center;
}
.assinatura-rosana .nome {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 42px;
    color: var(--terracota);
    transform: rotate(-2deg);
    display: inline-block;
    line-height: 1;
}
.assinatura-rosana .papel {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 8px;
}

/* ============================================================================
   SEÇÃO 5 — Rodapé
   ============================================================================ */
.rodape-section {
    background: var(--ink);
    color: var(--cream);
    padding: 40px 0 32px;
}
.rodape-section .cheguei-mark { font-size: 28px; margin-bottom: 12px; }
.rodape-section h5 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.85;
    margin-bottom: 16px;
}
.rodape-section p {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: var(--cream);
    opacity: 0.65;
}

/* ============================================================================
   Responsivo
   ============================================================================ */
@media (min-width: 768px) {
    .hero { padding: 56px 0 32px; }
    .hero .cheguei-mark { font-size: 40px; }
    .hero h1.lead-line { font-size: 30px; }
    .hero .post-vsl { font-size: 28px; }

    .plataforma-section h2,
    .oferta-section h2 { font-size: 38px; }
    .institucional-section h2 { font-size: 48px; }

    .oferta-box .preco-parcela { font-size: 56px; }
    .numero-bloco .numero { font-size: 48px; }
}

/* Para o iframe do VSL ficar centralizado e responsivo */
.vsl-wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}