.noticia-hero-media { background-image: radial-gradient(ellipse at 70% 20%, rgba(214,172,102,0.3), transparent 55%), linear-gradient(155deg, #232c3a 0%, #141922 55%, #0b0e13 100%); }

  .n-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; margin-top: 28px; }
  .n-thumb { position: relative; aspect-ratio: 4/3; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
  .n-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
  .n-thumb:hover img { transform: scale(1.06); }
  .foto-lightbox { position: fixed; inset: 0; background: rgba(8,10,13,0.96); display: none; align-items: center; justify-content: center; z-index: 100; flex-direction: column; gap: 14px; }
  .foto-lightbox.open { display: flex; }
  .foto-lightbox-media { width: min(90vw, 1100px); max-height: 80vh; display: flex; align-items: center; justify-content: center; }
  .foto-lightbox-media img { max-width: 100%; max-height: 80vh; box-shadow: var(--shadow); cursor: zoom-in; }
  /* Zoom por click: la foto pasa a su tamaño real (puede superar la pantalla),
     el contenedor se vuelve scrolleable para recorrerla. align-items/justify-
     content pasan a flex-start porque un contenido más grande que un flex box
     centrado deja "fantasma" de scroll repartido a ambos lados, difícil de
     recorrer hasta el borde; anclado arriba-izquierda se comporta como
     cualquier scroll normal. */
  .foto-lightbox-media.zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
  /* cursor "mano" en vez de "zoom-out": una vez ampliada, el gesto principal
     es arrastrar para recorrerla (mouse, ver GALERIA_JS), no volver a hacer
     zoom-out; eso sigue siendo posible con un click que no arrastró, pero ya
     no es lo que el cursor debería sugerir primero. user-select/user-drag en
     "none" evitan que el navegador arme su propio arrastre nativo de imagen
     (el ícono fantasma con "prohibido") o seleccione texto por accidente
     mientras se arrastra con el mouse. */
  .foto-lightbox-media.zoomed img { max-width: none; max-height: none; cursor: grab; -webkit-user-drag: none; user-select: none; }
  .foto-lightbox-close { position: absolute; top: 18px; right: 24px; background: none; border: 0; color: #f3f1ea; font-size: 1.6rem; cursor: pointer; }
  .foto-lightbox-nav { background: none; border: 0; color: #f3f1ea; cursor: pointer; padding: 12px; display: flex; align-items: center; justify-content: center; }
  /* flecha dibujada en CSS (dos bordes en escuadra, rotados), no un carácter
     de fuente ("←"/"→"): el glifo de flecha de una fuente no siempre queda
     centrado en su propia caja de avance, dependiendo de la fuente. Un borde
     dibujado sí queda exactamente donde se lo puso, sin depender de eso. */
  .foto-lightbox-nav .chevron { width: 10px; height: 10px; border-style: solid; border-color: currentColor; border-width: 0 2.5px 2.5px 0; display: block; }
  .foto-lightbox-nav--prev .chevron { transform: rotate(135deg); margin-left: 3px; }
  .foto-lightbox-nav--next .chevron { transform: rotate(-45deg); margin-right: 3px; }
  .foto-lightbox-row { display: flex; align-items: center; gap: 18px; }
  .foto-lightbox-caption { color: #f3f1ea; font-size: 0.95rem; margin: 0; max-width: min(90vw, 700px); text-align: center; }
  .foto-lightbox-count { color: #cfd3d6; font-size: 0.85rem; margin: 0; }
  /* en fila, flecha + foto + flecha se pasan del ancho de pantalla en celular
     (90vw de foto + dos flechas no entran en 100vw). En vez de afinar a mano
     cuánto achicar la foto, las flechas pasan a superponerse sobre la foto
     (posición absoluta), que es como se resuelve esto habitualmente: dejan de
     sumar ancho a la fila en vez de competir por el espacio. */
  @media (max-width: 860px) {
    .foto-lightbox-row { position: relative; width: 100%; justify-content: center; }
    .foto-lightbox-media { width: 100vw; }
    .foto-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; background: rgba(8,10,13,0.55); border-radius: 50%; width: 40px; height: 40px; padding: 0; }
    #lightboxPrev { left: 6px; }
    #lightboxNext { right: 6px; }
  }


  .n-video-main video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
  .n-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .n-video-titulo { color: var(--ink-soft); font-size: 0.95rem; font-weight: 600; margin: 10px 0 0; }