/* La animación de un evento y sus cuatro rótulos. Los colores llegan como variables desde la identidad del servicio
   (`--anm-negro`, `--anm-amarillo`, `--anm-papel`, `--anm-blanco`) y la duración en `--anm-segundos`: aquí no se
   escribe ninguno. Todo acotado a `.anm`/`.anm-rotulos`: no cambia nada más de la página donde se muestra. */
.anm { margin: 0; display: grid; gap: 14px; max-width: 100%; min-width: 0; container-type: inline-size; }
.anm-marco { border: 3px solid var(--anm-negro); background: var(--anm-blanco); aspect-ratio: 3 / 2; overflow: hidden;
  contain: layout paint; max-width: 100%; }
.anm-marco svg { display: block; width: 100%; height: 100%; }
.anm figcaption { min-width: 0; }

.anm-rotulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); color: inherit; }
.anm-rotulo { border-top: 6px solid var(--anm-papel); padding-top: 8px; font-size: 1rem; line-height: 1.35;
  min-width: 0; overflow-wrap: anywhere; opacity: .6;
  animation-duration: var(--anm-segundos, 10s); animation-iteration-count: infinite; animation-timing-function: linear; }
.anm-rotulo__tiempo { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; }
.anm-rotulo--0 { animation-name: anm-r0; }
.anm-rotulo--1 { animation-name: anm-r1; }
.anm-rotulo--2 { animation-name: anm-r2; }
.anm-rotulo--3 { animation-name: anm-r3; }
@keyframes anm-r0 { 0%, 23% { opacity: 1; border-top-color: var(--anm-amarillo); } 25%, 98% { opacity: .6; border-top-color: var(--anm-papel); } 100% { opacity: 1; border-top-color: var(--anm-amarillo); } }
@keyframes anm-r1 { 0%, 23% { opacity: .6; border-top-color: var(--anm-papel); } 25%, 48% { opacity: 1; border-top-color: var(--anm-amarillo); } 50%, 100% { opacity: .6; border-top-color: var(--anm-papel); } }
@keyframes anm-r2 { 0%, 48% { opacity: .6; border-top-color: var(--anm-papel); } 50%, 73% { opacity: 1; border-top-color: var(--anm-amarillo); } 75%, 100% { opacity: .6; border-top-color: var(--anm-papel); } }
@keyframes anm-r3 { 0%, 73% { opacity: .6; border-top-color: var(--anm-papel); } 75%, 98% { opacity: 1; border-top-color: var(--anm-amarillo); } 100% { opacity: .6; border-top-color: var(--anm-papel); } }

/* Compacta (la tira de la portada): un rótulo a la vez, en el mismo lugar. Un lector de pantalla lee los cuatro. */
.anm-rotulos--compacta { grid-template-columns: minmax(0, 1fr); gap: 0; color: inherit; }
.anm-rotulos--compacta .anm-rotulo { grid-area: 1 / 1; border: 0; padding: 0; font-size: .95rem; opacity: 0; }
.anm-rotulos--compacta .anm-rotulo--0 { animation-name: anm-c0; }
.anm-rotulos--compacta .anm-rotulo--1 { animation-name: anm-c1; }
.anm-rotulos--compacta .anm-rotulo--2 { animation-name: anm-c2; }
.anm-rotulos--compacta .anm-rotulo--3 { animation-name: anm-c3; }
@keyframes anm-c0 { 0%, 23% { opacity: 1; } 25%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes anm-c1 { 0%, 23% { opacity: 0; } 25%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes anm-c2 { 0%, 48% { opacity: 0; } 50%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes anm-c3 { 0%, 73% { opacity: 0; } 75%, 98% { opacity: 1; } 100% { opacity: 0; } }

/* Donde el componente es angosto (una columna de la página, un teléfono), los rótulos van de dos en dos. */
@container (max-width: 620px) {
  .anm-rotulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Menos movimiento: el dibujo queda en sus cuatro tiempos quietos (dos por dos) y los rótulos, todos a la vista. */
@media (prefers-reduced-motion: reduce) {
  .anm-rotulo { animation: none; opacity: 1; border-top-color: var(--anm-amarillo); }
  .anm-rotulos--compacta .anm-rotulo { grid-area: auto; opacity: 1; }
}