/*
 * landing-claro - tema claro da landing (28/09/2026), carregado DEPOIS de
 * landing.css. Troca os tokens do :root e sobrescreve os pontos com cor fixa
 * do tema escuro. O celular do hero continua escuro de proposito (e o
 * aparelho, da contraste com a pagina clara).
 * Azul da marca: #2F6BFF (mesmo do WebCast). Texto azul usa #1E4FD8 (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-dark: linear-gradient(135deg, #1E4FD8 0%, #2F6BFF 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); }

.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); }
.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; }

/* Celular do hero: aparelho escuro, texto claro proprio */
.phone-device { color: #f8fafc; }
.device-stage::before { opacity: 0.35; }
.float-icon {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.22), 0 0 0 1px var(--border);
}

/* Blocos brancos com sombra suave no lugar do vidro escuro */
.stat, .faq details, .card, .step, .integra-card, .audience, .suite-card, .pill-big {
    background: #fff;
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.faq details[open] { border-color: rgba(47, 107, 255, 0.4); }
.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);
}

.card:hover { border-color: rgba(47, 107, 255, 0.35); box-shadow: 0 24px 50px -24px rgba(47, 107, 255, 0.35); }
.card-icon, .audience-icon {
    background: var(--gradient);
    box-shadow: 0 8px 20px -8px var(--primary-glow);
}
.demo-bars i { background: linear-gradient(180deg, #7FA3FF, var(--primary)); }

/* Frase positiva (a que nao e riscada) em texto cheio */
.pain-stack .pill-big:last-child { color: var(--text); }

/* Mapa de UHs do card: tons mais firmes para ler no branco. Prefixo
   .demo-map porque ".demo-map i { border: 1px solid }" poe currentColor
   (agora escuro) e ganha de ".dm-*" por especificidade. */
.demo-map .dm-ok { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.5); }
.demo-map .dm-dirty { background: rgba(244, 63, 94, 0.16); border-color: rgba(244, 63, 94, 0.45); }
.demo-map .dm-busy { background: rgba(251, 191, 36, 0.22); border-color: rgba(217, 160, 20, 0.5); }
.demo-map .dm-off { background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.45); }

.integra-card:hover { border-color: rgba(47, 107, 255, 0.35); }
.suite-card:hover { background: #F8FAFF; }
.suite-note { background: rgba(47, 107, 255, 0.06); border-color: rgba(47, 107, 255, 0.25); }
.audience:hover { background: #F4F7FF; }

.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; }

/* Icones 3D (PNG com fundo transparente): sem caixa em volta, a propria
   ilustracao ja tem volume e sombra */
.card-icon, .audience-icon, .float-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 { width: 100%; height: 100%; object-fit: contain; }
.float-icon { width: 76px; height: 76px; filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.16)); }

/* Foto da equipe abaixo das frases de dor */
.team-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);
}
.team-photo img { width: 100%; height: auto; }
@media (max-width: 600px) {
    .team-photo { border-radius: 18px; margin-top: 2.5rem; }
}