/* ========================================================================== HOME v4 · bloques de escaparate -------------------------------------------------------------------------- POR QUÉ EXISTE ESTA HOJA El PLAN-REDISENO-V4 §4.1 parte el sitio en «escaparate + profundidad»: la portada deja de contener las secciones completas (que se fueron a espacios.html, planes.html, naturaleza.html, sendero-ecovital.html, vivero.html y contacto.html) y pasa a ser una sucesión de bloques cortos que enseñan y enlazan. Esos bloques son marcado NUEVO —no había dónde reutilizar— y necesitan una hoja propia, corta, en vez de repartir reglas por las siete hojas de sección que ya no se cargan aquí. REGLAS QUE ESTA HOJA CUMPLE, SIN EXCEPCIÓN 1. Cero literales: todo color, tamaño, radio, sombra y duración sale de un var(--token) de tokens.css. Cero !important. 2. Cero velos: no hay un solo linear-gradient, radial-gradient, backdrop-filter ni mix-blend-mode sobre una . La foto se ve como se disparó (PLAN-REDISENO-V4 §3.2). 3. EL TEXTO NUNCA TAPA LA FOTO. Corrección directa del cliente sobre esta fase: «es importante que las fotos se aprecien bien — el texto NO debe tapar la foto en ningún bloque». Por eso ninguna pieza de texto de esta hoja lleva `position: absolute` sobre una imagen: cada tarjeta es una rejilla de dos filas —foto arriba, franja de texto abajo— y cada figura pone su pie DEBAJO del marco. Si algún día alguien quiere el titular «encima de la foto», la respuesta ya está dada: no. 4. Un motor de movimiento por pieza: la entrada la da .reveal (el IntersectionObserver de app.js, que ya está cargado). El §6 de esta misma hoja añade movimiento SOLO donde no había ninguno —filetes que se dibujan, la deriva del titular, la entrada de la tira del vivero—, siempre sobre un ::before/::after nuevo o sobre un elemento sin dueño, nunca duplicando motor sobre una pieza que ya tenga uno. ORDEN DEL ARCHIVO §1 Rejilla de tarjetas (compartida por «qué hacer» y «los espacios») §2 Bloque de cifras (naturaleza) §3 Muro de aves §4 Bloque a dos columnas (sendero, vivero) §5 Franja de contacto §6 Movimiento de los bloques de escaparate ========================================================================== */ /* ------------------------------------------------------------------ §1 */ /* Rejilla de tarjetas. Una sola definición para los dos bloques que la usan (bloque 2 «qué puedes hacer aquí» y bloque 3 «los espacios»), con un modificador para el número de columnas en escritorio. En móvil siempre es una columna: son fotos, y una foto pequeña no vende nada. */ .home-rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; } /* Dos columnas ya desde 22em (352 px) SÓLO en el bloque de los cinco verbos: ahí la franja de texto es un verbo y una línea, y cabe. A una columna, esas cinco tarjetas medían 2,5 pantallas de móvil ellas solas —el plan §4.2 les presupuesta 1,5— y la portada no llegaba al objetivo de 14 pantallas. El bloque de los espacios NO usa esto: su placa lleva nombre, aforo y frase, y a media pantalla de ancho se rompería en cinco renglones. Ése va a una columna hasta 40em (v23: antes se resolvía en horizontal, ver la nota de retirada más abajo). */ @media (min-width: 22em) { .home-rejilla--dos { grid-template-columns: repeat(2, 1fr); } } /* v32 · LOS CINCO VERBOS EN MÓVIL PASAN A CARRUSEL CON ASOMO. Medido en producción a 375 px: dos columnas dejaban la foto en 159 × 106 (miniatura), la frase partida en 3-4 renglones, «Ver el plan» como texto de 12,8 px y Aprender huérfana a media anchura; bloque de 881 px. Una columna tampoco sirve: son ~2,5 pantallas y el plan §4.2 presupuesta 1,5. El carrusel da foto grande sin gastar alto. La placa se queda DEBAJO de la foto (regla de §LA PLACA, corrección del cliente): se descartó el texto sobre la imagen con degradado. Descubribilidad: cada tarjeta mide 78 % del ancho, así la siguiente asoma ~22 % — el borde cortado dice «hay más» sin necesidad de flechas. Sólo por debajo de 40em: tableta y escritorio no cambian. */ @media (max-width: 39.99em) { .home-rejilla--dos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 20rem); gap: var(--esp-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; /* Sangra a los cantos de la pantalla y recupera el margen por dentro: la primera tarjeta arranca alineada con el título, la última asoma. */ margin-inline: calc(var(--padding-contenedor) * -1); scroll-padding-inline: var(--padding-contenedor); scrollbar-width: none; } /* v33 · `ul.` para ganarle a `ul[class] { padding: 0 }` de base.css (0-1-1 contra 0-1-0): el relleno nunca se aplicaba y «Celebrar» nacía pegada al canto izquierdo de la pantalla, sin el margen del título. */ ul.home-rejilla--dos { padding-inline: var(--padding-contenedor); padding-block-end: var(--esp-2xs); } .home-rejilla--dos::-webkit-scrollbar { display: none; } .home-rejilla--dos > li { scroll-snap-align: start; } .home-rejilla--dos .marco--3-2 { aspect-ratio: 4 / 3; } .home-rejilla--dos .home-tarjeta__frase { font-size: var(--fs-cuerpo); } /* «Ver el plan» se lee como botón: píldora de 44 px (WCAG 2.5.8). */ .home-rejilla--dos .home-tarjeta__ir { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--esp-sm); border: 1px solid currentColor; border-radius: var(--radio-full); } } @media (min-width: 40em) { .home-rejilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .home-rejilla--tres { grid-template-columns: repeat(3, 1fr); } } /* La tarjeta es un enlace entero: el objetivo táctil es la pieza completa, no una línea de cuatro palabras (WCAG 2.5.8, uno de los 16 objetivos que el plan pide arreglar). Dos filas: la foto y, debajo, la placa de texto. v23 · DEJA DE SER UNA CAJA Y VUELVE A SER LA MAQUETA DE espacios.html. Hasta la v22 la tarjeta era un rectángulo con fondo sólido, filete y `overflow: hidden`, y dentro una foto chica en un marco 3:2 con aire. Con la maqueta de `.usos-tarjeta` (usos.css) esos tres valores estorban: · el fondo y el filete duplicarían la superficie de la placa, que ya trae la suya (base.css §4b) — la tarjeta pasa a transparente y lo único opaco vuelve a ser la ficha; · `overflow: hidden` le comería la sombra a la placa y le recortaría las esquinas de abajo, exactamente el bug que usos.css §ARCO documenta al mover el arco de la tarjeta al . La elevación de hover se muda a la placa (más abajo), que es la pieza que de verdad tiene superficie sobre la que se lee una sombra. `minmax(0, 1fr) auto`: el 0 de mínimo es obligatorio — sin él la fila de la foto no baja de la altura natural de la imagen y se desborda. Misma razón que el `min-height: 0` del en usos.css. v26 · `1fr` PASA A `auto`, Y SE FIJA `align-content: start`. La fila de la foto dejó de forzarse a un alto (ver la nota larga junto a `.home-tarjeta > .marco`, más abajo): el marco ahora mide lo que dicta su `aspect-ratio` contra el ancho de columna, igual en toda una fila de la rejilla exterior. Con la fila de la foto todavía en `minmax(0, 1fr)`, esa fila seguía reclamando TODO el alto sobrante de la tarjeta —la tarjeta más alta de la fila exterior lo fija vía `height: 100%`— y el marco, más chico que su fila, quedaba arriba con un hueco debajo: el mismo defecto que v24 quiso tapar, sólo que ahora sin romper el ancho. Cambiar la fila a `auto` (mide lo que su contenido —el marco— necesita, ni más) resuelve el hueco intermedio, pero abre una rendija distinta: si el contenido (marco + placa) mide menos que el alto de la tarjeta, `normal` —el valor por defecto de `align-content` en una rejilla— equivale a `stretch` y las filas `auto` se reparten ese sobrante, así que el marco volvería a estirarse más allá de su proporción. `align-content: start` apaga ese reparto: el sobrante, si lo hay, se queda como aire DEBAJO de la placa —el borde inferior de la tarjeta, no una costura entre foto y texto—, y ni el marco ni la placa cambian de alto por él. */ .home-tarjeta { display: grid; grid-template-rows: auto auto; align-content: start; height: 100%; /* v31 · SE RETIRA EL SUELO DE ALTURA `--alto-tarjeta-espacio`, Y ES EL BUG QUE REPORTÓ EL CLIENTE: «se ve muy separado en celular», sobre una captura de iPhone del bloque de los cinco verbos (Celebrar · Reunir · Trabajar · Cuidarse · Aprender). QUÉ HABÍA AQUÍ. Un mínimo fluido —`clamp(25rem, 17rem + 21vw, 32rem)`— pensado, como dice su propio nombre, para las tarjetas de ESPACIOS: las de `.home-rejilla--tres`, que llevan `.home-tarjeta__portada` (foto CUADRADA, 1:1 contra el ancho de columna) y placa con nombre + aforo + frase. Pero la regla no distinguía bloque: caía también sobre las tarjetas de VERBOS, que llevan `.marco--3-2` (alto = 2/3 del ancho de columna, no 1/1) y una placa de dos líneas. LA MEDICIÓN, en el navegador, `.home-rejilla--dos` (verbos), aire sobrante DEBAJO de la placa contra el alto total de la tarjeta: 375 px 143 px de aire sobre 400 px de tarjeta (36 %) 390 px 138 px sobre 400 px ← la captura del cliente 428 px 150 px sobre 400 px 768 px 101 px sobre 433 px 1024 px 153 px sobre 487 px 1440 px 114 px sobre 512 px Es decir: NO era un defecto de móvil, era de siempre; en móvil sólo se ve peor porque el aire es más de un tercio de la pieza. `align-content: start` (arriba) manda ese sobrante al pie de la tarjeta, así que se leía como un hueco entre el botón «Ver el plan» y la tarjeta siguiente — exactamente lo que el cliente llama «separado». POR QUÉ SE BORRA EN VEZ DE AFINARSE. El mismo aparato de medida muestra que sobre las tarjetas de ESPACIOS el suelo NUNCA llegaba a actuar: su foto cuadrada ya las lleva a 525-661 px, muy por encima del mínimo (400-512 px) en los seis anchos medidos. O sea: el token era INERTE donde se había escrito para servir, y sólo tenía efecto donde sobraba. Un suelo así no se recalibra, se retira. QUÉ SOSTIENE EL ALTO AHORA. El mismo que ya lo sostenía por encima del mínimo: `height: 100%` contra el `
  • `, que iguala todas las tarjetas de una fila a la más alta. Se comprobó tras el cambio en los seis anchos: el aire baja a 8 px (el margen inferior de la placa) y sube como mucho a 34 px en la tarjeta de frase corta que comparte fila con una de frase larga — que es igualación de fila legítima, no hueco. Y las tarjetas de espacios miden exactamente lo mismo que antes. NO SE TOCA usos.css: allí `min-height: 32rem` sí es un suelo vivo, con otro oficio (una tarjeta de 100dvh que en teléfono apaisado necesita piso). Esto era otra cosa. */ text-decoration: none; color: var(--color-texto); transition: transform var(--transicion); } .home-tarjeta:hover, .home-tarjeta:focus-visible { transform: translateY(calc(var(--esp-3xs) * -1)); } /* .marco viene de base.css sin `display` declarado, y en estos bloques el marco es un —tiene que serlo: el contenido de un no puede llevar
    —. Un es inline por defecto y `aspect-ratio` no se aplica a las cajas inline, así que el marco colapsaría a la altura de una línea. Se bloquea aquí, en la única hoja que usa el patrón, en vez de tocar base.css y arrastrar el cambio a las nueve secciones que ya lo usan sobre
    y no lo necesitan. */ .home-tarjeta > .marco, .home-duo__medio > .marco, .home-muro__figura > .marco, .home-tira > li > .marco { display: block; } /* v24 · EL MARCO LLENA SU FILA, SIEMPRE (retirado en v26, ver nota abajo). Corrección de un hueco que el cliente vio en capturas de móvil, en la tarjeta «Celebrar» del bloque de los cinco verbos: entre la fotografía y la placa quedaba una franja vacía de más de cien píxeles, y de tamaño distinto en cada tarjeta. LA CAUSA MEDIDA EN v24 (Chrome, 375 px, dos columnas): la tarjeta mide 400 px —su `min-height` fluido—, la fila de la foto es `minmax(0, 1fr)` y por tanto la celda de la foto medía ~250 px… pero el `` medía 106 px. `aspect-ratio` (base.css) fija el alto contra el ancho de columna —159 × 2/3 = 106— y ese alto GANA al estirado normal del ítem de rejilla. El marco se quedaba arriba de su celda y el resto de la fila era aire. v26 · SE RETIRA EL ALTO FORZADO: ROMPÍA EL ANCHO EN VEZ DEL HUECO. Bug reportado por el cliente en iPad: «la Alameda es más alta que la Vega y Teatrino» / «Aprender está más grande que Cuidarse» — dos tarjetas de la MISMA fila (mismo ancho de columna) con la foto de tamaño distinto. LA CAUSA MEDIDA (Chrome, 820 px, `.home-rejilla--tres` en su régimen de DOS columnas — 40em-64em cubre exactamente el rango "iPad" que reporta el cliente): columna = 358,94 px en ambos lados. La tarjeta 1 (Alameda, frase corta) medía `.home-tarjeta__portada` = 383,86 × 383,86 px; la tarjeta 2 (misma fila, frase distinta) medía 358,94 × 358,94 px —EXACTO el ancho de columna—. La diferencia es la placa: `.home-tarjeta` reparte `minmax(0, 1fr) auto` DENTRO de cada tarjeta por separado —no hay subgrid entre tarjetas—, así que el alto de la fila 1 (la foto) de cada tarjeta es independiente y depende sólo de cuánto ocupe SU PROPIA placa, no la de la vecina. Con `height: 100%` ahí, ese alto de fila —distinto tarjeta a tarjeta— se volvía la altura de una caja con `aspect-ratio` y ancho `auto`: por la fórmula del cuadrado (o del 3:2), un alto mayor exige un ANCHO mayor, y el marco se salía de su columna en vez de quedarse cuadrado dentro de ella. Eso es lo que el cliente ve como «más grande»: no es sólo más alta, es más ancha que su columna. EL ARREGLO: quitar el alto forzado y dejar que el marco calcule su tamaño desde el ANCHO, que es lo único igual entre tarjetas de una misma fila (columnas `1fr` iguales). Sin `height: 100%` puesto a mano, un elemento de rejilla con `aspect-ratio` declarada y ancho `auto` NO se estira contra el alto de su celda —así lo define la spec de `aspect-ratio` para cajas que estirarían por `stretch`—: usa el ancho ya resuelto (el de la columna) y calcula el alto con su proporción. Resultado: dos tarjetas en la misma fila, mismo ancho de columna, mismo cuadrado (o mismo 3:2) exacto, sin importar cuánto mida la placa de cada una. El posible costo es que el conjunto marco+placa puede medir menos que el alto de la tarjeta cuando la vecina de la misma fila tiene una placa más alta; ese sobrante se resuelve en la propia `.home-tarjeta` (`grid-template-rows` pasa de `minmax(0, 1fr) auto` a `auto auto` + `align-content: start`, ver la nota junto a esa regla) para que caiga como aire al final de la tarjeta y no como una fila que vuelva a estirar el marco. `min-height: 0` se mantiene: sigue haciendo falta para que el marco no imponga su alto mínimo de contenido sobre su fila en fotos verticales (misma razón que en §1b). NO SE TOCAN los otros tres selectores de arriba (`home-duo__medio`, `home-muro__figura`, `home-tira`): ahí el marco NO es una fila de una rejilla de alto compartido y su proporción fija es justo lo que se quiere. */ .home-tarjeta > .marco { min-height: 0; } .home-tarjeta__foto { display: block; width: 100%; height: 100%; object-fit: cover; } /* v23 · LA FOTO SALE DEL FLUJO DE ALTURA, y es obligatorio, no cosmético. Medido en el navegador a 375 px antes de este arreglo: cuatro tarjetas con la foto a 190 px de alto y la del Taller a 597. La razón es que `height: 100%` sobre una caja de altura indefinida se resuelve a `auto`, y entonces la aporta su proporción natural al max-content de la fila `1fr`: 338 × 1500/849 = 597 px para el Taller, que es la única foto en retrato de las cinco. La fila dejaba de medir lo que decía la rejilla y pasaba a medir lo que quisiera cada archivo. `position: absolute; inset: 0` es exactamente lo que hace `.usos-tarjeta__foto`, y por esto mismo: sacada del flujo, la fotografía no aporta altura, la fila la manda la rejilla y las cinco tarjetas miden igual. El recorte lo sigue haciendo `object-fit: cover` — la no lleva recorte propio. */ .home-tarjeta__portada > .home-tarjeta__foto, .home-tarjeta__portada > picture > .home-tarjeta__foto { position: absolute; inset: 0; } /* v26 · EL MISMO BUG DE ARRIBA (v23), sin corregir en el bloque de los cinco verbos. El comentario de v23 describe exactamente este caso ("la del Taller a 597", "la unica foto en retrato de las cinco") pero el selector que aplico el arreglo quedo apuntando solo a `.home-tarjeta__portada` (bloque de "Cinco espacios"), no a esta rejilla. Resultado: en Celebrar (boda-2.jpg, 844x1500) y Reunir (infantil-4.jpg, retrato tambien) la fila de la rejilla se estira hasta la proporcion natural de la foto en vez de los 3:2 que pide `.marco--3-2`, y como la caja termina midiendo lo mismo que la imagen, `object-fit: cover` no tiene nada que recortar — cualquier `object-position` se vuelve invisible. Sacar la foto del flujo (mismo arreglo, mismo motivo) deja que la fila mida lo que dice la rejilla y que el recorte 3:2 exista de verdad. */ .home-rejilla--dos > li .home-tarjeta__foto, .home-rejilla--dos > li picture > .home-tarjeta__foto { position: absolute; inset: 0; } /* ------------------------------------------------------------------ §1b */ /* LA PORTADA CUADRADA — bloque «Cinco espacios, un mismo bosque» de la home. --------------------------------------------------------------------------- v25 · SE RETIRA EL ARCO, CORRECCIÓN DIRECTA DEL CLIENTE. Hasta v24 esta caja llevaba el mismo gesto que usos.css §ARCO —un `clip-path` con la parte de arriba curva, animado con el scroll—. El cliente lo vio en captura y dijo: «que las fotos sean siempre cuadradas, no con este efecto». Se retira el `clip-path`, la animación y su `@keyframes` enteros; la caja pasa a un cuadrado simple con `aspect-ratio: 1 / 1` y `object-fit: cover` (ya declarado en §1) hace el recorte. NO TOCA usos.css/espacios.html: el arco de esa página es una pieza distinta, aprobada aparte, con su propio dueño (`.usos-tarjeta > picture`) — este selector (`.home-tarjeta__portada`) sólo existe en el bloque de espacios de la HOME. `.marco` (base.css) ya pone `position: relative` y `overflow: hidden`; aquí sólo se fija la proporción cuadrada. */ .home-tarjeta__portada { min-height: 0; aspect-ratio: 1 / 1; border-radius: var(--radio-md); } /* Alameda: en una caja alta el recorte por defecto se va a la copa de los árboles y pierde el prado, que es el sujeto real de la foto. Mismo ajuste que en usos.css, y por la misma razón. */ .home-rejilla--tres > li:first-child .home-tarjeta__foto { object-position: 50% 62%; } /* Cuidarse (yoga-3.jpg) y Aprender (taller-educativo-cuento.jpg), en el bloque de los cinco verbos: correcciones puntuales del cliente sobre capturas. En Cuidarse el recorte 3:2 por defecto centraba la caja verti- calmente y dejaba la figura empujada hacia abajo con las manos casi en el borde superior; bajar el foco al 61% dentro de la imagen deja la postura completa (manos arriba, pies abajo) dentro del recorte. En Aprender el recorte por defecto (50% 50%) se queda con pasto y árboles arriba y los niños casi fuera por abajo; subir el foco al 78% baja el encuadre visible hasta la zona donde están sentados escuchando el cuento. */ .home-rejilla--dos > li:nth-child(4) .home-tarjeta__foto { object-position: 50% 61%; } .home-rejilla--dos > li:nth-child(5) .home-tarjeta__foto { object-position: 50% 78%; } /* Celebrar (boda-2.jpg) y Reunir (infantil-4.jpg): mismo problema que Alameda/Cuidarse/Aprender arriba, aqui se habia quedado sin corregir. En Celebrar la mitad de arriba de la foto es cielo y copa de arbol; el arco, las sillas y la musica en vivo estan en el tercio inferior — bajar el foco al 72% deja el arco y las primeras filas dentro del recorte. En Reunir los ninos y la mesa de picnic estan tambien en la mitad inferior, con arboles y cielo arriba; 76% los trae al recorte visible. */ .home-rejilla--dos > li:nth-child(1) .home-tarjeta__foto { object-position: 50% 100%; } .home-rejilla--dos > li:nth-child(2) .home-tarjeta__foto { object-position: 50% 100%; } /* LA PLACA. Fila propia de la rejilla, superficie opaca, debajo de la foto. No flota sobre la imagen ni le come el borde inferior: son filas hermanas, solaparse no es que esté prohibido, es que no se puede. v23 · La superficie, la silueta de hoja y la sombra las pone `.placa` (base.css §4b) desde el HTML; lo que queda aquí es la maqueta interna. El margen es lo que la hace leerse como una ficha apoyada bajo la fotografía y no como una plancha pegada al canto —mismo criterio que §PLACA de usos.css—. `position` se queda sin declarar (estático): un `.placa` posicionado es un `.placa` encima de algo, y el validador (regla h) lo marca. */ .home-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--esp-3xs); /* Margen POSITIVO en los cuatro cantos, y el de arriba no es negociable: un margen negativo subiría la placa sobre la fotografía y sería justo la vía por la que volvería el defecto que el cliente ya mandó corregir. */ margin: var(--esp-sm) var(--esp-sm) var(--esp-2xs); transition: box-shadow var(--transicion); } .home-tarjeta:hover .home-tarjeta__cuerpo, .home-tarjeta:focus-visible .home-tarjeta__cuerpo { box-shadow: var(--sombra-lg); } .home-tarjeta__nombre { font-family: var(--fuente-display); font-size: var(--fs-h3); font-weight: var(--peso-normal); font-optical-sizing: auto; font-variation-settings: var(--ejes-display); letter-spacing: var(--tracking-display); line-height: var(--alto-linea-titulo); margin: 0; } .home-tarjeta__frase { margin: 0; font-size: var(--fs-pequeno); line-height: var(--alto-linea-base); color: var(--color-texto-suave); } /* El aforo va en la franja, en línea con el nombre: es un dato, no un adorno flotante sobre la fotografía. */ .home-tarjeta__dato { display: inline-flex; align-items: baseline; gap: var(--esp-3xs); font-family: var(--fuente-titulo); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--color-texto-suave); } /* v23 · La cifra sube un paso (de --fs-h4 a --fs-h3, el mismo de nombre): en la maqueta de espacios.html el aforo es el tratamiento gráfico que primero se ve de la ficha, y a tamaño de etiqueta se perdía dentro de la placa. No llega a --fs-cifra como allí porque allí la placa ocupa el ancho de la ventana y aquí un tercio de ella. */ .home-tarjeta__dato-cifra { font-family: var(--fuente-display); font-size: var(--fs-h3); font-weight: var(--peso-normal); letter-spacing: var(--tracking-display); color: var(--color-acento-texto); } .home-tarjeta__ir { margin-top: var(--esp-2xs); font-family: var(--fuente-titulo); font-size: var(--fs-micro); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--color-acento-texto); } /* v23 · LA VARIANTE HORIZONTAL DE MÓVIL SE RETIRA ENTERA. Hasta la v22, por debajo de 40em `.home-rejilla--fila` partía la tarjeta en dos columnas —foto cuadrada al 40 % a la izquierda, texto a la derecha— para ahorrar pantallas de portada. Es exactamente la maqueta que el cliente pidió cambiar («quiero el mismo hero de portadas animadas exactamente igual como estaba antes aquí en espacios»): con la foto en media columna no hay portada a sangre, no hay sitio para el arco y la placa no se lee como una ficha apoyada, sino como una columna de texto. LO QUE COSTÓ Y POR QUÉ SE PAGA. A una columna las cinco tarjetas pasan de ~1,5 a ~3 pantallas de móvil. Se paga porque es el pedido explícito del cliente y porque el bloque sigue teniendo su salida arriba —los cinco espacios completos están a un toque en espacios.html—; y se abarata donde se puede: la tarjeta mide lo que miden su foto cuadrada y su placa —525 px en 375 px de ventana, medido—, no los 100dvh de espacios.html, así que sigue siendo un escaparate y no cinco portadas a pantalla completa. (v31 · esta frase decía «mide `--alto-tarjeta-espacio` (23rem en 375 px)». Ese token se retiró —ver la nota larga en `.home-tarjeta`— y además nunca fue lo que medía esta tarjeta: su cuadrado ya la llevaba muy por encima del mínimo. Se corrige la cifra por la medida real.) La clase `home-rejilla--fila` se retiró también del HTML: una regla que nadie usa es una invitación a resucitarla. */ /* Pie de bloque: la frase de condiciones o la salida a la página completa. */ .home-pie-bloque { margin-top: var(--gap); display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-sm) var(--gap); } /* ------------------------------------------------------------------ §2 */ /* Tres cifras. El segundo registro tipográfico que pide el plan (§2.3.4): la display grande en cifra, dosificada, frente al eyebrow en caja alta que hasta ahora era el único ritmo de la página. */ .home-cifras { list-style: none; margin: 0 0 var(--gap-lg); padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; } @media (min-width: 40em) { .home-cifras { grid-template-columns: repeat(3, 1fr); } } .home-cifras__dato { display: flex; flex-direction: column; gap: var(--esp-3xs); padding: var(--esp-md); background-color: var(--color-superficie-solida); border: 1px solid var(--color-borde-suave); } .home-cifras__pie { font-family: var(--fuente-titulo); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--color-texto-suave); } /* ------------------------------------------------------------------ §3 */ /* Muro de aves: seis, no doce (v22 · la home era demasiado larga; el muro pasa de cuatro filas a dos en movil sin tocar una sola regla de aqui). Y seis, no ciento ocho: las 108 viven en naturaleza.html. Cada ave es una
    con el pie DEBAJO de la foto —el crédito al fotógrafo es información, y encima de la imagen ni se lee ni deja ver el ave—. Cuadrado 1:1 para que el muro sea un muro y no una escalera. */ /* v33 · LÁMINA DE GUÍA DE CAMPO (agente FOTOS, pedido del cliente del 26-sep: «todas las fotos bien encuadradas y las que van juntas con EXACTAMENTE el mismo tamaño»). EL BUG, MEDIDO ANTES DEL ARREGLO (getBoundingClientRect, caja vs ): 375 px caja 104,5 × 104,5 fotos de 83,6 · 130,6 · 82,3 · 139,2 · 139,2 · 69,8 px de alto (banda vacía de hasta 34,8 px) 1280 px caja 286,1 × 286,1 fotos de 228,9 a 381,2 px de alto El es inline dentro del marco: `height: 100%` del no tenía contra qué resolverse y caía a la proporción natural de cada archivo. Las apaisadas dejaban banda gris debajo; las verticales se salían por abajo y el recorte quedaba anclado ARRIBA (object-position inservible). EL ARREGLO: la foto sale del flujo (absolute + inset 0) dentro del marco 1:1, que ya es `position: relative; overflow: hidden` (base.css). La caja la manda la rejilla; el recorte, `object-fit: cover` + el encuadre de cada ave (MAPA DE ENCUADRE, abajo). Medido después: seis cajas y seis fotos idénticas al píxel en 375 y 1280. LA MAQUETA: · < 40em carrusel con asomo, el patrón de la casa (§1, los cinco verbos): el ave a 236 px en vez de 105, sin gastar alto —el muro de 3 × 2 medía 399 px; el carrusel, ~330—. · ≥ 40em tres columnas, dos filas. Antes eran cuatro en escritorio: 4 + 2 dejaba una fila coja con media fila vacía. */ .home-muro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) var(--gap-sm); } @media (max-width: 39.99em) { .home-muro { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72%, 17rem); column-gap: var(--esp-sm); overflow-x: auto; /* Las dos formas, por lo mismo que documenta .home-tira (§4): Safari anterior a la 16 sólo entiende la física. */ overscroll-behavior-inline: contain; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--padding-contenedor) * -1); scroll-padding-inline: var(--padding-contenedor); scrollbar-width: none; } /* `ul.` y no `.home-muro` a secas: base.css pone `ul[class] { padding: 0 }` (especificidad 0-1-1), que le ganaba a esta clase suelta (0-1-0) aunque vaya después. Medido: padding 0 y la primera ave pegada al canto de la pantalla. Mismo defecto, y mismo arreglo, en el carrusel de §1. */ ul.home-muro { padding-inline: var(--padding-contenedor); padding-block-end: var(--esp-2xs); } .home-muro::-webkit-scrollbar { display: none; } .home-muro > li { scroll-snap-align: start; } /* El último se ancla al final: con `mandatory` y `start` el destino cae fuera del recorrido y el carrusel tironea al soltar (ver .home-tira). */ .home-muro > li:last-child { scroll-snap-align: end; } /* DENTRO DEL CARRUSEL LA ENTRADA ES SIN DESPLAZAMIENTO. Un
  • bajado 28 px dentro de un contenedor con `overflow-x: auto` (que fuerza el eje y a `auto`) crea un desborde vertical: el dedo que baja la página podía arrastrar el carrusel medio renglón. Aquí el
  • sólo se funde; el gesto de entrada lo pone la foto (zoom contenido, más abajo). Y las que llegan deslizando no esperan turno: el escalonado sólo tiene sentido para las dos que se ven de entrada. */ .js .home-muro > li.reveal { transform: none; } .home-muro.reveal-secuencia > .reveal:nth-child(n + 3) { --reveal-delay: 0ms; } } .home-muro__figura { margin: 0; } .home-muro__foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* EL PIE, ALINEADO ENTRE VECINAS. Con subgrid cada
  • presta sus tres filas (foto · especie · crédito) a la rejilla del muro: la especie de una fila empieza a la misma altura en las tres tarjetas y los créditos también, aunque «Titira Inquisidor, macho» ocupe dos renglones y «Barranquero» uno. Sin subgrid (navegadores de antes de 2023) cada pie se apila como siempre: correcto, sólo que sin la alineación fina. */ @supports (grid-template-rows: subgrid) { .home-muro > li, .home-muro__figura { display: grid; grid-template-rows: subgrid; row-gap: 0; } .home-muro > li { grid-row: span 3; } .home-muro__figura { grid-row: 1 / -1; } .home-muro__pie { display: grid; grid-row: 2 / span 2; grid-template-rows: subgrid; row-gap: var(--esp-3xs); align-content: start; } } .home-muro__pie { margin-top: var(--esp-xs); gap: var(--esp-3xs); } .home-muro__especie { font-size: var(--fs-pequeno); line-height: var(--alto-linea-titulo); color: var(--color-texto); } /* El filete de la lámina: un trazo corto de acento sobre el nombre, como la raya de una cartela de museo. Vive DENTRO del nombre (no es un hijo más de la rejilla, que le robaría una fila al subgrid) y se dibuja en §6. */ .home-muro__especie::before { content: ""; display: block; inline-size: var(--esp-lg); block-size: 1px; margin-block-end: var(--esp-2xs); background-color: var(--color-acento-texto); transform-origin: left center; } /* MAPA DE ENCUADRE. Un recorte cuadrado de una foto apaisada o vertical decide qué parte del ave se queda. Cada valor se sacó mirando el archivo con una retícula al 10 %: el ave completa —pico, cabeza y cola— y con aire hacia donde mira. Por archivo (atributo src) y no por posición en la lista: si alguien reordena el muro, el encuadre viaja con su foto. azulejo palmero apaisada · ave entre el 25 y el 90 % del ancho piaya cayana vertical · cabeza al 22 %: el recorte sube cucú ardilla apaisada · pico al 15 %: el recorte va a la izquierda barranquero vertical · cabeza al 18 %, cola al 70 % batará vertical · ave entre el 36 y el 58 % del alto titira apaisada · ave centrada, un poco a la derecha */ .home-muro__foto[src*="ave-04-azulejo-palmero"] { object-position: 72% 50%; } .home-muro__foto[src*="ave-06-piaya-cayana"] { object-position: 50% 32%; } .home-muro__foto[src*="ave-08-cucu-ardilla"] { object-position: 36% 50%; } .home-muro__foto[src*="ave-12-barranquero"] { object-position: 50% 22%; } .home-muro__foto[src*="ave-13-batara-carcajad"] { object-position: 40% 45%; } .home-muro__foto[src*="ave-16-tytira-inquisitor-macho"] { object-position: 54% 50%; } /* ------------------------------------------------------------------ §4 */ /* Bloque a dos columnas: foto a un lado, texto al otro. Nunca superpuestos. En móvil se apilan —foto arriba, texto abajo—, que es el mismo principio con menos ancho. */ .home-duo { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: center; } @media (min-width: 56em) { .home-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-lg); } /* Alterna el lado de la foto entre bloques contiguos sin duplicar marcado: el bloque marcado --invertido pone la imagen a la derecha. */ .home-duo--invertido .home-duo__medio { order: 2; } } .home-duo__medio { margin: 0; } .home-duo__foto, .home-duo__video { display: block; width: 100%; height: 100%; object-fit: cover; } /* v33 · EL MISMO BUG DEL MURO (§3), en el bloque a dos columnas. Medido a 375 px: marco 4:5 de 337,9 × 422,4 y foto de 337,9 × 601 —la del sendero y la del vivero—; a 1280, 578 × 722,5 contra 578 × 1027,9. No había banda porque las dos fotos son MÁS altas que el marco, pero el sobrante se cortaba sólo por abajo: el recorte quedaba anclado arriba y ningún `object-position` podía moverlo. Fuera del flujo, el marco manda y el encuadre se elige (abajo). */ .home-duo__medio > .marco > picture > .home-duo__foto { position: absolute; inset: 0; } /* Encuadre (retícula al 10 % sobre el archivo, marco 4:5 sobre foto 9:16: se ve el 70 % del alto). Sendero: el camino y los crotones ocupan del 60 al 95 % del alto; lo que se sacrifica es el cielo de arriba. Vivero: la trabajadora va de la gorra (38 %) a las botas (97 %); con el foco abajo del todo entra entera, de pies a cabeza, con los esquejes en la mano. */ #sendero .home-duo__foto { object-position: 50% 72%; } #vivero .home-duo__foto { object-position: 50% 100%; } .home-duo__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-sm); } /* Tira de fotos pequeñas bajo el bloque a dos columnas (el vivero enseña cuatro). Scroll horizontal en móvil, rejilla en escritorio: una foto de vivero en una cuarta parte de 375 px no se aprecia, y el cliente pidió justo lo contrario. */ .home-tira { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: var(--gap-sm); grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; /* LOS DOS, Y NO ES REDUNDANCIA. `overscroll-behavior-inline` es la forma lógica y es la que expresa la intención, pero Safari sólo la entiende desde la 16: en un iPhone con iOS 15 —que los hay, y son justo los aparatos donde se reportó el bug— la línea lógica se descarta entera al parsear y la tira quedaba sin blindaje, así que al llegar al último plano el arrastre se propagaba al viewport y rebotaba la página completa de lado. La forma física se entiende desde Safari 13. Con las dos, el navegador moderno lee la lógica (idéntica en modo horizontal-tb) y el antiguo la física; ninguna contradice a la otra. */ overscroll-behavior-inline: contain; overscroll-behavior-x: contain; } .home-tira > li { scroll-snap-align: start; } /* EL ÚLTIMO NO PUEDE ALINEARSE POR EL PRINCIPIO, y con `mandatory` eso se paga en temblor. Las tarjetas miden el 62 % del ancho: al llegar al final, el último elemento no tiene recorrido para llevar su canto izquierdo al borde del scroller, así que el punto de anclaje que pide `start` cae más allá del scroll máximo. Con anclaje obligatorio, el navegador corrige a un destino que el contenido no puede alcanzar y devuelve el arrastre: el clásico tirón de vuelta al soltar en el último plano —que, sumado al rebote lateral, es lo que se leía como «la página se mueve sola». Se le da al último el anclaje simétrico del primero: `end` lo posa contra el canto derecho, que sí es alcanzable, y el recorrido cierra limpio. */ .home-tira > li:last-child { scroll-snap-align: end; } @media (min-width: 48em) { .home-tira { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); overflow-x: visible; } } .home-tira__foto { display: block; width: 100%; height: 100%; object-fit: cover; } /* v33 · Mismo arreglo que §3 y el bloque a dos columnas: medido a 375 px, marcos de 209,5 × 261,9 con fotos de 372,5 (tres del vivero) y 279,3 (parque-61) —cuatro fotos de cuatro alturas en una tira que se lee como una sola pieza—. Fuera del flujo, las cuatro miden lo que el marco. */ .home-tira > li > .marco > picture > .home-tira__foto { position: absolute; inset: 0; } /* Encuadre de las cuatro (marco 4:5): las macetas y la guadua del 01, el camellón rojo del 03 y la lengua de suegra del 04 viven en la mitad baja o media de su foto; el cielo y la malla de sombra son lo que sobra. El camino de losas del parque-61 está abajo del todo. */ .home-tira__foto[src*="vivero-01"] { object-position: 50% 68%; } .home-tira__foto[src*="vivero-03"] { object-position: 50% 72%; } .home-tira__foto[src*="vivero-04"] { object-position: 50% 42%; } .home-tira__foto[src*="parque-61"] { object-position: 50% 100%; } /* Lista de servicios en una línea: píldoras, no párrafo. */ .home-lista-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2xs); } /* ------------------------------------------------------------------ §5 */ /* Franja de contacto de la portada. Es un resumen: el mapa, el formulario, las referencias y las coordenadas viven en contacto.html. Aquí sólo el horario, el botón de WhatsApp y la puerta a esa página. */ .home-contacto { display: grid; gap: var(--gap); grid-template-columns: 1fr; padding: var(--esp-lg); background-color: var(--color-superficie-solida); border: 1px solid var(--color-borde-suave); } @media (min-width: 56em) { .home-contacto { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--gap-lg); } } .home-contacto__horario { margin: var(--esp-2xs) 0 0; font-family: var(--fuente-titulo); font-size: var(--fs-cuerpo); color: var(--color-texto); } /* ========================================================================== PÁGINAS DE PROFUNDIDAD · encabezado propio -------------------------------------------------------------------------- Cada página nueva (espacios, planes, naturaleza, sendero, vivero, contacto) abre con este encabezado: eyebrow,

    y una frase, sobre el fondo de papel del sitio. SIN FOTO DETRÁS, a propósito — es la forma más simple de garantizar la regla del cliente: aquí no hay ninguna imagen que el texto pueda tapar, y la primera fotografía de la página aparece inmediatamente debajo, entera y sin nada encima. Vive en esta hoja y no en una nueva porque las seis páginas la comparten; home.css es la única hoja que todas ellas cargan. ========================================================================== */ .pagina-encabezado { /* v24 · FALTABA EL RESPIRO DEL HEADER FIJO — bug real, reportado por el cliente en celular: la cabecera (`.cabecera`, shell.css) es `position: fixed`, así que sin este padding el encabezado de página arranca en el mismo punto que ella y la mitad de la miga de pan («← Vegas del Verde») quedaba tapada detrás del logo. El resto del sitio ya resuelve esto — ver `.pagina-interior` (shell.css §3) para las páginas legales — pero este bloque, nuevo de la fase de arquitectura, se quedó sin el mismo respiro. Mismo cálculo que ahí. */ padding-block: calc(var(--alto-header) + var(--esp-lg)) var(--esp-lg); } .pagina-encabezado__interior { display: flex; flex-direction: column; gap: var(--esp-xs); max-width: var(--medida); } .pagina-encabezado__titulo { font-family: var(--fuente-display); font-size: var(--fs-h1); font-weight: var(--peso-display); font-optical-sizing: auto; font-variation-settings: var(--ejes-display); letter-spacing: var(--tracking-display); line-height: var(--alto-linea-titulo); text-wrap: balance; margin: 0; } /* Miga de pan: una sola línea, con el objetivo táctil completo de 44 px que pide WCAG 2.5.8. v24 · SE VE MÁS Y DICE «VOLVER» — corrección del cliente en celular: con `--color-texto-suave` (6,1:1, de sobra en la teoría) y `--fs-micro` (12,5 px) el enlace se leía como un rótulo secundario, no como un botón de volver — y encima estaba tapado por el header (ver `.pagina-encabezado` arriba). Con el tapado ya resuelto, esto es la otra mitad: tinta llena (--color-texto, 13,9:1) y un cuerpo de interfaz normal en vez del más pequeño de la escala, para que se lea como una acción y no como un dato de pie de página. El texto pasa de «← Vegas del Verde» —que repite el logo que ya está tres centímetros arriba— a «← Volver», que es lo que pidió el cliente. */ .pagina-miga { display: inline-flex; align-items: center; gap: var(--esp-3xs); min-height: 2.75rem; font-family: var(--fuente-titulo); font-size: var(--fs-pequeno); font-weight: var(--peso-medio); color: var(--color-texto); } .pagina-miga:hover, .pagina-miga:focus-visible { color: var(--color-acento-texto); } /* ========================================================================== §6 · MOVIMIENTO DE LOS BLOQUES DE ESCAPARATE -------------------------------------------------------------------------- POR QUÉ ESTE BLOQUE EXISTE La cabecera de esta hoja decía «aquí no se declara ninguna animación propia»: la portada nueva y los seis encabezados de página nacieron quietos. El cliente corrigió el plan v4 en esta sesión —el §4.6 pedía BAJAR a tres motores y retirar piezas decorativas; su orden textual fue la contraria: «conservarlas y si se puede poner más en todas partes»—. Nada de lo que ya existía se retira; lo que se hace aquí es dar movimiento a la parte del sitio que todavía no tenía ninguno. LAS CUATRO REGLAS QUE ESTE BLOQUE NO ROMPE 1. UN MOTOR POR PIEZA. Ninguna de estas reglas toca un elemento ni una propiedad que ya tenga dueño. Los
  • , las
    y los interiores de encabezado que llevan `.reveal` conservan su opacidad y su transform intactos: aquí sólo se anima o bien un ::before/::after nuevo (una caja propia, sin dueño anterior), o bien un elemento que hoy no tiene ningún motor (`.home-tira > li`, el

    del encabezado, la flecha de la tarjeta). 2. EL MOVIMIENTO NO TAPA LA FOTO. Corrección directa del cliente en esta misma sesión: las piezas decorativas van en el espacio alrededor de la foto, no encima tapándola. Por eso ni una sola de estas piezas se posiciona sobre una : los filetes viven en el aire de los encabezados y bajo las cifras —bloques que no llevan fotografía—, la entrada escalonada mueve la miniatura ENTERA dentro de su hueco de la rejilla (no le pone nada encima) y la flecha vive en la franja de texto, debajo del marco. Cero `position: absolute` sobre imagen, cero degradados, cero filtros: la regla «la foto es la foto» sigue siendo la misma. 3. CERO JS Y CERO COSTE EN REPOSO. Todo va con `animation-timeline: view()`: el progreso lo ata el compositor al paso del elemento por la ventana, sin un listener de scroll y sin robarle un fotograma al hilo principal. Sólo se animan `opacity` y `transform`, que es lo único que no obliga a recalcular la página. 4. LAS DOS GUARDAS DE LA CASA, como en inicio.css §PARALAJE: · `prefers-reduced-motion: no-preference` envolviendo TODO: quien pide menos movimiento no recibe ninguno; la animación ni se declara (no se usa `animation: none`, que es otra cosa). · `@supports (animation-timeline: view())`: donde no exista, cada pieza se queda en su estado final —visible, completa, legible—, que es un estado válido por sí mismo. Ningún respaldo con JS. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* ---- 6.1 · EL FILETE DEL ENCABEZADO DE PÁGINA ----------------------- Las seis páginas de profundidad abren con un rótulo, un

    y una entradilla sobre papel: sin fotografía, a propósito. Ese aire pedía un gesto, y el gesto de la casa es el filete que se dibuja solo, el mismo vocabulario de trazo que ya usan los iconos del sitio. Se dibuja de izquierda a derecha mientras el encabezado entra. */ .pagina-encabezado { view-timeline-name: --home-encabezado; } .pagina-encabezado__interior::after { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --home-encabezado; animation-range: entry 20% cover 30%; animation-name: home-filete-crece; } /* ---- 6.2 · LA DERIVA DEL TITULAR ------------------------------------ El

    sube unos pocos píxeles mientras su encabezado cruza la ventana. El `.reveal` de la casa vive en `.pagina-encabezado__interior` —el PADRE—, así que aquí no hay dos motores sobre una misma pieza: el padre resuelve su entrada y el titular hace su recorrido propio. Es paralaje de texto de recorrido mínimo, en un titular que no se lee en movimiento sino al llegar: por eso medio espacio y no treinta píxeles. */ .pagina-encabezado__titulo { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --home-encabezado; animation-range: entry 0% exit 100%; animation-name: home-titular-deriva; } /* ---- 6.3 · EL FILETE DE CADA CIFRA ---------------------------------- Las tres cifras de naturaleza (101 · 347 · 57) son el segundo registro tipográfico de la portada y el bloque que más se mira. Cada una gana un filete que crece bajo el dato, atado a la entrada de su propia caja: no hay escalonado que programar porque cada `
  • ` lleva su propia línea de tiempo y entra cuando le toca. */ .home-cifras__dato { view-timeline-name: --home-cifra; } .home-cifras__dato::after { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --home-cifra; animation-range: entry 30% cover 40%; animation-name: home-filete-crece; } /* ---- 6.4 · LA TIRA DEL VIVERO --------------------------------------- Las cuatro fotos del vivero son el único bloque de la portada cuyos `
  • ` NO llevan `.reveal`: el `
      ` lleva `.reveal-secuencia`, que reparte retardos, pero sin hijos marcados no había nada que entrara. Aquí entran, cada uno con su línea de tiempo, y se mueve la miniatura entera —foto y hueco a la vez— en vez de ponerle nada encima. SE ABRE A PARTIR DE 48em, y no es un capricho: por debajo de ese ancho la tira es un scroller horizontal (`overflow-x: auto`), y una línea de tiempo `view()` dentro de un contenedor de scroll es exactamente la trampa que ya documenta momentos.css. Donde la tira es rejilla, entra; donde es carrusel, se queda quieta y completa. */ @media (min-width: 48em) { .home-tira > li { view-timeline-name: --home-tira-pieza; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --home-tira-pieza; animation-range: entry 10% cover 35%; animation-name: home-pieza-asoma; } } /* ---- 6.6 · EL FILETE DE LA FRANJA DE CONTACTO ----------------------- El bloque de horario cierra la portada. Su filete crece en vertical —de arriba abajo, como una columna que se llena— para distinguirlo de los horizontales de más arriba: el mismo gesto, otro eje. */ .home-contacto { view-timeline-name: --home-contacto; } .home-contacto__horario::before { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --home-contacto; animation-range: entry 25% cover 45%; animation-name: home-filete-cae; } } } /* ---- 6.7 · LA FLECHA DE LA TARJETA --------------------------------------- Único movimiento del bloque que NO va atado al scroll, porque no es una entrada: es una respuesta. La flecha de «Reservar este espacio para mi evento» (v24, antes «Ver los usos») avanza un paso cuando la tarjeta recibe el puntero o el foco de teclado. Va con `transition`, no con `animation`, y sobre un elemento que no tiene ningún otro motor. Fuera del bloque de `prefers-reduced-motion` a propósito: los tokens --dur-* ya valen 1 ms en ese modo (tokens.css), así que el estado final llega igual, instantáneo, sin desaparecer la señal de interacción. -------------------------------------------------------------------------- */ .home-tarjeta__ir { transition: transform var(--transicion-rapida); } .home-tarjeta:hover .home-tarjeta__ir, .home-tarjeta:focus-visible .home-tarjeta__ir, .home-tarjeta:focus-within .home-tarjeta__ir { transform: translate3d(var(--esp-3xs), 0, 0); } /* ---- 6.8 · LAS CAJAS QUE LOS FILETES NECESITAN --------------------------- Los ::before/::after de arriba tienen que existir SIEMPRE, no sólo cuando hay animación: son parte de la composición —el filete bajo la cifra, la viñeta de la lista, la columna del horario— y sin `content` no habría caja que animar. Se declaran aquí, fuera de las guardas, en su estado final. Donde no haya `view()` o se pida menos movimiento, esto es exactamente lo que se ve: la pieza dibujada, quieta y completa. -------------------------------------------------------------------------- */ .pagina-encabezado__interior { position: relative; } .pagina-encabezado__interior::after { content: ""; display: block; height: 1px; margin-top: var(--esp-sm); background-color: var(--color-borde-fuerte); transform-origin: left center; } .home-cifras__dato::after { content: ""; display: block; height: 1px; margin-top: var(--esp-2xs); background-color: var(--color-acento-texto); transform-origin: left center; } .home-contacto__horario { position: relative; padding-left: var(--esp-sm); } .home-contacto__horario::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 1px; background-color: var(--color-acento-texto); transform-origin: center top; } /* ---- 6.9 · EL VOCABULARIO ------------------------------------------------ Cuatro @keyframes para todo el bloque, y ni uno más: un filete que se dibuja en horizontal, el mismo en vertical, una pieza que asoma y una deriva de titular. Repetir el mismo gesto es lo que hace que el movimiento se lea como un sistema y no como una colección de efectos. -------------------------------------------------------------------------- */ @keyframes home-filete-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes home-filete-cae { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes home-pieza-asoma { from { opacity: 0; transform: translate3d(0, var(--esp-sm), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes home-titular-deriva { from { transform: translate3d(0, var(--esp-2xs), 0); } to { transform: translate3d(0, calc(-1 * var(--esp-2xs)), 0); } } /* ========================================================================== §7 · LAS FOTOS SE DESCUBREN (v33 · agente FOTOS) -------------------------------------------------------------------------- Pedido del cliente del 26-sep: animaciones «ultrapremium» y SUTILES en las galerías. Tres gestos y ninguno nuevo en el vocabulario de la casa: 1. ZOOM CONTENIDO. La foto llega un 8 % más cerca y se asienta mientras su tarjeta se funde (`.reveal` → `.visible`, el IntersectionObserver de js/app.js). Pasa DENTRO del marco, que ya recorta (`overflow: hidden`): la caja no se mueve ni un píxel, sólo la imagen respira. La escala es --escala-hover al cuadrado (1,04² ≈ 1,08): con movimiento reducido ese token vale 1 y el zoom desaparece solo. 2. EL FILETE QUE SE DIBUJA. El trazo corto sobre el nombre de cada ave crece de izquierda a derecha un compás después de la foto, con la curva de trazo de la casa (--ease-traza), la de los iconos. 3. ESCALONADO. Lo reparte la .reveal-secuencia del
        (90 ms entre piezas); cada gesto hereda su --reveal-delay. Sólo `transform`. Duración --dur-reveal (900 ms), curva --ease-salida: ningún número nuevo. Con `prefers-reduced-motion` los --dur-* valen 1 ms (tokens.css) y app.js marca todo `.visible` de entrada: estado final, quieto y completo. Sin JS no existe `.js` y nada de esto aplica. ========================================================================== */ .js .home-muro > li.reveal .home-muro__foto, .js .home-duo__medio.reveal .home-duo__foto, .js .home-tira > li.reveal .home-tira__foto { transform: scale(calc(var(--escala-hover) * var(--escala-hover))); transition: transform var(--dur-reveal) var(--ease-salida); transition-delay: var(--reveal-delay, 0ms); } .js .home-muro > li.reveal.visible .home-muro__foto, .js .home-duo__medio.reveal.visible .home-duo__foto, .js .home-tira > li.reveal.visible .home-tira__foto { transform: none; } .js .home-muro > li.reveal .home-muro__especie::before { transform: scaleX(0); transition: transform var(--dur-reveal) var(--ease-traza); transition-delay: calc(var(--reveal-delay, 0ms) + var(--dur-media)); } .js .home-muro > li.reveal.visible .home-muro__especie::before { transform: none; } /* La tira del vivero en móvil es un carrusel (overflow-x: auto): igual que el muro (§3), el
      • entra sin desplazamiento vertical para no crear un desborde que el dedo pueda arrastrar. */ @media (max-width: 47.99em) { .js .home-tira > li.reveal { transform: none; } } /* Las cifras suben con js/app.js (data-contador). Cifras tabulares: cada dígito ocupa lo mismo y el número no baila mientras cuenta. */ .home-cifras .cifra { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .js .home-muro > li.reveal .home-muro__foto, .js .home-duo__medio.reveal .home-duo__foto, .js .home-tira > li.reveal .home-tira__foto, .js .home-muro > li.reveal .home-muro__especie::before { transform: none; transition: none; } }