/* vuelta.css */
/* ==========================================================================
   El Camino DT — La vuelta olímpica
   --------------------------------------------------------------------------
   La segunda —y última— pantalla del juego que se pinta con los colores del
   club en vez de con la paleta de la casa. La otra es la bienvenida, y son las
   dos caras de lo mismo: el día que llegás y el día que ganás. Todo lo que hay
   en el medio vuelve a «pizarra y cal», que es lo que aguanta ocho horas de
   tabla.

   Comparte forma con la bienvenida a propósito —banda de color arriba, datos
   abajo, un botón— y NO comparte clases. Se pensó reusar `.saludo`: no se hizo
   porque las dos escenas quieren cosas distintas de la banda. La bienvenida
   presenta a un club y su dato grande es el nombre; ésta presenta un TÍTULO y
   su dato grande es el nombre del torneo, con el club debajo. Compartir clases
   habría dejado a la primera pagando por lo que necesita la segunda cada vez
   que una de las dos se toque.

   Los tres colores llegan como variables desde `vuelta.js`, ya elegidos por
   contraste. Acá no se decide ninguno — esta hoja sólo los coloca.
   ========================================================================== */

.vuelta {
  /* 680 Y NO 520. Con 520 el diálogo se leía como un aviso del sistema en el
     medio de una pantalla de 1760, y las dos notas de abajo —«apertura de tu
     carrera», «24 partidos · 37 goles»— se cortaban con puntos suspensivos. Es
     la escena más importante del juego y tiene que ocupar como tal; el resto de
     los diálogos se quedan donde estaban, que ninguno es esto. */
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--sombra-modal);
}

/* El velo va más oscuro que el de los otros diálogos y con más desenfoque. Es
   el único momento del juego en que lo de atrás no importa nada: detrás de una
   mesa de negociación está la tabla que hace falta consultar, y detrás de esto
   está un partido que ya terminó. */
.vuelta::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   LA BANDA
   --------------------------------------------------------------------------
   El color del club a pantalla completa, con la franja diagonal del segundo
   color: es la forma en que una camiseta se reconoce de lejos, y es lo mismo
   que hace la bienvenida.

   Más alta que la de la bienvenida —y es la única diferencia de medida entre
   las dos— porque acá la banda ES la escena. Abajo hay tres cifras; arriba está
   lo que pasó.

   LA FRANJA ENTRA POR LA IZQUIERDA Y SE CORTA ANTES DEL TEXTO: acá abajo está
   el nombre del título, que es lo más largo que dice esta pantalla —y el que la
   vara mide con «Copa de la División Profesional»—. El argumento entero y lo
   que se midió están en `bienvenida.css`, que es donde nació esta banda; en dos
   palabras, la tinta se elige contra el FONDO y la franja es el otro polo de la
   camiseta, así que una franja debajo de una letra es una letra que no se lee
   en 1.221 de 1.656 clubes.
   -------------------------------------------------------------------------- */

