/* LCG landing enterprise premium-plus
   Strategy:
   - Hero and promo stay dark (as designed in styles.min.css + index inline styles).
   - Every section BELOW the hero gets an explicit SOLID white background so it
     works in both light mode and dark-OS-mode users.
   - dashboard-card stays dark (it lives inside the dark hero panel).
   - phone-card stays dark (dark card UI by design).
   - All other interactive cards get white bg with explicit dark text.
*/

:root {
    --premium-ink:          #0b1f38;
    --premium-muted:        #445a71;
    --premium-card:         #ffffff;
    --premium-border:       rgba(12, 45, 76, 0.14);
    --premium-shadow:       0 16px 34px rgba(8, 24, 48, 0.10);
    --premium-shadow-hover: 0 22px 42px rgba(8, 24, 48, 0.16);
}

/* ─── SECTION ENTRANCE (below fold only) ────────────────── */
.reveal {
    opacity: 1 !important;
    transform: none !important;
}

.hero.reveal,
#promo-600.reveal {
    animation: none !important;
}

#enterprise  { animation: premiumFadeUp .52s .04s cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#sinpe       { animation: premiumFadeUp .52s .08s cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#comprar     { animation: premiumFadeUp .52s .12s cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#servicios-seo       { animation: premiumFadeUp .52s .16s cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#preguntas-frecuentes { animation: premiumFadeUp .52s .2s  cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#ia          { animation: premiumFadeUp .52s .24s cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#graficos    { animation: premiumFadeUp .52s .28s cubic-bezier(0.22, 0.9, 0.34, 1) both; }
#contacto    { animation: premiumFadeUp .52s .32s cubic-bezier(0.22, 0.9, 0.34, 1) both; }

