/* ══════════════════════════════════════════════════════════════════════
   BICM — HERO MÓVIL · componente canónico compartido (index2 / index / bicm)
   ----------------------------------------------------------------------
   En escritorio el hero es un lienzo absoluto de 1600×900 (unidades --u/--uh).
   Ese lienzo, encogido a un móvil, quedaba como una miniatura ilegible.
   Aquí el hero sale del lienzo y pasa a un layout de flujo real:

        [ 19BICM ]   [ FESTIVAL ]
        [ ←  carrusel de carteles  → ]
        [ · · ·  puntos ]
        [ B I C M ]           ← el texto grande, justo debajo del carrusel

   Respeta el notch con env(safe-area-inset-*).
   Pareja de hero-mobile.js (auto-avance + puntos + salto del intro).
   ══════════════════════════════════════════════════════════════════════ */

/* Los puntos del carrusel y los badges de logo por-cartel sólo existen en móvil */
.hero-dots { display: none; }
.hero-img .hero-badge { display: none; }

/* ── Slots rotatorios del hero (escritorio y móvil) ────────────────────
   Los slots marcados con data-hero-rotate llevan varias imágenes apiladas;
   sólo se ve la que tiene .is-active. El slot izquierdo NO rota: lleva
   fijo el cartel de Selección Oficial. */
.hero-img[data-hero-rotate] > img:not(.hero-badge) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero-img[data-hero-rotate] > img.is-active:not(.hero-badge) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-img[data-hero-rotate] > img:not(.hero-badge) { transition: none; }
}

@media (max-width: 860px) {

  /* ── El hero deja de ser lienzo absoluto ─────────────────────────── */
  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "dots"
      "bicm";
    gap: clamp(12px, 3.4vw, 20px);
    padding:
      calc(env(safe-area-inset-top, 0px) + 74px)
      calc(env(safe-area-inset-right, 0px) + 16px)
      clamp(8px, 2.4vw, 16px)
      calc(env(safe-area-inset-left, 0px) + 16px);
  }

  /* El lápiz no se usa en el layout espejado */
  .hero-lapiz { display: none; }

  /* Las marcas 19BICM/Festival del escritorio (fijas arriba del hero) se
     ocultan en móvil: cada una tiene un clon (.hero-badge) DENTRO de su
     cartel correspondiente, para que viaje con él al deslizar el carrusel. */
  .hero-19bicm, .hero-festival { display: none; }

  /* Especificidad (0,2,0) a propósito: debe ganarle a ".hero-img img"
     (0,1,1), que si no le impone width/height:100% al badge. */
  .hero-img .hero-badge {
    display: block;
    position: absolute;
    z-index: 2;
    top: clamp(10px, 2.6vw, 16px);
    left: clamp(10px, 2.6vw, 16px);
    width: min(34vw, 128px);
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  }

  /* ── Carrusel ────────────────────────────────────────────────────── */
  .hero-gallery {
    grid-area: gallery;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* sangra hasta los bordes de la pantalla, sin romper el padding del hero */
    margin-inline: calc(-1 * (env(safe-area-inset-left, 0px) + 16px))
                   calc(-1 * (env(safe-area-inset-right, 0px) + 16px));
    padding-inline: calc(env(safe-area-inset-left, 0px) + 16px)
                    calc(env(safe-area-inset-right, 0px) + 16px);
  }
  .hero-gallery::-webkit-scrollbar { display: none; }

  .hero-img,
  .hero-img-left,
  .hero-img-center,
  .hero-img-right {
    /* relative (no static): las imágenes apiladas de los slots rotatorios
       se posicionan contra su propio slot, no contra el carrusel */
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    flex: 0 0 min(72%, 290px);
    width: auto;
    height: auto;
    aspect-ratio: 385 / 550;      /* proporción del cartel en Figma */
    scroll-snap-align: center;
  }

  /* ── Puntos ──────────────────────────────────────────────────────── */
  .hero-dots {
    grid-area: dots;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
  }
  .hero-dots button {
    width: 7px; height: 7px;
    padding: 0; border: 0; border-radius: 999px;
    background: rgba(0,0,0,.22);
    cursor: pointer;
    transition: width .3s cubic-bezier(.16,1,.3,1), background .3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-dots button[aria-current="true"] { width: 22px; background: #000; }

  /* ── BICM gigante, justo debajo del carrusel ─────────────────────── */
  .hero-bicm-text {
    grid-area: bicm;
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    font-size: min(30vw, 168px);
    line-height: .8;
    letter-spacing: -0.085em;
    text-align: left;
    margin-left: -0.04em;         /* compensa el sidebearing de la G/B */
  }

  /* ── El intro (réplica del hero de escritorio) no aplica en móvil ── */
  .intro-overlay { display: none !important; }

  /* La barra de color vive en el burger; no ocupa espacio en el flujo */
  .home-header { display: none; }
}

@media (max-width: 420px) {
  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 66px);
    gap: clamp(10px, 3vw, 16px) 10px;
  }
  .hero-img .hero-badge { width: min(30vw, 108px); }
  .hero-img,
  .hero-img-left,
  .hero-img-center,
  .hero-img-right { flex-basis: min(76%, 250px); }
  .hero-bicm-text { font-size: min(32vw, 132px); }
}