.vuelta__banda {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 28px;
  color: var(--club-tinta);
  background:
    linear-gradient(112deg, var(--club-franja) 0 9%, transparent 9.4%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  /* La línea de cierre sale DEL COLOR DEL CLUB, oscurecido: un negro fijo
     funciona sobre el azul de Boca y se ve sucio sobre el celeste de Racing. */
  border-bottom: 1px solid color-mix(in srgb, var(--club-fondo) 55%, black);
}

.vuelta__escudo {
  width: 84px;
  height: 84px;
  --halo: 1.5px;
  object-fit: contain;
  flex: none;
  /* El escudo tiene que despegarse del fondo aunque compartan color: el celeste
     de Racing sobre celeste es un escudo que desaparece.
     El halo del rescate va DELANTE y se compone acá: `filter` no se suma. */
  filter: var(--halo-filtro, ) drop-shadow(0 3px 8px hsl(0 0% 0% / 0.45));
}

.vuelta__id { min-width: 0; }

/* SIN OPACIDAD, y es de las cinco bandas: `opacity` no apaga una tinta, la
   mezcla con el fondo que tiene debajo, y en la coronación eso dejaba 768 de
   los 1.673 clubes por debajo de 4,5:1 contra los 191 del lavado solo. La
   jerarquía la hacen el tamaño, el peso, las mayúsculas y el `tracking`. La
   medición entera está en `bienvenida.css`. */
.vuelta__eco {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* EL NOMBRE DEL TORNEO ES EL DATO GRANDE, y es lo que separa esta escena de la
   bienvenida. Ahí el titular es el club porque lo que pasó es que llegaste
   acá; acá el titular es el título porque el club ya se sabe.

   Condensada y ajustada: «Copa Libertadores» y «Supercopa Argentina» tienen que
   entrar en un renglón sobre un diálogo de 680, y partidos en dos pierden el
   golpe. */
.vuelta__titulo {
  margin: 4px 0 3px;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.015em;
}

.vuelta__club { font-size: var(--fs-lg); }

/* La marca del torneo sobre un plato claro, igual que el logo de la liga en la
   bienvenida y por el mismo motivo: los logos de división y los trofeos son
   dibujos oscuros, y sobre el rojo de Independiente o el bordó de Lanús
   desaparecen. Un logo que sólo se ve en la mitad de los clubes es peor que no
   ponerlo. */
.vuelta__marca {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   LOS DATOS
   --------------------------------------------------------------------------
   Tres, y los tres salen de lo que la carrera ya sabe: cuántos de éste llevás,
   quién hizo los goles y cómo fue la campaña. Ninguno se inventa.

   SON TRES O SON DOS. Un plantel sin goleador y una campaña sin partidos son
   estados posibles, y `vuelta.js` no dibuja la tarjeta que no tiene dato: tres
   cajas con un guion adentro se leen como una pantalla que no cargó. Por eso la
   retícula es `auto-fit` y no `repeat(3)` — acá el número de columnas SÍ
   depende de cuántas hay, que es lo contrario de la vitrina.
   -------------------------------------------------------------------------- */

.vuelta__cuerpo { padding: 22px 28px 8px; }

.vuelta__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.vuelta__dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 15px 18px;
  background: var(--bg-row);
  min-width: 0;
}

.vuelta__valor {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.vuelta__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.vuelta__nota {
  font-size: var(--fs-sm);
  /* `--text-muted` y no `--text-disabled`: esto es un DATO de la carrera —el
     goleador, las fechas, los goles—, no un control apagado. Sobre el fondo del
     `.vuelta__dato` —que es fijo, `rgb(28,28,44)`, y no el color del club: los
     colores del club pintan sólo la cabecera— daba **2,67** con piso 4,5, y con
     `--text-muted` da 4,99.

     Nadie lo había visto porque esta superficie NO SE MEDÍA: el arnés le pasaba
     a `vueltaOlimpica()` una cadena donde va una entrada de
     `TITULOS_DEL_JUEGO`, el diálogo nunca se dibujaba y el informe contaba cero
     hallazgos. Es el cuarto sitio del día donde `--text-disabled` estaba
     escribiendo datos vivos. */
  color: var(--text-muted);
  /* Las notas apoyan en el mismo piso pase lo que pase arriba, y los nombres
     largos se cortan con puntos en vez de ensanchar su columna. */
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CENTRADO COMO LOS DEMÁS PIES DEL JUEGO (3/9/2026). No hereda de
   `.dialogo__pie` —esta placa tiene su propio marco y su propio padding— así
   que el valor está escrito dos veces a propósito y no por copia: son dos
   reglas con el mismo criterio. La importancia crece hacia la derecha y la
   fila va en el medio; el criterio y el porqué viven en `.dialogo__pie`
   (`app.css`), que es la que manda en los siete pies restantes. */
.vuelta__pie {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  padding: 20px 28px 24px;
}

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  /* SIN LA DIAGONAL, Y ESTO ES DE LAS CUATRO BANDAS DEL JUEGO. En una de 344 el
     texto cruza la franja —el eco y el titular llegan a 328 y la franja empieza
     a los 201, medido— y ahí el texto se apoya sobre el segundo color del club.
     Eso sólo se lee cuando ese color es oscuro: **la tinta del club no llega a
     4,5:1 contra su propia franja en 1.221 de los 1.656 clubes (73,7 %)**, y el
     peor caso da 1,00 —blanco sobre el amarillo puro de UE Sant Andreu—, o sea
     el renglón directamente no está.

     ACÁ DECÍA ADEMÁS QUE «EN UNA BANDA DE 680 EL TEXTO TERMINA MUCHO ANTES DE
     LA FRANJA», y era la única parte que no se había medido: el titular llega
     al 83 % del ancho, y esa misma mañana del 8/9/2026 Alberto encontró la
     coronación de Sportivo Barracas con «Primera B Metropolitana» partido al
     medio por la franja blanca. Desde entonces la diagonal se corta antes del
     texto en TODOS los anchos —112°, del 0 al 9 %, como la mesa—, así que esta
     regla ya no es la única que lo evita; se queda porque en 344 la cuña
     tampoco tiene lugar. La medición entera y las dos correcciones que se
     probaron y no sirven están en `bienvenida.css`.

     Se saca la diagonal y no se mueve el texto porque la diagonal es lo
     prescindible: la identidad la siguen dando el color de la banda y el
     escudo, que es lo que se reconoce de lejos. Correrla a la derecha no
     alcanzaba —el texto llega al 95 % del ancho— y achicar la columna de texto
     deja los nombres largos en cuatro renglones.

     Escrito en las cuatro hojas y no en una compartida por el mismo motivo por
     el que las cuatro bandas no comparten clases; lo que se comparte es el
     porqué, y vive acá. */
  .vuelta__banda {
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  }

  .vuelta__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tres cifras en dos columnas dejaban una celda vacía abajo a la derecha y
     la tercera cortada («32 fechas · 4…»): la que queda sola ocupa el renglón. */
  .vuelta__dato:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vuelta__titulo { font-size: var(--fs-xl); }
  .vuelta__escudo { width: 52px; height: 52px; --halo: 0.94px; }
  .vuelta__banda { padding: 18px 16px; gap: 12px; }
  .vuelta__pie .action { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   LA ENTRADA
   --------------------------------------------------------------------------
   Sube desde abajo y crece un pelo, como el resto de los diálogos, pero más
   lento y desde más lejos: 320 ms contra 220 y ocho píxeles más de recorrido.
   Es la única animación del juego que se permite durar, y dura porque este
   diálogo aparece una vez por título y no seis veces por mercado.

   Quien pidió que no se mueva nada, que no se mueva nada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .vuelta[open] { animation: vuelta-entra 320ms var(--ease); }
  @keyframes vuelta-entra {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}

/* avisos-de-la-sala.css */
/* ==========================================================================
   El Camino DT — LOS DOS AVISOS DE LA SALA
   --------------------------------------------------------------------------
   La escena que hace que la rueda de prensa VENGA en vez de esperar, y la que
   la cierra. La primera vive en el portal, que es donde el DT vuelve después
   de cada fecha; la segunda, en las dos puertas por las que se contesta.

   LAS DOS COMPARTEN LA CAJA A PROPÓSITO y por eso comparten hoja. Son los dos
   extremos de la misma escena —te llaman, contestás, se terminó— y si la de
   salida fuera más chica o más liviana que la de entrada, el DT leería que lo
   que dijo importa menos que la pregunta. El modificador `--cierre` cambia lo
   que tiene que cambiar y nada más.

   NO SE PARECE A LA VUELTA OLÍMPICA Y NO TIENE QUE PARECERSE. Aquélla es una
   celebración: banda de color del club, escudo grande, cifras. Ésta es una
   citación — la prensa te llama y hay que contestar. Por eso es más angosta,
   no lleva color de club y lo único teñido es el sello del medio que convoca:
   el que te está llamando.

   Y LOS DOS BOTONES TIENEN EL MISMO PESO VISUAL SALVO UNO. «Ir a la sala» es
   la acción plena y «No voy» es la callada, porque no ir es una decisión
   legítima pero no es la que el juego propone. Las dos cobran algo; ninguna es
   un escape.
   ========================================================================== */
.convoca {
  /* 760, MÁS ANCHA QUE LA VUELTA OLÍMPICA. El primer intento fue 560 —«es un
     texto y dos botones, no una vitrina»— y ese razonamiento estaba mirando el
     contenido en vez de mirar el PESO. Alberto lo corrigió el 17/9/2026: «demos
     preponderancia a estas notificaciones».

     Y tiene razón de sistema: la vuelta olímpica ocupa 680 y pasa una vez por
     título; la convocatoria pasa ocho o diez veces por temporada y es la única
     escena del juego que te PIDE ALGO. Si la que pide es más chica que la que
     celebra, el juego está diciendo que decidir importa menos que festejar. */
  width: min(760px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--sombra-modal);
}

.convoca::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   LA BANDA: quién te llama
   -------------------------------------------------------------------------- */
/* CENTRADA, COMO LA ESCENA DE LA SALA. Y esto es una corrección: los dos
   avisos nacieron con la banda y el cuerpo alineados a la izquierda mientras
   la sala centra exactamente la misma escena —los medios, el asunto, quién
   firma, el cuerpo—. Puestos uno al lado del otro, la sala se lee como una
   escena y el aviso como un formulario, que es justo lo que estos avisos
   vinieron a dejar de ser.

   El sello va arriba y el texto abajo, que además es lo que ya hacía el
   teléfono: la maqueta angosta tenía razón antes que la ancha. */
.convoca__banda {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--line-hairline);
}

/* El sello va teñido con la marca del medio —borde y fondo, nunca la tinta:
   ver la regla en `prensa.css`— y es lo ÚNICO con color de la escena. */
.convoca__sello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 72px;
  height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid hsl(var(--marca) / 0.55);
  background: hsl(var(--marca) / 0.12);
  color: var(--text-primary);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}
.convoca__logo { height: 22px; width: calc(22px * var(--aspecto, 4)); max-width: 108px; }

.convoca__id { display: grid; gap: 2px; min-width: 0; }

.convoca__eco {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.convoca__titulo {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.convoca__quien { font-size: var(--fs-sm); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   EL CUERPO Y EL PIE
   -------------------------------------------------------------------------- */
/* El cuerpo es el MISMO HTML que la sala dibuja —lo escribe el tipo de rueda
   en `despacho.js`— así que viene en `<p>`. No se le da estilo propio: si la
   pregunta se lee distinto en el aviso y en la sala, son dos preguntas. */
/* EL CUERPO SE LEE ALINEADO A LA IZQUIERDA, y esto es una corrección de
   Alberto del 22/9/2026 —«alineemos el texto del modal de conferencia de
   prensa»—. Iba centrado, heredado de la banda, y centrado funciona para un
   rótulo de tres palabras y deja de funcionar para lo que hay acá: tres o
   cuatro frases de largos distintos, cada una con su propio margen izquierdo.
   El ojo que termina un renglón vuelve a un sitio que se movió, y una escena
   que quería pesar se lee como una placa de redes.

   LA BANDA SIGUE CENTRADA y no es una inconsistencia: ahí hay un sello, un
   eco y un titular —una identidad, que se mira— y acá hay prosa, que se lee.
   Es el mismo corte que hacen los otros diálogos del juego: `preguntar()`
   centra su cabecera y alinea su cuerpo a la izquierda.

   Lo mismo vale para el aviso de cierre, que comparte esta clase: la bajada, tu
   remate entre comillas y el renglón del vestuario arrancan todos del mismo
   borde. */
/* Y LA COLUMNA DE LECTURA NO SE VA A LOS 760. Un párrafo a todo el ancho del
   diálogo obliga al ojo a buscar dónde empieza el renglón siguiente; es el
   mismo tope que la sala le pone a su escena.

   EL TOPE VA EN LA CAJA Y NO EN CADA HIJO, y ése es el cambio que hizo falta
   para que alinear sirviera de algo. Estaba en `> *`, o sea que cada renglón
   resolvía SU propio `56ch` con SU tipografía, y `ch` es el ancho del cero de
   la letra que hereda: el cuerpo va en `--fs-md` y da 566 px, y la línea del
   vestuario va en `--fs-sm` y da 533. Con todo centrado eso no se veía —dos
   cajas de distinto ancho centradas comparten el centro— y alineando se vio de
   una: el renglón del vestuario arrancaba 16 px a la derecha de los otros tres.
   Medido en el aviso de cierre el 22/9/2026, antes de subirlo.

   Puesto acá arriba el `ch` se resuelve UNA vez, con la letra del cuerpo, y los
   cuatro renglones nacen del mismo borde. La columna sigue centrada en el
   diálogo —`margin-inline: auto`— así que el bloque no desequilibra la banda ni
   el pie, que son simétricos; lo que se alinea es el texto adentro de ella. */
.convoca__cuerpo {
  /* `fit-content` Y NO UN ANCHO FIJO, y es la corrección del 22/9/2026: «esto
     no está centrado». La caja LO ESTABA —`margin-inline: auto` sobre un tope
     de 56ch— y aun así se veía corrida, porque centrar la caja no centra el
     texto cuando el texto no llena la caja. Medido sobre el aviso de cierre: la
     columna pedía 834 px y el renglón más largo escribía 626, así que quedaban
     138 px de hueco a la izquierda y 306 a la derecha. El ojo no mide cajas,
     mide tinta, y la tinta estaba a la izquierda.

     Con `fit-content` la columna se encoge hasta el renglón más largo y ese
     bloque se centra: los renglones siguen arrancando todos del mismo borde
     —que es lo que se pidió al alinearlos— y el conjunto queda con el mismo
     aire de los dos lados. El tope de 56ch se queda de techo, para el cuerpo
     largo que sí lo llena; en el teléfono no llega a morder, porque lo que
     manda es el ancho que hay. */
  width: fit-content;
  max-width: calc(56ch + var(--sp-7) * 2);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-align: left;
}
.convoca__cuerpo > * { margin-inline: 0; }
.convoca__cuerpo p { margin: 0 0 var(--sp-4); }
.convoca__cuerpo p:last-child { margin-bottom: 0; }

/* CENTRADOS Y NO A LA DERECHA. Un pie alineado a la derecha es el de un
   formulario —aceptar y cancelar, donde una de las dos es el camino de
   siempre—. Acá las dos son decisiones del DT y ninguna es el trámite, así que
   ninguna se arrincona. Y anchos: un botón que se lee de lejos es la mitad de
   lo que hace que esta escena pese. */
.convoca__pie {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-7);
}
.convoca__pie .action { min-width: 180px; justify-content: center; }

/* LO QUE CUESTA NO IR, DEBAJO DE LOS BOTONES Y NO ARRIBA. Arriba se lee como
   parte de la pregunta; abajo se lee como lo que es: la letra chica de la
   decisión que se acaba de ofrecer. */
.convoca__costo {
  margin: 0;
  padding: var(--sp-5) var(--sp-7) var(--sp-7);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 560px) {
  /* Y LA BANDA SE APILA, que es lo que faltaba. Medido a 375 px jugando el
     20/9/2026: el diálogo mide 335 y el sello se lleva **121**, o sea el 36 %
     del ancho, dejando 154 para el titular. Con eso «Rueda de prensa: la
     tercera derrota seguida» caía en CINCO renglones y el eco de arriba en
     TRES: una citación que en el escritorio se lee de un golpe, en el teléfono
     era una columna de palabras sueltas al lado de un logo.

     El sello no se achica —es la marca del medio que te llama y a 44 px de
     alto ya está en su mínimo— así que lo que cambia es la dirección: el
     sello arriba, el texto abajo con los 335 px enteros. Es la misma
     corrección que el pie de acá al lado, por el mismo motivo y en la misma
     media query. */
  .convoca__banda {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* En el teléfono los botones van a lo ancho y en columna: dos acciones de
     peso distinto, una encima de la otra, no compitiendo por 300 px. */
  .convoca__pie { flex-direction: column-reverse; }
  .convoca__pie .action { width: 100%; }
  .convoca__pie .action { min-width: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .convoca[open] { animation: convoca-entra 260ms var(--ease); }
  @keyframes convoca-entra {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   LA INVITACIÓN A SEGUIRNOS (`seguinos.js`)
   --------------------------------------------------------------------------
   ES UN FESTEJO Y NO UN AVISO. La primera versión vestía la escena de la
   convocatoria —banda gris, texto, dos botones del acento— y Alberto la pidió
   con «más presencia, más personalidad, más animado» el 29/9/2026. Lo que
   cambia es de quién es el color: arriba manda el del CLUB (`--club-luz`, el
   mismo que usa la portada), con el marcador del partido que se acaba de
   ganar, rayos y papelitos; abajo, cada red con su propia marca. El acento del
   juego queda para el sello de «¡Victoria!» y la mitad de los papelitos.

   TODO LO QUE SE MUEVE SE MUEVE UNA VEZ, salvo los rayos y el brillo de los
   botones, que son lentos. Y con `prefers-reduced-motion` no se mueve nada:
   la escena se lee igual quieta.

   GRANDE, COMO LA CONVOCATORIA. Nació de 480 y Alberto pidió «agrandemos
   esto» el 8/10/2026: un festejo chico en el medio de la sala se leía como
   un aviso más. Va a 680 —más que la vuelta olímpica no, es un festejo de un
   partido— con escudos, marcador y título que se ven desde lejos. */
.convoca--seguinos {
  width: min(680px, calc(100vw - 32px));
  border-color: color-mix(in srgb, var(--club-luz) 45%, var(--line-strong));
  box-shadow: var(--sombra-modal), 0 0 80px -20px color-mix(in srgb, var(--club-luz) 55%, transparent);
}

.seguinos__escena {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
  padding: 40px var(--sp-7) 36px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--club-luz) 65%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--club-luz) 24%, var(--bg-panel)), var(--bg-panel));
  border-bottom: 1px solid color-mix(in srgb, var(--club-luz) 30%, var(--line-hairline));
}
.seguinos__rayos {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 58%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--club-luz) 32%, transparent) 0deg 7deg,
    transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%);
  mask-image: radial-gradient(circle, #000 0, transparent 62%);
  opacity: 0.8;
}
/* Con `autofocus` en la escena el foco no cae sobre el botón de X al abrir:
   se leía como si X estuviera elegida de antemano. */
.seguinos__escena:focus { outline: none; }
.seguinos__papelitos { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.seguinos__papelitos i {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: 7px;
  height: 12px;
  border-radius: 1px;
  background: var(--club-luz);
  opacity: 0;
}
.seguinos__papelitos i[data-tono='acento'] { background: var(--accent); width: 6px; height: 9px; }

.seguinos__sello {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}

.seguinos__marcador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-5);
  width: 100%;
}
.seguinos__marcador > .seguinos__escudo.es-mio { grid-column: 2; }
.seguinos__lado {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  min-width: 0;
  opacity: 0.6;
}
.seguinos__lado b {
  max-width: 100%;
  font-size: var(--fs-lg, 20px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seguinos__lado.es-mio { opacity: 1; }
.seguinos__lado.es-mio b { font-weight: 800; }
.seguinos__escudo { width: 72px; height: 72px; }
.seguinos__lado.es-mio .seguinos__escudo,
.seguinos__escudo.es-mio {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--club-luz) 55%, transparent));
}
.seguinos__goles {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 84px;
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.seguinos__goles i { font-style: normal; color: var(--text-muted); font-weight: 400; }

.seguinos__texto {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-7) 48px var(--sp-6);
  text-align: center;
}
.seguinos__titulo {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  line-height: 1.05;
  text-transform: uppercase;
}
.seguinos__bajada {
  margin: 0;
  font-size: var(--fs-md, 17px);
  color: var(--text-secondary);
  text-wrap: balance;
}

.seguinos__redes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  padding: var(--sp-3) 48px 0;
}
.seguinos__red {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: 18px 22px;
  border-radius: var(--r-md);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.seguinos__red[data-red='x'] {
  background: #000;
  border: 1px solid #3a3a3a;
}
.seguinos__red[data-red='instagram'] {
  background: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%);
  border: 1px solid transparent;
}
/* El brillo que cruza: el mismo gesto de barrido de la portada, pero solo. */
.seguinos__red::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.seguinos__glifo { flex: none; }
.seguinos__nombre { display: grid; min-width: 0; line-height: 1.2; text-align: center; }
.seguinos__nombre b { font-size: var(--fs-md, 17px); font-weight: 700; white-space: nowrap; }
.seguinos__nombre small { font-size: var(--fs-xs); opacity: 0.8; }
.seguinos__red:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .seguinos__red:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.7); }
}