/* ─── TOPBAR ─────────────────────────────── */
.topbar {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(14, 47, 77, 0.12) !important;
    box-shadow: 0 6px 22px rgba(7, 20, 37, 0.08);
}
.brand-title strong { color: #0a2645; }
.brand-title span   { color: #3e5870; }

/* ─── TYPOGRAPHY — ONLY LIGHT-BG SECTIONS ───
   Hero and promo have dark backgrounds;
   we intentionally do NOT override their colors.
*/
#enterprise h2,
#sinpe h2,
#comprar h2,
#servicios-seo h2,
#preguntas-frecuentes h2,
#ia h2,
#graficos h3,
#contacto h2,
.section-head h2,
.faq-item h3,
.seo-card h3,
.product-card h3,
.chart-head h3,
.ai-card h3,
.cta-card h2 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.022em;
    color: #0a2540;
    text-wrap: balance;
}

#enterprise p,
#comprar p,
#servicios-seo p,
#preguntas-frecuentes p,
#ia p,
#graficos p,
#contacto p,
.section-head p,
.faq-item p,
.seo-card p,
.product-card p,
.chart-head p,
.ai-item div,
.compliance-note,
.contact-card span span {
    color: #445a71;
}

/* ─── SINPE SECTION — dark-text fix ─────────────────────────
   styles.min.css set sinpe-feature text white (for dark bg).
   Our solid white section bg requires explicit dark overrides.
*/
.sinpe-feature h2            { color: #0a2540 !important; }
.sinpe-feature p             { color: #445a71 !important; }
.sinpe-feature .tag-priority { color: #0a6b56 !important; border-color: rgba(10, 107, 86, 0.3) !important; }

.sinpe-benefit               { color: #1b344f; }
.sinpe-benefit strong        { display: block; color: #0a2540 !important; margin-bottom: 3px; }
.sinpe-benefit > div         { color: #445a71 !important; font-size: .9rem; line-height: 1.45; }

.btn {
    box-shadow: 0 7px 18px rgba(12, 45, 76, 0.12);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(12, 45, 76, 0.18);
}

/* ─── SECTION PADDING ──────────────────────── */
.section {
    padding: 58px 0;
}

/* ─── CARDS — white surface, shadow, transition ──────────── */
.sinpe-feature,
.shop-shell,
.seo-card,
.faq-item,
.ai-card,
.chat-simulator-card,
.chart-card,
.cta-card,
.contact-card,
.product-card {
    background: #ffffff !important;
    border: 1px solid var(--premium-border) !important;
    box-shadow: var(--premium-shadow) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* dashboard-card lives in dark hero — keep dark styling */
.dashboard-card {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 24px 52px rgba(3, 11, 24, 0.42) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Enterprise inner cards */
.enterprise-metric-card,
.service-enterprise-card,
.process-item {
    background: #ffffff;
    border-color: rgba(12, 45, 76, 0.16) !important;
    box-shadow: var(--premium-shadow);
}

.seo-card:hover,
.faq-item:hover,
.contact-card:hover,
.product-card:hover,
.enterprise-metric-card:hover,
.service-enterprise-card:hover,
.process-item:hover,
.sinpe-feature:hover,
.ai-card:hover,
.chat-simulator-card:hover,
.chart-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--premium-shadow-hover) !important;
    border-color: rgba(12, 45, 76, 0.24) !important;
}

/* ─── TRUST PILLS (hero dark bg — white for contrast) ──── */
.trust-pill {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(200, 228, 220, 0.55);
}

/* ─── KEYWORD / TAG PILLS ─────────────────────────────── */
.keyword-pill,
.chat-insights span,
.match-badge,
.tag-priority {
    border: 1px solid rgba(13, 69, 107, 0.18);
}

.seo-card .keyword-pill { color: var(--premium-muted); }
.ai-item strong         { color: #0d2b4c; }
.ai-item div            { color: #445a71; }
.contact-card strong    { color: #0d2b4c; }

/* ─── PHONE CARD (dark bg UI — explicit LIGHT text) ──── */
.phone-number   { color: #5decce !important; }
.data-item span { color: rgba(210, 230, 255, 0.75) !important; }
.data-item b    { color: #6ff0ce !important; }

/* ─── CHAT SIMULATOR ──────────────────────────────────── */

.metric span   { color: rgba(210, 230, 255, 0.70); }
.metric strong  { color: #e8f8ff; }
.mini-row strong { color: rgba(210, 230, 255, 0.85); }
.mini-row b     { color: #6ff0ce; }

/* ─── PROMO CARD SHEEN ─────────────────────────────────── */
    position: relative;
    overflow: hidden;
}

.promo-top-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.14) 45%, transparent 70%);
    transform: translateX(-120%);
    animation: premiumSheen 7s ease-in-out infinite;
    pointer-events: none;
}

.promo-cta {
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.promo-cta:hover {
    filter: brightness(1.05);
}

.chat-window {
    background: #f9fcff;
}

.chat-bubble.bot {
    background: #eaf3ff;
    color: #173457;
}

.chat-bubble.user {
    background: #113f70;
    color: #fff;
}

.contact-section { background: #f2f7ff !important; }

footer {
    border-top: 1px solid rgba(14, 47, 77, 0.14);
}

/* SEO cards without paragraph — compact scan-friendly layout */
.seo-card {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.seo-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

/* Featured product cards — stronger visual presence vs secondary */
.product-card.priority {
    border-color: rgba(15, 143, 108, 0.38) !important;
    background: linear-gradient(160deg, #f5fff9 0%, #eafaf3 100%) !important;
    box-shadow: 0 18px 40px rgba(11, 100, 76, 0.13) !important;
}

.product-card.office {
    border-color: rgba(15, 76, 129, 0.28) !important;
    background: linear-gradient(160deg, #f5f9ff 0%, #eaf0fa 100%) !important;
    box-shadow: 0 18px 40px rgba(12, 50, 110, 0.11) !important;
}

/* Chart header: text left, CTA button right */
.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

@keyframes premiumFadeUp {
    from {
        opacity: .01;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes premiumSheen {
    0% {
        transform: translateX(-120%);
    }
    38% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(120%);
    }
}

@media (max-width: 980px) {
    .section {
        padding: 50px 0;
    }

    #enterprise,
    #sinpe,
    #comprar,
    #servicios-seo,
    #preguntas-frecuentes,
    #ia,
    #graficos,
    #contacto {
        animation-duration: .42s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .promo-top-card::after,
    .btn,
    .seo-card,
    .faq-item,
    .contact-card,
    .product-card,
    .enterprise-metric-card,
    .service-enterprise-card,
    .process-item,
    .sinpe-feature,
    .ai-card,
    .chat-simulator-card,
    .chart-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}