/*
 * landing-claro - tema claro da landing do WebCast (28/09/2026).
 * Carregado DEPOIS do <style> inline da landing. Troca os tokens do :root e
 * sobrescreve os pontos com cor fixa do tema escuro, mesmo padrao do WeGov.
 * A TV (hero, touchpoints e demonstracao por rolagem) continua ESCURA de
 * proposito: representa a tela real e da contraste com a pagina clara.
 * Tema escuro original segue disponivel em ?tema=escuro.
 * Azul da marca: #2F6BFF. Texto azul usa #1E4FD8 (contraste AA em branco).
 */

:root {
    --primary: #2F6BFF;
    --primary-dark: #1E4FD8;
    --primary-light: #1E4FD8;
    --primary-glow: rgba(47, 107, 255, 0.32);
    --accent: #5B8CFF;
    --bg: #F6F8FC;
    --surface: #FFFFFF;
    --surface-solid: #FFFFFF;
    --text: #0F172A;
    --text-muted: #475569;
    --text-dim: #8391A7;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.16);
    --gradient: linear-gradient(135deg, #2F6BFF 0%, #5B8CFF 100%);
    --gradient-soft: linear-gradient(135deg, rgba(47, 107, 255, 0.07), rgba(91, 140, 255, 0.07));
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
}

::selection { background: rgba(47, 107, 255, 0.2); }

/* Fundo: aurora bem leve, sem ruido */
.blob { opacity: 0.10; }
.bg-noise { display: none; }
.hero-waves stop:first-child { stop-color: #2F6BFF; stop-opacity: 0.08; }
.hero-waves stop:last-child { stop-color: #5B8CFF; stop-opacity: 0.02; }
.spotlight {
    background: radial-gradient(620px circle at var(--mx, 70%) var(--my, 40%), rgba(47, 107, 255, 0.07), transparent 45%);
}

.header { background: rgba(255, 255, 255, 0.82); }

/* Pills e botoes */
.pill { background: #fff; border-color: var(--border); box-shadow: var(--shadow-card); }
.offer-pill { background: rgba(47, 107, 255, 0.06); border-color: rgba(47, 107, 255, 0.25); }
.offer-text strong { color: #E8590C; }
.btn-primary { background: var(--primary); box-shadow: 0 10px 30px -12px var(--primary-glow); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 18px 40px -16px var(--primary-glow); }
.header-cta { background: var(--primary); }
.header-cta:hover { background: var(--primary-dark); }
.btn-outline { background: #fff; }
.btn-outline:hover { background: #F1F5FF; }
.btn-ghost:hover { color: var(--text); }

/* TV do hero: aparelho escuro, com glow mais discreto no fundo claro */
.tv-stage::before { opacity: 0.35; }
.tv-screen, .tv-content { color: #f8fafc; }

/* Icones flutuantes do hero: ilustracao 3D sem caixa */
.float-icon {
    background: none;
    box-shadow: none;
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.16));
}
.float-icon::after { display: none; }

/* Blocos brancos com sombra suave no lugar do vidro escuro */
.card, .step, .audience, .suite-card, .pill-big, .pms-chip, .demo-row {
    background: #fff;
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.demo-row { box-shadow: none; background: #F8FAFF; }
.marquee { background: #fff; }

.pill-big.highlight {
    background: #EEF3FF;
    border-color: rgba(47, 107, 255, 0.35);
    box-shadow: 0 16px 40px -18px var(--primary-glow);
}
/* As frases do bloco sao todas afirmacoes positivas (nenhuma riscada): em
   tom "dim" pareciam desabilitadas no fundo branco. */
.pain-stack .pill-big { color: var(--text); }

.card:hover { border-color: rgba(47, 107, 255, 0.35); box-shadow: 0 24px 50px -24px rgba(47, 107, 255, 0.35); }
.demo-bars i { background: linear-gradient(180deg, #7FA3FF, var(--primary)); }
.demo-toast { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.35); color: #047857; }
.suite-card:hover { background: #F8FAFF; }
.audience:hover { background: #F4F7FF; }
.pms-chip:hover { border-color: var(--primary); }

/* Icones 3D (PNG transparente): sem caixa em volta, a ilustracao ja tem volume */
.card-icon, .audience-icon {
    background: none;
    box-shadow: none;
}
.card-icon { width: 64px; height: 64px; }
.audience-icon { width: 72px; height: 72px; }
.card-icon img, .audience-icon img, .float-icon img, .tp-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.card:hover .card-icon { transform: scale(1.06) rotate(-3deg); }
.tp-ico.tp-ico-3d { background: none; width: 40px; height: 40px; border-radius: 0; }

/* Demonstracao por rolagem: secao clara, TV e cenas continuam escuras.
   Prefixo "body" porque o partial tem <style> proprio dentro do <body>,
   que viria depois deste arquivo e ganharia no empate de especificidade. */
body .scroll-demo {
    background: radial-gradient(ellipse at 15% 40%, #E6EEFF 0%, transparent 55%), #F6F8FC;
}
body .scroll-demo.enhanced .scroll-demo-step { border-left-color: #D5DFF3; }
body .scroll-demo.enhanced .scroll-demo-step.is-current { border-left-color: var(--primary); }
body .scroll-demo-number { color: var(--primary-light); }
body .scroll-demo-progress i { background: #CBD5E1; }
body .scroll-demo-progress i.is-current { background: var(--primary); }
body .scroll-demo-caption { color: var(--text-muted); }

/* CTA final */
.cta-final-card {
    background: linear-gradient(135deg, #EEF3FF 0%, #F7F9FF 100%);
    border-color: rgba(47, 107, 255, 0.2);
}
.cta-final-card::before {
    background:
        radial-gradient(circle at 25% 25%, rgba(47, 107, 255, 0.10), transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(91, 140, 255, 0.08), transparent 50%);
}

footer { background: #fff; }

/* Foto do hospede abaixo das frases de dor */
.guest-photo {
    max-width: 1000px;
    margin: 3.5rem auto 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.35);
}
.guest-photo img { width: 100%; height: auto; display: block; }
@media (max-width: 600px) {
    .guest-photo { border-radius: 18px; margin-top: 2.5rem; }
}