/* ═══════════════════════════════════════════════════════════════════════════ apertura.css — «EL ECLIPSE SE ABRE» · el momento entre el hero y el trabajo (19 ago 2026) Pantalla anclada, a sangre, en cuatro actos: I LA ALINEACIÓN el cuerpo cruza el sol y la luz colapsa. II LA TOTALIDAD la frase se lee DENTRO del disco negro. III EL DIAMANTE la totalidad se rompe por un punto del canto. IV LA APERTURA el anillo de luz se ensancha, barre el cuadro y deja el trabajo por donde pasa. El eclipse se consume. 🔴 TODAS LAS CLASES VAN PREFIJADAS `ap-`, Y NO ES BUROCRACIA. `.frase`, `.cierre`, `.anillo`, `.marco` y `.pie` YA EXISTEN en caliber.css con otro significado — es la misma trampa que obligó a prefijar `tr-` en trabajo.css, donde seis nombres naturales heredaban 90 reglas ajenas en silencio y sin un solo error. 🔴 EL FONDO ES EL LIENZO `#mundo`, QUE VIVE FIJO Y A z-index:-1 DETRÁS DE TODO EL SITIO. Esta sección NO pinta su propia tinta: si le pusiera un fondo opaco taparía el shader y no habría eclipse que ver. Va `.oscuro`, como las demás, y deja pasar. El comportamiento está en `caliber.js`, bajo el mismo rótulo. ═══════════════════════════════════════════════════════════════════════════ */ /* 🔴 LAS SEIS PANTALLAS ESTÁN GANADAS, Y AQUÍ ESTÁ LA MEDIDA — porque sin ella este número parece el sitio más obvio del mundo donde recortar scroll. Es la sección más alta del sitio: 5,400px a 900 de ventana, el 29% de todo el documento para UN momento. Medido restando cuadro contra cuadro a lo largo de sus 4,500px de recorrido útil (`_tools/sondas/lienzo-cambia.py`, 17 muestras): 15 de los 17 tramos mueven más del 9% de la pantalla, con pico del 47% en la totalidad. Sólo hay dos remansos y los dos son cortos — los primeros 281px (1.7%) y uno al 0.77 (3.6%). No sobra pista. 🔴 Y OJO CON CÓMO SE MIDE: el DOM dice que el primer 30% no mueve NADA, y es FALSO. Ese tramo es el Acto I —`M.alinear()`, el cuerpo cruzando el sol— y corre dentro del shader, donde ningún `getComputedStyle` llega. Una sonda de DOM da aquí un falso «carrera muerta» que invita a cortar pantalla y media del mejor gesto del sitio. Para juzgar esta sección hay que mirar PÍXELES. */ .ap{position:relative;height:600vh} /* 🔴 EL CUADRO VA A SANGRE, Y HASTA SEP-2026 NO IBA. Medido a 1512: el lienzo media 1361 y empezaba en x=76 — o sea que el eclipse (que vive en `#mundo`, fijo y de pantalla completa) se abria a sangre y el trabajo que destapaba aparecia dentro de una columna 151px mas estrecha. A 1920 son 558px muertos. Y habia una segunda consecuencia que no se veia: `ubicar()` calcula el centro de la luz y `Rmax` con `ap.clientWidth`, que ES el ancho de ventana, pero los aplicaba a una caja de 1362 — el frente de onda iba dimensionado para un cuadro que no existia. Se sangra con el modismo de la casa (`caliber.css` §--borde): margenes negativos, NUNCA `width:100vw` — 100vw incluye la barra de scroll y devuelve scroll horizontal. */ .ap__lienzo{position:sticky;top:0;height:100vh;overflow:hidden; margin-inline:calc(var(--borde) * -1)} /* ── III · EL REVELADO ──────────────────────────────────────────────────── El trabajo no aparece: lo destapa la luz al pasar. La máscara es un círculo centrado en el eclipse —`caliber.js` calcula dónde está— y su canto va DEGRADADO, no recortado: un `clip-path` deja un borde de tijera y ahí se acaba la magia. El degradado es lo que hace que la luz «revele». */ .ap__revela{position:absolute;inset:0;z-index:2; -webkit-mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,44%), #000 var(--r0,0px), transparent var(--r1,0px)); mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,44%), #000 var(--r0,0px), transparent var(--r1,0px)); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat} /* ── EL ALBA · el resplandor general, en `screen` para SUMAR luz sin levantar el piso. Con un fondo opaco aclararía la tinta, que es justo lo que la marca no permite. */ .ap__alba{position:absolute;inset:0;z-index:3;pointer-events:none; mix-blend-mode:screen;opacity:var(--brillo,0); background:radial-gradient(circle 46vmax at var(--cx,50%) var(--cy,44%), rgba(255,246,228,.42), rgba(214,196,150,.16) 38%, transparent 72%)} /* ── EL ANILLO · el frente de onda ──────────────────────────────────────── Tres anillos, no uno: el de en medio es la luz y los otros dos van 3px a cada lado y tintados —ámbar dentro, cian fuera— para que el canto tenga aberración cromática. Son tres píxeles y es de lo que más separa «renderizado en el navegador» de «filmado». El frente va ESTRECHO: con la banda ancha se leía a aro de neón difuso. El alcance lo da la cola larga del oro, no el grosor del blanco. */ .ap__anillo,.ap__fleco{position:absolute;inset:0;pointer-events:none; mix-blend-mode:screen;opacity:var(--vivo,0)} .ap__anillo{z-index:5; background:radial-gradient(circle at var(--cx,50%) var(--cy,44%), transparent var(--ra,0px), rgba(255,250,238,.92) var(--rb,0px), rgba(143,181,201,.34) var(--rc,0px), transparent var(--rd,0px))} .ap__fleco{z-index:4} .ap__fleco--calido{background:radial-gradient(circle at calc(var(--cx,50%) - 3px) var(--cy,44%), transparent var(--ra,0px), rgba(255,186,96,.34) var(--rb,0px), transparent var(--rc,0px))} .ap__fleco--frio{background:radial-gradient(circle at calc(var(--cx,50%) + 3px) var(--cy,44%), transparent var(--rb,0px), rgba(120,190,255,.30) var(--rc,0px), transparent var(--rd,0px))} /* ── II · EL DIAMANTE ───────────────────────────────────────────────────── 🔴 VA EN EL CANTO, NO EN EL CENTRO. En mitad del disco se lee como un reflejo de lente encima de la luna, el efecto contrario al que se busca. Un anillo de diamante es el primer trozo de sol que ASOMA por el borde, así que su sitio es el punto por donde escapa la luz — y ese punto se calcula. */ .ap__diamante{position:absolute;z-index:6;pointer-events:none;mix-blend-mode:screen; left:calc(var(--cx,50%) + var(--dx,0px)); top:calc(var(--cy,44%) + var(--dy,0px)); width:0;height:0;opacity:var(--chispa,0)} .ap__diamante i{position:absolute;display:block;transform:translate(-50%,-50%);border-radius:50%} .ap__nucleo{width:150px;height:150px; background:radial-gradient(circle,rgba(255,255,255,1) 0 7%, rgba(255,252,244,.98) 11%, rgba(255,246,226,.55) 20%, rgba(226,206,158,.20) 40%, transparent 66%); transform:translate(-50%,-50%) scale(var(--pulso,1))} /* dos estrías: una fina y blanca —el filo— y otra ancha y tibia —su halo—. Con una sola, el destello sale como una raya de lápiz gris. */ .ap__estria{width:120vmax;height:2px; background:linear-gradient(to right,transparent,rgba(180,208,255,.14) 20%, rgba(255,255,255,1) 50%, rgba(180,208,255,.14) 80%, transparent); filter:blur(.7px);transform:translate(-50%,-50%) scaleX(var(--pulso,1))} .ap__estria-halo{width:120vmax;height:15px; background:linear-gradient(to right,transparent,rgba(255,236,198,.30) 34%, rgba(255,246,226,.62) 50%, rgba(255,236,198,.30) 66%, transparent); filter:blur(7px);transform:translate(-50%,-50%) scaleX(var(--pulso,1))} /* la vertical va CORTA: a 34vmax era una línea cruzando la pantalla entera a un tono apenas por encima del fondo — no leía a destello, leía a arañazo. */ .ap__estria-v{width:2px;height:11vmax; background:linear-gradient(to bottom,transparent,rgba(255,252,244,.85) 50%,transparent); filter:blur(.6px);transform:translate(-50%,-50%) scaleY(var(--pulso,1))} /* ── I · LA FRASE, DENTRO DEL DISCO ─────────────────────────────────────── 🔴 No es capricho de composición: en la totalidad el cuerpo es un círculo negro enorme —el único sitio del cuadro con contraste limpio— y la corona tiene el borde encendido. Con la frase debajo, las descendentes caían sobre la corona y se volvía ilegible. Dentro del disco se lee como grabada. */ .ap__frase{position:absolute;z-index:6;left:var(--cx,50%);top:var(--cy,44%); transform:translate(-50%,-50%);width:min(15ch,52vw);text-align:center; pointer-events:none;opacity:var(--dice,0);margin:0} /* CAPA 6 · sep-2026 · ESTE ERA UNO DE LOS CUATRO NODOS FUERA DE LA ESCALA. `clamp(24px,2.9vw,40px)` computaba 40 arriba y 24 a 390, y ni 40 ni 24 son tokens: la escala es 62·48·28·19·17·14 (52·40·22·18·17·14 a 390). Cayó ahí porque entre 48 y 28 hay un salto grande y 40 se siente cómodo — el mismo motivo por el que `#servicios .ofi__nom` inventó un 38. Se resuelve usando el token, no añadiendo un peldaño: dos nodos en veinte pantallas no son un hueco del sistema, son dos autores que no miraron la escala. */ .ap__frase b{display:block;font-family:var(--display);font-weight:var(--p-voz); font-size:var(--t2);letter-spacing:-.025em;line-height:1.12; color:var(--tx-1)} .ap__frase span{display:block;margin-top:16px;font-size:var(--t6); letter-spacing:.22em;text-transform:uppercase;color:var(--acento)} /* ── EL TENDIDO · composición a sangre, no una rejilla tímida ───────────── La apaisada se sale por el borde derecho a propósito: que algo se escape es lo que dice que hay más y que esto es un vistazo, no el catálogo. */ .ap__tendido{position:absolute;inset:0} /* ═══ EL ASENTAMIENTO · LA LUZ PINTA LA PIEZA ═══════════════════════════════ 🔴 AQUÍ HABÍA DOS REVELADOS ENCIMA DEL OTRO Y POR ESO SE VEÍA BARATO. Las piezas ya viven DENTRO de `.ap__revela`, o sea que el frente de luz ya las destapa al pasar; encima cada una hacía un fade-up de 46 px. Dos gestos contando lo mismo, y el segundo es el más genérico que existe —lo hace cualquier plantilla— así que le quitaba el crédito a la luz: parecía que la pieza aparecía sola y la luz iba de adorno. Lo que se queda es lo que HACE una luz al cruzar un papel satinado: · un BARRIDO especular que la atraviesa una sola vez, en el instante en que el frente la pasa. Es el gesto principal y es el que no se puede fingir con un fade; · la imagen ENTRA MÁS GRANDE y se asienta a su tamaño mientras se ilumina —el encuadre respira, que es de lo que más separa «filmado» de «renderizado en el navegador»—; · un canto encendido que destella al paso y se apaga; · y el pie llega DESPUÉS, no con la imagen: primero se ve la pieza, luego se lee de quién es. Llegar juntos los hace competir. La subida baja de 46 px a 14: ya no es una entrada, es un asentamiento. ══════════════════════════════════════════════════════════════════════════ */ .ap__tendido figure{position:absolute;margin:0; transform:translate3d(0,calc(var(--sube,0px) + var(--baja,0px)),0) scale(calc(var(--crece,1) * var(--acerca,1))); opacity:var(--pon,0)} .ap__tendido img{display:block;width:100%;height:100%;object-fit:cover; border-radius:10px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 0 0 1px var(--tx-linea), /* el canto que destella al paso del frente */ 0 0 0 1px rgba(255,250,238,var(--filo,0)), 0 0 34px -6px rgba(255,244,220,calc(var(--filo,0) * .8)); /* el encuadre se asienta: entra un 10% más grande y baja a su tamaño */ scale:var(--zoom,1)} /* EL BARRIDO. Va en un pseudo del `figure` y NO en el `img` porque el `img` ya lleva su propio `scale` de asentamiento: montarle encima un fondo animado lo arrastraría con el zoom y la banda saldría deformándose. 🔴 EL PSEUDO COPIA EL `aspect-ratio` DE SU IMAGEN, no `inset:0`. La altura del `figure` es imagen MÁS PIE, así que con `inset:0` la banda cruzaba también el texto y se leía como un subrayado blanco parpadeando. */ .ap__tendido figure::after{ content:''; position:absolute; left:0; top:0; width:100%; aspect-ratio:3/4; border-radius:10px; pointer-events:none; mix-blend-mode:screen; opacity:var(--brillo-pieza,0); background:linear-gradient(112deg, transparent 34%, rgba(255,250,238,.10) 44%, rgba(255,252,246,.62) 50%, rgba(255,250,238,.10) 56%, transparent 66%); background-size:260% 100%; background-repeat:no-repeat; background-position:var(--barrido,120%) 0; } .ap-p4::after{aspect-ratio:16/10} /* ── LA VINETA COMUN · lo que hace que las cuatro se lean HERMANAS ──────── Cada pieza trae su propio plato: LEVIA azul, Brushia rosa, Chilita crema, Black Secret blanco. Sobre la tinta, cuatro fondos a cuatro temperaturas y sin una direccion de luz compartida no leen a cuerpo de trabajo, leen a cuatro calcomanias pegadas. Lo que une una serie no es el color —eso es de cada cliente y no se toca— sino que TODAS caigan igual hacia el borde. Es la misma caida en las cuatro, asi que la luz del cuadro pasa a ser una sola. Va en un pseudo propio y no en el `::after`: ese lleva el barrido especular animado y meterle una capa fija encima lo apagaria. */ .ap__tendido figure::before{ content:''; position:absolute; left:0; top:0; width:100%; aspect-ratio:3/4; border-radius:10px; z-index:1; pointer-events:none; background:radial-gradient(120% 100% at 50% 42%, rgba(8,9,12,0) 46%, rgba(8,9,12,.22) 78%, rgba(8,9,12,.42) 100%); } .ap-p4::before{aspect-ratio:16/10} .ap__tendido figcaption{margin-top:14px;display:flex;gap:10px;align-items:baseline; font-size:var(--t6);color:var(--tx-2); opacity:var(--pie,0); transform:translate3d(0,calc((1 - var(--pie,0)) * 10px),0)} .ap__tendido figcaption b{font-family:var(--display);font-weight:var(--p-voz); font-size:var(--t4);letter-spacing:-.02em;color:var(--tx-1)} /* 🔴 EL CUADRO ESTABA PARTIDO EN DOS. Medido sobre las cajas reales a 1512: las piezas ocupaban 5-27.5vw, 30-46.5vw ... y luego 72.5-90vw y 69-102vw. Entre medias quedaba un canal de 340 px VACIO DE SUELO A TECHO —el 22.5% del ancho— que no era aire, era una grieta: dejaba dos islas de dos piezas cada una y el ojo tenia que saltar. El aire de una composicion va por FUERA, en los bordes; en el centro es un agujero. Y encima el peso caia a la derecha (tinta media 90 contra 62 en la mitad izquierda). Ahora los huecos son tres gutters parejos y el zigzag lo dan las alturas (19vh / 51vh / 9vh / 56vh), no los huecos. La apaisada sigue escapandose por la derecha —eso es a proposito y lo explica la nota de arriba— pero deja de estar cortada TAMBIEN por abajo: cortada por dos lados se leia a accidente. 🔴🔴 Y ESTABAN EN `vw`, QUE DEJO DE SIGNIFICAR LO QUE DECIA. Cuando `--borde` le puso tope a la columna (sep-2026), el contenedor de este tendido dejo de medir lo que la ventana: a 1920 mide 1362 y va centrado, o sea desplazado 279 px. Las piezas seguian colocandose sobre un sistema de 1920 DENTRO de una caja de 1362, asi que se corrian todas hacia la derecha y se amontonaban. Medido a 1920: Black Secret caia ENCIMA de Brushia en 88x428 px, y a 2560 en 435x556 y encima tambien sobre LEVIA. En pantallas grandes el collage se comia a si mismo, y en la de casa no se ve porque a 1512 el desfase es de 75. Van en `%` del propio contenedor: asi la composicion es la MISMA a cualquier ancho, que es justo lo que `vw` prometia y ya no cumplia. Los numeros salen de las cajas medidas a 1512 sobre la columna de 1362. */ /* ── `--z` · EL PLANO DE CADA PIEZA ─────────────────────────────────────── 0 = al fondo · 1 = pegada a la camara. No es un valor de gusto: sale del ancho que ya tiene cada una en la composicion, que es lo que el ojo ya esta leyendo como distancia. Black Secret ocupa 35.5% y esta delante; Brushia 18.9% y esta al fondo. Ponerle a la profundidad un orden distinto del que dicta el tamano es lo que hace que un paralaje se sienta «pegado». Lo consume `caliber.js` en el descenso: viaje y acercamiento se multiplican por `--z`, asi que la de delante cae casi al doble que la del fondo. */ .ap-p1{left:5.6%; top:19vh; width:23.9%; min-width:215px; --z:.55} .ap-p2{left:32.8%; top:51vh; width:18.9%; min-width:170px; --z:.18} .ap-p3{left:54.4%; top:9vh; width:20.6%; min-width:185px; --z:.34} /* 56vh y no 55: a 1512 el pie de Chilita rozaba el canto de arriba de esta pieza por 4 px. Cuatro pixeles no se ven, pero un pie que toca una imagen es de las cosas que solo se notan cuando ya estan publicadas. */ .ap-p4{right:-3.3%; top:56vh; width:35.5%; min-width:320px; --z:1} .ap-p1 img,.ap-p2 img,.ap-p3 img{aspect-ratio:3/4} /* ── IV · LA PORTADA · EL ÚLTIMO FOTOGRAMA ──────────────────────────────── El momento no acaba en un collage que luego corta a otra sección: acaba SIENDO la portada del trabajo. Es la cabecera real de `#trabajo`, movida aquí entera y con sus clases `tr-` intactas —el envoltorio de 1134px y sus márgenes vienen de trabajo.css, que ahora apunta a las dos secciones— para que al soltarse el anclaje la vista continúe sin salto. 🔴 Si algún día se le copian los valores tipográficos en vez de compartir el selector, el titular acabará en dos tamaños distintos según por dónde se mire, y sólo se nota en la costura. */ /* 🔴 EL RELLENO DE `--borde` NO ES DECORATIVO: LO PIDE LA COSTURA. Desde que el lienzo va a sangre, su caja mide la ventana entera y no la columna. El `.tr-envoltorio` de dentro (max-width:1134, margin auto) se centraria entonces sobre 1512 mientras el de `#trabajo` se centra sobre 1360.8 — el titular saltaria 75px a la izquierda EN LA COSTURA, que es justo el pixel que toda esta seccion existe para no mover. Con el relleno puesto, las dos cajas miden 1360.8 y el titular cae en el mismo sitio a los dos lados del anclaje. Y sube al entrar: la portada llega PORQUE el cuadro se vacio, no en lugar de las piezas. Antes solo cambiaba de opacidad sobre un cuadro ya en negro. */ .ap__portada{position:absolute;left:0;right:0;top:30vh;z-index:3; padding-inline:var(--borde); transform:translate3d(0,var(--llega,0px),0); opacity:var(--sale,0);pointer-events:none} /* 🔴 LA COSTURA. Un anclaje que suelta deja SIEMPRE una cola: lo que quede debajo del contenido en esa ultima pantalla tiene que desfilar entero antes de que empiece la seccion siguiente. Con la portada a 20vh sobraban 42vh de nada y se veia un agujero justo en el empalme. Bajarla a 30vh acorta la cola, y `#trabajo` pierde el aire de arriba porque ese aire existia PARA una cabecera que ahora vive aqui: dejarselo era pagar dos veces por lo mismo. */ #trabajo{padding-top:clamp(16px,2vw,28px)} .ap-p4 img{aspect-ratio:16/10} @media (max-width:900px){ .ap{height:520vh} /* ⚠️ El aire entre piezas en movil NO es el mismo problema que en escritorio: aqui el que choca es el PIE, no la imagen. Con las alturas apretadas, el pie de AVORA —que en 42vw de ancho parte en dos renglones— caia encima de la pieza de abajo. Las alturas de aqui cuentan con que cada pie ocupe dos lineas, que es el caso peor. */ /* 🔴 EN MOVIL EL REVELADO ENSENA DOS PIEZAS, NO CUATRO. No es un recorte por comodidad: cuatro piezas a sangre CON SU PIE no caben en 844px de alto, y probandolo se veia — el pie de LEVIA lo tapaba la imagen de Chilita y el de Chilita quedaba cortado en la «C». Encogerlas mas las vuelve ilegibles, que es peor. Esto es un VISTAZO; las cuatro estan enteras, con su descripcion y su video, en `#trabajo`, que empieza en cuanto acaba esta pantalla. Si algun dia el revelado deja de ir seguido de la seccion de trabajo, esta decision hay que rehacerla: entonces si estaria escondiendo contenido. */ .ap-p2,.ap-p3{display:none} .ap__portada{top:22vh} .ap-p1{left:8vw; top:10vh; width:52vw} .ap-p4{right:-8vw; top:60vh; width:76vw} .ap__frase{width:min(13ch,66vw)} } /* Sin movimiento no hay evento de luz: la sección se convierte en lo que siempre debió poder ser sin JS — el trabajo, apilado y legible. */ @media (prefers-reduced-motion:reduce){ .ap{height:auto} .ap__lienzo{position:static;height:auto;padding:clamp(60px,9vw,110px) 0} .ap__alba,.ap__anillo,.ap__fleco,.ap__diamante{display:none} .ap__revela{position:static;-webkit-mask-image:none;mask-image:none} .ap__tendido{position:static;display:grid;gap:clamp(32px,5vw,56px); padding:0 clamp(24px,5vw,72px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .ap__tendido figure{position:static;width:auto;transform:none;opacity:1} .ap__frase,.ap__portada{position:static;transform:none;opacity:1;width:auto; margin:0 auto clamp(32px,5vw,56px)} }