/* ========================================
   RESPONSIVE — CIMED 2026
   Breakpoints: 1024px, 768px, 480px
   ======================================== */

/* --- Tablet landscape --- */
@media (max-width: 1024px) {
    .photo-wall {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 160px;
    }
    .photo-wall .photo-item:nth-child(1) { grid-row: span 2; grid-column: span 2; }
    .photo-wall .photo-item:nth-child(9) { grid-row: span 2; grid-column: span 2; }
}

/* --- Tablet portrait & mobile --- */
@media (max-width: 768px) {
    /* Hero */
    .hero { min-height: 95vh; padding: 1.5rem; }
    .hero-isotipo { display: none; }
    .hero-logo img { height: 60px; }
    .hero-badge { font-size: 0.7rem; padding: 0.4rem 1.2rem; letter-spacing: 1.5px; }
    .hero-date-line { font-size: 0.9rem; }
    .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-sub { font-size: clamp(0.9rem, 2.5vw, 1.1rem); }

    /* Countdown */
    .countdown { gap: 0.5rem; }
    .countdown-item { min-width: 65px; padding: 0.6rem 0.8rem; }
    .countdown-number { font-size: 1.5rem; }
    .countdown-label { font-size: 0.55rem; letter-spacing: 1.5px; }

    /* Buttons */
    .hero-cta { flex-direction: column; align-items: center; }
    .btn { width: 100%; max-width: 320px; justify-content: center; padding: 0.8rem 1.5rem; font-size: 0.9rem; }

    /* Scroll indicator: hide on mobile (takes space) */
    .scroll-indicator { display: none; }

    /* Sections: reduce padding */
    .section-padding { padding: 3rem 1.2rem; }
    .section-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .section-desc { font-size: 0.95rem; }

    /* Event grid: single column on mobile */
    .event-grid { grid-template-columns: 1fr; gap: 1rem; }
    .event-card { padding: 1.5rem; }
    .event-card .icon { font-size: 2rem; }

    /* About */
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-stats { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .stat-item { padding: 0.8rem 0.5rem; }
    .stat-number { font-size: 1.6rem; }
    .stat-label { font-size: 0.65rem; }

    /* Tracks */
    .tracks-grid { grid-template-columns: 1fr; gap: 1rem; }
    .track-card { padding: 1.8rem; }
    .track-card h3 { font-size: 1.1rem; }
    .track-card .track-icon { font-size: 2.2rem; }

    /* Gallery chips: stack vertically on mobile */
    .gallery-stat-chip { display: block; margin: 0.3rem auto !important; max-width: 90%; text-align: center; font-size: 0.75rem; padding: 0.4rem 1rem; }

    /* Hotel */
    .hotel-info { grid-template-columns: 1fr; gap: 1.5rem; }
    .hotel-map iframe { height: 200px; }

    /* Gallery */
    .photo-wall {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 120px;
        gap: 0.4rem;
    }
    .photo-wall .photo-item:nth-child(1) { grid-row: span 2; grid-column: span 2; }
    .photo-wall .photo-item:nth-child(6) { grid-column: span 1; }
    .photo-wall .photo-item:nth-child(9) { grid-column: span 2; grid-row: span 1; }

    /* CTA */
    #registro { padding: 3rem 1.2rem; }
    #registro .cta-box { padding: 1.5rem; }
    #registro .cta-box h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .whatsapp-numbers { flex-direction: column; align-items: center; gap: 0.5rem; }
    .whatsapp-number { width: 100%; max-width: 280px; justify-content: center; font-size: 0.85rem; }

    /* Footer */
    footer { padding: 2rem 1.2rem; }
    footer .footer-info { font-size: 0.75rem; }
    footer .footer-social { flex-wrap: wrap; justify-content: center; gap: 0.8rem; }

    /* Modal */
    .modal { padding: 1rem; }
    .modal img { max-width: 100vw; max-height: 70vh; }
    .modal-close { top: 0.5rem; right: 1rem; font-size: 2rem; }
    .modal-nav { font-size: 2rem; padding: 0.5rem; }
    .modal-prev { left: 0.5rem; }
    .modal-next { right: 0.5rem; }
    .modal-counter { font-size: 0.7rem; bottom: 0.8rem; }

    /* Disable parallax on mobile (performance) */
    .parallax-bg { background-attachment: scroll !important; }
}

/* --- Small phones --- */
@media (max-width: 480px) {
    .hero-logo img { height: 50px; }
    .countdown-item { min-width: 55px; padding: 0.4rem 0.5rem; }
    .countdown-number { font-size: 1.2rem; }
    .countdown-label { font-size: 0.5rem; letter-spacing: 1px; }
    .hero-badge { font-size: 0.6rem; padding: 0.3rem 0.8rem; }
    .hero-date-line { font-size: 0.75rem; }

    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 1.4rem; }

    .photo-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; gap: 0.3rem; }
    .photo-wall-rest { grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }

    .hotel-map iframe { height: 160px; }

    .btn { padding: 0.7rem 1.2rem; font-size: 0.82rem; max-width: 280px; }
}