/* ══════════════════════════════════════════════════════════════════════
   BICM — HOME EN MÓVIL · Figma "LANDING - FINAL" frame 8 (lienzo 340px)
   ----------------------------------------------------------------------
   En escritorio el home es un lienzo absoluto de 1600×900 (--u/--uh).
   Aquí sale del lienzo y pasa a flujo real con las medidas EXACTAS del
   frame 8, en px fijos (no en vw).

   Criterio para pantallas más anchas que las 340 del diseño (p. ej. un
   iPhone Pro Max de 440px): el texto NO se agranda. El contenido estático
   se queda en su columna de 300px CENTRADA, y los carruseles sangran a
   pantalla completa arrancando alineados a esa columna — así en un
   teléfono grande simplemente se ven MÁS carteles, no carteles enormes.

       --m-col : ancho de la columna de contenido (300px, Figma)
       --m-pad : borde izquierdo de esa columna (definido en nav.css)

   Pareja de hero-mobile.js (auto-avance + puntos del hero).
   ══════════════════════════════════════════════════════════════════════ */

/* Los puntos del carrusel sólo existen en móvil */
.hero-dots { display: none; }
/* El clon del logo dentro del cartel ya no se usa: en el diseño nuevo el
   19BICM vive en la cabecera, fuera del carrusel. */