/* ══════════════════════════════════════════════════════════════════════
   SECCIONES DEL HOME EN MÓVIL
   ----------------------------------------------------------------------
   Quienes / Cartelera / Imprime / Alianzas se diseñaron como lienzo
   absoluto de 1600×900: al encogerlo a un móvil, los títulos se
   encimaban con sus descripciones. Aquí salen del posicionamiento
   absoluto y se apilan en orden legible: título → descripción → contenido.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Header con el logo oficial, visible en móvil (el burger va fijo aparte) */
  .home-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding:
      calc(env(safe-area-inset-top, 0px) + 12px)
      72px
      10px
      calc(env(safe-area-inset-left, 0px) + 16px);
  }
  .site-logo { height: clamp(44px, 13vw, 58px); }

  /* El hero ya no necesita reservar hueco para el burger: lo hace el header */
  .hero { padding-top: clamp(6px, 2vw, 14px); }

  /* ── Las 4 secciones pasan a flujo vertical ─────────────────────── */
  .quienes,
  .cartelera,
  .imprime,
  .alianzas {
    height: auto;
    min-height: 0;
    padding: clamp(34px, 8vw, 58px)
             calc(env(safe-area-inset-right, 0px) + 16px)
             clamp(34px, 8vw, 58px)
             calc(env(safe-area-inset-left, 0px) + 16px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3.2vw, 20px);
  }

  /* Títulos y descripciones: estáticos, ancho completo, uno tras otro */
  .quienes-title, .quienes-body, .quienes-img,
  .cart-title, .cart-desc,
  .imprime-title, .imprime-desc, .imprime-tagline,
  .aliados-title, .aliados-desc,
  .btn-imprime, .aliados-grid, .carousel-wrap {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  /* Alianzas trae título y descripción en un flex EN FILA: en móvil
     se apilan para que la descripción quede debajo del título. */
  .aliados-head {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 2.8vw, 16px);
  }

  .quienes-title, .cart-title, .imprime-title, .aliados-title {
    font-size: clamp(30px, 8.6vw, 46px);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .quienes-body, .cart-desc, .imprime-desc, .aliados-desc {
    font-size: clamp(15px, 4.1vw, 19px);
    line-height: 1.3;
  }

  /* Icono rotatorio de "Sobre Nosotros": en flujo, tamaño contenido */
  .quienes-img {
    width: min(64%, 260px);
    height: auto;
    aspect-ratio: 464 / 228;
    margin-top: clamp(6px, 2vw, 12px);
  }
  .quienes-img img { width: 100%; height: 100%; object-fit: contain; }

  /* ── Cartelera: las 3 tarjetas pasan a carrusel ──────────────────── */
  .cartelera-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * (env(safe-area-inset-left, 0px) + 16px))
                   calc(-1 * (env(safe-area-inset-right, 0px) + 16px));
    padding-inline: calc(env(safe-area-inset-left, 0px) + 16px)
                    calc(env(safe-area-inset-right, 0px) + 16px);
  }
  .cartelera-track::-webkit-scrollbar { display: none; }

  .sm-card,
  .sm-card-1, .sm-card-2, .sm-card-3 {
    position: static;
    left: auto; top: auto;
    flex: 0 0 min(78%, 300px);
    width: auto;
    height: auto;
    scroll-snap-align: center;
  }
  .sm-img { width: 100%; height: auto; aspect-ratio: 466 / 397; }
  .sm-img img { width: 100%; height: 100%; object-fit: cover; }

  /* ── Imprime carteles: carteles más grandes ──────────────────────── */
  .carousel-wrap { margin-left: 0; width: 100%; }
  .poster-slot.poster-sm,
  .poster-slot.poster-lg {
    width: clamp(150px, 42vw, 210px);
    height: auto;
    aspect-ratio: 223 / 318;
  }

  /* ── Alianzas: el muro pasa a carrusel ───────────────────────────── */
  .aliados-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * (env(safe-area-inset-left, 0px) + 16px))
                   calc(-1 * (env(safe-area-inset-right, 0px) + 16px));
    padding-inline: calc(env(safe-area-inset-left, 0px) + 16px)
                    calc(env(safe-area-inset-right, 0px) + 16px);
  }
  .aliados-grid::-webkit-scrollbar { display: none; }

  .ally-cell,
  .ally-cell--xl {
    flex: 0 0 min(52%, 200px);
    height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }

  /* ── Lightbox de alianzas en móvil ───────────────────────────────
     Imagen arriba · título ≤24px debajo · sin flechas (se navega
     deslizando la galería horizontal). */
  .lb-stage {
    flex-direction: column;
    gap: clamp(12px, 3.4vw, 18px);
    overflow-y: auto;
  }
  /* min-width:0 es obligatorio: sin esto, .lb-media-col (hijo de un flex
     column) se auto-ajusta al contenido en vez de quedarse al ancho del
     stage, y entonces overflow-x:auto de .lb-media nunca detecta
     desbordamiento real (scrollWidth queda igual a clientWidth).
     La ALTURA también debe ser explícita (no depender de max-height sobre
     las imágenes): si una imagen tarda en cargar o falla, .lb-media-col
     (flex:0 0 auto, alto = contenido) colapsa a 0px y arrastra a 0 el
     ancho de scroll también. Con height fija, el layout es determinista
     desde el primer frame, cargue o no cargue la imagen. */
  .lb-media-col { order: 1; flex: 0 0 auto; width: 100%; min-width: 0; height: 52vh; }
  .lb-meta { order: 2; }

  .lb-media {
    /* flex:1 (heredado del CSS de escritorio) reparte el alto de
       .lb-media-col entre esta galería y .lb-caption debajo. */
    width: 100%;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 10px;
  }
  .lb-media::-webkit-scrollbar { display: none; }
  .lb-media img,
  .lb-media video {
    flex: 0 0 100%;
    height: 100%;
    max-height: 52vh;
    scroll-snap-align: center;
  }

  .lb-name { font-size: min(24px, 6.4vw); line-height: 1.1; }
  .lb-thanks { font-size: clamp(14px, 3.9vw, 17px); max-width: none; margin-top: 10px; }
  .lb-nav { display: none; }
}

@media (max-width: 420px) {
  .site-logo { height: clamp(40px, 12.5vw, 52px); }
  .quienes-title, .cart-title, .imprime-title, .aliados-title { font-size: clamp(27px, 8.4vw, 36px); }
  .sm-card, .sm-card-1, .sm-card-2, .sm-card-3 { flex-basis: min(84%, 270px); }
  .poster-slot.poster-sm, .poster-slot.poster-lg { width: clamp(140px, 46vw, 190px); }
  .ally-cell, .ally-cell--xl { flex-basis: min(60%, 180px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gallery { scroll-behavior: auto; }
  .hero-dots button { transition: none; }
}