.seguinos__pie { margin: 0; padding: var(--sp-5) 48px var(--sp-7); text-align: center; }
.seguinos__no {
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.seguinos__no:hover { color: var(--text-primary); }

@media (max-width: 560px) {
  .seguinos__escena { padding: 28px var(--sp-5) 26px; gap: var(--sp-5); }
  .seguinos__redes { grid-template-columns: 1fr; padding-inline: var(--sp-6); }
  .seguinos__texto, .seguinos__pie { padding-inline: var(--sp-6); }
  .seguinos__escudo { width: 52px; height: 52px; }
  .seguinos__lado.es-mio .seguinos__escudo,
  .seguinos__escudo.es-mio { width: 84px; height: 84px; }
  .seguinos__lado b { font-size: var(--fs-sm); }
  .seguinos__goles { font-size: 56px; }
  .seguinos__titulo { font-size: 32px; }
  .seguinos__red { padding: 14px 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .convoca--seguinos[open] { animation: seguinos-entra 520ms var(--ease-entrada); }
  .convoca--seguinos[open] .seguinos__rayos { animation: seguinos-gira 40s linear infinite; }
  .convoca--seguinos[open] .seguinos__papelitos i {
    animation: seguinos-cae 2.6s cubic-bezier(0.25, 0.6, 0.45, 1) var(--dem) both;
  }
  .convoca--seguinos[open] .seguinos__sello { animation: seguinos-sello 600ms var(--ease-entrada) 250ms both; }
  .convoca--seguinos[open] .es-mio .seguinos__escudo,
  .convoca--seguinos[open] .seguinos__escudo.es-mio {
    animation: seguinos-rebota 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  }
  .convoca--seguinos[open] .seguinos__goles b { animation: seguinos-sube 500ms var(--ease-entrada) both; }
  .convoca--seguinos[open] .seguinos__goles b:first-child { animation-delay: 380ms; }
  .convoca--seguinos[open] .seguinos__goles b:last-child { animation-delay: 520ms; }
  .convoca--seguinos[open] .seguinos__texto,
  .convoca--seguinos[open] .seguinos__red,
  .convoca--seguinos[open] .seguinos__pie { animation: seguinos-sube 520ms var(--ease-entrada) both; }
  .convoca--seguinos[open] .seguinos__texto { animation-delay: 450ms; }
  .convoca--seguinos[open] .seguinos__red:nth-child(1) { animation-delay: 600ms; }
  .convoca--seguinos[open] .seguinos__red:nth-child(2) { animation-delay: 680ms; }
  .convoca--seguinos[open] .seguinos__pie { animation-delay: 800ms; }
  .convoca--seguinos[open] .seguinos__red::after { animation: seguinos-brillo 3.2s ease-in-out 1.4s infinite; }
  .convoca--seguinos[open] .seguinos__red:nth-child(2)::after { animation-delay: 1.7s; }

  @keyframes seguinos-entra {
    from { opacity: 0; transform: translateY(24px) scale(0.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes seguinos-gira { to { transform: rotate(360deg); } }
  @keyframes seguinos-cae {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(260px) rotate(var(--giro)); }
  }
  @keyframes seguinos-sello {
    0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    70% { transform: scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes seguinos-rebota {
    0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes seguinos-sube {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes seguinos-brillo {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }
}

/* --------------------------------------------------------------------------
   MIENTRAS NO ESTABAS (`mostrarLoQuePasoMientrasNoEstabas()` en `inicio.js`,
   15/10/2026): lo que decidió tu ayudante con el asunto del día vencido.
   Segunda vuelta del mismo día, pedida por Alberto: «imágenes de fondo, el
   modal un poco más grande, texto centrado, más onda». La foto del asunto
   ocupa el fondo entero y se apaga hacia abajo, donde se lee; arriba van el
   sello ácido y el titular condensado, como la invitación a seguirnos. Cada
   decisión es una tarjeta de vidrio, centrada, con lo que eligió en una
   pastilla.
   -------------------------------------------------------------------------- */
.convoca--ausencia {
  position: relative;
  isolation: isolate;
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  text-align: center;
  background: #0b0d0c;
}
.ausencia__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.ausencia__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 42% at 50% 22%, rgb(8 10 9 / 0.55), transparent 75%),
    linear-gradient(180deg, rgb(8 10 9 / 0.35) 0%, rgb(8 10 9 / 0.55) 30%, rgb(8 10 9 / 0.88) 62%, rgb(8 10 9 / 0.97) 100%);
}
.ausencia__cabeza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: clamp(28px, 6vh, 56px) var(--sp-8) var(--sp-7);
}
.ausencia__sello {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ausencia__eco {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.85);
}
.ausencia__titulo {
  text-wrap: balance;
  margin: 0;
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.75), 0 1px 3px rgb(0 0 0 / 0.6);
}
.ausencia__lista {
  display: grid;
  gap: var(--sp-5);
  width: min(620px, 100%);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  box-sizing: border-box;
}
.ausencia__caso {
  padding: var(--sp-7) var(--sp-8);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-lg);
  background: rgb(14 16 15 / 0.86);
  backdrop-filter: blur(12px);
}
.ausencia__asunto {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fff;
}
.ausencia__eligio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}
.ausencia__eligio span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ausencia__paso {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: rgb(255 255 255 / 0.94);
}
.ausencia__nota {
  margin: var(--sp-7) auto 0;
  padding: 0 var(--sp-8);
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.8);
}
.ausencia__pie {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: var(--sp-7) var(--sp-8) var(--sp-9);
}
.ausencia__pie .action { min-width: 240px; justify-content: center; }

@media (max-width: 560px) {
  .ausencia__cabeza { padding-inline: var(--sp-6); }
  .ausencia__lista, .ausencia__nota { padding-inline: var(--sp-6); }
  .ausencia__caso { padding: var(--sp-6); }
  .ausencia__eligio { flex-direction: column; gap: var(--sp-3); padding: 0; background: none; }
  .ausencia__asunto { text-wrap: balance; }
  .ausencia__pie .action { width: 100%; min-width: 0; }
}

/* coronacion.css */
/* ==========================================================================
   El Camino DT — La coronación del ascenso
   --------------------------------------------------------------------------
   La cuarta pantalla que se pinta con los colores del club, y la que menos se
   parece a las otras tres pese a compartir su forma. La bienvenida presenta un
   CLUB, la vuelta olímpica presenta un TÍTULO, la mudanza presenta una
   CATEGORÍA; ésta presenta un ESCALÓN — de dónde salís y adónde vas— y ése es
   el único elemento que no existe en ninguna de las otras.

   NO COMPARTE CLASES CON NINGUNA, por el mismo motivo que ellas no las
   comparten entre sí: las cuatro quieren cosas distintas de la banda, y
   compartir clases deja a cada una pagando por lo que necesitan las otras cada
   vez que una se toque.

   --------------------------------------------------------------------------
   EL ESCALÓN ES LA PIEZA, Y ES LA QUE HAY QUE DEFENDER
   --------------------------------------------------------------------------
   `.corona__salto` dibuja lo que la vuelta olímpica no sabe decir:

       EL AÑO QUE VIENE  ↑  PRIMERA DIVISIÓN

   Es literal y es la razón de que esta escena exista: un club del ascenso no da
   la vuelta por una copa, da la vuelta porque el año que viene juega en otro
   lado. Si alguna vez hay que sacrificar algo de esta pantalla por espacio, se
   sacrifican las tarjetas — el escalón, no.

   LA FLECHA ES DECORATIVA Y LO DICE (`aria-hidden`), así que lo que queda tiene
   que decirse solo: «El año que viene · Primera División» se lee entero sin
   ella. Ésa es la vara para cualquier flecha de este proyecto — si al sacarla la
   caja deja de significar, la flecha era un dato y no un dibujo, y entonces no
   puede estar oculta.
   ========================================================================== */

.corona {
  /* Los mismos 680 de la vuelta olímpica y de la mudanza. Que las tres midan
     igual es parte de que se lean como la misma familia. */
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--sombra-modal);
}

