/**
 * Responsive Design - Kayros Sorteos Perú
 * Mobile-First: 320px base → 576px → 768px → 992px → 1200px
 */

/* ============================================
   MOBILE FIRST (Base: 320px - 575px)
   ============================================ */

/* Ya definido en otros archivos CSS */

/* ============================================
   SMALL DEVICES (576px - 767px)
   ============================================ */
@media (min-width: 576px) {
    /* Tipografía */
    h1 { font-size: var(--font-size-6xl); }
    h2 { font-size: var(--font-size-5xl); }

    /* Hero */
    .hero-title {
        font-size: var(--font-size-6xl);
    }

    /* Countdown */
    .countdown-value {
        min-width: 90px;
        padding: var(--space-5) var(--space-8);
    }
}

/* ============================================
   TABLETS (768px - 991px)
   ============================================ */
@media (min-width: 768px) {
    /* Container */
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    /* Navbar */
    .navbar-container {
        padding: var(--space-5) var(--space-6);
    }

    .navbar-logo {
        height: 60px;
    }

    /* Hero */
    .hero {
        padding: calc(100px + var(--space-12)) var(--space-6) var(--space-12);
    }

    .hero-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Pasos */
    .pasos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Premios */
    .premios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Trust Badges */
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   DESKTOP (992px - 1199px)
   ============================================ */
@media (min-width: 992px) {
    /* Secciones */
    section {
        padding: var(--space-20) 0;
    }

    /* Hero */
    .hero-title {
        font-size: 4.5rem;
    }

    .hero-premio-imagen {
        height: 350px;
    }

    /* Premios */
    .premios-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   LARGE DESKTOP (1200px+)
   ============================================ */
@media (min-width: 1200px) {
    /* Hero */
    .hero-title {
        font-size: 5rem;
    }

    /* Countdown */
    .countdown-value {
        min-width: 100px;
        font-size: var(--font-size-5xl);
    }
}

/* ============================================
   MOBILE MENU (< 768px)
   ============================================ */
@media (max-width: 767px) {
    /* Navbar */
    .navbar-toggle {
        display: block;
    }

    .navbar-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg-white);
        box-shadow: var(--shadow-lg);
        padding: var(--space-6);
        gap: var(--space-4);
        transform: translateY(-120%);
        opacity: 0;
        transition: all var(--transition-base);
        pointer-events: none;
    }

    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .navbar-menu .btn-cta {
        width: 100%;
    }

    /* Hero */
    .hero {
        padding: calc(70px + var(--space-6)) var(--space-4) var(--space-6);
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .hero-info-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .hero-premio-imagen {
        height: 250px;
    }

    .hero-premio-nombre {
        font-size: var(--font-size-2xl);
    }

    /* Countdown - Premium Mobile */
    .countdown {
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .countdown::before {
        inset: -10px;
    }

    .countdown-value {
        min-width: 65px;
        padding: var(--space-4) var(--space-5);
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        border-width: 2px;
    }

    .countdown-label {
        font-size: var(--font-size-xs);
        letter-spacing: 1px;
    }

    .countdown-separator {
        font-size: var(--font-size-xl);
        margin-top: var(--space-1);
    }

    /* Ocultar sparkles en mobile */
    .countdown-digit::after {
        display: none;
    }

    /* Secciones */
    section {
        padding: var(--space-12) 0;
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

    .section-subtitle {
        font-size: var(--font-size-base);
    }

    /* Pasos */
    .pasos-grid {
        grid-template-columns: 1fr;
    }

    /* Premios */
    .premios-grid {
        grid-template-columns: 1fr;
    }

    /* Trust Badges */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA Final */
    .cta-final {
        padding: var(--space-12) var(--space-4);
    }

    .cta-final-title {
        font-size: var(--font-size-3xl);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links {
        align-items: center;
    }
}

/* ============================================
   EXTRA SMALL (< 375px)
   ============================================ */
@media (max-width: 374px) {
    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .countdown {
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .countdown-value {
        min-width: 55px;
        padding: var(--space-3) var(--space-4);
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .countdown-separator {
        font-size: var(--font-size-lg);
    }

    .btn-cta {
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-base);
    }
}

/* ============================================
   LANDSCAPE MÓVIL
   ============================================ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: calc(70px + var(--space-6)) var(--space-4) var(--space-6);
    }

    .hero-premio-imagen {
        height: 200px;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .navbar,
    .footer,
    .particle,
    .floating-icon,
    .big-social-icon {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .glass-card {
        background: white;
        border: 1px solid #ccc;
    }
}

/* ============================================
   PREFERENCIAS DE USUARIO
   ============================================ */

/* Modo de alto contraste */
@media (prefers-contrast: high) {
    :root {
        --text-secondary: var(--text-dark);
        --bg-gray-50: var(--bg-white);
    }

    .glass-card {
        background: var(--bg-white);
        border: 2px solid var(--text-dark);
    }
}

/* Reducir transparencias */
@media (prefers-reduced-transparency) {
    .glass-card {
        background: var(--bg-white);
        backdrop-filter: none;
    }

    .navbar-scrolled {
        background: var(--bg-white);
        backdrop-filter: none;
    }
}