/* ========================================================================== El Camino DT — La portada -------------------------------------------------------------------------- LA TAPA. La primera pantalla del juego, y la única que existe antes de que exista una carrera. HASTA EL 21/8/2026 ERA UN CARTEL CENTRADO: el lockup enorme, una placa con la partida debajo y nada más, con este motivo escrito acá mismo — «un fondo, una ilustración o una tira de escudos detrás serían decoración en el único sitio donde el producto todavía no dijo qué es». El motivo era bueno y la conclusión era la equivocada: el problema de esa pantalla no es que le faltara decoración, es que **no decía que esto es fútbol**. Un juego de dirección técnica abría con la portada de una aplicación. La forma nueva es la de una TAPA DE DIARIO DEPORTIVO —Olé, Marca— porque es la única gramática que un hincha lee sin que se la expliquen: cabecera, antetítulo, titular grande, bajada, columna de al lado y zócalo abajo. Y porque esa gramática es PLANA por definición —bloques de color pleno, filetes duros, cero relieve—, que es exactamente lo que este sistema pide en su primera línea: sin sombras, sin cristal y sin degradados. LO QUE NO CAMBIÓ, Y ES LA MITAD DEL DISEÑO: · **Cero tokens nuevos.** El «rojo de tapa» es el MAGENTA del juego, que ya era el color de los rótulos. La acción sigue siendo violeta, porque el violeta es lo que responde al dedo y nada más. · **Cero datos inventados.** Los cuarenta y dos torneos del zócalo salen de `FORMATOS` y de `formaDeLiga()`, las tres cifras se cuentan del universo al abrir, y el titular es la frase que el juego ya usa para presentarse. · **La acción es UNA y se ve desde la puerta.** Sigue siendo una pantalla de modo Operate: el que abre viene a entrar, no a leer la tapa. ========================================================================== */ /* LA PÁGINA NO TIENE ALTO FIJO, y es un cambio a propósito. La versión de antes hacía `height: var(--alto-ventana); overflow: hidden` porque no había nada que bajar; esta tapa tiene tres estratos y el de arriba —el titular— crece con el nombre del club, así que un alto clavado es la bomba de tiempo que este proyecto ya se comió una vez: lo que crece dentro de una caja cerrada no se puede alcanzar. `min-height` con la rejilla de tres filas hace las dos cosas: en una ventana normal la tapa ocupa el alto entero y el zócalo queda apoyado abajo, y en una donde no entra, la página se suelta y se scrollea como cualquier otra. FUERON CUATRO FILAS UNAS HORAS Y VOLVIERON A SER TRES, y conviene dejar el número medido por si a alguien se le ocurre sumar un estrato al pie. El recuadro del otro juego vivió entre la nota y el zócalo, y costaba esto: ventana sobra sin recuadro sobra con recuadro 1920×1080 0 (justo) 0 (justo) 1512× 982 0 (justo) 0 (justo) 1440× 900 0 (justo) −30 1280× 800 −82 −130 La fila del medio es `1fr`, o sea `minmax(auto, 1fr)`: ESTIRA pero no encoge. Arriba de 982 todavía se estaba estirando y una fila más se le comía el estirón sin que la página se soltara; a 900 la nota ya está en su alto natural y no tiene nada que ceder, así que la fila nueva se paga entera. **Un estrato al pie de esta pantalla cuesta su alto en toda ventana de 900 o menos.** Se fue a la cabecera, que tenía el aire de sobra, y esta rejilla volvió a ser la de antes. */ body { display: grid; /* LA COLUMNA SE DECLARA, Y NO ES DECORACIÓN. Una rejilla sin columnas escritas hace UNA de ancho `auto`, o sea del ancho de su hijo más ancho —y el zócalo, que por dentro lleva una cinta de cuarenta y siete torneos puesta dos veces, mide ocho mil píxeles. Medido antes de esta línea: la tapa arrancaba en x=7516 y la ventana mostraba el hueco que quedaba a la izquierda de la cinta. `minmax(0, 1fr)` es lo que le permite a la columna ser más angosta que su contenido, que es la condición para que el `overflow: hidden` de la cinta llegue a aplicarse. */ grid-template-columns: minmax(0, 1fr); /* `1fr` A SECAS EN LA FILA DEL MEDIO, Y NO `minmax(0, 1fr)`. Los dos suenan igual y no lo son: `minmax(0, …)` deja que la fila se encoja POR DEBAJO de su contenido, y entonces lo que sobra no empuja la página — se mete debajo de la fila siguiente. Con la pizarra puesta en la columna, las cifras quedaban tapadas por el zócalo en una ventana de 900. `1fr` es `minmax(auto, 1fr)`: la fila crece hasta su contenido y la página se suelta, que es lo que esta hoja decidió arriba. En la columna de al lado el `minmax(0, …)` SÍ va, y por lo contrario: ahí lo que hay que permitir es que la cinta del zócalo se recorte. */ grid-template-rows: auto 1fr auto auto; min-height: var(--alto-ventana); background: var(--bg-page); } /* -------------------------------------------------------------------------- LA CABECERA -------------------------------------------------------------------------- El nombre del diario y la fecha de la edición, a sangre, con el filete de color debajo. Se apoya en el fondo del CHROME y no en el de la página: la barra a la que se entra un clic después es de ese tono, así que la puerta arranca con la misma madera. -------------------------------------------------------------------------- */ /* NO ES `space-between`, Y DEJÓ DE SERLO EL DÍA QUE ENTRÓ LA TERCERA PIEZA. Con dos hijos —marca y firma— `space-between` los mandaba a las dos puntas y estaba bien. Con tres, el del medio se planta EN EL MEDIO: la placa se fue a la derecha, la marca quedó a la izquierda y el café apareció flotando en mitad de la cabecera, sin nada alrededor. El arreglo es `flex-start` acá y `margin-left: auto` en la pieza de la derecha. Y desde el 31/8/2026 esa pieza es UNA SOLA —`.tapa__firma`, con la esquina entera adentro—, que es lo que saca del medio la trampa que este comentario documentaba: el `auto` tenía que ir SIEMPRE en la primera pieza del grupo derecho, y quedaba en la que había sido primera alguna vez, así que el día que se reordenara volvía el café al medio de la cabecera. Con dos hijos y el `auto` en el segundo, reordenar la esquina ya no puede romper la cabecera: lo que se reordena está adentro del bloque. */ .tapa__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: var(--sp-6); padding: var(--sp-7) var(--sp-8) var(--sp-6); background: var(--bg-chrome); border-bottom: 3px solid var(--mag-500); } /* EL LOCKUP BAJA DE 6rem A 3.4rem, y hay que decir por qué, porque el comentario que estaba acá defendía lo contrario: «la portada se queda con el lockup grande, y ahora es su casa». Sigue siendo su casa y sigue siendo el lockup de marca — lo que cambió es quién manda en la pantalla. En una tapa, el objeto más grande es el TITULAR, nunca la cabecera: un diario cuyo nombre pesa más que su noticia es un diario sin noticia. A 6rem el lockup era la pantalla entera y el estado de la partida quedaba de pie de página; a 3.4 es una cabecera de verdad y el titular de abajo, a 5.5rem, es lo que se lee primero. 3.4 Y NO 2.6, Y EL NÚMERO LO DECIDIÓ UNA MEDICIÓN, no el gusto. La primera versión puso 2.6 —se veía bien— y con eso el `DT` del lockup, que es `0.42em` del alto, quedó en 17 px. Ese `DT` es el punto de contraste más bajo de todo el juego: 3,28:1 sobre el fondo del chrome. A 37 px eso pasaba por TEXTO GRANDE, que sólo necesita 3:1, y estaba declarado así en el expediente de la pantalla; a 17 px dejó de ser texto grande y pasó a necesitar 4,5. O sea que achicar la cabecera había convertido una excepción declarada en un incumplimiento silencioso. A 3.4rem el `DT` mide 23 px con peso 900, vuelve a ser texto grande y el 3,28 vuelve a alcanzar. Y 3.4 no es un número nuevo: es exactamente el porte que el lockup ya tiene en el selector de clubes. */ .tapa__marca { --marca-alto: 3.4rem; margin: 0; justify-items: start; } /* LA FECHA DE LA EDICIÓN. Un diario se fecha, y la fecha de este juego es la temporada y la jornada — que además es lo que la placa vieja gastaba en dos cifras grandes en el medio de la pantalla. Acá arriba dice lo mismo, ocupa un renglón y deja la parte de abajo para lo que importa. Sin carrera no hay edición y este bloque no existe: un diario sin fecha es mejor que uno fechado el día que no salió. */ .tapa__edicion { flex: none; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .tapa__edicion:empty { display: none; } /* EL SELLO DE BUILD. Misma voz exacta que la fecha de la edición de acá arriba —mismo cuerpo, mismo gris, mismo tracking, mismas cifras tabulares— y es una decisión y no pereza: el contraste de `--text-muted` sobre `--bg-chrome` ya está medido y en verde en el barrido de las dieciséis pantallas, así que reusarlo entero es la única forma de agregar un renglón sin abrir un caso de contraste nuevo que después hay que ir a medir. Un gris más apagado —que es lo que uno quiere para el dato más callado de la tapa— habría que inventarlo y volver a pasar el barrido por un renglón que dice el número de una build. LO ÚNICO QUE NO HEREDA ES `text-transform: uppercase`, y el motivo es el hash: con la regla puesta saldría «14D7788» y dejaría de poder compararse a ojo contra lo que imprime git. Estuvo unas horas sin motivo el 31/8/2026, mientras el hash no se mostraba, y volvió con él. Vale además para el otro caso: cuando el sellado no corre, este renglón dice «BUILD trabajo» o «BUILD sin commit», y esas dos palabras tienen que leerse como las palabras que son y no como un rótulo más de la tapa. La palabra va en mayúsculas en el texto; la versalita la hace el tracking, no la hoja. */ /* SIN `letter-spacing` DESDE EL 3/9/2026. El `--tracking-label` es el tratamiento de un RÓTULO —letras espaciadas para que una palabra corta en versalitas respire— y acá lo que hay es un NÚMERO tabular. Es el mismo error que el café tenía en grande: formato de etiqueta puesto sobre algo que no es una etiqueta. Ya había un token diciéndolo, `font-variant-numeric: tabular-nums`, que es la voz de dato de este sistema; el tracking la contradecía en la misma regla. MEDIDO a 1440×900, el renglón sellado: «260903.0019 · 8ef0» con tracking (lo de hasta hoy) 156,9 px «260903.0019» con tracking 106,3 px «260903.0019» sin tracking 94,4 px O sea 62,5 px entre las dos puntas, 12 de ellos de puro espaciado. PERO EL SELLO NO ES LA ESQUINA, y ésa es la cifra que hay que anotar. Medida la esquina entera con el sello simulado en su formato de prod —local dice «BUILD trabajo», que es más corto y esconde el efecto—: esquina con carrera 530,3 → 488,1 (−42,2) esquina sin carrera 488,1 → 488,1 (0) Con carrera el sello devuelve 42,2 y no los 62,5: al angostarse deja de ser la fila más ancha y la de abajo —placa y café— toma la posta en 488,1. Un piso, no una resta. Sin carrera no devuelve NADA, porque ahí la fila de arriba está corta desde el principio: la edición se esconde vacía. Es la regla que `deploy.sh` ya tenía escrita —«SIN CARRERA EL SELLO NO MANDA»— y el error que ese archivo confiesa haber cometido una vez: medir un estado y anotar el número como si fuera EL umbral. EL CUERPO NO BAJA DE `--fs-2xs`. Bajarlo a 11 px daba 80,3 —otros 14— pero 11 no es un tamaño de este sistema, y la portada es la única pantalla que ve un desconocido: no es donde se estrena un tamaño inventado. */ /* EL `margin-left: auto` ES LO QUE HACE QUE EL INTERCAMBIO FUNCIONE EN LOS DOS ESTADOS, y sin él el cambio del 3/9 se veía bien y estaba roto a la mitad. La fila usa `space-between`, que reparte DOS piezas a los dos bordes; con una sola las manda al principio. Y acá hay una sola cada vez que no hay partida: `.tapa__edicion:empty` se esconde. O sea que el sello, ahora que va segundo, se iba al borde IZQUIERDO justo en el estado del que entra por primera vez — que es el único estado que ve un desconocido, y el que nadie mira al editar porque el taller siempre tiene una carrera empezada. Con el margen automático el sello se empuja al borde derecho por su cuenta, haya o no haya edición al lado, y `space-between` deja de ser el que decide. Comprobado en los dos estados escondiendo la edición a mano, no razonándolo. */ .tapa__build { flex: none; margin-left: auto; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* LA ESQUINA DE LA CABECERA: DOS FILAS DE DOS. ┌────────────────────────────────────────────┐ │ 260831.2256 · 14d7788 TEMPORADA 4 · … │ 17px, voz de imprenta │ [ EL ORIGINAL · El Camino ] [ UN CAFÉ ] │ 62px, las dos salidas └────────────────────────────────────────────┘ └ los cuatro TEXTOS sobre las mismas dos verticales; los filetes de las pastillas sobresalen 13 px por costado. FUE UNA COLUMNA DE TRES RENGLONES HASTA EL 31/8/2026 —fecha, sello y café, pegados al borde derecho, con la placa suelta al costado— y el motivo del cambio es que se veía amontonada. Con dos renglones la columna funcionaba; con tres dejó de funcionar, y no por el alto: tres cajas de 109, 328 y 178 px alineadas a la derecha dan un borde izquierdo dentado, sin nada que las agrupe y sin nada que las separe. El porqué entero, con los números, está en `home.html` sobre este mismo bloque. EL `space-between` DE CADA FILA ES LO QUE LE DA FORMA. El bloque lo mide la fila más ancha y la otra reparte su sobrante en el medio, así que las cuatro piezas anclan las cuatro esquinas de un rectángulo en vez de flotar. CUÁL DE LAS DOS FILAS MIDE DEPENDE DEL SELLO, y conviene tenerlo escrito: en la carpeta de trabajo el sello dice «BUILD trabajo» (109,4 px) y la esquina mide 499,5; en producción dice «260831.2256 · 14d7788» (198,6 px) y mide 588,8. Lo que hay que entender de esta esquina es que CRECE CON EL LARGO DEL SELLO, que antes no le movía nada porque el ancho lo fijaba la fecha; y lo que hay que vigilar es dónde APILA, o sea dónde la cabecera pasa de 127,8 a 230,4 px porque la esquina deja de entrar al lado del lockup. Con este sello, a ≤880 de ventana; con la palabra «BUILD» delante (251,3 px), a ≤920; con el sello largo de antes (270,6), a ≤940. El ancho se mueve unos ocho píxeles según qué letras le toquen al hash, así que el umbral es aproximado a un escalón de ventana. Y EL HUECO DE ESA FILA ES `--sp-9` (32) Y NO `--sp-6` (16), que es lo que estaba escrito hasta que se miró la foto con el sello de producción puesto: con 16, el final del sello y «TEMPORADA 4…» quedan a 17 px, y son dos textos del mismo cuerpo, el mismo gris y las mismas versalitas. Es el defecto que la columna vieja ya documentaba para el café y la fecha —«se leen como UNA sola cadena»— y acá vuelve por la puerta de al lado. El hueco es el mínimo: cuando sobra ancho, el `space-between` los separa más. `align-items: stretch` en la columna, que es el default y por eso no está escrito, es lo que le da a las dos filas el mismo ancho; sin él cada una mediría lo suyo y el `space-between` de la de arriba no repartiría nada. EL ALTO ES 85,45 Y EL DEL LOCKUP 86,19, o sea que la fila de la cabecera la sigue midiendo la marca y la cabecera se queda en 128,05 px — el mismo número exacto que antes de esta tanda. Sale de 16,84 de la línea de imprenta + 6 de hueco + 62,13 de la placa. NO SOBRA NADA: a 1440×900 esta pantalla entra justo —lo dice la tabla de `body`, «0 (justo)»—, así que 1 px de más acá es 1 px de barra de desplazamiento. El hueco de 6 es `--sp-3` justamente porque `--sp-4` (8) se come el aire que queda. Por eso tampoco lleva el `padding-bottom` que tenía la columna vieja: los 4 px que separaban el café del borde ahora los pone el hueco entre las filas. Y NO LLEVA `flex: none`, que es lo que llevaba la columna vieja «para que la cabecera no la encoja». Acá el encogimiento es justo lo que hace falta: en la franja donde la esquina no entra al lado del lockup, primero se va sola a un segundo renglón —`flex-wrap` de la cabecera— y después, si ahí tampoco entra, se achica y sus dos filas envuelven. Con `flex: none` el bloque se quedaba en sus 615 px de ancho ideal y la página se salía de la ventana: medido a 601 px pedía 641 de scroll horizontal. Lo que no se parte nunca son las piezas: las cuatro llevan `nowrap` o son cajas de ancho propio. */ .tapa__firma { min-width: 0; margin-left: auto; display: flex; flex-direction: column; gap: var(--sp-3); } /* EL `padding-inline` ES LO QUE TERMINA DE MATAR EL BORDE DENTADO, y es el resto que quedó del reordenamiento del 31/8/2026. La esquina se pasó a dos filas de dos para que las cuatro piezas anclaran las cuatro esquinas de un rectángulo, y a nivel de CAJA quedaron ancladas — pero las de abajo son pastillas con `padding-inline: var(--sp-5)` y un filete de 1 px, así que su TEXTO empieza 13 px adentro de su borde y el de la línea de imprenta no. El ojo alinea texto con texto, no caja con caja: medido a 1440×900, «BUILD…» arrancaba en 889,0 y «EL ORIGINAL» en 902,9, y del otro lado «…AGOSTO 2029» terminaba en 1414,1 y el café —que entonces decía «INVITAME UN CAFÉ»— en 1400,1. Catorce píxeles de escalón en cada costado, simétricos, que es justo lo que se ve como desprolijo sin poder señalarlo. Con esos px acá, los cuatro textos caen sobre las mismas dos verticales y los filetes de las pastillas sobresalen — que es lo que un filete tiene que hacer. El valor no es un número suelto: es el relleno de la pastilla de ese costado más el borde, escrito como lo que es. Si algún día cambia el relleno de una pastilla, este renglón se mueve con ella. UN SOLO VALOR ALCANZA MIENTRAS LAS DOS PASTILLAS TENGAN EL MISMO RELLENO, y el 1/9/2026 se vio lo que pasa cuando no: el café estuvo unas horas en `--sp-3` y este renglón tuvo que partirse en `padding-left` y `padding-right`, porque cada costado lo ancla una pastilla distinta —la izquierda la placa, la derecha el café—. Un `padding-inline` ahí alinea un costado y desalinea el otro, en silencio, y el que se desalinea es el derecho: el de la fecha de la edición, que es la pieza más larga de la fila. El café volvió a `--sp-5` el mismo día (ver `.tapa__cafe`), así que acá vuelve a alcanzar uno solo — pero la próxima vez que alguien toque el relleno de una de las dos, esto se parte otra vez o se desalinea. EN EL TELÉFONO SE APAGA, y el porqué está abajo en el quiebre de 600: apilada la esquina no tiene columna de al lado con la que alinearse, y la sangría costaba 17 px de página por partir la fecha de la edición en dos renglones. Ahí abajo el sello tampoco se pinta, así que lo que esta sangría indentaría es un solo renglón contra dos pastillas — más razón todavía para apagarla. La fila de arriba, alineada por la BASE y no por la caja: los dos textos tienen el mismo cuerpo, pero alinear cajas de texto por el borde superior es apostar a que nunca cambie el interlineado de uno de los dos. EL `line-height` NO ES COSMÉTICO ACÁ, ES LO QUE DEVUELVE EL PÍXEL QUE FALTA. Con el interlineado heredado, la caja de este renglón mide 18,25 px y la esquina entera 86,86 contra los 86,19 del lockup — o sea que la fila de la cabecera pasaba a medirla la esquina y no la marca, y la cabecera crecía de 128,05 a 128,73. Nada que se vea; todo lo que importa en una pantalla que a 1440×900 entra JUSTO. A 1.2 el renglón mide 15,6, la esquina 84,2 y la fila vuelve a medirla el lockup, con 2 px de aire. */ .tapa__imprenta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-9); line-height: 1.2; padding-inline: calc(var(--sp-5) + 1px); } /* LOS TRES `flex-wrap: wrap` —éste, el de la cabecera y el de la fila de abajo— TAPAN UN AGUJERO QUE YA ESTABA, y conviene decir que no lo trajo el reordenamiento. Entre el quiebre del teléfono (600) y el ancho en que la cabecera entra de una pieza, nada se apilaba y nada se partía: la cabecera simplemente se salía de la ventana. Medido a 700 px de ancho ANTES de esta tanda, la página pedía 931 px de scroll horizontal; después del reordenamiento y sin los `wrap`, 887. Con ellos, 700. Es la franja que `medir-en-la-ventana-chica` avisa que nadie mira: no es un teléfono, no es un escritorio, y sólo se ve arrastrando el borde de la ventana. No se arregla moviendo el quiebre de 600 a 912, que es lo primero que uno piensa: ese quiebre también gobierna el titular, el escudo, la pizarra y las tres cifras, y subirlo les cambia el dibujo a todas las tabletas para resolver un problema que es sólo de la cabecera. Envolver es local. */ /* La fila de abajo. `center` desde el 1/9/2026, y eso REVIERTE el `flex-end` que estaba acá con este argumento: «las dos pastillas tienen alturas muy distintas —62 la placa, 27 el café— y lo que las emparenta es apoyarse en la misma línea, que es además la línea de base de la cabecera entera: el borde de abajo del lockup». LA SEGUNDA MITAD DE ESE ARGUMENTO NO ERA CIERTA, y se cae midiendo: a 1440×900 el lockup termina en 103,5 px y el café terminaba en 107,8. No era la línea de base de nada — eran dos bordes a 4,3 px uno del otro, que es la distancia justa para verse desalineados sin que se pueda señalar por qué. Y LA PRIMERA MITAD SE DA VUELTA SOLA. Que las alturas sean muy distintas es exactamente lo que hace que apoyarlas en el mismo borde de abajo no las emparente: el café quedaba colgado del pie de la fila con 35 px de vacío encima, y ese vacío es la única forma que tiene una fila de dos de leerse como una pieza suelta al lado de un bloque. Centrado, el vacío se reparte en 17,7 arriba y 17,7 abajo, y las dos pastillas leen como una fila. NO CAMBIA UN PÍXEL DE ALTO: la fila la sigue midiendo la placa, la esquina sus 85,5 y la cabecera sus 128,1 — el número que esta pantalla no negocia. Lo único que se mueve es dónde cae el café dentro del alto que ya existía. */ /* `stretch` DESDE EL 3/9/2026, y esto revierte el `center` que puso la tanda del 1/9. Aquel argumento era correcto PARA SU PREMISA: con la placa en 62 px y el café en 27, centrar repartía el vacío en 17,7 arriba y 17,7 abajo y las dos leían como una fila en vez de una pastilla colgada del pie. LA PREMISA SE CAYÓ SOLA cuando el antetítulo se fue de la placa: sin ese renglón la placa mide 40,3 y el café 25,8, o sea 14,5 px de diferencia en vez de 35. A esa distancia ya no hace falta repartir un vacío — se puede sacar. Con `stretch` el café toma los 40,3 de la placa y las dos pastillas quedan exactamente iguales de alto, que es lo que centrar sólo podía aproximar. Y NO CUESTA NADA, medido a 1440×900 antes de escribirlo: la esquina sigue en 62,7 y la cabecera en 123,4 con las dos formas. Lo único que cambia es el alto del café, que crece hacia un espacio que la fila ya tenía ocupado. */ .tapa__salidas { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: var(--sp-4) var(--sp-6); } /* ══════════════════════════════════════════════════════════════════════════ LAS DOS SALIDAS DE LA CABECERA: EL CAFÉ Y LA OTRA EDICIÓN ────────────────────────────────────────────────────────────────────────── Son los dos únicos enlaces del juego que se van a OTRO ORIGEN, y desde el 28/8/2026 se ven como una familia: pastilla, magenta y el mismo barrido de izquierda a derecha al tocarlas. Antes el café era un enlace gris subrayado y la placa una caja de filete; los dos pedían que uno los fuera a buscar. ESTO REVIERTE LO QUE DECÍA ESTE MISMO COMENTARIO, y conviene decirlo entero porque el argumento viejo era bueno: «misma voz que `.tapa__callada` —enlace subrayado en gris, sin caja— porque es la misma clase de cosa: algo que está ahí para el que lo busque y que no compite con la acción de la pantalla». Lo que cambió no es el argumento, es la decisión del dueño: Alberto pidió color de contraste y movimiento en los dos. La línea que NO se cruza sigue en pie —ninguna de las dos es un botón lleno de violeta— y es la que protege lo que ese comentario protegía: la puerta tiene UNA acción. EL MAGENTA ES DE LA CABECERA Y NO UN COLOR NUEVO. Es el del filete de tres píxeles de abajo, el del bloque del antetítulo y el de los rótulos. Que las dos salidas se pinten con él las agrupa contra el violeta, que es el color de lo único que hace avanzar ESTE juego. Ninguna de las dos avanza nada. Y NO HAY ANIMACIÓN EN REPOSO, a propósito. Lo único de esta pantalla que se mueve solo de manera continua es el punto de «Partida en curso», y ese punto tiene un trabajo: que el ojo conteste «¿tengo algo empezado?» desde el otro lado de la habitación, antes de leer nada. Una segunda cosa latiendo en la esquina le saca justamente eso. El movimiento de estas dos es al TOCARLAS. EL BARRIDO ES EL GESTO QUE ESTA PANTALLA YA HABLA: el filete de la cabecera se pinta cruzando de izquierda a derecha al cargar, y los dos botones de la nota se llenan igual. Va sobre un pseudoelemento con `transform` —no sobre el `background`, que no se puede animar por GPU— y arranca desde la izquierda, porque una superficie que crece desde el medio es un efecto y una que barre es un gesto. ══════════════════════════════════════════════════════════════════════════ */ /* La mecánica del barrido, escrita una vez para las dos. `overflow: hidden` para que la capa que crece se recorte en la esquina redondeada, y los hijos levantados a `z-index: 1` porque si no la capa los tapa. */ .tapa__cafe, .tapa__otra-edicion { position: relative; overflow: hidden; border-radius: var(--r-md); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tapa__cafe::before, .tapa__otra-edicion::before { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease-entrada); } .tapa__cafe:hover::before, .tapa__cafe:focus-visible::before, .tapa__otra-edicion:hover::before, .tapa__otra-edicion:focus-visible::before { transform: scaleX(1); } /* EL CAFÉ ES LA PASTILLA LIVIANA de las dos: sin relleno en reposo, sólo el filete y la letra en magenta claro. La otra edición lleva relleno desde el reposo, y esa diferencia es la jerarquía — el que abre esta puerta viene a jugar, no a pagar. LA LETRA DEL CAFÉ VA EN BLANCO, y el color lo eligió una medición. Estuvo un rato en `--mag-300`, que daba 7,76:1 en reposo y **6,12 con el barrido puesto**: cumple, pero se apaga justo cuando uno lo está tocando, que es al revés de lo que uno quiere. En `--text-primary` da 16,26 y 12,32. El color de la pastilla lo pone el filete y el relleno; la letra no tiene por qué pagarlo. COMPUESTO SOBRE EL BARRIDO, NO SOBRE EL FONDO PELADO. `color-mix` no devuelve `rgba()` sino `color(srgb 0.91 0.12 0.91 / 0.22)`, con los canales en 0–1 y no en 0–255: el primer barrido de contraste de esta tanda los leyó como 0–255 y dio números que parecían bien y no lo estaban. Y la capa del barrido hay que componerla además del relleno, porque el peor caso es con la pastilla encendida. Ver el defecto que eso destapó abajo, en `.tapa__otra-que`. */ /* EL RELLENO SIGUE EN `--sp-5`, Y ESTUVO EN `--sp-3` UNAS HORAS EL 1/9/2026. Vale contar el episodio entero porque la lección no es del relleno. Ese día el café pasó de decir «Invitame un café» a «Invitame un cafecito» y la pastilla creció 35,15 px de maquetación, que sin carrera —donde la esquina la mide esta fila y no la de imprenta— eran 38 px de umbral de ventana. Alberto pidió recuperarlos DEL RELLENO, y el relleno no los tenía: la pastilla creció 200,00 − 164,85 = 35,15 y los 35,15 eran TODOS LETRAS el texto pasó de 139,01 a 174,16 el relleno entero medía 12 + 12 = 24, más 1,85 de filete O sea que la pastilla PELADA —relleno cero, filete cero— medía 174,16 y seguía siendo 9,31 px más ancha que la de antes. Barrida entera, sin carrera: relleno pastilla esquina apila 12 199,8 484,6 820 8 191,8 476,6 812 6 187,8 472,6 808 ← donde estuvo unas horas 4 183,8 468,6 804 0 175,8 460,6 796 ← el piso, y todavía 14 px corto LO QUE CERRÓ LA CUENTA FUE EL TEXTO: «Un cafecito» en vez de «Invitame un cafecito». El texto cayó a 98,8 y la pastilla a 124,6, así que con el relleno DE VUELTA en sus doce la esquina sin carrera mide 409,3 contra los 449,4 del día anterior. Sobran 40 px de los 38 que se buscaban. Y POR ESO EL RELLENO VOLVIÓ. Una vez que la cuenta la paga el texto, seis píxeles por costado no compran nada y cuestan dos cosas: la pastilla deja de tener el mismo aire lateral que la placa —son una familia y se leen juntas— y la línea de imprenta necesita un `padding-left` y un `padding-right` distintos, porque cada costado lo ancla una pastilla con otro relleno. Con los dos rellenos iguales vuelve a alcanzar un `padding-inline`. LA REGLA QUE QUEDA, que es lo único que hay que llevarse: ANTES DE PROMETER PÍXELES DE UNA CAJA, RESTÁ EL TEXTO DEL ANCHO DE LA CAJA. Lo que sobra es todo lo que hay. Un relleno no puede pagar una cuenta hecha con letras. */ /* NO VA EN VERSALITAS, y esto revierte el formato que tuvo desde el 28/8/2026. El argumento viejo era de familia: la placa de al lado es un rótulo en versalitas y las dos salidas se ven como una sola cosa. Lo que lo tira es el límite que este mismo archivo ya tenía escrito para la placa —«tres palabras, que es lo que un rótulo en versalitas de este juego aguanta»—: acá el texto pasó a ser una PREGUNTA de cuatro palabras, que es prosa y no un rótulo. Y EL PRECIO ESTÁ MEDIDO, que es lo que decide. Misma frase, misma pastilla, a 1440×900: «¿Nos invitás un cafecito?» en versalitas 251,1 px «¿Nos invitás un cafecito?» en caja normal 191,7 px «Invitame un cafecito» (revertida el 1/9) 208,1 px «Un cafecito» en versalitas (lo anterior) 129,8 px O sea que las versalitas costaban 59,4 px de puro formato: la frase en caja normal entra MÁS ANGOSTA que la que el 1/9 se revirtió por gorda. Sin carrera esta fila es la que mide la esquina, así que esos 59,4 px son píxeles de umbral de apilado, no de gusto. Ver el bloque del sello en `home.html`. LO QUE NO CAMBIA ES LA FAMILIA: la pastilla, el filete magenta y el barrido siguen siendo los de la placa. Lo que se separa es la VOZ, y tiene que separarse — la placa nombra otra cosa y ésta pide un favor. */ /* EL `grid` + `place-items` ES LA MITAD QUE PIDE EL `stretch` DE LA FILA. Al tomar el alto de la placa, la caja del café pasó de 25,8 a 40,3 px y su texto se quedaba arriba, con el relleno de 3 px de antes y catorce de vacío debajo: una pastilla alta con la letra apoyada en el techo. Centrarlo devuelve lo que el `stretch` promete —dos pastillas iguales— en vez de sólo igualar los bordes. El relleno lateral no se toca: son los `--sp-5` que la sangría de la línea de imprenta usa como ancla (ver `.tapa__imprenta`). */ .tapa__cafe { display: grid; place-items: center; padding: 3px var(--sp-5); border: 1px solid color-mix(in srgb, var(--mag-500) 40%, transparent); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap; } .tapa__cafe::before { background: color-mix(in srgb, var(--mag-500) 22%, transparent); } .tapa__cafe > span { position: relative; z-index: 1; } .tapa__cafe:hover, .tapa__cafe:focus-visible { border-color: var(--mag-450); } /* -------------------------------------------------------------------------- LA PLACA DE LA OTRA EDICIÓN -------------------------------------------------------------------------- El aviso del otro juego del autor, en la esquina de la cabecera. Por qué está acá y no al pie está en `home.html`, y lo que costaba abajo está medido más arriba en esta misma hoja, sobre `body`. ES UNA PLACA DE FILETE, NO UN BOTÓN. La puerta tiene UNA acción y el violeta es suyo. Lo que le da presencia es la caja y el nombre en la voz condensada del juego —la misma del nombre de club en la barra, en la tabla y en la ficha—, no el color. Y ENTRA EN EL AIRE QUE LA CABECERA YA TENÍA, sin costar NADA: la fila la mide el lockup —80 px de alto de caja— y la placa mide 57, así que cabe adentro. Medido a 1440×900 con la placa apagada y encendida, la cabecera da 128,1 px en los dos casos y la página sobra 0 en los dos: entra entera, con el zócalo apoyado abajo. Al pie, el mismo bloque costaba 30 px y mordía el zócalo. EN EL TELÉFONO SÍ CUESTA, Y HAY QUE DECIRLO: abajo de 600 la cabecera se apila, o sea que ya no hay un lockup al lado cuyo alto absorba la placa. La cabecera pasa de 198 a 269 px medida a 390 — 71 px, un renglón entero, que empujan el titular hacia abajo. Se paga porque ahí esa pantalla ya rueda de todos modos y la placa queda en el primer vistazo, que es para lo que está. Si algún día hay que recuperarlos, el sitio es este quiebre y no el bloque. -------------------------------------------------------------------------- */ .tapa__otra-edicion { flex: none; display: grid; gap: 2px; padding: var(--sp-4) var(--sp-5); background: color-mix(in srgb, var(--mag-500) 13%, transparent); border: 1px solid color-mix(in srgb, var(--mag-500) 55%, transparent); } .tapa__otra-edicion::before { background: color-mix(in srgb, var(--mag-500) 20%, transparent); } .tapa__otra-edicion > * { position: relative; z-index: 1; } .tapa__otra-edicion:hover, .tapa__otra-edicion:focus-visible { border-color: var(--mag-450); } /* ACÁ VIVÍA `.tapa__otra-rotulo` —el «EL ORIGINAL» encima del nombre— y se fue el 3/9/2026 por decisión de Alberto. La regla se borra entera; queda escrito el porqué, porque el argumento que la mató es el mismo que la había pintado. ERA UN ANTETÍTULO, que es la forma que el piso de calidad de este taller no perdona: el nombre se sostiene solo y el rótulo le roba el primer golpe de vista. Y costaba un renglón, que era la mitad del amontonamiento de la esquina —la placa medía 59,9 px de alto contra los 25,8 del café, o sea un bloque al lado de una pastilla en vez de una fila de dos—. EL AVISO NO SE PIERDE, Y LA PRUEBA LA ESCRIBIÓ ESTE MISMO BLOQUE EL 28/8. Ese día el rótulo pasó de magenta a blanco, y el argumento para despintarlo fue: «la placa ENTERA está teñida de magenta, filete incluido; el color no lo lleva la letra, lo lleva la caja». Si en agosto eso alcanzó para sacarle el color a la letra, hoy alcanza para sacar la letra: lo que avisaba era la caja. Y SE LLEVA SU MEDICIÓN, que conviene no perder porque describe la pastilla y no el rótulo: sobre este fondo, `--mag-300` daba 6,91:1 en reposo y 5,35 con el barrido encendido, contra 14,03 y 10,87 del nombre en tinta plena. El número que importa de esa tanda sigue vivo abajo, en `.tapa__otra-que`: es el texto más apagado de la caja el que hay que medir CON el barrido encendido. */ /* El nombre y lo que es, en un renglón y con las dos líneas de base juntas: el nombre en la tinta plena y la bajada en la apagada, que es lo que hace que se lea «El Camino» primero y la explicación después sin que haga falta un segundo renglón. */ .tapa__otra-linea { display: flex; align-items: baseline; gap: var(--sp-4); white-space: nowrap; } /* LA VOZ CONDENSADA ES LA DEL NOMBRE PROPIO EN ESTE JUEGO, y por eso la lleva: acá el nombre de un club se escribe así en la barra, en la tabla y en la ficha. Un nombre propio en la letra de la interfaz se lee como un rótulo. */ .tapa__otra-nombre { font-size: var(--fs-md); font-weight: 700; font-stretch: var(--wd-condensed); letter-spacing: var(--tracking-tight); color: var(--text-primary); transition: color var(--dur-fast) var(--ease); } /* «Acá dirigís; ahí jugás» NO ES DECORACIÓN: los dos juegos se llaman casi igual, y «El Camino» solo dentro de la cabecera de «El Camino DT» se lee como una solapa de este juego. Es la línea más corta que dice que son dos cosas. Y ES LA QUE SE CAYÓ AL MEDIR EL PEOR CASO. Estaba en `--text-muted`, que sobre el fondo pelado del chrome da 5,64:1 y parecía resuelto. Compuesta sobre el relleno de la pastilla y encima el barrido —o sea con el puntero encima, que es cuando uno la está leyendo— caía a **3,87** a 14 px, debajo del 4,5. `--text-secondary` da 6,88 en reposo y 5,32 con la pastilla encendida. Es el defecto que sólo aparece midiendo el ESTADO ENCENDIDO: en reposo los dos tokens cumplían, y el barrido aclara el fondo justo debajo del texto más apagado de la caja. */ .tapa__otra-que { font-size: var(--fs-xs); color: var(--text-secondary); } /* EL FILETE SE PINTA SOLO, UNA VEZ. Es el único momento de autor de esta pantalla y dura lo que dura una placa de transmisión al entrar: la línea de color cruza de izquierda a derecha y la tapa queda impresa. Va sobre un pseudoelemento y no sobre el `border` de la cabecera porque un borde no se puede escalar sin escalar la caja; y arranca desde la izquierda —`transform-origin`— porque una línea que crece desde el medio es un efecto y una que barre es un gesto. */ .tapa__cabecera { position: relative; } .tapa__cabecera::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--mag-500); transform-origin: left center; animation: tapa-filete var(--dur-escena) var(--ease-entrada) both; } @keyframes tapa-filete { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* -------------------------------------------------------------------------- LA APERTURA -------------------------------------------------------------------------- La nota principal y la columna de al lado. Dos columnas y no una: en una tapa, lo que va al costado del titular es lo que se mira DESPUÉS de decidir —los números, el próximo partido— y ponerlo debajo lo mandaría abajo del pliegue en cuanto la ventana se achica. El ancho tope son 1180 px. Se midió igual que se había medido la placa de antes: el nombre de club más largo de los 878 —«Institución Atlética Sud América»— en voz de titular pide tres renglones de columna angosta o dos de ésta, y por encima de 1180 la columna de texto empieza a pedir un titular de más de 6rem, que es el techo del sistema. -------------------------------------------------------------------------- */ /* LA REJILLA SE ESTIRA Y EL CONTENIDO SE CENTRA ADENTRO, que no es lo mismo que centrar la rejilla. Con `align-content: center` en la tapa, la fila medía lo que medía la nota —unos 250 px en una ventana de 900— y el filete que separa las dos columnas era un palito de 150 px flotando en el medio del vacío. Estirada, el filete cruza la franja entera y es lo que estructura la página: es la línea de columna de un diario, que va de arriba abajo. */ .tapa { display: grid; /* LOS DOS BLOQUES ARRANCAN EN LA MISMA LÍNEA, y por eso la fila vuelve a medir lo que mide su contenido en vez de estirarse. Estirada, cada columna centraba lo suyo por separado y los dos escudos caían a alturas distintas —que es lo que el dueño vio—. Ahora la fila se centra ENTERA en la franja y adentro las dos columnas empiezan arriba, así que lo que se alinea es el contenido y no las cajas. El precio, y se declara: el filete que separa las dos columnas ya no cruza la franja de arriba abajo, mide lo que mide la nota. Es una línea de columna de la NOTA, que también es lo que es. */ align-content: center; /* LA COLUMNA MIDE 340 Y EL NÚMERO SALE DEL RENGLÓN DEL COMPROMISO. A 300 le quedaban 275 útiles y la línea más larga de una liga —«Apertura · En el Padre Ernesto Martearena»— pide 274: entraba por un píxel, que es no entrar. A 340 le quedan 315 y las de liga entran todas con aire. Las de COPA no entran y no se persiguen: «Copa Argentina · Treintaidosavos de final · En cancha neutral» pide 396, y llevarla a una línea pedía una columna de 440 que le come el ancho al titular. Se parte en dos, que es lo que hace un pie de foto largo. */ grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-9); width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--sp-9) var(--sp-8); } /* EL RITMO DE LA NOTA NO ES UNIFORME, y por eso no alcanza un `gap`. Son tres grupos y no cuatro renglones: el antetítulo se apoya en el titular —son la misma cosa dicha en dos porte—, la bajada es lo que el titular deja sin decir, y la acción es de otra clase. Agrupar apretado y separar generoso es lo que hace que se lean tres objetos y no cuatro cosas apiladas. */ .tapa__nota { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; } .tapa__nota .tapa__bajada { margin-top: var(--sp-3); } .tapa__nota .tapa__puertas { margin-top: var(--sp-6); } /* EL ANTETÍTULO, EN BLOQUE DE COLOR PLENO -------------------------------------------------------------------------- No es una etiqueta decorativa arriba de un título: dice CUÁNDO —«Temporada 2 · Fecha 7»— o, cuando todavía no hay nada, dice el estado, que es la única información que esa pantalla tiene para dar. Es el mismo dato que la placa vieja ponía en dos cifras grandes; acá pesa lo que tiene que pesar. LA TINTA ES OSCURA Y ESTÁ MEDIDA. Blanco sobre este magenta da 3,59:1 y no alcanza para un texto de 13 px; la tinta más honda del sistema da **5,47:1**. Es la misma regla que el juego ya aplica cuando la superficie es el color de un club: no se elige la tinta, se calcula. */ .tapa__antetitulo { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-4); padding: 3px var(--sp-5); border-radius: var(--r-xs); background: var(--mag-500); color: var(--ink-1000); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums; } /* EL PUNTO QUE LATE ES LO QUE SEPARA LAS DOS TAPAS. Sin partida, el antetítulo dice «No hay carrera empezada» y está quieto; con partida dice «Partida en curso» y le late un punto al lado. Es lo único de la pantalla que se mueve solo de manera continua, y por eso el ojo lo encuentra antes de leer nada — que es exactamente el trabajo: contestar «¿tengo algo empezado?» desde el otro lado de la habitación. VA EN LA TINTA DEL BLOQUE Y NO EN VERDE. El punto de «esto está corriendo» del portal es verde, que es el color del valor bueno; acá el punto vive ENCIMA del magenta, y sobre una superficie de color este sistema no elige la tinta: la calcula. La tinta honda del bloque da 5,47:1 contra el magenta y un verde daría 1,9 — sería un punto que no se ve, latiendo. */ .tapa__pulso { flex: none; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--ink-1000); animation: tapa-pulso 2.4s var(--ease) infinite; } @keyframes tapa-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink-1000) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* EL TITULAR -------------------------------------------------------------------------- Lo más grande de la pantalla, en el ancho más comprimido que tiene la cara y en su peso más alto. Es la voz del titular de tapa y no la del sistema: la escala de la interfaz llega a 34 px, y esto —como el lockup— no es interfaz. El interlineado es 0,88: en versales, dos renglones con el interlineado normal se leen como dos frases sueltas y lo que tienen que formar es un bloque de tinta. Es el mismo 0,86 del lockup, dos centésimas más suelto porque acá los renglones tienen descendentes. EL REGISTRO ES EL DEL SISTEMA, Y ARRANCÓ NO SIÉNDOLO. La primera versión ponía peso 900 y ancho 75 %, que es la letra de un titular de tabloide y no la de este juego: la cara era la misma —TikTok Sans, comprobado en la pantalla— pero ninguna otra superficie del producto usa ese par, así que el titular parecía de otra tipografía. Ahora va en 700 y en `--wd-condensed`, que es exactamente el registro del nombre de club en la barra, en la tabla y en la ficha. Lo que hace grande al titular es el TAMAÑO, que es de donde este sistema saca el énfasis. Sin `clamp()` ni tipografía fluida —el sistema los rechaza—: el tamaño lo pone `--titular` y lo mueven los quiebres del final de esta hoja. */ .tapa__titular { --titular: 5.5rem; margin: 0; font-size: var(--titular); font-weight: 700; font-stretch: var(--wd-condensed); line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; color: var(--text-primary); } /* EL NOMBRE DEL CLUB VA UN ESCALÓN MÁS CHICO QUE LA FRASE, y no es una inconsistencia: es lo que un diario resuelve con dos cuerpos de titular en vez de con uno que se rompe. El titular sin carrera es un texto FIJO que cabe en dos renglones siempre; el nombre de un club es variable, y el más largo de los 878 —«Institución Atlética Sud América»— es lo que pone el techo. MEDIDO CONTRA EL ANCHO DE LA COLUMNA DE LA NOTA, que no es el de la ventana: con la tapa tope de 1180 y la columna de al lado en 300, la nota se queda con 800 px en cualquier ventana ancha, y con 621 justo por encima del quiebre de 1080. (Y se mide en píxeles de MAQUETA: el sitio va con un `zoom` —`--escala-sitio`—, así que `getBoundingClientRect` devuelve esa escala de más y el primer juego de números de esta hoja estaba inflado por eso. El factor se lee del token y no se escribe acá: era 1,08 y desde el 31/8/2026 es 1,04.) columna 5rem 4.5rem 4.25rem 3.75rem 800 px 3 rgl 2 rgl 2 rgl 2 rgl 760 px 3 3 2 2 700 px 3 3 3 2 621 px 3 3 3 3 Se queda en 4.25: es el más grande que entra en DOS renglones con la columna entera, que es donde vive la mayoría de las ventanas. Estuvo en 4.5 mientras la columna de al lado medía 300; cuando esa columna subió a 340 para que el renglón del compromiso entrara en una línea, la nota bajó de 800 a 760 y el peor nombre se fue a tres renglones. Un ancho no se toca solo. En la franja angosta de arriba del quiebre se va a tres, y eso no se persigue — perseguirlo pedía bajar a 3.75 en todo el rango, que es achicar el titular de los 878 clubes por el peor nombre en la peor ventana. Tres renglones entran: comprobado a 1081×800 y a 601×760 sin desborde y sin empujar la acción fuera de la página. Un club de nombre corriente entra en uno. */ .tapa__titular--club { --titular: 4.25rem; } /* EL ESCUDO ES LA FOTO DE LA NOTA, y por eso deja de medir lo que mide en una barra. Una tapa de diario se sostiene en una imagen grande; este juego no tiene fotos —ni de canchas ni de futbolistas— y lo único que tiene para poner es el emblema del club, así que el emblema tiene que trabajar de foto. ESTO REVIERTE UNA DECISIÓN ESCRITA, y conviene decirlo. La versión anterior de esta pantalla igualó el escudo a los 60 px del sistema con este argumento: la puerta y la barra del portal comparten `view-transition-name`, así que al pulsar Continuar el escudo cruza de una a otra, y con dos tamaños distintos el cruce lo cuenta — «una transición que agranda algo está afirmando que ese algo importa más del otro lado». A 48 contra 64 crecía un 33 %, y eso se leía. El argumento sigue siendo cierto y ahora juega para el otro lado. Acá el escudo mide 132 y en la barra 64: al entrar, SE ACHICA a la mitad. Y eso es exactamente lo que pasa —en la puerta tu escudo es la nota, y en el portal es la etiqueta de la barra de herramientas—, así que la transición no está mintiendo: está contando el cambio de papel. Lo que no se puede es que crezca, que sería prometer lo contrario. 132 y no 160: es lo que mide un titular de club de DOS renglones —4.5rem con interlineado 0,88 son 127 px—, así que el renglón no cambia de alto según si el club se llama Platense o Gimnasia y Esgrima La Plata. */ .tapa__quien { display: flex; align-items: center; gap: var(--sp-7); min-width: 0; } .tapa__escudo { width: 132px; height: 132px; --halo: 2.38px; flex: none; } /* La bajada: quién sos. Es la línea apagada de la nota, y la única que puede cortarse — dice el DT y de dónde venís, y ninguna de las dos cosas se pierde por leerse a medias. */ .tapa__bajada { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text-secondary); max-width: 62ch; } /* LAS PUERTAS -------------------------------------------------------------------------- La principal en violeta pleno y con el porte de la tapa —52 px de alto, no los 34 del sistema—: es la única acción de la única pantalla, y en una tapa el botón de entrar no puede ser del tamaño de un botón de tabla. Al lado, en voz baja, las dos que sólo existen con partida empezada, y son dos cosas distintas: «Nueva carrera» pregunta y después te manda a elegir club sin borrar nada —la carrera vieja vive hasta que elijas— y «Borrar la partida» tira el archivo guardado en el acto. Estar las dos, y en ese orden, es lo que hace que la de la derecha no se pulse por error. -------------------------------------------------------------------------- */ .tapa__puertas { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } /* EL RÓTULO VA CENTRADO Y LA PUNTA NO CUENTA PARA CENTRARLO. Con los dos en una fila flexible, «ELEGIR CLUB ›» quedaba con el texto corrido a la izquierda: la flecha ocupaba sitio del renglón y empujaba. Ahora la caja es una rejilla de un solo hueco con el rótulo en el medio, y la punta se cuelga del borde derecho por fuera del flujo — así el texto está centrado de verdad y la flecha sigue diciendo hacia dónde te lleva. Y LOS DOS BOTONES MIDEN LO MISMO (`min-width`), que es lo que hace que la tapa con partida y la tapa sin partida tengan el mismo peso en el mismo sitio: «CONTINUAR» y «ELEGIR CLUB» no tienen las mismas letras y sin un piso la puerta cambiaba de tamaño según el estado. */ /* EL SELECTOR LLEVA TRES CLASES Y NO UNA, y hace falta contarlas: el sistema trae `.action:has(> .i:last-child) { padding-right: var(--sp-4) }` para apretar la flecha contra el borde en los botones normales, y `:has()` pesa lo que pesa su argumento más específico —`.i:last-child`, o sea una clase más una pseudoclase—, así que esa regla vale por TRES clases. Con una sola perdía, con dos también: el relleno quedaba en 8 a la derecha contra 32 a la izquierda y el rótulo se iba 24 px a la derecha del centro. Medido dos veces, que es como se encontró. Es exactamente el defecto que este bloque venía a arreglar, escondido en la hoja de al lado. */ .tapa__puertas .action.tapa__ir { position: relative; overflow: hidden; display: grid; place-items: center; height: 52px; min-width: 244px; padding: 0 var(--sp-9); font-size: var(--fs-xl); font-weight: 700; font-stretch: var(--wd-condensed); letter-spacing: 0.02em; text-transform: uppercase; } .tapa__ir > span { position: relative; z-index: 1; } .tapa__ir .i { position: absolute; right: var(--sp-6); z-index: 1; width: 20px; height: 20px; } /* EL BARRIDO. Es el mismo gesto que el filete de la cabecera y la misma materia: un color pleno que cruza de izquierda a derecha. Que la puerta tenga UN solo movimiento propio, repetido en sus dos sitios, es lo que hace que se lea como un lenguaje y no como dos efectos. Es un relleno plano y no un degradado —el sistema tiene UN degradado en todo el producto y es la acción del chrome— y no es una sombra ni un brillo: la caja no cambia de tamaño ni se levanta, se PINTA. Con la escala o la sombra que pide cualquier botón de landing, este botón dejaría de ser del mismo juego que las otras veintidós pantallas. El hover del sistema se neutraliza a propósito: `.action:hover` pinta el fondo entero de una, y entonces no habría nada que barrer. */ .tapa__ir::before { content: ''; position: absolute; inset: 0; background: var(--accent-strong); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease-entrada); } .tapa__ir:hover { background: var(--accent); } .tapa__ir:hover::before, .tapa__ir:focus-visible::before { transform: scaleX(1); } .tapa__ir:active::before { background: var(--accent-dim); } /* LAS DOS CALLADAS TIENEN PRESENCIA, Y LA MISMA MECÁNICA QUE LA PRINCIPAL. -------------------------------------------------------------------------- Estaban en el `.btn` del sistema —28 px de alto, letra de 15— y al lado de una acción de 52 se leían como dos enlaces de pie de página. No son eso: una manda a elegir otro club y la otra borra tres temporadas, y las dos tienen que verse como puertas. Suben a 44, que las deja debajo de «Continuar» sin desaparecer: la jerarquía la sigue diciendo el color —violeta pleno contra superficie callada— y no el tamaño, que es lo que este sistema hace en todas sus barras. Y LLEVAN EL MISMO BARRIDO. Que las tres puertas contesten con el mismo gesto es lo que hace que se lean como tres puertas y no como un botón y dos controles; lo que cambia es HACIA QUÉ barren, que es donde cada una dice lo que es. */ .tapa__puertas .btn { position: relative; overflow: hidden; height: 44px; padding: 0 var(--sp-7); border-radius: var(--r-md); background: var(--bg-row); border-color: var(--line); font-size: var(--fs-md); font-weight: 700; color: var(--text-secondary); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tapa__puertas .btn > span { position: relative; z-index: 1; } .tapa__puertas .btn::before { content: ''; position: absolute; inset: 0; background: var(--ink-700); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease-entrada); } .tapa__puertas .btn:hover::before, .tapa__puertas .btn:focus-visible::before { transform: scaleX(1); } .tapa__puertas .btn:hover { background: var(--bg-row); border-color: var(--line-strong); color: var(--text-primary); } /* TRES PUERTAS, TRES PESOS, Y POR ESO «BORRAR» SE FUE DE LA FILA. -------------------------------------------------------------------------- Estaban las tres en un renglón y eran dos pesos para tres cosas: «Nueva carrera» y «Borrar la partida» se veían idénticas, y no lo son ni de lejos. Una te manda a elegir club y NO borra nada hasta que elijas; la otra tira tres temporadas en el acto y no se puede deshacer. Ahora la jerarquía es la de las consecuencias: Continuar violeta pleno, 52 px lo que hace el 95 % de la gente Nueva carrera callada, 44 px, al lado reversible Borrar la partida un enlace, debajo, sola irreversible Y BORRAR DEJA DE SER UN BOTÓN. Un botón invita; un enlace en voz baja hay que ir a buscarlo, que es exactamente el trato que merece lo que no tiene vuelta. Es además el mismo vocabulario que el juego ya usa para su salida: `.nav-sub__item--peligro` es un enlace sin caja que sólo se pone rojo al tocarlo. El diálogo que pregunta lo sigue trayendo `carrera.js`. LA LETRA VA EN `--clay-300` Y NO EN `--danger`, y no es un capricho: medido sobre el fondo de esta pantalla, el rojo pleno da 4,00:1 con letra chica, que es texto normal y necesita 4,5. Un paso más claro de la misma familia da 6,04. */ .tapa__salida { margin: var(--sp-6) 0 0; } .tapa__borrar { border: 0; padding: 0; background: none; cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } .tapa__borrar:hover { color: var(--clay-300); text-decoration-color: var(--clay-300); } /* Las acciones calladas de la fila de salida —la copia y el traer— con la misma voz baja que «Borrar la partida», pero el hover en el violeta de la acción y no en el barro del peligro: guardar una copia no rompe nada. */ .tapa__callada { border: 0; padding: 0; background: none; cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } .tapa__callada:hover { color: var(--accent); text-decoration-color: var(--accent); } .tapa__salida-sep { margin: 0 var(--sp-3); color: var(--text-disabled); } /* Al dedo, las acciones calladas de la salida medían 20px de alto: legibles, pero un blanco de toque menor que el mínimo. El aire va por dentro para que la fila no cambie de dibujo — el subrayado sigue donde estaba. EL CAFÉ SALIÓ DE ESTA LISTA el día que pasó a ser pastilla: acá el acolchado se escribía `var(--sp-3) 0`, o sea CERO a los costados, y eso le borraba el aire lateral a la caja —la letra quedaba pegada al filete—. Ahora crece por los cuatro lados y conserva el suyo. La placa de al lado no necesita nada: mide 57 px de alto, bastante más que el mínimo de 44. */ @media (pointer: coarse) { .tapa__callada, .tapa__borrar { padding: var(--sp-3) 0; } .tapa__cafe { padding: var(--sp-3) var(--sp-5); } } /* El aviso de la carrera que no se pudo abrir: una FRANJA TEÑIDA de ámbar, que es como este sistema ya dice «ojo» —el veredicto de la mesa, el puesto en venta— y como habla esta tapa, que es de bloques planos y no de filetes al costado. Nació con un borde lateral ámbar y se cambió: esa viñeta no existe en ninguna otra pantalla del juego. El botón de adentro hereda `.tapa__callada` y se lee como lo que es: la única acción posible sobre esa carrera. */ .tapa__aviso { margin-top: var(--sp-6); max-width: 62ch; padding: var(--sp-4) var(--sp-5); background: var(--tint-warn); font-size: var(--fs-sm); color: var(--text-secondary); } .tapa__aviso strong { color: var(--text-primary); } /* Adentro de la franja el botón sube un paso de color: `--text-muted` da 3,93:1 MEDIDO sobre el tinte compuesto con el fondo, y letra chica pide 4,5. `--text-secondary` da 5,33, igual que el propio texto del aviso. */ .tapa__aviso .tapa__callada { font-size: inherit; color: var(--text-secondary); } .tapa__aviso .tapa__callada:hover { color: var(--text-primary); text-decoration-color: var(--text-primary); } /* -------------------------------------------------------------------------- LA COLUMNA -------------------------------------------------------------------------- Lo que va al costado del titular. Con carrera es QUIÉN TE ESPERA —el rival del domingo, que es el motivo por el que se aprieta Continuar— y sin ella son las tres cifras del mundo que hay del otro lado de la puerta. Separada por un filete de un píxel y no por una caja: son dos partes de la misma tapa, y una tarjeta ahí la convertiría en un panel metido dentro de otro, que es de lo que este sistema se cuida en su primera línea. -------------------------------------------------------------------------- */ .tapa__columna { display: grid; gap: var(--sp-6); align-content: start; min-width: 0; padding-left: var(--sp-8); border-left: 1px solid var(--line-hairline); } /* SIN COLUMNA, LA TAPA ES DE UNA COLUMNA — y hacen falta las dos reglas. Esconder el `