/* Ajustes que van DESPUES de las hojas del legado.
   Estaban en voz.css, que Next inyecta ANTES de nuestros <link>: por eso las
   reglas del legado ganaban y estos arreglos nunca se aplicaban (la firma
   seguia partiendose porque grid-column quedaba en auto). */
/* Ajustes sobre la hoja del legado: lo que su CSS no cubre porque en su sitio
   lo resuelve el CMS (margenes entre parrafos, alto de la imagen principal y
   la caja gris de la lateral). Va despues de sus hojas, por eso gana. */
.c-detail__body .paragraph { margin: 0 0 30px; }
/* El apano de .c-detail__author__title (flex con gap 10 y align baseline) ya
   no hace falta: existia porque no dibujabamos la miniatura y el titulo caia
   en la columna de 40 px de su grilla, partiendo la firma letra a letra. Ahora
   emitimos su estructura completa —el envoltorio de la miniatura incluido— y
   su hoja resuelve la maqueta sola. Manteniendolo, el gap de 10 px empujaba la
   fecha 10 px a la derecha y bajaba la firma a 75 px de alto (El legado da 72).
   La columna de la miniatura se sostiene aunque el autor no tenga foto. */
/* 50 px medidos en el legado (su avatar es image_square_xs a 50x50). Con 40
   el texto de la firma arrancaba 10 px antes que en el original. */
.c-detail__author__thumb { width: 50px; }
/* Los intertitulos ya salen como h2.subtitle y los maqueta la hoja del legado. */
.c-detail__media__thumb { aspect-ratio: 3 / 2; overflow: hidden; }
.c-detail__media__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* La lateral usa ahora el marcado c-list__* del legado; su hoja la resuelve. */
.o-list--article .c-article__thumb { display: block; aspect-ratio: 260 / 172; overflow: hidden; }
.o-list--article .c-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Sin el media query esto ganaba en TODO ancho de pantalla (esta hoja carga
   despues de la del legado): en movil forzaba la grilla de 3 columnas del hub
   y del bloque de Recomendaciones, encogiendo el contenido a 2/3 del ancho en
   vez de apilarse a ancho completo como en el legado, que solo mete esta
   grilla desde 992px (mismo corte que su propia hoja). Regresion del 18-sep,
   reportada por Alex viendo el hub de Hispanos en el celular. */
