/* JEFRA — yerba mate agroecológica. Tema «La Reserva Orgánica» (2026-08-31): verde monte casi negro, oro viejo y crema; títulos en versales con Bodoni Moda. ⚠ EL VERDE REEMPLAZÓ AL NEGRO CÁLIDO Y HAY QUE SABER LO QUE SE CAMBIÓ: el negro salía del material fotográfico —mármol negro con un solo foco cálido— y el verde monte es un negro TEÑIDO, no un verde: #05120B tiene un 4 % de luminancia y sobre él las fotos siguen apoyando igual. El oro viejo #C59B4B es el tono de la bombilla de las tomas, medido contra la foto, así que el acento y la luz de la escena son el mismo color. 1 · El oro es luz, no relleno: las superficies de oro son el botón del hero, el del formulario y el de la barra del teléfono. 2 · El verde respira: de 5,5 a 11 rem de aire por sección, casi un 25 % más que la plantilla. 3 · El oliva NO ES TEXTO NUNCA sobre el fondo oscuro: #5C634B da 3,04:1 contra el verde monte. Es borde, filo y detalle. Sobre crema sí puede ser texto (7,83:1). 4 · El celeste es un guiño y se usa DOS veces: la línea del cotejo y el anillo de foco. Contraste medido sobre #05120B — texto 18,51:1 · texto-2 14,34:1 · apagado 7,90:1 · oro viejo 7,44:1 · oro claro 10,87:1 · celeste 10,95:1; sobre `--surface-2` el peor caso es 6,19:1. Tinta sobre el oro: 6,95:1. Y en las secciones claras, sobre #FDFBF7 — texto 18,51:1 · texto-2 9,84:1 · oro oscuro 6,96:1 · oliva 7,83:1. */ :root{ /* ── EL FONDO: VERDE MONTE PROFUNDO ── Cuatro escalones del mismo verde, no cuatro grises: el subtono orgánico es lo único que separa a esta marca de cualquier página oscura. */ --bg: #05120B; --bg-2: #08160E; --surface: #0B1C13; --surface-2: #12261A; --line: rgba(253,251,247,.10); --line-strong: rgba(253,251,247,.19); /* ── EL TEXTO: CREMA PREMIUM / LINO CÁLIDO ── Nunca blanco puro: sobre un fondo oscuro el blanco irradia y engorda los finos de la didona. */ --text: #FDFBF7; --text-2: #E3DFD1; --muted: #A7A894; /* ── EL ACENTO: ORO VIEJO / BRONCE ATENUADO ── */ --accent: #C59B4B; --accent-2: #D8B268; --accent-deep: #8A6A2C; --on-accent: #0E1A11; /* tinta verde oscura sobre el oro: 6,95:1 */ --glow: rgba(197,155,75,.30); --glow-soft: rgba(197,155,75,.10); --oro: #DCC087; --oro-luz: #F0E3BE; --celeste: #A9C7E8; /* ── EL VERDE OLIVA SECO: bordes y detalles, nunca texto sobre oscuro (regla 3 de arriba) ── */ --oliva: #4A533C; --oliva-2: #5C634B; /* ── LA CREMA, para las secciones claras ── */ --crema: #FDFBF7; --crema-2: #F5F2EB; --crema-3: #EDE9DE; --vidrio: linear-gradient(165deg,rgba(253,251,247,.055),rgba(253,251,247,.018)); --vidrio-fuerte: linear-gradient(165deg,rgba(253,251,247,.10),rgba(253,251,247,.03)); --campo-bg: rgba(5,18,11,.55); /* ══ LA TIPOGRAFÍA ══ Bodoni Moda para los títulos y Figtree para todo lo demás; se fueron Fraunces —una serif que en versales pierde justo lo que la hacía interesante— y Karla, que le peleaba al titular. El titular va en peso 400 y nada más: el 500 y el 600 le engordan los finos a la didona, y sobre negro el texto claro ya se ve más gordo por irradiación. Subconjunto latino: 14,2 + 39,4 = 53,6 KB, contra 60,0 del par anterior. */ --display: 'Bodoni Moda','Bodoni respaldo',Georgia,'Times New Roman',serif; --serif: 'Bodoni Moda','Bodoni respaldo',Georgia,serif; --font: 'Figtree','Figtree respaldo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; /* ⚠ Los títulos bajan de cuerpo al pasar a versales, y no es una preferencia: la misma frase pinta un 12 % más de tinta y se LEE más grande de lo que mide. Medido a 1440, h1 de 87,8 a 73,6 px y h2 de 59,2 a 47,2. */ --fs-h1: clamp(2.15rem, 5.2vw, 4.6rem); --fs-h2: clamp(1.6rem, 3.5vw, 2.95rem); --fs-h3: clamp(1.35rem, 2.7vw, 2.2rem); /* El interletrado base de los títulos: las versales necesitan aire y con el tracking negativo de la plantilla se empastan. Cada tamaño lo pisa con el suyo más abajo. */ --tracking-h: .026em; --radius: 2px; --radius-pill: 2px; /* Más aire entre secciones que la plantilla: es la regla 2. */ --pad: clamp(1.25rem, 5vw, 5rem); --sh-depth: 0 10px 40px rgba(0,0,0,.75); --sh-lit: 0 0 30px rgba(197,155,75,.24); --sh-hover: 0 0 22px rgba(220,192,135,.50), 0 0 60px rgba(197,155,75,.26); --sh-suave: 0 2px 16px rgba(0,0,0,.7); --sombra-panel: 0 42px 90px -58px #000; --grano-op: .07; --vineta: radial-gradient(100% 88% at 50% 45%, transparent 58%, rgba(0,0,0,.55) 100%); } /* ══ LAS TIPOGRAFÍAS DE RESPALDO, CON LAS MÉTRICAS AJUSTADAS ══ Si el respaldo no mide lo mismo que la buena, con `display=swap` todos los títulos saltan a mitad del scroll y los disparadores quedan calculados sobre alturas viejas (en Dental 3D el respaldo estaba 17 % afuera). Acá el par eligió bien —medido el 2026-08-28: Bodoni contra Georgia, 2,0 %; Figtree contra Helvetica Neue, 1,0 %— y se declara igual, porque un 2 % en un titular de tres renglones es un renglón que se mueve. ⚠ `size-adjust` se aplica DESPUÉS de `ascent-override`: el ascent hay que dividirlo por el size-adjust o queda multiplicado dos veces. */ @font-face{ font-family:'Bodoni respaldo'; src:local('Georgia'); size-adjust:102.01%; ascent-override:110.28%; descent-override:39.21%; line-gap-override:0%; } /* ⚠ El segundo `local()` es Arial, para Windows: mide 0,3 % distinto de Helvetica Neue, o sea nada, y dos `@font-face` para lo mismo se desincronizan solos. */ @font-face{ font-family:'Figtree respaldo'; src:local('Helvetica Neue'), local('Arial'); size-adjust:99.05%; ascent-override:95.91%; descent-override:25.24%; line-gap-override:0%; } /* ── Que el negro respire ── */ .seccion{ padding-block:clamp(5.5rem,12vw,11rem) } .bg-static{ opacity:.75 } /* ⚠ La cuadrícula de la portada se apagó del todo el 2026-08-28 y el div se sacó del HTML; esto queda por si alguien lo vuelve a poner: una reja de líneas rectas encima de una toma de mate con humo es una textura peleando con otra. */ .hero__grid{ display:none } /* ⚠ El fondo de vetas se mide en el teléfono, no en la computadora: el radio de los anillos sale de `max(ancho,alto) * 0,055`, así que en 375×812 el más grande se sale de la pantalla y a la misma opacidad que en 1440 se lee como garabatos encima del titular. */ .fondo{ opacity:.40 } @media (max-width:760px){ .fondo{ opacity:.20 } } /* ══ EL CLIMA ══ Tres tintes fijos que se cruzan por opacidad mientras se baja: oro de foco arriba, dorado seco en el medio y verde-oliva apagado abajo. Sólo se anima `opacity` —`background`, `filter` o `background-position` repintan una capa del tamaño de la pantalla en CADA cuadro—, son manchones enormes y flojísimos (el más fuerte pinta al 7 %: si al bajar se NOTA que el fondo cambió, está mal) y no tapan nada, con `z-index:0` y sin `pointer-events`. El estado inicial lo pone el CSS y no el JS: si vivo.js no llega, queda el tinte de arriba en toda la página. */ /* La cortina ya se vio en esta sesión: la marca la pone el script del antes del primer pintado, así que no llega a verse un destello. */ .sin-cortina .cortina{ display:none } .clima{ position:fixed; inset:0; z-index:0; pointer-events:none } .clima__capa{ position:absolute; inset:0; display:block; pointer-events:none; opacity:0; will-change:opacity; } .clima__capa--1{ opacity:1; background: radial-gradient(120% 78% at 18% 8%, rgba(197,155,75,.07), transparent 62%), radial-gradient(90% 70% at 88% 34%, rgba(220,192,135,.045), transparent 66%); } .clima__capa--2{ background: radial-gradient(110% 80% at 76% 22%, rgba(220,192,135,.055), transparent 64%), radial-gradient(100% 76% at 12% 72%, rgba(138,106,44,.06), transparent 66%); } .clima__capa--3{ background: radial-gradient(120% 82% at 30% 84%, rgba(120,132,86,.055), transparent 64%), radial-gradient(90% 70% at 82% 12%, rgba(169,199,232,.028), transparent 68%); } /* En un teléfono la mitad, por lo mismo que `.fondo` va al 20 %: la pantalla es chica, el tinte ocupa proporcionalmente más y a la misma fuerza se lee como que la foto está mal balanceada. */ @media (max-width:760px){ .clima{ opacity:.5 } } /* Con «menos animación» pedido queda el primer tinte y nada se mueve; no se apaga entero porque el clima no es movimiento, es color. */ @media (prefers-reduced-motion:reduce){ .clima__capa{ transition:none } } /* ══ LOS TÍTULOS, EN VERSALES ══ No alcanza con `text-transform`: las mayúsculas se empastan sin aire y se desarman con demasiado, y el interletrado va AL REVÉS DEL TAMAÑO — h1 .022em, h2 .030em, h3 .046em, rótulos .06em. Y el peso baja a 400: en versales las mismas palabras ocupan un 12 % más de tinta y sobre negro se ven más gordas, así que un 600 no se lee como un titular de marca, se lee como un grito. */ .h1, .h2, .h3, .hero__title, .cortina__marca, .header__logo span, .footer__brand span{ font-family:var(--display); font-weight:400; text-transform:uppercase; } .h1{ letter-spacing:.022em; line-height:1.06 } .h2{ letter-spacing:.030em; line-height:1.10; max-width:20ch } .h3{ letter-spacing:.046em; line-height:1.16 } /* La palabra destacada. En versales una bastardilla es casi imperceptible, así que el destaque pasa a ser el COLOR, que es lo único que se lee de lejos; y sin bastardilla no hace falta bajar el archivo de la itálica: 16 KB menos. */ .h1 em, .h2 em, .h3 em, .hero__title em{ font-family:var(--display); font-style:normal; font-weight:400; letter-spacing:inherit; color:var(--oro); } /* El cuerpo grande de la sección quieta también es Bodoni, pero en minúscula: es un párrafo, no un título, y su `` va dorado y derecho por el mismo motivo. */ .lead--ancho em, .lead em{ font-family:var(--serif); font-style:normal; color:var(--oro); font-size:1em; } /* La marca en el encabezado, la cortina y el pie: «JEFRA» en versales con mucho aire y «yerba mate» chico, dorado y con más aire todavía, que es como se compone una firma. */ .cortina__marca em, .header__logo span em, .footer__brand span em{ font-family:var(--font); font-style:normal; font-weight:500; font-size:.52em; letter-spacing:.24em; color:var(--oro); } .cortina__marca, .header__logo span, .footer__brand span{ letter-spacing:.16em } /* El numeral del ambo: entra con máscara vertical (ver vivo.js). */ .eyebrow__n{ display:inline-block; color:var(--oro); font-weight:600; letter-spacing:.18em; } /* ══ EL TITULAR DE LA PORTADA ══ Entra palabra por palabra de izquierda a derecha, con un destello que pasa por encima; es el mecanismo que quedó bien en Dental 3D, con sus tres correcciones: arranca a los 1,68 s, cuando la cortina ya subió el 96 %, o las primeras palabras terminarían detrás del telón; el relleno es `backwards` y nunca `both`, que impondría su último cuadro para siempre y no dejaría hundir el titular al irse la portada; y la amplitud es casi igual para todas, porque lo que ordena el gesto es el RETARDO. */ .titulo-palabras{ --tp-a:1.68s; --tp-paso:.052s; /* ⚠ 17ch y no 14: en versales la misma frase ocupa más y la medida vieja partía el titular en cinco renglones. Con los renglones escritos en el HTML esto ya no decide dónde se corta, queda de red — el más largo mide 7,73 em y acá hay 10,5. */ max-width:17ch; /* ⚠ Se le saca el `text-wrap:balance` que `base.css` le pone a todo `.h1`: acá los renglones ya están repartidos a mano y lo único que podía hacer era volver a decidir el reparto tarde, cuando llega la tipografía. El valor es `wrap` y no `normal`, que no es válido para `text-wrap-mode` ni `text-wrap-style`: el navegador tira la declaración entera sin avisar y el `balance` sigue mandando (pasó acá mismo el 2026-08-30). */ text-wrap:wrap; } /* ⚠ El renglón es un bloque. Las palabras siguen siendo `inline-block` adentro, así que la entrada escalonada no cambia en nada; lo único distinto es que el corte lo decide el HTML y no una medición. */ .titulo-palabras .tp-l{ display:block } /* ⚠ Abajo de 360 px el titular baja un punto de cuerpo, y es para sostener los cuatro renglones: con 2,15rem en una pantalla de 320, «momentos.» se caía por un píxel a un quinto renglón. Medido con las dos tipografías; con este cuerpo sobra un 18 %. */ @media (max-width:360px){ .titulo-palabras{ font-size:clamp(1.85rem, 8.4vw, 2.15rem) } } .titulo-palabras .tp-w{ --z:calc(.958 - var(--w) * .0072); display:inline-block; opacity:1; animation:tpEntra .86s cubic-bezier(.22,.64,.26,1) backwards; animation-delay:calc(var(--tp-a) + var(--w) * var(--tp-paso)); } @keyframes tpEntra{ from{ opacity:0; transform:translate3d(0,.15em,0) scale(var(--z)) } to { opacity:1; transform:translate3d(0,0,0) scale(1) } } .titulo-palabras .tp-w > span, .titulo-palabras .tp-w > em{ position:relative; display:inline-block } .titulo-palabras .tp-w--oro > em{ color:var(--oro) } /* El destello: la misma palabra dibujada encima, que se apaga sola. Sobre negro ENCIENDE; en el tema crema anterior oscurecía, y copiarlo al revés habría dejado un destello negro sobre negro. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .titulo-palabras .tp-w > span::after, .titulo-palabras .tp-w > em::after{ content:attr(data-p); position:absolute; inset:0; white-space:nowrap; pointer-events:none; background:linear-gradient(180deg, #FDFBF7 0%, var(--oro-luz) 52%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; opacity:0; animation:tpLuz 1.15s ease-out backwards; animation-delay:calc(var(--tp-a) + var(--w) * var(--tp-paso)); } } @keyframes tpLuz{ 0%{ opacity:0 } 28%{ opacity:.85 } 100%{ opacity:0 } } @media (prefers-reduced-motion:reduce){ .titulo-palabras .tp-w{ animation:none } .titulo-palabras .tp-w > span::after, .titulo-palabras .tp-w > em::after{ animation:none } } /* ⚠ Sin cortina no se espera a la cortina (2026-08-29). Los 1,68 s de `--tp-a` están calculados contra el telón, pero la cortina se muestra UNA vez por sesión y en la segunda carga el titular se quedaba en blanco un segundo y medio sobre una portada ya despejada, empujando el LCP al segundo 2,5. La clase la escribe el mismo script que decide si hay cortina, antes del primer pintado. */ .sin-cortina .titulo-palabras{ --tp-a:.12s } /* ⚠ «ya» planta el titular, y es la corrección del «cambia de lugar dos veces»: una animación de CSS EN CURSO le gana a un estilo en línea, así que mientras `tpEntra` corre el tween escribe transforms que no se aplican y al terminar el elemento SALTA a donde GSAP lo había dejado. `despedirTitular` pone la clase apenas la salida empieza a correr de verdad, y de ahí en más manda GSAP. */ .titulo-palabras.ya .tp-w{ animation:none; opacity:1; transform:none } .titulo-palabras.ya .tp-w > span::after, .titulo-palabras.ya .tp-w > em::after{ animation:none; opacity:0 } /* ══ LOS TÍTULOS DE SECCIÓN — UN SOLO SISTEMA ══ Acá había cuatro animaciones sobre el mismo h2 y por eso se trababan (2026-08-29): `split-lines` subía las palabras, el `data-inout` que le agregaba el `data-io="1"` del convertía esa subida en una línea de tiempo atada al scroll que además las hundía al irse la sección, `reflejo` volvía a partir letra por letra, y `data-desenfoque` animaba un `filter` contra la regla 7. Queda UNO: entran por palabras desde abajo de un filo, una sola vez, y después se limpian (el detalle está en `titulosEntran`). El `overflow:hidden` ES el efecto — es el filo contra el que la palabra se descubre. */ .entra{ overflow:hidden } /* La palabra no se parte al subir: viaja entera o no viaja. */ .entra .tw{ white-space:nowrap } /* ══ LA BANDA DE VIDEO DE LA PORTADA ══ Va debajo del bloque de texto, a todo el ancho, y el movimiento lo maneja el motor con el scroll igual que cualquier `.banda`. El degradado no es decoración: un video de producto cambia de luminancia cuadro a cuadro, así que fija el piso —55 % arriba, 90 % abajo— y el contraste deja de depender del cuadro que toque. En el teléfono no se baja: ver el comentario del HTML. */ /* El video es el FONDO de toda la portada: llena la sección y el texto va encima con su z-index. */ .banda--video{ position:absolute; inset:0; z-index:0; height:auto; width:auto; margin:0; } /* ⚠ 112 % Y NO 124 % (2026-08-31). El sobrante existe para que el parallax tenga de dónde correrse, y `data-parallax="48"` mueve 48 px: con 124 % sobraban 216 px, o sea que se estaba tirando el 10 % de arriba y el 10 % de abajo del cuadro para nada. Y lo de abajo es justo donde el mate tiene grabada la marca JEFRA. Con 112 % sobran 108 px —más del doble de lo que el parallax necesita— y la marca entra. Es la mitad de la corrección del «tiene mucho zoom»; la otra mitad es el `data-zoom` del HTML, que bajó de 1.12 a 1.04. */ .banda--video video, .banda--video img{ position:absolute; left:0; top:-6%; width:100%; height:112%; object-fit:cover; object-position:center; display:block; will-change:transform; } /* La capa que va entre el video y el texto. En la computadora NO PINTA NADA: existe sólo porque el teléfono sí necesita una banda, y está declarada acá para que el orden de las reglas sea uno solo. El porqué está abajo, en el bloque de la máscara. */ .banda--video::after{ content:''; position:absolute; inset:0; pointer-events:none; /* ⚠ LO ÚNICO QUE SE PINTA ARRIBA, Y ES POR EL LOGO. Desde que la máscara dejó de ser una pared, la esquina de arriba a la izquierda es foto clara, y ahí viven «JEFRA yerba mate» y el menú, los dos en crema: medidos quedaban lavados. Es una banda de 15 % de alto que se apaga del todo antes del titular, o sea que no toca al mate ni al humo. Sin ella el logo da 1,9:1. */ background:linear-gradient(180deg, rgba(5,18,11,.62) 0%, rgba(5,18,11,.30) 7%, rgba(5,18,11,0) 15%); } /* ⚠ LA FRANJA DE ABAJO, 13 % Y NO 22 %. Es lo único que se pinta encima de la foto, y no es decoración: sin ella se ve el corte recto donde termina la portada y arranca la sección siguiente. Bajó de 22 % el 2026-09-01 porque el mate tiene la marca JEFRA tallada entre el 75 % y el 86 % del alto de la portada, y una franja de 22 % arranca en el 78 %: le comía el nombre justo por la mitad. Con 13 % arranca en el 87 % y la marca queda entera y afuera. Es el mínimo que todavía funde sin que se vea el borde. */ .banda--video::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:13%; z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent, var(--bg)); } /* ══ EL BLOQUE QUIETO ══ Tres pasos, sin un solo efecto propio más allá de la entrada de la sección: es lo primero que se lee y lo único que tiene que entender alguien que no scrollea. */ .lead--ancho{ max-width:36ch; font-family:var(--serif); font-size:clamp(1.35rem,3vw,2.25rem); line-height:1.36; color:var(--text); } /* ⚠ Dos renglones en la computadora, y la medida es lo que lo garantiza: los 62ch son los caracteres que entran en un renglón con esta serif a este cuerpo, medidos, y el texto tiene 118. Si alguien le agrega media frase pasa a tres, así que antes de tocar una palabra hay que contar los caracteres. Abajo de 860 vuelve a ser libre: dos renglones en 375 px a cuerpo de titular serían ilegibles. */ .lead--dos{ max-width:62ch } @media (max-width:860px){ .lead--dos{ max-width:none } } /* ⚠ La marca, la primera vez que se nombra en el cuerpo: es el mismo destello del titular de la portada, así que se lee como la misma marca y no como otro efecto más. Pasa una vez y no vuelve —`backwards` y no `both`, que impondría su último cuadro para siempre— y el color de base no depende del destello: la palabra es oro plano, y si el navegador no soporta `background-clip:text` queda en oro, que era el pedido. */ .marca-oro{ position:relative; display:inline-block; font-weight:400; color:var(--oro); text-transform:uppercase; letter-spacing:.055em; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .marca-oro::after{ content:attr(data-p); position:absolute; inset:0; white-space:nowrap; pointer-events:none; background:linear-gradient(180deg, #FDFBF7 0%, var(--oro-luz) 52%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; opacity:0; } /* La clase la pone vivo.js cuando el párrafo entra en pantalla: el destello tiene que pasar cuando alguien lo está mirando, no tres pantallas más abajo. */ .marca-oro.brilla::after{ animation:marcaLuz 1.25s ease-out backwards } } @keyframes marcaLuz{ 0%{ opacity:0 } 30%{ opacity:.9 } 100%{ opacity:0 } } @media (prefers-reduced-motion:reduce){ .marca-oro.brilla::after{ animation:none } } .simple__pasos{ display:grid; gap:clamp(1.6rem,3.4vw,2.8rem); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:clamp(2.4rem,5vw,4rem); } /* ⚠ Cada cartel se presenta solo y lo hace el CSS (2026-08-30): `unaAUna` pone `.turnos` en el contenedor y después `.entro` en cada cartel, y la raya, el número, el título y el párrafo son transiciones de `transform` y `opacity` encadenadas con `transition-delay`. Que lo haga el CSS no es una preferencia: un tween de GSAP deja una matriz en línea aunque termine, y una matriz encima de algo que gira en 3D aplasta el subárbol — es el defecto de las tarjetas de la sección siguiente. Sin JS no llega `.turnos`, nada se esconde y los tres carteles se ven quietos. (Acá había un `preserve-3d` y tres `translateZ` huérfanos del `data-tilt`, que sin rotación no movían nada.) */ .simple__paso{ position:relative; padding-top:1.1rem; border-top:1px solid var(--line); } /* La raya de oro se traza encima de la gris con `scaleX` sobre una barra de 1 px: no se anima `width` ni un borde, que es la regla 7. */ .simple__paso::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--accent); transform-origin:0 50%; } .simple__pasos.turnos .simple__paso::before{ transition:transform .62s var(--ease-mat); } .simple__paso.entro::before{ transform:scaleX(1) } .simple__n{ display:block; font-family:var(--display); font-weight:400; font-size:1.05rem; letter-spacing:.1em; color:var(--accent); margin-bottom:.7rem; } /* ⚠ El título sube desde atrás de la raya, y por eso el `` existe en el HTML: el `overflow:hidden` va en el h3 y lo que se mueve es el hijo, porque recortar el propio elemento que se traslada es lo mismo que no recortar nada. */ .simple__paso h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.2rem,2.2vw,1.55rem); margin:0 0 .5rem; letter-spacing:.055em; overflow:hidden; } .simple__paso h3 > span{ display:block } .simple__paso p{ margin:0; color:var(--text-2); font-size:1rem; line-height:1.62; } /* El estado de partida sólo existe cuando el JS dijo que hay turnos. */ .simple__pasos.turnos .simple__n{ opacity:0; transform:translate3d(0,-10px,0) } .simple__pasos.turnos .simple__paso h3 > span{ opacity:0; transform:translate3d(0,110%,0) } .simple__pasos.turnos .simple__paso p{ opacity:0; transform:translate3d(0,12px,0) } /* Los cuatro tiempos —raya 0, número .24, título .34, párrafo .72—: el párrafo arranca tarde a propósito, porque el título sube desde ATRÁS de un filo y no se ve hasta que está casi arriba, y con el párrafo a los 0,50 s se leía el texto chico con el título todavía en blanco. */ .simple__pasos.turnos .simple__paso.entro .simple__n{ opacity:1; transform:none; transition:opacity .46s var(--ease) .24s, transform .55s var(--ease-mat) .24s; } .simple__pasos.turnos .simple__paso.entro h3 > span{ opacity:1; transform:none; transition:opacity .34s var(--ease) .34s, transform .55s var(--ease-mat) .34s; } .simple__pasos.turnos .simple__paso.entro p{ opacity:1; transform:none; transition:opacity .5s var(--ease) .72s, transform .58s var(--ease-mat) .72s; } @media (prefers-reduced-motion:reduce){ .simple__pasos.turnos .simple__n, .simple__pasos.turnos .simple__paso h3 > span, .simple__pasos.turnos .simple__paso p{ opacity:1; transform:none } .simple__paso::before{ transform:scaleX(1) } } /* ══ LAS TRES COSAS QUE LA HACEN DISTINTA ══ */ /* ⚠ Tres columnas fijas, nunca «2 + 1» (2026-08-30). Con `auto-fit` y `minmax(268px,1fr)`, abajo de 960 px ya no entraban tres y el navegador ponía DOS ARRIBA Y LA TERCERA SOLA ABAJO — ni fila ni columna, una fila coja con un hueco al lado. Con `repeat(3, minmax(0,1fr))` se achican juntas y se apilan las tres de una vez; medido a 780 px: tarjetas de 216 px, ningún título desbordado. Es el mismo corte y la misma receta de los blends y la historia. Y el aire subió de 22-35 px a 26-51: pegadas se leen como un bloque de tres franjas, separadas como tres cosas. */ .distinta__grid{ display:grid; gap:clamp(1.6rem,3.4vw,3.2rem); grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:clamp(2rem,4vw,3.2rem); } @media (max-width:820px){ .distinta__grid{ grid-template-columns:1fr } } /* ⚠ La tarjeta ya no es la caja: es el escenario. Las dos caras ocupan la MISMA celda de una grilla de una sola celda, así que la tarjeta mide lo que mide la cara más alta —con el dorso en `position:absolute` quedaría atado al alto del frente y un texto una línea más largo se saldría sin avisar— y las tres de la fila siguen midiendo lo mismo. La `perspective` va acá y la rotación en el hijo: `data-tilt` escribe rotationX/rotationY sobre este elemento, y dos transforms en el mismo lugar los gana el último, que es azar. */ .distinta__caja{ position:relative; display:block; perspective:1400px; background:none; border:0; padding:0; box-shadow:none; } .distinta__giro{ display:grid; height:100% } /* ⚠ Acá estaba el bug de «la imagen se corta al girar» (2026-08-29), y la causa vale para cualquier tarjeta que gire con una foto adentro: el `overflow:hidden` de la foto y el `will-change` de la fuerzan a rasterizar ese subárbol en su propia capa, y una capa hija NO hereda la matriz 3D del ancestro — se dibuja plana y recortada contra el rectángulo que tenía ANTES de girar (sin un error en la consola, y nunca en una tarjeta sin imagen). La solución no es sacar el `overflow` ni el `will-change`: es NO ANIDAR contextos 3D, así que cada cara gira por su cuenta media vuelta con la perspectiva puesta en la tarjeta. Las dos siguen en la misma celda (`grid-area:1/1`) y ninguna es `absolute`, y `backface-visibility` va en el CSS porque sin JS la tarjeta no gira y el dorso tiene que quedar escondido igual. */ .distinta__cara{ grid-area:1 / 1; display:flex; flex-direction:column; padding:clamp(1.4rem,2.4vw,2rem); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--sombra-panel); backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:rotateY(0deg); } .distinta__cara--dorso{ transform:rotateY(180deg) } .distinta__caja.volteada .distinta__cara{ transform:rotateY(-180deg) } .distinta__caja.volteada .distinta__cara--dorso{ transform:rotateY(0deg) } /* ⚠ Acá estaba «las imágenes se tapan entre sí y no se lee el texto» (2026-08-30): la tarjeta entraba con un tween que le escribía `perspective(900px) … rotateX(-34deg)` en línea y el turno de las vueltas arrancaba encima, y un ancestro con matriz 3D y `transform-style:flat` APLASTA el subárbol, así que `backface-visibility` deja de ser confiable y el dorso se dibuja espejado encima del frente. Se arregló del lado del JS —la entrada ya no escribe transforms y el turno espera a que entren las tres— y acá va el cinturón: la cara que no toca se apaga con `opacity`, de golpe a mitad de la vuelta, cuando las dos están de canto. Con `opacity` y no con `visibility:hidden`, que sacaría el dorso del árbol de accesibilidad, y el dorso es la mitad del texto de la sección. */ .distinta__cara{ opacity:1; transition:transform .95s var(--ease-mat), opacity 0s linear .475s; } .distinta__cara--dorso{ opacity:0 } .distinta__caja.volteada .distinta__cara{ opacity:0 } .distinta__caja.volteada .distinta__cara--dorso{ opacity:1 } /* ⚠ La entrada de las tres tarjetas también es CSS y sin nada de 3D: `unaAUna` pone `.turnos` y después `.entro`, y el movimiento lo hace una transición, así que al terminar el `transform` vuelve a `none` de verdad y no queda un ancestro con matriz encima de algo que gira. */ .distinta__grid.turnos .distinta__caja{ opacity:0; transform:translate3d(0,26px,0); } .distinta__grid.turnos .distinta__caja.entro{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .9s var(--ease-mat); } @media (prefers-reduced-motion:reduce){ .distinta__grid.turnos .distinta__caja{ opacity:1; transform:none } } /* El dorso va un punto más cálido que el frente: al girar tiene que notarse que es OTRA cara y no la misma con otro texto. */ .distinta__cara--dorso{ background:var(--surface-2); border-color:var(--line-strong) } .distinta__cara--dorso h3{ color:var(--oro) } /* ⚠ Sin JavaScript la tarjeta no gira nunca y el dorso queda escondido detrás del frente para siempre, y está bien: el frente dice lo que tiene que decir solo. Lo que NO puede pasar es que el dorso quede a la vista de costado, y por eso `backface-visibility` está en el CSS. */ /* ⚠ «GIRÁ», Y ES INFORMACIÓN, NO ADORNO (2026-09-05, lo pidió Jope). La mitad del texto de esta sección vive en el dorso de las tarjetas, y hasta hoy la única forma de enterarse era esperar a que a esa tarjeta le tocara el turno de darse vuelta sola. El que pasa scrolleando no espera. Con la chapita, el dorso deja de ser un premio para el que se queda y pasa a ser algo que se puede pedir. Va sólo en la cara de frente: en el dorso diría que hay un tercer lado. Y se apaga mientras la tarjeta está dada vuelta, que es cuando ya no hay nada que avisar. */ .distinta__vuelta{ position:absolute; top:clamp(1.4rem,2.4vw,2rem); right:clamp(1.4rem,2.4vw,2rem); display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .5rem .22rem .42rem; border-radius:var(--radius); border:1px solid var(--line); color:var(--muted); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; transition:opacity .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .distinta__caja.volteada .distinta__vuelta{ opacity:0 } @media (hover:hover){ .distinta__caja:hover .distinta__vuelta{ color:var(--accent); border-color:var(--accent) } } .distinta__n{ font-family:var(--display); font-weight:400; font-size:.95rem; color:var(--accent); letter-spacing:.14em; } .distinta__caja h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.35rem,2.7vw,1.9rem); margin:.55rem 0 .7rem; letter-spacing:.046em; } .distinta__caja p{ margin:0 0 1.4rem; color:var(--text-2); line-height:1.62 } /* ⚠ La foto sobresale un 14 % para que el parallax tenga de dónde correrse: con la imagen al 100 % del alto, moverla un 7 % deja a la vista una franja del fondo de la tarjeta. Es la misma cuenta que hace `.banda` en la plantilla. */ /* ⚠⚠ LA FOTO YA NO CRECE, Y ES EL ARREGLO DEL 2026-08-31. Hasta hoy tenía `flex:1 1 auto` para tapar el pozo negro que dejaba la cara más corta —las dos caras comparten celda y la tarjeta mide lo que mide el dorso, que explica más largo—. El precio era que la foto se estiraba fuera de su proporción y `object-fit:cover` le comía los costados: las tres empezaban a distinta altura, ninguna se veía entera y la de la tarjeta 2 llegaba a medir 70 px más que la de la 1. Eso es lo que Jope vio como «se superponen y no se lee». El pozo se tapa por el otro lado: la foto queda en su 3:2 y se va al PIE de la cara con `margin-top:auto`, así que el aire sobrante cae entre el párrafo y la hairline —que es justo donde tiene que estar— y las tres fotos apoyan en la misma línea sin reservar renglones. */ .distinta__foto{ margin:1.3rem 0 0; overflow:hidden; border-radius:var(--radius); aspect-ratio:3/2; min-height:132px; flex:0 0 auto; margin-top:auto; position:relative; } /* ⚠ La foto del dorso es la misma y no se mueve: sin `data-parallax-foto` no la toca nadie y se queda en el mismo -7 %, y por eso al girar se lee como que la tarjeta giró y no como que apareció otra tarjeta con la misma foto. */ .distinta__cara--dorso .distinta__foto{ opacity:.72 } /* ⚠ EL SOBRANTE ES 7 %, NO 14, Y ES UNA CUENTA: `data-parallax-foto="7"` corre la imagen entre -3,5 % y +3,5 % de su propio alto, así que con 7 % de más cada lado tiene 3,5 % y le gana justo al recorrido. Con 14 % se recortaba el doble de lo necesario — en una foto de una hoja entera, eso es la punta de la hoja. */ .distinta__foto img{ position:absolute; left:0; top:-3.5%; width:100%; height:107%; object-fit:cover; display:block; } /* ⚠ El `will-change` sólo en las tres que se mueven de verdad: estaba en las seis, y las tres del dorso eran tres capas de compositor promovidas para siempre a cambio de nada — en una página con 22 imágenes eso se paga en memoria de video. */ .distinta__foto img[data-parallax-foto]{ will-change:transform } /* ══ LAS CINCO MOLIENDAS — EL RIEL ══ La pista mide cinco pantallas y el marco queda pinchado adentro: eso convierte el scroll en el control del grano, y sin `position:sticky` no existe — por eso la regla dos del proyecto es la que sostiene la sección. Las cinco fotos están SIEMPRE en el mismo lugar del documento y lo único que cambia es su `transform`: vivo.js escribe `--dx`, `--sc` y `--ry` más la opacidad, cinco veces en toda la sección y nunca por cuadro, y el `transform` que las usa está armado acá — la custom property no se interpola sola, pero el transform que la usa sí, y la transición hace todo el movimiento. */ /* ⚠ El título de esta sección va en dos renglones y necesita más medida que los otros (2026-08-30): «Una para cada mate.» mide 586 px contra los 585 de la medida general de los `.h2`, y por seis píxeles el PUNTO FINAL se caía solo a un tercer renglón. Se arregló por los dos lados —el punto entró adentro del `` y la medida subió a 23ch, que deja un 10 % de aire—; los otros ocho títulos no se tocan. */ .moliendas .h2{ max-width:23ch } /* ⚠ LA ALTURA DE LA PISTA SE REPARTE ENTRE LAS MOLIENDAS, ASÍ QUE CAMBIA CUANDO CAMBIA CUÁNTAS SON. Eran cinco con 460vh —una pantalla para la primera y noventa por cada una que sigue—. Al pasar a cuatro (2026-09-04, la extrafina salió del catálogo) quedarían 115vh por molienda en vez de 92: el mismo scroll para un producto menos, o sea cada paso un 25 % más lento. No se nota como «hay una menos», se nota como que la sección se hizo pesada. 368vh mantiene el ritmo que tenía. */ .moliendas__pista{ height:368vh; position:relative } .moliendas__marco{ position:sticky; top:0; min-height:100svh; display:grid; align-content:center; justify-items:center; gap:clamp(1.2rem,2.6vh,2rem); max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,6vh,4rem) var(--pad); } /* ⚠ El riel recorta a propósito: las dos fotos de los costados salen por el borde y se cortan, que es lo que dice «esto sigue para allá» — enteras se leerían como tres fotos puestas en fila. Y el `overflow:hidden` va acá y no más arriba: en `html` o `body` rompería el `sticky` del marco, que es la regla dos. */ .moliendas__riel{ position:relative; width:100%; aspect-ratio:16/10; max-height:60svh; overflow:hidden; perspective:1600px; --lupa-x:0%; --lupa-y:0%; } /* ⚠ Las cinco están cargadas desde el principio y apiladas en el mismo punto, y lo único que las separa es el `--dx`: al cambiar el `src` de una sola imagen, el navegador tira el fotograma que estaba pintando y deja el hueco en blanco hasta decodificar el nuevo, que en medio de un scroll es un parpadeo. */ .moliendas__foto{ --dx:0%; --sc:1; --ry:0deg; position:absolute; left:50%; top:50%; width:min(62%, 640px); aspect-ratio:4/3; object-fit:cover; display:block; border-radius:var(--radius); border:1px solid var(--line-strong); box-shadow:var(--sombra-panel); transform-origin:50% 50%; transform:translate(-50%,-50%) translateX(var(--dx)) scale(var(--sc)) rotateY(var(--ry)); opacity:0; transition:transform .82s var(--ease-mat), opacity .6s var(--ease-mat); will-change:transform, opacity; } /* El estado por omisión, para el que llega sin JavaScript: la primera al frente y las otras cuatro escondidas detrás, con la sección quieta y entera. */ .moliendas__foto.es-la{ opacity:1 } /* ⚠ El contador es la única pieza que no se mueve, y por eso se lee: cinco rayas, y la que toca se estira y se enciende. Es lo que dice «vas por la tercera de cinco» sin escribirlo, y lo que reemplaza al bulto del mazo viejo. */ .moliendas__marcas{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; align-items:center; } .moliendas__marcas li{ width:26px; height:2px; border-radius:2px; background:var(--line-strong); transform-origin:50% 50%; transition:transform .5s var(--ease-mat), background-color .5s var(--ease); } .moliendas__marcas li.es-la{ background:var(--accent); transform:scaleX(1.9); } /* ⚠ Los cinco textos están apilados en la misma celda y el bloque mide siempre lo mismo: con `max-height` transicionado, cada cambio de paso cambiaba el alto y movía lo que hay abajo — cinco saltos de layout en la parte más scrolleada de la página. Y no se escribe `textContent` al cambiar de paso: los cinco están en el HTML desde el principio, los lee Google y los lee un lector de pantalla, y lo único que cambia es la opacidad. */ .moliendas__lista{ list-style:none; margin:0; padding:0; display:grid; width:100%; max-width:56ch; text-align:center; } .moliendas__paso{ grid-area:1 / 1; opacity:0; pointer-events:none; transform:translate3d(0,10px,0); transition:opacity .45s var(--ease), transform .55s var(--ease-mat); } .moliendas__paso.es-la{ opacity:1; transform:none; pointer-events:auto } .moliendas__paso b{ display:block; font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(1.9rem,5.2vw,3.4rem); line-height:1.05; color:var(--text); } .moliendas__paso span{ display:block; margin-top:.7rem; color:var(--text-2); font-size:clamp(.95rem,1.5vw,1.05rem); line-height:1.6; } @media (max-width:820px){ .moliendas__pista{ height:320vh } /* mismo cálculo: 400 × 4/5 */ .moliendas__riel{ aspect-ratio:5/4; max-height:46svh } .moliendas__foto{ width:min(74%, 420px) } } @media (prefers-reduced-motion:reduce){ .moliendas__foto{ transition:none } .moliendas__paso{ transition:none } .moliendas__marcas li{ transition:none } } /* ══ ACÁ VIVÍA «FINA NO ES POLVORIENTA» ══ Se fue entera el 2026-08-31 con su sección: las dos columnas, la línea del medio, el remate que crecía y las letras que llegaban desparejas. Son 3,5 KB de CSS que ya no pintan nada. Lo único que sobrevive de esa sección es el celeste, que era la línea del cotejo y ahora se usa una sola vez —el anillo de foco—, así que la regla 4 de la cabecera pasó a valer para UN uso y no dos. */ /* ══ LOS BLENDS ══ La sección está a medio cargar a propósito: no tenemos los nombres, así que el