/* sitio.css — Gran Danés LM ───────────────────────────────────────────────────────────────────────────── El sitio vive en negro a propósito y no tiene tema claro: la pieza es una fotografía de las siete de la tarde disolviéndose en negro, y sobre blanco no existe. Por eso `color-scheme: dark` está declarado en el y todos los colores se pintan explícitos — nada se hereda del navegador. */ :root{ --negro: #000; /* el ground. La foto se disuelve EN él, no sobre él */ --tinta: #e8ddc8; /* crema cálida: el mismo tono que la luz de la foto */ /* DOS tokens, no uno: el texto y el filete pedían cosas opuestas. El tostado viejo (#5d5346) sobre negro da 2.79:1 — bajo el mínimo 4.5:1 de WCAG AA para texto normal, y aquí es el peor caso (cuerpo chico, versales, tracking alto). Subirlo a secas dejaba los filetes de 1 px como un subrayado grueso. Por eso se parten: --tenue pinta texto (5.11:1 contra negro, mismo matiz cálido); --filete conserva el susurro de 1 px. Medido, no a ojo. */ --tenue: #8a7b68; /* texto: 5.11:1 contra --negro */ --filete: #5d5346; /* trazo de 1 px: el tostado de siempre */ --brasa: #c8a06a; } *{ box-sizing:border-box; margin:0; padding:0 } /* EL RESPALDO DE `overflow-x:clip` PARA iOS 15.6 — el porqué, en la regla de abajo. Va antes para que `clip` lo pise donde `clip` se entiende. */ html{ overflow-x:hidden; } html,body{ min-height:100%; background:var(--negro); color:var(--tinta); /* `clip`, NO `hidden`, Y ES LA DIFERENCIA ENTRE QUE LA SECCIÓN DE CONCURSOS FUNCIONE O NO. `overflow-x:hidden` obliga a que `overflow-y` compute a `auto`, y eso convierte al en un contenedor de scroll propio: un `position:sticky` de dentro deja de pegarse a la ventana y se va hacia arriba con la página. Medido: el top de la vista bajaba a −540, −1620, −2700… o sea que el relevo cambiaba de pieza mientras el usuario ya estaba mirando negro vacío. `clip` recorta igual y NO crea contenedor de scroll, así que el sticky vuelve a pegarse a la ventana. ── Y `clip` NO EXISTE ANTES DE SAFARI 16, o sea que en un iPhone con iOS 15.6 —que está en el parque objetivo— esta declaración entera se cae y el `overflow-x` se queda en `visible`: la página se arrastra de lado. El respaldo va en la regla de ARRIBA y SÓLO SOBRE `html`, nunca sobre el , y esa distinción es todo el arreglo: el overflow del ELEMENTO RAÍZ se propaga al viewport y el propio computa a `visible`, así que no se convierte en contenedor de scroll y el sticky de concursos sigue pegándose. Al no se le pone respaldo: con el viewport ya recortado no le queda nada que recortar. Y LA DISTINCIÓN ESTÁ MEDIDA, no razonada: con las cinco declaraciones que Safari 15.6 tira y el respaldo SÓLO en , el top de `.concursos__vista` sale 0 en y=4000, 5000, 6000 y 7000 —pegada—. Añadiendo el mismo respaldo al , los mismos cuatro puntos dan −3156, −4156, −5156 y −6156: la vista se va con la página. Son los mismos números negativos del párrafo de arriba, reproducidos. El orden es el que manda: respaldo primero, `clip` después. Donde `clip` existe gana por ser la última declaración y el dibujo es el de siempre. */ overflow-x:clip; } body{ -webkit-font-smoothing:antialiased; } /* ── EL REBOTE DE ARRIBA NO PUEDE ENSEÑAR NEGRO ─────────────────────────────── VICTOR, EN EL IPHONE: «responde y rebota, la típica. No quiero que vean negro si scrollean hacia arriba.» Al tirar hacia abajo estando arriba del todo, el rebote elástico de iOS despega el contenido del canto y lo que asoma por encima es el fondo del ELEMENTO RAÍZ — que hasta hoy era el mismo negro plano del resto de la página. En un sitio cuyo hero es una fotografía a sangre, eso se lee como un hueco. NO SE MATA EL REBOTE, y esa era la otra salida. `overscroll-behavior-y:contain` lo quita, pero en la raíz quita TAMBIÉN el tirar-para-recargar del navegador, que es gesto de sistema y no nuestro. Lo que molesta no es que rebote: es lo que se ve detrás. ASÍ QUE EL FONDO DE LA RAÍZ DEJA DE SER NEGRO Y PASA A SER EL CANTO DE ARRIBA DE LA ESCENA QUE ESTÉ PUESTA. `hero.js` lo publica al pasar de lámina (§ el campo `canto` de ESCENAS), así que el rebote continúa la fotografía en vez de cortarla. Y NO PUEDE SER UN COLOR FIJO, que es lo primero que uno intenta: medido sobre el recorte vertical real de cada una a 390×844, el canto de arriba va de #0d0b0a (Piano) a #9e9387 (Cachorro) — un factor de diez. Un solo valor acertaría con una y fallaría con seis. EL VALOR ESCRITO AQUÍ ES EL DE SANTOS, y por la misma razón que su `--foco` vive en el CSS: Santos es la que abre y la única que se dibuja SIN JavaScript. Si `hero.js` no llega, el rebote sigue enseñando el canto correcto. `background-color` y no `background` para no pisar nada, y con la MISMA duración y curva del fundido de las láminas: si el color saltara de golpe mientras las fotografías se disuelven, el salto se vería justo en el borde. PENDIENTE DE CONFIRMAR EN EL APARATO DE VICTOR. El rebote elástico es un gesto táctil de iOS: no ocurre con el ratón y no se reproduce en este banco. Lo que sí está medido aquí son los siete colores y que el color viaja con la rotación. */ html{ background-color:#3b2d20; transition:background-color var(--hero-fundido) var(--hero-curva); } @media (prefers-reduced-motion: reduce){ html{ transition:none; } } /* ── EL HERO ───────────────────────────────────────────────────────────────── UNA FOTOGRAFÍA A PANTALLA COMPLETA Y UN RÓTULO EN LA ESQUINA. Antes esto era un tríptico de WebGL en un canvas; el porqué del cambio está en `index.html`, sobre la propia sección. EL HERO SIGUE CLAVADO, y eso no es herencia perezosa: es lo que hace que la sección de concursos SUBA POR ENCIMA de la fotografía en vez de empujarla, que es el gesto del recorrido de este sitio. `.hero__riel` —hermano, en flujo normal— es lo único que le da altura al documento, y mide una pantalla. `100svh` Y NO `100vh`: en un teléfono `100vh` es la ventana GRANDE, con la barra del navegador escondida, así que la fotografía nacería más alta que la ventana de ahora y el `cover` recortaría por arriba y por abajo píxeles que no hacen falta. `svh` es la ventana pequeña, la que de verdad se ve. Y EL NEGRO ESTÁ DECLARADO DEBAJO, no heredado: mientras la lámina baja, lo que se ve es el ground del sitio y no el blanco del navegador. */ .hero{ /* EL TOKEN SE DECLARA AQUÍ Y NO EN CADA RÓTULO, y no es ahorro de líneas: la marca y el pie son DOS nodos que tienen que dibujarse con la misma letra, y dos declaraciones del mismo token son exactamente como se separan. `--garalda` vive en `.concursos` —lo declara `concursos.css` junto a su `@font-face`— y fuera de ese árbol no resuelve, así que sin esta línea el hero sale en Times. Es la misma cuenta que hace el conmutador de idioma doscientas líneas abajo. */ --garalda:"Cormorant Concursos", Garamond, "Hoefler Text", "Times New Roman", serif; position:fixed; inset:0; z-index:0; height:100vh; height:100svh; background:var(--negro); /* `hidden` PRIMERO Y `clip` DESPUÉS, y aquí el respaldo sí puede ser `hidden` sin pagar nada: el estropicio que `clip` evita en el —volverse contenedor de scroll y despegar el sticky— no aplica a una caja `fixed` que no tiene dentro un solo `position:sticky`. En Safari 15.6 `clip` se cae, se queda `hidden` y el hero recorta igual; de 16 en adelante gana `clip` y el dibujo es el mismo píxel por píxel. */ overflow:hidden; overflow:clip; } /* EL HERO SE GUARDA CUANDO SU RIEL SALE DE PANTALLA. El porqué entero está en el script del final del index (§ EL HERO SE GUARDA CUANDO NO LE TOCA): al ser `fixed` sigue pintado detrás de TODO el documento, así que cualquier píxel que no tape un elemento opaco lo enseña — y contra el rebote de iOS, que revela una zona que no pertenece al documento, no hay elemento que se pueda estirar. `visibility` y no `display`: no toca el layout. */ body.hero-guardado .hero{ visibility:hidden; } /* ── EL RIEL ────────────────────────────────────────────────────────────────── El hero es `fixed` y no ocupa flujo, así que este `

` es lo único que le da altura al documento y por tanto quien decide DÓNDE empieza la sección de concursos y, con ella, si el `loading="lazy"` de sus láminas sirve de algo. MIDE UNA PANTALLA, EN TODAS LAS VENTANAS. Una fotografía quieta no tiene recorrido interno que agotar: está agotada desde el primer píxel, y por eso `HERO_FIN()` vale 0 y el salto a concursos se dispara con «tantito scroll». Es exactamente lo que medía el riel de la portada del bucle —la que mandaba por defecto—, así que el recorrido de concursos hacia abajo no se mueve un píxel respecto de lo que había. Y AHORA ESTÁ EN CSS Y NO EN UN JAVASCRIPT GENERADO. Este número lo escribía `medios.js` en el , inyectando una etiqueta `