/* FIBRA: escenas fijadas de la portada (EXPERIENCIA 3.1, 3.3, 3.5 y el tejido corto del cierre 3.11). Cada regla vive dentro de su escena ([data-escena]); lo único de afuera es el logo de la cabecera mientras vuela el de la entrada. Contrato de clases (las pone assets/js/escenas.js; sitio.js pone las de en ): - html.entrada-activa / html.entrada-vista: la entrada está en curso / ya se vio en la sesión. - html.entrada-js: el tejido lo maneja JS (apaga el respaldo CSS de la entrada). - html.entrada-vuelo: mientras vuela el logo, el de la cabecera espera. - .balanza--viva, .carne--viva: modo completo (escena sticky). Sin esas clases la escena es la versión estática del modo calmo, que es también lo que se ve sin JS. - .es-visible, .es-dentro, .es-citada, .es-forma: revelados y umbrales. - .cierre--tejiendo / .cierre--tejido: el tejido corto del logo del cierre. Rendimiento (regla dura): solo se animan transform, opacity, clip-path y stroke-dashoffset. Nada de filter, mix-blend-mode ni backdrop-filter. Ninguna transición de CSS sobre una propiedad que escribe JS en cada cuadro. */ /* ================================================================ 3.1 ENTRADA: el logo se teje ================================================================ */ .entrada { position: fixed; inset: 0; z-index: 90; --cuna: calc(50vw * 0.14054); /* tan(8°): el corte a -8° cruza la pantalla */ } html.entrada-vista .entrada { display: none; } .entrada[hidden] { display: none; } /* Mientras se teje (E1), lo que está debajo del hero no se arma: sin su estilo ni su layout, el primer cuadro y el tejido no compiten con toda la portada. La entrada tapa la pantalla y el hero ocupa toda la altura, así que no se ve nada distinto. escenas.js las arma de a una (data-armada) mientras el Worker teje o al cruce, y al final pone html.entrada-pagina (sitio.js a los 6 s, como red de seguridad). */ html.entrada-activa:not(.entrada-pagina) .portada > section:not(.entrada):not(.heroe):not([data-armada]), html.entrada-activa:not(.entrada-pagina) .pie { display: none; } .entrada__velo { position: absolute; inset: 0; background: var(--noche); } .entrada__velo--arriba { clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--cuna) + 1px), 0 calc(50% + var(--cuna) + 1px)); } .entrada__velo--abajo { clip-path: polygon(0 calc(50% + var(--cuna) - 1px), 100% calc(50% - var(--cuna) - 1px), 100% 100%, 0 100%); } /* la línea del corte: una fibra que se tensa de izquierda a derecha a -8° antes de que la sala se abra por ahí (escenas.js la tiende con translate + scaleX: el extremo izquierdo queda fijo) */ .entrada__corte { position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; margin-top: -1px; transform: rotate(-8deg); pointer-events: none; opacity: 0; } .entrada__corte::before { content: ""; position: absolute; inset: 0; background: var(--fibra-brillo); } /* hebras que entran desde abajo a la izquierda por la pendiente de la estela (solo modo completo) */ .entrada__guia { position: absolute; left: 0; top: 0; width: 46vw; height: 1px; background: linear-gradient(90deg, rgb(176 38 34 / 0), var(--fibra-brillo) 70%, rgb(176 38 34 / 0)); opacity: 0; transform-origin: 0 50%; pointer-events: none; } .entrada__marco { position: absolute; inset: 0; display: grid; place-items: center; } .entrada__logo { position: relative; width: min(90vw, 880px, calc(var(--pantalla) * 0.62 * 1.4288)); aspect-ratio: 3812 / 2668; /* el viewBox de hebras.json y de los WebP */ transform-origin: 0 0; } /* El del logo (tope de 1200w en pantallas angostas) no arma caja: la imagen se ubica igual que antes. */ .logo-picture { display: contents; } .entrada__lienzo, .entrada__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* el lienzo se recorta a la silueta del logo en el compositor (HOJA-LOGO: las puntas de corte llegan justo al borde de cada letra) */ .entrada__lienzo, .cierre__lienzo { -webkit-mask: url("../img/logo/fibra-silueta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/logo/fibra-silueta.svg") 0 0 / 100% 100% no-repeat; } .entrada__img { opacity: 0; } .entrada__mascara { position: absolute; top: -20%; bottom: -20%; left: -12%; width: 140%; background: var(--noche); transform: translateX(0) skewX(-8deg); pointer-events: none; } /* Respaldo CSS (sin JS, o con el hilo ocupado cuando tocaba empezar): la máscara diagonal revela el logo y la capa se va sola. Todo en el compositor (transform y opacity). */ html:not(.entrada-js) .entrada__img { opacity: 1; } /* 1,5 s de margen antes de revelar: en un celular de gama media el JS del tejido llega más tarde que 0,9 s y el respaldo se quedaba con la entrada en 6 de 6 cargas (escenas.js: DEMORA_RESPALDO). */ html:not(.entrada-js) .entrada__mascara { animation: entrada-mascara 800ms var(--ease-salida) 1500ms both; } html:not(.entrada-js) .entrada { animation: entrada-irse 450ms var(--ease-suave) 2750ms both; } html.calmo:not(.entrada-js) .entrada__mascara { animation: entrada-mascara-calma 400ms ease-out 300ms both; } html.calmo:not(.entrada-js) .entrada { animation: entrada-irse 400ms ease-out 1300ms both; } @keyframes entrada-mascara { from { transform: translateX(0) skewX(-8deg); } to { transform: translateX(105%) skewX(-8deg); } } @keyframes entrada-mascara-calma { from { opacity: 1; } to { opacity: 0; } } @keyframes entrada-irse { to { opacity: 0; visibility: hidden; } } html.entrada-js .entrada__mascara { display: none; } /* mientras vuela el logo de la entrada, el de la cabecera espera su lugar */ html.entrada-vuelo [data-logo-cabecera] { opacity: 0; } /* ================================================================ 3.3 LA BALANZA MIENTE ================================================================ */ .balanza { position: relative; overflow-x: clip; /* los halos de la figura no empujan el ancho (clip no rompe el sticky) */ color: var(--hueso); /* grosores de las fibras en unidades del viewBox (la figura cambia de tamaño) */ --g-contorno: 0.6; --g-base: 0.95; --g-tension: 1; --g-engrosa: 1.3; --hebra-1: #620305; --hebra-2: #720607; --hebra-3: #7A0A0A; --hebra-4: #850909; --hebra-5: #9A0F0E; } .balanza__escenario { position: relative; width: var(--ancho-seguro); margin-inline: auto; display: grid; gap: var(--e-6); } /* luz lateral roja horneada en el fondo del escenario (un degradé fijo: se pinta una vez) */ .balanza__escenario::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--margen-seguro)); background: radial-gradient(60% 55% at 62% 48%, rgb(61 3 4 / 0.55), rgb(61 3 4 / 0) 70%); pointer-events: none; z-index: 0; } .balanza__escenario > *, .balanza__cabeza > * { position: relative; z-index: 1; } .balanza__cabeza { display: grid; } .balanza--viva .balanza__cabeza > * { grid-area: 1 / 1; } .balanza__titulo { font-size: min(var(--t-h2), 10.2vw); } .balanza__cierre { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem); line-height: var(--interlinea-titular); letter-spacing: -0.01em; } .balanza__cierre-linea { display: block; text-wrap: balance; } .balanza__cierre-linea--roja { color: var(--sangre); } .balanza__rotulo { font-size: var(--t-nota); color: var(--hueso-2); letter-spacing: 0.01em; } .balanza__lectura { display: flex; align-items: baseline; gap: 0.12em; font-family: var(--f-titular); font-weight: 800; font-style: italic; font-size: clamp(4.6rem, 2.4rem + 11vw, 11rem); line-height: 0.86; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; margin-top: var(--e-2); } .balanza__kg { font-size: 0.3em; font-weight: 700; color: var(--hueso-2); letter-spacing: 0; } /* un valor con sus dos estados apilados en la misma celda (el ancho no salta) */ .valor { display: inline-grid; } .valor > span { grid-area: 1 / 1; white-space: nowrap; } .valor__flecha { display: none; } .valor__despues { color: var(--hueso); } /* renglón todavía sin medir (Masa grasa y Masa magra no tienen un "antes" en los datos) */ .valor__vacio { display: block; } .valor__vacio::before { content: ""; display: block; width: 2.4em; height: 1px; margin-top: 0.62em; background: var(--hueso-3); } .lectura__previo { display: none; } /* ---------- Versión estática (modo calmo y sin JS) ---------- Arriba el titular, después el peso que no se movió, las dos siluetas lado a lado con las lecturas "antes → después", y el cierre debajo de todo (conclusión). */ .balanza:not(.balanza--viva) .balanza__escenario { padding: 0; } .balanza:not(.balanza--viva) .balanza__cabeza { display: contents; } .balanza:not(.balanza--viva) .balanza__titulo { order: 0; } .balanza:not(.balanza--viva) .balanza__peso { order: 1; } .balanza:not(.balanza--viva) .balanza__figuras { order: 2; } .balanza:not(.balanza--viva) .balanza__datos { order: 3; } .balanza:not(.balanza--viva) .balanza__cierre { order: 4; } .balanza:not(.balanza--viva) .valor { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 0 0.3em; white-space: nowrap; } .balanza:not(.balanza--viva) .valor__antes { color: var(--hueso-2); } .balanza:not(.balanza--viva) .valor__flecha { display: inline; color: var(--hueso-3); } .balanza:not(.balanza--viva) .valor--cambio .valor__antes { display: none; } .balanza:not(.balanza--viva) .valor--peso .valor__flecha { font-size: 0.5em; font-weight: 700; align-self: center; } /* con el texto al 200 % (WCAG 1.4.4) el peso no se sale de la pantalla: tope por ancho y, si no entra, el "→ 81,1" baja de renglón (la lectura completa también está en el texto oculto) */ .balanza:not(.balanza--viva) .balanza__lectura { font-size: min(clamp(3rem, 1rem + 9vw, 7.5rem), 16vw); flex-wrap: wrap; } .balanza:not(.balanza--viva) .valor--peso { flex-wrap: wrap; white-space: normal; } /* las lecturas como un informe: nombre a la izquierda y valor a la derecha, un renglón cada una (los renglones quedan parejos y "186 mm → 140 mm" no se parte) */ .balanza:not(.balanza--viva) .lecturas { grid-template-columns: minmax(0, 1fr); gap: 0; } .balanza:not(.balanza--viva) .lectura { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--e-4); padding-block: var(--e-3); } .balanza:not(.balanza--viva) .lectura__valor { text-align: right; } .balanza__figuras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); align-items: end; } .figura { margin: 0; display: grid; justify-items: center; gap: var(--e-3); } .figura__lienzo { position: relative; width: 100%; max-width: 300px; aspect-ratio: 240 / 520; } .figura__lienzo::before { content: ""; position: absolute; inset: 6% -18% 0; background: radial-gradient(50% 46% at 50% 44%, rgb(122 10 10 / 0.30), rgb(122 10 10 / 0) 72%); pointer-events: none; } .figura__pie { font-size: var(--t-nota); color: var(--hueso-2); } .figura__capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; } /* contorno fino de cuerpo, cabeza, manos y pies (écorché) */ .figura__capa--contorno { stroke: var(--hueso); stroke-opacity: 0.16; stroke-width: var(--g-contorno); } .figura__capa--base { stroke: #3F0204; stroke-width: var(--g-base); } .figura__capa--tension { stroke-width: var(--g-tension); stroke-dasharray: 1000 1012; } .figura__capa--engrosa { stroke-width: var(--g-engrosa); stroke-dasharray: 1000 1012; } .t1 { stroke: var(--hebra-1); } .t2 { stroke: var(--hebra-2); } .t3 { stroke: var(--hebra-3); } .t4 { stroke: var(--hebra-4); } .u1 { stroke: var(--hebra-5); } .u2 { stroke: var(--fibra-brillo); } .u3 { stroke: var(--sangre); } /* la forma de antes, en punteado: solo en la figura de las 6 semanas */ .figura__capa--fantasma { stroke: var(--hueso-3); stroke-opacity: 0.75; stroke-width: 0.6; stroke-dasharray: 1.6 2.6; stroke-linecap: butt; } .figura--antes .figura__capa--fantasma { display: none; } /* estado "al empezar": fibras sueltas, a medio tender; la segunda capa todavía no está */ .figura--antes .figura__capa--tension .fz { stroke-dashoffset: 640; } .figura--antes .figura__capa--engrosa .fz { stroke-dashoffset: 1006; } /* estado "a las 6 semanas": tensas y completas */ .figura--despues .figura__capa--tension .fz { stroke-dashoffset: 0; } .figura--despues .figura__capa--engrosa .fz { stroke-dashoffset: 0; } .figura__grasa { position: absolute; inset: 0; } /* la grasa: piezas pálidas (--hueso al ~18 %, borde suave horneado en el WebP) */ .grasa { position: absolute; display: block; max-width: none; pointer-events: none; } /* posiciones de las piezas de grasa (generadas por herramientas/silueta.py) */ /* silueta:css */ .grasa--pecho { left: 27.778%; top: 16.538%; width: 44.583%; height: 15.897%; transform-origin: 49.84% 51.67%; } .figura--despues .grasa--pecho { transform: scale(0.9, 0.9); opacity: 0.36; } .grasa--abdomen { left: 35.972%; top: 29.295%; width: 28.194%; height: 25.385%; transform-origin: 49.75% 52.31%; } .figura--despues .grasa--abdomen { transform: scale(0.76, 0.9); opacity: 0.4; } .grasa--flanco-i { left: 28.194%; top: 28.269%; width: 22.639%; height: 26.667%; transform-origin: 47.04% 57.36%; } .figura--despues .grasa--flanco-i { transform: scale(0.4, 0.94); opacity: 0.24; } .grasa--flanco-d { left: 49.167%; top: 28.269%; width: 22.778%; height: 26.667%; transform-origin: 52.63% 57.36%; } .figura--despues .grasa--flanco-d { transform: scale(0.4, 0.94); opacity: 0.24; } .grasa--brazo-i { left: 16.944%; top: 16.538%; width: 29.167%; height: 26.026%; transform-origin: 39.78% 50.58%; } .figura--despues .grasa--brazo-i { transform: scale(0.66, 0.97); opacity: 0.3; } .grasa--brazo-d { left: 54.028%; top: 16.603%; width: 29.028%; height: 25.962%; transform-origin: 60.03% 50.46%; } .figura--despues .grasa--brazo-d { transform: scale(0.66, 0.97); opacity: 0.3; } .grasa--pierna-i { left: 23.750%; top: 43.013%; width: 27.500%; height: 30.513%; transform-origin: 75.17% 50.48%; } .figura--despues .grasa--pierna-i { transform: scale(0.72, 0.97); opacity: 0.32; } .grasa--pierna-d { left: 48.750%; top: 43.013%; width: 27.639%; height: 30.513%; transform-origin: 24.70% 50.48%; } .figura--despues .grasa--pierna-d { transform: scale(0.72, 0.97); opacity: 0.32; } /* /silueta:css */ .balanza__datos { display: grid; gap: var(--e-5); } .lecturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); margin: 0; } .lectura { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; padding-top: var(--e-3); border-top: 1px solid var(--linea-noche); align-content: start; } .lectura__nombre { font-size: var(--t-nota); color: var(--hueso-2); } .lectura__valor { margin: 0; font-family: var(--f-texto); font-weight: 600; font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .balanza__tiempo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-3); font-size: var(--t-nota); color: var(--hueso-3); } .balanza__barra { position: relative; height: 2px; background: var(--linea-noche); overflow: hidden; } .balanza__barra-fibra { position: absolute; inset: 0; background: var(--fibra-brillo); transform-origin: 0 50%; } .balanza__nota { font-size: var(--t-nota); color: var(--hueso-3); max-width: 40ch; } @media (min-width: 768px) { .balanza__figuras { max-width: 640px; } } @media (min-width: 1024px) { .balanza { --g-contorno: 0.5; --g-base: 0.8; --g-tension: 0.85; --g-engrosa: 1.1; } .balanza:not(.balanza--viva) .balanza__escenario { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--e-8); align-items: center; } .balanza:not(.balanza--viva) .balanza__titulo, .balanza:not(.balanza--viva) .balanza__peso, .balanza:not(.balanza--viva) .balanza__cierre { grid-column: 1 / -1; } } /* ---------- Balanza en modo completo (sticky; ScrollTrigger solo mide) ---------- */ .balanza--viva .balanza__pista { height: calc(var(--pantalla) * 3); } /* ~200 % de recorrido */ .balanza--viva .balanza__escenario { position: sticky; top: 0; height: var(--pantalla); padding: calc(64px + var(--e-4)) 0 var(--e-5); gap: var(--e-4); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--e-3); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "cabeza cabeza" "peso figura" "datos datos"; overflow: clip; } .balanza--viva .balanza__cabeza { grid-area: cabeza; } .balanza--viva .balanza__peso { grid-area: peso; align-self: center; } .balanza--viva .balanza__figuras { grid-area: figura; display: block; min-height: 0; height: 100%; container-type: size; } .balanza--viva .balanza__datos { grid-area: datos; gap: var(--e-3); } .balanza--viva .figura.figura--antes { display: none; } .balanza--viva .figura__pie { display: none; } .balanza--viva .figura { height: 100%; display: flex; justify-content: center; align-items: center; } /* la figura llena su celda sin salirse: el lado que manda lo decide la celda (unidades de contenedor) */ .balanza--viva .figura__lienzo { height: min(100cqh, 100cqw * 520 / 240); width: auto; max-width: none; flex: none; } .balanza--viva .balanza__lectura { font-size: clamp(3.6rem, 0.6rem + 14vw, 11rem); } /* la atribución del caso real se ve también en el celular (EXPERIENCIA 3.3) */ .balanza--viva .balanza__nota { font-size: 0.8125rem; line-height: 1.35; max-width: none; color: var(--hueso-2); } /* --hueso-3 solo va en 14 px o más */ .balanza--viva .lecturas { gap: var(--e-3) var(--e-4); } /* en celular el cierre ocupa el lugar del título (el titular cambia de tesis a conclusión) */ .balanza--viva .balanza__cierre { font-size: min(var(--t-h2), 8.4vw); } /* los cambios de lectura: tween por tiempo (0,3 s, expo.out) en los dos sentidos, nunca atado al scroll */ .balanza--viva .valor__antes, .balanza--viva .valor__despues { transition: transform 300ms var(--ease-salida), opacity 300ms var(--ease-salida); } .balanza--viva [data-estado="antes"] .valor__despues { opacity: 0; transform: translateY(0.5em); } .balanza--viva [data-estado="despues"] .valor__antes { opacity: 0; transform: translateY(-0.5em); } /* el renglón "Antes 34,8 %" debajo del valor nuevo */ .balanza--viva .lectura__previo { display: block; font-family: var(--f-texto); font-weight: 400; font-size: var(--t-nota); line-height: 1.3; /* --hueso-2: sobre el halo rojo del escenario, --hueso-3 medía 4,21:1 (texto chico: pide 4,5) */ color: var(--hueso-2); letter-spacing: 0; opacity: 0; transition: opacity 300ms var(--ease-salida); } .balanza--viva [data-estado="despues"] .lectura__previo { opacity: 1; transition-delay: 120ms; } /* el peso no desliza: cambia en seco, con el parpadeo (lo hace escenas.js) */ .balanza--viva .valor--peso > span { transition: none; } .balanza--viva .balanza__lectura[data-estado="antes"] .valor__despues, .balanza--viva .balanza__lectura[data-estado="despues"] .valor__antes { transform: none; } /* la forma de antes: aparece al cruzar el umbral de los pliegues (solo opacidad, 300 ms) */ .balanza--viva .figura__capa--fantasma { opacity: 0; transition: opacity 300ms var(--ease-suave); } .balanza--viva .figura__capa--fantasma.es-forma { opacity: 1; } /* titulares: clip-path que se abre en diagonal a -8° + y 20 → 0 (600 ms, expo.out) */ .balanza--viva .balanza__titulo, .balanza--viva .balanza__cierre-linea { clip-path: polygon(-12% -30%, -12% -30%, -20% 130%, -20% 130%); transform: translateY(20px); transition: clip-path 600ms var(--ease-salida), transform 600ms var(--ease-salida); } .balanza--viva .balanza__titulo.es-visible, .balanza--viva .balanza__cierre.es-visible .balanza__cierre-linea { clip-path: polygon(-12% -30%, 120% -30%, 112% 130%, -20% 130%); transform: none; } .balanza--viva .balanza__cierre.es-visible .balanza__cierre-linea--roja { transition-delay: 90ms; } .balanza--viva .balanza__cabeza.es-cerrada .balanza__titulo { clip-path: polygon(120% -30%, 120% -30%, 112% 130%, 112% 130%); transform: translateY(-12px); transition-duration: 380ms; } /* Celular y tableta: titular y cierre comparten la celda, así que se cruzan EN SECUENCIA (primero sale uno y después entra el otro); al mismo tiempo, las letras de los dos se montaban unos 300 ms. */ @media (max-width: 1023px) { .balanza--viva .balanza__cabeza.es-cerrada .balanza__titulo { transition-duration: 300ms; } .balanza--viva .balanza__cierre.es-visible .balanza__cierre-linea { transition-delay: 320ms; } .balanza--viva .balanza__cierre.es-visible .balanza__cierre-linea--roja { transition-delay: 410ms; } .balanza--viva .balanza__cierre:not(.es-visible) .balanza__cierre-linea { transition-duration: 300ms; transition-delay: 0ms; } .balanza--viva .balanza__cabeza:not(.es-cerrada) .balanza__titulo.es-visible { transition-delay: 300ms; } } /* el escenario fijo pinta en su propia capa: sus cambios no repintan la página entera (E1) */ .balanza--viva .balanza__escenario { contain: paint; } /* la barra cambia casi en cada cuadro: en su propia capa (chica) no repinta el escenario */ .balanza--viva .balanza__barra-fibra { transform: scaleX(0); will-change: transform; } .balanza--viva .grasa { will-change: transform, opacity; } @media (min-width: 1024px) { .balanza--viva .balanza__pista { height: calc(var(--pantalla) * 3.6); } /* ~260 % */ .balanza--viva .balanza__escenario { padding: calc(76px + var(--e-5)) 0 var(--e-6); column-gap: clamp(2rem, 4vw, 4.5rem); grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.78fr) minmax(0, 1fr); /* el espacio de arriba pesa menos que el de abajo: entre "En carne propia" y el titular quedaba una franja negra de ~500 px (55 % de la pantalla de 900) */ grid-template-rows: minmax(0, 0.4fr) auto auto auto minmax(0, 1fr); grid-template-areas: ". figura datos" "titulo figura datos" "peso figura datos" "cierre figura datos" ". figura datos"; } /* en escritorio se lee de arriba abajo: la tesis, el número que no se mueve y la conclusión */ .balanza--viva .balanza__cabeza { display: contents; } .balanza--viva .balanza__cabeza > .balanza__titulo { grid-area: titulo; font-size: var(--t-h2); } /* el remate pesa casi como el titular (antes quedaba chico debajo del 81,1) */ .balanza--viva .balanza__cabeza > .balanza__cierre { grid-area: cierre; font-size: clamp(2.4rem, 1rem + 3.2vw, 4.4rem); margin-top: var(--e-6); min-height: 2em; } .balanza--viva .balanza__peso { margin-top: var(--e-6); } .balanza--viva .balanza__cabeza.es-cerrada .balanza__titulo { clip-path: polygon(-12% -30%, 120% -30%, 112% 130%, -20% 130%); transform: none; } .balanza--viva .balanza__figuras { justify-self: stretch; } .balanza--viva .balanza__datos { align-self: center; gap: var(--e-5); } .balanza--viva .lecturas { grid-template-columns: 1fr; gap: var(--e-4); } .balanza--viva .lectura { grid-template-columns: 1fr auto; align-items: baseline; padding-top: var(--e-4); } /* el rótulo va a la línea base del número (antes quedaba ~10 px más abajo): el valor es una grilla con "Antes 34,8 %" como segunda fila, y su línea base es la del número */ .balanza--viva .lectura__nombre { align-self: baseline; } .balanza--viva .lectura__valor { display: grid; justify-items: end; align-self: baseline; } .balanza--viva .lectura__valor { font-size: clamp(1.9rem, 1.2rem + 1.2vw, 2.6rem); text-align: right; } .balanza--viva .balanza__nota { font-size: var(--t-nota); max-width: 40ch; } .balanza--viva .balanza__lectura { font-size: clamp(6rem, 2rem + 8vw, 11rem); } } /* pantallas bajas (celular apaisado, SE): la cabecera y los datos se aprietan */ @media (max-height: 620px) { .balanza--viva .balanza__escenario { gap: var(--e-3); } .balanza--viva .lectura__valor { font-size: 1.25rem; } .balanza--viva .lecturas { gap: var(--e-2) var(--e-4); } .balanza--viva .balanza__tiempo { display: none; } .balanza--viva .balanza__nota { font-size: 0.75rem; } } @media (max-height: 700px) and (max-width: 1023px) { .balanza--viva .lectura__previo { line-height: 1.2; } } /* ================================================================ 3.5 EN CARNE PROPIA ================================================================ */ .carne { position: relative; overflow-x: clip; color: var(--hueso); } /* El borde diagonal de arriba (portada.css) va PINTADO en el fondo de la propia sección: una cuña con un degradado de esquina a esquina (su línea del 50 % une la esquina de abajo a la izquierda con la de arriba a la derecha: el mismo -8° del polígono) y el resto del fondo liso. Sin clip-path en la sección (sumaba pases de pintado con la escena sticky adentro) y sin el fondo aparte con isolation y clip-path que lo reemplazó: en el iPhone la escena fijada temblaba 2 a 4 px en cada cuadro del scroll (escape del 27-sep, medido en el video de Pedro; la variante sin eso quedó fluida en su iPhone). La sección es position: relative, así que su fondo pinta sobre la foto del hero, como el corte de antes. */ .carne { clip-path: none; background: linear-gradient(to top left, var(--noche) calc(50% - 0.5px), transparent calc(50% + 0.5px)) 0 0 / 100% var(--diagonal) no-repeat, linear-gradient(var(--noche), var(--noche)) 0 var(--diagonal) / 100% calc(100% - var(--diagonal) + 1px) no-repeat; } /* sin el clip-path, la caja de la sección tapaba la cuña de abajo del hero y se comía los clics (a 1440, el enlace "Si usás un GLP-1" quedaba debajo): la sección no recibe el puntero, sus hijos sí (empiezan debajo de la cuña, después del padding de arriba) */ .carne { pointer-events: none; } .carne > * { pointer-events: auto; } .carne__escenario { width: var(--ancho-seguro); margin-inline: auto; display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); } .carne__columna { display: grid; gap: var(--e-4); align-content: start; } .carne__visual { min-width: 0; } .carne__leyenda { display: none; } .carne__metodo { font-size: 1.125rem; font-weight: 500; max-width: 30ch; text-wrap: pretty; } .carne__datos { display: grid; font-size: var(--t-chico); color: var(--hueso-2); max-width: 44ch; } .carne__datos li { position: relative; padding: var(--e-3) 0 var(--e-3) calc(18px + var(--e-3)); border-top: 1px solid var(--linea-noche); } /* una fibra corta y horizontal por dato (no una marca inclinada: se leía como una barra) */ .carne__datos li::before { content: ""; position: absolute; left: 0; top: calc(var(--e-3) + 0.72em); width: 18px; height: 1.5px; background: var(--fibra-brillo); transform-origin: 0 50%; } /* versión estática (modo calmo y sin JS): en el celular, las tres fotos una debajo de la otra con "Hoy" a la vista sin deslizar; desde 768 px, en fila */ .carne__fotos { display: grid; gap: var(--e-7); } .carne__foto { margin: 0; display: grid; gap: var(--e-3); align-content: start; width: 100%; max-width: 330px; } .carne__marco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--noche-2); } .carne__img { width: 100%; height: 100%; object-fit: cover; } .carne__pie { display: grid; gap: 2px; } .carne__fecha { font-size: var(--t-nota); color: var(--hueso-2); } .carne__pie-texto { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: -0.005em; } .carne__corte, .carne__linea { display: none; } @media (min-width: 768px) { .carne__fotos { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); } .carne__foto { max-width: none; } } .carne__cita { width: var(--ancho-seguro); margin: 0 auto; padding: var(--e-7) 0 0; display: grid; gap: var(--e-4); justify-items: start; } .carne__cita-texto { font-family: var(--f-cita); font-style: italic; font-weight: 400; font-size: clamp(2.1rem, 1.2rem + 3.8vw, 4.6rem); line-height: 1.04; letter-spacing: -0.01em; max-width: 17ch; text-wrap: balance; } .carne__firma { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-chico); font-weight: 500; color: var(--hueso-2); } .carne__firma::before { content: ""; width: 36px; height: 1px; background: var(--fibra-brillo); } /* ---------- Carne propia en modo completo ---------- */ .carne--viva .carne__pista { height: calc(var(--pantalla) * 3); } /* ~200 % en celular */ .carne--viva .carne__escenario { position: sticky; top: 0; height: var(--pantalla); padding: calc(64px + var(--e-3)) 0 var(--e-5); gap: var(--e-3); grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "titulo" "fotos" "leyenda" "linea" "miguel"; overflow: clip; } .carne--viva .carne__columna, .carne--viva .carne__visual { display: contents; } .carne--viva .carne__titulo { grid-area: titulo; font-size: min(var(--t-h2), 10vw); } .carne--viva .carne__leyenda { grid-area: leyenda; display: grid; font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(1.35rem, 0.9rem + 2vw, 2.6rem); line-height: 1; letter-spacing: -0.005em; } /* el cambio de leyenda va en secuencia: la que sale se va en 160 ms y la que entra espera 140 ms (con los dos fundidos a la vez se leían encimadas unos 250 ms) */ .carne--viva .carne__leyenda-item { grid-area: 1 / 1; opacity: 0; transform: translateY(0.45em); transition: transform 160ms var(--ease-salida), opacity 160ms var(--ease-salida); } .carne--viva .carne__leyenda-item.es-actual { opacity: 1; transform: none; transition-duration: 300ms; transition-delay: 140ms; } .carne--viva .carne__leyenda-item.es-pasado { transform: translateY(-0.45em); } .carne--viva .carne__miguel { grid-area: miguel; display: grid; gap: var(--e-2); } .carne--viva .carne__metodo { font-size: 1rem; } .carne--viva .carne__datos { font-size: 0.875rem; } .carne--viva .carne__datos li { padding-block: 5px; } .carne--viva .carne__datos li::before { top: calc(5px + 0.72em); } /* las fibras de los datos se tienden al entrar la escena (scaleX desde la izquierda, 40 ms de stagger) */ .carne--viva .carne__datos li::before { transform: scaleX(0); transition: transform 600ms var(--ease-salida); } .carne--viva.es-dentro .carne__datos li::before { transform: scaleX(1); } .carne--viva.es-dentro .carne__datos li:nth-child(2)::before { transition-delay: 40ms; } .carne--viva.es-dentro .carne__datos li:nth-child(3)::before { transition-delay: 80ms; } .carne--viva .carne__fotos { grid-area: fotos; position: relative; display: block; height: 100%; aspect-ratio: 4 / 5; max-width: min(100%, 330px); /* la foto de "hoy" no alcanza más nitidez en DPR 2 o más */ overflow: hidden; margin: 0; padding: 0; justify-self: center; border-radius: 2px; } @media (max-width: 767px) { /* alineada a la izquierda, con el titular, la leyenda y la línea de tiempo (centrada quedaba ~17 px corrida respecto del texto) */ .carne--viva .carne__fotos { justify-self: start; } } .carne--viva .carne__foto { position: absolute; inset: 0; display: block; max-width: none; } .carne--viva .carne__marco { height: 100%; aspect-ratio: auto; } .carne--viva .carne__foto + .carne__foto { clip-path: polygon(0 111%, 100% 100%, 100% 100%, 0 100%); } .carne--viva .carne__foto .carne__img { transform-origin: 50% 70%; } .carne--viva .carne__foto:not(:first-child) { will-change: clip-path; } .carne--viva .carne__pie { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .carne--viva .carne__corte { display: block; position: absolute; left: -8%; width: 116%; top: 0; height: 2px; margin-top: -1px; background: var(--fibra-brillo); opacity: 0; pointer-events: none; will-change: transform, opacity; } .carne--viva .carne__linea { grid-area: linea; display: grid; gap: 6px; width: 0; min-width: 100%; } .carne__linea-svg { display: block; width: 100%; height: 12px; overflow: visible; } /* la fibra de la línea de tiempo se redibuja con el scroll: en su propia capa (chica) */ .carne--viva .carne__linea-svg { will-change: transform; } .carne__linea-fondo { stroke: var(--linea-noche); stroke-width: 1; fill: none; } .carne__linea-fibra { stroke: var(--fibra-brillo); stroke-width: 2; fill: none; stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; } .carne__hitos { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -12px; } .carne__hito { display: grid; justify-items: center; text-align: center; gap: 2px; position: relative; padding-top: 18px; } /* el hito: un tramo corto y más grueso sobre la fibra (un nudo), que se enciende en --sangre */ .carne__hito-marca { position: absolute; top: -2px; left: 50%; /* centrado sobre la fibra (la lista sube 12 px) */ width: 16px; height: 4px; margin-left: -8px; background: var(--hueso-3); border-radius: 1px; } .carne__hito-marca::after { content: ""; position: absolute; inset: 0; background: var(--sangre); border-radius: 1px; opacity: 0; transition: opacity 300ms var(--ease-salida); } .carne__hito.es-activo .carne__hito-marca::after { opacity: 1; } /* el renglón del mes siempre ocupa su alto (el primer hito no tiene mes y quedaba corrido) */ .carne__hito-mes { font-size: 0.8125rem; color: var(--hueso-2); line-height: 1.2; min-height: 1.2em; } .carne__hito-anio { font-family: var(--f-titular); font-weight: 700; font-style: italic; font-size: 1.125rem; line-height: 1; color: var(--hueso); } .carne--viva .carne__titulo { clip-path: polygon(-12% -30%, -12% -30%, -20% 130%, -20% 130%); transform: translateY(20px); transition: clip-path 600ms var(--ease-salida), transform 600ms var(--ease-salida); } .carne--viva .carne__titulo.es-visible { clip-path: polygon(-12% -30%, 120% -30%, 112% 130%, -20% 130%); transform: none; } @media (min-width: 768px) { .carne--viva .carne__escenario { grid-template-columns: minmax(0, 40vw) minmax(0, 1fr); column-gap: var(--e-6); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "fotos titulo" "fotos leyenda" "fotos miguel" "linea miguel"; } .carne--viva .carne__fotos { height: auto; width: min(40vw, 440px); max-width: none; aspect-ratio: 4 / 5; align-self: center; } .carne--viva .carne__titulo { align-self: end; } .carne--viva .carne__miguel { align-self: start; gap: var(--e-4); margin-top: var(--e-5); } .carne--viva .carne__metodo { font-size: 1.25rem; } .carne--viva .carne__datos { font-size: var(--t-chico); } .carne--viva .carne__datos li { padding-block: var(--e-3); } .carne--viva .carne__datos li::before { top: calc(var(--e-3) + 0.72em); } } @media (min-width: 1024px) { .carne--viva .carne__pista { height: calc(var(--pantalla) * 3.2); } /* ~220 % */ .carne--viva .carne__escenario { padding: calc(76px + var(--e-5)) 0 var(--e-6); --foto-alto: min(calc(var(--pantalla) - 76px - 8.5rem), 640px); column-gap: clamp(3rem, 6vw, 7rem); grid-template-columns: calc(var(--foto-alto) * 0.8) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "fotos ." "fotos titulo" "fotos leyenda" "fotos miguel" "fotos cita" "fotos ." "linea ."; } .carne--viva .carne__fotos { width: calc(var(--foto-alto) * 0.8); height: var(--foto-alto); max-width: none; } .carne--viva .carne__titulo { font-size: var(--t-h2); } .carne--viva .carne__leyenda { margin-top: var(--e-3); } .carne--viva .carne__miguel { margin-top: var(--e-4); } .carne--viva .carne__linea { width: 100%; } /* la cita de Miguel dentro de la escena fija: entra al final con el corte diagonal del titular, en los dos sentidos */ .carne--viva .carne__escenario > .carne__cita { grid-area: cita; width: auto; margin: var(--e-5) 0 0; padding: 0; gap: var(--e-3); clip-path: polygon(-8% -10%, -8% -10%, -14% 110%, -14% 110%); transform: translateY(20px); transition: clip-path 600ms var(--ease-salida), transform 600ms var(--ease-salida); } .carne--viva .carne__escenario > .carne__cita.es-citada { clip-path: polygon(-8% -10%, 114% -10%, 108% 110%, -14% 110%); transform: none; } .carne--viva .carne__escenario > .carne__cita .carne__cita-texto { font-size: clamp(1.9rem, 0.9rem + 1.7vw, 2.9rem); max-width: 18ch; opacity: 1; transform: none; transition: none; } .carne--viva .carne__escenario > .carne__cita .carne__firma { opacity: 1; transform: none; transition: none; } } @media (max-height: 620px) and (max-width: 767px) { .carne--viva .carne__datos li:nth-child(n + 2) { display: none; } } /* ---------- Alto reservado de las pistas desde el primer cuadro ---------- sitio.js pone html.movimiento en el , antes de pintar. Las pistas toman ya el alto que tendrán como escenas fijas (las clases --viva llegan recién al montar): así, al recargar abajo, el scroll restaurado cae en el mismo lugar y no hay salto (medido antes: CLS 1,0 en la balanza y 0,56 en carne propia; en GLP-1 la recarga terminaba 2.152 px más abajo). Con 560 px de alto o menos (celular apaisado) las escenas van estáticas y no se reserva nada, igual que en escenas.js. */ @media (min-height: 561px) { html.movimiento .balanza__pista, html.movimiento .carne__pista { min-height: calc(var(--pantalla) * 3); } } @media (min-height: 561px) and (min-width: 1024px) { html.movimiento .balanza__pista { min-height: calc(var(--pantalla) * 3.6); } html.movimiento .carne__pista { min-height: calc(var(--pantalla) * 3.2); } /* desde 1024 px la cita de Miguel vive dentro de la escena fija: antes de montar no ocupa lugar en el flujo (si no, la sección medía un bloque de más hasta el montaje) */ html.movimiento .carne:not(.carne--viva) > .carne__cita { position: absolute; visibility: hidden; } } /* texto agrandado (html.texto-grande, sitio.js): las escenas van estáticas; nada reservado */ html.movimiento.texto-grande .balanza__pista, html.movimiento.texto-grande .carne__pista { min-height: 0; } html.movimiento.texto-grande .carne > .carne__cita { position: static; visibility: visible; } /* ================================================================ Revelados (los dos modos) y modo calmo ================================================================ */ /* modo completo: párrafos con opacity + y 12 (450 ms, power3.out); lo pone escenas.js al entrar */ .carne--viva .carne__cita-texto, .carne--viva .carne__firma { opacity: 0; transform: translateY(12px); transition: opacity var(--d-texto) var(--ease-texto), transform var(--d-texto) var(--ease-texto); } .carne--viva .carne__cita.es-visible .carne__cita-texto, .carne--viva .carne__cita.es-visible .carne__firma { opacity: 1; transform: none; } .carne--viva .carne__cita.es-visible .carne__firma { transition-delay: 120ms; } /* modo calmo: solo opacidad, al entrar (y todo visible si no hay JS) */ .es-calma-js [data-calma] { opacity: 0; transition: opacity 500ms ease-out; } .es-calma-js [data-calma].es-visible { opacity: 1; } /* ================================================================ 3.11 CIERRE: el logo se teje de nuevo (versión corta) ================================================================ */ .cierre__logo-caja { position: relative; } .cierre__lienzo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* la imagen final va arriba del lienzo: entra encima y el lienzo se va por debajo (sin corte seco) */ .cierre__logo { position: relative; z-index: 1; } .cierre--tejiendo .cierre__logo { opacity: 0; }