/* ===========================================================
   Sección "Noticias" (feed vertical inmersivo, estilo reels)
   Proyecto: PRY-041 AguAseo.

   Este archivo NO toca site/styles.css. Se carga DESPUÉS de styles.css
   (link en noticias.html) y reutiliza sus variables de marca (--azul,
   --azul-osc, --amarillo, --celeste, --linea, --gris) y sus componentes
   ya existentes (header/nav/footer/.top/.wrap), para que la sección se
   vea integrada al resto del sitio sin duplicar esas reglas.

   El carrusel de medios de cada noticia (.reel-carousel / .reel-track /
   .reel-slide / .reel-dots / .reel-arrow) REPLICA el patrón visual e
   interactivo del slider del boletín informativo de la home
   (site/styles.css .nlm-slider / .nlm-track / .nlm-slide / .nlm-dot /
   .nlm-arrow y site/assets/main.js goTo()/resizeSlider()/swipe) en vez
   de reutilizar esas clases o esa función de forma literal: el boletín
   es un slider DENTRO de un modal centrado, con alto variable calculado
   por JS y fondo blanco (pensado para láminas sueltas, no para medios a
   pantalla completa). El feed de noticias necesita slides de ALTO FIJO
   a pantalla completa con las fotos/video recortados con object-fit:
   cover, y varias instancias simultáneas en la misma página (una por
   noticia) en vez de una sola instancia global — por eso se generalizó
   la MISMA lógica de interacción (índice actual, flechas, puntos,
   swipe con el mismo umbral de 40px) en un componente nuevo con su
   propio CSS, sin tocar ni duplicar el modal del boletín, que sigue
   funcionando exactamente igual en la home. Ver DECISIONS.md. */

/* Franja de presentación de la sección (breve, encabeza la cuadrícula) */
.reel-intro{background:var(--suave);border-bottom:1px solid var(--linea);padding:22px 0}
.reel-intro .wrap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.reel-intro h1{font-size:22px;color:var(--azul-osc)}
.reel-intro p{color:var(--gris);font-size:14px;margin:0}

/* ===========================================================
   VISTA 1 — Cuadrícula (estilo perfil de Instagram), vista principal
   =========================================================== */
.reel-grid-section{padding:28px 0 64px}

/* Ancho máximo centrado: en pantallas grandes la cuadrícula NO ocupa
   todo el ancho de `.wrap` (1160px) — se acota a un ancho más angosto,
   como el contenedor del perfil de Instagram, para que las miniaturas no
   queden gigantes ni la fila se sienta perdida en una pantalla ancha.
   Reducido de 760px a 560px al pasar las miniaturas de 1:1 a 9:16 (pedido
   de Oscar, "tamaño de reels de Instagram"): con el ancho anterior cada
   columna medía ~251px y, al triplicarse el alto con la proporción
   vertical, la cuadrícula completa (2 filas para 5 noticias) llegaba a
   ~900px de alto solo de miniaturas. A 560px cada columna mide ~184px de
   ancho × ~327px de alto, y las 2 filas quedan en ~657px — sigue leyéndose
   como cuadrícula (no una columna angosta) pero sin forzar un scroll tan
   largo antes de llegar al pie de página. */
.reel-grid-shell{max-width:560px;margin-inline:auto}

.reel-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 por fila, también en móvil */
  gap:3px; /* separación mínima entre miniaturas, como Instagram */
}

.reel-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:9/16; /* miniatura vertical, formato "Reels" (pedido de Oscar) */
  padding:0;
  border:0;
  overflow:hidden;
  background:var(--suave);
  cursor:pointer;
}
/* La imagen SIEMPRE recortada centrada (object-fit:cover), nunca deformada
   — sea cual sea la proporción real del archivo de origen. */
.reel-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.reel-thumb:hover img{opacity:.9}
.reel-thumb:focus-visible{outline:3px solid var(--amarillo);outline-offset:-3px;z-index:2}

/* Indicador sobre la miniatura: varios medios (ícono de "capas") o video
   (ícono de reproducir) — sin él no se distingue una noticia con carrusel
   o video de una foto suelta, igual que en el perfil de Instagram. */
.reel-thumb-badge{
  position:absolute;top:7px;right:7px;
  width:16px;height:16px;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));
  pointer-events:none;
}
.reel-thumb-badge .svg{width:100%;height:100%;display:block}

@media(min-width:701px){
  .reel-thumb-badge{width:19px;height:19px;top:10px;right:10px}
}

/* ===========================================================
   VISTA 2 — Visor inmersivo (scroll-snap), abierto por JS sobre la
   cuadrícula. Oculto por defecto: `body.reel-viewer-open` lo muestra a
   pantalla completa y esconde el resto de la página (ver más abajo).
   =========================================================== */