.corona::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   LA BANDA
   --------------------------------------------------------------------------
   El color del club entero, como la vuelta olímpica: acá no se apaga nada, que
   es toda la diferencia con la caída de `mudanza.css`.

   LA FRANJA ENTRA POR LA IZQUIERDA Y SE CORTA ANTES DEL TEXTO, y ESTA banda es
   la que lo pidió: el titular de acá es el nombre de la categoría ganada, o sea
   el más largo de la familia —«Primera B Metropolitana», 23 caracteres— y es el
   que Alberto vio partido al medio por la franja blanca de Sportivo Barracas el
   8/9/2026. El argumento entero, la medición de los 1.656 clubes y las dos
   correcciones que se probaron y no sirven están en `bienvenida.css`; lo mide
   `herramientas/franja-bajo-el-texto.html`, y con `?control=1` se ve este mismo
   titular partido por la franja de antes.
   -------------------------------------------------------------------------- */

.corona__banda {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 28px;
  color: var(--club-tinta);
  background:
    linear-gradient(112deg, var(--club-franja) 0 9%, transparent 9.4%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  border-bottom: 1px solid color-mix(in srgb, var(--club-fondo) 55%, black);
}

.corona__escudo {
  width: 84px;
  height: 84px;
  --halo: 1.5px;
  object-fit: contain;
  flex: none;
  /* El halo del rescate va delante y se compone acá: `filter` no se suma. */
  filter: var(--halo-filtro, ) drop-shadow(0 3px 8px hsl(0 0% 0% / 0.45));
}

.corona__id { min-width: 0; }

/* SIN OPACIDAD, y es de las cinco bandas: `opacity` no apaga una tinta, la
   mezcla con el fondo que tiene debajo, y en la coronación eso dejaba 768 de
   los 1.673 clubes por debajo de 4,5:1 contra los 191 del lavado solo. La
   jerarquía la hacen el tamaño, el peso, las mayúsculas y el `tracking`. La
   medición entera está en `bienvenida.css`. */
.corona__eco {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* EL DATO GRANDE ES LA CATEGORÍA QUE GANASTE, y no «Campeón de Liga». El nombre
   genérico ya está en el eco de arriba; lo que distingue a este campeonato de
   los otros doce del juego es CUÁL se ganó. */
.corona__titulo {
  margin: 4px 0 3px;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.015em;
}

.corona__club { font-size: var(--fs-lg); }

.corona__marca {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 6px;
  border-radius: var(--r-pill);
  /* El plato claro, como en la vuelta y en la bienvenida: los logos de división
     son dibujos oscuros y sobre el bordó de Los Andes desaparecen. */
  background: var(--ink-100);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   EL ESCALÓN
   -------------------------------------------------------------------------- */

.corona__cuerpo { padding: 22px 28px 8px; }

.corona__salto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--bg-row);
  /* Los nombres largos —«Campeonato Brasileiro Série B»— se acomodan en dos
     renglones en vez de desbordar la caja. */
  flex-wrap: wrap;
  text-align: center;
}

/* EL RÓTULO, Y NO LA CATEGORÍA DE LA QUE SALÍS. Acá había un «Primera
   Nacional» tachado, que era bonito y era la tercera vez que esa categoría
   aparecía en la misma pantalla —el titular ya la dice—. Lo que faltaba no era
   el origen sino CUÁNDO, así que el hueco se llenó con eso. */
.corona__cuando {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* La flecha lleva el color del club: es la única pieza del cuerpo que lo trae,
   y por eso el escalón se lee como parte de la banda y no como un panel más. */
.corona__flecha {
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--club-franja);
  /* El segundo color de un club puede ser casi el fondo del panel —los clubes
     de negro y bordó— así que la flecha se apoya en su propio peso además del
     color: sin esto desaparece en unos cuantos. */
  font-weight: 700;
  text-shadow: 0 0 12px color-mix(in srgb, var(--club-franja) 45%, transparent);
}

/* Adónde vas: el dato encendido de la caja. */
.corona__hasta {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
}


/* --------------------------------------------------------------------------
   LAS TARJETAS
   --------------------------------------------------------------------------
   `auto-fit` y no `repeat(3)`: la tercera —la ventaja— puede no existir, y la
   segunda tampoco si el campeón salió de un cuadro sin tabla. Es la misma
   retícula de la vuelta olímpica y por el mismo motivo.
   -------------------------------------------------------------------------- */

.corona__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.corona__dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 15px 18px;
  background: var(--bg-row);
  min-width: 0;
}