@media (min-width: 992px) {
  .u-grid-columns-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* Bloque de temas al final del cuerpo ("En: Hispanos, Economía…"). */
/* Los tags usan el marcado c-detail__tags del legado; sin reglas propias. */
.c-detail__author.full { margin-bottom: 30px; }

/* Barra de compartir: en el legado empieza 10 px despues de la bajada y mide
   41 de alto. La nuestra tenia 16 de margen y 14 de relleno (54 de alto), y
   ese exceso corria 24 px todo lo que venia debajo: imagen, firma y cuerpo. */
/* La barra de compartir usa ya nav.c-detail__share + a.c-icon del legado. */

/* ---------------------------------------------------------------------------
   Proporción fija de las fotos de tarjeta (hub de tema)

   El legado sirve un recorte YA HECHO por cada tarjeta: 485x323 (3:2) en las
   grandes y 140x140 (1:1) en las laterales. Como su CSS deja `img { height:
   auto }`, el alto de cada foto sale de la proporción del archivo — y al
   servir todas iguales, todas las tarjetas miden lo mismo.

   Nosotros servimos el original, que viene en proporciones distintas (16:9 casi
   siempre), así que con `height: auto` cada tarjeta quedaba de un alto
   distinto: 217 px donde el legado da 258. Fijamos la caja y recortamos, que
   es exactamente el resultado del legado.
   --------------------------------------------------------------------------- */

.o-listing--secondary .c-article:not(.c-article--lateral) .c-article__thumb img {
  aspect-ratio: 485 / 323;
}

.o-listing--secondary .c-article--lateral .c-article__thumb img {
  aspect-ratio: 1 / 1;
}

/* El enlace que envuelve la foto es nuestro (El legado no enlaza la imagen).
   Sin esto queda `display: inline` y no contiene la caja de la foto. */
.o-listing--secondary .c-article__thumb > .page-link {
  display: block;
}

/* ---------------------------------------------------------------------------
   Bloques del cuerpo dentro del envoltorio del editor (.payload-richtext)

   El legado pone los bloques como hijos DIRECTOS de .c-detail__body y sus
   margenes salen de reglas con ">"; los nuestros van dentro del envoltorio
   que emite el editor, asi que esas reglas no los alcanzan. Medido sobre el
   articulo 38407: h2.subtitle m:0/5, .c-detail__box m:0/30, y el texto del
   despiece SIN el margen de 30 que le da .paragraph (El legado lo deja en 0).
   --------------------------------------------------------------------------- */
/* !important porque la regla del legado sobre hijos directos del cuerpo
   (`.c-detail__body > :not(:last-child):not(h2)...`) tiene nueve :not() y gana
   a cualquier selector normal. Y su :last-child deja SIN margen al ultimo
   bloque del cuerpo (salvo el despiece, que conserva sus 20): se replica sobre
   el ultimo hijo del envoltorio. Sin esto, los articulos que terminan en
   parrafo separaban los tags 60 px en vez de 30. */
.c-detail__body > .payload-richtext { margin-bottom: 0 !important; }
.payload-richtext > :last-child:not(.c-detail__despiece) { margin-bottom: 0 !important; }
.payload-richtext h2.subtitle { margin-bottom: 5px; }
.payload-richtext .c-detail__box { margin-bottom: 30px; }
.c-detail__despiece .paragraph { margin-bottom: 0; }

/* La relacionada lleva un recorte cuadrado (related_image, 140x140); nosotros
   servimos la portada 3:2 y hay que recortarla para llenar la caja. */
.c-detail__sumario__thumb img { width: 140px; height: 140px; object-fit: cover; }

/* En el hub el leaderboard lleva 20 px de margen (inline en el legado), no 30. */
.free-html .voz-ad--banner { margin-bottom: 20px; }

/* Hamburguesa: el legado la hace con un <button>, que centra su contenido en
   los 40 px de alto; la barra queda en y=85 (83 con su margen de -2). La
   nuestra es <details>/<summary>, que no centra: la barra salia en y=65, 20 px
   mas arriba que los iconos de la fila. Medido a 1280, 1440 y 1920. */
.c-header__nav-btn > summary.hamburger-box { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   El <style> en línea de TODAS las páginas del legado (medido 19-oct-2026 en
   la home, una nota y una sección: el mismo bloque, puesto desde su CMS). Sus
   hojas descargadas no lo traen, y en la portada espejo (bloques `El legado`) se
   notaba: en móvil los módulos de JW iban pegados, sin los 20 px que separan
   cada embed. Se copian las reglas públicas; las del editor del legado
   (body.wf-editor) y las de su modal no tienen marcado aquí.
   --------------------------------------------------------------------------- */
.c-article--visual.size-4 { padding-bottom: 30px; }
@media (max-width: 991px) {
  .o-container-grid .o-container-module .embed { margin: 0 0 20px 0; }
}
.c-article--opinion:not(.c-article--reverse) > .c-article__txt:first-child { padding-top: 43px; }
.c-article--opinion > .c-article__txt:first-child .c-article__info__content { left: 0; }
.c-article--opinion.c-article--reverse > .c-article__txt:first-child .c-article__info__content { position: relative; bottom: 0; left: 0; margin-top: 20px; order: 5; }
@media (min-width: 768px) {
  .c-article--opinion:not(.c-article--reverse) > .c-article__txt:first-child .c-article__info__content { left: 20px; }
}

/* ---------------------------------------------------------------------------
   Portada «como el legado»: el alto de la imagen de la tarjeta y las filas libres

   22-oct-2026, Alejandro: «agregar soporte para encoger verticalmente como el
   que tenemos horizontalmente». El asa de abajo de la tarjeta (lienzo) recorta
   la foto más baja: voz-alto-* sale del campo estilo.alto (lib/portada/bloques.mjs,
   clasesDe). El legado no tiene estas clases: lo que copia el sync no cambia.

   Y achicar una tarjeta ya no tira abajo a sus vecinas: dos tercios que pasa a
   mitad sigue al lado de su columna de un tercio, en una grilla de 6 (o de 12,
   con un cuarto). La hoja del legado las define desde 992px con 1fr; como la de
   3 de arriba, con minmax(0, 1fr) para que un contenido ancho no las desborde.
   --------------------------------------------------------------------------- */
/* El recorte de la tarjeta (campo estilo.recorte: Normal, Vertical, Apaisado). En el legado el recorte
   viene en la URL de la foto (image_414_276, image_414_435, image_414_205): su CMS la vuelve a pedir.
   Acá la foto es la misma, así que la clase sola no cambiaba nada (27-oct-2026, Alejandro: «Apaisado
   debe cambiar el tamaño de la foto y ponerla en apaisado. Las otras opciones tampoco andan»). La
   recortamos con su proporción; el alto del asa (voz-alto-*, abajo) y una tarjeta que llena su celda
   (.voz-llena) mandan sobre esto. La lateral queda como viene: su foto es la chica del costado. */
.c-article.normal:not(.c-article--lateral):not([class*="voz-alto-"]) .c-article__thumb img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.c-article.vertical:not(.c-article--lateral):not([class*="voz-alto-"]) .c-article__thumb img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.c-article.apaisado:not(.c-article--lateral):not([class*="voz-alto-"]) .c-article__thumb img { aspect-ratio: 2 / 1; height: auto; object-fit: cover; }
.c-article.voz-alto-16x9 .c-article__thumb img { aspect-ratio: 16 / 9; height: auto; }
.c-article.voz-alto-2x1 .c-article__thumb img { aspect-ratio: 2 / 1; height: auto; }
.c-article.voz-alto-3x1 .c-article__thumb img { aspect-ratio: 3 / 1; height: auto; }
@media (min-width: 992px) {
  main.content .u-grid-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  main.content .u-grid-columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Las celdas (22-oct-2026, Alejandro: «si hay una fila 1x1 y agrando a 2x1 debe crear nuevos espacios a la
   derecha … si encojo el primero de 2x1 a 1x1 debe dejar abajo un espacio de 1x1»; lib/portada/celdas.mjs).
   En una fila con celdas (.voz-celdas: una tarjeta de 2 o 3 de alto, o un espacio libre) cada tarjeta va
   arriba en su columna y lo que sobra queda libre al pie, donde el lienzo deja soltar; la de 2 o 3 de alto
   llena su columna y su foto crece con ella. Una celda es una tarjeta «como viene»: la foto de 3:2 (66,67%
   del ancho de la columna) y el texto con su margen (185px). El espacio libre (.voz-espacio) guarda su lugar
   y no se ve. Desde 992px: en el celular la grilla es de una columna, todo va como viene y el espacio libre
   no deja hueco. */
.voz-espacio { display: none; }
@media (min-width: 992px) {
  main.content .u-grid.voz-celdas > * { container-type: inline-size; }
  main.content .u-grid.voz-celdas > * > .o-container-module { flex-grow: 0; }
  main.content .u-grid.voz-celdas > * > .o-container-module:has(> .voz-alto-x2, > .voz-alto-x3) { flex-grow: 1; }
  main.content .u-grid.voz-celdas .c-article.voz-alto-x2,
  main.content .u-grid.voz-celdas .c-article.voz-alto-x3 { flex: 1 1 auto; display: flex; flex-direction: column; }
  main.content .u-grid.voz-celdas .c-article.voz-alto-x2 .c-article__thumb,
  main.content .u-grid.voz-celdas .c-article.voz-alto-x3 .c-article__thumb { position: relative; flex: 1 1 auto; }
  main.content .u-grid.voz-celdas .c-article.voz-alto-x2 .c-article__thumb { min-height: calc(133.33cqw + 185px); }
  main.content .u-grid.voz-celdas .c-article.voz-alto-x3 .c-article__thumb { min-height: calc(200cqw + 370px); }
  main.content .u-grid.voz-celdas .c-article.voz-alto-x2 .c-article__thumb img,
  main.content .u-grid.voz-celdas .c-article.voz-alto-x3 .c-article__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* El icono de video (y galería, audio…) del legado pone el <picture> en position: relative; con la foto absoluta
     adentro, el <picture> mide 0 de alto y la foto queda en blanco (28-oct-2026). El <picture> llena la figura. */
  main.content .u-grid.voz-celdas .c-article.voz-alto-x2 .c-article__thumb picture,
  main.content .u-grid.voz-celdas .c-article.voz-alto-x3 .c-article__thumb picture { position: absolute; inset: 0; display: block; }
  main.content .voz-espacio { display: flex; }
  main.content .voz-espacio__caja { min-height: calc(var(--voz-celdas, 1) * (66.67cqw + 185px) - 20px); }
  /* En el lienzo (el rótulo solo lo escribe el preview del admin, BloquesGrilla). */
  main.content .voz-espacio__caja:has(> p) { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(0, 114, 184, 0.55); border-radius: 4px; background: rgba(0, 114, 184, 0.04); }
  main.content .voz-espacio__caja > p { margin: 0; padding: 12px; color: #0072b8; font: 600 13px/1.4 system-ui, sans-serif; text-align: center; }
}

/* El directo en la portada (bloque `directo`, 22-oct-2026): la tarjeta del legado con la marca de su estado
   en rojo (con su punto que late mientras está en vivo) y sus últimas entradas, con la hora, en la lista
   de relacionadas de la tarjeta. */
.c-article.voz-directo .c-article__epigraph { color: #e20613; font-weight: 700; }
.c-article.voz-directo--en-vivo .c-article__epigraph::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e20613;
  margin-right: 6px; vertical-align: 1px; animation: voz-directo-late 1.6s ease-in-out infinite;
}
@keyframes voz-directo-late { 50% { opacity: 0.25; } }
.c-article.voz-directo .voz-directo__hora { color: #e20613; font-weight: 700; margin-right: 4px; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   La grilla de celdas (22-oct-2026, Alejandro: «the grid should be a full grid
   of 1x1 for all the page» — «Si algo similar al bootstrap, ojo que tiene que
   ser responsivo»; lib/portada/grilla.mjs, lib/portada/bloques.mjs htmlDeGrilla).
   Desde 992 px: 12 columnas y cada pieza en su lugar (--c, --w, --f, --h). Las
   filas miden lo que su pieza más alta («El alto de la fila dependerá del objeto
   más alto de la fila»): una pieza mide lo suyo —la tarjeta, su foto con la
   proporción de su recorte— o su alto en píxeles (--a), y las más bajas se
   alinean en su fila arriba, al centro o abajo (--al); la que ocupa varias filas
   las llena sin agrandarlas (contain: size: su contenido no cuenta para el alto de las filas, #586); la foto de una tarjeta que llena su lugar (varias filas, o un alto
   en píxeles: .voz-llena) se recorta para llenarlo. Una tarjeta lateral (la foto
   chica al lado del título, c-article--lateral) va de costado como en la hoja del
   legado: la grilla apila solo las demás (apilada, quedaban blancos al lado de la
   foto y del título). Las tarjetas van en su caja
   sin React (.voz-tarjetas, display: contents) y los bloques nuestros —hero,
   destacados, franjas, anuncio— al lado, como piezas (.voz-pieza); --o es su
   lugar en el orden de lectura. Cada fila son dos medias filas de la grilla CSS
   (--rf, --rh: grilla.mjs, pistasDe): una pieza chica apilada bajo o sobre una
   grande de su columna ocupa solo su media y la grande el resto, así cada columna
   maneja sus altos sin mover la de al lado. Una fila vacía no deja lugar en el sitio; en el
   lienzo queda del alto de --voz-vacia, para soltar ahí. En tablet: la misma
   grilla en orden de lectura, las piezas chicas de a dos por fila (--wt). En el
   celular: una columna, en orden de lectura.
   --------------------------------------------------------------------------- */
main.content .voz-grilla { display: flex; flex-direction: column; gap: 20px; }
main.content .voz-tarjetas { display: contents; }
main.content .voz-grilla > :not(.voz-tarjetas), main.content .voz-tarjetas > * { min-width: 0; order: var(--o, 0); }
main.content .voz-pieza > :first-child { margin-top: 0; }
main.content .voz-pieza > :last-child { margin-bottom: 0; }
/* En el lienzo, un bloque nuestro que no pinta nada (una franja sin sección ni notas) se ve y se puede tomar. */
html.voz-editando main.content .voz-pieza:empty::before { content: attr(data-voz-vacio); display: block; padding: 24px 12px; border: 1px dashed #0072b8; border-radius: 4px; color: #0072b8; font: 600 13px/1.4 system-ui, sans-serif; text-align: center; }
@media (min-width: 768px) {
  main.content .voz-grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  main.content .voz-grilla > :not(.voz-tarjetas), main.content .voz-tarjetas > * { grid-column: span var(--wt, 12); }
  html.voz-editando main.content .voz-grilla { --voz-vacia: 140px; }
}
@media (min-width: 992px) {
  main.content .o-container:has(> .voz-grilla) { container-type: inline-size; }
  main.content .voz-grilla { --voz-celda: calc((100cqw - 40px) / 3 * 0.5625 + 140px); grid-template-rows: var(--voz-filas); }
  main.content .voz-grilla > :not(.voz-tarjetas), main.content .voz-tarjetas > * { grid-column: var(--c) / span var(--w); grid-row: var(--rf) / span var(--rh); min-height: 0; align-self: var(--al, start); height: var(--a, auto); }
  main.content :is(.voz-grilla, .voz-tarjetas) > [style*="--a:"] { overflow: hidden; }
  main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena { contain: size; overflow: hidden; }
  main.content :is(.voz-grilla, .voz-tarjetas) > .o-container-module { display: flex; flex-direction: column; padding: 0; }
  main.content .voz-grilla .c-article { flex: 1 1 auto; display: flex; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
  main.content .voz-grilla .c-article:not(.c-article--lateral) { flex-direction: column; }
  main.content .voz-grilla .c-article:not(.c-article--lateral) > .c-article__thumb { margin: 0; }
  main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena .c-article:not(.c-article--lateral) > .c-article__thumb { flex: 1 1 auto; aspect-ratio: 3 / 2; position: relative; min-height: 60px; }
  main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena .c-article:not(.c-article--lateral) > .c-article__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena .c-article:not(.c-article--lateral) > .c-article__thumb picture { position: absolute; inset: 0; display: block; }
}
/* En el lienzo (el editor prendido sobre la vista previa, html.voz-editando): las piezas en su lugar desde 768 px,
   aunque el panel de la vista previa sea más angosto que un escritorio, para poder tocar las celdas. Con el editor
   apagado se ve como en una tablet. */
@media (min-width: 768px) and (max-width: 991.98px) {
  html.voz-editando main.content .o-container:has(> .voz-grilla) { container-type: inline-size; }
  html.voz-editando main.content .voz-grilla { --voz-celda: calc((100cqw - 40px) / 3 * 0.5625 + 140px); grid-template-rows: var(--voz-filas); }
  html.voz-editando main.content .voz-grilla > :not(.voz-tarjetas), html.voz-editando main.content .voz-tarjetas > * { grid-column: var(--c) / span var(--w); grid-row: var(--rf) / span var(--rh); min-height: 0; align-self: var(--al, start); height: var(--a, auto); }
  html.voz-editando main.content :is(.voz-grilla, .voz-tarjetas) > [style*="--a:"] { overflow: hidden; }
  html.voz-editando main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena { contain: size; overflow: hidden; }
  html.voz-editando main.content :is(.voz-grilla, .voz-tarjetas) > .o-container-module { display: flex; flex-direction: column; padding: 0; }
  html.voz-editando main.content .voz-grilla .c-article { flex: 1 1 auto; display: flex; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
  html.voz-editando main.content .voz-grilla .c-article:not(.c-article--lateral) { flex-direction: column; }
  html.voz-editando main.content .voz-grilla .c-article:not(.c-article--lateral) > .c-article__thumb { margin: 0; }
  html.voz-editando main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena .c-article:not(.c-article--lateral) > .c-article__thumb { flex: 1 1 auto; aspect-ratio: 3 / 2; position: relative; min-height: 60px; }
  html.voz-editando main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena .c-article:not(.c-article--lateral) > .c-article__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  html.voz-editando main.content :is(.voz-grilla, .voz-tarjetas) > .voz-llena .c-article:not(.c-article--lateral) > .c-article__thumb picture { position: absolute; inset: 0; display: block; }
}

/* El bloque Breaking (27-oct-2026, el bloque 347 del legado): etiqueta, titular en mayúsculas y la ✕ que lo cierra. */
.voz-breaking { display: flex; align-items: stretch; gap: 0; width: 100%; background: #0b2341; color: #fff; font-family: inherit; overflow: hidden; }
.voz-breaking--rojo { background: #c8102e; }
.voz-breaking--negro { background: #111; }
.voz-breaking--gris { background: #4a4f55; }
.voz-breaking__etiqueta { flex: none; display: flex; align-items: center; padding: 10px 16px; background: #e10600; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.voz-breaking--etiqueta-azul .voz-breaking__etiqueta { background: #0072b8; }
.voz-breaking--etiqueta-negro .voz-breaking__etiqueta { background: #000; }
.voz-breaking--etiqueta-blanco .voz-breaking__etiqueta { background: #fff; color: #0b2341; }
.voz-breaking__texto { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px 16px; overflow: hidden; }
.voz-breaking__texto p { margin: 0; font-weight: 800; font-size: 17px; line-height: 1.25; text-transform: uppercase; }
.voz-breaking__titular { color: inherit; text-decoration: none; }
a.voz-breaking__titular:hover { text-decoration: underline; }
.voz-breaking__x { flex: none; display: flex; align-items: center; padding: 0 16px; font-size: 20px; cursor: pointer; user-select: none; }
.voz-breaking__cerrado:checked + .voz-breaking { display: none; }
.voz-breaking--parpadeo .voz-breaking__etiqueta { animation: voz-breaking-parpadeo 1.2s ease-in-out infinite; }
@keyframes voz-breaking-parpadeo { 50% { opacity: .35; } }
.voz-breaking--carrusel .voz-breaking__texto { height: calc(1.25em * 2 + 20px); font-size: 17px; }
.voz-breaking__carrusel { position: relative; width: 100%; height: 100%; }
.voz-breaking__carrusel p { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; animation: voz-breaking-pasa-5 25s linear infinite; }
.voz-breaking__carrusel p:nth-child(2) { animation-delay: 5s; }
.voz-breaking__carrusel p:nth-child(3) { animation-delay: 10s; }
.voz-breaking__carrusel p:nth-child(4) { animation-delay: 15s; }
.voz-breaking__carrusel p:nth-child(5) { animation-delay: 20s; }
.voz-breaking__carrusel p:nth-child(n+6) { display: none; }
.voz-breaking__carrusel p:first-child { animation-delay: 0s; }
.voz-breaking__carrusel[style*="n:2"] p { animation-name: voz-breaking-pasa-2; animation-duration: 10s; }
@keyframes voz-breaking-pasa-2 { 0% { opacity: 0; transform: translateY(60%); } 6.00% { opacity: 1; transform: none; } 44.00% { opacity: 1; transform: none; } 50.00% { opacity: 0; transform: translateY(-60%); } 100% { opacity: 0; } }
.voz-breaking__carrusel[style*="n:3"] p { animation-name: voz-breaking-pasa-3; animation-duration: 15s; }
@keyframes voz-breaking-pasa-3 { 0% { opacity: 0; transform: translateY(60%); } 4.00% { opacity: 1; transform: none; } 29.33% { opacity: 1; transform: none; } 33.33% { opacity: 0; transform: translateY(-60%); } 100% { opacity: 0; } }
.voz-breaking__carrusel[style*="n:4"] p { animation-name: voz-breaking-pasa-4; animation-duration: 20s; }
@keyframes voz-breaking-pasa-4 { 0% { opacity: 0; transform: translateY(60%); } 3.00% { opacity: 1; transform: none; } 22.00% { opacity: 1; transform: none; } 25.00% { opacity: 0; transform: translateY(-60%); } 100% { opacity: 0; } }
.voz-breaking__carrusel[style*="n:5"] p { animation-name: voz-breaking-pasa-5; animation-duration: 25s; }
@keyframes voz-breaking-pasa-5 { 0% { opacity: 0; transform: translateY(60%); } 2.40% { opacity: 1; transform: none; } 17.60% { opacity: 1; transform: none; } 20.00% { opacity: 0; transform: translateY(-60%); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .voz-breaking__carrusel p { animation: none; } .voz-breaking__carrusel p:first-child { opacity: 1; } .voz-breaking--parpadeo .voz-breaking__etiqueta { animation: none; } }
@media (max-width: 767px) { .voz-breaking__texto p { font-size: 14px; } .voz-breaking__etiqueta { font-size: 12px; padding: 8px 10px; } }

/* Ticket #483: ícono multimedia sobre la imagen, artículo relacionado, bloque sin publicar, HTML libre y ticker. */
.c-article__thumb:has(> .voz-multimedia) { position: relative; }
.voz-multimedia { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; background: rgba(26, 26, 26, 0.85); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; pointer-events: none; }
.voz-card__related { margin: 6px 0 0; font: 400 13px/1.35 Lato, Arial, sans-serif; }
.voz-card__related a { color: #0072b8; text-decoration: underline; }
[data-voz-sin-publicar] { opacity: 0.5; outline: 2px dashed #e0b400; outline-offset: -2px; }
[data-voz-sin-publicar]::before { content: 'Sin publicar — No aparecerá en la portada pública'; display: block; background: #fff4cc; color: #5c4500; font: 600 12px/1.4 system-ui, sans-serif; padding: 4px 8px; }
.voz-html-block { max-width: 100%; overflow-x: auto; }
.voz-html-block img, .voz-html-block iframe, .voz-html-block video { max-width: 100%; }
.voz-ticker { background: linear-gradient(135deg, #0c336b 0%, #082450 100%); color: #fff; padding: 12px 14px; box-sizing: border-box; max-width: 100%; }
.voz-ticker__etiqueta { margin: 0 0 8px; font: 700 12px/1.2 Lato, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.voz-ticker__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voz-ticker__item { border-left: 4px solid #e20613; padding: 2px 0 2px 10px; font: 400 14px/1.35 Lato, Arial, sans-serif; overflow-wrap: anywhere; }
.voz-ticker__hora { display: block; font-size: 11px; font-weight: 700; opacity: 0.75; margin-bottom: 1px; }
.voz-ticker a { color: #fff; text-decoration: none; }
.voz-ticker a:hover { text-decoration: underline; }