.reel-feed{
  /* site/styles.css define `section{padding:80px 0}` de forma global (todas
     las secciones del sitio la usan) — `.reel-feed` es un <section>, así
     que se anula a propósito: el visor necesita ocupar el 100% del alto
     disponible, sin el respiro vertical que sí tiene el resto del sitio. */
  display:none;
  padding:0;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  background:var(--azul-osc);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.reel-feed::-webkit-scrollbar{display:none}
.reel-feed:focus-visible{outline:3px solid var(--amarillo);outline-offset:-3px}

/* Al abrir el visor: se muestra a pantalla completa y se oculta TODO lo
   demás (barra superior, header/nav, franja de presentación, cuadrícula,
   footer, WhatsApp flotante) — es la única vista visible mientras está
   abierto, así ocupa el 100dvh completo sin restarle nada a ningún otro
   elemento de la página. */
body.reel-viewer-open{overflow:hidden}
body.reel-viewer-open #reelChrome,
body.reel-viewer-open .reel-grid-section,
body.reel-viewer-open footer,
body.reel-viewer-open .wa{display:none}
body.reel-viewer-open .reel-feed{display:block}

/* Botón de cerrar el visor (X), fijo sobre el medio, siempre alcanzable
   sin importar en qué noticia/lámina esté el usuario. */
.reel-close{
  position:fixed;top:14px;right:14px;z-index:20;
  width:38px;height:38px;border-radius:50%;
  background:rgba(9,22,41,.55);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.reel-close:hover{background:rgba(9,22,41,.8)}
.reel-close:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.reel-close .svg{width:18px;height:18px}

.reel-item{
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:var(--azul-osc);
}

/* Columna de medios: móvil = a todo el ancho/alto de la pantalla (formato
   reel nativo); escritorio = columna vertical centrada, SIN estirar el
   video/foto a todo el ancho — el resto del espacio queda en el navy plano
   del sitio (sin degradado ni imagen), tratamiento sobrio a propósito. */
.reel-media{position:relative;width:100%;height:100%;overflow:hidden;background:#04162e}

@media(min-width:701px){
  .reel-item{padding:30px 0}
  .reel-media{
    width:auto;
    height:min(760px,86%);
    aspect-ratio:9/16;
    border-radius:18px;
    box-shadow:0 20px 48px rgba(4,14,28,.45);
  }
}

/* ============ Carrusel de medios (patrón replicado del boletín, adaptado) ============ *
 * Hoy ninguna de las 5 noticias reales lo necesita (una lámina = un solo
 * medio cada una), así que noticias.js no encuentra ningún [data-carousel]
 * y su init no hace nada — se deja el componente listo para el día que
 * una noticia real traiga varias fotos/videos. */
.reel-carousel{position:absolute;inset:0;overflow:hidden}
.reel-track{position:relative;width:100%;height:100%}
.reel-slide{position:absolute;inset:0;width:100%;height:100%;transition:transform .32s ease}
.reel-slide img,.reel-slide video{width:100%;height:100%;object-fit:cover;display:block;background:#04162e}

/* Medio único de una noticia (sin carrusel): la imagen o el video van
   directos dentro de `.reel-media`, a pantalla completa igual que un
   `.reel-slide`. `.reel-video-wrap` ya es genérico (no depende de estar
   dentro de un carrusel), así que solo hace falta esta regla para la
   imagen suelta. */
.reel-single-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#04162e}

.reel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(9,22,41,.5);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;
}
.reel-arrow:hover{background:rgba(9,22,41,.75)}
.reel-arrow:disabled{opacity:.32;cursor:default}
.reel-arrow .svg{width:17px;height:17px}
.reel-prev{left:10px}
.reel-next{right:10px}

.reel-dots{position:absolute;top:58px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}
/* box-shadow como contorno (no border, para no afectar el tamaño): sin él,
   un punto blanco translúcido se pierde casi por completo sobre fotos
   claras (cabinas blancas, cielo, etc.) — el contorno oscuro garantiza que
   se vea sobre cualquier foto o video, clara u oscura. */
.reel-dot{width:7px;height:7px;padding:0;border-radius:50%;background:rgba(255,255,255,.55);border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(6,16,32,.45)}
.reel-dot[aria-selected="true"]{background:var(--amarillo);width:9px;height:9px;box-shadow:0 0 0 1px rgba(6,16,32,.5)}

/* ============ Cabecera flotante de la noticia (marca + categoría) ============ *
 * `padding-right` reserva el espacio del botón de cerrar del visor
 * (`.reel-close`, fijo en la esquina superior derecha de la pantalla):
 * sin este margen, la etiqueta de categoría (empujada al extremo derecho
 * por `margin-left:auto` en `.reel-tag`) queda debajo del botón X en
 * móvil, donde `.reel-media` llega hasta el borde de la pantalla. */
.reel-topbar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:9px;z-index:3;padding-right:52px}
.reel-topbar img{width:26px;height:26px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex:none;display:block}
.reel-brand{color:#fff;font-weight:700;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.reel-tag{margin-left:auto;background:rgba(10,45,87,.75);color:var(--amarillo);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:999px;white-space:nowrap}

/* ============ Botón grande de reproducir (video, carga en el primer tap) ============ */
.reel-video-wrap{position:absolute;inset:0}
/* Tamaño del <video> cuando vive suelto dentro de `.reel-video-wrap` (sin
   carrusel) — sin esta regla el video se dibuja a su tamaño intrínseco
   (los atributos width/height del HTML, ahí solo para evitar layout
   shift) y desborda `.reel-media` verticalmente. */
.reel-video-wrap video{width:100%;height:100%;object-fit:cover;display:block;background:#04162e}
.reel-playbtn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(6,16,32,.22);border:0;cursor:pointer;z-index:2;padding:0}
.reel-playbtn .circle{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--azul-osc);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.reel-playbtn .svg{width:24px;height:24px;margin-left:3px}
.reel-playbtn[hidden]{display:none}

/* ============ Descripción (panel sólido con transparencia, NO degradado) ============ *
 * El título Y la descripción van SIEMPRE acotados a un número fijo de
 * líneas (line-clamp) — no solo cuando "se sabe" que el texto es largo.
 * Motivo: en escritorio la columna de medios es angosta (9:16, pensada
 * para no estirar el video a todo el ancho — ver .reel-media arriba), así
 * que incluso un título corto puede partirse en varias líneas ahí y
 * empujar el alto del panel hasta invadir el centro del medio (se detectó
 * con Playwright: el botón de reproducir quedaba tapado). Con el alto
 * acotado por líneas (no por texto ni por ancho de columna), el panel
 * nunca puede crecer más allá de un tope previsible, así que el botón de
 * play (que ocupa el resto del medio) queda siempre libre. El botón
 * "Ver más" solo se muestra si noticias.js detecta en tiempo real que el
 * texto realmente se recortó (scrollHeight > clientHeight) — no se decide
 * al redactar el contenido. */
.reel-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 16px 20px;background:rgba(10,45,87,.82)}
.reel-date{display:block;font-size:11.5px;color:#cfe0f2;font-weight:600;letter-spacing:.03em;margin-bottom:6px}
.reel-caption h2{font-size:18px;line-height:1.28;color:#fff;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-desc{font-size:13.5px;line-height:1.5;color:#e7eefb;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Estado expandido ("Ver más"): se acota a un alto máximo con scroll
   propio — crece, pero nunca hasta tapar el medio por completo. */
.reel-desc.expanded{display:block;-webkit-line-clamp:unset;overflow-y:auto;max-height:34vh}
.reel-more-btn{display:none;margin-top:8px;background:none;border:0;padding:0;color:var(--amarillo);font-weight:700;font-size:12.5px;cursor:pointer}
.reel-more-btn.is-needed{display:inline-block}
.reel-more-btn:hover,.reel-more-btn:focus-visible{text-decoration:underline}

/* Botón de acción de la lámina (enlace al flipbook / descarga del PDF),
   igual que `.nlm-actions` del boletín pero dentro del panel de
   descripción del visor en vez de debajo del slide. Usa las clases
   `.btn`/`.btn-amarillo` de site/styles.css (ya cargado por esta
   página) — se agregan solo el tamaño y la separación. */
.reel-cta{display:inline-flex;margin-top:10px;padding:10px 20px;font-size:13.5px}

@media(min-width:701px){
  .reel-caption{padding:18px 20px 22px}
  .reel-caption h2{font-size:19px}
}

/* ===========================================================
   Noticias tipo "panel" (láminas 4 y 5 del boletín: folleto tríptico
   horizontal 1800×1391) — ver la nota larga en noticias.html sobre por
   qué NO usan el patrón foto+caption de las otras 3 noticias: esa imagen
   horizontal se vería diminuta en la columna vertical angosta del
   visor (9:16), en escritorio igual que en móvil. En vez de eso, mismo
   criterio de tarjetas legibles que ya usa el modal del boletín en su
   versión móvil (site/styles.css .nlm-fcard y compañía), adaptado a un
   panel claro con scroll propio dentro del marco del visor.
   =========================================================== */
.reel-media--panel{display:flex;flex-direction:column;background:#fff}

/* La cabecera de marca (logo+"AguAseo"+etiqueta) deja de flotar sobre una
   foto oscura (ya no hay foto) y pasa a ser una barra sólida, en flujo
   normal, arriba del panel. */
.reel-media--panel .reel-topbar{position:static;flex:none;background:var(--azul-osc);padding:14px 16px;padding-right:52px}
.reel-media--panel .reel-brand{text-shadow:none}

.reel-panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}

.reel-panel-head{margin-bottom:14px}
.reel-panel-head .reel-date{color:var(--gris);margin-bottom:4px}
/* :not(...) para no pisar el blanco de `.reel-panel-brandtit` (lámina 5,
   más abajo): sin él, este h2 sobre fondo claro tiene MÁS especificidad
   (clase + etiqueta) que la clase sola del título de marca y lo dejaba
   en azul oscuro sobre fondo navy — casi invisible. Bug real detectado
   con Playwright, ya corregido. */
.reel-panel-head:not(.reel-panel-head--brand) h2{font-size:17.5px;line-height:1.3;color:var(--azul-osc);margin:2px 0 8px}
.reel-panel-intro{margin:0;font-size:13.5px;line-height:1.5;color:var(--tinta)}

/* Cabecera "de marca" (lámina 5): mismo tratamiento navy+amarillo que
   `.nlm-fhead` en el boletín, en vez del título azul plano de arriba —
   esta lámina es la portada del folleto, con su propia identidad. */
.reel-panel-head--brand{background:var(--folleto-navy);color:#fff;padding:16px;border-radius:10px;text-align:center}
.reel-panel-brandtit{margin:0;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.3}
.reel-panel-brandtit em{color:var(--folleto-amarillo);font-style:normal}
.reel-panel-brandsub{margin-top:6px;font-size:13px;font-weight:600}
.reel-panel-brandsub em{color:var(--folleto-amarillo);font-style:normal}
.reel-panel-head--brand .reel-date{color:#cfe0f2;margin-top:8px;margin-bottom:0}

/* Tarjetas de beneficios — mismo texto e íconos que `.nlm-fcard` del
   boletín (reutiliza los íconos desde site/assets/img/folleto/, sin
   duplicarlos), con su propia clase porque viven en un panel más angosto
   que el del modal. */
.reel-fcards{display:flex;flex-direction:column;gap:10px}
.reel-fcard{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:10px;background:var(--suave);border:1px solid var(--linea)}
.reel-ficon{width:40px;height:40px;flex:none;object-fit:contain}
.reel-ftit{color:var(--folleto-navy);font-size:13px;font-weight:800;line-height:1.3;text-transform:uppercase;margin-bottom:3px}
.reel-ftxt{color:var(--tinta);font-size:12.5px;line-height:1.45}
.reel-ftxt strong{font-size:14px;font-weight:800;color:var(--folleto-navy)}
.reel-fcard--navy{background:var(--folleto-navy);border-color:var(--folleto-navy)}
.reel-fcard--navy .reel-ftit{color:var(--folleto-amarillo)}
.reel-fcard--navy .reel-ftxt,.reel-fcard--navy .reel-ftxt strong{color:#fff}

.reel-panel-quote{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--suave);color:var(--folleto-navy);font-style:italic;font-size:13px;line-height:1.5;text-align:center}
.reel-panel-quote strong{font-size:14.5px}
.reel-panel-quote em{color:var(--folleto-verde);font-style:italic}

/* Botones fijos al pie del panel (siempre visibles, no se pierden al
   hacer scroll entre las tarjetas). */
.reel-panel-actions{flex:none;display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--linea);background:#fff}
.reel-panel-btn{flex:1 1 0;justify-content:center;padding:10px 8px;font-size:12.5px;text-align:center}

@media(min-width:701px){
  .reel-panel-head h2{font-size:18.5px}
}

/* Recorte visible en pantallas muy angostas (~360px y menos): reduce paddings */
@media(max-width:380px){
  .reel-caption{padding:13px 13px 16px}
  .reel-caption h2{font-size:16.5px}
  .reel-desc{font-size:13px}
}

/* ============ Botón flotante de WhatsApp (global del sitio) ============ *
 * `.wa` (site/styles.css) queda fijo en la esquina inferior derecha en
 * TODAS las páginas. En la cuadrícula no hace falta tocarlo: es una
 * página normal con márgenes, igual que el resto del sitio. Dentro del
 * visor SÍ se oculta (ver `body.reel-viewer-open .wa{display:none}` más
 * arriba) porque ahí el medio llega hasta el borde de la pantalla en
 * móvil y el botón quedaría encima del panel de descripción — el visor
 * ya tiene su propio botón de cerrar, así que ocultarlo no le quita
 * ninguna función al usuario mientras está abierto. */