/* =========================================================================
   CORPOSUPERATE — RESPONSIVE.CSS (v2)
   Se carga DESPUÉS de css/styles.css en el <head> de index.php:
   <link href="css/styles.css" rel="stylesheet" />
   <link href="css/responsive.css" rel="stylesheet" />

   NOTA TÉCNICA IMPORTANTE:
   Varios componentes (exp-btn, inscripcion-card, resultado-card) traen su
   propio <style> incrustado dentro del PHP (mexperiencias.php,
   minscripciones.php, mresultados.php). En el HTML final ese <style> queda
   MÁS ABAJO que este archivo, así que ante un empate de especificidad CSS
   esas reglas ganarían por orden de aparición. Por eso aquí, cuando
   corresponde, se antepone el id de la sección (#experiencias,
   #inscripciones, #about) para asegurar que la regla responsive SIEMPRE
   gane, sin usar !important.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. BASE / RESET — evita el scroll horizontal fantasma en móvil
   ------------------------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

.btn-xl {
    white-space: normal;
    word-break: break-word;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* -------------------------------------------------------------------------
   1. SECCIONES — tu tema usa .page-section { padding: 8rem 0; } fijo.
   8rem (128px) arriba y abajo en cada sección es demasiado en tablet/celular.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .page-section {
        padding: 4.5rem 0;
    }
}

@media (max-width: 575.98px) {
    .page-section {
        padding: 3rem 0;
    }
    .container, .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Varias secciones traen en el HTML márgenes en % (positivos o negativos)
   pensados para "acomodar" el desborde/overlap en escritorio (ej: mision,
   cronograma, la sección de "Entrena con estos ejemplos"). En celular esos
   porcentajes no cuadran igual y dejan huecos en blanco entre una sección
   y la siguiente. En móvil, todas las secciones van pegadas, sin huecos. */
@media (max-width: 767.98px) {
    header.masthead,
    section,
    .cta-animated {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Refuerzo: mexperiencias.php, mservicios.php, mgaleria.php,
       mresultados.php, minscripciones.php y mcontactanos.php traen su
       propio <style> incrustado más abajo en el HTML final. Si ese estilo
       también usa !important sobre el margen de su sección (ej. #about),
       gana el empate de especificidad por aparecer después en el documento.
       Repetir el id (#about#about) sube la especificidad por encima de
       cualquier "#about" simple, sin importar el orden, así esta regla
       SIEMPRE gana. */
    #about#about,
    #services#services,
    #noticias#noticias,
    #inscripciones#inscripciones,
    #mision#mision,
    #cronograma#cronograma,
    #contact#contact,
    #experiencias#experiencias,
    #portfolio#portfolio {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* En desktop TODAS las tarjetas usan mt-5 (3rem); apiladas en celular
   dejan demasiado aire entre bloques. */
@media (max-width: 767.98px) {
    .mt-5 {
        margin-top: 1.5rem !important;
    }
}

/* -------------------------------------------------------------------------
   2. NAVBAR — mejoras del menú colapsado en tablet/celular
   (el navbar en sí ya es responsive vía Bootstrap; esto es pulido visual)
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #navbarResponsive {
        background: #fff;
        border-radius: 0 0 16px 16px;
        padding: 0.5rem 1rem 1.1rem;
        margin-top: 0.5rem;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    }
    #navbarResponsive .nav-link {
        padding: 0.65rem 0.5rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    #navbarResponsive .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}

/* -------------------------------------------------------------------------
   3. HERO — el <div style="height:430px;"> fijo se reemplaza en el HTML
   por class="hero-spacer". header.masthead YA es responsive en tu CSS
   (min-height 80vh/90vh/100vh por breakpoint); esto solo evita que el
   espaciador fijo genere una pantalla en blanco gigante en celulares
   de baja altura (iPhone SE, etc).
   ------------------------------------------------------------------------- */
.hero-spacer {
    height: clamp(140px, 40vh, 430px);
}

@media (max-width: 767.98px) {
    .hero-spacer {
        height: clamp(90px, 26vh, 220px);
    }
}

@media (max-width: 380px) {
    header.masthead {
        min-height: 88vh;
        padding-top: 5rem;
        padding-bottom: 3rem;
    }
    .hero-spacer {
        height: clamp(60px, 18vh, 140px);
    }
}

/* -------------------------------------------------------------------------
   4. GALERÍA (#portfolio) — BUG REAL: las leyendas (project-name /
   project-category) solo se muestran con :hover. En pantallas táctiles
   (tablet/celular) no existe :hover, así que ese texto NUNCA se ve.
   Solución: en dispositivos sin hover real, mostrar la leyenda siempre,
   de forma fija en la parte inferior de la imagen (no superpuesta).
   ------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    #portfolio .container-fluid .portfolio-box {
        display: flex;
        flex-direction: column;
    }
    #portfolio .container-fluid .portfolio-box .portfolio-box-caption {
        position: static;
        opacity: 1;
        background: #262B5E;
        padding: 14px 12px;
    }
    #portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name {
        font-size: 1rem;
    }
    #portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category {
        font-size: 0.78rem;
    }
}

/* -------------------------------------------------------------------------
   5. EXPERIENCIAS (acordeón 2023/2024/2025) — su <style> vive dentro de
   mexperiencias.php, por eso se antepone #experiencias para ganar siempre.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #experiencias .exp-btn {
        font-size: 1rem;
        padding: 12px 8px;
    }
}

#experiencias .col-lg-4 {
    margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   6. INSCRIPCIONES — su <style> vive dentro de minscripciones.php.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* La tarjeta de 11° (la más relevante) pasa primero al apilar */
    #inscripciones .inscripcion-card.destacado {
        transform: none;
        order: -1;
    }
    #inscripciones .inscripcion-card:hover {
        transform: translateY(-6px) scale(1.01);
    }
}

@media (max-width: 575.98px) {
    #inscripciones.inscripciones-premium {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    #inscripciones .inscripcion-card {
        padding: 30px 22px;
    }
    #inscripciones .badge-inscripcion {
        top: 14px;
        right: 14px;
        font-size: 0.72rem;
        padding: 5px 10px;
    }
}

