`, que es el que lo envuelve. Así que arriba el empujón no lo acusa un rótulo: LO ACUSA LA FOTOGRAFÍA, creciendo un pelo contra el dedo, como una lámina que se aprieta y no cede. Es el gesto de las cabeceras de foto de las aplicaciones, que es literalmente como lo pidió Victor. Y AQUÍ ESTÁ LA REGLA DURA DE ESTA LANE, la que hace que los dos cantos NO sean el mismo efecto en espejo: EL MUELLE DE ARRIBA SÓLO PUEDE REBASAR HACIA ARRIBA. `--cima` está topado en 0 por el script, así que esta escala nunca baja de 1. Una escala de 0.99 sobre un elemento `position:fixed` a pantalla completa ABRE UN MARCO en los cuatro cantos, y por ese marco se ve lo que haya debajo del hero — que es exactamente el agujero de dceb633 y de 1431d9e por una puerta nueva. Un rebote elástico sin ese tope lo abriría en CADA gesto. Abajo el muelle sí rebasa a los dos lados, y puede porque allí el hero no se pinta. VA COLGADO DE UNA CLASE Y NO COMO `transform:scale(1)` PERMANENTE: en reposo este `

` no lleva transform ninguno, así que la capa del canvas se queda como estaba y esto no le cuesta nada al hero mientras nadie empuja. */ body.rebota-cima .hero__lienzo{ transform:scale(calc(1 + var(--cima, 0) * var(--lamina, .015))); } /* La marca existe como TEXTO, no sólo como píxeles en un canvas. Se oculta a la vista, nunca a la accesibilidad: nada de display:none ni de visibility. */ .hero__marca{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; font:400 1rem/1 Georgia, serif; } /* Banco de pruebas. Sólo aparece con ?hud — no es parte de la página. */ .hero__medidas{ position:absolute; right:12px; bottom:10px; display:none; font:10.5px/1.6 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue); font-variant-numeric:tabular-nums; } body.hud .hero__medidas{ display:block; } /* Foco visible: el hero no tiene controles todavía, pero el sitio sí los tendrá y esto es el default del que van a heredar. */ :focus-visible{ outline:2px solid var(--brasa); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ .hero__lienzo{ transition-duration:200ms; } } /* ══ LAS DOS PORTADAS ══════════════════════════════════════════════════════════ Esto vivió un rato en un `CSS/portada.css` aparte y volvió aquí POR UNA MEDIDA: sobre HTTP/1.1 con 150 ms de ida y vuelta, un archivo más en la primera pantalla le quita al `three.js` de 143 KB —de quien cuelga que la pieza se destape— unos 95 ms, medidos con un control (HEAD más un archivo cualquiera: 3 478 → 3 573 ms en Fast 3G con CPU ×4). Dos reglas de riel y un menú no valen eso. Y además es su sitio: el alto del riel es hermano de `.hero` y `.hero__riel`, que están veinte líneas más arriba, y el menú es cromo de la página entera. */ /* ── EL ALTO DEL RIEL, QUE ES LA FRONTERA DE CADA PORTADA ───────────────────── `.hero__riel` es lo único que le da altura al documento —el hero es `fixed` y no ocupa flujo— así que este número decide DÓNDE empieza la sección de concursos y, con ella, si `loading="lazy"` sirve de algo. EL BUCLE MIDE UNA PANTALLA, en todas las ventanas. No cuelga del scroll: gira con su reloj y no tiene recorrido interno que agotar, así que está agotado desde el primer píxel y `HERO_FIN()` vale 0 igual en un escritorio que en un teléfono. El tríptico no lleva regla aquí: `medios.js` le pone la suya en el —una pantalla en tríptico, N en relevo— y `hero.js` la reescribe inline con su propio encuadre. Por eso ésta cuelga de `html.portada-bucle`: gana por especificidad a la de `medios.js` venga en el orden que venga, y está decidida ANTES del primer layout porque `portada.js` marca el desde el . `svh` ANTES QUE `vh`, y no es un detalle: `100vh` en un teléfono es la ventana GRANDE —con la barra del navegador escondida— mientras `innerHeight` es la de ahora, más pequeña. La resta de `HERO_FIN()` daría sesenta u ochenta píxeles de recorrido muerto antes de que el salto a concursos se dispare. `100svh` es la ventana pequeña, que nunca es mayor que `innerHeight`: la frontera queda clavada en 0 y además no salta cuando la barra se esconde. El `100vh` de delante es el respaldo para quien no conozca `svh`. */ html.portada-bucle .hero__riel{ height:100vh; height:100svh; } /* ── EL MENÚ DEL CLICK DERECHO ──────────────────────────────────────────────── Tiene que parecer de esta página y no de un plugin: la didona del cintillo sobre negro, un filete de un píxel y nada más. Sin sombra de sistema operativo, sin esquinas redondas, sin degradado — la página entera está hecha de eso. `position:fixed` porque las coordenadas del click son de la ventana, y z-index por encima de la sección de concursos, que va en 1: el menú se abre con el click derecho EN CUALQUIER SITIO, también sobre una fotografía. */ .portada-menu{ position:fixed; z-index:50; min-width:13.5rem; padding:.35rem 0; background:rgba(0,0,0,.92); border:1px solid var(--filete); /* El desenfoque de detrás es lo único que delata que hay algo vivo debajo. Es un adorno de verdad: si el navegador no lo sabe hacer, el menú sigue siendo negro opaco y legible. */ backdrop-filter:blur(6px); } /* Un menú no se anima: aparece donde se pulsó. Cualquier transición aquí lo convierte en un widget, y esta página no tiene widgets. */ /* LOS DOS SELECTORES DE ABAJO LLEVAN `.cintillo` PEGADO, y no es adorno: la didona del cintillo se declara en `concursos.css`, que se enlaza DESPUÉS de esta hoja, así que con un selector de una sola clase su `font-size`, su `letter-spacing` y su `color` ganarían por orden y el menú saldría con el tracking de un cintillo —.34em— en vez del suyo. Con las dos clases este bloque tiene más peso y manda venga en el orden que venga. */ .portada-menu__titulo.cintillo{ padding:.3rem 1rem .45rem; color:var(--filete); font-size:.58rem; letter-spacing:.30em; border-bottom:1px solid var(--filete); margin-bottom:.3rem; } .portada-menu__item.cintillo{ display:block; width:100%; /* un