/* ═══════════════════════════════════════════════════════════════════════════ 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. ═══════════════════════════════════════════════════════════════════════════ */ .ap{position:relative;height:600vh} .ap__lienzo{position:sticky;top:0;height:100vh;overflow:hidden} /* ── 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(216,197,140,.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} .ap__frase b{display:block;font-family:var(--display);font-weight:var(--p-voz); font-size:clamp(24px,2.9vw,40px);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(--oro)} /* ── 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,var(--sube,0px),0) scale(var(--crece,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} .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)} .ap-p1{left:3.5vw; top:16vh; width:19vw; min-width:190px} .ap-p2{left:25vw; top:47vh; width:16.5vw; min-width:165px} .ap-p3{right:5vw; top:9vh; width:17.5vw; min-width:175px} .ap-p4{right:-7vw; top:54vh; width:33vw; min-width:330px} .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. */ .ap__portada{position:absolute;left:0;right:0;top:30vh;z-index:3; 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)} }