/* concursos.css — los concursos ───────────────────────────────────────────────────────────────────────────── NO ES UNA COLUMNA DE FOTOS. Es un RELEVO: la sección se queda clavada y el scroll cambia la pieza en su sitio, la que sale acercándose y desenfocándose, la que entra llegando desde el fondo. Es el mecanismo que el hero ya usa en un teléfono, traído aquí — y no es reciclaje: es que las ocho fotografías SON EL MISMO ENCUADRE. Juez a la izquierda, Liz y el perro a la derecha, la placa azul abajo al centro, ocho veces. Puestas en relevo, las figuras no se desplazan: SE RELEVAN. El juez se disuelve en otro juez, ella se queda, el perro cambia de manto. No es una transición entre fotos: es UNA fotografía a la que le van cambiando la gente, y eso es tiempo pasando sobre un mismo momento. Siete rectángulos en hilera eran un catálogo; esto es una página. Y NO HAY TELÓN. Las láminas llegaron partidas para poder moverlas por separado, y montar las dos devolvía cada pieza a ser un rectángulo de fotografía puesto sobre una página — que era justo lo que la hacía parecer un listado. Los sujetos flotan en el negro del sitio, como en el hero. La profundidad la pone la CÁMARA, no la separación de capas. ── LA TIPOGRAFÍA, Y EL BUG QUE LA HACÍA ILEGIBLE ────────────────────────── Tres causas apiladas, y las tres se arreglan aquí: ① EL TRAZO SE PIDE POR `wght`, Y CADA CUERPO PIDE EL SUYO. Éste era el bug de la didona y aquí queda de aviso, porque la cura cambió de eje. Con Bodoni Moda el culpable era `opsz`: su corte de display tenía el fino unas SIETE VECES más delgado que el de texto, y por eso `CRIADERO DE GRAN DANÉS` se leía perfecto y `CONCURSOS` no, siendo el mismo archivo y siendo el segundo MÁS GRANDE. Cormorant Garamond es una GARALDA y no trae `opsz` — no lo necesita: su contraste entre grueso y fino es el de un grabado del XVI y no el de una plancha del XIX, así que ningún cuerpo la deja sin fino. Lo que sí trae es un trazo MUCHO más ligero que el de Bodoni al mismo número de `wght`, y eso sí muerde en el DOM: a 11 px un asta de medio píxel el rasterizador la reparte en gris. Por eso cada rótulo de esta hoja lleva su `wght` MEDIDO —no copiado del de al lado— y por eso la fuente va VARIABLE y no una instancia: son 9.6 KB, y son los que separan «MEJOR» de algo gris. ② EL TEXTO VIVÍA DENTRO DE UN CONTENEDOR CON `filter` Y `transform`. Chrome rasteriza ese subárbol en una textura y la reescala: la letra salía remuestreada incluso quieta, y durante el scroll salía literalmente desenfocada, porque se comía el desenfoque de la lámina. Aquí la tipografía NUNCA vive dentro de nada filtrado ni escalado. Se le mueve la opacidad y se acabó. ③ LLEVABA UN HALO NEGRO. En el hero tiene sentido: sus palabras cruzan una fotografía iluminada. Aquí van sobre negro, así que el halo sólo ensuciaba los pocos finos que sobrevivían. Fuera. */ @font-face{ font-family:"Cormorant Concursos"; src:url("../Tipografia/CormorantGaramond-var-subset.woff2") format("woff2-variations"); /* 300 700 y no 400 900: es el rango REAL del eje de Cormorant Garamond. Con un rango mentido el navegador recorta a los extremos que le declaras y los `font-variation-settings` de abajo dejarían de valer lo que dicen. */ font-weight:300 700; font-style:normal; font-display:swap; } .concursos{ --garalda:"Cormorant Concursos", Garamond, "Hoefler Text", "Times New Roman", serif; --banda-idioma:4.1rem; /* CUÁNTO SCROLL LE TOCA AL VIAJE DEL TÍTULO. Una pantalla y media larga: la misma unidad que un relevo (115vh), porque el viaje ES un relevo más — el de la sección presentándose antes de enseñar nada. Dentro caben las tres cosas que pasan: las palabras llegando escalonadas (el primer tercio), un respiro con el rótulo grande y quieto, y el descenso hasta su sitio. ESTÁ AQUÍ, EN CSS, Y NO EN JAVASCRIPT, y no es preferencia de estilo: es la §⑫ del LEEME. `.hero__riel` nacía a `height:0` y su alto de verdad llegaba a los 3.7 s desde JS; eso metió esta sección dentro de la primera pantalla y costó un salto de 2 532 px y las siete láminas pedidas a destiempo. Un alto que decide el recorrido del documento se declara antes del primer layout o no se declara. */ /* EN `--vh-estable` Y NO EN `vh` A SECAS: este número entra en el `height` del riel, o sea en el alto del documento, y en Firefox de iOS `vh` se mueve con la barra (§ `Assets/JS/viewport.js`). `calc(115 * var(--vh-estable,1vh))` es `115vh` en cualquier otro navegador: el respaldo ES la unidad nativa. */ --viaje:calc(115 * var(--vh-estable, 1vh)); /* OPACO: el hero es position:fixed y sigue vivo debajo */ position:relative; z-index:1; background:var(--negro); } /* ── EL CINTILLO ────────────────────────────────────────────────────────────── Mayúsculas diminutas, tracking abierto, un filete encima. A 11 px el `wght` no es una preferencia: es la diferencia entre que se lea y que no. */ .cintillo{ font-family:var(--garalda); /* 600 Y NO 500, QUE ES EL NÚMERO QUE LLEVABA BODONI. Medido sobre el cintillo más chico del sitio —el conmutador de idioma, 9.92 px— en 1440x900 @1x, la luminancia media de la tinta del rótulo: Bodoni 500 → 46.7 Cormorant 500 → 48.5 Bodoni 560 → 51.2 Cormorant 600 → 50.0 Cormorant 650 → 52.0 Y un dato que vale más que los tres: a este cuerpo la máscara de tinta EROSIONADA un píxel se queda VACÍA en las dos tipografías, o sea que el trazo no tiene centro — vive entero dentro de su antialias. Por eso aquí el peso no es decoración: es lo único que le queda al asta para existir. */ font-variation-settings:"wght" 600; font-size: clamp(.62rem, .82vw, .78rem); letter-spacing:.34em; text-transform:uppercase; color:var(--tinta); line-height:1.7; margin:0; } /* ── EL TÍTULO DE SECCIÓN, QUE HASTA HOY NO EXISTÍA COMO ESCALÓN ────────────── Victor, viendo la zona de Liz en el teléfono: «el texto de Hola soy Liz Contáctame se ve de la verga, está súper chiquito y va justamente después de un título que dice Disponibilidad». ── LA MEDIDA, QUE ES PEOR DE LO QUE SUENA ───────────────────────────────── Los dos rótulos van seguidos, misma tipografía, mismo color, los dos en versales centradas. Medidos en el sitio publicado: teléfono 390 escritorio 1440 DISPONIBILIDAD 31.98 px 102.40 px «Hola, soy Liz» 9.92 px 11.81 px salto ×3.2 ×8.7 Un salto de ×8.7 entre dos líneas consecutivas del mismo registro no se lee como jerarquía: se lee como un descuido. Y el diagnóstico verdadero no es que el de abajo sea chico — es que NO HABÍA ESCALÓN INTERMEDIO. La casa tenía dos tamaños: la palabra enorme y el cintillo. El cintillo mide 9.92 px en un teléfono, que es EXACTAMENTE el cuerpo del conmutador de idioma: el tamaño reservado para controles y metadatos. Un título de sección vestido con la ropa de un botón. ── Y EL TRACKING ERA LA MITAD DEL PROBLEMA ──────────────────────────────── El cintillo abre .34em porque a 10 px las versales se tocan sin él. A 17 px o a 26 px eso deja de ser cierto y el mismo .34em estira el rótulo hasta el canto: el «Hola, soy Liz» medía 339 px de un ancho de 390, o sea que además de chico iba ESTIRADO de lado a lado, que es la silueta de un pie de foto y no la de un título. Aquí baja a .2em. La regla de imprenta de siempre: a más cuerpo, menos tracking. ── Y EL PESO BAJA DE 600 A 500 ──────────────────────────────────────────── El 600 del cintillo está medido y justificado para 10 px —a ese cuerpo el asta vive entera dentro de su antialias y sin peso no existe—. A 17-26 px el trazo ya tiene centro, y el 600 se ve tosco al lado de la Garalda del hero, que va en 300. 500 es el término medio que los emparenta. SE PONE JUNTO A `.cintillo` Y NO EN CADA HOJA porque lo llevan los dos títulos de sección —el de concursos y el del carrusel—, y son dos hojas distintas. Un escalón de la escala tipográfica vive donde vive la escala. */ .titulo-seccion{ /* EL TOPE SUBIÓ DE 1.6rem A 2rem EN UNA SEGUNDA PASADA. Con 1.6 el salto contra DISPONIBILIDAD se quedaba en ×4.0 a CUALQUIER anchura —los dos están topados, así que el monitor no cambia la proporción— y ×4 entre dos rótulos que se leen seguidos sigue siendo un escalón que no existe. Con 2rem el salto queda en ×3.2. Más no se puede subir sin pelearse con la palabra grande, que es la que tiene que ganar. */ font-size:clamp(1.15rem, 2.4vw, 2.4rem); letter-spacing:.2em; font-variation-settings:"wght" 500; line-height:1.25; /* el ajuste óptico del tracking, el mismo que llevan las palabras del hero: el hueco que abre la última letra por su derecha entra en la caja, así que una caja centrada corre los trazos .1em a la izquierda */ margin-left:.2em; } /* ── EL RIEL Y LA VISTA ─────────────────────────────────────────────────────── El riel es alto —una pantalla por pieza— y es lo único que da recorrido. La vista va `sticky` dentro de él: se queda clavada mientras el riel pasa, y el scroll sólo mueve un número que decide qué pieza se ve. La página nunca baja dentro de la sección; las piezas se reemplazan en su sitio. */ /* Una pantalla por pieza: con N piezas el recorrido útil son N−1 cruces, que es exactamente cuántos hay. Menos que eso y el relevo se siente atropellado; más, y el scroll se hace largo sin que pase nada. 115vh Y NO 100: un 15 % más de aire, pedido porque las piezas «cambian muy rápido sin claramente parar en la foto». El recorrido útil pasa de 600vh a 705vh, o sea de 100vh a 117.5vh por relevo. `donde()` no se entera: lee del rect y divide por el recorrido que mida, sea el que sea. OJO: esto estira el relevo entero, y lo que se estira es sobre todo el CRUCE, que es la parte que ya estaba bien resuelta. Lo que crea la PARADA es la meseta de `MESETA` en concursos.js, no esto — ver ahí. */ /* Y AHORA EL RIEL LLEVA UN TRAMO MÁS: `--viaje`, el del título. El recorrido útil pasa de 705vh a 820vh y `donde()` no se entera —lee del rect y divide por lo que mida—; lo único que cambia en JS es que el primer tramo no mueve el relevo, mueve el rótulo. Con `prefers-reduced-motion`, `--viaje` vale 0 y esta misma línea devuelve el riel EXACTAMENTE al alto que tenía: no hay una segunda fórmula que mantener. */ /* LOS `115vh` VAN POR `--vh-estable`, Y ÉSTE ES EL BLOQUE QUE JUSTIFICA LA CURA ENTERA: 7 × 115vh + `--viaje` son 920vh de documento, y en Firefox de iOS `vh` cambia un 17.2 % cuando su barra se retrae (Mozilla #22607). Medido aquí a 390×844 contra 390×955, este riel solo se mueve 971.25 px de los 1 225 que se mueve el documento. Con `--vh-estable` declarada el número deja de moverse; sin ella —o sea en Safari, en Android y en escritorio— `calc(N * 1vh)` es `Nvh` y no cambia un píxel. El porqué entero, en `Assets/JS/viewport.js`. */ .concursos__riel{ position:relative; height:calc(var(--piezas) * 115 * var(--vh-estable, 1vh) + var(--viaje)); } /* La regla del viaje: 0 de ancho, fuera de flujo, invisible. Su único trabajo es que `offsetHeight` devuelva `--viaje` resuelta a píxeles — ver el comentario en `index.html`. */ .concursos__regla{ position:absolute; top:0; left:0; width:0; height:var(--viaje); pointer-events:none; } .concursos__vista{ position:sticky; top:0; /* EL ÚNICO `dvh` QUE GOBIERNA SCROLL EN TODO EL SITIO, Y AHORA VA CONGELADO EN FIREFOX DE iOS. `dvh` es la unidad que DEBE moverse cuando la barra se retrae, y este alto entra en la cuenta del relevo: `tramo()` divide por `riel.height − vista.offsetHeight` (§`concursos.js`). La vista es `sticky`, o sea que no aporta un píxel de flujo y NUNCA mueve el documento; lo que mueve es QUÉ LÁMINA SE DIBUJA. HASTA HOY AQUÍ SE LEÍA QUE ESTO SE QUEDABA, con dos razones, y las dos se cayeron el 19-sep-2026. La primera era el tamaño del error: «el divisor pasa de 6 651 a 6 541 px en un 390×844 y la pieza se corre 0.05 de relevo, por debajo de lo que se nota dentro de un fundido». La segunda era la premisa que lo sostenía: «el riel de aquí abajo va en `vh`, que en un teléfono no se mueve nunca». ESA PREMISA ES FALSA EN FIREFOX DE iOS y es justo el defecto que cura `Assets/JS/viewport.js`: allí `vh`, `svh`, `dvh` y `lvh` saltan las cuatro cuando la barra se mueve. Medido en el teléfono de Victor, 752 → 880, 72 veces en unos segundos de scroll. Y CON EL RIEL YA CONGELADO EL ERROR NO ES MÁS PEQUEÑO, ES MÁS GRANDE: el divisor pasa de 6 580 − 752 = 5 828 a 6 580 − 880 = 5 700, un 2.2 %, que sobre siete láminas son 0.15 de relevo y no 0.05. Con el documento perfectamente quieto, la lámina que se dibuja PEGA UN BRINCO — y eso es letra por letra lo que Victor describe después de la primera vuelta: «se salta poquito pero ya se ve coherente». LO QUE CUESTA ES EL HUECO QUE AQUÍ SE TEMÍA, y ahora se paga a sabiendas: con la barra escondida la vista queda 128 px más corta que la ventana y el folio del pie se despega del canto de abajo. Es negro sobre negro —la sección entera lo es— y sólo en Firefox de iOS: en Safari este `dvh` sigue vivo y esta sección se comporta exactamente igual que ayer, porque el respaldo `var(--dvh-estable, 1dvh)` ES la unidad nativa. El teletransporte del swipe rápido NO nacía aquí (§«LA RED DE SEGURIDAD»). */ height:100vh; height:calc(100 * var(--dvh-estable, 1dvh)); display:grid; /* UNA COLUMNA, Y ESO ES LO QUE DEVUELVE LA FOTOGRAFÍA A SU SITIO. El raíl de fechas tuvo durante una tarde una columna propia del reparto, y una columna del reparto OCUPA: la escena se corría a la derecha para dejarle hueco —a 1440×900, 95 px— sin que la fotografía ganara nada a cambio. Ahora el raíl va SUPERPUESTO sobre la escena (§ EL RAÍL, abajo) y no participa del reparto, así que aquí sólo hay una columna y la escena vuelve a disponer del ancho entero. Medido, y está en el informe: a 1440×900 el marco vuelve de x=354.4 a x=259.3 SIN CAMBIAR DE TAMAÑO —921.3 × 737.0 en los dos—, que es exactamente el sitio que ocupaba antes de que el raíl existiera. */ grid-template-columns: minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr) auto; /* EL HUECO Y EL RELLENO TAMBIÉN VAN POR `--vh-estable`, Y NO ES CELO: con la vista ya congelada arriba, estos tres `vh` eran lo ÚNICO que seguía moviendo la fotografía en Firefox de iOS. Medido a 390 con la barra yendo de 752 a 880: el marco se corría 4.10 px, el folio del pie 3.84 y la escena perdía 13.31 px de alto. El alto de la vista está fijo, así que lo que crece de relleno se lo quita a la escena — congelar la caja y dejar vivo el relleno es hacer media cura. Fuera de FxiOS el respaldo `1vh` devuelve el término exacto de antes. (§ `Assets/JS/viewport.js`) */ row-gap: clamp(.7rem, calc(2 * var(--vh-estable, 1vh)), 1.4rem); padding: clamp(1rem, calc(3.4 * var(--vh-estable, 1vh)), 2.2rem) clamp(1.2rem, 4vw, 3.4rem) clamp(1rem, calc(3 * var(--vh-estable, 1vh)), 2rem); overflow:hidden; /* LOS DOS NÚMEROS DEL VIAJE, Y SUS VALORES POR DEFECTO SON EL ESTADO FINAL. Eso no es un detalle de implementación: es lo que hace que la sección sea correcta sin JavaScript, con `prefers-reduced-motion`, y en el primer cuadro de la página antes de que `concursos.js` haya escrito nada. Lo que se anima es lo que se APAGA, nunca lo que se enciende. --aterriza el rótulo pequeño y su filete: 0 mientras el título viaja, 1 cuando ha aterrizado. --fotos las láminas, el raíl y el pie: salen cuando el título ya está en su sitio, que es la mitad de la idea. Es un efecto VISUAL y nada más: la DESCARGA de las siete láminas no la toca nadie —sigue donde estaba, en el HTML y en §«CUÁNDO SE PIDEN LAS SIETE LÁMINAS»—, porque retrasarla reintroduciría el hueco gris que costó medir la lane 📱 Hero-Movil. */ --aterriza:1; --fotos:1; /* EL CARRIL DEL RAÍL, y son dos números separados a propósito. --carril el ancho de la COLUMNA ESCRITA: la fecha más larga (`27 May 2026`) con la sangría que la separa del punto. LO MIDE `concursos.js` y lo escribe en `--carril-txt`, porque el cuerpo de la fecha cuelga de un `clamp(…vw…)` y una constante escrita aquí mentiría en cuanto la ventana pasara de 1287 px: medido, el texto va de 91.1 px a 108.3 px según el ancho. El valor de respaldo es para el primer cuadro y para si JS no llega. --aire el hueco entre esa columna y la fotografía. SE LLAMABA `--velo` y ese nombre ya mentía: era el ancho que tardaba en desvanecerse un degradado que esta vuelta retiró. Lo que siempre fue, y lo único que es ahora, es AIRE — el texto no entra ahí, y de él cuelgan el borde contra el que se mide el rótulo del premio y el ancho que `decideRail()` compara con el hueco negro. Ninguno de los dos le quita un píxel a la escena: el raíl va absoluto. */ --carril: var(--carril-txt, 7.2rem); --aire: 2.4rem; /* EL RAÍL REVELADO, en dos números. `--rail-fila` es lo que mide un
  • cuando su rótulo va absoluto —la marca y nada más— y `--rail-punta` el aire de cada punta de la columna, que con la fila encogida es lo único que sostiene el primer y el último centro donde estaban. § EL RAÍL REVELA SÓLO EL ACTIVO, abajo. */ --rail-fila: 11px; --rail-punta: 2.66rem; /* La tinta de las fechas apagadas del raíl. NO es `--tenue`, y la separación tiene la misma razón que la de `--tenue` y `--filete`: son sitios con fondos distintos. `--tenue` vive sobre negro plano —el cierre del pie— y ahí 5.11:1 es verdad; el raíl vive sobre SIETE fotografías, y su peor caso está medido contra el velo en el informe. */ --rail-tinta: #b9ab97; /* la crema de la casa al 58 % sobre negro: 5.37:1. El porqué, en `.premio`. */ --premio-tinta: #878074; } /* Mientras las fotos y el mobiliario están del todo apagados no deben poder pulsarse ni recibir el foco — una opacidad de 0 no impide ninguna de las dos cosas. Lo pone y lo quita `concursos.js` en `viaja()`, donde está el porqué. */ .concursos__vista[data-viaje] .concursos__escena, .concursos__vista[data-viaje] .concursos__lado, .concursos__vista[data-viaje] .concursos__pie{ visibility:hidden; } .concursos__cabecera{ grid-column:1; grid-row:1; /* En 1440/2000 el borde acababa 47.86 px dentro del rect de `.idioma`: su y (30.59/34) también lo cruzaba (18.39–55.06). La banda de 4.1rem termina el degradado 65.6 px antes del canto: en captura @1x el píxel pleno #5d5346 llega hasta el 80 % y el trazo ya vale negro en x=1320/1880, antes de `.idioma` (x=1337.75/1897.75). La caja conserva su píxel de alto. */ border-top:1px solid transparent; padding-top:.85rem; background:linear-gradient(to right, var(--filete) 80%, transparent calc(100% - var(--banda-idioma))) top left / 100% 1px no-repeat; /* El filete viaja con su rótulo: los dos aparecen a la vez, y por eso la opacidad va en la cabecera y no en el

    . */ opacity:var(--aterriza); } /* ── LA ESCENA ──────────────────────────────────────────────────────────────── Las siete láminas apiladas en el mismo rect. Como las siete son casi el mismo lienzo (1.234 a 1.333), plantarlas en un rect común con `object-fit:contain` las deja intactas —ninguna se deforma ni se recorta— y a cambio las figuras se relevan sin dar un salto de encuadre. Es el compromiso opuesto al del tríptico, y aquí es el bueno: allí cada panel se veía SOLO y su aspecto propio salía gratis; aquí se ven una ENCIMA DE OTRA, y lo que importa es que el juez caiga donde estaba el juez. */ .concursos__escena{ position:relative; grid-column:1; grid-row:2; /* Las fotos salen cuando el título ha aterrizado. `opacity` y NADA MÁS: es la única propiedad que puede apagar esto sin meter el subárbol en una textura reescalada, que es el bug ② de arriba y el que dejaba la letra borrosa. Cuando `--fotos` vale exactamente 1 —o sea, siempre salvo durante el viaje— `opacity:1` no crea contexto de apilamiento ni capa, así que el relevo pinta igual que antes de que esta línea existiera. */ opacity:var(--fotos); /* LOS DOS CEROS SON OBLIGATORIOS. Un item de rejilla tiene `min-width:auto`, o sea que crece hasta caber su contenido: con el marco pidiendo su ancho por `aspect-ratio`, la escena se estiraba a 837 px dentro de una vista de 366 en un teléfono, y el `overflow:hidden` se comía media fotografía y media palabra. Medido. Con los ceros manda la escena y el marco obedece. */ min-width:0; min-height:0; } /* EL ENCUADRE LO CALCULA concursos.js, no el CSS, y es la misma regla de tres topes del hero: que quepa de alto, que quepa de ancho, y que no pase del alto nativo de la lámina — cero upscale. En CSS no se puede escribir «el menor de estos dos» cuando uno cuelga del alto de la fila y el otro del ancho, y los dos intentos salieron mal: por ancho, la placa azul quedaba cortada abajo; por alto, la rejilla se desbordaba en un teléfono. Va CENTRADO CON `margin:auto`, no con `transform:translate`, y eso no es estilo: un `transform` en un ancestro del rótulo lo mete otra vez en una textura rasterizada, que es justo el bug que hacía ilegible la tipografía. */ .concursos__marco{ position:absolute; inset:0; margin:auto; container-type:size; /* ── EL RESPALDO DE `100cqh` PARA iOS 15.6 ────────────────────────────────── `container-type` y las unidades `cq*` son Safari 16, y el parque objetivo empieza en 15.6. Ahí `100cqh` no es una unidad: es un valor INVÁLIDO, así que la declaración entera se cae. Lo que se cae son las dos que cuelgan de este contenedor —el `top` de `.concursos__premios` y el `font-size` de `.premio`—, y la segunda es la grave: el rótulo del premio se queda con el cuerpo heredado y pasa de 31.8 px a letra de párrafo encima de la fotografía. Medido a 390×844. `--marco-alto` es ese alto escrito como longitud de verdad. Tiene tres valores posibles, y gana el más exacto que exista: ① si `concursos.js` lo escribe EN LÍNEA en píxeles —no lo hace hoy; está propuesto, es la misma línea donde ya escribe `marco.style.height`—, el estilo en línea pisa a estas dos declaraciones y el respaldo es EXACTO, no una aproximación; ② si no, esta aproximación, que es la fórmula de `encuadra()` menos el tope de alto: los dos costados de la ventana ya descontados (`padding-inline:1.1rem` a cada lado por debajo de 820) divididos por el aspecto común 1.25, y el techo de 1122 que es el alto nativo de la lámina. En un teléfono en vertical SIEMPRE manda el ancho, así que esta rama clava el número: 390→284 y 430→316, los mismos que escribe `encuadra()`. El `80dvh` es el tope de alto de un iPad apaisado, donde la escena mide entre el 78 % y el 84 % de la ventana — ahí la aproximación se queda corta como mucho un 2 %, que en el cuerpo de un rótulo no se ve; ③ y el `vh` va delante del `dvh` por la misma costumbre del resto de la casa, aunque `dvh` esté dentro del parque desde 15.4. NADA DE ESTO LO LEE UN NAVEGADOR MODERNO: allí `100cqh` es válido, gana por ser la última declaración, y el dibujo no cambia. */ /* EL TÉRMINO DE VENTANA VA POR `--dvh-estable` (§ `Assets/JS/viewport.js`). En un teléfono de canto no gana el `min()` —a 390 de ancho el término de `100vw` da 283.84 px contra los 601.6 de `80vh`— así que ahí no cambia nada; el que lo gana es el APAISADO, que es justo el encuadre que este `dvh` vino a resolver: a 844×390, `80dvh` son 312 px contra 647. Ahí, sin congelar, la fotografía cambiaba de tamaño con cada movimiento de barra. */ --marco-alto: min(80vh, calc((100vw - 2.2rem) / 1.25), 1122px); --marco-alto: min(calc(80 * var(--dvh-estable, 1dvh)), calc((100vw - 2.2rem) / 1.25), 1122px); } /* ── EL TÍTULO QUE VIAJA ────────────────────────────────────────────────────── Al entrar en la sección el rótulo está GRANDE y en mitad de la pantalla, y a base de scroll encoge y se va a vivir donde vive hoy: arriba a la izquierda, sobre su filete, en versales de 11 px. El final del viaje ES EL ESTADO ACTUAL —mismo sitio, mismo cuerpo, mismo tracking—, no un estado nuevo. LO MUEVE EL DEDO, NO UN RELOJ. Aquí no hay `transition` ni `animation` ni un temporizador: la posición del scroll es el único parámetro. Si el visitante para, el título para; si sube, el título vuelve. Ésa es la idea entera —que se vea que el scroll conduce— y una animación con reloj la rompería. ── POR QUÉ PALABRA POR PALABRA Y NO UN `scale` DEL BLOQUE ────────────────── Porque los dos estados no son el mismo dibujo a dos tamaños. `CONCURSOS · FEDERACIÓN CANÓFILA MEXICANA` aterriza en UNA línea; a 390 px de ancho, el estado grande son TRES. Ninguna escala lleva de tres líneas a una, así que un bloque escalado tendría que dar un salto al final —justo en el fotograma en el que el visitante está mirando el título— o renunciar a ser grande en un teléfono, que es donde más falta hace. Con una palabra por , cada una sabe de dónde sale y a dónde va, y el navegador no vuelve a maquetar NADA: son cinco `transform` y cinco `opacity` por cuadro. `concursos.js` mide las dos maquetaciones una vez —la grande, con un Range sobre cada ; la aterrizada, con un Range sobre el texto del

    que ya está en la página— y de ahí salen el desplazamiento y la escala. El

    no se toca: no se le mete un dentro ni se le cambia una coma. ── Y POR QUÉ SON DOS ELEMENTOS Y NO UNO ──────────────────────────────────── Por el TRAZO, que en esta casa ya tiene su propia sección arriba. El viajero se dibuja a 46 px y con `wght` 500 es un rótulo; el que aterriza se dibuja a 11 px y a ese cuerpo hace falta 600 o el asta se reparte en gris. Un solo elemento tendría que cambiar `font-variation-settings` a mitad de vuelo, que es volver a maquetar en cada cuadro. (Con Bodoni el eje que cambiaba era `opsz` y la diferencia era de siete a uno; con Cormorant es `wght` y la diferencia es de un peldaño. El mecanismo de dos elementos no cambia, y el porqué de que no pueda ser uno tampoco.) Así que el viajero rasteriza a su tamaño grande y BAJA por escala —un remuestreo hacia abajo, que es el que sale bien— y en el último 6 % del recorrido se cruza con el rótulo de verdad, que ya está exactamente en su sitio y con su peso. No se ve un cambio de posición porque no lo hay: se ve cómo se afila. */ .concursos__viajero{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; /* POR DEFECTO NO SE VE. Sin JavaScript esto es un

    vacío, y con JavaScript no se enciende hasta que `viaja()` escribe `--vive`: en ningún caso hay un fotograma con el título pintado dos veces. */ opacity:var(--vive, 0); } /* Aterrizado, deja de existir para el compositor: ni capa, ni pintado, ni `will-change` reservando memoria de textura durante todo el relevo. Se apaga con `visibility` y no con `display` a propósito — un elemento sin caja no se puede medir, y hay que poder volver a medirlo en cada `resize`. */ .concursos__viajero[data-fin]{ visibility:hidden; } .concursos__viajero[data-fin] .concursos__lockup span{ will-change:auto; } .concursos__lockup{ /* El tracking abierto de las versales deja un hueco colgando a la derecha de la última letra de cada línea, y con el texto centrado ese hueco descuadra el bloque media letra hacia la izquierda. El margen negativo se lo come, y vale lo que valga el tracking de AQUÍ —.20em—, no el del cintillo. */ margin:0 -.20em 0 0; /* 74rem, y el número lo decidió la MEDIDA del corte semántico, no el gusto. Con el corte puesto, el segundo renglón es `FEDERACIÓN CANÓFILA MEXICANA` ENTERO —28 caracteres— y tiene que caber en una sola línea o el bloque vuelve a ser de tres renglones y el corte no habrá servido de nada. Mide 1 066 px a 46.4 px de cuerpo; con 64rem (1 024 px) NO CABÍA. */ max-width:min(88vw, 74rem); text-align:center; font-family:var(--garalda); /* 500 y no 400: a 46 px Cormorant en su peso normal es un libro, no un rótulo, y este bloque tiene que MANDAR sobre la fotografía. Un peldaño, no dos: a este cuerpo el 600 le engorda el asta y le come el contraste, que es lo único que la separa de una Times. */ font-variation-settings:"wght" 500; font-size: clamp(1.5rem, 3.4vw, 2.9rem); /* .20em Y NO .34, Y ESTO LO PIDIÓ EL CORTE. Con el tracking del cintillo el segundo renglón medía 1 248 px y sólo cabía de una pieza en una ventana de 1 418 px para arriba: a 1440 sobraban 19 px, o sea que el corte semántico habría durado hasta el primer navegador con otra métrica. A .20em mide 1 066 px y entra de una línea desde los 626 px de ancho — medido. Y de paso es lo correcto: el tracking de una versal se ABRE al bajar de cuerpo y se CIERRA al subir, que es por lo que el cintillo de 11 px lleva .34em. Un rótulo de 46 px con el tracking de uno de 11 no es coherencia, es la misma cifra puesta dos veces. NO DESCUADRA EL ATERRIZAJE: la escala de cada palabra sale de su ANCHO MEDIDO (`mideViaje`), así que el tracking entra en la cuenta; y dentro de la palabra el tracking es un sumando IGUAL por letra, que al normalizar por el ancho total se cancela. Medido: el desvío de aterrizaje sigue en 0.01 px y 0.00 % de ancho. */ letter-spacing:.20em; text-transform:uppercase; /* El MISMO interlineado que el cintillo aterrizado (1.7). No es estética: cada palabra se coloca por la esquina de su caja de texto, y dos interlineados distintos meterían un desfase vertical constante entre lo medido y lo pintado. */ line-height:1.7; color:var(--tinta); } /* EL SEPARADOR SALE DEL FLUJO MIENTRAS EL BLOQUE ES DE DOS RENGLONES, y ése es todo el mecanismo del corte. El `·` no es una palabra: es la MARCA del corte, y `concursos.js` mete el
    justo detrás. Si además contara en el renglón, «CONCURSOS ·» se centraría COMO UNA UNIDAD y CONCURSOS quedaría fuera de eje media letra —el `·` con su espacio y su tracking mide 58 px a 46 px de cuerpo—, que es exactamente el descuadre que una portada no perdona. Fuera del flujo, CONCURSOS queda solo y centrado de verdad. SIGUE SIENDO MEDIBLE Y SIGUE VIAJANDO: tiene caja y tiene rects, así que `mideViaje()` le saca su origen y su salto como a cualquier otra palabra, y aterriza en su sitio del

    al centésimo de píxel como las demás. Lo único que cambia es CUÁNDO se ve, y eso lo decide `viaja()` con `junta` — el último cuarto del descenso, cuando el punto ya está donde va a quedarse. */ .concursos__lockup{ position:relative; } .concursos__lockup .sep{ position:absolute; left:50%; top:0; } /* PALABRA POR RENGLÓN. Lo pone `mideViaje()` cuando el rótulo ATERRIZA en más de un renglón, y el porqué está ahí: dos palabras juntas arriba que aterrizan separadas se pisan a mitad del descenso. `display:block` y no un
    porque así la decisión es reversible en un `resize` sin tocar el DOM, y porque el
    del separador tiene que seguir estando donde está pase lo que pase. */ .concursos__lockup[data-suelto] span{ display:block; } .concursos__lockup span{ display:inline-block; /* un inline no admite `transform` */ /* El origen se lo pone `concursos.js` en píxeles: la esquina del TEXTO, que no es la de la caja del . Con el origen ahí, escalar no mueve el punto que se está llevando a su sitio y las dos cuentas —trasladar y encoger— no se estorban. */ transform-origin:0 0; will-change:transform, opacity; } /* LA PALABRA VA DETRÁS DE LAS FIGURAS, y vive aquí —fuera de todo lo que se filtra o se escala—. Se cuelga del CRÁNEO con la regla del hero (`GRAN_ENCIMA = 0.36`): un 36 % de la altura de mayúscula por encima de donde empieza el recorte y el 64 % restante detrás de las cabezas. `--craneo` es el MÁS ALTO de las siete, medido sobre el alfa, para que la palabra no dé un salto vertical al cambiar de pieza. */ .concursos__premios{ position:absolute; left:0; right:0; /* RESPALDO EXACTO, no aproximado: `.concursos__marco` es `position:absolute`, o sea el bloque contenedor de este hijo también absoluto, y un porcentaje de `top` se resuelve contra el ALTO de ese bloque — que es literalmente lo que mide `100cqh`. Los dos números son el mismo número. */ top: calc((var(--craneo) - .36 * var(--cap)) * 100%); top: calc((var(--craneo) - .36 * var(--cap)) * 100cqh); z-index:1; display:grid; /* las siete en la misma celda, cruzándose */ } .premio{ grid-area:1 / 1; margin:0; font-family:var(--garalda); /* 600 Y ESTÁ MEDIDO CONTRA EL QUE HABÍA. Éste es el único rótulo de la casa que se lee SOBRE LA FOTOGRAFÍA, así que su gris se mide ahí y no sobre negro. `MEJOR DE LA RAZA` en 1440x900 @1x, luminancia media de la tinta y cobertura de la caja: Bodoni 400 (el que había) tinta 170.0 cobertura 11.32 % Cormorant 500 tinta 162.1 cobertura 11.85 % Cormorant 600 tinta 167.9 cobertura 12.63 % Cormorant 700 tinta 171.0 cobertura 13.26 % El 600 es el primero que devuelve la cobertura que había —y la pasa—; el 700 iguala también la media, pero a este cuerpo ya no es una garalda, es una negra, y lo que se pierde es justo el contraste que hace que la palabra parezca grabada y no impresa. */ font-variation-settings:"wght" 600; /* `--cap` ES ALTURA DE MAYÚSCULA, no cuerpo, así que se divide por la del ARCHIVO: Cormorant Garamond tiene `sCapHeight` 625 sobre `unitsPerEm` 1000 —Bodoni Moda tenía 1500 sobre 2000, o sea .75— y con el divisor viejo el rótulo se habría dibujado un 20 % más bajo de lo que pide `--craneo`, que es quien lo cuelga de las cabezas. Medido con fontTools sobre el propio `Assets/Tipografia/CormorantGaramond-var.woff2`. */ /* El respaldo de `--marco-alto` —y por qué existe— está en `.concursos__marco`. Aquí sólo importa el orden: primero el que entiende iOS 15.6, después el bueno. */ font-size: calc(var(--cap) / .625 * var(--marco-alto)); font-size: calc(var(--cap) / .625 * 100cqh); line-height:.94; letter-spacing: var(--track, .26em); text-transform:uppercase; text-align:center; /* ── LA TINTA DEJA DE SER BLANCO PURO, Y ES TODA LA CURA ─────────────────── EL SÍNTOMA: el rótulo se dibujaba en #fff —21:1 contra el negro de la lámina, el contraste más alto que existe— a la altura de las cabezas y, en los cuatro que van a DOS renglones (1, 3, 4 y 7), el segundo cae exactamente en la banda de las caras. Ahí dentro no hay nada que compita con blanco puro: la palabra se lee como un letrero pegado encima y parte la fotografía en dos. LO QUE NO ERA EL PROBLEMA, Y ESTÁ MEDIDO: el orden de capas ya es el correcto y no se toca. `.concursos__premios` va en `z-index:1` y la lámina en 2, así que el sujeto pasa POR DELANTE del rótulo —capturado a 1440×900 en las siete: ni una letra cae encima de una cara, las caras tapan las letras—. Lo que competía con la cara no era la letra que la pisa, que no existe: era la que pasa AL LADO, al máximo contraste posible, a la misma altura del ojo. LA CURA ES BAJAR LA TINTA Y NADA MÁS. `--premio-tinta` es la crema de la casa al 58 % sobre negro —#878074, 5.37:1—, o sea el mismo escalón de gris en el que vive el texto secundario del sitio (`--tenue`, 5.11:1). Sigue muy por encima del 3:1 que la WCAG pide a un texto grande —éste se dibuja a 75 px— y por debajo del punto en que una palabra sobre una fotografía deja de ser una capa y pasa a ser un rótulo. Sobre negro el rótulo se lee entero; contra el sujeto, que es lo claro de estas fotos, cede. Es EXACTAMENTE lo contrario de lo que hacía el blanco. POR QUÉ NO SE MUEVE DE SITIO: la posición cuelga de `--craneo` y está puesta a propósito para que la palabra quede COLGADA de las cabezas (§ arriba, `.concursos__premios`). Subir el bloque un renglón para que el segundo no cruzara la banda de las caras lo metía debajo del cintillo del título —medido a 1440×900: el primer renglón acabaría en y=110 y el filete del título está en 145—, y ésa es una decisión de composición que esta cura no tiene por qué tomar para arreglar un contraste. POR QUÉ NO ES `opacity`: `opacity` ya la usa el relevo —`--w`, que es quien cruza una pieza con la siguiente—, y multiplicar las dos dejaría la tinta dependiendo de en qué punto del cruce esté. El color es del rótulo; la opacidad es del relevo. */ color:var(--premio-tinta); white-space:pre; opacity: var(--w, 0); } /* LAS LÁMINAS. Sólo ellas se escalan y se desenfocan — la cámara del relevo. La que sale se ACERCA y se va de foco (queda demasiado cerca); la que entra llega DESDE EL FONDO y se enfoca. Es el lenguaje de cámara del guion de entrada del hero, no una transición pegada encima. */ /* `` no dibuja nada: sólo elige el formato. Sin esto genera una caja en línea que no pinta pero sí cuenta para el flujo. */ .concursos__marco picture{ display:contents; } .lamina{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; /* LA LÁMINA SE DISUELVE EN EL NEGRO POR SUS TRES CANTOS DUROS, que es la regla de la casa desde el hero: «la foto se disuelve EN el negro, no sobre él». Sin telón detrás, el suelo que cada recorte trae pegado —la tarima, el pedestal de cantera, la losa de pasto de la pieza 8— llega al borde del lienzo y termina en un CANTO RECTO. Un canto recto sobre negro se lee como un recorte pegado encima de la página, y era justo lo que rompía la coherencia con el tríptico de arriba, donde la fotografía nunca tiene borde. Se desvanece por los DOS COSTADOS y por el PIE. Arriba no hace falta: ahí el recorte ya empieza vacío —su alfa no arranca hasta el 5.5 % del alto— así que no hay nada que cortar. Las figuras viven entre el 13 % y el 88 % del ancho, así que un 9 % de fundido lateral se come el suelo y no toca a nadie. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; opacity: var(--w, 0); transform: scale(var(--z, 1)); } /* EL FILTRO Y EL `will-change` SÓLO CUANDO LA SECCIÓN ESTÁ CERCA, y esto es una corrección de rendimiento, no de estilo. Las dos declaraciones vivían en la regla de arriba, o sea SIEMPRE, y las dos obligan al motor a reservar una superficie de composición por lámina desde que carga el documento — siete fotografías a pantalla completa promovidas a capa mientras el visitante mira la portada. En una pantalla grande a dpr 2 eso son ~103 MB de GPU que no pinta nadie, y el resultado es una portada que se traba cuanto MEJOR es el monitor. `blur(0px)` no es «sin filtro»: un `filter` declarado, aunque valga cero, crea contexto de apilamiento y superficie de render igual. Por eso baja aquí con el `will-change` y no se queda arriba «porque no se nota». Quién pone `.es-cerca` y con qué margen está en `concursos.js`, junto al observador del que cuelga. */ .concursos.es-cerca .lamina{ filter: blur(calc(var(--soft, 0) * 1px)); will-change: opacity, transform; } /* ── EL RAÍL DE FECHAS · UNA CAPA SOBRE LA ESCENA, A LA IZQUIERDA ──────────── La única pieza de mobiliario de la sección, y hace dos trabajos: dice DÓNDE estás en el registro —que es lo que un relevo no sabe decir solo— y dice que el registro tiene fondo. Sin él, un relevo es un pase de diapositivas. ESTÁ EN VERTICAL, y el porqué lo dijo Victor de una vez: «para que la gente entienda más que el scroll es lo que los está bajando». Una fila horizontal no puede decir eso —el dedo baja y la fila no se mueve en esa dirección—; una columna sí, porque la marca DESCIENDE con el dedo y el gesto y el dibujo van por fin en el mismo eje. Y LA FUNCIÓN MANDA SOBRE EL ADORNO: de un vistazo tienen que caber las dos preguntas que nombró —CUÁNTAS fotos hay y EN CUÁL voy—. Por eso hay una marca por foto y no una barra continua, y por eso la marca viva se enciende de golpe: siete marcas se cuentan de un vistazo, un porcentaje no. ── Y NO OCUPA. ÉSTE ES EL ARREGLO DE ESTA VUELTA ────────────────────────── Durante una tarde el raíl fue una COLUMNA DEL REPARTO, y una columna del reparto le quita ancho a la fotografía: «aquí nada más estás empujando todas las imágenes mucho más a la derecha sin razón alguna». Tenía razón, y estaba medido sin verse: a 1440×900 el marco se iba de x=259.3 a x=354.4. Ahora es una CAPA. Y el truco de que arranque exactamente donde arranca la fotografía —o sea justo debajo del cintillo del título, que es la altura que pidió— no cuesta ni una medida en JavaScript: un hijo ABSOLUTO de una rejilla que declara su `grid-area` toma ESA CELDA como bloque contenedor, no la rejilla entera. Se le declara la celda de la escena y `top:0` es el borde de arriba de la escena. Es la misma técnica que la regleta del teléfono ya usaba desde la lane anterior, ahora en las dos formas y por el mismo motivo. ── Y AHORA ES UN REGISTRO, NO UN INSTRUMENTO DE MEDICIÓN ────────────────── Aquí hubo una regla completa: dos líneas sobre el mismo eje —la regleta apagada y el hilo encendido—, siete muescas y un velo de 28.8 px que le garantizaba el contraste a todo eso sobre la fotografía. Medido en un teléfono, esa regla recorría 2.31 veces el alto de la fotografía y era lo primero que se veía de la sección. Victor, mirándolo: «lo siento muy atascado». De los tres dibujos queda UNO: el punto, que baja con `translateY` — dónde estás, entre lámina y lámina. Ni cuánto llevas ni de dónde a dónde: eso lo dicen las siete fechas escritas en escritorio y el folio del pie en un teléfono, que es donde de verdad se leen. `concursos.js` mide los centros una vez por maquetación y escribe `--riel-y0`; por cuadro toca un solo `transform`. DÓNDE ESTÁN LAS SIETE FECHAS DEPENDE DE LA VENTANA, Y SON LAS MISMAS SIETE. Donde caben en el hueco negro viven aquí, en esta columna, y el punto corre a su izquierda. Donde no caben, `concursos.js` muda el
      ENTERO al
      del pie (§ EL REGISTRO) y esta columna se queda con el punto y con nada más: un eje invisible de 28.8 px de ancho por el que baja una brasa de 5 px. */ .concursos__lado{ /* FUERA DEL REPARTO: absoluto, con su celda declarada. La rejilla no le reserva un solo píxel, y su bloque contenedor es la celda de la escena. */ /* LAS DOS LÍNEAS DE CADA EJE, ESCRITAS ENTERAS, y no es redundancia: para un hijo ABSOLUTO de una rejilla, una línea `auto` no significa «una celda» —eso es para los items de verdad— significa EL BORDE DE LA REJILLA. Con `grid-row:2` el carril arrancaba bien y terminaba 80 px por debajo de la fotografía, metido en el pie. Se veía poco y estaba mal. */ position:absolute; grid-column:1 / 2; grid-row:2 / 3; left:0; top:0; bottom:0; width:calc(var(--carril) + var(--aire)); padding-right:var(--aire); /* POR ENCIMA DE LA LÁMINA, que lleva `z-index:2`. Sin esta línea el raíl se pinta DEBAJO de la fotografía y no por un capricho del navegador: en el DOM va antes que la escena —ahí es donde se lee y donde se tabula— y dos hermanos posicionados sin `z-index` se pintan en orden de documento. */ z-index:3; display:flex; align-items:flex-start; justify-content:flex-start; min-width:0; opacity:var(--fotos); /* NO LLEVA FONDO, Y ÉSA ES LA MITAD DE ESTA VUELTA. Aquí vivía un velo: un degradado de casi negro que garantizaba el contraste de SIETE fechas o de SIETE muescas sobre la lámina. De todo aquello queda un punto de 5 px, y oscurecer 28.8 px de fotografía para proteger 5 px de punto es cobrar un precio que ya no compra nada. Los 8.04:1 y 18.10:1 que este sitio documentó eran del velo CON aquellas marcas; no se refutan, dejan de aplicar. Lo que el punto necesita está medido de nuevo y vive en `.rail__aguja`. `--aire` SE QUEDA, Y AHORA SÓLO ES AIRE. Era el ancho del desvanecido del velo y es, desde siempre, la separación entre la columna de fechas y la fotografía —«el texto no entra ahí»—. Sin fondo que desvanecer sigue siendo eso: el hueco. Si se pusiera a cero, el lateral se estrecharía 38.4 px y `decideRail()` empezaría a escribir fechas en ventanas donde hoy no caben, que es una decisión de composición que esta vuelta no tomó. */ --riel-y0:0px; } .rail__aguja{ position:absolute; left:0; pointer-events:none; top:var(--riel-y0); width:5px; height:5px; margin:-2px 0 0 -2px; border-radius:50%; background:var(--brasa); transform:translateY(var(--y, 0px)); /* ── EL CONTRASTE DEL PUNTO, MEDIDO DE NUEVO Y SIN VELO ─────────────────── Ésta era la única garantía que retirar el velo rompía, así que se volvió a medir antes de soltar nada. `--brasa` da 8.69:1 contra negro y 2.43:1 contra un blanco saturado, o sea que el veredicto lo pone lo que haya DEBAJO, y debajo hay siete fotografías. El resultado es que el punto no necesita fondo, y la razón es geométrica: el raíl cae exactamente sobre el canto IZQUIERDO de la lámina, y la lámina se disuelve en el negro por sus costados con un fundido del 9 % —32 px a 390 de ancho, 85 a 1024—. El punto vive dentro de esos primeros píxeles, o sea sobre negro, la enseñe la fotografía que la enseñe. Medido sobre captura, píxel a píxel: el fondo más claro en un anillo de 4 a 9 px alrededor del punto, en las SIETE piezas y en los SEIS cruces, en cuatro ventanas. Peor caso por ventana: 1440×900 8.69:1 sobre rgb(0,0,0) 1024×1366 8.59:1 sobre rgb(2,2,1) 390×844 8.64:1 sobre rgb(1,1,1) 320×568 7.85:1 sobre rgb(16,17,12) ← el peor de los 52 Contra los 3:1 que la WCAG pide para un elemento gráfico de interfaz, y contra los 4.5:1 del texto. No hace falta ni el velo ni un asiento local; ponerlo habría sido cromo sin una medida detrás. Si un día cambia el fundido de la lámina o el eje del raíl, ESTA medida es la que caduca. */ } /* LAS SIETE FECHAS SE REPARTEN EL ALTO DE LA FOTOGRAFÍA, no se apelotonan arriba: es lo que convierte una lista en un mapa del recorrido. Apiladas con su interlineado ocupaban 230 px de una pantalla de 900 y la marca viva recorría 196 px en toda la sección — un movimiento tan corto que no se lee como un descenso, que era justo lo que había que enseñar. ── Y EL ALTO SOBRE EL QUE REPARTEN ES EL DEL MARCO, NO UN NÚMERO ────────── Aquí decía `height:min(100%, 32rem)`, y el tope de 32rem existía para que las fechas no se desperdigaran en una pantalla muy alta. Lo que hacía de verdad era OTRA COSA, y se vio en cuanto la columna se quedó sola: en una ventana de 1728×1010 las siete acababan en y=602 y la fotografía seguía bajando hasta 923, o sea 321 px de negro vacío debajo de la última fecha. Victor, mirándolo: la columna «se queda corta por abajo». Y no es que faltara una fecha: es que la columna se estaba repartiendo sobre un alto que no era el de nada. Ahora se reparte sobre el MARCO: `concursos.js` mide dónde empieza la fotografía y cuánto mide, y lo escribe en `--columna-y0` y `--columna-alto` (§ LA COLUMNA DE FECHAS, allí). La columna conserva los cantos del marco; las fechas ahora respiran 1rem dentro de cada punta (§ `.rail` abajo). Ese aire es simétrico y no deja una franja vacía de 321 px como el antiguo tope de 32rem. El miedo del tope de 32rem lo resuelve ahora la propia fotografía, que es quien pone el techo: `encuadra()` no deja que el marco pase de `ancho/1.25` ni de 1122 px de alto, así que el paso entre fechas está acotado por el encuadre y no puede desperdigarse sin límite. Y ARRANCAN DONDE ARRANCA LA FOTOGRAFÍA, no centradas en la escena: «como abajo de CONCURSOS, esa altura me refiero». En casi todas las ventanas el marco llena la celda y ésa es exactamente la línea que el cintillo del título marca justo encima; donde no la llena —una ventana muy ancha y baja, donde manda el tope de ancho—, el margen las baja con la fotografía en vez de dejarlas colgando de un canto que allí no dibuja nada. ── POR QUÉ ESTE TEXTO NO SE LEÍA, Y NO ERA EL COLOR ──────────────────────── Por la mañana se subió `--tenue` de 2.83:1 a 5.11:1 y las fechas seguían sin leerse. La causa eran otras dos, y las dos se miden: ① EL CUERPO. `.cintillo` es `clamp(.62rem, .82vw, .78rem)`, y ese `clamp` se pensó para un rótulo de una línea, no para una columna de datos: a 1024 px de ancho manda el SUELO y las fechas se dibujan a 9.92 px. Una versal a 9.92 px tiene menos de 6.9 px de altura de mayúscula y un fino por debajo del píxel — a ese cuerpo la letra no pierde contraste, pierde TRAZO. Aquí el suelo sube a .74rem (11.84 px) y el techo a .88rem, que es el rango en el que la versal conserva su asta fina. ② EL TRACKING. `.34em` a 9.92 px son 3.4 px de aire entre letra y letra, más que el grueso del asta gruesa: a esa proporción la palabra deja de ser una palabra y pasa a ser una hilera de letras sueltas, y el ojo la deletrea en vez de leerla. Un rótulo de una línea aguanta ese aire —está solo y se mira—; una columna de siete datos que se recorre de un vistazo, no. Baja a `.16em`, que sigue siendo un cintillo abierto. ③ Y EL `wght` SUBE A 650 porque el raíl ahora va SOBRE LA FOTOGRAFÍA: un asta de un píxel sobre un fondo que cambia se pierde aunque el color cumpla. El velo pone el contraste, esto pone el trazo. Con Bodoni ese número era 560; con Cormorant hace falta más, y hasta dónde vale la pena subir lo dice la medida — la columna entera a 13.25 px en 1440x900 @1x, luminancia media de la tinta: Bodoni 560 105.9 Cormorant 560 100.0 Cormorant 600 102.1 Cormorant 650 103.5 Cormorant 700 103.9 De 650 a 700 se compran cuatro décimas y se pierde la letra, así que la columna se queda en 650, a un 2 % de la densidad que tenía. A este cuerpo el trazo no llega a tener centro —la máscara erosionada un píxel se queda en el 0.01 % de la caja— y por eso el peso aquí no es un gusto. El tercer sospechoso, el color, se queda como está: `--tenue` es del cierre del pie —que sí va sobre negro plano y ahí sus 5.11:1 son verdad— y del trazo de las muescas. Lo que el raíl necesitaba sobre imagen no era otro número de contraste sino un fondo que lo garantice; ver el velo, arriba. `--filete` no se toca: es trazo de 1 px y está separado a propósito. */ .rail{ align-self:flex-start; width:100%; min-width:0; /* los dos los mide `concursos.js` contra el marco; sin JavaScript no hay fotografía que enmarcar y la columna se reparte por la celda entera. EL DESPLAZAMIENTO VA DENTRO DEL `margin` ABREVIADO y no en un `margin-top` aparte: el atajo que devuelve los márgenes del
        viene después en este mismo bloque y lo borraría sin un aviso. Medido antes de verlo: a 1920×1400 —la única familia de ventanas donde el marco NO llena la celda— la columna salía 47.2 px por encima de la fotografía. */ height:var(--columna-alto, 100%); display:flex; flex-direction:column; justify-content:space-between; /* Sin aire interior, primera/última fecha quedaban a 18/18.02 px del título/filete en 1440×900 y 19.91/19.91 px en 2000×1000. El marco y `--columna-alto` quedan intactos; 1rem en cada punta lleva esas distancias a 34/34.02 y 35.91/35.91 px, con seis huecos iguales (dispersión 0.02 px antes y después). */ list-style:none; margin:var(--columna-y0, 0px) 0 0; padding:1rem 0; /* gana a `.cintillo` por orden, no por peso: las dos reglas son una clase */ font-size: clamp(.74rem, .92vw, .88rem); letter-spacing:.16em; font-variation-settings:"wght" 650; text-align:left; } .rail li{ color:var(--rail-tinta); transition:color 240ms ease; font-variant-numeric:tabular-nums; } .rail li[data-viva]{ color:#fff; } /* ── EL RÓTULO DEL REGISTRO ES EL PREMIO, Y LA FECHA VA DEBAJO ─────────────── ESTO ES LO QUE SE LEE EN EL PIE, donde los siete rótulos están escritos. En la columna de escritorio el premio NO se dibuja —sólo la fecha, § EL RÓTULO DE LA COLUMNA ES SÓLO LA FECHA, abajo—, así que de este bloque allí sólo rige `.rail__txt`. EL PORQUÉ ESTÁ EN `index.html`, sobre el
          . Aquí sólo la mecánica y el número que la sostiene: LA COLUMNA NO SE ENSANCHA. `--carril` lo sigue midiendo `mideCarril()` sobre `.rail__txt` —la FECHA, que es lo que medía antes de esta vuelta— así que el ancho del carril es exactamente el de ayer y la fotografía no pierde un píxel. Medido a 1440×900: `--carril-txt` 114.4 px antes y después. EL PREMIO ENVUELVE DENTRO DE ESE ANCHO, y por eso `white-space:normal` —el `nowrap` del
        1. valía cuando el único inquilino era una fecha de once caracteres y aquí desbordaría la columna sobre la fotografía—. Los rótulos están cortados para caber en dos renglones a este cuerpo: el más largo, «TERCER LUGAR CACHORRO», son 21 caracteres sobre los ~91 px de texto que deja el carril descontada la sangría de 1.4rem. Si alguien alarga uno y le salen tres renglones, lo que hay que acortar es el rótulo —vive en `rail1`…`rail7` del diccionario—, NO ensanchar `--carril`: ese ancho es hueco negro prestado y `decideRail()` manda la lista al pie en cuanto no cabe. LA FECHA BAJA DE CUERPO Y SE QUEDA EN LA TINTA DE REPOSO, con el `!important` que ya usaba el premio del registro por la misma razón: `.rail li[data-viva]` pinta de blanco la fila viva entera, y si la fecha lo heredara los dos renglones pesarían igual y el rótulo dejaría de mandar. */ .rail__premio{ display:block; white-space:normal; text-wrap:balance; } .rail__txt{ display:block; white-space:nowrap; font-size:.62rem; letter-spacing:.14em; font-variation-settings:"wght" 600; color:var(--rail-tinta); } /* EL BOTÓN NO SE VE. La fecha pulsable tiene que seguir leyéndose como un dato del cintillo y no como un botón de formulario: el navegador le trae fuente propia, fondo, borde y relleno, y los cuatro hay que devolverlos. `color` va heredado A PROPÓSITO — así el estado vivo lo sigue mandando `.rail li[data-viva]`, que es quien ya lo tenía, y el pulsable no pelea con él. Un color heredado sigue la transición del padre, así que el encendido de la fecha viva se mantiene igual. El foco no se dibuja aquí: `base.css` ya tiene su `:focus-visible` con `--brasa`, y es el mismo anillo que en todo el sitio. */ .rail button{ font:inherit; letter-spacing:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; /* DOS RENGLONES Y NO UNO: el premio arriba y la fecha debajo. Iba `align-items: center` con un solo hijo en línea; con dos hijos de bloque eso los centraría en horizontal, que es lo contrario de lo que pide una columna de rótulos. */ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.15rem; text-align:left; width:100%; /* ── EL HUECO DE LA MUESCA NO SE COLAPSA, SE PAGA CON SANGRÍA ────────────── Aquí había una muesca de `.9rem` y un `gap` de `.5rem` antes de la fecha, y los dos juntos son lo que ponía el texto en x=76.78 a 1440×900. Borrar el pseudo-elemento sin más habría corrido las siete fechas 22.4 px a la izquierda, contra el punto, y eso NO es lo que se pidió: se pidió quitar la muesca, no mover la columna. 1.4rem son los mismos 22.4 px, y `mideCarril()` los suma leyendo este padding — no un número escrito dos veces. El campo de toque de abajo va a `left:0`, así que la sangría queda DENTRO del área pulsable: el dedo sigue teniendo el botón entero. */ padding-inline-start:1.4rem; transition:color 240ms ease; position:relative; /* ancla del campo de toque; no cambia el dibujo */ } /* ── EL CAMPO DE TOQUE DE LA FECHA ──────────────────────────────────────────── Una fecha de 17 px de alto no es un objetivo táctil, y la WCAG pide 44. El campo se agranda con una capa transparente centrada en la fecha: en la columna de escritorio los siete van a 81.6 px de paso y en el registro del pie las filas ya miden 44, así que en ningún sitio se pisan entre ellos. */ .rail button::after{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; min-width:44px; height:44px; } /* ── EL RAÍL REVELA SÓLO EL ACTIVO ─────────────────────────────────────────── SIETE RÓTULOS ESCRITOS ERAN 21 RENGLONES EN UNA COLUMNA QUE SÓLO DICE DÓNDE VAS. La cura de la mañana —premio arriba, fecha debajo— arreglaba lo que tenía que arreglar (una fecha no dice a dónde se va, y `7 Jun 2025` salía dos veces) pero cobraba el ancho entero de la columna en texto permanente sobre la fotografía. Victor lo vio en escritorio. Ahora la columna enseña SIETE MARCAS y UN SOLO RÓTULO: el de la lámina que se está viendo. Las marcas siguen siendo siete y se cuentan de un vistazo —que es el trabajo del raíl—; el texto salta con el punto. Y como nunca hay dos visibles a la vez, la repetición deja de existir: «Mejor de la Raza» sale tres veces en la lista y dos rótulos idénticos pegados se leían como una avería. ── POR QUÉ EL RÓTULO NO PUEDE EMPUJAR NADA ──────────────────────────────── Los siete
        2. se reparten con `space-between` y `mideRail()` lee sus centros para anclar el punto. Si el
        3. vivo creciera al recibir su texto, los siete centros cambiarían EN MITAD DEL RECORRIDO: las marcas bailarían y el punto quedaría anclado a una maquetación que ya no existe. Por eso el
        4. mide `--rail-fila` FIJO —la marca y nada más— y el botón con el texto va ABSOLUTO dentro de él, centrado en la marca: el rótulo entra y sale sin tocar una sola caja del reparto. EL BOTÓN SIGUE SIENDO UN BOTÓN EN LOS SIETE. Lo que se oculta es el TEXTO, no el control: los siete siguen en el tabulador, con su campo de toque de 44 px y su `aria-current`. Y como el texto oculto SÍ sale del árbol de accesibilidad —`visibility:hidden`, no una opacidad—, el nombre accesible lo devuelve `nombraRail()` en `concursos.js` con un `aria-label`: ahí el atributo no tapa ningún rótulo visible que lo contradiga, que es lo que lo hacía un parche por la mañana. Se oculta con `visibility` y no con `display:none` a propósito: `mideCarril()` mide los siete rótulos con un Range, y sin cajas mediría cero. El PREMIO sí se fue con `display:none`, y por la razón contraria: ya no se mide ni se dibuja (§ EL RÓTULO DE LA COLUMNA ES SÓLO LA FECHA, abajo). `--carril` NO SE ESTRECHA POR ESTO, y está medido: cualquiera de los siete puede ser el visible, así que el ancho lo sigue pidiendo el más ancho de todos —la fecha—. Lo que esta vuelta le devuelve a la fotografía no es ancho, es la columna de texto. (Los 9 px que el carril sí perdió son de la vuelta siguiente y los perdió al irse el premio, no al ocultarse las fechas.) EL RELLENO DE LA COLUMNA SUBE DE 1rem A 2.66rem, Y ES GEOMETRÍA, NO GUSTO. Con el
        5. encogido a 11 px, 1rem dejaba el primer centro en y=118 y el rótulo de la primera lámina —centrado en su marca— se salía por arriba contra el filete del título. El número se midió: con las fechas escritas los siete centros iban de 154.5 a 792.3 en 1440×900, y con 2.66rem el primero vuelve a 154.5 al píxel. O sea que el punto recorre EXACTAMENTE el tramo que recorría ayer, las siete marcas caen donde caían las siete fechas, y la fotografía y su vecindad no se enteran de esta vuelta. SIN JAVASCRIPT NO PASA NADA DE ESTO, y es deliberado: todo cuelga de `[data-revela]`, que lo pone `concursos.js`. Sin él no hay punto que viaje ni lámina viva, así que siete marcas peladas serían una columna muda; se queda la lista escrita, que es lo que un navegador sin scripts puede dibujar. Y todo va escrito contra `.concursos__lado`: en un teléfono el
            se muda al registro del pie y allí manda `decideRail()`, que esta vuelta no toca. */ .concursos__lado .rail[data-revela]{ padding:var(--rail-punta) 0; } .concursos__lado .rail[data-revela] li{ position:relative; flex:0 0 auto; height:var(--rail-fila); } /* LA MARCA PELADA, EXACTAMENTE DEBAJO DEL PUNTO. Mismo diámetro y mismo eje que `.rail__aguja` —5 px y el mismo margen negativo—, así que la brasa no se posa AL LADO de la marca viva: la tapa. Lo que se ve es una marca que se enciende. */ .concursos__lado .rail[data-revela] li::before{ content:""; position:absolute; left:0; top:50%; width:5px; height:5px; margin:-2px 0 0 -2px; border-radius:50%; background:var(--rail-tinta); opacity:var(--marca, .45); transition:opacity 240ms ease, background-color 240ms ease; } /* ── LAS SIETE MARCAS, EN TRES PESOS: LO ANDADO · AQUÍ · LO QUE FALTA ──────── Siete marcas igual de encendidas dicen cuántas hay y nada más, y en una sección de nueve pantallas eso confunde: no se distingue haber llegado a la primera de haber llegado a la sexta. LAS SIETE SIGUEN DIBUJÁNDOSE —ninguna se esconde—, porque lo más valioso de esta columna es prometer que el recorrido TIENE FINAL; enseñar sólo hasta donde vas lo vuelve infinito. Lo que cambia es el peso, y así la columna dice dos cosas a la vez sin perder el conteo. El estado lo pone `pinta()` en `concursos.js` con `data-pasada`, dentro de la MISMA guarda que ya escribe `data-viva`: siete atributos siete veces en toda la sección, no sesenta por segundo. LA VIVA VA EN `--brasa` Y NO EN TINTA, y es la misma razón por la que la marca existe: la brasa de `.rail__aguja` se posa ENCIMA y del mismo diámetro, así que mientras el punto está parado en su marca no se ve una debajo de otra. Donde sí se ve es en el TRAMO: el punto viaja continuo y `data-viva` salta en el punto medio, así que la marca de destino se enciende en brasa antes de que el punto llegue. Eso es lo que hace al vivo inconfundible a un metro incluso con el punto a medio camino. LOS TRES NÚMEROS, MEDIDOS PÍXEL A PÍXEL sobre captura a 1440×900 en las SIETE láminas —el anillo de 4 a 9 px alrededor de cada marca, el mismo método con el que se midió la brasa (§ `.rail__aguja`)—, 42 casos: por venir .45 rgb(83,77,68) 2.51:1 ya pasada .95 rgb(178,164,145) 8.41:1 viva brasa 8.69:1 (medido en `.rail__aguja`) EN LOS 42 CASOS EL FONDO MÁS CLARO DEL ANILLO ES rgb(0,0,0), o sea que la fotografía más clara de la sección NO LLEGA A TOCAR LA MARCA: el raíl cae sobre el canto izquierdo de la lámina, donde la imagen ya se disolvió en negro. Por eso «la más clara» no cambia el veredicto y el peor caso es negro plano. LA MARCA POR VENIR NO LLEGA A LOS 3:1 DE UN ELEMENTO GRÁFICO DE INTERFAZ, y es una decisión, no un descuido: venía de .5 —2.68:1, que es lo que ya estaba servido— y baja a .45 para que el peso se lea. Lo que esa marca comunica —cuántas faltan— lo dicen también la brasa, con 8.69:1, y el folio del pie con su «3 de 7». Si un día esta marca fuera el único sitio donde se lee el recorrido, este número es el que caduca. */ .concursos__lado .rail[data-revela] li[data-pasada]::before{ --marca:.95; } .concursos__lado .rail[data-revela] li[data-viva]::before{ --marca:1; background:var(--brasa); } @media (prefers-reduced-motion: reduce){ .concursos__lado .rail[data-revela] li::before{ transition:none; } } .concursos__lado .rail[data-revela] button{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; } /* ── EL RÓTULO DE LA COLUMNA ES SÓLO LA FECHA ─────────────────────────────── EL PREMIO YA ESTÁ ESCRITO DOS VECES EN ESTA MISMA PANTALLA —el título fantasma sobre la fotografía y la mampara azul dentro de ella, que en la lámina 3 dicen las dos «TERCER LUGAR CACHORRO "B" DE GRUPO»— y el raíl era la tercera. Lo que por la mañana obligó a meterlo aquí —«7 Jun 2025» sale dos veces en la lista— dejó de existir en cuanto sólo hay UN rótulo visible: nunca se ven dos fechas juntas, así que no hay nada que desambiguar. SE VA DEL DIBUJO, NO DEL DOCUMENTO: el sigue en el
          1. y de ahí lo lee `nombraRail()` para el `aria-label`, que sí necesita premio + fecha —siete nombres que tienen que ser distintos entre sí, y las fechas 4 y 5 son el mismo día—. `display:none` y no `visibility:hidden` a propósito: aquí no hay nada que medir —`mideCarril()` dejó de preguntarle el ancho, ver `concursos.js`— y una caja invisible seguiría cobrando alto dentro del botón. En el registro del pie el premio SE LEE, y por eso esto va escrito contra `.concursos__lado`. */ .concursos__lado .rail[data-revela] .rail__premio{ display:none; } /* ── EL FUNDIDO DEL RÓTULO LO MANDA EL SCROLL, NO UN RELOJ ─────────────────── AQUÍ HABÍA UNA `transition` DE 220 ms y por eso parpadeaba: un reloj de interfaz corriendo contra un relevo que gobierna el dedo. Bajando deprisa, los seis relevos se pisan unos a otros y el rótulo entra a medio apagar; parado en mitad de un cruce, la interfaz ya había terminado su fundido mientras la fotografía seguía a medias. Dos tiempos distintos para una sola transición. Ahora el rótulo se apaga y se enciende CON LA MISMA LEY QUE LA MAMPARA DE LA FOTOGRAFÍA: `suave(1 − a/HUECO)`, el mismo `HUECO = 0.45` y la misma curva, que `pinta()` escribe por cuadro en `--rotulo` (§ LAS PALABRAS NO SE CRUZAN, SE RELEVAN, en `concursos.js`). O sea que la fecha se va del todo ANTES del punto medio, en mitad del cruce no hay palabra, y la siguiente aparece cuando su fotografía ya manda. Se lee como parte del relevo porque ES el relevo, y no puede parpadear: no hay reloj que se pise, sólo la posición del scroll. Y ASÍ LA TRAMPA DE LA VUELTA PASADA DESAPARECE EN VEZ DE ESQUIVARSE. Los seis dormidos se ocultan con `visibility:hidden` SIN transición ninguna, que es lo que los saca del árbol de accesibilidad en el mismo cuadro; lo que se funde es sólo la opacidad del que está vivo, que tiene que estar en el árbol de todas formas —es el `aria-current`—. No hay retardo que sincronizar. `prefers-reduced-motion` lo apaga: la fecha viva a opacidad 1 y el relevo es un corte en el punto medio, que es lo que hacía antes de esta vuelta. */ .concursos__lado .rail[data-revela] .rail__txt{ visibility:hidden; opacity:0; } .concursos__lado .rail[data-revela] li[data-viva] .rail__txt{ visibility:visible; opacity:var(--rotulo, 1); } /* ── Y EL FOCO TAMBIÉN REVELA, PORQUE SI NO DIBUJA UNA CAJA VACÍA ──────────── El anillo de foco de `base.css` rodea el BOTÓN, y el botón mide lo que mide su rótulo aunque el rótulo esté oculto. Sin esta regla, tabular por el raíl enseña seis rectángulos vacíos sobre la fotografía: capturado. Con ella, el que recibe el foco enseña su fecha dentro del anillo, que es lo que un teclado necesita para saber a qué lámina va a saltar. A opacidad 1 y no a `--rotulo`: el foco dice dónde está el dedo, no en qué punto del relevo va la fotografía. Sigue pintado con la tinta de reposo y no con el blanco de `li[data-viva]`. */ .concursos__lado .rail[data-revela] button:focus-visible .rail__txt{ visibility:visible; opacity:1; } @media (prefers-reduced-motion: reduce){ .concursos__lado .rail[data-revela] li[data-viva] .rail__txt{ opacity:1; } } /* ── LA VARIANTE B SE FUE CON LA MUESCA ────────────────────────────────────── Aquí vivía un banco: `?rail=b` invertía el botón para que la FECHA se apoyara en la línea del título en vez de la muesca, y desplazaba regleta, hilo y aguja al canto interior del carril. Era una elección entre dos piezas y las dos piezas ya no existen —no hay muesca que apoyar y no hay líneas que desplazar—, así que el banco sólo podía reconstruir la geometría que esta vuelta retiró. La decisión que B preguntaba la contesta hoy la composición entera: la fecha se apoya en la línea del título, y lo único que queda a su izquierda es el punto. Está en git, en el commit anterior. */ .concursos__pie{ grid-column:1; grid-row:3; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; /* En 1440/2000 su filete empieza en y=858.41/955.41, mientras `.idioma` termina en y=55.06; no hay cruce y este cierre conserva todo su ancho. */ border-top:1px solid var(--filete); padding-top:.85rem; opacity:var(--fotos); } /* EL PIE SE QUEDÓ CON UN SOLO INQUILINO. Aquí vivían dos: el registro —que sólo existe donde la columna no trae las fechas escritas, § EL REGISTRO abajo— y un «UNA SELECCIÓN» que el `space-between` mandaba al canto derecho. Victor lo retiró: «no agrega nada». Con un único hijo, `space-between` ya lo deja al canto izquierdo sin margen que lo empuje, así que el `order:-1` que lo adelantaba en el pintado se va con él. Y EL PIE NO SE QUEDA VACÍO EN NINGUNA VENTANA, que es lo que había que comprobar antes de retirar el nodo: quien enciende el registro no es un ancho sino `[data-regleta]` —la clase que pone `concursos.js` cuando la columna no trae las fechas escritas, sesenta líneas abajo—, y con ella el registro está presente a 390 y a 1440. Medido después de quitar el cierre: 34.7 px de alto y un solo hijo visible en las dos. Si algún día `[data-regleta]` no se pusiera, lo que quedaría es el `border-top` del pie, o sea el filete que cierra la columna bajo el título — y entonces se quita `.concursos__pie` entero en vez de dejarle un nodo vacío que lo sostenga. */ .registro{ display:none; } /* ── EL REGISTRO · CUANDO LAS FECHAS ESCRITAS NO CABEN ─────────────────────── Siete concursos, la viva encendida y descendiendo —la función intacta— pero SIN LAS FECHAS ESCRITAS AL LADO. Hasta esta vuelta aquí había una REGLETA: siete muescas mudas sobre la fotografía y la fecha viva en el pie. Se fue con las dos líneas, y al irse se llevó también lo que las siete muescas decían sin palabras — CUÁNTAS hay y EN CUÁL vas. Un punto solo no dice ninguna de las dos, así que lo dice el pie, con todas las letras: «5 JUN 2025 · 3 DE 7». ── Y LA CONDICIÓN SIGUE SIENDO UNA MEDIDA, NO UN ANCHO DE VENTANA ───────── Esto era una media query de 1000 px, y un número de ancho es el proxy equivocado: lo que decide no es cuánto mide la ventana, es cuánto HUECO NEGRO deja la fotografía a su izquierda. El encuadre se calcula con tres topes y en una ventana ancha y baja sobra hueco de sobra —a 1440×900, 205 px a cada lado— mientras que en una alta y estrecha del mismo ancho no sobra ninguno: a 1024×1366 el marco ocupa el ancho ENTERO. Con el corte por ancho, la tableta en vertical se llevaba las fechas escritas encima del perro. Así que lo decide `concursos.js` midiendo —§«¿CABEN LAS FECHAS ESCRITAS?»— y lo escribe en `data-regleta`. La regla en una línea: **fechas escritas sólo si el carril entero cabe en el hueco negro**. Donde no cabe, registro; y la fotografía no cede un píxel en ningún caso. ── NO HAY SIETE CONTROLES INVISIBLES, PORQUE NO HAY SIETE CONTROLES ─────── La regleta escondía el TEXTO de las siete fechas y dejaba los siete botones sobre la fotografía: alcanzables con el tabulador, pulsables por un pulgar, y sin una palabra que dijera a dónde llevaban. Eso se acabó. `concursos.js` MUEVE el
              —el mismo, no una copia— dentro del
              del pie, así que mientras el registro está cerrado el único control del pie es su resumen, y al abrirlo salen las siete fechas ESCRITAS, con su premio donde hace falta para distinguirlas. Es una lista de archivo de la casa: filas de 44 px, negro opaco, foco visible y nada de pastillas ni iconos nuevos. Que no haga falta una red por si JavaScript no llega lo dice la propia sección: `.lamina` nace en `opacity:var(--w, 0)` y `--w` lo escribe `pinta()`. Sin JavaScript no hay fotografías, y el
                se queda en la columna, que es el único estado que un navegador sin scripts puede dibujar. */ /* EL CARRIL DEL REGISTRO ES EL DEL PUNTO Y NADA MÁS —5 px de brasa en un carril de 1rem—. No es tacañería: aquí la lámina llega hasta el canto, así que cada píxel de carril es fotografía, y además contra este borde se mide el campo del rótulo del premio. Con los 7.2rem + 2.4rem de escritorio, el premio perdía un 15 % de cuerpo en un teléfono. */ .concursos__vista[data-regleta]{ --carril:1rem; --aire:.8rem; } /* ── EL PIE DEL REGISTRO · EL FOLIO ────────────────────────────────────────── Un es un botón con dos costumbres del navegador que aquí estorban: un triángulo delante y un `display:list-item` que lo dibuja. Se le quitan las dos y queda un rótulo del cintillo que se puede pulsar — el resto del dibujo ya lo pone `.cintillo`, y el foco lo pone el `:focus-visible` de `base.css`, que es el mismo anillo de todo el sitio. SU CAMPO TÁCTIL NO SE PAGA CON ALTO, y esto es una medida, no un escrúpulo. Un `min-height:44px` en el resumen engorda el pie 13.6 px, la escena se queda con 13.6 px menos y la fotografía —que se centra en lo que sobre— SUBE 12 px en un teléfono. Medido: el marco pasaba de y=313.80 a y=301.86 a 390×844. El encargo de esta vuelta dice que la fotografía no se mueve, así que el campo se agranda como ya lo hace el de las fechas: una capa transparente que sale de la caja sin cambiarla. Por arriba sólo hay lámina, que no recibe ni toque ni foco. */ [data-regleta] .registro{ display:block; position:relative; } .registro__folio{ display:block; position:relative; color:#fff; cursor:pointer; list-style:none; /* Firefox: sin triángulo */ white-space:nowrap; } .registro__folio::-webkit-details-marker{ display:none; } /* Safari: igual */ .registro__folio::after{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; min-width:44px; height:44px; } /* ── LA LISTA, HACIA ARRIBA ────────────────────────────────────────────────── Se abre SOBRE la fotografía y no empujando el pie, porque el pie es la línea de abajo de una vista clavada: empujarlo movería la fotografía entera cada vez que alguien mira el registro. Absoluta y anclada por abajo al resumen, crece hacia arriba, que es hacia donde hay sitio. NEGRO OPACO Y NO TRANSLÚCIDO: debajo hay una fotografía a todo color y una lista de siete fechas leída a través de ella no es una lista, es un estorbo. Es el único sitio de la sección con un fondo propio, y se lo gana porque es un panel que el visitante ABRE — no una capa que le sale sin pedirla. `max-height` con `dvh` y no `vh`: en un teléfono la barra del navegador entra y sale, y `vh` mide la ventana grande, así que con siete filas de 44 px y una barra desplegada la primera fecha se saldría por arriba. Las 8rem que se descuentan son el pie y su aire. */ /* Y SE ESCONDE A MANO, QUE NO ES REDUNDANTE: MEDIDO AQUÍ Y EN EL CARRUSEL. Chrome esconde el interior de un `
                ` cerrado con `content-visibility:hidden` sobre su ranura, y esa contención NO ALCANZA a un hijo `position:absolute` cuyo bloque contenedor está FUERA de la ranura. Con sólo el `
                `, esta lista quedaba DIBUJADA estando cerrada: medido a 390×844, los siete botones daban rect —el primero en [19, 473, 183, 44]— aunque no se pintara nada. Aquí el tabulador sí los saltaba, pero el carrusel midió el mismo patrón y a él sí se le colaban los once en el tabulador: o sea que la diferencia la pone el motor, no el marcado, y no se puede apostar a ella. Con `display:none` se van de la caja y del tabulador en cualquier motor. § LA LISTA DE LAS ONCE, en `carrusel.css`. */ .registro:not([open]) .rail{ display:none; } .registro .rail{ position:absolute; bottom:calc(100% + .55rem); left:0; z-index:4; width:max-content; min-width:100%; max-width:min(22rem, calc(100vw - 2.2rem)); height:auto; display:block; background:var(--negro); border:1px solid var(--filete); /* `--dvh-estable`, por lo mismo que el panel del carrusel: el registro se abre y se lee con el dedo puesto. (§ `Assets/JS/viewport.js`) */ max-height:calc(100 * var(--dvh-estable, 1dvh) - 8rem); overflow-y:auto; overscroll-behavior:contain; padding:.35rem 0; } .registro .rail li{ display:block; } .registro .rail button{ min-height:44px; padding:.5rem .95rem; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.15rem; } /* El campo de toque de la columna sobra aquí: la fila YA mide 44 px, y una capa de 44 centrada en una fila más alta se saldría por los dos cantos y se pisaría con la vecina. */ .registro .rail button::after{ content:none; } /* EL PREMIO DEL FOLIO, QUE ES EL ÚNICO QUE SIGUE SIENDO SEGUNDO RENGLÓN. El folio del pie enseña UNA pieza a la vez y no siete, así que contra la anterior —que ya no está en pantalla— la fecha no distingue nada: la 4 y la 5 son el mismo día y la 6 y la 7 se separan en un dígito, `27 May 2026` y `28 May 2026`. Con la fecha sola el folio parece clavado mientras el visitante baja, y así se leyó en un teléfono de verdad. `escribeFolio()` le cuelga a las SIETE el premio LARGO —el del

                , no el rótulo corto del raíl—, porque ahí hay ancho de pie entero y no una columna; por qué van las siete y no sólo las dos —el alto del segundo renglón se reserva SIEMPRE— está en esa función. VA ESCRITO CONTRA EL FOLIO Y NO CONTRA `.registro`, y ésa es la mitad de esta regla. Hasta hoy decía `.registro .rail__premio` y alcanzaba a los dos sitios —el folio y la lista—, que era correcto mientras el premio fuese secundario en los dos. Ya no lo es: en la lista MANDA (§ arriba, EL RÓTULO DEL RAÍL), y un selector que cubra los dos los pinta igual y deshace la jerarquía nueva. */ .registro__folio .rail__premio{ display:block; font-size:.62rem; letter-spacing:.14em; color:var(--rail-tinta); /* gana al #fff de la fila viva */ font-variation-settings:"wght" 600; white-space:normal; } @media (max-width: 820px){ /* EL VIAJE DEL TÍTULO SE ACORTA EN UN TELÉFONO, Y LA RAZÓN NO ES EL GUSTO SINO LA PROPORCIÓN. `--viaje` vale 115vh porque el viaje ES un relevo más, y en un monitor de 900 px de alto eso son 1 035 px por los que el rótulo cruza una composición ancha con la fotografía ya entrando por un lado. En un teléfono de 844 la misma regla da 971 px de recorrido en los que NO HAY NADA MÁS que el rótulo: la foto todavía no cabe al lado, así que el visitante empuja una pantalla entera de negro con tres palabras flotando en medio. Victor lo dijo mirándolo: «queda mucho espacio arriba, se ve muy forzado». 70vh mantiene las tres cosas que el viaje tiene que contener —las palabras llegando escalonadas, el respiro y el descenso— y le quita 380 px de negro muerto. No se toca `concursos.js`: mide la regla y le sale el número nuevo. */ .concursos{ --viaje:calc(70 * var(--vh-estable, 1vh)); } .concursos__vista{ padding-inline:1.1rem; } .concursos__pie{ flex-direction:column; align-items:flex-start; gap:.45rem; } /* Apilado no hay canto que reflejar —sólo arriba y abajo—, así que el `order:-1` que manda al cierre a la izquierda en la fila de escritorio se deshace aquí: la columna vuelve al orden del DOM, registro encima, cierre debajo, que es el que tenía antes de esta lane. */ } /* ── MENOS MOVIMIENTO ───────────────────────────────────────────────────────── No se mueve nada: ni el acercamiento, ni el desenfoque. El relevo se queda en un cruce de opacidad, que sigue siendo el mecanismo entero —una pieza da paso a la siguiente— sin un solo píxel viajando. Y EL TÍTULO NO VIAJA: `--viaje` a 0 le quita al riel el tramo del viaje, así que la sección abre directamente en su estado final —el rótulo en su sitio, las fotos puestas— y no queda ni un píxel de scroll muerto donde antes estaba el recorrido. Una línea, y `concursos.js` no necesita saber nada: mide la regla, le sale 0 y no hay viaje que pintar. */ @media (prefers-reduced-motion: reduce){ .concursos{ --viaje:0px; } .lamina{ transform:none; filter:none; } } /* ══ EN UN TELÉFONO SE SUBE EL TRAZO · wght, no tamaño ═════════════════════════ Victor lo lleva diciendo desde hace rato y tenía razón: en celular la tipografía «a veces se puede leer y a veces se ve como nada sharp, desvanecida». No era el color, ni el tamaño, ni la pantalla: era el TRAZO, y sigue siéndolo. LO QUE CAMBIÓ AL PASAR A CORMORANT ES EL EJE, NO EL PROBLEMA. Con Bodoni Moda la cura era `opsz` —bajar del corte de display al de texto engordaba el fino siete veces—. Cormorant Garamond no tiene ese eje y no le hace falta: es una GARALDA, su contraste entre grueso y fino es el de un grabado del XVI y ningún cuerpo la deja sin fino. Lo que sí le pasa es lo otro, y es lo que este bloque sigue arreglando: los mismos rótulos se dibujan MUCHO más pequeños en un teléfono que en un monitor — el lockup se dibuja a 46 px en escritorio y a 24 px en un teléfono el premio se dibuja a 32 px en escritorio y a 26.5 px (medido) — y por debajo de cierto cuerpo el asta baja de un píxel de dispositivo, el rasterizador la reparte en gris, y eso es exactamente «desvanecido». Se sube el peso un peldaño más: el eje va de 300 a 700, así que hay sitio. No se toca ni un tamaño, ni un tracking, ni una posición: la misma composición, con el trazo que aguanta. */ @media (max-width:820px){ .concursos__lockup{ font-variation-settings:"wght" 600; } .premio{ font-variation-settings:"wght" 650; } } /* ══ EN UN TELÉFONO LA SECCIÓN RESPIRA · aire y jerarquía ══════════════════════ Victor, mirándolo en su teléfono: «todo en el centro, muy pegado, se ve vulgar, dale respiración». No es un bug: es composición, y la queja tiene una causa medible. A 375×812 TODO caía sobre el mismo eje y con el mismo margen: el cintillo del título x = 17.6 el raíl de fechas x = 17.6 la fotografía centrada, 340 de 339.8 de ancho útil el rótulo del premio CENTRADO sobre la fotografía la fecha viva y el cierre x = 17.6, apilados y del MISMO cuerpo el negro de arriba 184 px · el negro de abajo 184 px Un eje, un margen, dos negros iguales y dos textos del mismo tamaño: eso es una plantilla. Y encima el rótulo del premio aterrizaba de dos renglones JUSTO sobre las caras —«NEW MEXICAN / CHAMPION» partido por la cabeza del juez y la de Liz—, así que las dos cosas que hay que leer se estorbaban. El corte es 640 px y no los 820 de las reglas de arriba, porque ESTO ES TRABAJO DE TELÉFONO: a 820 entra una tableta en vertical, donde la fotografía ya deja hueco negro a los lados y la composición de escritorio funciona. 640 es además el mismo corte que el cintillo del pie del hero. ── ① EL PREMIO SE VA ARRIBA Y SE CUELGA DEL RAÍL ───────────────────────────── En escritorio el rótulo del premio se cuelga del CRÁNEO —36 % de altura de mayúscula por encima del recorte y el resto detrás de las cabezas— y ahí es la firma de la sección. En un teléfono esa misma regla lo mete en la cara de las figuras, porque el mismo texto que arriba cabe en una línea aquí cae en dos. Así que en teléfono el premio SALE de la fotografía y se planta en el negro que ya había encima de ella —184 px de vacío que no hacían nada—: primero se lee QUÉ ganó, después se ve la fotografía. Un orden, que es lo que faltaba. Y NO SE CENTRA: se alinea a la izquierda contra un eje de 28.8 px que trae la composición de esta sección desde que el raíl existe. Con eso hay DOS ejes en la pantalla, el del cintillo a 17.6 y el del premio a 46.4, que es lo contrario de una plantilla. LOS 28.8 PX SE ESCRIBEN, Y ANTES SE CALCULABAN CON `--carril + --aire`. Eso valía cuando el lateral era una columna escrita y el premio se apartaba de su canto. Ahora el lateral de un teléfono no tiene columna: tiene un punto de 5 px, y `--carril` sólo sigue midiendo 1rem para que el punto tenga dónde vivir. Colgar de esas dos variables habría movido el premio a 5 px del canto —otro eje, y sin haberlo decidido— el día que alguien las ajustara por el punto. El número se queda escrito porque es una DECISIÓN de composición y no la consecuencia de otra: es el eje que Victor vio y aprobó, medido a 28.80. El tracking se aprieta .13em SÓLO aquí, y no es gusto: una versal CENTRADA de rótulo pide aire entre letras, pero una alineada a la izquierda pide COLUMNA —abierta, casi todos los renglones llegan al canto y no queda bandera por la derecha, que es lo único que distingue una columna de un bloque justificado—. Medido a 375 y en inglés, apretándolo los rótulos se DESPEGAN del techo: `MEJOR DE LA RAZA` pasa de 282 a 239 px y `NUEVA CAMPEONA` de 264 a 228, de una columna útil de 311. Sólo el más largo sigue tocando su tope, y no es el mío: es el que le pone `concursos.js`, 295 px. Y POR ESO EL TRACKING SE RESTA EN LUGAR DE ESCRIBIRSE, y el CUERPO no se toca: el tamaño sigue colgando de `--cap` y de `100cqh`, así que la red de `concursos.js` —aflojar primero el tracking, y sólo si ni así cabe, el cuerpo— sigue entera. Escribir un `clamp` la habría dejado muerta, y en español MUERDE de verdad: `TERCER LUGAR · CACHORRO «B» DE GRUPO` se lleva el tracking hasta su suelo y el cuerpo de 25.4 a 21.0 px para caber. `align-items:end` y `bottom:100%`: los siete rótulos se cruzan en la misma celda y tienen uno, dos renglones o dos con líneas distintas. Anclados por ABAJO todos comparten la línea de base que toca la fotografía, así que al relevarse no dan un salto vertical — que es exactamente por lo que en escritorio se anclan por arriba al cráneo. ── ② EL PIE VUELVE A SER UNA FILA, Y AHORA TIENE ESCALONES ────────────────── Apilados y del mismo cuerpo, «9 NOV 2024» y «UNA SELECCIÓN» eran dos líneas de texto gris iguales en la esquina: ninguna manda. En fila con `space-between` la fecha se va al canto izquierdo y el cierre al derecho —o sea que el pie por fin USA el ancho de la pantalla en vez de amontonarse en un lado— y entre las dos hay un escalón de cuerpo y de tinta: la fecha en blanco y a .74rem, el cierre en `--tenue` y a su cuerpo de cintillo. Caben de sobra: medido a 375, 96.4 + 104.4 = 201 px de 340. ── ③ EL FILETE DEL PIE NO LLEGA AL CANTO ──────────────────────────────────── Dos filetes de borde a borde, uno arriba y otro abajo, encajonan la composición y son la mitad del aire de plantilla. El de arriba se queda —es el que sostiene el rótulo de la sección y el que aterriza el viaje del título—; el de abajo se acorta al 52 %. La caja deja de cerrarse y el negro de la derecha se hace parte de la página. Va en un `::before` y no en el `border` porque el borde tiene que seguir reservando su píxel de alto: si se quita, el pie sube un píxel y la escena crece uno, y `concursos.js` recalcula el encuadre por nada. NADA DE ESTO TOCA `concursos.js` NI EL VIAJE DEL TÍTULO: el viaje mide la regla (`--viaje`, que aquí no se cambia) y el

                de la cabecera (que aquí no se toca ni en cuerpo, ni en tracking, ni en posición). Medido antes y después en las tres ventanas — está en el informe. */ @media (max-width:640px){ /* EL RÓTULO DEL PREMIO, FUERA DE LA FOTOGRAFÍA Y CONTRA EL EJE DEL RAÍL */ .concursos__premios{ top:auto; bottom:100%; margin-bottom:1.15rem; align-items:end; /* línea de base común, ver arriba */ padding-left:1.8rem; /* 28.8 px · el eje, escrito · ver arriba */ } .premio{ text-align:left; /* EL TRACKING SE RESTA, NO SE ESCRIBE, y de eso depende que la red de seguridad siga viva. `concursos.js` mide el rótulo ya renderizado y, si no cabe en su campo, BAJA `--track`; y sólo si ni así cabe, baja `--cap` —o sea el cuerpo—. Un `letter-spacing:.13em` literal habría ganado a la variable y la primera mitad de esa red se habría quedado escribiendo un número que nadie lee. Y aquí la red MUERDE, no es teórica: a 375 de ancho `CACHORRO «B» DE GRUPO` acaba con el tracking en su suelo y el cuerpo bajado a 21.0 px de los 25.4, y en inglés `PUPPY «B» GROUP` sale con el tracking ya recortado. Restando, aflojan los dos a la vez. */ letter-spacing: calc(var(--track, .26em) - .13em); line-height:1.06; } /* LA FOTOGRAFÍA BAJA UN POCO, Y NO CAMBIA DE TAMAÑO NI UN PÍXEL. El encuadre lo calcula `concursos.js` y lo escribe en `width`/`height` en línea; aquí sólo se mueve la CAJA dentro de la que los márgenes automáticos lo centran. Con `inset-block-start:6vh` esa caja empieza 6vh más abajo y el centrado automático reparte la diferencia, o sea que la fotografía baja 3vh —25 px a 844 de alto— sin que el marco mida nada distinto y sin que JS tenga nada que recalcular. El porqué: con el premio mudado al negro de arriba, ese negro pasó a estar OCUPADO y el de abajo se quedó vacío del todo —a 430×932, 157 px de aire arriba contra 235 abajo—. Bajar la fotografía le devuelve campo al rótulo, que es lo que lo hace mandar, y le quita vacío muerto al pie. */ /* ESTE `6vh` ERA LO ÚLTIMO QUE MOVÍA LA FOTOGRAFÍA. Con la vista y su relleno ya congelados, medido en FxiOS a 390 con la barra de 752 a 880, el marco todavía se corría 3.85 px —la mitad de los 7.7 que crece el `6vh`, porque el centrado automático reparte la diferencia, que es la misma cuenta que explica el comentario de aquí arriba—. Por `--vh-estable` no se mueve. (§ `Assets/JS/viewport.js`) */ .concursos__marco{ inset-block-start:calc(6 * var(--vh-estable, 1vh)); } /* EL PIE: UNA FILA CON DOS CANTOS Y DOS CUERPOS Y ENVUELVE. En 320 px el folio más largo y «UNA SELECCIÓN» no caben en la misma línea con holgura, y de las dos cosas la que NO puede encoger es el folio: es el dato. Con `flex-wrap` el cierre —que es lo secundario— baja solo a la línea de abajo, y nadie tiene que reducir una letra. Medido a 320 y a 390 en los dos idiomas, § el pie, en el informe de esta vuelta. */ .concursos__pie{ position:relative; flex-direction:row; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.2rem 1rem; border-top-color:transparent; /* el píxel se queda; el trazo se va */ } .concursos__pie::before{ content:""; position:absolute; left:0; top:-1px; width:52%; height:1px; background:var(--filete); } .registro__folio{ font-size:.74rem; letter-spacing:.30em; } }