.corona__valor {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.corona__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* EN `--text-muted` Y NO EN EL APAGADO. El barrido no la acusó —con la carrera
   sembrada `laVentajaDelCampeon()` devuelve null y la nota no se dibuja— pero
   es la HERMANA EXACTA de `.mudanza__nota`, que sí se midió en 2,67, con el
   mismo token sobre la misma clase de placa. Arreglar una y dejar la otra es
   dejar el defecto esperando a que la carrera del arnés cambie. */
.corona__nota {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Centrado como los demás pies del juego; el criterio vive en `.dialogo__pie`. */
.corona__pie {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  padding: 20px 28px 24px;
}

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   --------------------------------------------------------------------------
   El escalón se acuesta: de dónde venís arriba, adónde vas abajo, y la flecha
   girada noventa grados entre los dos. En 375 px «Primera Nacional ↑ Primera
   División» en una línea deja los dos nombres partidos por la mitad, y ahí el
   dibujo deja de ser un escalón para ser cuatro palabras sueltas.

   Las tarjetas se acuestan por lo mismo que en `mudanza.css`: tres columnas de
   88 px cortan las notas, y un dato que no se termina de leer no es un dato
   chico, es un dato que no está.
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  /* SIN LA DIAGONAL, Y ESTO ES DE LAS CUATRO BANDAS DEL JUEGO. En una de 344 el
     texto cruza la franja —el eco y el titular llegan a 328 y la franja empieza
     a los 201, medido— y ahí el texto se apoya sobre el segundo color del club.
     Eso sólo se lee cuando ese color es oscuro: **la tinta del club no llega a
     4,5:1 contra su propia franja en 1.221 de los 1.656 clubes (73,7 %)**, y el
     peor caso da 1,00 —blanco sobre el amarillo puro de UE Sant Andreu—, o sea
     el renglón directamente no está.

     ACÁ DECÍA ADEMÁS QUE «EN UNA BANDA DE 680 EL TEXTO TERMINA MUCHO ANTES DE
     LA FRANJA», y era la única parte que no se había medido: el titular llega
     al 83 % del ancho, y esa misma mañana del 8/9/2026 Alberto encontró la
     coronación de Sportivo Barracas con «Primera B Metropolitana» partido al
     medio por la franja blanca. Desde entonces la diagonal se corta antes del
     texto en TODOS los anchos —112°, del 0 al 9 %, como la mesa—, así que esta
     regla ya no es la única que lo evita; se queda porque en 344 la cuña
     tampoco tiene lugar. La medición entera y las dos correcciones que se
     probaron y no sirven están en `bienvenida.css`.

     Se saca la diagonal y no se mueve el texto porque la diagonal es lo
     prescindible: la identidad la siguen dando el color de la banda y el
     escudo, que es lo que se reconoce de lejos. Correrla a la derecha no
     alcanzaba —el texto llega al 95 % del ancho— y achicar la columna de texto
     deja los nombres largos en cuatro renglones.

     Escrito en las cuatro hojas y no en una compartida por el mismo motivo por
     el que las cuatro bandas no comparten clases; lo que se comparte es el
     porqué, y vive acá. */
  .corona__banda {
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  }

  .corona__titulo { font-size: var(--fs-xl); }
  .corona__escudo { width: 52px; height: 52px; --halo: 0.94px; }
  .corona__banda { padding: 18px 16px; gap: 12px; }
  .corona__marca { width: 32px; height: 32px; padding: 4px; }
  .corona__cuerpo { padding: 18px 16px 6px; }

  .corona__salto {
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
  }
  .corona__flecha { transform: rotate(0deg); font-size: var(--fs-lg); }


  .corona__datos { grid-template-columns: 1fr; }
  .corona__dato {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'valor label' 'valor nota';
    column-gap: 14px;
    padding: 11px 14px;
  }
  .corona__valor {
    grid-area: valor;
    align-self: center;
    font-size: var(--fs-lg);
    min-width: 76px;
  }
  .corona__label { grid-area: label; }
  .corona__nota {
    grid-area: nota;
    margin-top: 0;
    white-space: normal;
    overflow: visible;
  }

  .corona__pie { padding: 16px 16px 20px; }
  .corona__pie .action { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   LA ENTRADA
   --------------------------------------------------------------------------
   Sube, como la vuelta olímpica y como el ascenso de `mudanza.css`: es el gesto
   de algo que llega. Los mismos 320 ms, que es lo que dura la única animación
   del juego a la que se le permite durar.

   Quien pidió que no se mueva nada, que no se mueva nada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .corona[open] { animation: corona-entra 320ms var(--ease); }
  @keyframes corona-entra {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}