/* ========================================================================== VEGAS DEL VERDE · SECCIÓN #sendero — «El Sendero Ecovital» Fragmento: sections/sendero.html Depende de: styles/tokens.css, styles/base.css y —a propósito— styles/sections/naturaleza.css, de donde esta sección reutiliza SIN COPIAR el bloque .nat-apertura / .nat-ruta / .nat-oferta y los tokens locales de la clase `.nat` (--nat-margen, --nat-solape, --nat-alto-apertura). Por eso el
lleva las dos clases: `nat` para heredar esos tokens y `sendero` para lo suyo. ORDEN DE CARGA: esta hoja va DESPUÉS de naturaleza.css en CSS_SECCIONES, de modo que si alguna vez hiciera falta matizar una regla heredada se puede hacer aquí sin subir especificidad y sin un solo !important. REGLA DE LA CASA, sin excepciones en este archivo: ningún color, tamaño, radio, sombra ni duración se escribe suelto. Todo sale de un var(--token). Se anima únicamente `transform` y `opacity`. ========================================================================== */ /* ========================================================================== 0. TOKENS LOCALES DE LA SECCIÓN Lo que la fundación no cubre, declarado una vez y consumido por nombre. ========================================================================== */ .sendero { /* El ancho de un plano vertical del carril. Los clips son 720×1280 (9:16): por debajo de 13rem la mariposa deja de leerse y el pie se parte en cuatro renglones; por encima de 19rem los cuatro no caben en el carril sin empujar la cartela fuera de su medida. */ --snd-plano-ancho: clamp(11.5rem, 17vw, 15.5rem); /* EL DESFASE VERTICAL. Es el token que impide que esto parezca un muro de archivo: los cuatro planos no arrancan a la misma altura ni terminan a la misma altura. Cada plano consume un múltiplo distinto y ninguno repite (ver §3). Va en clamp para que en pantallas bajas el escalonado no gaste media pantalla de aire. */ --snd-desfase: clamp(1rem, 3.2vw, 3rem); /* EL RECORRIDO DE LA DERIVA POR SCROLL (§4). Deliberadamente corto: lo que tiene que leerse es que el carril se DESORDENA al pasar, no que los planos vuelan. Más de 2rem y el pie de un plano se cruza con el marco del vecino. */ --snd-deriva: clamp(0.75rem, 1.6vw, 1.75rem); /* El radio grande del canto abierto de cada plano. Es la misma silueta de hoja de la sección hermana —dos esquinas abiertas y dos cerradas— y se declara aquí para que las cuatro variantes de §3 sean una sola cuenta. */ --snd-hoja: var(--radio-xl); /* v4 · CUÁNTO SUBE LA FOTOGRAFÍA SOBRE LA BANDA VERDE (§6). Es el gesto que cose el hero de vídeo con la apertura de fotos en una sola pieza (pedido del cliente: «integra las fotos y videos [...] una propuesta premium»). Por debajo de 2rem el solape se lee como error de maqueta; por encima de 4.5rem la foto tapa el aire que la cartela del hero necesita debajo. */ --snd-solape-banda: clamp(2rem, 5vw, 4.5rem); /* v5 · EL ALTO DE LA PORTADA DE FOTO, ACORTADO (pedido del cliente: «quita [...] el sendero ecovital mas rande de portada, y crea una portada mas corta»). Redeclara el token de naturaleza.css §tokens sobre la misma clase `.nat`: igual especificidad, esta hoja carga después, gana sin tocar la sección hermana. Baja el techo de 40rem a 26rem: la banda deja de comerse una pantalla entera de escritorio y sigue siendo la pieza más grande de la apertura, que es lo que tiene que ser. */ --nat-alto-apertura: clamp(19rem, 30vw, 26rem); } /* ========================================================================== 1. LA BANDA DEL HERO — verde bosque, a sangre por los cuatro cantos POR QUÉ EL MARGEN NEGATIVO DE ARRIBA. La banda tiene que empezar pegada a lo que viene antes (#vivero), sin la franja de crema que dejaría el relleno de .seccion. Se come ese relleno con un margen negativo del mismo token: es el mismo recurso, ya usado por .nat-portada y .nat-muro-banda en la sección hermana, y no un valor inventado. POR QUÉ VERDE BOSQUE Y NO CARBÓN. La versión anterior de estos clips vivía sobre --color-fondo-carbon: un gris neutro debajo de cuatro planos de vegetación. El bosque es el color dominante de la marca y recoge el metraje en vez de contradecirlo. Además libera el negro: la única sala oscura del sitio sigue siendo la del concurso de #naturaleza (--color-sala), y este hero no la repite. ========================================================================== */ .snd-hero { margin-block-start: calc(var(--esp-seccion) * -1); /* v4 · YA NO HAY FRANJA DE CREMA ENTRE EL HERO Y LA APERTURA. Antes la banda cerraba con margin-block-end: var(--esp-seccion) y los dos bloques quedaban separados por un pasillo de fondo claro: exactamente el «dos secciones pegadas» que el cliente señaló. Ahora la banda alarga su relleno inferior en --snd-solape-banda y la fotografía de la apertura SUBE esa misma medida sobre el verde (§6): el camino emerge del bosque del metraje, y el aire total entre cartela y texto sigue siendo --esp-seccion — no se pierde ritmo, se pierde la costura. */ margin-block-end: 0; padding-block: var(--esp-seccion) calc(var(--esp-seccion) + var(--snd-solape-banda)); /* v6 · LA BANDA GIRA A CLARA — pedido directo del cliente: «no quiere tonos oscuros en la página [...] integrando más tramas de fondo como en la página general». El verde bosque a sangre pasa a la veladura salvia translúcida del sistema (--color-banda-trama): la banda sigue leyéndose como banda, pero deja correr por debajo el papel botánico del fondo. La cartela conserva su fondo sólido (ahora claro) y todos los textos vuelven a la tinta de la página. */ background-color: var(--color-banda-trama); color: var(--color-texto); /* `clip` y no `hidden`: hidden crea contexto de scroll y mata cualquier sticky de la página (convención del proyecto). Recorta el sangrado del cuarto plano por el canto derecho. */ overflow-x: clip; } .snd-hero__cuerpo { display: grid; gap: var(--gap-lg); /* En móvil no hay sangrado lateral: una columna con el margen de página. */ padding-inline: var(--nat-margen); } @media (min-width: 62em) { .snd-hero__cuerpo { /* DESIGUAL A PROPÓSITO, igual que la apertura de abajo: la cartela pide una medida corta de lectura y el carril pide todo lo que sobre. Con 1fr/1fr la cartela se estira hasta el doble de su medida cómoda y el carril se queda sin sitio para sangrar. */ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: var(--gap-lg); /* El carril SE SALE por el canto derecho: el margen de página sólo se aplica por la izquierda. El carril no termina, se sale. */ padding-inline: var(--nat-margen) 0; } } /* ========================================================================== 2. LA CARTELA — fondo SÓLIDO, y esa es la decisión Texto claro sobre fotografía en movimiento no da AA nunca: el peor píxel cambia en cada fotograma, así que no hay contraste que se pueda medir y garantizar. Es la misma lección que ya está escrita en la cartela del milano de naturaleza.css. Aquí el rótulo se apoya en verde bosque hondo, OPACO, y el contraste es constante y comprobable: · crema (--color-texto-inverso) sobre verde bosque: 10,7:1 — y sobre el hondo de la cartela, todavía más. Muy por encima de AAA. · crema al 78 % (--color-texto-inverso-suave), que es la nota y la firma: 7,2:1 sobre bosque. AAA para texto normal. · amarillo (--color-destacado) para el rótulo: 7,3:1 sobre bosque. Ninguno de los tres depende de qué esté pasando en el vídeo de al lado. ========================================================================== */ /* v23 · LA CARTELA ERA UN RECTÁNGULO DE COLOR, NO UNA PIEZA APOYADA. Sobre la banda de trama, un bloque claro sin filete ni sombra se lee como un hueco recortado en el papel: es la lectura «genérica» que señaló el cliente. Tres correcciones, ninguna de ellas un velo (no hay foto debajo: el carril de vídeo es HERMANO, no fondo): · Filete de vidrio (--color-vidrio-borde, verde al 14 %) para que la pieza tenga canto propio contra la trama, que es del mismo valor claro. · Sombra de contacto + difusión (--sombra-md): la cartela se APOYA en la página en vez de estar pintada sobre ella. · Más aire dentro (--esp-xl en escritorio, abajo) y más aire ENTRE pieza y dato: el gap sube de --esp-xs a --esp-sm. El apretado era la mitad del «no sé si es el espaciado». La superficie sigue siendo OPACA: la lección del contraste medible junto al vídeo no cambia, y el vidrio no va en bloques de texto (tokens.css §7b). */ .snd-hero__cartela { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-sm); max-width: var(--medida-corta); padding: var(--esp-lg); /* v6 · la cartela sigue siendo SÓLIDA —la lección del contraste medible sobre vídeo no cambia— pero sólida CLARA: la superficie de tarjeta del sistema. Tinta encima: 13,4:1. */ background-color: var(--color-superficie-solida); border: 1px solid var(--color-vidrio-borde); box-shadow: var(--sombra-md); /* La misma silueta de hoja del carril, en espejo: la cartela y los planos que tiene al lado se leen como piezas de la misma familia. */ border-start-start-radius: var(--snd-hoja); border-end-end-radius: var(--snd-hoja); border-start-end-radius: var(--radio-xs); border-end-start-radius: var(--radio-xs); } /* v23 · En escritorio la cartela gana el relleno de pieza mayor: a --esp-lg el titular de dos renglones quedaba a un dedo del filete nuevo, y un filete apretado contra su contenido es lo que delata una caja de plantilla. */ @media (min-width: 62em) { .snd-hero__cartela { padding: var(--esp-xl); } } .snd-hero__eyebrow { /* v6 · de amarillo (rótulo del negativo) a terracota: 5,3:1 sobre claro. */ color: var(--color-acento-texto); } .snd-hero__titulo { margin: 0; color: var(--color-texto); } /* El segundo renglón baja de peso, no de cuerpo: los dos siguen siendo el mismo titular y no un titular con subtítulo pegado. Mismo gesto que .nat-giro__titulo, que es de donde viene la voz de esta sección. */ .snd-hero__titulo .reveal-texto__linea:nth-child(2) { font-weight: var(--peso-ligero); } .snd-hero__nota { margin: var(--esp-2xs) 0 0; font-size: var(--fs-pequeno); line-height: var(--alto-linea-base); color: var(--color-texto-suave); } /* v23 · LA FIRMA DEJA DE SER LETRA GRIS ABIERTA. Llevaba --tracking-display sobre cuerpo micro: exactamente el defecto que base.css §.credito corrigió en esta misma pasada («a este cuerpo el tracking abre la palabra y la desdibuja»). Pasa al mismo contrato que el crédito —fuente de etiqueta, interlineado propio de 1,45, tracking a cero— y gana un filete de cierre que la separa de la nota sin meter otra caja: es el colofón de la cartela, no un tercer párrafo. */ .snd-hero__firma { margin: 0; padding-block-start: var(--esp-xs); border-block-start: 1px solid var(--color-vidrio-borde); align-self: stretch; font-family: var(--fuente-titulo); font-size: var(--fs-micro); line-height: 1.45; letter-spacing: 0; color: var(--color-texto-suave); } /* ========================================================================== 3. EL CARRIL DE CUATRO PLANOS EN MÓVIL es una tira que se arrastra con el dedo, con anclaje: cuatro verticales de 9:16 no caben de otra forma en 375 px sin quedar en tamaño de sello. `scroll-snap` hace que siempre haya un plano bien encuadrado, y el sangrado por los dos cantos avisa de que hay más a los lados. EN ESCRITORIO son cuatro columnas en fila, quietas, sin scroll. Lo que se mueve es lo que hay DENTRO de cada plano. CUATRO ALTURAS Y CUATRO RADIOS, NINGUNO REPETIDO. Cuatro rectángulos idénticos alineados es la firma de un muro de archivo; es exactamente lo que hacía que la banda anterior se leyera como plantilla. Cada plano entra a una altura distinta —múltiplos 0, 1.6, 0.6 y 2.3 del desfase: ni creciente ni simétrico— y lleva su propia diagonal de esquinas abiertas. ========================================================================== */ .snd-hero__carril { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: var(--snd-plano-ancho); gap: var(--gap-sm); align-items: start; } @media (max-width: 61.99em) { /* `ul.` y no `.` a secas, y esto NO es adorno: base.css §reset lleva `ul[class], ol[class] { padding: 0 }`, que es (0,1,1) de especificidad y le gana a una clase suelta (0,1,0) por muy tarde que cargue esta hoja. Con el selector de clase pelado el relleno de abajo se quedaba en 0 y el primer plano salía pegado al canto de la pantalla, con su pie cortado —medido en preview—. Añadir el tipo iguala la cuenta y, al ir después en el orden de carga, gana. Cero !important. */ ul.snd-hero__carril { overflow-x: auto; scroll-snap-type: x mandatory; /* EL SANGRADO ES SÓLO POR LA DERECHA, y está medido en preview: con el margen negativo por los dos lados el primer plano acababa a hueso contra el canto izquierdo —y su pie, cortado— en vez de alinearse con la cartela de arriba. La tira arranca en la línea del texto, como todo lo demás de la página, y se sale por donde tiene que salirse: por delante. El relleno del final le devuelve el margen al cuarto plano cuando el visitante llega arrastrando hasta el fondo. OJO CON EL TOKEN: aquí NO sirve --nat-margen, que es el que usa el resto de la sección. Ese token es un max() con un porcentaje dentro, y en un `padding` el porcentaje se resuelve contra el bloque contenedor: el navegador acababa dando 0. Por debajo de 62em los dos valores coinciden de todos modos —--nat-margen se resuelve siempre a --padding-contenedor en pantallas estrechas—, así que se escribe el que no depende del porcentaje. */ margin-inline-end: calc(var(--padding-contenedor) * -1); padding-inline-end: var(--padding-contenedor); padding-block-end: var(--esp-2xs); /* EL TERCER VALOR DE LA TERNA (sep-2026). El sangrado de borde a borde se arma con tres medidas que TIENEN que ser la misma: el margen negativo que saca la tira del contenedor, el relleno que le devuelve el aire al último plano, y el relleno de anclaje que le dice al navegador dónde termina de verdad el recorrido. Faltaba la tercera. Sin ella, el punto de anclaje del cierre cae --padding-contenedor MÁS ALLÁ del scroll máximo: el navegador, con `mandatory`, insiste en un destino que el contenido no puede alcanzar, devuelve el arrastre al soltar y el tirón se propaga hacia fuera. Con los tres valores iguales, el anclaje de cierre coincide al píxel con el final del recorrido. */ scroll-padding-inline-end: var(--padding-contenedor); /* Que el arrastre del carril se quede EN el carril: al llegar al cuarto plano, el sobrante del gesto se propagaba a la página y el viewport lo traducía en rebote lateral (iOS) o en «volver atrás» (Android). Las dos formas por el mismo motivo que en home.css §4: la lógica no existe en Safari anterior a la 16. */ overscroll-behavior-inline: contain; overscroll-behavior-x: contain; /* Sin barra visible: la tira se arrastra, no se opera. */ scrollbar-width: none; } .snd-hero__carril::-webkit-scrollbar { display: none; } .snd-plano { scroll-snap-align: start; } /* El cuarto plano no tiene recorrido para llevar su canto izquierdo al borde del carril, así que su anclaje `start` era inalcanzable. Se le da el simétrico del primero —`end`, contra el canto de cierre— que con el `scroll-padding-inline-end` de arriba cae exactamente en el final del recorrido. Primer plano y último anclan igual de limpio. */ .snd-plano:last-child { scroll-snap-align: end; } } .snd-plano { margin: 0; } /* Las cuatro alturas de entrada. El cuarto es el que más baja: es el plano corto y el que sangra por el canto derecho, así que cuelga del carril en vez de alinearse con él. En móvil el escalonado se apaga (§3 bis): en una tira que se arrastra, un desfase vertical sólo roba alto. */ @media (min-width: 62em) { .snd-plano--dos { margin-block-start: calc(var(--snd-desfase) * 1.6); } .snd-plano--tres { margin-block-start: calc(var(--snd-desfase) * 0.6); } .snd-plano--cuatro { margin-block-start: calc(var(--snd-desfase) * 2.3); } } .snd-plano__figura { margin: 0; } .snd-plano__marco { /* Los clips son 720×1280. El aspect-ratio evita el salto de maqueta antes de que el póster decodifique: CLS cero por diseño. */ aspect-ratio: 9 / 16; background-color: var(--color-superficie-oscura); /* v23 · Los cuatro planos flotaban sin sombra sobre la banda de trama: una fotografía sin canto ni apoyo se lee como una imagen pegada, y cuatro seguidas como una plantilla de tarjetas. La sombra va DEBAJO —no encima de ningún fotograma— así que la regla de «la foto es la foto» se cumple: no hay velo, ni filtro, ni degradado sobre el vídeo. */ box-shadow: var(--sombra-md); } /* LA SILUETA DE HOJA, CUATRO VECES Y NUNCA IGUAL. Dos esquinas abiertas y dos casi rectas, alternando la diagonal plano a plano. Al repetirse variado se lee como sistema; al repetirse idéntico se leería como una plantilla de tarjetas redondeadas. */ .snd-plano--uno .snd-plano__marco { border-start-start-radius: var(--snd-hoja); border-end-end-radius: var(--snd-hoja); border-start-end-radius: var(--radio-xs); border-end-start-radius: var(--radio-xs); } .snd-plano--dos .snd-plano__marco { border-start-end-radius: var(--snd-hoja); border-end-start-radius: var(--snd-hoja); border-start-start-radius: var(--radio-xs); border-end-end-radius: var(--radio-xs); } .snd-plano--tres .snd-plano__marco { border-start-start-radius: var(--snd-hoja); border-end-start-radius: var(--snd-hoja); border-start-end-radius: var(--radio-xs); border-end-end-radius: var(--radio-xs); } .snd-plano--cuatro .snd-plano__marco { border-end-end-radius: var(--snd-hoja); border-end-start-radius: var(--snd-hoja); border-start-start-radius: var(--radio-xs); border-start-end-radius: var(--radio-xs); } .snd-plano__video { display: block; width: 100%; height: 100%; object-fit: cover; } /* EL PIE. Va debajo del plano y no encima: superpuesto sobre el vídeo no habría contraste medible (misma razón que la cartela de §2). Sobre el verde bosque, la crema al 78 % da 7,2:1. */ /* v23 · MISMO DIAGNÓSTICO QUE EL CRÉDITO DEL MURO DE AVES, y aquí repetido cuatro veces seguidas: cuerpo micro + gris + el interlineado de PÁRRAFO (1,68) + medio paso de aire contra la foto. A 12,8 px ese interlineado abre un canalón que despega el pie de su plano, y el pie deja de pertenecer a la pieza: se lee como texto suelto de plantilla. Lo que cambia, en el mismo contrato que .credito de base.css: · Fuente de etiqueta con interlineado propio (1,45): el pie vuelve a ser un bloque compacto de dos renglones bajo su plano. · MÁS aire entre pieza y dato, no menos: --esp-2xs → --esp-xs. Lo apretado era la costura, no la separación. El color se queda en --color-texto-suave (6,1:1 sobre el compuesto de la banda de trama): sigue siendo dato de servicio, y la jerarquía frente al verso del primer plano es lo que lo hace legible como pie. */ .snd-plano__pie { margin-top: var(--esp-xs); max-width: var(--snd-plano-ancho); font-family: var(--fuente-titulo); font-size: var(--fs-micro); line-height: 1.45; letter-spacing: 0; color: var(--color-texto-suave); text-wrap: pretty; } /* El pie del plano protagonista es un VERSO: mismo texto, otra voz. Es la única cursiva del carril y por eso señala cuál es la pieza que abre. */ /* v23 · El verso sube al contrato de PIEZA que base.css dio a .pie-obra__especie: display, --peso-display-menor (Josefin es monolineal y por debajo de 40 px el 300 se desvanece sobre la trama) y el interlineado de titular. Frente a los otros tres pies —etiqueta gris, 1,45— la diferencia deja de ser «una cursiva» y pasa a ser una jerarquía. */ .snd-plano__pie--verso { font-family: var(--fuente-display); font-size: var(--fs-pequeno); font-weight: var(--peso-display-menor); font-style: italic; line-height: var(--alto-linea-titulo); letter-spacing: var(--tracking-display); color: var(--color-texto); } /* ========================================================================== 4. LA DERIVA POR SCROLL — CSS puro, cero JS Cada plano se desplaza unos pocos puntos en vertical a medida que el carril cruza la pantalla, y cada uno a distinta velocidad y en distinto sentido: al bajar, la fila se desordena como la maleza al pasar caminando. Es la traducción literal de la metáfora de la sección —andar el sendero— y no un efecto de catálogo. POR QUÉ animation-timeline: view() Y NO UN IntersectionObserver. Esto corre entero en el compositor, sin un byte de JavaScript y sin un solo listener de scroll. Va envuelto en @supports, así que en un navegador sin soporte no pasa absolutamente nada: los planos se quedan donde los deja el layout, con su escalonado de §3, que ya es la composición buena. POR QUÉ ADEMÁS DENTRO DE prefers-reduced-motion: no-preference. Este es el caso en el que la regla de la casa —duración .01ms conservando el estado final— no basta: el estado final de esta animación NO es el estado de reposo, es el plano desplazado. Con movimiento reducido la animación no se declara siquiera, y el layout de §3 es exactamente lo que se ve. Sólo `transform`. Nada más. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .snd-plano__figura { animation: snd-deriva linear both; animation-timeline: view(); /* v2 · TODO EL TRÁNSITO, no sólo el tramo central (pedido del cliente: "en PC al deslizar está muy rápido"). Con `entry 15% exit 85%` el recorrido completo —de un extremo del --snd-deriva al otro— se resolvía en el 70% central del cruce de la pieza por la ventana, que en una fila corta (sin pista alta propia, a diferencia de las escenas por scroll de #naturaleza/#planes) dura poco scroll real: se sentía como un salto, no como una deriva. `entry 0% exit 100%` reparte el mismo recorrido en el 100% del tránsito — mismo --snd-deriva, mismo sentido por plano, sólo cambia la velocidad aparente. */ animation-range: entry 0% exit 100%; will-change: transform; } /* Sentidos y amplitudes distintos por plano. El tercero va AL REVÉS que los otros tres: si todos derivaran en el mismo sentido, el carril se leería como un bloque que se desliza —que es justo la marquesina que se retiró—, no como cuatro piezas sueltas. */ .snd-plano--dos .snd-plano__figura { --snd-deriva-factor: 1.7; } .snd-plano--tres .snd-plano__figura { --snd-deriva-factor: -1.15; } .snd-plano--cuatro .snd-plano__figura { --snd-deriva-factor: 2.4; } } } @keyframes snd-deriva { from { transform: translate3d( 0, calc(var(--snd-deriva) * var(--snd-deriva-factor, 1)), 0 ); } to { transform: translate3d( 0, calc(var(--snd-deriva) * var(--snd-deriva-factor, 1) * -1), 0 ); } } /* ========================================================================== 5. LA APERTURA, DEBAJO DEL HERO El bloque .nat-apertura entero se estiliza desde naturaleza.css y aquí casi no se toca. El aire entre el hero y él ya lo pone el margin-block-end de §1, y la capitular de naturaleza.css cuelga de `p:first-of-type`, que sigue siendo el mismo párrafo. LO ÚNICO PROPIO ES EL ENCUADRE DE LA FOTO NUEVA (v2). La fotografía del cliente (img/sendero/sendero-hero.jpg, retrato 2400×4268) lleva medio encuadre de cielo: el camino de pasto, los crotones y la sombra viven en la mitad BAJA del original. El `center 62%` que naturaleza.css le daba a la foto anterior en escritorio se queda corto aquí —dejaba media plancha de cielo—, así que se baja el foco al 74 % EN TODOS LOS ANCHOS, no sólo en escritorio: en móvil el marco retrato recorta menos, pero el centro geométrico sigue cayendo en el follaje y no en el camino. El prefijo .sendero acota la regla a esta sección y le da una clase más que a la de naturaleza.css, así que gana en cascada sin depender del orden de carga y sin !important. La deriva de paralaje de naturaleza.css (nat-deriva, height 118 %) no se toca: anima transform y convive con cualquier object-position. ========================================================================== */ .sendero .nat-apertura__principal .marco > picture > img { object-position: center; } /* Anula la animación de deriva que heredaría de naturaleza.css: la foto debe mostrarse entera sin recorte ni movimiento. */ .sendero .nat-apertura__principal .marco > picture > img { height: 100%; animation: none; transform: none; } /* v5 · LA PORTADA, MÁS CORTA EN LOS DOS MUNDOS (pedido del cliente: «crea una portada mas corta y mas elaborada por favor con esta foto de portada»). La foto es la MISMA; lo que cambia es cuánto alto de pantalla se le concede al marco que la recorta. EN MÓVIL el .marco--retrato de base.css la plantaba a 4/5: a 94vw de ancho son ~460px de foto, más insertos, antes de la primera línea de texto. Pasa a 4/3 —una banda apaisada— y el object-position del 74 % ya se encarga de que ese recorte caiga en el camino, los crotones y la sombra, no en la plancha de cielo. Medido en preview a 375px: la fotografía baja de 393px a 236px de alto — un 40 % menos de pulgar sólo en el marco grande. EN ESCRITORIO el alto no lo daba el aspect-ratio sino el `align-items: stretch` de naturaleza.css: la foto se estiraba hasta la altura de toda la columna de texto. Con `start` cada columna mide lo suyo y el marco cae a su min-height (--nat-alto-apertura, recortado en §0): la foto queda como una plancha ancha y baja arriba de su columna, con las solapas trabajando sobre ella, y deja de ser un muro vertical. */ @media (max-width: 61.99em) { .sendero .nat-apertura__principal .marco { aspect-ratio: 9 / 16; } } @media (min-width: 62em) { .sendero .nat-apertura { align-items: start; } .sendero .nat-apertura__principal, .sendero .nat-apertura__principal .marco { height: auto; } .sendero .nat-apertura__principal .marco { min-height: auto; aspect-ratio: 9 / 16; } } /* ========================================================================== 6. EL SOLAPE — la fotografía sube sobre la banda verde Es la mitad de abajo del gesto que empieza en §1: la banda del hero ya no termina en una línea recta contra la crema; la fotografía del camino monta sobre el verde en --snd-solape-banda y los dos bloques quedan COSIDOS, no apilados. Es el mismo recurso del inserto de guadua —una pieza que cruza una línea de la composición, una sola vez— llevado a la escala de la sección, y responde al pedido literal del cliente: que fotos y vídeos sean «una propuesta», no un hero y luego un layout. POR QUÉ FUNCIONA SIN z-index: la apertura va DESPUÉS del hero en el flujo, así que pinta encima de él por orden natural del documento. El overflow-x de la banda es `clip`, que sólo recorta el eje horizontal: nada corta a la foto que sube. Y el margen negativo va en __media, no en .nat-apertura, para que sólo la FOTOGRAFÍA cruce la frontera: el texto es de la parte de crema y ahí se queda. ========================================================================== */ .sendero .nat-apertura__media { margin-block-start: calc(var(--snd-solape-banda) * -1); /* v25 · Ya no hay inserto que se solape por la derecha: sin este reserva lateral la foto quedaba corrida a la izquierda en tablet vertical y móvil. */ padding-inline-end: 0; /* v26 · Foto vertical entera: tope de ancho en TODOS los anchos (en tablet vertical a ancho completo medía más que la pantalla) y centrada. */ width: min(100%, 26rem); margin-inline: auto; } @media (min-width: 62em) { /* La columna de texto arrancaba a hueso contra el canto de la banda (su aire de arriba era el margin del hero, que §1 puso a cero). Se le devuelve un respiro propio, menor que el solape: la entradilla cae ya en la crema, alineada con el tramo de foto que quedó sobre fondo claro. */ .sendero .nat-apertura__texto { padding-block-start: var(--esp-lg); } } /* v25 · LA FOTO GRANDE, CENTRADA EN LA PÁGINA (pedido del cliente: «muévela de la orilla y céntrala»). Antes sangraba por el canto izquierdo, con el texto a su derecha. Ahora es una sola columna: la foto centrada con margen a ambos lados y el texto debajo, a la misma medida. Sin sangrado ya no hay canto del navegador donde apoyar esquinas rectas, así que recupera la silueta de hoja completa (--nat-hoja-a) en sus cuatro esquinas. Sólo escritorio y tablet horizontal: en móvil la rejilla ya es de una columna con el margen de página. */ @media (min-width: 62em) { .sendero .nat-apertura { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-inline: var(--nat-margen); } .sendero .nat-apertura__media { width: min(100%, 26rem); } .sendero .nat-apertura__texto { width: min(100%, 52rem); } .sendero .nat-apertura__texto { padding-inline: 0; } .sendero .nat-apertura__principal .marco { border-radius: var(--nat-hoja-a); } } /* ========================================================================== 7. EL INSERTO DE VÍDEO — el quinto clip, dentro de la fotografía La otra mitad de la integración: un plano de metraje ASOMA dentro de la apertura de fotos, en la esquina baja del camino. Misma familia que el inserto de guadua —es el patrón que naturaleza.css §inset ya escribió: filete de crema, la sombra que dice «hay dos planos de verdad», silueta de hoja— pero en la ESQUINA CONTRARIA y con la diagonal opuesta, para que las dos solapas no queden calcadas. SÓLO EN ESCRITORIO. En móvil el carril del hero ya se arrastra a pantalla completa; un quinto clip encima de la foto roba alto y descarga un póster más en la conexión donde más duele. display:none aquí también evita la petición del vídeo: js/momentos-video.js sólo reproduce lo que entra en pantalla, y un elemento sin caja no entra nunca. EL PIE VA EN PASTILLA OPACA, no sobre el vídeo: texto sobre fotografía en movimiento no tiene contraste medible (la lección de la cartela, §2). Sobre la crema del fondo, el gris del .credito ya está auditado en base.css para AA. ========================================================================== */ .snd-clip-inset { display: none; } @media (min-width: 62em) { .snd-clip-inset { display: block; position: absolute; /* Pegado al canto IZQUIERDO de la foto a sangre —donde el encuadre tiene seto y sombra, no camino— y levantado del pie lo justo para que la pastilla del pie no pise el borde inferior del marco grande. */ inset-inline-start: var(--esp-lg); inset-block-end: calc(var(--nat-solape) * 2); width: min(30%, 10rem); margin: 0; } .snd-clip-inset__marco { aspect-ratio: 9 / 16; background-color: var(--color-superficie-oscura); /* El mismo filete y la misma sombra que el inserto de guadua: son la misma familia de solapas. La diagonal del radio es la contraria. */ border: var(--esp-3xs) solid var(--color-fondo); border-start-end-radius: var(--snd-hoja); border-end-start-radius: var(--snd-hoja); border-start-start-radius: var(--radio-xs); border-end-end-radius: var(--radio-xs); box-shadow: var(--sombra-lg); overflow: clip; } .snd-clip-inset__video { display: block; width: 100%; height: 100%; object-fit: cover; } /* v23 · LA PASTILLA DEL PIE, CON FORMA PROPIA. Era un rectángulo de crema a --radio-xs: la caja por defecto de cualquier framework. Toma la silueta de hoja de los controles (--radio-control-alterno, la diagonal contraria a la del marco que tiene encima), respira medio paso más y se apoya con la sombra corta del sistema. SIGUE SIENDO OPACA Y SIN DESENFOQUE, y eso NO es una omisión: esta pieza cuelga de un marco de vídeo, y el vidrio no se pone nunca sobre metraje —ni siquiera al lado, donde el desenfoque tomaría el fotograma de debajo al reencuadrarse la maqueta—. El vidrio vive en el papel. */ .snd-clip-inset__pie { display: inline-block; margin-block-start: var(--esp-2xs); padding: var(--esp-3xs) var(--esp-xs); background-color: var(--color-fondo); border: 1px solid var(--color-vidrio-borde); border-radius: var(--radio-control-alterno); box-shadow: var(--sombra-sm); } } /* ========================================================================== 8. EL DETALLE DE CROTONES — la misma foto citándose a sí misma (v5) La mitad «más elaborada» del pedido («crea una portada mas corta y mas elaborada por favor con esta foto de portada»): al acortar el marco grande (§5) el primer plano de los crotones se pierde en la banda, así que se RECUPERA en un inserto propio, recortado del mismo derivado -800 con object-position — cero archivos nuevos, cero peso nuevo relevante (el -800 se comparte con el srcset del marco grande). DÓNDE VA Y POR QUÉ: sobre la COSTURA entre la banda verde del hero y la fotografía. §6 ya subió la foto sobre el verde; esta solapa cruza esa frontera una segunda vez, en pequeño, y es lo que hace que hero y apertura se lean como UNA portada compuesta y no como banda + lámina. Es la tercera pieza de la familia de solapas (guadua abajo-derecha, vídeo abajo-izquierda sólo escritorio) y ocupa la esquina que quedaba libre: ARRIBA A LA IZQUIERDA. Arriba a la derecha chocaría con la caja de fauna (52 % del ancho derecho); a la izquierda cae sobre seto y sombra del encuadre grande, no sobre el camino que la foto tiene que enseñar. MISMO VOCABULARIO QUE SUS HERMANAS: filete de crema, --sombra-lg (hay dos planos de verdad), silueta de hoja en la diagonal que faltaba, y pie en pastilla opaca porque texto sobre fotografía no da contraste medible (lección de la cartela, §2). Motor de entrada: .reveal--velo, el mismo de todas las solapas — un motor por pieza. ========================================================================== */ .snd-detalle { position: absolute; /* v24 · DENTRO de la foto, no a caballo del canto: el cliente vio el marco cortado por arriba (sin borde ni esquina) en su tablet. Con un margen positivo no hay nada que sobresalga y por tanto nada que recortar. */ inset-block-start: var(--esp-sm); inset-inline-start: var(--esp-lg); width: min(34%, 10rem); margin: 0; } /* EN ESCRITORIO CAMBIA DE ESQUINA: arriba a la DERECHA. Con la foto acortada a 4/3, el inserto de vídeo (§7, abajo-izquierda) y este detalle quedaban apilados en la misma columna izquierda, casi tocándose — medido en preview a 1400px. Repartidos, cada solapa ocupa una esquina distinta del marco (detalle arriba-derecha, vídeo abajo-izquierda, guadua abajo-derecha colgando al hueco) y la portada se lee como composición, no como columna de estampas. La caja de fauna pasa POR DETRÁS (--z-fondo), así que compartir su zona no tapa nada. */ @media (min-width: 62em) { .snd-detalle { inset-inline-start: auto; inset-inline-end: var(--esp-lg); } } .snd-detalle__marco { border: var(--esp-3xs) solid var(--color-fondo); border-start-start-radius: var(--snd-hoja); border-end-end-radius: var(--snd-hoja); border-start-end-radius: var(--radio-xs); border-end-start-radius: var(--radio-xs); box-shadow: var(--sombra-lg); } /* El recorte del detalle: los crotones de hoja roja y amarilla viven en el tercio derecho, mitad baja del original 2400×4268. Con cover en un marco 1:1, este par de porcentajes centra el cogollo de color. */ .snd-detalle__marco > picture > img { object-position: 78% 72%; } /* v23 · La hermana de la pastilla anterior, con la MISMA corrección y la diagonal de hoja contraria (--radio-control), que es la del marco del detalle: pastilla y marco se leen como una sola pieza recortada. Opaca también: cuelga de una fotografía. */ .snd-detalle__pie { display: inline-block; margin-block-start: var(--esp-2xs); padding: var(--esp-3xs) var(--esp-xs); background-color: var(--color-fondo); border: 1px solid var(--color-vidrio-borde); border-radius: var(--radio-control); box-shadow: var(--sombra-sm); } /* SIN PIE EN ESCRITORIO, y es una medida, no un gusto: en la esquina derecha la pastilla del pie caía ~30px sobre el canto superior del inserto de guadua (medido en preview a 1100px). Sin pie, el marco del detalle termina con aire por encima de la guadua. El rótulo no se pierde: en móvil —donde el detalle vive solo en su esquina izquierda— la pastilla se queda; en escritorio el detalle es lo que es a la vista: la misma foto, más de cerca. Esta regla va DESPUÉS de la base de arriba a propósito: misma especificidad, gana por orden. */ @media (min-width: 62em) { .snd-detalle__pie { display: none; } } /* ========================================================================== 9. EL CAMINO EN CUATRO PASOS — el friso de fotos (v7) Cuatro fotografías verticales del recorrido, debajo de la apertura. Es el eco en foto del carril de vídeo de §3 y toma de él, a propósito, las tres decisiones que impiden que cuatro verticales en fila se lean como un muro de archivo: ALTURAS DESFASADAS (múltiplos distintos de --snd-desfase, y ninguno de los que usa el carril, para que el ritmo rime sin calcarse), SILUETA DE HOJA (dos esquinas abiertas, dos cerradas, alternando la diagonal foto a foto) y NADA REPETIDO. EN MÓVIL son dos columnas —a 375 px cuatro verticales en fila serían sellos— con la segunda columna colgando medio paso más abajo: la asimetría se conserva a escala. LA FOTO ES LA FOTO: ni velo, ni filtro, ni degradado. La sombra va DEBAJO del marco; el único gesto al pasar por encima es que la foto se acerca dentro de su recorte (el mismo de .marco--zoom en base.css). El pie va fuera de la foto, en el gris del .credito que base.css ya audita para AA sobre la crema. El disparador es un