/* =========================================================
   DISEÑO RESPONSIVE (Tablets y Celulares)
   ========================================================= */

@media (max-width: 992px) {
    .hero-content h1 { font-size: 2.8rem; }
    .hero-badges-compact { flex-wrap: wrap; }
    .page-header .hero-content h1 { font-size: 2.6rem; }

    .hero-quote { display: none; }
    .hero-tagline { display: none; }

    .contact-container { flex-direction: column; }
    .contact-map { min-height: 300px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .programs-split { grid-template-columns: 1fr; }
    .programs-cards { grid-template-columns: 1fr 1fr; }

    .pillars-grid { grid-template-columns: repeat(3, 1fr); padding: 28px 15px; }
    .pillar { padding: 0 10px; }

    .community-grid { grid-template-columns: 1fr; gap: 30px; }
    .areas-layout { grid-template-columns: 1fr; gap: 30px; }
    .gallery-teaser-layout { grid-template-columns: 1fr; gap: 30px; }
    .cta-band-content { justify-content: center; text-align: center; }

    .about-hero { grid-template-columns: 1fr; height: auto; }
    .about-hero-photo { clip-path: none; height: 280px; }
    .values-grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .value-item:nth-child(2) { border-right: none; }
    .mvo-layout { grid-template-columns: 1fr; }
    .mvo-card-photo--full { grid-column: 1; }

    .areas-layout-simple { grid-template-columns: 1fr; gap: 30px; }
    .area-simple-grid { grid-template-columns: repeat(3, 1fr); }
    .vol-areas-grid { grid-template-columns: repeat(2, 1fr); }
    .volunteer-page .section { padding: 52px 0; }
    .volunteer-experience-grid { grid-template-columns: 1fr; }
    .tourism-page .section { padding: 52px 0; }
    .tourism-experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tourism-experience-grid li:last-child { grid-column: 1 / -1; }
    .tourism-mantras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tourism-mantras p:last-child { grid-column: 1 / -1; }
    .gallery-mosaic-grid { grid-template-columns: repeat(2, 1fr); }

    .hero-search-bar { padding: 18px; }
    .mission-strip-grid { grid-template-columns: 1fr; gap: 40px; }
    .mission-banner-img { grid-column: 1; }
    .carreras-title { font-size: 1.9rem; }
    .carreras-collage { grid-template-rows: repeat(2, 160px); margin-bottom: 20px; }
    .mission-benefits .why-checklist li { font-size: 0.94rem; }
    .mission-benefits .eyebrow { font-size: 0.78rem; padding: 7px 18px; }
    .mission-benefits .btn { padding: 14px 32px; font-size: 0.98rem; }
    .viaje-visual { height: auto; min-height: 0; }
    .viaje-visual-script { font-size: 1.9rem; }
    .viaje-visual-content { padding: 34px; }
    .viaje-feature i { font-size: 1.3rem; }
    .viaje-feature span { font-size: 0.82rem; }
}

@media (max-width: 992px) {
    .internship-area-grid--other { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .internship-intro-layout { grid-template-columns: 1fr; gap: 18px; }
    .internship-intro-image { width: min(100%, 190px); margin: 0 auto; }
    .volunteer-stay-layout { grid-template-columns: 1fr; gap: 24px; }
    .volunteer-stay-image { width: min(100%, 520px); height: auto; margin: 0 auto; }
    .volunteer-impact-layout { grid-template-columns: 1fr; gap: 24px; }
    .volunteer-impact-image { width: min(100%, 520px); height: auto; margin: 0 auto; }
    .tourism-change-layout { grid-template-columns: 1fr; gap: 24px; }
    .tourism-change-image { width: min(100%, 520px); height: auto; margin: 0 auto; }
    .tourism-closing-layout { grid-template-columns: 1fr; gap: 24px; }
    .tourism-closing-image { width: min(100%, 520px); height: auto; margin: 0 auto; }
    .internship-benefits-grid,
    .internship-area-grid--environment,
    .internship-area-grid--other,
    .internship-mantras { grid-template-columns: 1fr; }
    .internship-benefits .section-title { font-size: 1.9rem; }
    .internship-benefits-heading { grid-template-columns: 1fr; gap: 20px; }
    .internship-benefits-heading .section-title { text-align: center; }
    .internship-benefits-heading img { height: 210px; }
    .internship-profile-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
    .internship-profile-copy .section-title,
    .internship-profile .section-subtitle { text-align: center; }
    .internship-profile-photo { width: min(100%, 220px); margin: 0 auto; }
    .internship-professions-heading .section-title { font-size: 1.7rem; }
    .internship-transformation-main { grid-template-columns: 1fr; gap: 20px; }
    .internship-transformation-copy .section-title,
    .internship-transformation-copy > p { text-align: center; margin-left: auto; margin-right: auto; }
    .internship-transformation-gallery { width: min(100%, 420px); margin: 0 auto; }
    .internship-mantras p + p { border-left: 0; border-top: 1px solid var(--internship-blue-border); }
    .internship-mantras p { justify-content: flex-start; padding: 10px 4px; }
    .internship-traits { margin-bottom: 38px; }
    .internship-cta .cta-band-text h3 { font-size: 1.45rem; }
}

@media (max-width: 768px) {

    /* El video de fondo pesa mucho en datos móviles: mostramos una foto fija */
    .hero-video { display: none; }
    .hero { background: url('../img/cacao.jpeg') center/cover no-repeat; }

    /* En pantallas táctiles no hay hover: mostramos siempre el texto de la galería */
    .gallery-item span { transform: translateY(0); }

    /* Ajustes de Texto y Espacios */
    .hero-content h1 { font-size: 2.2rem; }
    .page-header .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }
    .hero { min-height: 78vh; }
    .page-header { min-height: 34vh; }

    .hero-buttons { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-buttons .btn { width: 100%; justify-content: center; }

    .section { padding: 60px 0; }
    .section-title { font-size: 2rem; }

    /* Tarjetas y Galería a 1 sola columna en celulares */
    .carousel-container { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; }
    .video-gallery-grid { grid-template-columns: 1fr; }
    .programs-cards { grid-template-columns: 1fr; }

    .pillars-bar { padding: 50px 0 10px; }
    .pillars-grid { grid-template-columns: 1fr; padding: 24px 20px; }
    .pillar { border-right: none; padding: 0 10px 18px; border-bottom: 1px solid var(--gray-300); }
    .pillar:last-child { border-bottom: none; padding-bottom: 0; }

    .paquete-img { min-height: 220px; }
    .paquete-content { padding: 28px; }

    /* Footer en una sola columna y centrado */
    .footer-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; padding-bottom: 34px; }
    .footer-brand { align-items: center; }
    .footer-brand p { max-width: none; }
    .footer-social { justify-content: center; }
    .footer-col ul li { justify-content: center; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* =========================================================
       Ajustes para la sección "Quiénes somos" y el buscador
       ========================================================= */
    .intro-grid { grid-template-columns: 1fr; gap: 30px; }
    .horizontal-search-form { flex-direction: column; gap: 15px; padding: 20px; }
    .availability-title { font-size: 1.8rem; }
    .btn-search-massive { width: 100%; }

    .areas-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-teaser-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: 1fr; }
    .cta-band-script { font-size: 1.5rem; }

    .values-grid { grid-template-columns: 1fr; }
    .value-item { border-right: none !important; padding-bottom: 20px; border-bottom: 1px solid rgba(14,124,74,0.18); }
    .value-item:last-child { border-bottom: none; padding-bottom: 0; }
    .about-hero-text h1 { font-size: 2.2rem; }

    .pp-grid { grid-template-columns: 1fr; }
    .area-simple-grid { grid-template-columns: repeat(2, 1fr); }
    .vol-areas-grid { grid-template-columns: 1fr; }
    .vol-checklist-grid { grid-template-columns: 1fr; }
    .volunteer-experience-grid { grid-template-columns: 1fr; }
    .volunteer-slogans { grid-template-columns: 1fr; }
    .volunteer-page .about-hero-text h1 { font-size: 2rem; }
    .volunteer-page .section { padding: 38px 0; }
    .tourism-page .about-hero-text h1 { font-size: 2rem; }
    .tourism-page .section { padding: 38px 0; }
    .tourism-experience-grid,
    .tourism-mantras { grid-template-columns: 1fr; }
    .tourism-experience-grid li:last-child,
    .tourism-mantras p:last-child { grid-column: auto; }
    .gallery-mosaic-featured { grid-template-columns: 1fr; }
    .gallery-mosaic-grid { grid-template-columns: 1fr; }
    .gallery-filters { gap: 8px; }
    .filter-pill { padding: 8px 16px; font-size: 0.82rem; }

    .carreras-collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 130px); }
    .carreras-collage img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
    .carreras-badge { font-size: 0.8rem; padding: 10px 18px; white-space: normal; text-align: center; width: 90%; }
    .viaje-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .viaje-visual-content { padding: 24px; }
    .viaje-visual-script { font-size: 1.5rem; }
    .hero-badges { justify-content: center; }
}