/* =============================================================
   RESPONSIVE — Media queries
   ============================================================= */

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .ring-outer,
    .ring-inner,
    .ring-outer-sm,
    .ring-inner-sm { animation: none; }

    .why-card-icon::before { animation: none; }
    .hero-badge-dot { animation: none; }

    .image-container:hover .sp {
        transform: none;
        opacity: 1;
    }
}

/* ── ≤ 1024px (tablet landscape) ── */
@media (max-width: 1024px) {
    .banner, .banner-white { padding: 64px 32px; }

    .banner-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .offer-section { padding: 48px 24px; }

    .about-section .hero-content-wrapper {
        flex-direction: column;
        gap: 28px;
    }

    .about-section .hero-image-side,
    .about-section .hero-text-side { width: 100%; }

    .location-flex-container { flex-direction: column; }

    .map-container-side {
        width: 100%;
        height: 320px;
    }
}

/* ── ≤ 991px (tablet portrait / navbar collapse) ── */
@media (max-width: 991px) {
    .hero-content-wrapper, .location-flex-container {
        flex-direction: column;
        text-align: center;
    }

    .hero { padding: 108px 0 30px; }

    .hero-right {
        min-height: 450px;
        margin-top: 40px;
    }

    .map-container-side {
        order: 2;
        width: 100%;
        height: 350px;
    }

    .location-flex-container { gap: 20px; }
    .location-info-card { padding: 25px; }

    .hero-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .offer-grid { margin-top: 50px; }
    .benefits-list { margin-top: 50px; }
    .why-section { padding: 64px 32px; }
    .why-grid { grid-template-columns: 1fr; gap: 20px; }

    .link-container {
        flex-direction: column;
        align-items: flex-start;
        min-width: 100%;
        gap: 4px;
        padding: 8px 0;
    }

    .link-container a {
        width: 100%;
        padding: 10px 16px;
        border-radius: 8px;
        border-bottom: none;
        border-left: 2px solid transparent;
    }

    .link-container a:hover {
        border-left-color: var(--color-ubam-blue);
        border-bottom: none;
    }
}

/* ── ≤ 768px (móvil grande) ── */
@media (max-width: 768px) {
    .hero {
        padding: 92px 0 48px;
        background-attachment: scroll;
    }

    .hero-content { padding: 20px; text-align: center; }

    .hero-title-container {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
    }

    .oxford-logo { width: 150px; }
    .hero-content-wrapper { gap: 20px; }

    .spiral-duo { width: 340px; height: 390px; }
    .spiral-wrapper.sz-lg { width: 280px; height: 280px; }
    .spiral-wrapper.sz-sm { width: 160px; height: 160px; }
    .sz-lg .image-container { width: 280px; height: 280px; }
    .sz-sm .image-container { width: 160px; height: 160px; }

    .nivel-badge { font-size: 12px; padding: 6px 12px; }
    .hero-badges-group { gap: 8px; }

    .hero-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .map-container-side { min-height: 250px; }
    .location-flex-container { gap: 20px; }
}

/* ── ≤ 640px (móvil pequeño) ── */
@media (max-width: 640px) {
    .btn-ubam { padding: 10px 24px; font-size: 0.85rem; }
    .hero-title-container { margin-bottom: 15px; }
    .section-subtitle-script { font-size: 1.75rem; margin-bottom: 8px; }
    .section-title-bold { font-size: 1.4rem; }
    .card-program { padding-bottom: 16px; }
    .offer-title-script { font-size: 2.2rem; }
    .offer-subtitle-main { font-size: 0.95rem; }
    .why-section { padding: 52px 20px; }
    .why-grid { grid-template-columns: 1fr; gap: 16px; }
    .why-card { padding: 30px 22px 26px; }

    .banner, .banner-white { padding: 48px 20px; }
    .banner-inner { gap: 28px; }
    .banner-title { font-size: 28px; }
    .banner-sub { font-size: 14px; }
    .banner-card { padding: 20px 16px; }
    .banner-photo-card { height: 190px; }

    .btn-banner-llegar {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }

    .offer-grid { grid-template-columns: 1fr; gap: 16px; }
    .section-subtitle-script { font-size: 1.6rem; }
    .img-about { border-radius: 20px; }
    .benefits-list li { font-size: 0.9rem; }
    .location-info-card { padding: 20px; }
    .map-container-side { height: 260px; }
}