/* css/responsive.css */

@media (max-width: 900px) {
    .history-grid {
        grid-template-columns: 1fr;
    }
    .history-image-col {
        position: static !important;
    }
}

/* ============================================
   RESPONSIVE — TABLET (≤900px)
   ============================================ */
@media (max-width: 900px) {

    /* --- Layouts --- */
    .split-layout, .residencia-grid { grid-template-columns: 1fr; }

    /* --- Paddings de sección --- */
    .history-section, .programs-section, .features,
    .contact-section { padding: 70px 0; }
    .family-section, .residencia-section,
    .heart-section, .testimonials-section { padding: 80px 0; }
    .section-title { margin-bottom: 48px; }
    .section-title h2 { font-size: 2.2rem; }

    /* --- Hero: contenido centrado sobre la franja bordó del banner ---
       En pantalla angosta el banner se recorta por los costados (las
       estrellas quedan fuera de cuadro), así que soltamos la proporción
       fija y volvemos a un hero de alto de pantalla, descontando el header
       para que la tira de fotos superior no quede tapada. */
    .hero {
        aspect-ratio: auto;
        min-height: calc(100svh - var(--header-h));
        padding-top: 40px;
        padding-bottom: 40px;
        align-items: center;
    }
    .hero > .container { padding: 0 20px; }
    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(58,14,12,0.65) 0%,
            rgba(58,14,12,0.10) 26%,
            rgba(58,14,12,0.00) 40%,
            rgba(58,14,12,0.00) 60%,
            rgba(58,14,12,0.10) 74%,
            rgba(58,14,12,0.65) 100%
        );
    }
    /* Angosto para dos columnas: apilamos lockup y CTA */
    .hero-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .hero-left {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        max-width: 100%;
        border-right: none;
        padding-right: 0;
    }
    .hero-right {
        text-align: center;
        align-items: center;
        max-width: 100%;
        gap: 16px;
    }
    .hero-lockup { width: min(100%, 440px); }
    .hero-cta { padding: 10px 26px; font-size: 0.85rem; letter-spacing: 1px; }

    /* --- Nav mobile --- */
    .mobile-menu-btn { display: flex; }
    .main-nav {
        position: fixed; top: 0; right: -100%;
        width: 300px; height: 100vh;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        padding: 50px 30px;
        transition: right var(--transition);
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    }
    .main-nav.active { right: 0; }
    .main-nav ul { display: flex; flex-direction: column; gap: 30px; text-align: center; margin-bottom: 30px; }

    /* --- Tipografía general --- */
    .history-text-col h2 { font-size: 1.9rem; }
    .split-text h2 { font-size: 2.2rem; }
    .heart-content h2 { font-size: 2.2rem; }
    .residencia-text h2 { font-size: 2.2rem; }
    .contact-section h2 { font-size: 2rem; }

    /* --- Programas --- */
    .contact-actions { flex-direction: column; align-items: center; }
    .program-card, .reverse-card {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .program-image {
        position: relative;
        min-height: 300px;
        order: -1;
    }
    .reverse-card .program-image { order: -1; }
    .program-collage-strip {
        grid-template-columns: 1fr 1fr;
    }
    .cs-cell--hide-mobile {
        display: none;
    }
    .program-content { padding: 36px 28px; }
    .program-content h3 { font-size: 1.8rem; }
    .title-profundo  { font-size: 2rem; }
    .title-sabados   { font-size: 2.2rem; }
    .title-bachiller { font-size: 2.2rem; }
    .title-formacion { font-size: 1.7rem; }
    .fc-staff-row { gap: 8px; }
    .fc-staff-member { min-width: 130px; }

    .program-video-embed {
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.03);
        padding: 40px 20px;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (≤600px)
   ============================================ */
@media (max-width: 600px) {

    /* --- Paddings de sección --- */
    .history-section, .programs-section, .features,
    .contact-section { padding: 50px 0; }
    .family-section, .residencia-section,
    .heart-section, .testimonials-section { padding: 56px 0; }
    .section-title { margin-bottom: 32px; }
    .section-title h2 { font-size: 1.8rem; }

    /* --- Header --- */
    .logo-img { height: 60px; }

    /* --- Hero --- */
    .hero-cta { padding: 9px 20px; font-size: 0.78rem; }
    .hero-actions { flex-direction: column; }

    /* --- Tipografía general --- */
    .history-text-col h2 { font-size: 1.6rem; }
    .history-text-col h3 { font-size: 1.15rem; }
    .history-text-col p, .history-values-list li { font-size: 0.97rem; }
    .split-text h2 { font-size: 1.8rem; }
    .heart-content h2 { font-size: 1.8rem; }
    .residencia-text h2 { font-size: 1.8rem; }
    .contact-section h2 { font-size: 1.7rem; }
    .contact-section p { font-size: 1rem; }

    /* --- Programas --- */
    .program-image { min-height: 240px; }
    .program-collage-strip {
        grid-template-columns: 1fr;
    }
    .cs-cell:not(.cs-cell--main) {
        display: none;
    }
    .cs-cell--main {
        aspect-ratio: 16 / 9;
    }
    .fc-staff-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 14px 0 20px 0;
    }
    .fc-staff-member {
        padding: 5px 12px 5px 5px;
        width: auto;
        min-width: 200px;
    }
    .fc-avatar { width: 32px; height: 32px; }
    .program-content { padding: 28px 18px; }
    .program-content h3 { font-size: 1.5rem; }
    .title-profundo  { font-size: 1.6rem; }
    .title-sabados   { font-size: 1.8rem; }
    .title-sabados-pre { font-size: 1.6rem; }
    .title-bachiller { font-size: 1.9rem; }
    .title-formacion { font-size: 1.35rem; }
    .program-intro { font-size: 1.05rem; }
    .program-content p { font-size: 1rem; }
    .program-highlight p { font-size: 1rem; }

    /* --- Familia --- */
    .split-image-collage { grid-template-columns: 1fr; gap: 14px; }
    .split-image-collage .img-placeholder { aspect-ratio: 4 / 3; height: auto; min-height: 250px; border-radius: 14px; background-position: center center !important; }

    /* --- Residencia --- */
    .residencia-gallery { grid-template-columns: 1fr; }
    .residencia-img { height: 190px; }
    .r-img-1 { height: 210px; }

    /* --- Equipo --- */
    .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .team-member { padding: 22px 14px; }
    .avatar { width: 100px; height: 100px; }
    .team-member h4 { font-size: 1rem; }
    .team-member span { font-size: 0.82rem; }

    /* --- Testimonios --- */
    .features-grid { grid-template-columns: 1fr; }
    .testimonios-video-grid { grid-template-columns: 1fr 1fr; }

    /* --- Comunidad --- */
    .community-gallery { grid-template-columns: 1fr 1fr; }
    .community-img { height: 260px; }
    .community-layout {
        flex-direction: column;
        gap: 30px;
    }
    .community-features-left, .community-features-right {
        text-align: center;
        align-items: center;
    }
    .community-features {
        gap: 20px;
    }

    /* --- Contacto --- */
    .contact-actions { flex-direction: column; align-items: center; }
    .contact-actions .btn { width: 100%; max-width: 300px; text-align: center; }

    /* --- WhatsApp --- */
    .whatsapp-float { bottom: 18px; right: 18px; width: 50px; height: 50px; }
    .whatsapp-float svg { width: 26px; height: 26px; }
}

@media (max-width: 600px) {
    .testimonios-video-grid { grid-template-columns: 1fr; gap: 20px; }
    .program-logo { max-width: 200px; }
    .program-video-embed {
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.03);
        padding: 30px 15px;
    }

    /* --- Comunidad --- */
    .community-gallery { grid-template-columns: 1fr; gap: 14px; }
    .community-img { height: 240px; }
}

/* ============================================
   HERO — Viewports bajos
   Solo aplica en anchos chicos, que es donde el hero sigue atado al alto
   de la pantalla. En escritorio el alto lo fija la proporción del banner,
   así que la franja bordó ya no se angosta al bajar el viewport y no hay
   nada que compactar.
   ============================================ */
@media (max-width: 900px) and (max-height: 720px) {
    .hero { padding-top: 24px; padding-bottom: 24px; }
    .hero-lockup { width: min(100%, 360px); }
    .hero-right { gap: 16px; padding-bottom: 4px; }
    .hero-cta { padding: 9px 26px; font-size: 0.78rem; }
}