/* 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; /* 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. */ --viaje:115vh; /* 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 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. */ .concursos__riel{ position:relative; height:calc(var(--piezas) * 115vh + 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; height:100vh; height:100dvh; 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; row-gap: clamp(.7rem, 2vh, 1.4rem); padding: clamp(1rem, 3.4vh, 2.2rem) clamp(1.2rem, 4vw, 3.4rem) clamp(1rem, 3vh, 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; /* 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; } /* 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; border-top:1px solid var(--filete); padding-top:.85rem; /* 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. */ --marco-alto: min(80vh, calc((100vw - 2.2rem) / 1.25), 1122px); --marco-alto: min(80dvh, 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; color:#fff; 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)); 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 primera fecha empieza en el canto de arriba del marco y la última acaba en el de abajo — las dos a la MISMA distancia, cero—, y no hay hueco muerto porque no hay nada que sobre. 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; list-style:none; margin:var(--columna-y0, 0px) 0 0; padding: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; white-space:nowrap; } .rail li[data-viva]{ color:#fff; } /* 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; display:flex; align-items:center; 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; } /* ── 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; 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); max-height:calc(100dvh - 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; white-space:nowrap; } /* 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, DONDE LA FECHA NO BASTA — Y DENTRO DEL REGISTRO NO BASTA NUNCA. Dos de las siete son el MISMO día —7 Jun 2025, las piezas 4 y 5— y en una lista de archivo dos renglones idénticos no son dos destinos, son una errata. `concursos.js` saca el premio del rótulo que ya está en la página y lo cuelga en DOS sitios, con esta misma clase y por tanto con esta misma regla: · EN LA LISTA DESPLEGADA, sólo bajo las fechas repetidas. Las cinco que ya son únicas no lo necesitan, y colgárselo a las siete convertiría una lista de fechas en una tabla. · EN EL FOLIO DEL RESUMEN, bajo LAS SIETE. Ahí no se ven siete renglones a la vez sino UNO, y contra la pieza 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. Por qué van las siete y no sólo las dos —el alto del segundo renglón se reserva SIEMPRE— está en `escribeFolio()`, en `Assets/JS/concursos.js`. Va en el cuerpo de abajo del cintillo y en `--rail-tinta`, para que la fecha siga mandando en los dos sitios. */ .rail__premio{ display:none; } .registro .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; } @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:70vh; } .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. */ .concursos__marco{ inset-block-start:6vh; } /* 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; } }