/* ==========================================================================
   INSTITUTO DOMINGO FAUSTINO SARMIENTO — RESPONSIVE MOBILE FIX
   Archivo: css/responsive.css
   
   REGLAS INQUEBRANTABLES:
   - Este archivo SOLO contiene reglas dentro de media queries para móvil y tablet.
   - La versión DESKTOP (>768px y >1024px) queda 100% idéntica e inalterada.
   - Cero scroll horizontal en 320px, 375px, 425px y 768px.
   ========================================================================== */

/* ==========================================================================
   BREAKPOINT PRINCIPAL: MOBILE & TABLET (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --------------------------------------------------------------------------
       a) RESET GLOBAL RESPONSIVE
       -------------------------------------------------------------------------- */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        position: relative !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .sas-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* --------------------------------------------------------------------------
       b) HEADER & NAVEGACIÓN HAMBURGUESA
       -------------------------------------------------------------------------- */
    .sas-new-nav {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    .sas-nav-content {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Contenedor del logo y textos */
    .sas-logo-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        max-width: calc(100% - 54px) !important;
        text-decoration: none !important;
        gap: 2px !important;
    }

    /* Título principal: Sobrescribe el inline style con font-size responsive */
    .sas-logo-link span.sas-logo-text:first-child {
        font-size: clamp(18px, 5vw, 24px) !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Subtítulo de San Antonio de Padua */
    .sas-logo-link span.sas-logo-text:last-child {
        font-size: clamp(11px, 3vw, 13px) !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        opacity: 0.9 !important;
    }

    /* Botón hamburguesa */
    .sas-nav-burger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        padding: 0 !important;
    }

    .sas-nav-burger span {
        display: block !important;
        width: 28px !important;
        height: 3px !important;
        margin: 3px 0 !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    .sas-nav-burger[aria-expanded="true"] span:nth-child(1),
    .sas-nav-burger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important;
    }

    .sas-nav-burger[aria-expanded="true"] span:nth-child(2),
    .sas-nav-burger.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .sas-nav-burger[aria-expanded="true"] span:nth-child(3),
    .sas-nav-burger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg) !important;
    }

    /* Menú lateral móvil con scroll y sin cortes */
    .sas-nav-menu {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 82vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #1a2238 !important;
        flex-direction: column !important;
        padding: 70px 24px 30px 24px !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.45) !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        gap: 12px !important;
    }

    .sas-nav-menu.active {
        display: flex !important;
    }

    .sas-nav-menu li {
        width: 100% !important;
        list-style: none !important;
    }

    .sas-nav-link {
        font-size: 1rem !important;
        padding: 12px 14px !important;
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        border-radius: 6px !important;
        color: #ffffff !important;
    }

    .sas-nav-dropdown {
        position: relative !important;
        width: 100% !important;
    }

    .sas-nav-dropdown .sas-dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
        border-radius: 6px !important;
        margin-top: 6px !important;
        padding: 6px 12px !important;
        min-width: 100% !important;
    }

    .sas-dropdown-link {
        color: #e3eafc !important;
        font-size: 0.92rem !important;
        padding: 8px 10px !important;
        border-radius: 4px !important;
    }

    /* --------------------------------------------------------------------------
       c) HERO / SLIDER
       -------------------------------------------------------------------------- */
    .hero-slider-section {
        width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    .hero-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        margin: 0 auto !important;
        box-shadow: 0 4px 16px rgba(26, 34, 56, 0.12) !important;
        overflow: hidden !important;
    }

    .hero-slider-main {
        height: auto !important;
        min-height: 280px !important;
        position: relative !important;
        display: block !important;
    }

    .hero-slider-main .hero-slide {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: none !important;
    }

    .hero-slider-main .hero-slide.active {
        display: block !important;
    }

    .hero-slider-main .hero-slide img {
        width: 100% !important;
        height: 310px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
    }

    /* Caja de texto oscura responsive: 90% ancho, 5% left, 10% bottom */
    .hero-slider-main .hero-caption {
        position: absolute !important;
        width: 90% !important;
        max-width: 90% !important;
        left: 5% !important;
        bottom: 10% !important;
        background: rgba(26, 34, 56, 0.92) !important;
        color: #ffffff !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        font-size: clamp(0.78rem, 3.2vw, 0.92rem) !important;
        line-height: 1.35 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .hero-slider-main .hero-caption span {
        font-size: clamp(0.7rem, 2.7vw, 0.82rem) !important;
        display: block !important;
        margin-top: 4px !important;
        line-height: 1.3 !important;
    }

    .slider-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }

    .slider-btn-prev { left: 8px !important; }
    .slider-btn-next { right: 8px !important; }

    .slider-dots {
        bottom: 8px !important;
    }

    /* --------------------------------------------------------------------------
       CONTENEDOR CENTRAL & ACCESOS DIRECTOS
       -------------------------------------------------------------------------- */
    .contenedor-central {
        width: 100% !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }

    .image-menu-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 10px 0 !important;
        margin-bottom: 20px !important;
        flex-wrap: wrap !important;
    }

    .image-menu-item .menu-image {
        max-width: 140px !important;
        height: auto !important;
    }

    /* --------------------------------------------------------------------------
       d) SECCIÓN "NUESTRA HISTORIA" (1 Columna, flex-direction: column)
       -------------------------------------------------------------------------- */
    .sas-history-section {
        padding: 36px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sas-history-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .sas-history-image-wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .sas-history-image {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
    }

    .sas-history-text-wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .sas-history-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .sas-history-description {
        font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important;
        line-height: 1.65 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }

    /* --------------------------------------------------------------------------
       e) CARDS "Jardín Maternal, Infantes, Primaria, Secundaria"
       Grid: 1 columna en móvil, gap 20px
       -------------------------------------------------------------------------- */
    .sas-educational-levels-wrapper {
        padding: 24px 12px !important;
        margin: 28px auto !important;
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        border-width: 3px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .sas-educational-levels-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    .sas-educational-levels-title {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
        text-align: center !important;
    }

    .sas-educational-levels-logo {
        height: 44px !important;
        width: auto !important;
    }

    .sas-educational-levels {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .sas-level-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        flex: none !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .sas-level-card .sas-level-card-image img {
        width: 100% !important;
        height: 210px !important;
        object-fit: cover !important;
        display: block !important;
    }

    .sas-level-card-content {
        padding: 20px 16px !important;
        text-align: center !important;
        border-radius: 0 0 12px 12px !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .sas-level-card-content h3 {
        font-size: clamp(1.3rem, 4.5vw, 1.7rem) !important;
        margin-bottom: 8px !important;
    }

    .sas-level-card-content p {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
    }

    .sas-level-card-content .sas-btn {
        padding: 10px 22px !important;
        font-size: 0.95rem !important;
        align-self: center !important;
    }

    /* --------------------------------------------------------------------------
       f) SECCIÓN "INGLÉS EN SARMIENTO" Y FOOTER (1 Columna, Centrado, Pad 16px)
       -------------------------------------------------------------------------- */
    .sas-international-section {
        margin: 28px 12px !important;
        padding: 24px 16px !important;
        border-radius: 14px !important;
        width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
    }

    .sas-international-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .sas-international-title {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
        text-align: center !important;
    }

    .sas-international-logo {
        height: 48px !important;
        width: auto !important;
    }

    .sas-international-content {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .sas-international-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        box-sizing: border-box !important;
    }

    .sas-international-card p {
        text-align: center !important;
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
    }

    .sas-international-card .sas-btn {
        align-self: center !important;
        margin-top: 10px !important;
    }

    /* Footer unificado a 1 columna y centrado */
    .sas-footer,
    .sas-footer-contact,
    .footer-img-style {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .sas-footer-contact-row,
    .footer-img-style .footer-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px 16px !important;
        gap: 22px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sas-footer-contact-col,
    .footer-img-style .footer-col,
    .footer-img-style .footer-social-col {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .sas-footer-contact h4,
    .footer-img-style h4 {
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }

    .sas-footer-contact ul,
    .footer-img-style ul {
        text-align: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .sas-footer-contact li,
    .footer-img-style li {
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.92rem !important;
    }

    .footer-img-style .footer-social {
        justify-content: center !important;
        margin-top: 10px !important;
    }

    .sas-footer-contact-address-block {
        align-items: center !important;
        text-align: center !important;
    }

    /* --------------------------------------------------------------------------
       ELEMENTOS FLOTANTES & MODALES
       -------------------------------------------------------------------------- */
    #sas-toast-inscripcion {
        left: 12px !important;
        right: 12px !important;
        bottom: 16px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .sas-modal-content {
        width: 92vw !important;
        max-width: 360px !important;
        padding: 1.5rem 1rem !important;
        box-sizing: border-box !important;
    }

    #sas-back-to-top {
        bottom: 16px !important;
        right: 16px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/* ==========================================================================
   BREAKPOINT TABLET (min-width: 500px) and (max-width: 768px)
   Cards en 2 columnas
   ========================================================================== */
@media (min-width: 500px) and (max-width: 768px) {
    .sas-educational-levels {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ==========================================================================
   BREAKPOINT PANTALLAS PEQUEÑAS (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .sas-nav-content {
        padding: 8px 12px !important;
    }

    .sas-logo-link span.sas-logo-text:first-child {
        font-size: clamp(16px, 4.8vw, 20px) !important;
    }

    .hero-slider-main {
        min-height: 250px !important;
    }

    .hero-slider-main .hero-slide img {
        height: 270px !important;
    }

    .hero-slider-main .hero-caption {
        width: 92% !important;
        max-width: 92% !important;
        left: 4% !important;
        bottom: 8% !important;
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    .hero-slider-main .hero-caption span {
        font-size: 0.72rem !important;
    }

    .image-menu-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .image-menu-item .menu-image {
        max-width: 150px !important;
    }

    .sas-level-card .sas-level-card-image img {
        height: 190px !important;
    }
}