/* ========================================================================== VEGAS DEL VERDE — inicio.css · sección #inicio · v5 «orgánica» QUÉ CAMBIA RESPECTO A v4 Y POR QUÉ v4 arregló la ESCALA (portada de ventana entera + plano gigante) y con eso la sección dejó de tener el compás de un listado. Lo que quedaba vivo del problema —«se ve muy genérica»— era la GEOMETRÍA: todo rectángulo a escuadra, corte recto entre la fotografía y el papel, seis miniaturas idénticas en fila y ni una curva en una página que vende un bosque. v5 mete el lenguaje ORGÁNICO, sin inventar un solo valor: · ORLA CURVA ASIMÉTRICA al pie de la portada, pintada del color del papel. La foto no termina: se disuelve. Y la curva es una diagonal (fina a la izquierda, gruesa a la derecha), no la ola simétrica de plantilla. · PARALAJE del fondo con `animation-timeline: view()`. Sin una línea de JS nueva y sin tocar js/app.js: es CSS puro, va dentro de @supports y dentro de `prefers-reduced-motion: no-preference`, así que en un navegador viejo o con el movimiento reducido simplemente no existe. Sólo se mueve la FOTOGRAFÍA DE FONDO; el texto nunca. · TITULAR en caja alta y baja. Las mayúsculas de v4 incumplían CONTRATO-V2 §3 («prohibido uppercase por encima de 24 px salvo el logotipo») y son además la razón de que la portada se leyera como cualquier plantilla de viajes. En su lugar, dos renglones de escala distinta con el segundo sangrado y rematado por una hoja. · RADIOS DE HOJA, variados y asimétricos, tomados de la única forma orgánica que ya tenía el sistema: el remate de .lista-hojas en base.css (`border-radius: 0 var(--radio-full) 0 var(--radio-full)`). Nunca los cuatro radios iguales: cuatro esquinas iguales es lo que hace que una tarjeta se vea de plantilla. · SOMBRAS suaves y bajas (--sombra-md / --sombra-lg), que es lo que hace una copa de árbol sobre el suelo. v3 las había retirado del sistema entero; v5 las devuelve sólo donde hay una pieza que de verdad flota sobre el papel. · LA TIRA DE AVES deja de ser una fila de seis cuadrados iguales. Lo que NO cambia: los hechos, el reparto de la tabla de propiedad, las coordenadas de las cuatro anclas, los encuadres de cada fotografía y la prohibición de valores literales. -------------------------------------------------------------------------- LO QUE YA VENÍA DE v4 «abrir de verdad», y sigue vigente: Depende de tokens.css + base.css (cargarlos antes). Ningún valor literal de color, de cuerpo de letra, de radio, de sombra ni de duración: todo sale de los tokens. Este archivo NO toca tokens.css, base.css ni shell.css. QUÉ CAMBIA RESPECTO A v3 v3 metió #inicio dentro de la retícula común: .contenedor, encabezado, figura, tira. Leída en fila con las ocho secciones siguientes, la portada tenía exactamente el mismo compás que un listado de espacios, y eso —no la falta de efectos— es lo que hacía que la página se leyera como generada. v4 rompe ese compás con dos escalas que ninguna otra sección usa: 1. PORTADA A SANGRE, alto de ventana, foto a pantalla completa y el titular encima a --fs-hero (hasta 84 px en 1440). Es el único titular de la página que sube de --fs-h2. 2. PLANO-ÍNDICE A SANGRE, de borde a borde de la ventana y a proporción natural en escritorio, para que las cuatro anclas sigan cayendo exactamente sobre lo que señalan. POR QUÉ NADA DE ESTO USA 100vw Los dos bloques a sangre son hijos directos del

, así que su 100 % ya es el ancho del , que descuenta la barra de scroll. Con 100vw habría 15 px de desbordamiento horizontal real en todo escritorio con barra visible. El mismo motivo explica el `margin-inline` con max() que alinea el pie del plano y la tira de aves con el contenedor: es aritmética de porcentajes, no de ventana. ESTRUCTURA .inicio la sección (crema, la de serie) .inicio__portada a sangre · alto de ventana .inicio__portada-foto la fotografía, object-fit: cover (+ paralaje) .inicio__portada-velo degradado de legibilidad .inicio__portada-orla v5 · la curva de papel que remata el pie .inicio__portada-interior .contenedor con el encabezado .inicio__titulo-linea v5 · los dos renglones del titular .inicio__plano

, alineado al contenedor .inicio__aves seis miniaturas de atmósfera, desiguales POR QUÉ LAS ANCLAS NO SE SUPERPONEN HASTA 64em Sobre el plano, cada ancla es una pastilla de ~2,1 rem de alto colocada en coordenadas porcentuales. En un teléfono el render (2000 × 1013) baja a unos 190 px de alto: las cuatro pastillas se pisarían entre ellas y quedarían muy por debajo del objetivo táctil de 44 px que pide WCAG 2.5.5. Por eso, por debajo de 64em, las anclas SALEN del plano y se convierten en una rejilla de dos columnas debajo de la foto, con altura de botón. El plano sigue siendo el índice; lo que cambia es dónde se toca. El corte en 64em es el mismo que usa base.css para dar tamaño táctil, así que no queda ninguna franja de anchos en la que las anclas estén superpuestas y sean pequeñas a la vez. ========================================================================== */ /* La cabecera es fija (shell.css): la portada se aparta ella misma justo lo que mide la barra, ni un píxel más. El --esp-xl que llevaba de más en v3 dejaba una franja de crema encima de la foto que le quitaba el efecto de pantalla completa. Y su scroll-margin vuelve a cero, porque #inicio ES el principio de la página: con el margen de .seccion, volver al inicio dejaba un hueco. */ .inicio { padding-top: var(--alto-header); padding-bottom: var(--esp-seccion); scroll-margin-top: 0; /* v5 — TEXTURA, NO COLOR. Dos manchas radiales muy abiertas y casi invisibles (7 % y 5 % de alfa) que rompen el plano liso del papel debajo del plano-índice y de la tira de aves. Se declaran como `background-image` y no como pseudoelemento a propósito: un fondo pinta siempre por detrás del contenido, así que no hace falta pelearse con el z-index ni arriesgar que la mancha se coma un texto. Sin `background-color`: el papel sigue siendo el del , y si mañana cambia, esto cambia con él. */ background-image: radial-gradient(60% 45% at 12% 78%, rgb(var(--verde-oliva-rgb) / 0.07), transparent 70%), radial-gradient(45% 40% at 92% 46%, rgb(var(--amarillo-rgb) / 0.05), transparent 72%); } /* ========================================================================== 1. PORTADA A SANGRE ========================================================================== */ /* El alto: la ventana entera menos la cabecera. Va como `min-height` y no como `height` para que, con la tipografía del sistema agrandada o en un teléfono muy corto, el bloque crezca en lugar de recortar el titular. La primera declaración es el respaldo para navegadores sin `svh`: si la segunda no se entiende, se descarta entera y queda un alto razonable. */ .inicio__portada { /* Alto de la orla curva del pie. En clamp con rem —permitido para layout— porque es una medida de composición, no un cuerpo de letra ni un radio. De aquí cuelgan dos cosas: el alto del y no un background-image: así se puede priorizar como LCP, se puede describir y el navegador elige la decodificación. A esquina viva y sin sombra como todo lo que contiene una imagen en este sistema. El encuadre se ancla algo por debajo del centro: en el archivo, la franja interesante —copas, tronco y prado— vive entre el 40 % y el 65 % del alto; con el centro geométrico la portada apaisada se llenaba de cielo. */ .inicio__portada-foto { position: absolute; inset: 0; z-index: var(--z-fondo); width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; border-radius: 0; box-shadow: none; } /* ---- PARALAJE DEL FONDO -------------------------------------------------- Regla del sistema: el paralaje va SÓLO en fondos, nunca en texto de lectura. Aquí se mueve la fotografía dentro de su propio recorte —el `overflow: hidden` de .inicio__portada— y el titular se queda absolutamente quieto, que es lo que permite leerlo mientras la imagen se desplaza. POR QUÉ NO HAY JS. `animation-timeline: view()` ata el progreso de la animación al paso del elemento por la ventana: lo resuelve el compositor, no un listener de scroll. Nada que añadir a js/app.js —que además no es de esta sección— y ni un fotograma robado al hilo principal. LAS TRES GUARDAS, por orden: 1. `prefers-reduced-motion: no-preference` — quien pide menos movimiento no recibe ninguno. La animación no se declara siquiera. 2. `@supports (animation-timeline: view())` — donde no exista, la foto se queda quieta y centrada. No hay respaldo con JS ni falta. 3. El recorrido total es del 10 % del alto de la imagen (de -5 % a +5 %), dentro de la horquilla de 5–15 % que admite el sistema, y el `scale(1.1)` está para que ese 10 % nunca descubra el borde. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* En longhand y con `animation-duration: auto` ESCRITO, no heredado del atajo: en una línea de tiempo de progreso —la de scroll— `auto` quiere decir «el recorrido entero del rango», y es lo único que hace que la animación avance con la rueda en vez de resolverse de golpe. El atajo `animation:` deja la duración en su valor inicial y ese valor cambió de `0s` a `auto` entre dos versiones de la especificación: escribirlo evita depender de cuál de las dos implementa el navegador. */ .inicio__portada-foto { animation-name: inicio-paralaje; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } @keyframes inicio-paralaje { from { transform: scale(1.1) translate3d(0, -5%, 0); } to { transform: scale(1.1) translate3d(0, 5%, 0); } } /* ---- EL AIRE DEL BOSQUE (canvas de partículas) --------------------------- El lienzo lo crea js/particulas-hero.js y lo añade al FINAL de .inicio__portada; aquí sólo se fija su sitio en la pila de capas: foto (z-fondo, primera) → LIENZO (z-fondo, último: gana por orden de documento) → velo y orla (z-base) → texto (z-elevado) Es decir: las partículas vuelan ENCIMA de la fotografía y DEBAJO del velo de legibilidad. No es un accidente — hacia el pie, donde el velo se cierra para proteger el titular, el aire se apaga con él, así que el contrato de contraste del velo (medido arriba) queda intacto sin sumar ni una regla. width/height al 100 % y no heredados: base.css le pone a todo canvas `height: auto`, que aquí lo colapsaría al alto de su atributo. No lleva media query de movimiento reducido a propósito: con prefers-reduced-motion el módulo NI SE MONTA (lo comprueba el