/* ============================================================
   PORTADA — lo primero que ve quien llega sin sesión
   La portada es un acta: en vez de prometer, muestra una tabla
   que se escribe sola. Es lo único que se mueve en la página.
   ============================================================ */
body.en-portada { background: var(--bg); }

.portada {
  --fila: 46px;          /* alto de cada fila del acta; la animación se mide en filas */
  /* Una vuelta completa. El acta cuenta su historia en los
     primeros 8s (el 61.5% del ciclo) y en el resto se encienden los
     pasos 04 y 05, que no son del acta sino dos hechos mas. */
  --ciclo: 13s;
  min-height: 100dvh;
  overflow-x: hidden;
}
.portada-inner {
  min-height: 100dvh;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- Barra: marca y la entrada de quien ya tiene cuenta ---------- */
.portada-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Nunca envuelve: el acceso debajo de la marca y pegado a la
     izquierda parece un error. */
  flex-wrap: nowrap;
}
.portada-marca { display: flex; align-items: center; flex: 0 1 auto; gap: 10px; min-width: 0; }

/* EL TAMAÑO SALE DEL ANCHO DE LA PANTALLA, NO DE UN ESCALON.
   Con saltos fijos siempre hay un telefono que cae del lado de
   afuera: con el corte en 400 px, uno de 440 se quedaba con el
   tamaño grande y el nombre salia "REVANCHA AREN...". Con `clamp`
   el logo y el nombre se acomodan a cualquier ancho y no hay
   telefono equivocado. Michroma es ancha: catorce letras ocupan
   mucho mas de lo que uno calcula, y el nombre completo es lo
   ultimo que se cede — en la portada la marca manda. */
