/* ===== Tema claro Zeplay Store (previa) =====
   Paleta tirada da logomarca: laranja #ff6a00, rosa #f0107a, cinza #777. */
:root {
    --bg: #ffffff;
    --surface: #fff7f1;
    --surface-hover: #ffede0;
    --surface-card: #ffffff;
    --border: #f0e4da;
    --border-light: #e6d5c8;
    --primary: #ff6a00;
    --primary-dark: #e55a00;
    --primary-glow: rgba(255, 106, 0, 0.28);
    --brand-cyan: #f0107a;
    --brand-orange: #ff6a00;
    --text: #2a2d34;
    --text-muted: #5d636d;
    --text-subtle: #8b9099;
    --shadow: 0 16px 36px -10px rgba(120, 60, 20, 0.18), 0 6px 12px -4px rgba(120, 60, 20, 0.08);
}

h1, h2, h3, h4 { color: var(--text); }

.gradient-text {
    background: linear-gradient(135deg, #f0107a 0%, #ff6a00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-orange {
    background: linear-gradient(135deg, #ff6a00 0%, #f0107a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pill-badge {
    background: rgba(255, 106, 0, 0.1);
    border-color: rgba(255, 106, 0, 0.35);
    color: #c2500a;
}
.pill-badge .dot { box-shadow: 0 0 10px rgba(255, 106, 0, 0.6); }

/* Cabecalho e logomarca */
header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border);
}
.logo { color: var(--text); }
.logo-img { display: block; height: 46px; width: auto; }
footer .logo-img { height: 52px; }

nav.desktop-nav a { color: var(--text-muted); }
nav.desktop-nav a:hover { color: var(--primary); }

/* Botoes */
.btn-primary {
    background: linear-gradient(135deg, #e85d00 0%, #ff7a1a 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px var(--primary-glow);
}
.btn-primary:hover { box-shadow: 0 8px 26px rgba(255, 106, 0, 0.45); }
.btn-secondary {
    background: #ffffff;
    color: var(--text);
    border-color: var(--border-light);
}
.btn-secondary:hover { background: var(--surface-hover); color: var(--text); }
.btn-glow {
    background: linear-gradient(135deg, #f0107a 0%, #ff6a00 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(240, 16, 122, 0.3);
}
.btn-glow:hover { box-shadow: 0 8px 24px rgba(240, 16, 122, 0.45); }

.hero-subtitle { color: var(--text-muted); }

/* Celular de demonstracao */
.phone-mockup {
    background: #ffffff;
    border-color: var(--border-light);
    box-shadow: 0 25px 60px -18px rgba(120, 60, 20, 0.28), 0 0 40px rgba(255, 106, 0, 0.1);
}
.phone-notch { background: #eadfd6; }
.chat-header { background: #fff4ec; border-color: var(--border); }
.chat-info h4 { color: var(--text); }
.chat-info span { color: #16a34a; }
.msg-user { background: #f1f3f5; color: var(--text); }
.msg-bot { background: #fff0e4; border-color: rgba(255, 106, 0, 0.3); color: #7a2e00; }
.order-badge { background: #fff8f2; border-color: var(--primary); color: #9a3b00; }

/* Secoes */
.section-stats {
    background: linear-gradient(180deg, #ffffff 0%, #fff6ee 50%, #ffffff 100%);
}
.stat-label { color: var(--text); }
.stat-source { border-top-color: rgba(0, 0, 0, 0.08); }
.comparison-wrap { background: #ffffff; }
.comp-good {
    background: rgba(34, 197, 94, 0.07);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: none;
}
.step-num { background: #fff1e6; }
.section-niches { background: #fff8f2; }
.eco-card { background: #ffffff; }
.eco-card:hover { border-color: var(--primary); }
.eco-icon-wrap { background: rgba(255, 106, 0, 0.1); color: #ea580c; }
.eco-link { color: #ea580c; }

.section-pricing {
    background: linear-gradient(180deg, #ffffff 0%, #fff4ea 100%);
}
.price-featured {
    background: #fffaf5;
    box-shadow: 0 0 35px rgba(255, 106, 0, 0.2);
}
.featured-tag { color: #ffffff; }
.price-amount { color: var(--text); }

.faq-item h4 { color: var(--text); }

.cta-banner {
    background: linear-gradient(135deg, #ff6a00 0%, #f0107a 100%);
    border: none;
    box-shadow: 0 20px 50px -14px rgba(240, 16, 122, 0.45);
}
.cta-banner h2, .cta-banner p { color: #ffffff; }
.cta-banner .btn-primary { background: #ffffff; color: #e55a00; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

/* Rodape claro */
footer { background: #faf5f1; border-top: 1px solid var(--border); }
.footer-col h5 { color: var(--text); }
.footer-bottom { border-top-color: rgba(0, 0, 0, 0.08); }

/* Botao do WhatsApp continua verde (cor esperada pelo usuario) */

/* ===== Ajustes de legibilidade (contraste) ===== */
:root { --text-subtle: #6b7280; }
.section-tag { color: #c2500a; }
a[style*="var(--primary)"], a[style*="color: var(--primary)"] { color: #c2500a !important; }
.chat-info span { color: #15803d; }
.comp-good .comp-title { color: #15803d; }
.featured-tag { background: #d94f00; color: #ffffff; }
footer, .footer-col a, .footer-bottom, .footer-bottom a { color: #6b7280; }
.footer-col a:hover, .footer-bottom a:hover { color: var(--primary-dark); }

/* ===== Celular: barra fixa e botoes ===== */
@media (max-width: 640px) {
    .header-wrap { padding: 10px 0; gap: 10px; }
    .logo-img { height: 38px; }
    /* na barra fixa fica so um botao; o "7 dias gratis" ja aparece no primeiro bloco */
    .header-cta .btn-secondary { display: none; }
    .header-cta .btn {
        white-space: nowrap;
        padding: 10px 16px !important;
        font-size: 0.86rem !important;
    }

    .hero { padding: 40px 0 56px; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn-lg {
        width: 100%;
        white-space: normal;
        text-align: center;
        padding: 14px 18px;
        font-size: 1rem;
    }
    .hero-trust { flex-wrap: wrap; gap: 8px 16px; }

    /* botao do WhatsApp menor e sem cobrir o conteudo */
    .whatsapp-float { width: 54px; height: 54px; bottom: 16px; right: 16px; }
    .whatsapp-float svg { width: 28px; height: 28px; }
    body { padding-bottom: 84px; }
}

/* ===== Celular: primeiro bloco centralizado e WhatsApp fora do caminho ===== */
@media (max-width: 640px) {
    .hero-grid > div:first-child { text-align: center; }
    .hero .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero .hero-actions { align-items: stretch; }
    .hero .hero-trust { justify-content: center; text-align: center; }
    .hero .hero-title { letter-spacing: -0.3px; }
    /* o botao do WhatsApp some enquanto os botoes do primeiro bloco estao na tela */
    .whatsapp-float.wpp-hide { opacity: 0; pointer-events: none; transform: scale(0.8); }
}