.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) {

  /* ════════════════════════════════════════════════════════════════
     CABECERA — logo 19BICM (150×46) + FESTIVAL ARTE & CULTURA DE PAZ
     ════════════════════════════════════════════════════════════════ */
  .home-header { display: none; }          /* el logo BICM del header no va en el diseño móvil */

  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 0 0;
  }

  .hero-lapiz { display: none; }

  /* Las dos marcas dejan el posicionamiento absoluto del lienzo y pasan a
     una fila: 19BICM a la izquierda, FESTIVAL a su derecha (en el markup
     el orden es al revés, por eso el `order`). */
  /* align-items:center — las dos marcas no miden lo mismo de alto (47 y 45px),
     así que pegadas arriba quedaban disparejas. Centradas entre sí se ven
     parejas, y el conjunto va centrado sobre los carteles de abajo. */
  .hero-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-inline: var(--m-pad);
  }
  .hero-19bicm,
  .hero-festival {
    display: block;
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    height: auto;
    object-fit: contain;
  }
  .hero-19bicm { order: 1; flex: 0 0 150px; width: 150px; }
  .hero-festival { order: 2; flex: 0 1 140px; width: 140px; }

  /* ════════════════════════════════════════════════════════════════
     HERO — carteles 197×282, gap 10, sangrando a pantalla completa
     ════════════════════════════════════════════════════════════════ */
  .hero-gallery {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: var(--m-pad);
    padding-right: 20px;
    /* Sin esto el snap alinea el primer cartel con el borde del scroller y
       se "come" el padding: la tira arrancaría pegada al borde izquierdo. */
    scroll-padding-left: var(--m-pad);
  }
  .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 197px;
    width: 197px;
    height: 282px;
    scroll-snap-align: start;
  }

  /* ── Puntos ──────────────────────────────────────────────────────── */
  .hero-dots {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0 var(--m-pad);
  }
  .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 (96px en Figma) ────────────────────────────────── */
  .hero-bicm-text {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    margin: 6px 0 0 var(--m-pad);
    font-size: 96px;
    line-height: .92;
    letter-spacing: -0.055em;
    text-align: left;
  }

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

  /* ── Franjas negras del ticker ────────────────────────────────────
     Su alto y su tipografía van en unidades --u del lienzo de 1600, que en
     un móvil se encogen a ~15px de franja con texto de 6px: ilegible. Aquí
     pasan a px fijos (el doble de alto que antes). */
  .strip-black { height: 30px; }
  .t-text {
    font-size: 13px;
    letter-spacing: .06em;
  }
  .t-star {
    font-size: 13px;
    padding: 0 10px;
  }

  /* ════════════════════════════════════════════════════════════════
     LAS 4 SECCIONES PASAN A FLUJO VERTICAL
     ════════════════════════════════════════════════════════════════ */
  .quienes,
  .cartelera,
  .imprime,
  .alianzas {
    height: auto;
    min-height: 0;
    display: block;
    padding: 0 0 8px;
    overflow: hidden;              /* recorta los carruseles a sangre */
  }

  /* Estáticos: columna de 300px centrada */
  .quienes-title, .quienes-body, .quienes-img,
  .cart-title, .cart-desc,
  .imprime-title, .imprime-desc, .imprime-tagline, .btn-imprime,
  .aliados-title, .aliados-desc, .aliados-head {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto;
    max-width: none;
    margin-inline: var(--m-pad);
    text-align: left;
  }

  /* Tipografía del frame 8 */
  .quienes-title { font-size: 24px; line-height: 1; letter-spacing: -.01em; }
  .cart-title,
  .imprime-title,
  .aliados-title { font-size: 20px; line-height: 1; letter-spacing: -.01em; }

  .quienes-body,
  .cart-desc,
  .imprime-desc,
  .imprime-tagline,
  .aliados-desc { font-size: 14px; line-height: 1.25; }

  /* ── SOBRE NOSOTROS ──────────────────────────────────────────────── */
  .quienes { padding-top: 22px; }
  .quienes-body { margin-top: 14px; }
  .quienes-img {
    /* position:relative es OBLIGATORIO aquí. La regla de arriba pasa este
       bloque a position:static para sacarlo del lienzo absoluto de
       escritorio, pero las <img> de adentro son position:absolute;inset:0
       (ver front-page.php). Sin un ancestro posicionado se anclan al
       contenedor de bloque más cercano que sí lo esté, que es mucho más
       grande: el recuadro gris quedaba del tamaño correcto y las imágenes
       se salían por encima. */
    position: relative;
    width: 145px;
    height: 71px;
    margin-top: 24px;
  }
  .quienes-img img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

  /* ── EN CARTELERA MUNDIAL — tarjetas 197 de ancho ────────────────── */
  .cartelera { padding-top: 50px; }
  /* Las flechas son solo de escritorio: en móvil se desliza con el dedo */
  .cart-nav { display: none !important; }
  .cartelera-track {
    /* en escritorio el track va absolute dentro del lienzo; aquí vuelve a flujo */
    position: static;
    left: auto; top: auto; right: auto; bottom: auto;
    width: auto;
    display: flex;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: var(--m-pad);
    padding-right: 20px;
    scroll-padding-left: var(--m-pad);
  }
  .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 197px;
    width: 197px;
    height: auto;
    scroll-snap-align: start;
  }
  /* En escritorio TODO el interior de la tarjeta va en absolute contra la
     tarjeta; en móvil pasa a flujo o la tarjeta colapsaría a 0 de alto. */
  .sm-img, .sm-cat, .sm-title, .sm-desc, .sm-btn {
    position: static;
    top: auto; left: auto; right: auto; bottom: auto;
    width: 100%;
  }
  /* La categoría en móvil va en flujo, como etiqueta encima del título */
  .sm-cat {
    width: auto;
    align-self: flex-start;
    margin-top: 10px;
    font-size: 11px;
    padding: 4px 8px;
  }
  .sm-card { display: flex; flex-direction: column; align-items: flex-start; }
  .sm-img { width: 197px; height: 168px; }
  .sm-img img { width: 100%; height: 100%; object-fit: cover; }
  .sm-title {
    font-size: 24px; line-height: 1.2; margin-top: 12px;
    -webkit-line-clamp: 3;                 /* EN/otros idiomas pueden necesitar 3 líneas (ES cabía en 2) */
  }
  .sm-desc { font-size: 13px; line-height: 1.3; margin-top: 6px; }
  .sm-btn {
    display: inline-flex;
    width: auto;
    height: auto;
    margin-top: 12px;
    padding: 4px 14px;
    font-size: 13px;
  }

  /* ── IMPRIME CARTELES — carteles 145×207, marquesina infinita ──────
     En el frame 8 los carteles van ENTRE el título y la descripción; en el
     markup de escritorio la descripción va antes, así que se reordena. */
  .imprime {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
  }
  .imprime-title   { order: 1; }
  .imprime .carousel-wrap { order: 2; }
  .imprime-desc    { order: 3; }
  .imprime-tagline { order: 4; }
  .imprime .btn-imprime { order: 5; align-self: flex-start; }
  .carousel-wrap {
    position: static;
    left: auto; right: auto; top: auto;
    width: 100%;
    height: 207px;
    margin: 14px 0 0;
    padding-left: var(--m-pad);
    overflow: hidden;
  }
  .carousel-track {
    gap: 10px;
    /* 8 carteles × 145 + 8 huecos × 10 = 1240px */
    animation: carousel-scroll-m 34s linear infinite;
  }
  @keyframes carousel-scroll-m {
    from { transform: translateX(0); }
    to   { transform: translateX(-1240px); }
  }
  .poster-slot.poster-sm,
  .poster-slot.poster-lg {
    width: 145px;
    height: 207px;
  }
  .imprime-desc { margin-top: 20px; }
  .imprime-tagline { margin-top: 10px; }
  /* El alto de escritorio es calc(1.875*var(--u)); con el --u de móvil eso da
     ~8px y el texto de 13px se cortaba. Aquí manda el padding, no una altura
     fija. Queda en ~21px de alto y ~93px de ancho, como el frame 8. */
  .btn-imprime {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 0;
    margin-top: 16px;
    padding: 3px 16px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 2px;
  }

  /* ── ALIANZAS — carrusel de logos ─────────────────────────────────
     Ya NO gira solo: es un scroll horizontal que el usuario puede arrastrar
     y que avanza un logo cada 3s (hero-mobile / front-page JS). */
  .alianzas { padding-top: 44px; padding-bottom: 44px; }
  .aliados-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .aliados-title, .aliados-desc { margin-inline: 0; }

  .aliados-grid {
    display: flex;
    grid-template-columns: none;
    width: auto;
    gap: 20px;
    margin: 22px 0 0;
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    animation: none;
  }
  .aliados-grid::-webkit-scrollbar { display: none; }
  .aliados-grid > *:nth-child(5),
  .aliados-grid > *:nth-child(6) { grid-column: auto; }

  /* Ancho al contenido (con tope): con celdas de 310px fijos, un logo alto y
     angosto dejaba ~200px de blanco a cada lado y el hueco entre dos de esos
     (TISDC ↔ Refugio) se veía enorme. Así cada celda mide lo que mide su
     logo y la separación es pareja. */
  .ally-cell,
  .ally-cell--xl {
    flex: 0 0 auto;
    width: auto;
    min-width: 110px;
    max-width: 300px;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    scroll-snap-align: start;
  }
  .ally-cell .ally-name,
  .ally-cell .ally-sector,
  .ally-cell .ally-arrow { display: none; }

  .ally-cell .ally-mark,
  .ally-cell--xl .ally-mark {
    position: static;
    top: auto; left: auto;
    transform: none;
    width: auto;
    height: 92px;
  }
  .ally-cell .ally-mark img,
  .ally-cell--xl .ally-mark img {
    width: auto;
    height: 100%;
    max-width: 300px;
    object-fit: contain;
  }
  /* El logo del Museo Arocena es de proporción más alta que el resto, así que
     a la misma altura se veía bastante más grande. */
  .ally-cell[data-ally="arocena"] .ally-mark { height: 68px; }

  .ally-cell:hover .ally-mark,
  .ally-cell--xl:hover .ally-mark { transform: none; }

  /* ── 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: 14px;
    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: 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. */
  .lb-media-col { order: 1; flex: 0 0 auto; width: 100%; min-width: 0; height: 52vh; }
  .lb-meta { order: 2; }

  .lb-media {
    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: 24px; line-height: 1.1; }
  .lb-thanks { font-size: 14px; max-width: none; margin-top: 10px; }
  .lb-nav { display: none; }

  /* ════════════════════════════════════════════════════════════════
     PIE DE PÁGINA — frame 8
     ════════════════════════════════════════════════════════════════ */
  .footer-inner { padding: 24px var(--m-pad) 20px; }
  .footer-top { flex-direction: column; gap: 26px; }
  .footer-main-title { font-size: 20px; line-height: 1.2; }
  .footer-address { font-size: 16px; line-height: 1.35; margin-top: 14px; }
  .footer-right { align-items: flex-end; }
  .footer-contact-item { font-size: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-legal { flex-wrap: wrap; gap: 20px; }
  .footer-legal a { font-size: 10px; }
  .footer-copy { font-size: 10px; line-height: 1.5; }
}

/* Marquesina compartida (alianzas / patrocinadores). El contenido se duplica
   en JS y ahí mismo se mide el ancho EXACTO de un juego de celdas, que se
   escribe en --marquee-shift. No se usa -50% porque el padding izquierdo de
   la tira (que alinea con la columna de contenido) entra en el ancho total y
   desfasaría el bucle en pantallas anchas. */
@keyframes bicm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
  .aliados-grid,
  .carousel-track { animation: none !important; }
  .hero-gallery { scroll-behavior: auto; }
  .hero-dots button { transition: none; }
}