/* VARIABLES MODO CLARO (Premium Light Mode) */
:root {
    --bg-color: #f8fafc;
    /* Blanco roto muy suave, frío */
    --text-color: #1e293b;
    --text-muted: #64748b;

    /* Header & Footer */
    --header-bg: rgba(255, 255, 255, 0.85);
    /* Glass transparente */
    --footer-bg: #ffffff;
    --border-color: rgba(0, 0, 0, 0.06);

    /* Cards */
    --card-bg: #ffffff;
    /* Blanco sólido para evitar transparencia */
    --card-hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.25);

    /* Inputs */
    --input-bg: rgba(0, 0, 0, 0.03);

    /* Accents */
    --accent-color: #2563eb;
    /* Azul corporativo/premium */
    --accent-light: #3b82f6;
    --accent-glow: rgba(37, 99, 235, 0.15);

    /* Hero */
    --hero-bg-gradient: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    /* Sombra muy suave para no manchar el diseño claro */
    --hero-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);

    /* Otros */
    --logo-filter: none;
}

/* Efectos Específicos para Light Mode */
.hero-banner {
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.hero-content h1 {
    color: #1e3a8a;
    /* Azul muy oscuro para el titulo en hero */
}

.hero-content p {
    color: #334155;
}

.search-input-group input {
    color: var(--text-color);
}

.search-input-group input:focus {
    background: #ffffff;
}

.pwa-card-v2 {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}