/* -------------------------------------------------------------------------
   7. RESULTADOS — su <style> vive dentro de mresultados.php (section id="about").
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #about .resultados-header {
        text-align: center;
    }
    #about .resultados-img {
        max-width: 220px;
    }
}

@media (max-width: 575.98px) {
    #about .resultado-card {
        padding: 24px 18px;
        backdrop-filter: blur(6px); /* menos costo en celulares de gama baja */
    }
    #about .resultado-card i {
        font-size: 2.6rem;
    }
}

/* -------------------------------------------------------------------------
   8. CONTÁCTANOS — aviso de éxito y formulario 100% fluidos
   ------------------------------------------------------------------------- */
.alert-mensaje-ok {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 1.5rem;
    background: #18bc9c;
    color: #fff;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    #contact .btn-xl {
        width: 100%;
    }
    #contact [style*="text-align:right"] {
        text-align: center !important;
    }
}

/* -------------------------------------------------------------------------
   9. PIE DE PÁGINA — css/piedepagina.css define ".social{width:10%;}" sin
   contenedor de referencia fiable, lo que hace que cada ícono se vea de un
   tamaño distinto entre sí. ".footer-style img.social" es más específico
   que ".social" sola, así que esto gana sin importar el orden de carga.
   ------------------------------------------------------------------------- */
.footer-style img.social {
    width: clamp(26px, 5vw, 34px);
    height: clamp(26px, 5vw, 34px);
    object-fit: contain;
    margin: 0 6px;
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .footer-style {
        text-align: center;
    }
    .footer-style .footer-col {
        margin-bottom: 1.75rem;
    }
}

/* -------------------------------------------------------------------------
   11. NIVEL PRO / DINAMISMO — ajuste de las nuevas animaciones (agregadas
   en styles.css) para tablet y celular: formas más chicas, degradado más
   lento (menos batería), botón "volver arriba" más compacto.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero-shape-1 { width: 200px; height: 200px; }
    .hero-shape-2 { width: 160px; height: 160px; }
    .hero-shape-3 { width: 120px; height: 120px; }
}

@media (max-width: 575.98px) {
    .hero-shape-1, .hero-shape-2, .hero-shape-3 {
        filter: blur(28px);
        opacity: 0.25;
    }
    .cta-animated {
        animation-duration: 16s; /* más lento = menos consumo en celular */
    }
    .scroll-top-btn {
        width: 40px;
        height: 40px;
        right: 14px;
        bottom: 14px;
        font-size: 0.95rem;
    }
    /* Menor desplazamiento en el scroll-reveal para no generar saltos
       de layout largos en pantallas chicas */
    .reveal-init {
        transform: translateY(18px);
    }
}

/* En pantallas táctiles el zoom de imagen con :hover no aplica (no hay
   mouse), así que evitamos dejar el estado "colgado" tras un tap */
@media (hover: none) {
    #portfolio .portfolio-box:hover img {
        transform: none;
    }
    #mision .col-lg-4 > .mt-5:hover img,
    #cronograma .col-lg-4 > .mt-5:hover img {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   10. TABLAS (utilidad lista por si agregan tablas de tarifas/resultados)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-responsive-stack,
    .table-responsive-stack thead,
    .table-responsive-stack tbody,
    .table-responsive-stack th,
    .table-responsive-stack td,
    .table-responsive-stack tr {
        display: block;
        width: 100%;
    }
    .table-responsive-stack thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .table-responsive-stack td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 45%;
    }
    .table-responsive-stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 40%;
        font-weight: 700;
        white-space: nowrap;
    }
}