.portada-marca .brand-mark {
  width: clamp(22px, 6.5vw, 32px);
  height: clamp(22px, 6.5vw, 32px);
  flex: 0 0 auto;
}
.portada-marca strong {
  font: 400 clamp(6.8px, 2vw, 12px)/1 var(--font-brand);
  letter-spacing: clamp(.015em, .3vw, .16em);
  color: var(--marfil);
  white-space: nowrap;
  /* Si aun asi no entrara, que recorte y no que empuje al acceso
     fuera de la pantalla. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Enlace, no botón: quien ya tiene cuenta sabe buscarlo, y así no le
   disputa la atención a "Crear mi liga". El alto llega a 44px para
   que se pueda tocar con el pulgar sin errar. */
.portada-entrar {
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  color: var(--platino);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.portada-entrar:hover, .portada-entrar:focus-visible { color: var(--iris); }

/* ---------- Héroe ---------- */
/* La primera línea va recta: así pesa como título. La segunda, en
   cursiva, para que se lea distinta y no como una frase más larga
   de lo mismo.

   Antes las dos iban en cursiva y la segunda además iba hueca: una
   itálica fina y de contorno, a ese tamaño y sobre un fondo con
   movimiento, obliga al ojo a reconstruir cada letra. El peso nunca
   fue el problema; era el hueco. */
.portada-hero h1 {
  margin: 0;
  font-family: var(--font-title);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(46px, 13vw, 92px);
  line-height: .96;
  letter-spacing: -.012em;
  color: var(--marfil);
}
.portada-apoyo {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
/* El neón lo pone .primary-button en styles.css. Aquí solo va lo
   que es de la portada: que ocupe el ancho y su medida. Antes este
   bloque fijaba fondo, borde y color, y le ganaba al neón. */
.portada-crear {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 17px 24px;
  border-radius: 11px;
  font: 800 14px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
/* En el teléfono el botón cede un poco al tocarlo: confirma el toque
   antes de que abra el formulario. */
.portada-crear:active { transform: scale(.985); }
.portada-crear:focus-visible { outline: 2px solid var(--marfil); outline-offset: 3px; }
.portada-nota {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
/* Lleva pastilla, como todo lo que abre otra ventana. Solo le queda
   el margen: el resto lo pone .boton-pastilla. Antes tenía fondo,
   borde y subrayado propios, y le ganaban a la pastilla. */
.portada-codigo {
  /* Centrado: el botón de arriba ocupa todo el ancho, así que uno
     suelto a la izquierda rompe la columna y cuesta encontrarlo.
     Con inline-flex, "margin: auto" no basta: centra align-self. */
  align-self: center;
  margin: 18px 0 0;
  padding: 0 20px;
}


/* ---------- El acta ---------- */
.portada-acta .eyebrow { display: block; margin-bottom: 14px; color: var(--muted); }
/* Rejilla de dos filas: la cabecera arriba, y abajo la tabla y el
   diario compartiendo la MISMA celda. Así se cruzan por opacidad sin
   que la pieza cambie de alto ni empuje lo que tiene debajo. */
.acta {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  /* minmax(0,1fr) y no 1fr a secas: sin eso el titular del diario,
     que es largo, estira la rejilla a su ancho natural y la pieza
     entera se sale del contenedor. Ya pasó. */
  grid-template-columns: minmax(0, 1fr);
}
.acta-cabeza { grid-area: 1 / 1; }
.acta-cuerpo, .acta-diario { grid-area: 2 / 1; min-width: 0; }

/* ---------- El diario del paso 05 ----------
   No es un periódico de verdad dibujado línea por línea: es la
   silueta de uno. Cabecera con filetes, titular, dos columnas de
   texto insinuado y el pie. A este tamaño eso basta para que se
   lea "periódico" de un vistazo, y texto falso de relleno sería
   justo el adorno que la regla de diseño no quiere. */
.acta-diario {
  opacity: 0;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.diario-cabecera {
  display: flex; align-items: center; gap: 10px;
}
.diario-rayas {
  flex: 1 1 auto; height: 3px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.diario-nombre {
  font: 400 11px/1 var(--font-brand);
  letter-spacing: .1em;
  color: var(--marfil);
  white-space: nowrap;
}
.diario-fecha {
  margin-top: -4px;
  text-align: center;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted);
}
.diario-titular {
  margin: 2px 0 0;
  text-align: center;
  font: italic 300 clamp(18px, 3vw, 24px)/1.2 var(--font-title);
  color: var(--marfil);
  min-width: 0;
}
/* Los tres titulares van apilados en la misma celda y el más largo
   manda el ancho. Sin esto no parten línea y estiran la pieza. */
.diario-titular b { white-space: normal; }
.diario-cuerpo {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.diario-columna {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.diario-firma {
  font-size: 8.5px; letter-spacing: .16em; color: var(--iris);
}
/* Las líneas del texto. La última de cada columna va corta, que es
   lo que hace que se lea como un párrafo y no como un código de
   barras. */
.diario-columna i {
  height: 2px; border-radius: 1px;
  background: var(--line);
}
.diario-columna i:nth-child(3) { width: 96%; }
.diario-columna i:nth-child(5) { width: 92%; }
.diario-columna i:nth-child(7) { width: 97%; }
.diario-columna i:last-child  { width: 58%; }
.diario-pie {
  text-align: center;
  font-size: 8.5px; letter-spacing: .16em; color: var(--muted);
}
.acta-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}
.acta-nombre {
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 500;
  font-size: 23px;
  line-height: 1.05;
  color: var(--marfil);
}
.acta-dato {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--muted);
}
.acta-ejemplo {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
}

.acta-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--platino);
}
.acta-marcador b {
  margin: 0 4px;
  font-weight: 800;
  color: var(--marfil);
  font-variant-numeric: tabular-nums;
}
/* Los dos estados ocupan el mismo lugar; la animación decide cuál se ve. */
.acta-estado { display: grid; font-size: 12px; font-style: italic; }
.acta-pendiente, .acta-aprobado { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; }
.acta-pendiente { color: var(--muted); opacity: 0; }
.acta-aprobado { color: var(--iris); }
.acta-aprobado svg { width: 15px; height: 15px; }
.acta-check { stroke-dasharray: 24; stroke-dashoffset: 0; }

.acta-tabla {
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 4px 0;
}
.acta-posiciones {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acta-posiciones li {
  height: var(--fila);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 12px/1 var(--font-brand);
  color: var(--iris);
}
/* Las filas se apilan en el mismo punto y cada una se ubica con
   transform: así cambiar de puesto es un desplazamiento, no un salto. */
.acta-filas { position: relative; height: calc(var(--fila) * 4); }
.acta-fila {
  position: absolute;
  inset: 0 0 auto;
  height: var(--fila);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--marfil);
}
.acta-fila b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}
/* Estado final: así se ve sin animación (y con movimiento reducido). */
.fila-mendez  { transform: translateY(0); }
.fila-salazar { transform: translateY(var(--fila)); }
.fila-duarte  { transform: translateY(calc(var(--fila) * 2)); }
.fila-rivas   { transform: translateY(calc(var(--fila) * 3)); border-bottom: 0; color: var(--platino); }
.acta-puntos { display: inline-grid; }
.acta-puntos span { grid-area: 1 / 1; }
.acta-puntos .antes { opacity: 0; }

/* ---------- Los tres pasos, debajo del acta ---------- */
.portada-pasos {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.portada-pasos li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--marfil);
}
.portada-pasos li span {
  flex: 0 0 auto;
  font: 400 11px/1 var(--font-brand);
  letter-spacing: .08em;
  color: var(--iris);
}

/* ---------- Juegos: texto corrido, no pastillas ---------- */
.portada-juegos .eyebrow { display: block; margin-bottom: 12px; color: var(--muted); }
.portada-juegos-lista {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--platino);
}
/* portada.js pinta cada juego en su <span>, pegados y sin espacios
   entre ellos: por eso la lista es flex y el separador lo pone el CSS,
   al final de cada juego, para que nunca abra una línea. */
.portada-juegos-lista span { white-space: nowrap; }
.portada-juegos-lista span:not(:last-child)::after {
  content: "·";
  margin: 0 .7em;
  color: var(--iris-deep);
}

/* ---------- Pie ---------- */
.portada-pie {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.portada-pie > span {
  font: 400 10px/1 var(--font-brand);
  letter-spacing: .17em;
  color: var(--muted);
}
.portada-pie .legal-links { margin-top: 0; align-items: center; }
/* Se ve igual que los enlaces legales, pero es un botón. */
#portada-actualizar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
#portada-actualizar:hover { color: var(--iris); }

/* ---------- La animación del acta ----------
   Una vuelta: aparece el resultado, el rival lo aprueba, Méndez sube
   del tercer al primer lugar y sus puntos pasan de 7 a 10. Al final
   el cuerpo se apaga un instante y todo vuelve a su lugar sin que
   se vea el retroceso. Los pasos de abajo se encienden en sincronía. */
@media (prefers-reduced-motion: no-preference) {
  .acta-cuerpo   { animation: acta-cuerpo var(--ciclo) infinite; }
  .acta-diario   { animation: acta-diario var(--ciclo) infinite; }
  .acta-resultado{ animation: acta-resultado var(--ciclo) infinite; }
  .acta-pendiente{ animation: acta-pendiente var(--ciclo) infinite; }
  .acta-aprobado { animation: acta-aprobado var(--ciclo) infinite; }
  .acta-check    { animation: acta-check var(--ciclo) infinite; }
  .fila-mendez   { animation: fila-mendez var(--ciclo) infinite; }
  .fila-salazar  { animation: fila-salazar var(--ciclo) infinite; }
  .fila-duarte   { animation: fila-duarte var(--ciclo) infinite; }
  .acta-puntos .antes   { animation: puntos-antes var(--ciclo) infinite; }
  .acta-puntos .despues { animation: puntos-despues var(--ciclo) infinite; }
  .portada-pasos li { color: var(--muted); }
  .portada-pasos .paso-1 { animation: paso-1 var(--ciclo) infinite; }
  .portada-pasos .paso-2 { animation: paso-2 var(--ciclo) infinite; }
  .portada-pasos .paso-3 { animation: paso-3 var(--ciclo) infinite; }
  .portada-pasos .paso-4 { animation: paso-4 var(--ciclo) infinite; }
  .portada-pasos .paso-5 { animation: paso-5 var(--ciclo) infinite; }
}

@keyframes acta-cuerpo {
  0%, 54.15%  { opacity: 1; }
  56.62%, 59.69% { opacity: 0; }
  /* El 61.54% tiene que estar. Sin el, el cuerpo tarda cinco
     segundos en reaparecer —interpola del 59.69% hasta el 100%— y
     queda un hueco enorme encima de la tabla. Lo rompi yo con un
     reemplazo a ciegas al mover los reinicios al final del ciclo. */
  61.54%, 80.5% { opacity: 1; }
  /* Se va para dejarle el sitio al diario del paso 05, y vuelve de
     golpe en el 100%. Volver de golpe es a proposito: en ese tramo
     las filas se estan devolviendo a su puesto de salida, y asi ese
     retroceso ocurre con el cuerpo invisible. */
  82.5%, 99.4% { opacity: 0; }
  100% { opacity: 1; }
}
/* El diario ocupa el hueco que deja la tabla, en la misma celda. */
@keyframes acta-diario {
  0%, 80.5% { opacity: 0; }
  82.5%, 97.5% { opacity: 1; }
  99.4%, 100% { opacity: 0; }
}
@keyframes acta-resultado {
  0%, 4.31%   { opacity: 0; transform: translateY(-4px); }
  7.38%, 96% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes acta-pendiente {
  0%, 19.08%  { opacity: 1; }
  22.15%, 96% { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes acta-aprobado {
  0%, 19.08%  { opacity: 0; }
  22.15%, 96% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes acta-check {
  0%, 20.31%  { stroke-dashoffset: 24; }
  24.62%, 96% { stroke-dashoffset: 0; }
  97%, 100% { stroke-dashoffset: 24; }
}
/* Méndez sube dos puestos y los otros bajan uno, así que a mitad de
   camino se cruzan. Con las filas transparentes se leían los dos
   nombres encima; con fondo propio, el que sube tapaba al de abajo y
   Duarte desaparecía. Ninguna de las dos sirve.
   Se resuelve en tres tiempos: Méndez se levanta y se apaga, los
   otros se corren mientras no se ve nada encima, y Méndez vuelve a
   aparecer ya en el primer puesto. Nunca hay dos filas visibles en
   el mismo renglón. */
/* OJO: el último fotograma de cada una llega hasta 100% a
   propósito. Si una animación no declara el 100%, el navegador se
   inventa uno con el estilo base del elemento y lo anima hasta ahí:
   las filas se deslizaban de vuelta durante cinco segundos y se
   cruzaban entre ellas. Al alargar el ciclo esto salta de una. */
@keyframes fila-mendez {
  /* El salto dura lo justo. Antes la fila se iba 700ms y la tabla
     quedaba con un puesto vacio: a esa velocidad el ojo no lee un
     movimiento, lee un hueco. Ahora son 230ms: se lee como un
     cambio de puesto. */
  0%, 28.3%    { transform: translateY(calc(var(--fila) * 2)) scale(1); opacity: 1; background: var(--surface); }
  29.1%        { transform: translateY(calc(var(--fila) * 2)) scale(1.02); opacity: 0; }
  30%          { transform: translateY(0) scale(1.02); opacity: 0; }
  30.9%        { transform: translateY(0) scale(1); opacity: 1; background: var(--surface-2); }
  44.31%, 96%  { transform: translateY(0) scale(1); opacity: 1; background: var(--surface); }
  97%, 100% { transform: translateY(calc(var(--fila) * 2)) scale(1); opacity: 1; }
}
@keyframes fila-salazar {
  0%, 28.9%   { transform: translateY(0); }
  30.3%, 96%  { transform: translateY(var(--fila)); }
  97%, 100% { transform: translateY(0); }
}
@keyframes fila-duarte {
  0%, 28.9%   { transform: translateY(var(--fila)); }
  30.3%, 96%  { transform: translateY(calc(var(--fila) * 2)); }
  97%, 100% { transform: translateY(var(--fila)); }
}
@keyframes puntos-antes {
  0%, 28.31%  { opacity: 1; }
  30.77%, 96% { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes puntos-despues {
  0%, 28.31%  { opacity: 0; }
  30.77%, 96% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes paso-1 {
  0%, 3.69%   { color: var(--muted); }
  5.54%, 18.46%  { color: var(--marfil); }
  20.31%, 61.54%, 100% { color: var(--muted); }
}
@keyframes paso-2 {
  0%, 18.46%  { color: var(--muted); }
  20.31%, 26.46% { color: var(--marfil); }
  28.31%, 61.54%, 100% { color: var(--muted); }
}
@keyframes paso-4 {
  0%, 62%   { color: var(--muted); }
  65%, 78%  { color: var(--marfil); }
  81%, 100% { color: var(--muted); }
}
@keyframes paso-5 {
  0%, 81%   { color: var(--muted); }
  84%, 96%  { color: var(--marfil); }
  99%, 100% { color: var(--muted); }
}
@keyframes paso-3 {
  0%, 26.46%  { color: var(--muted); }
  28.31%, 54.15% { color: var(--marfil); }
  56.62%, 61.54%, 100% { color: var(--muted); }
}

/* El tamaño ya lo resuelve el `clamp` de arriba. Aqui solo se
   junta un poco mas y se achica el acceso, que es lo que le
   disputa el renglon a la marca. */
@media (max-width: 420px) {
  .portada-marca { gap: 8px; }
  .portada-entrar {
    flex: 0 0 auto;
    font-size: 12px;
    padding-left: 13px;
    padding-right: 13px;
  }
}
@media (max-width: 360px) {
  .portada-entrar { font-size: 11px; padding-left: 10px; padding-right: 10px; }
}

/* ---------- Pantallas grandes: el acta DEBAJO del titular ----------

   Una sola columna, como en el teléfono: primero el titular y los
   botones, y debajo la tabla que se mueve sola.

   Estuvo un rato al lado del titular y fue peor: el ojo tiene que
   elegir entre dos cosas que compiten, y el botón de crear la liga
   —que es a lo que vino la página— queda de segundo. Decisión del
   dueño, 31/10/2026. */
@media (min-width: 900px) {
  .portada-inner {
    padding: 32px 32px 48px;
    gap: 56px;
  }
  .portada-hero { align-items: center; text-align: center; }
  .portada-apoyo { font-size: 18px; }
  .portada-crear { display: inline-block; width: auto; padding: 18px 40px; }
  .portada-acta { width: 100%; max-width: 880px; margin: 0 auto; }
  .portada-marca .brand-mark { width: 38px; height: 38px; }
  .portada-marca strong { font-size: 14px; }
}

/* ---------- Escudos del acta ----------
   Son inventados a propósito. Dentro de la aplicación cada quien usa
   el escudo de su club de verdad, que es el uso natural; en la
   portada serían marcas ajenas en material de promoción de un
   producto que cobra comisión. El ejemplo ya usa gente inventada y
   una liga inventada: los clubes van a juego. */
.acta-escudo {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
/* Cada escudo trae su propio dibujo (punta, redondel, base curva,
   hexágono). Lo que pone aquí el CSS es solo el tamaño, el color de
   la casa y la sombra que lo despega del fondo.

   Ya no hay brillo postizo encima: ese brillo era un recorte con la
   silueta del escudo en punta, y encima del redondel o del hexágono
   caía torcido. El volumen ahora vive dentro de cada símbolo, en sus
   capas de relleno. */
.acta-escudo { width: 28px; height: 28px; }
.acta-escudo svg {
  width: 100%; height: 100%; grid-area: 1 / 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
}
.tono-platino  { color: var(--platino); }
.tono-iris     { color: var(--iris); }
.tono-profundo { color: var(--iris-deep); }

/* El nombre y su escudo viajan juntos. */
.acta-quien { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.acta-fila .acta-quien { padding-left: 14px; }
.acta-marcador { display: inline-flex; align-items: center; gap: 7px; }
.acta-marcador .acta-escudo { width: 19px; height: 19px; }

/* ---------- Las filas no se pueden ver a través ----------
   Al reordenarse, Méndez recorre dos puestos y los otros uno: a mitad
   de camino se cruzan. Sin fondo propio los dos nombres se leían
   encima uno del otro. Ahora cada fila tapa lo que pasa por debajo, y
   la que va subiendo queda por delante porque es la que importa. */
.acta-fila { background: var(--surface); }
.fila-mendez { z-index: 2; }

/* ---------- El ejemplo no es de un solo juego ----------
   Decía "EA SPORTS FC" fijo y se leía como si la plataforma fuera
   de fútbol. Ahora el mismo acta se cuenta en tres juegos distintos
   a lo largo de la vuelta: lo que cambia es el rótulo, porque el
   resto -un marcador, alguien que aprueba, una tabla que se
   reordena- es igual en todos. */
.acta-dato { position: relative; display: block; min-height: 1.2em; }
.acta-dato b {
  position: absolute; inset: 0; font-weight: 700; opacity: 0;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .acta-dato .juego-1 { animation: juego-1 var(--ciclo) infinite; }
  .acta-dato .juego-2 { animation: juego-2 var(--ciclo) infinite; }
  .acta-dato .juego-3 { animation: juego-3 var(--ciclo) infinite; }
}
/* Sin movimiento se queda el primero, quieto y legible. */
@media (prefers-reduced-motion: reduce) {
  .acta-dato .juego-1 { opacity: 1; }
}
@keyframes juego-1 { 0%, 28% { opacity: 1; } 32%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes juego-2 { 0%, 28% { opacity: 0; } 32%, 61% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes juego-3 { 0%, 61% { opacity: 0; } 65%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }



/* Lo que rota con el deporte. Las tres versiones viven apiladas en
   la misma celda y se turnan con opacidad: asi el ancho lo fija la
   mas larga y nada salta cuando cambian.

   No son adornos: cada deporte trae su nombre de liga, su juego, su
   marcador y su termino. Es la plataforma contandose a si misma en
   la portada — que sirve para cualquier juego — sin pedirle a nadie
   que entre a comprobarlo. */
.acta-rota {
  display: inline-grid;
  justify-items: start;
}
.acta-rota > b {
  grid-area: 1 / 1;
  opacity: 0;
  white-space: nowrap;
}
.acta-cifras { vertical-align: baseline; }
.acta-cifras > b { font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .acta-rota .juego-1 { animation: juego-1 var(--ciclo) infinite; }
  .acta-rota .juego-2 { animation: juego-2 var(--ciclo) infinite; }
  .acta-rota .juego-3 { animation: juego-3 var(--ciclo) infinite; }
}
/* Sin movimiento se queda el primero, quieto y legible. */
@media (prefers-reduced-motion: reduce) {
  .acta-rota .juego-1 { opacity: 1; }
}

/* El encabezado del acta. La columna de la derecha dice QUÉ se está
   contando, y cambia con el juego igual que el nombre de arriba:
   goles, bajas, puntos. Es la regla del idioma por juego, mostrada
   en la portada sin que haga falta entrar a una liga. */
.acta-encabezado {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0 0;
  /* Aire arriba: pegado al renglón del resultado se leía como si
     una fila estuviera montada sobre la otra. */
  padding: 16px 16px 8px 0;
  margin-bottom: 2px;
}
.acta-encabezado-quien {
  grid-column: 2;
  font: 600 9px/1 var(--font-body);
  letter-spacing: .16em;
  color: var(--muted);
}
.acta-encabezado-dato {
  grid-column: 3;
  position: relative;
  display: inline-grid;
  min-width: 6ch;
  justify-items: end;
}
.acta-encabezado-dato b {
  grid-area: 1 / 1;
  font: 800 9px/1 var(--font-body);
  letter-spacing: .16em;
  color: var(--platino);
  opacity: 0;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .acta-encabezado-dato .juego-1 { animation: juego-1 var(--ciclo) infinite; }
  .acta-encabezado-dato .juego-2 { animation: juego-2 var(--ciclo) infinite; }
  .acta-encabezado-dato .juego-3 { animation: juego-3 var(--ciclo) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .acta-encabezado-dato .juego-1 { opacity: 1; }
}

/* ============================================================
   LA PROFUNDIDAD DEL HÉROE

   Un solo objeto con volumen de verdad, luz que baja de arriba y
   polvo en dos capas. La marca no es la plana con una sombra: es
   una pieza con canto, con el filo atrapando la luz. Misma técnica
   que los trofeos.

   El polvo va en dos velocidades a propósito: lo de atrás se mueve
   más lento que lo de adelante, y eso es lo que el ojo lee como
   profundidad. Sin eso son puntos flotando y nada más.
   ============================================================ */
/* El héroe usa el alto que le toca en vez de quedarse arriba y
   dejar un hueco debajo de la barra. Antes el contenido se apilaba
   desde el borde y el espacio sobrante se juntaba todo en un sitio,
   que es lo que le quitaba elegancia. */
.portada-hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 14px 0 8px;
}
/* El texto de apoyo centrado necesita un ancho propio, o las líneas
   quedan de largos muy distintos y se ve descuadrado. */
.portada-hero .portada-apoyo { max-width: 40ch; margin-left: auto; margin-right: auto; }

.portada-haces { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.portada-haces .haz {
  position: absolute; top: -8%; left: 50%;
  width: 44vw; height: 120vh;
  background: linear-gradient(to bottom, rgba(207,205,200,.085), rgba(207,205,200,0) 72%);
  transform-origin: 50% 0;
  filter: blur(2px);
}
.portada-haces .uno  { transform: translateX(-50%) rotate(-19deg); }
.portada-haces .dos  { transform: translateX(-50%) rotate(15deg);
  background: linear-gradient(to bottom, rgba(143,155,255,.10), rgba(143,155,255,0) 70%); }
.portada-haces .tres { transform: translateX(-50%) rotate(3deg); width: 24vw; opacity: .7; }

.portada-polvo { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.portada-polvo i {
  position: absolute; border-radius: 50%;
  background: var(--platino, #CFCDC8);
  animation: portada-flotar linear infinite;
}
@keyframes portada-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-220px); }
}


/* Quieto parece una calcomanía; moviéndose mucho, un adorno. */



.portada-encima {
  position: relative; z-index: 1;
  margin: 0 0 16px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--apagado, #8C8A95);
}
.portada-inner { position: relative; z-index: 1; }
.portada-contorno {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: #9A98A3;
}

/* En el teléfono la pieza manda menos, porque el titular ya ocupa
   casi toda la pantalla y dos cosas grandes se pelean. */
@media (max-width: 560px) {


}

@media (prefers-reduced-motion: reduce) {
  .portada-polvo i { animation: none; }
}

/* ---------- El escudo rota con el deporte ----------
   Un escudo de béisbol no se parece a uno de fútbol: aquellos son
   parches redondos —los de la gorra— y los de baloncesto son
   siluetas angulares que se leen de lejos en una camiseta. Enseñar
   el mismo dibujo pintado de otro color para los tres deportes era
   justo lo contrario de lo que dice el ejemplo: "sea del juego que
   sea".

   Los tres van dentro del mismo <svg> y se cruzan con las mismas
   animaciones que ya rotan el nombre de la liga y el marcador, así
   que no pueden desincronizarse. */
@media (prefers-reduced-motion: no-preference) {
  .acta-escudo use.juego-1 { animation: juego-1 var(--ciclo) infinite; }
  .acta-escudo use.juego-2 { animation: juego-2 var(--ciclo) infinite; }
  .acta-escudo use.juego-3 { animation: juego-3 var(--ciclo) infinite; }
}
/* Sin movimiento: se queda el primero, como el resto del acta. */
@media (prefers-reduced-motion: reduce) {
  .acta-escudo use.juego-1 { opacity: 1; }
  .acta-escudo use.juego-2,
  .acta-escudo use.juego-3 { opacity: 0; }
}