/* =====================================================================
   RESPONSIVE.CSS  ·  Diseño adaptable (Desktop · Laptop · Tablet · Móvil)
   ---------------------------------------------------------------------
   IMPORTANTE: este archivo se carga DESPUÉS de main.css en el HTML,
   por eso aquí podemos "sobre-escribir" estilos para pantallas pequeñas.

   PUNTOS DE QUIEBRE (breakpoints) usados:
     · <= 1100px  Laptop
     · <=  960px  Tablet  (aquí el menú se vuelve "hamburguesa")
     · <=  640px  Móvil   (aquí se usa la imagen HERO MÓVIL)
     · <=  380px  Móvil pequeño
   ===================================================================== */


/* =====================================================================
   LAPTOP  (<= 1100px)
   ===================================================================== */
@media (max-width: 1100px) {
  :root { --container: 1000px; }

  .nav a { padding-inline: 0.65rem; font-size: 0.9rem; }
}


/* =====================================================================
   TABLET  (<= 960px)  ·  El menú se colapsa a "hamburguesa"
   ===================================================================== */
@media (max-width: 960px) {

  /* Mostrar el botón hamburguesa y ocultar el botón CTA del header
     (el CTA aparece dentro del menú desplegable). */
  .nav-toggle { display: block; }
  .header-cta .btn { display: none; }

  /* El menú se convierte en un panel desplegable a pantalla completa */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem var(--gutter);
    background: rgba(19, 18, 52, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform: translateX(100%);
    transition: transform var(--t);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  .nav a {
    font-size: 1.3rem;
    padding: 0.9rem 1rem;
    text-align: center;
  }

  /* Botón de inscripción grande dentro del menú móvil */
  .nav .nav-cta {
    display: inline-flex;
    margin-top: 1rem;
    color: #fff;
    background-image: var(--grad-primary);
    box-shadow: var(--shadow-glow);
  }
  .nav .nav-cta:hover { background-image: var(--grad-primary); }

  /* Ubicación: una sola columna (info arriba, mapa abajo) */
  .location-grid { grid-template-columns: 1fr; }

  /* Footer: columnas hacia abajo */
  .footer-top { flex-direction: column; }
}


/* =====================================================================
   MÓVIL  (<= 640px)
   ===================================================================== */
@media (max-width: 640px) {

  :root {
    --space-section: clamp(3.5rem, 12vw, 5rem);
    --header-h: 66px;
  }

  /* La imagen MÓVIL del banner se elige sola con <picture> en el HTML
     (assets/images/hero-mobile.jpg). No hace falta nada extra aquí. */

  /* Intro centrado y un poco más compacto */
  .hero__facts { gap: 1.5rem; }

  /* Cuenta regresiva: 2 columnas (2x2) */
  .countdown__grid { grid-template-columns: repeat(2, 1fr); }

  /* Botones a ancho completo para mejor toque */
  .hero__actions .btn { width: 100%; }

  /* Cabeceras de sección centradas por defecto en móvil */
  .section-head { text-align: center; margin-inline: auto; }
  .section-head .eyebrow { margin-inline: auto; }

  /* Timeline con menos sangría */
  .timeline { padding-left: 1.8rem; }
  .tl-item::before { left: -1.8rem; }

  /* Footer alineado al centro */
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-cols { gap: 2rem; }
}


/* =====================================================================
   MÓVIL PEQUEÑO  (<= 380px)
   ===================================================================== */
@media (max-width: 380px) {
  .count-box .num { font-size: 2rem; }
  .hero__facts { flex-direction: column; gap: 1rem; }
  .brand { font-size: 1rem; }
}


/* =====================================================================
   PANTALLAS MUY ANCHAS  (>= 1500px)  ·  un poco más de aire
   ===================================================================== */
@media (min-width: 1500px) {
  :root { --container: 1280px; }
}


/* =====================================================================
   PANTALLA GRANDE: limitar la altura del banner para que no sea gigante
   y se vea también el inicio del contenido al entrar.
   ===================================================================== */
@media (min-width: 1100px) {
  /* El banner horizontal ocupa como máximo ~78% del alto de la ventana. */
  .hero-banner__img { max-height: 78vh; width: 100%; object-fit: contain; }
}