/* ========================================================================== DANGER AK · hoja de estilos -------------------------------------------------------------------------- Sistema de señalética industrial sobre concreto negro. No hay papel: cada sección es un panel atornillado al muro y cada encabezado es una placa de señal con el número dentro del propio título. Dos señales en rotación estricta: ÁMBAR (precaución) · ROJO (peligro). ========================================================================== */ :root{ /* ---- tintas ---- */ --ink:#1C1917; --ink-2:#2E2823; --ink-3:#413931; --night:#0B0A09; --panel:#141110; --panel-2:#1B1715; --panel-3:#221D1A; /* el panel claro es esmalte industrial, no papel: se le quitó la calidez */ --steel:#E4DFD4; --steel-2:#EFEBE1; --paper:#EDE6D8; --paper-hi:#F6F2E8; /* ---- las dos señales ---- */ --amber:#FFB300; --amber-hi:#FFD400; --amber-ink:#7E5200; /* ámbar legible como TEXTO sobre acero */ --red:#E10600; --red-ink:#A80B00; /* rojo legible como TEXTO sobre acero */ --red-hi:#FF3A2B; /* rojo legible como TEXTO sobre negro */ /* Señal de la sección. Cada panel reasigna las cuatro: --sig color pleno, para bloques y reglas --sig-ink la misma señal en versión legible como texto sobre ese panel --sig-on la tinta que va ENCIMA de un bloque relleno de --sig (es también el color del título dentro de la placa de señal) */ --sig:var(--amber); --sig-ink:var(--amber-ink); --sig-on:var(--ink); /* ---- grises tibios ---- */ --grey:#8A8175; --grey-2:#A79C8E; --grey-3:#C1B9AC; --grey-4:#CFC7B9; --grey-ink:#5F574D; /* gris legible sobre acero */ /* ---- tipografía · DOS familias, no más ---- Anton rotula. Archivo hace todo lo demás: es variable en peso Y en ancho, así que la misma familia cubre párrafo, subtítulo condensado, listado y —en su eje estrecho a 700, en versalitas y muy espaciada— la etiqueta técnica que antes pedía un monoespaciado aparte. `--mono` conserva el nombre porque es la voz de etiqueta, ya no una familia distinta. */ --sans:'Archivo','Archivo Narrow',system-ui,'Segoe UI',Arial,sans-serif; --display:Anton,'Arial Narrow',sans-serif; --mono:'Archivo','Archivo Narrow',system-ui,'Segoe UI',Arial,sans-serif; --w-wide:100%; --w-mid:88%; --w-narrow:78%; --ease:cubic-bezier(.16,1,.3,1); --ease-hard:cubic-bezier(.76,0,.24,1); --ease-out:cubic-bezier(.19,1,.22,1); /* alto de la barra superior: lo usa la etapa fija de batallas */ --topbar:74px; /* cinta de peligro · chevrones que apuntan hacia adelante. `--t` es el grosor de cada franja medido sobre el eje del degradado; el paso horizontal del chevrón es t / sin(56°) * 2 = t * 2.4127 */ --tape-lit:var(--amber-hi); --tape-dark:#100E0D; --t:17px; --tape-step:41px; /* = 17px * 2.4127 */ /* ---- texturas ---------------------------------------------------- Tres acabados distintos y reconocibles, no un mismo ruido repetido: --concrete / --grain el MURO. Asfalto y polvo: la calle. --enamel los PANELES. Esmalte industrial sobre chapa. --prism la SEÑALÉTICA. Lámina retrorreflectante, la retícula de microprismas de un cartel de carretera de verdad, vista muy de cerca. ------------------------------------------------------------------ */ /* esmalte: grano finísimo y parejo, el de una superficie pintada y curada */ --enamel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23e)' opacity='0.5'/%3E%3C/svg%3E"); /* microprismas: la retícula en diagonal que hace brillar un cartel vial */ --prism:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0l16 16M16 0L0 16' stroke='%23000' stroke-width='0.6' opacity='0.3'/%3E%3Cpath d='M8 0v16M0 8h16' stroke='%23fff' stroke-width='0.5' opacity='0.24'/%3E%3C/svg%3E"); /* granulado grueso: el picado de la pintura de una señal a la intemperie. Va SOBRE las placas, encima del prisma: es lo que hace que el encabezado se lea como chapa vieja y no como un rectángulo de color plano. */ --grit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='4' seed='23'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"); /* concreto: manchas de ruido reutilizables */ --concrete:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)' opacity='0.6'/%3E%3C/svg%3E"); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } *{box-sizing:border-box} /* `clip` en vez de `hidden`: contiene el desborde horizontal SIN convertir html/body en contenedores de scroll — eso es lo que rompía los `sticky` (la cronología de batallas del panel 05). */ html{overflow-x:clip;scroll-behavior:auto;scrollbar-gutter:stable} html,body{cursor:none} body{ margin:0; overflow-x:clip; background:var(--night); color:var(--paper); font-family:var(--sans); font-stretch:var(--w-wide); font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* el cuerpo fijado es lo único que detiene de verdad el scroll de fondo en iOS; `lock()` guarda y restituye la posición con `top` (ver app.js) */ html.is-locked{overflow:hidden} body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden} a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,179,0,.42)} a:hover{color:var(--paper);border-bottom-color:var(--paper)} ::selection{background:var(--amber);color:var(--ink)} input,textarea,button{font-family:inherit;cursor:none} button{border:none;background:none;color:inherit} img{max-width:100%} :focus-visible{outline:3px solid var(--amber-hi);outline-offset:3px} /* ========================================================================== Animaciones ========================================================================== */ @keyframes bandDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}} @keyframes bandRise{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes curtainUp{to{transform:translateY(-101%)}} @keyframes curtainDown{to{transform:translateY(101%)}} @keyframes introFade{to{opacity:0}} @keyframes introGone{to{visibility:hidden}} @keyframes zoomIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes modalIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} @keyframes tapeRun{to{transform:translateX(var(--tape-step))}} /* El tracking de destino sale de `--ls`, no de un valor fijo: cuando el elemento tenía otro `letter-spacing` propio, la línea se volvía a expandir de golpe al terminar la animación. */ @keyframes kickerSettle{ 0%{opacity:0;letter-spacing:calc(var(--ls,.3em) + .32em);filter:blur(3px)} 100%{opacity:1;letter-spacing:var(--ls,.3em);filter:blur(0)} } @keyframes letterIn{ 0%{opacity:0;transform:translateY(.34em) scaleY(1.12);filter:blur(12px)} 60%{opacity:1} 100%{opacity:1;transform:none;filter:blur(0)} } @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* El rociado. La máscara es un degradado en diagonal que CRECE desde el canto izquierdo: al crecer, su franja de desvanecido se ensancha sola, y esa banda difusa que avanza es lo que se lee como pintura saliendo de una lata. Un canto duro —un `clip-path`— se leía como cortina, no como spray. */ /* El dibujado del recorrido: la lata recorre las cinco pasadas. Lineal a propósito —una mano que rocía va a velocidad constante—; con una curva de frenado el gesto se convierte en una transición y deja de leerse como alguien pintando. */ @keyframes sprayPass{ from{stroke-dashoffset:1} to{stroke-dashoffset:0} } /* Las ocho letras de Anton se apagan debajo de la pieza: no se desvanecen sin más, se van hacia atrás y se difuminan, como si las taparan de pintura. */ @keyframes letterOut{ to{opacity:0;transform:scale(.94) translateY(6px);filter:blur(9px)} } @keyframes introPush{to{transform:scale(1.07)}} /* ========================================================================== Cinta de chevrones · el motivo que cose toda la pieza -------------------------------------------------------------------------- Dos degradados en espejo: la mitad de arriba a 56° ("\") y la de abajo a 124° ("/"). Como ambas cajas miden lo mismo, las franjas se encuentran en la línea media y forman la punta del chevrón sea cual sea el ancho. El pseudo-elemento se desborda a los lados y se desliza un paso completo, así la marcha no tiene costura. ========================================================================== */ .tape-chev{position:relative;overflow:hidden} .tape-chev::before{ content:"";position:absolute;top:0;bottom:0; left:calc(var(--tape-step) * -2);right:calc(var(--tape-step) * -2); background: repeating-linear-gradient(56deg,var(--tape-dark) 0 var(--t),var(--tape-lit) var(--t) calc(var(--t) * 2)) left top/100% 50% no-repeat, repeating-linear-gradient(124deg,var(--tape-dark) 0 var(--t),var(--tape-lit) var(--t) calc(var(--t) * 2)) left bottom/100% 50% no-repeat; animation:tapeRun 3.4s linear infinite; will-change:transform; } .tape-chev--rev::before{ background: repeating-linear-gradient(124deg,var(--tape-dark) 0 var(--t),var(--tape-lit) var(--t) calc(var(--t) * 2)) left top/100% 50% no-repeat, repeating-linear-gradient(56deg,var(--tape-dark) 0 var(--t),var(--tape-lit) var(--t) calc(var(--t) * 2)) left bottom/100% 50% no-repeat; animation-direction:reverse; } /* ========================================================================== Intro · sólo ámbar sobre negro ========================================================================== */ .intro{ position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden; /* +0.32s sobre los 4.32s originales: el relevo de la tipografía a la pieza necesita un respiro al final para leerse, si no se corta en el clímax. `INTRO_MS` en app.js va emparejado con este valor. */ animation:introGone .01s linear 4.64s forwards; } .intro__curtain{ position:absolute;left:0;right:0;height:50.3%; background-color:var(--night); background-image:var(--concrete); background-size:700px 700px; background-blend-mode:soft-light; will-change:transform; } .intro__curtain--top{top:0;animation:curtainUp .98s var(--ease-hard) 3.66s forwards} .intro__curtain--bottom{bottom:0;animation:curtainDown .98s var(--ease-hard) 3.71s forwards} .hazard{position:absolute;left:0;right:0;height:36px;--t:15px;--tape-step:36.2px} .hazard--top{top:0;animation:bandDrop .72s var(--ease-hard) backwards} .hazard--bottom{bottom:0;animation:bandRise .72s var(--ease-hard) .08s backwards} /* Al abrirse las cortinas todo el conjunto empuja hacia el frente: la pieza y la palabra salen juntas, no se desvanecen en su sitio. */ .intro__center{ position:absolute;inset:0;display:grid;place-items:center; animation:introFade .5s ease 3.46s forwards,introPush .92s var(--ease-hard) 3.46s forwards; } .intro__inner{position:relative;text-align:center;padding:0 26px;z-index:2} /* --- la pieza que releva a la tipografía -------------------------------- Ocupa TODA la caja de «DANGER AK» y va centrada en ella: la pieza es la palabra, no un fondo suyo. Anclada a esa caja y medida en porcentaje, el relevo cuadra igual con la tipografía a 58px que a 232px, sin volver a medir. Ya no hace falta velo de contraste: nada se lee POR ENCIMA de la pieza —las letras que tapaba se apagan—, así que va a opacidad plena. `overflow:visible` porque el sobrerrociado se sale del encuadre del SVG; con el recorte que traen los SVG por defecto, el halo acababa en un rectángulo. ------------------------------------------------------------------------ */ .intro__piece{ position:absolute;left:50%;top:50%; width:104%;aspect-ratio:2688/1197; transform:translate(-50%,-50%); overflow:visible;pointer-events:none; } /* El recorrido de la lata: cinco pasadas dibujándose. */ .intro__pass{ stroke-dasharray:1;stroke-dashoffset:1; animation:sprayPass 1.34s linear 1.5s forwards; } .intro__piece-art{filter:drop-shadow(0 18px 44px rgba(0,0,0,.9)) saturate(1.08)} /* El sobrerrociado florece mientras se pinta y después baja: sostenerlo encendido deja la pieza con un halo de neón, que no es lo que hace una lata. */ .intro__piece-mist{ mix-blend-mode:screen;opacity:.62; animation:mistSettle .8s ease 2.72s forwards; } @keyframes mistSettle{to{opacity:.18}} .intro__kicker{ --ls:.3em; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:clamp(10px,1.1vw,13px);letter-spacing:var(--ls); text-transform:uppercase;color:var(--amber-hi); animation:kickerSettle 1.1s var(--ease-out) .14s backwards; } .intro__word{ position:relative; /* En `em` —o sea, en proporción al propio cuerpo de la palabra— porque el hueco que hay que reservar es el sobrante de la pieza, y ese sobrante es proporcional: al ancho completo la pieza mide 1.77 em de alto contra los 0.84 em de la caja de texto, así que sobresale ~0.47 em por arriba y por abajo. Con un valor en píxeles, el kicker y la barra se comían la pieza en unos tamaños de pantalla y sobraba aire en otros. */ margin:.55em 0 .6em; font-family:var(--display);font-size:clamp(58px,15.5vw,232px);line-height:.84; text-transform:uppercase;color:var(--paper);letter-spacing:-.005em; text-shadow:0 0 70px rgba(0,0,0,.85); } .intro__letter{display:inline-block;will-change:transform,filter;animation:letterIn .92s var(--ease-out) var(--d,0s) backwards} /* Las ocho, AK incluido: la pieza releva la palabra entera. El apagado arranca en 1.94s, después de que la K termine de entrar (1.02 + 0.92): si se solapan, la K da un salto al pasar el relevo de una animación a la otra. */ .intro__word .intro__letter{ animation:letterIn .92s var(--ease-out) var(--d,0s) backwards, letterOut .5s var(--ease) 1.94s forwards; } .intro__gap{display:inline-block;width:.2em} .intro__ak{color:var(--amber)} .intro__bar{ width:min(440px,66vw);height:5px;margin:26px auto 0; background:var(--amber);transform-origin:center; animation:barGrow .86s var(--ease-out) 1.44s both; } /* El eslogan cierra la secuencia. Sin botón de saltar: la intro se corta con un clic en cualquier parte o con cualquier tecla (ver initIntro en app.js). */ .intro__slogan{ --ls:.34em; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:clamp(10px,1.15vw,13px);letter-spacing:var(--ls); text-transform:uppercase;color:var(--grey-3);margin:26px 0 0; animation:kickerSettle .95s var(--ease-out) 1.9s backwards; } .intro.is-skip{animation:introGone .01s linear .78s forwards} .intro.is-skip .intro__center{animation:introFade .3s ease forwards} .intro.is-skip .intro__curtain--top{animation:curtainUp .72s var(--ease-hard) .16s forwards} .intro.is-skip .intro__curtain--bottom{animation:curtainDown .72s var(--ease-hard) .21s forwards} /* Al saltar se planta el estado FINAL del relevo —pieza entera, tipografía ya apagada—, no un fotograma intermedio: media pieza rociada parece un fallo de carga, no una decisión. */ .intro.is-skip .intro__pass{animation:none;stroke-dashoffset:0} .intro.is-skip .intro__piece-mist{animation:none;opacity:.18} .intro.is-skip .intro__word .intro__letter{animation:none;opacity:0} /* intro más corta en teléfono. La entrada de las letras se comprime a 0.62× para que el relevo quepa: sin eso, hacer sitio a la pieza alargaba la intro del móvil casi un segundo. */ @media (max-width:700px){ .intro{animation-delay:3.28s} .intro__curtain--top{animation-delay:2.5s} .intro__curtain--bottom{animation-delay:2.55s} .intro__center{animation-delay:2.3s} .intro__letter{animation-duration:.66s;animation-delay:calc(var(--d,0s) * .62)} .intro__word .intro__letter{ animation-duration:.66s,.4s; animation-delay:calc(var(--d,0s) * .62),1.3s; } /* la barra y el eslogan también suben: con los tiempos de escritorio no llegaban a entrar antes de que el conjunto se fuera */ .intro__bar{animation-delay:.98s} .intro__slogan{animation-delay:1.3s} /* las pasadas también corren más. Los valores del filtro no se tocan: van en unidades del viewBox, así que escalan solos con el tamaño en pantalla. */ .intro__pass{animation-duration:.9s;animation-delay:.95s} .intro__piece-mist{animation-delay:1.9s} /* En el teléfono la pieza se pasa del ancho de la caja de texto: ya no acompaña a la tipografía, la sustituye, así que no tiene por qué caber en su hueco —y a 60px de cuerpo se quedaba diminuta con pantalla de sobra—. El margen sube con ella: el sobrante crece en la misma proporción. */ .intro__piece{width:132%} .intro__word{margin:1.04em 0 1.12em} } /* ========================================================================== Cursor · retícula de señalética -------------------------------------------------------------------------- Nada de círculos: cuatro esquinas que encuadran, como la mira de un cartel de obra, y una placa con la acción. El punto vive fuera de esta caja porque persigue al ratón más rápido que la mira —ese desfase es todo el efecto—. ========================================================================== */ .cursor{ --gap:0px; position:fixed;left:0;top:0;z-index:280;pointer-events:none; width:44px;height:44px;margin:-22px 0 0 -22px;will-change:transform; filter:drop-shadow(0 0 1px rgba(0,0,0,.55)); } .cursor__reticle{ position:absolute;inset:0; transition:transform .32s var(--ease); } .cursor.is-active .cursor__reticle{transform:scale(1.28)} /* las esquinas se mueven con `transform` y no con `top/left`: el navegador no recalcula nada, solo compone */ .cursor__corner{ position:absolute;width:11px;height:11px; border:0 solid var(--amber-hi); transition:transform .32s var(--ease),border-color .25s; } .cursor__corner--tl{top:0;left:0;border-top-width:2px;border-left-width:2px;transform:translate(var(--gap),var(--gap))} .cursor__corner--tr{top:0;right:0;border-top-width:2px;border-right-width:2px;transform:translate(calc(var(--gap) * -1),var(--gap))} .cursor__corner--bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;transform:translate(var(--gap),calc(var(--gap) * -1))} .cursor__corner--br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;transform:translate(calc(var(--gap) * -1),calc(var(--gap) * -1))} /* al encontrar algo activable la mira se abre y aprieta las esquinas sobre el objetivo, y cambia de señal: ámbar es precaución, rojo es «aquí se actúa» */ .cursor.is-active{--gap:4px} .cursor.is-active .cursor__corner{border-color:var(--red-hi)} /* la placa con la acción · entra descubriéndose de izquierda a derecha */ .cursor__tag{ position:absolute;left:52px;top:50%;transform:translate(-6px,-50%); white-space:nowrap;padding:7px 10px 6px; background:rgba(11,10,9,.92);border:1px solid rgba(255,179,0,.55); font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--amber-hi); clip-path:inset(0 100% 0 0);opacity:0; transition:clip-path .34s var(--ease),opacity .2s,transform .34s var(--ease); } .cursor__tag:empty{display:none} .cursor.is-active .cursor__tag{clip-path:inset(0 0 0 0);opacity:1;transform:translate(0,-50%)} /* el punto: cuadrado, no círculo · capa propia con su propio retardo */ .cursor-dot{ position:fixed;left:0;top:0;z-index:281;pointer-events:none; width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--amber-hi); will-change:transform;transition:background .25s,width .25s,height .25s,margin .25s; } .cursor-dot.is-active{background:var(--red);width:6px;height:6px;margin:-3px 0 0 -3px} /* ========================================================================== Muro · asfalto nocturno -------------------------------------------------------------------------- Siete capas para que el negro no sea plano: grano de concreto, una veta diagonal muy tenue que da dirección a la superficie, la retícula técnica, los dos halos de señal y el degradado de base. La diagonal es lo que separa esto de un simple ruido: lee como material, no como filtro. ========================================================================== */ .wall{ --wall-pad:28px; position:relative;width:100%;min-height:100vh;padding:0 var(--wall-pad) 120px; background-color:var(--night); background-image: var(--concrete), repeating-linear-gradient(122deg,rgba(255,255,255,.014) 0 2px,rgba(0,0,0,0) 2px 7px), linear-gradient(rgba(255,255,255,.026) 1px,rgba(0,0,0,0) 1px), linear-gradient(90deg,rgba(255,255,255,.026) 1px,rgba(0,0,0,0) 1px), radial-gradient(120% 90% at 16% -8%,rgba(255,179,0,.1),rgba(0,0,0,0) 55%), radial-gradient(110% 85% at 92% 104%,rgba(225,6,0,.09),rgba(0,0,0,0) 52%), linear-gradient(180deg,#0C0B0A,#060505); background-size:700px 700px,auto,180px 92px,180px 92px,100% 100%,100% 100%,100% 100%; background-blend-mode:soft-light,overlay,normal,normal,screen,screen,normal; } /* viñeta doble: una amplia que hunde los cantos y otra alta que asienta el arranque de la página bajo la barra */ .wall::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 16%), radial-gradient(130% 90% at 50% 40%,rgba(0,0,0,0) 42%,rgba(0,0,0,.66) 100%); } .noise{ position:absolute;inset:0;z-index:3;pointer-events:none; mix-blend-mode:overlay;opacity:.52; background-image:var(--grain); } /* ---------- Barra superior ---------- */ /* Sin `flex-wrap`: al envolver, la barra pasaba a dos filas, su alto real se separaba del `--topbar` que consume la etapa fija del panel 05 y la barra de avance quedaba flotando a media altura. Ahora nunca hay segunda fila —por debajo de 980 px entra la hamburguesa— y `--topbar` lo mide el JS. */ .topbar{ position:sticky;top:0;z-index:40; display:flex;align-items:center;justify-content:space-between;gap:18px; padding:14px 0 15px; /* Opaca de arriba abajo. Con el degradado a transparente, la cinta de chevrones y las placas ámbar se veían pasar POR ENCIMA de la barra al hacer scroll. La banda se sale del `--wall-pad` para tapar de canto a canto y el desvanecido queda fuera, ya por debajo del borde. */ background:transparent; } .topbar::before{ content:"";position:absolute;top:0;bottom:0;z-index:-1; left:calc(var(--wall-pad,28px) * -1);right:calc(var(--wall-pad,28px) * -1); background:#070606; background-image:var(--concrete),linear-gradient(180deg,#0E0C0B,#060505); background-size:700px 700px,100% 100%; background-blend-mode:soft-light,normal; box-shadow:0 14px 26px -14px rgba(0,0,0,.95); } .brand{ font-family:var(--display);font-size:clamp(22px,2.6vw,32px);letter-spacing:.02em; text-transform:uppercase;color:var(--paper);border:none; text-shadow:2px 2px 0 rgba(0,0,0,.7),0 0 26px rgba(255,179,0,.4); } .brand:hover{color:var(--paper)} .brand__dot{color:var(--red-hi)} /* Un riel, no ocho botones. Los ocho recuadros sueltos competían con las placas de señal de las secciones; en un solo bloque de vidrio oscuro la barra deja de gritar y la sección en pantalla se marca con un bloque ámbar que se DESLIZA de un ítem a otro (lo coloca initNavInk en app.js). */ .topnav{ position:relative;isolation:isolate;display:flex;gap:0;min-width:0; /* sin `backdrop-filter`: detrás solo hay la banda opaca de la barra, así que desenfocar no se vería y sí costaría pintarlo en cada frame de scroll */ background:rgba(8,7,6,.62); border:1px solid rgba(237,230,216,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px -18px rgba(0,0,0,1); } .topnav__ink{ position:absolute;left:0;top:0;bottom:0;z-index:-1;width:0; background:var(--amber);opacity:0; transition:transform .5s var(--ease),width .5s var(--ease),background .3s,opacity .3s; } .topnav__ink.is-on{opacity:1} .topnav__ink.is-accent{background:var(--amber-hi)} .topnav a{ position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--grey-3);background:transparent;padding:10px 14px;border:none; transition:background .25s,color .25s; } .topnav a+a{border-left:1px solid rgba(237,230,216,.1)} .topnav a b{font-weight:inherit;color:rgba(207,199,185,.42);transition:color .25s} .topnav a:hover{color:var(--paper-hi);background:rgba(255,179,0,.08)} .topnav a:hover b{color:rgba(255,179,0,.7)} /* la sección estrella: Academia · solo tinta, sin caja propia */ .topnav a.is-accent{color:var(--amber-hi)} .topnav a.is-accent b{color:rgba(255,212,0,.5)} .topnav a.is-accent:hover{color:var(--amber-hi);background:rgba(255,179,0,.14)} /* Sección en pantalla · el texto se invierte sobre el bloque que viaja detrás */ .topnav a[aria-current], .topnav a.is-accent[aria-current], .topnav a[aria-current]:hover{color:var(--ink);background:transparent} .topnav a[aria-current] b, .topnav a.is-accent[aria-current] b{color:rgba(28,25,23,.55)} /* barra de avance del scroll, a sangre bajo la barra superior */ .progress{ position:absolute;bottom:0;height:3px; left:calc(var(--wall-pad,28px) * -1);right:calc(var(--wall-pad,28px) * -1); background:rgba(237,230,216,.1); border-top:1px solid rgba(0,0,0,.6); } .progress__fill{ display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center; background:linear-gradient(90deg,var(--amber) 0 50%,var(--red) 50% 100%); } /* ---------- Hamburguesa ---------- */ .burger{ display:none;align-items:center;gap:11px;min-height:44px; padding:0 14px;border:1px solid rgba(237,230,216,.24);background:rgba(0,0,0,.5); transition:background .25s,border-color .25s; } .burger:hover{border-color:var(--amber);background:rgba(255,179,0,.12)} .burger__box{position:relative;display:block;width:24px;height:14px;flex:none} .burger__line{ position:absolute;left:0;height:2px;width:100%;background:var(--paper); transition:transform .38s var(--ease),opacity .2s,background .25s,width .3s; } .burger__line:nth-child(1){top:0} .burger__line:nth-child(2){top:6px;width:70%;background:var(--amber)} .burger__line:nth-child(3){top:12px;background:var(--red)} .burger__text{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-4)} .burger.is-open .burger__line:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.is-open .burger__line:nth-child(2){opacity:0;transform:translateX(-14px)} .burger.is-open .burger__line:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Sin tope de ancho: los paneles ocupan el muro entero y son sus propios `--pad-x` y los topes de PROSA (.deck, .body-text) los que sostienen la legibilidad. Un `max-width` aquí encajonaba el sitio en pantallas grandes. */ .stack{ position:relative;z-index:5; display:flex;flex-direction:column;gap:52px;padding-top:40px; } /* ---------- División de peligro entre paneles ---------- Cinta tendida de lado a lado del muro. Se sale del ancho del `stack` a propósito (104vw) para que las puntas queden fuera de cuadro. Siempre ámbar: es la señal constante que cose el muro. */ .divider{ flex:none;width:104vw;margin-left:calc(50% - 52vw); transform:rotate(var(--rot,0deg)); } .divider:nth-of-type(odd){--rot:-.42deg} .divider:nth-of-type(even){--rot:.38deg} .divider__tape{height:40px;box-shadow:0 16px 34px -18px rgba(0,0,0,.95)} /* brillo de plástico: separa la cinta del muro sin añadir otro color */ .divider__tape::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 32%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.26)); } /* ========================================================================== Paneles de señalética -------------------------------------------------------------------------- Cada sección es un panel atornillado al muro: borde grueso, cuatro remaches y una señal dominante. Nada gira y nada se levanta al pasar el cursor — una señal atornillada se queda donde está. ========================================================================== */ .sheet{ position:relative;isolation:isolate; background-color:var(--sheet-bg,var(--steel)); color:var(--ink); border:4px solid var(--plate-edge,rgba(28,25,23,.9)); /* la chapa se levanta del muro: sombra proyectada + filo claro arriba */ box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 26px 56px -30px rgba(0,0,0,.98); --pad-x:clamp(20px,4vw,58px); } /* ESMALTE · el acabado de los paneles. Grano fino de pintura curada + una luz cenital ancha que cae desde el canto superior izquierdo, como la que recibe una chapa colgada en un muro. Va en `::after` a z-index negativo: cubre el panel entero sin tocar el contenido. */ .sheet::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: radial-gradient(120% 80% at 12% -10%,rgba(255,255,255,.16),rgba(255,255,255,0) 58%), radial-gradient(90% 70% at 88% 108%,rgba(0,0,0,.16),rgba(0,0,0,0) 62%), var(--enamel); background-size:100% 100%,100% 100%,300px 300px; background-blend-mode:normal,normal,soft-light; opacity:.95; } .sheet--dark::after{ background-image: radial-gradient(120% 80% at 12% -10%,rgba(255,255,255,.07),rgba(255,255,255,0) 58%), radial-gradient(90% 70% at 88% 108%,rgba(0,0,0,.34),rgba(0,0,0,0) 62%), var(--enamel); opacity:.82; } /* remaches: cuatro círculos en un solo pseudo-elemento */ .sheet::before{ content:"";position:absolute;inset:13px;z-index:6;pointer-events:none; background-image: radial-gradient(circle at 50% 50%,var(--bolt-hi) 0 22%,var(--bolt) 24% 62%,var(--bolt-sh) 64% 100%,transparent 100%), radial-gradient(circle at 50% 50%,var(--bolt-hi) 0 22%,var(--bolt) 24% 62%,var(--bolt-sh) 64% 100%,transparent 100%), radial-gradient(circle at 50% 50%,var(--bolt-hi) 0 22%,var(--bolt) 24% 62%,var(--bolt-sh) 64% 100%,transparent 100%), radial-gradient(circle at 50% 50%,var(--bolt-hi) 0 22%,var(--bolt) 24% 62%,var(--bolt-sh) 64% 100%,transparent 100%); background-position:0 0,100% 0,0 100%,100% 100%; background-size:11px 11px; background-repeat:no-repeat; --bolt:rgba(28,25,23,.5);--bolt-hi:rgba(28,25,23,.24);--bolt-sh:rgba(28,25,23,.72); } .sheet--dark{ background:var(--sheet-bg,var(--panel));color:var(--paper); --plate-edge:rgba(237,230,216,.28); } .sheet--dark::before{--bolt:rgba(237,230,216,.34);--bolt-hi:rgba(237,230,216,.6);--bolt-sh:rgba(237,230,216,.14)} /* paneles cuyo contenido sangra hasta el canto: la imagen manda */ .sheet--flush{overflow:hidden} /* Rotación estricta de señales: ámbar, rojo, ámbar, rojo… */ .sheet--1{--sig:var(--amber);--sig-ink:var(--amber);--sig-on:var(--ink)} .sheet--2{--sig:var(--red);--sig-ink:var(--red-ink);--sig-on:var(--paper-hi)} .sheet--3{--sig:var(--amber);--sig-ink:var(--amber);--sig-on:var(--ink)} .sheet--4{--sig:var(--red);--sig-ink:var(--red-ink);--sig-on:var(--paper-hi)} .sheet--5{--sig:var(--amber);--sig-ink:var(--amber-ink);--sig-on:var(--ink)} .sheet--6{--sig:var(--red);--sig-ink:var(--red-hi);--sig-on:var(--paper-hi)} .sheet--7{--sig:var(--amber);--sig-ink:var(--amber-ink);--sig-on:var(--ink)} .sheet--8{--sig:var(--red);--sig-ink:var(--red-hi);--sig-on:var(--paper-hi)} .sheet--9{--sig:var(--amber);--sig-ink:var(--amber-ink);--sig-on:var(--ink)} .sheet__body{padding:clamp(30px,4.2vw,56px) var(--pad-x) clamp(42px,5.2vw,74px)} .sheet--flush>.sheet__body{padding-top:clamp(30px,4vw,50px)} /* la 05 contiene un `sticky`: los remaches del contenedor completo caerían a mitad del recorrido, así que ahí los pinta la etapa fija */ .sheet--5::before{display:none} .battle-stage::before{ content:"";position:absolute;inset:9px;z-index:6;pointer-events:none; background-image: radial-gradient(circle at 50% 50%,rgba(28,25,23,.24) 0 22%,rgba(28,25,23,.5) 24% 62%,rgba(28,25,23,.72) 64% 100%,transparent 100%), radial-gradient(circle at 50% 50%,rgba(28,25,23,.24) 0 22%,rgba(28,25,23,.5) 24% 62%,rgba(28,25,23,.72) 64% 100%,transparent 100%); background-position:0 0,100% 0; background-size:11px 11px; background-repeat:no-repeat; } /* ========================================================================== LA PLACA DE SEÑAL · el componente que cose todo el sitio -------------------------------------------------------------------------- Una señal industrial de verdad, con las cuatro capas de la referencia: reborde blanco → borde negro grueso → campo de color → pictograma El pictograma va en su propia caja, separado del texto por una regla negra maciza. El número vive DENTRO del título, pegado a su caja. ========================================================================== */ .sign{ position:relative;display:grid;gap:clamp(9px,1.1vw,13px); margin:0 0 clamp(26px,3.6vw,44px);justify-items:start; } .sign__tape{ display:block;height:10px;justify-self:start;width:min(100%,340px); --t:5px;--tape-step:12.1px;--tape-lit:var(--sig); } /* la placa: campo pleno de la señal de la sección, con reborde blanco. Su textura es DISTINTA a la del panel que la sostiene: lámina retrorreflectante —retícula de microprismas y un destello diagonal— en vez del esmalte mate de la chapa. Es lo que hace que se lea como una señal pegada encima y no como parte del fondo. */ .sign__plate{ position:relative;isolation:isolate; display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch; max-width:100%; background:var(--sig);color:var(--sig-on); border:4px solid var(--ink); box-shadow:0 0 0 3px var(--paper-hi),0 20px 40px -26px rgba(0,0,0,.95); /* el reborde blanco necesita aire propio para no comerse al vecino */ margin:3px 3px 3px 0; } .sheet--dark .sign__plate{box-shadow:0 0 0 3px var(--paper-hi),0 20px 40px -22px rgba(0,0,0,1)} /* Tres capas y no una: el destello diagonal, la retícula de microprismas y —lo que de verdad se nota— el granulado grueso de la pintura. En `overlay` la textura sobrevive tanto al campo ámbar como al rojo. */ .sign__plate::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(104deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 62%,rgba(255,255,255,.14) 78%,rgba(255,255,255,0) 92%), var(--grit), var(--prism); background-size:100% 100%,220px 220px,14px 14px; background-blend-mode:normal,overlay,normal; mix-blend-mode:overlay; } /* pictograma: caja cuadrada a la izquierda, dividida por la regla negra */ .sign__ico{ display:grid;place-items:center;flex:none; width:clamp(58px,7vw,96px);padding:clamp(10px,1.1vw,14px); border-right:4px solid var(--ink); } .sign__ico svg{display:block;width:100%;height:auto;max-height:76px} .sign__lines{ display:grid;gap:clamp(7px,.9vw,11px);align-content:center;min-width:0; padding:clamp(12px,1.6vw,20px) clamp(14px,2vw,26px); } .sign__title{ display:flex;align-items:center;flex-wrap:wrap; column-gap:clamp(10px,1.3vw,16px);row-gap:6px; font-family:var(--display);font-weight:400; font-size:clamp(30px,5.2vw,64px);line-height:.9; letter-spacing:-.005em;text-transform:uppercase; color:inherit;margin:0;text-wrap:balance;overflow-wrap:anywhere; /* la tinta se hunde en la chapa: luz por debajo, sombra por arriba */ text-shadow:0 1px 0 rgba(255,255,255,.2),0 -1px 0 rgba(0,0,0,.26); } /* el número invierte la señal: bloque de tinta sobre el campo de color */ .sign__num{ flex:none;align-self:center;text-shadow:none; font-size:.42em;line-height:1;padding:.26em .34em .18em; background:var(--sig-on);color:var(--sig); font-variant-numeric:tabular-nums;letter-spacing:.02em; } .sign__sub{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:clamp(9.5px,1.05vw,11.5px);letter-spacing:.22em; text-transform:uppercase;color:inherit;opacity:.82;margin:0; border-top:3px solid currentColor;padding-top:10px;max-width:60ch; } /* variante compacta: etapa de batallas, placa TEDx y el laboratorio */ .sign--slim .sign__plate{border-width:3px;box-shadow:0 0 0 2px var(--paper-hi),0 16px 32px -24px rgba(0,0,0,.95)} .sign--slim{margin-bottom:0} .sign--slim .sign__ico{width:clamp(46px,5vw,66px);padding:9px;border-right-width:3px} .sign--slim .sign__lines{padding:clamp(10px,1.2vw,15px) clamp(12px,1.5vw,20px)} .sign--slim .sign__title{font-size:clamp(21px,2.9vw,38px)} /* dentro de la etapa fija cada píxel de alto es foto: la señal se aprieta */ .battle-top .sign__ico{width:clamp(40px,4vw,54px);padding:7px} .battle-top .sign__lines{padding:8px 12px 9px} .battle-top .sign__title{font-size:clamp(19px,2.3vw,30px)} .battle-top .sign__sub{padding-top:6px} .sign--slim .sign__sub{border-top-width:2px;padding-top:8px} .sign--hero .sign__title{font-size:clamp(30px,4.4vw,60px)} /* ========================================================================== Piezas compartidas ========================================================================== */ /* el deck: Archivo estrecha y semi-negra, sin cursiva. Es la voz que sustituye a la vieja bastardilla del hero. */ .deck{ font-family:var(--sans);font-stretch:var(--w-mid);font-weight:600; font-size:clamp(18px,2.05vw,26px);line-height:1.26;letter-spacing:-.008em; color:var(--ink-3);margin:0;max-width:34ch;text-wrap:balance; } .sheet--dark .deck,.tedx .deck{color:var(--paper)} .deck--hero{max-width:30ch;color:var(--paper)} .body-text{font-size:16px;line-height:1.68;color:var(--ink-2);margin:0;max-width:64ch;text-wrap:pretty} .sheet--dark .body-text,.tedx .body-text{color:var(--grey-2)} .label{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--grey-ink);margin:0 0 12px;display:block; } .label--sig{color:var(--sig-ink)} .label--onDark{ color:var(--amber);border-bottom:1px solid rgba(237,230,216,.18); padding-bottom:11px;margin-bottom:20px; } .field-label{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--grey);margin-bottom:6px;display:block; } .cta{ border:none;flex:none;display:inline-flex;align-items:center;gap:10px; min-height:52px;padding:0 26px; font-family:var(--display);font-size:clamp(15px,1.5vw,18px);letter-spacing:.09em; text-transform:uppercase;white-space:nowrap; background:var(--red);color:var(--paper-hi); box-shadow:5px 5px 0 rgba(28,25,23,.9); transition:background .25s,box-shadow .25s,color .25s,border-color .25s; } .cta::after{content:"→";font-family:var(--sans);font-weight:700;font-size:.9em} .cta:hover{background:var(--amber);color:var(--ink);border-bottom:none;box-shadow:7px 7px 0 rgba(28,25,23,.9)} .cta--amber{background:var(--amber);color:var(--ink)} .cta--amber:hover{background:var(--amber-hi);color:var(--ink)} .cta--ghost{ background:transparent;color:var(--paper); border:1px solid rgba(237,230,216,.42);box-shadow:none; } .cta--ghost:hover{background:var(--paper-hi);color:var(--ink);border-color:var(--paper-hi);box-shadow:none} /* El mismo botón de contorno, pero para panel CLARO: `--ghost` va en hueso y sobre acero desaparece. Variante aparte y no un `.sheet--dark .cta--ghost` para no reescribir la cascada del botón que ya vive en el hero. */ .cta--ghost-ink{ background:transparent;color:var(--ink); border:1px solid rgba(28,25,23,.4);box-shadow:none; } .cta--ghost-ink:hover{background:var(--ink);color:var(--paper-hi);border-color:var(--ink);box-shadow:none} .cta--xl{ min-height:68px;padding:0 34px;font-size:clamp(19px,2.4vw,30px); box-shadow:7px 7px 0 rgba(28,25,23,.92); } /* El imantado interpola `transform` frame a frame desde JS. Una transición CSS encima del mismo `transform` lo frena, así que en los elementos imantados solo transicionan el color y la sombra. */ [data-magnetic]{transition-property:background,background-color,color,border-color,box-shadow,opacity} /* ---------- Imágenes ---------- El badge se ve siempre: en teléfono no hay hover que lo revele. */ .zoom-badge{ position:absolute;right:10px;top:10px;z-index:4;pointer-events:none; opacity:.82;transform:none;transition:opacity .3s,background .3s,color .3s; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; padding:8px 11px;background:rgba(11,10,9,.78);color:var(--amber-hi); border:1px solid rgba(255,179,0,.5); } .zoom-badge::before{content:"⤢ ";} [data-img-hover]:hover .zoom-badge{opacity:1;background:var(--amber);color:var(--ink);border-color:var(--amber)} [data-img-hover] img{transition:transform .7s var(--ease)} [data-img-hover]:hover img{transform:scale(1.045)} /* ---------- View Transitions al abrir una imagen o una ficha ---------- */ #lightbox-img{view-transition-name:vt-zoom} #modal-art{view-transition-name:vt-card} ::view-transition-group(vt-zoom), ::view-transition-group(vt-card){ animation-duration:.62s; animation-timing-function:cubic-bezier(.16,1,.3,1); } /* las capturas se recortan igual en los dos extremos: sin estirones */ ::view-transition-old(vt-zoom),::view-transition-new(vt-zoom), ::view-transition-old(vt-card),::view-transition-new(vt-card){ width:100%;height:100%;object-fit:cover;mix-blend-mode:normal; } ::view-transition-old(root),::view-transition-new(root){animation-duration:.42s} /* con View Transitions la entrada ya la da el morfeo: las animaciones de apertura propias sobrarían y pelearían con la geometría capturada */ @supports (view-transition-name:none){ .lightbox__frame{animation:none} .modal__card{animation:none} } /* ========================================================================== 01 · Muro · hero partido -------------------------------------------------------------------------- El retrato ya no es un fondo bajo un velo casi opaco —así no se veía—: vive en su propio marco atornillado, a la derecha, con el velo reducido a una caída en el canto izquierdo que lo cose con el texto. El panel se cierra con una franja de cifras a todo el ancho y no pasa de una pantalla. ========================================================================== */ .hero{ position:relative;isolation:isolate;overflow:hidden; /* El panel arranca bajo la barra y bajo el aire del `stack`: descontarlos es lo que hace que el hero entero —franja de cifras incluida— quepa en la primera pantalla en vez de asomar por debajo. `min-height` y no `height`: en pantallas bajas el alto fijo obligaba a la columna de texto a desbordar su fila y el directorio de redes acababa pisando la franja de cifras. Con `min-content` como suelo, la fila crece lo que haga falta y el panel deja de encogerse por debajo de su contenido. */ min-height:calc(100svh - var(--topbar) - 46px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-rows:minmax(min-content,1fr) auto; background:var(--night); } /* La pieza pintada en el muro. Va detrás de todo y muy apagada: no es una ilustración sobre el panel, es el acabado del panel. La máscara la apaga hacia arriba y hacia la derecha para que no llegue nunca al titular, y el `z-index:0` la deja por debajo de las tres piezas en flujo —que suben a 1— porque de lo contrario, al estar posicionada, pintaría sobre la franja de cifras. */ .hero__piece{ position:absolute;z-index:0;pointer-events:none; left:calc(var(--pad-x) * -.5);bottom:-7%; width:min(880px,50vw); transform:rotate(-2.6deg);transform-origin:0 100%; opacity:.5; -webkit-mask-image:linear-gradient(74deg,#000 34%,rgba(0,0,0,.55) 68%,transparent 94%); mask-image:linear-gradient(74deg,#000 34%,rgba(0,0,0,.55) 68%,transparent 94%); } .hero__piece img{display:block;width:100%;height:auto;filter:saturate(1.16) contrast(1.06)} .hero__inner{ z-index:1; position:relative;min-width:0;align-content:center; padding:clamp(24px,3vw,48px) clamp(20px,2.4vw,40px) clamp(24px,3vw,44px) var(--pad-x); display:grid;gap:clamp(16px,2vw,26px); } /* el marco: la foto enmarcada como una pieza más atornillada al muro */ .hero__frame{ position:relative;z-index:1;overflow:hidden;min-width:0; border-left:4px solid rgba(237,230,216,.22); background:#0F0D0C; } .hero__bg{ position:absolute;inset:0; width:100%;height:100%;object-fit:cover;object-position:50% 12%; } /* velo mínimo: solo lo justo para fundir el canto izquierdo con el texto */ .hero__scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(11,10,9,.88) 0%,rgba(11,10,9,.3) 22%,rgba(11,10,9,0) 46%); } /* halo ámbar bajo, para que el marco no corte en seco contra el muro */ .hero__glow{ position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(74% 46% at 8% 96%,rgba(255,179,0,.2),rgba(0,0,0,0) 70%); } .hero__facts{ grid-column:1 / -1;position:relative;z-index:1; display:flex;flex-wrap:wrap;list-style:none;margin:0; padding:0 var(--pad-x); border-top:1px solid rgba(237,230,216,.22); } .hero__facts li{ flex:1 1 108px;min-width:0;display:grid;gap:3px; padding:clamp(12px,1.5vw,18px) 16px clamp(13px,1.6vw,19px) 0; } .hero__facts li+li{border-left:1px solid rgba(237,230,216,.16);padding-left:16px} .hero__facts b{ font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,42px); line-height:.92;color:var(--amber);font-variant-numeric:tabular-nums; } .hero__facts span{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)} .hero__actions{display:flex;flex-wrap:wrap;gap:12px} /* directorio compacto: solo iconos, dentro del hero */ .social{display:flex;flex-wrap:wrap;gap:8px} .social a{ width:46px;height:46px;display:grid;place-items:center; border:1px solid rgba(237,230,216,.26);background:rgba(11,10,9,.55); color:var(--grey-3); transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease); } .social a:hover{background:var(--amber);color:var(--ink);border-color:var(--amber);transform:translateY(-3px)} .social a:nth-child(even):hover{background:var(--red);color:var(--paper-hi);border-color:var(--red)} .social svg{width:19px;height:19px;display:block;fill:currentColor} /* el expediente: los tres párrafos de biografía, ya fuera de la imagen */ .sheet__body--file{display:grid;gap:clamp(30px,4vw,48px);background:var(--panel)} .file__cols{columns:2;column-gap:clamp(26px,3.4vw,44px);font-size:16px;line-height:1.7;color:var(--grey-2)} .file__cols p{margin:0 0 15px;break-inside:avoid;text-wrap:pretty} .file__cols p:last-child{margin:0} /* ========================================================================== 02 · Álbumes · rejilla de portadas que abren la ficha ========================================================================== */ .covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:clamp(12px,1.5vw,18px)} .cover{ position:relative;display:block;width:100%;padding:0;overflow:hidden;text-align:left; aspect-ratio:1/1.22;border:1px solid var(--ink);background:var(--panel); box-shadow:0 16px 32px -22px rgba(0,0,0,.95); transition:box-shadow .35s,transform .35s var(--ease); } .cover:hover{box-shadow:0 26px 46px -22px rgba(0,0,0,.95);transform:translateY(-4px)} .cover__art{ position:absolute;inset:0;background-size:cover;background-position:center; transition:transform .7s var(--ease); } .cover:hover .cover__art{transform:scale(1.06)} .cover__cap{ position:absolute;left:0;right:0;bottom:0;padding:16px 14px 14px; background:linear-gradient(to top,rgba(11,10,9,.97) 12%,rgba(11,10,9,0)); } .cover__title{ font-family:var(--display);font-weight:400;font-size:clamp(14px,1.35vw,18px); line-height:1.06;text-transform:uppercase;color:var(--paper); text-wrap:balance;overflow-wrap:anywhere; } .cover__meta{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:6px} /* afordance siempre visible: en teléfono no hay hover que lo descubra */ .cover__open{ position:absolute;right:0;top:0;z-index:2; width:38px;height:38px;display:grid;place-items:center; background:var(--sig);color:var(--sig-on); font-family:var(--sans);font-weight:700;font-size:15px; transition:width .3s var(--ease),background .25s; } .cover:hover .cover__open{width:46px;background:var(--amber-hi);color:var(--ink)} .covers__foot{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2.2vw,26px); border-top:3px solid var(--sig); } .covers__note{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--grey-ink);margin:0;font-variant-numeric:tabular-nums; } /* listado de canciones · vive dentro de la ficha modal */ .tracklist__head{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--sig-ink);margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid rgba(28,25,23,.3); } .tracklist{list-style:none;margin:0;padding:0} .track{border-bottom:1px solid rgba(28,25,23,.16)} .track a{ display:flex;align-items:center;gap:14px;min-height:48px;padding:8px 8px 8px 4px; border:none;color:var(--ink);transition:background .2s,padding-left .25s var(--ease); } .track a:hover{background:rgba(255,179,0,.2);color:var(--ink);padding-left:10px} .track__num{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.1em;color:var(--red-ink); width:24px;flex:none;font-variant-numeric:tabular-nums; } .track a:hover .track__num{color:transparent} .track__num{position:relative} .track a:hover .track__num::after{ content:"▶";position:absolute;left:0;top:50%;transform:translateY(-50%); color:var(--red);font-size:11px; } .track__title{ flex:1;min-width:0;font-family:var(--sans);font-stretch:var(--w-narrow);font-weight:600; font-size:17px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink); } .track__len{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;color:var(--grey-ink);flex:none;font-variant-numeric:tabular-nums} .spotify-btn{ display:inline-flex;align-items:center;gap:10px;border:none;min-height:48px;padding:0 18px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; background:var(--ink);color:var(--paper-hi);justify-self:start; transition:background .25s,color .25s; } /* `display:inline-flex` de arriba gana al `[hidden]{display:none}` del navegador: sin esto, la ficha de un proyecto —que no tiene disco— seguía mostrando el botón de Spotify del último álbum abierto. */ .spotify-btn[hidden]{display:none} .spotify-btn:hover{background:var(--sig);color:var(--sig-on);border-bottom:none} .spotify-btn__ico{width:17px;height:17px;flex:none;fill:currentColor} /* Apple Music es la segunda puerta, no otra principal: misma pieza en versión perfilada para que el par se lea como primaria + alternativa. */ .spotify-btn--apple{background:transparent;color:var(--ink);border:1px solid var(--ink)} .spotify-btn--apple:hover{background:var(--ink);color:var(--paper-hi)} /* las dos plataformas comparten fila y bajan juntas cuando no caben */ .covers__links,.modal__listen{display:flex;flex-wrap:wrap;gap:10px} .modal__listen[hidden]{display:none} /* ========================================================================== 03 · Hitos ========================================================================== */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px} .stat{ background:var(--panel-2);border:1px solid rgba(237,230,216,.2);padding:24px 22px; border-top:5px solid var(--red); } .stat:nth-child(even){border-top-color:var(--amber)} .stat__num{ font-family:var(--display);font-weight:400;font-size:clamp(36px,4.4vw,56px);line-height:.94; color:var(--paper);font-variant-numeric:tabular-nums; } .stat__unit{font-size:.52em;color:var(--amber)} .stat:nth-child(even) .stat__unit{color:var(--red-hi)} .stat__label{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;line-height:1.55;color:var(--grey-2)} /* ---------- galería de la sección ---------- Mosaico de cuatro piezas: la principal ocupa dos columnas y dos filas, la última se estira para que no quede hueco. */ .gallery{ display:grid;grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(118px,14vw,182px); gap:10px;margin-top:clamp(34px,4vw,52px); } .shot{ position:relative;overflow:hidden;line-height:0;margin:0; border:1px solid rgba(237,230,216,.2);background:var(--panel-2); } .shot img{width:100%;height:100%;object-fit:cover;display:block} .shot--lead{grid-column:span 2;grid-row:span 2} .shot:last-child{grid-column:span 2} .shot__cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 12px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--grey-3);line-height:1.5; background:linear-gradient(to top,rgba(11,10,9,.94) 20%,rgba(11,10,9,0)); } .shot__cap b{color:var(--amber);font-weight:inherit;display:block} .shot .zoom-badge{right:8px;top:8px} /* el pie de la pieza principal sube y su badge baja: abajo a la izquierda van los avales atornillados. Va después de `.shot .zoom-badge` a propósito: misma especificidad, así que el orden es lo que decide `top`. */ .shot--lead .shot__cap{ bottom:auto;top:0;padding:14px 14px 22px; background:linear-gradient(to bottom,rgba(11,10,9,.94) 20%,rgba(11,10,9,0)); } .shot--lead .zoom-badge{top:auto;bottom:10px} /* los avales salen POR FUERA de la ficha del hito: se montan sobre el canto inferior de la pieza principal de la galería, como placas atornilladas */ .avales{ position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:10px; margin:-34px 0 0 clamp(14px,2vw,26px); } .aval{ display:flex;align-items:center;gap:11px;padding:8px; background:var(--panel);border:1px solid rgba(237,230,216,.32); box-shadow:0 16px 32px -18px rgba(0,0,0,1); } .aval img{width:52px;height:52px;flex:none;display:block;object-fit:cover} .aval span{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--grey-2);line-height:1.5;max-width:22ch;padding-right:10px; } .aval b{display:block;color:var(--amber);font-weight:inherit} /* Son NUEVE hitos: con `auto-fit` caían cuatro columnas y el noveno quedaba huérfano en una fila para él solo. Tres columnas fijas dan 3 × 3 exacto. */ .milestones{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;margin-top:clamp(30px,3.6vw,46px); } .milestone{ background:var(--panel-2);border:1px solid rgba(237,230,216,.18);padding:24px 22px; border-left:4px solid var(--amber); } .milestone:nth-child(even){border-left-color:var(--red)} .milestone__kind{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)} .milestone:nth-child(even) .milestone__kind{color:var(--red-hi)} .milestone__title{ font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1; text-transform:uppercase;color:var(--paper);margin:10px 0 0; } .milestone__detail{font-size:15px;line-height:1.6;color:var(--grey-2);margin:11px 0 0;text-wrap:pretty} /* ========================================================================== 04 · Proyectos · tres fichas a lo ancho del panel ========================================================================== */ /* Cinco programas en una sola tira: la fila entera se lee de un vistazo y no queda una ficha huérfana abriendo una segunda fila. */ .projects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.5vw,18px)} .project{ position:relative;aspect-ratio:4/5;overflow:hidden; border:1px solid rgba(28,25,23,.5);background:var(--ink); box-shadow:0 12px 26px -18px rgba(0,0,0,.85); transition:box-shadow .4s,transform .4s var(--ease); --pv:var(--amber); } .project:nth-child(even){--pv:var(--red)} .project:hover{transform:translateY(-6px);box-shadow:0 26px 48px -22px rgba(0,0,0,.95)} .project__art{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)} .project:hover .project__art{transform:scale(1.05)} .project__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,10,9,.96) 12%,rgba(11,10,9,.05) 64%)} /* afordance siempre visible, no un velo que solo existe con ratón */ .project__open{ position:absolute;right:0;top:0;z-index:3; min-height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 12px; background:var(--pv);color:var(--ink); font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase; transition:padding .3s var(--ease),background .25s; } .project:nth-child(even) .project__open{color:var(--paper-hi)} .project:hover .project__open{padding:0 18px} .project__text{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.9vw,24px)} .project__kind{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--pv)} .project:nth-child(even) .project__kind{color:var(--red-hi)} .project__title{ font-family:var(--display);font-weight:400;font-size:clamp(19px,1.95vw,27px); line-height:.98;letter-spacing:-.008em;text-transform:uppercase;color:var(--paper); margin-top:9px;text-wrap:balance;text-shadow:2px 2px 0 rgba(11,10,9,.92); } /* ========================================================================== 05 · Batallas · escenario a sangre -------------------------------------------------------------------------- Tres bandas: cabecera delgada, foto ocupando todo el alto restante y riel de cronología pegado abajo. La foto entera es el enlace a la batalla. ========================================================================== */ .battle-track{position:relative;height:640vh} /* Toda la holgura que se le quita a la cabecera, al hueco y al pie se la queda la foto, que es lo único que interesa mirar aquí. */ .battle-stage{ position:sticky;top:0;height:100svh;overflow:hidden; display:grid;grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(8px,1vw,13px); padding:calc(var(--topbar) + 4px) var(--pad-x) clamp(10px,1.4vw,16px); } /* Sin esto, el `min-width:auto` de los ítems de rejilla deja que el ancho mínimo del riel de años (diez fichas de 116 px en teléfono) estire toda la etapa a 1160 px. El desborde quedaba invisible por el `overflow-x:clip` de html, pero la foto y el botón se salían de la pantalla. */ .battle-stage>*{min-width:0} .battle-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;min-width:0} .battle-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0} .battle-counter{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink);border:1px solid rgba(28,25,23,.45);border-left:4px solid var(--sig); padding:10px 13px;white-space:nowrap;margin:0;font-variant-numeric:tabular-nums; } /* la pista de scroll · sin caja ni color de señal, solo una línea que respira. Se apaga sola al llegar a la segunda batalla. */ .battle-hint{ display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.2em; text-transform:uppercase;color:rgba(28,25,23,.5); opacity:1;transition:opacity .5s var(--ease); } .battle-hint.is-off{opacity:0} .battle-hint__arrow{ width:9px;height:9px;flex:none; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg); animation:hintNudge 2.4s var(--ease) infinite; } @keyframes hintNudge{ 0%,64%,100%{transform:rotate(45deg) translate(0,0)} 80%{transform:rotate(45deg) translate(2.5px,2.5px)} } /* ---- la foto: todo el ancho, todo el alto disponible, y es un enlace ---- */ .battle-photo{ position:relative;display:block;overflow:hidden;min-height:0; border:1px solid var(--ink);background:#0F0D0C; transition:box-shadow .35s; } .battle-photo:hover{box-shadow:0 0 0 3px var(--sig)} .battle-photo__art{ position:absolute;inset:0;background-size:cover;background-position:center 30%; transition:opacity .5s var(--ease),transform 1.6s var(--ease);transform:scale(1.03); } .battle-photo:hover .battle-photo__art{transform:scale(1.06)} .battle-photo__scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(11,10,9,.95) 8%,rgba(11,10,9,.04) 62%); } .battle-photo__info{ position:absolute;left:clamp(18px,2.6vw,38px);right:clamp(18px,2.6vw,38px);bottom:clamp(18px,2.4vw,32px); display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;min-width:0; } /* Los datos van sobre una placa propia, no sobre el degradado: las diez fotos tienen fondos muy distintos y algunas son casi blancas. Así el bloque se lee igual en todas. */ .battle-photo__lines{ display:block;min-width:0;flex:0 1 auto; padding:14px clamp(16px,1.8vw,22px) 16px; background:rgba(11,10,9,.74); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); border-left:4px solid var(--amber); } .battle-photo__meta{display:block;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)} .battle-photo__heads{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:10px} .battle-photo__year{ font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,72px);line-height:.86; color:var(--paper);font-variant-numeric:tabular-nums;text-shadow:3px 3px 0 rgba(11,10,9,.8); } .battle-photo__liga{ font-family:var(--sans);font-stretch:var(--w-narrow);font-weight:700; font-size:clamp(16px,2vw,28px);line-height:1.05;text-transform:uppercase; letter-spacing:.01em;color:var(--grey-3); } .battle-photo__rival{ display:block;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--grey-2);margin-top:12px; } .battle-photo__rival b{color:var(--red-hi);font-weight:inherit} .yt-btn{ flex:none;display:inline-flex;align-items:center;min-height:52px;padding:0 22px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase; white-space:nowrap;background:var(--amber);color:var(--ink); transition:background .3s,color .3s,transform .3s var(--ease); } .battle-photo:hover .yt-btn{background:var(--paper-hi);transform:translateX(4px)} /* ---- riel de cronología ---- */ /* el hueco de arriba es el sitio de la banderita del año: así no se monta sobre la foto ni la recorta la etapa */ .battle-timeline{position:relative;padding-top:24px} /* El degradado 50 / 50 vive en el riel COMPLETO —ámbar hasta la mitad exacta, rojo desde la mitad— y lo que se mueve es el velo que tapa el tramo aún no recorrido. Si el degradado viviera en la barra de avance, el punto de corte se desplazaría al crecer y el 50 / 50 dejaría de ser 50 / 50. */ .battle-rail{ position:relative;height:9px; background:linear-gradient(90deg,var(--amber) 0 50%,var(--red) 50% 100%); } .battle-rail__fill{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(28,25,23,.62)} .battle-rail__ticks{ position:absolute;inset:0; background-image:repeating-linear-gradient(90deg,rgba(28,25,23,.4) 0 1px,transparent 1px var(--tick,20%)); } /* la batalla activa: bandera maciza con el año, no una rayita */ .battle-rail__marker{position:absolute;top:0;bottom:0;width:4px;left:0;background:var(--ink);z-index:2} .battle-rail__marker span{ position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%); background:var(--ink);color:var(--paper-hi);white-space:nowrap; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.14em;padding:4px 8px; font-variant-numeric:tabular-nums; } .battle-rail__marker span::after{ content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%); border:5px solid transparent;border-top-color:var(--ink); } .battle-cols{ display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;margin-top:8px; } .battle-col{ display:flex;flex-direction:column;gap:2px;min-width:0; padding:7px 8px 6px;border-top:2px solid rgba(28,25,23,.16); transition:background .3s,border-color .3s; } .battle-col__year{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.1em;color:var(--grey-ink); font-variant-numeric:tabular-nums;transition:color .3s; } .battle-col__name{ font-family:var(--sans);font-stretch:var(--w-narrow);font-weight:700; font-size:12.5px;line-height:1.12;text-transform:uppercase;color:#6E645A; overflow-wrap:anywhere;transition:color .3s; } /* activa: bloque relleno en color de señal, no un simple cambio de borde */ .battle-col.is-on{background:var(--red);border-top-color:var(--ink)} .battle-col.is-on .battle-col__year{color:rgba(246,242,232,.78)} .battle-col.is-on .battle-col__name{color:var(--paper-hi)} /* ---------- Anexo · La Suprema Corte ---------- Una sola voz de texto (Archivo en dos anchos) y una sola línea en mono. El cartel sangra hasta el canto del panel: ahí se iba el espacio muerto. */ /* El cartel es muy vertical (799 × 1200): sin tope, estiraba la fila a más de una pantalla y el texto —centrado— dejaba medio panel vacío a la derecha. Con el alto acotado y el texto repartido de arriba abajo, las dos columnas terminan a la misma altura y no sobra aire. */ .roast{ display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(26px,3.6vw,52px);align-items:stretch; padding:clamp(40px,4.4vw,64px) var(--pad-x) clamp(42px,4.8vw,70px); border-top:4px solid var(--ink); background:linear-gradient(180deg,rgba(28,25,23,.06),rgba(28,25,23,0) 40%); } .roast__poster{ position:relative;line-height:0;overflow:hidden; border-right:4px solid var(--ink); margin:calc(clamp(40px,4.4vw,64px) * -1) 0 calc(clamp(42px,4.8vw,70px) * -1) calc(var(--pad-x) * -1); box-shadow:26px 0 52px -34px rgba(0,0,0,.9); max-height:min(84svh,880px); } .roast__poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top} .roast__text{ min-width:0;display:grid;gap:clamp(14px,1.8vw,20px); align-content:space-between;justify-items:start; } /* el deck del roast manda: es el titular real de la pieza, y ocupa el ancho entero de su columna en vez de cortarse a media línea */ .roast__text .deck{max-width:none;font-size:clamp(20px,2.6vw,34px)} .roast__text .body-text{max-width:none} .roast__title{ font-family:var(--display);font-weight:400;font-size:clamp(34px,5.2vw,68px); line-height:.9;letter-spacing:-.012em;text-transform:uppercase;color:var(--ink);margin:0; text-shadow:4px 4px 0 var(--red),0 1px 0 rgba(255,255,255,.2),0 -1px 0 rgba(0,0,0,.22);text-wrap:balance; } .roast__meta{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--red-ink);margin:0;padding-left:14px;border-left:4px solid var(--red); } /* ========================================================================== 06 · TEDx · placa y foto, cada una en su mitad -------------------------------------------------------------------------- Antes el texto flotaba sobre la foto con un velo espeso: la charla no se leía y el escenario no se veía. Separadas, la placa puede ser opaca (sin `backdrop-filter`, que era el elemento más caro de pintar de la página) y la foto se muestra entera. ========================================================================== */ .tedx{ position:relative;overflow:hidden;background:var(--night); display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:stretch;min-height:min(62svh,580px); } /* la cinta se queda pegada al canto de arriba y el texto se centra en lo que sobra: con `justify-content:center` la cinta flotaba a media placa */ .tedx__plate{ position:relative;display:grid;grid-template-rows:auto 1fr; min-width:0;background:var(--panel); border-left:5px solid var(--red); } .tedx__tape{display:block;height:9px;--t:4.5px;--tape-step:10.9px;--tape-lit:var(--red)} .tedx__inner{ padding:clamp(22px,2.8vw,40px) clamp(22px,3vw,44px); display:grid;gap:clamp(16px,2vw,24px);justify-items:start;align-content:center; } /* en su propia columna el deck ya no compite con la foto: puede respirar */ .tedx .deck{max-width:44ch} /* la capa de clic cubre el panel; el CTA visible viaja por encima de ella */ .tedx__hit{position:absolute;inset:0;z-index:4;border:none} .tedx__plate,.tedx__media{position:relative;z-index:2} .tedx .cta{position:relative;z-index:6} .tedx:hover .cta{background:var(--amber);color:var(--ink);box-shadow:7px 7px 0 rgba(28,25,23,.9)} .tedx:hover .tedx__bg{transform:scale(1.03)} .tedx__bg{transition:transform .8s var(--ease)} .tedx:focus-within{outline:3px solid var(--amber-hi);outline-offset:-3px} .tedx__media{position:relative;overflow:hidden;min-width:0;background:#0F0D0C} .tedx__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%} .tedx__scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(11,10,9,.78) 0%,rgba(11,10,9,.16) 24%,rgba(11,10,9,0) 48%); } /* ========================================================================== 07 · Hoja de taller y ACADEMIA ========================================================================== */ /* la señal compacta no trae margen inferior propio (dentro de las rejillas de batallas y TEDx lo pone el `gap`); aquí sí hace falta separarla del texto */ .taller__intro{margin:clamp(22px,2.8vw,34px) 0 clamp(24px,3vw,36px);max-width:78ch} .taller__intro strong{color:var(--red-ink)} /* las dos columnas se estiran a la misma altura y el análisis crece con ellas: así no queda una franja muerta bajo el cuaderno */ /* el cuaderno manda sobre el análisis: con las dos columnas iguales, el análisis (líneas cortas) dejaba una zanja vacía a la derecha */ .taller__grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,3.2vw,40px);align-items:stretch} .taller__col{min-width:0;display:flex;flex-direction:column} .taller__col .scan{flex:1;display:flex;flex-direction:column} .taller__col .scan__body{flex:1} /* rejilla técnica tenue, ya no renglones de cuaderno */ .notebook{ width:100%; background-color:var(--steel-2); background-image:linear-gradient(90deg,rgba(28,25,23,.07) 1px,transparent 1px); background-size:32px 100%; border:1px solid var(--ink);border-left:4px solid var(--sig); color:var(--ink);padding:14px 14px; font-family:var(--sans);font-size:17px;line-height:1.7;resize:vertical;outline:none; } .notebook:focus{border-left-color:var(--red);box-shadow:0 0 0 2px rgba(225,6,0,.22)} .taller__meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px} .meter{background:var(--panel-2);padding:14px 15px;border-bottom:4px solid var(--amber);min-width:0} .meter:nth-child(2){border-bottom-color:var(--grey)} .meter:last-child{border-bottom-color:var(--red)} .meter__label{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0;line-height:1.5} .meter__value{ font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,26px);color:var(--paper); margin:8px 0 0;font-variant-numeric:tabular-nums; } .meter__value--accent{color:var(--amber);letter-spacing:.06em;overflow-wrap:anywhere} /* la dificultad se lee dos veces: como cifra y como carrera llena */ .meter__bar{display:block;height:4px;margin-top:10px;background:rgba(237,230,216,.16)} .meter__bar i{display:block;height:100%;width:0;background:var(--red);transition:width .55s var(--ease)} .scan{border:1px solid var(--ink);background:var(--steel-2);padding:18px 20px} .scan__head{ display:flex;gap:12px;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--grey-ink);padding-bottom:8px;border-bottom:1px solid rgba(28,25,23,.3); } .scan__c1{width:34px;flex:none} .scan__c2{width:52px;flex:none} .scan__c3{flex:1;min-width:0} .scan__body{display:flex;flex-direction:column;gap:10px;margin-top:12px;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:15.5px;min-height:64px} .scan__row{display:flex;gap:12px;align-items:baseline} .scan__rhyme{color:var(--red-ink);width:34px;flex:none;font-weight:700} /* la letra del esquema toma el color de su familia de rima */ .scan__rhyme.rh-ink{color:var(--rh-tx)} .scan__rhyme.is-loose{color:var(--grey-2)} /* el grado: cuántas sílabas seguidas coinciden */ .scan__grade{font-size:.62em;letter-spacing:0;margin-left:1px;color:inherit} .scan__syl{color:var(--grey-ink);width:52px;flex:none;font-variant-numeric:tabular-nums} .scan__syl.is-ok{color:var(--ink);font-weight:700} /* el verso ya no son dos piezas sino texto corrido con marcas dentro: tiene que fluir y partirse por líneas, no repartirse en cajas de flex */ .scan__verse{flex:1;min-width:0;color:var(--ink-3);line-height:1.55;overflow-wrap:anywhere} /* ---------- familias de rima ---------- Un color por sonido. El mismo color aparece en la letra del esquema, en el final del verso (fondo lleno), en las rimas internas (subrayado) y en la pastilla de la leyenda. `--rh` es el color pleno, `--rh-on` la tinta que va encima de él y `--rh-tx` la versión legible como texto sobre el acero. */ .rh--0,.rh-ink--0,.rh-chip--0{--rh:#FFB300;--rh-on:#1C1917;--rh-tx:#7E5200} .rh--1,.rh-ink--1,.rh-chip--1{--rh:#E10600;--rh-on:#F6F2E8;--rh-tx:#A80B00} .rh--2,.rh-ink--2,.rh-chip--2{--rh:#0E7C86;--rh-on:#F6F2E8;--rh-tx:#0A5B62} .rh--3,.rh-ink--3,.rh-chip--3{--rh:#6D3AB0;--rh-on:#F6F2E8;--rh-tx:#582C90} .rh--4,.rh-ink--4,.rh-chip--4{--rh:#2F7D32;--rh-on:#F6F2E8;--rh-tx:#235E26} .rh--5,.rh-ink--5,.rh-chip--5{--rh:#1552C4;--rh-on:#F6F2E8;--rh-tx:#123F96} .rh--6,.rh-ink--6,.rh-chip--6{--rh:#C2185B;--rh-on:#F6F2E8;--rh-tx:#9C134A} .rh--7,.rh-ink--7,.rh-chip--7{--rh:#A85400;--rh-on:#F6F2E8;--rh-tx:#8A4500} .rh{font-weight:700} /* casi sin relleno a la izquierda: cuando el corte cae en la vocal tónica —«f|isco»— el bloque tiene que quedar pegado a su consonante de ataque */ .rh--end{background:var(--rh);color:var(--rh-on);padding:1px 5px 1px 1px;box-shadow:0 0 0 1px rgba(28,25,23,.22)} /* la interna no se rellena: se subraya · así se distingue de la rima final de un vistazo aunque compartan color */ .rh--in{color:var(--rh-tx);border-bottom:2px solid var(--rh);padding-bottom:1px} .rh-chip{width:12px;height:12px;flex:none;background:var(--rh);box-shadow:0 0 0 1px rgba(28,25,23,.3)} .sim-legend{ display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:12px; border-top:1px solid rgba(28,25,23,.24); } .sim-legend[hidden]{display:none} .sim-legend__item{ display:inline-flex;align-items:center;gap:7px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--grey-ink); } .sim-legend__item b{color:var(--ink);letter-spacing:.18em} /* ---------- El bloque más importante del sitio ---------- Aquí la señal y la sección son la misma cosa: el campo ámbar del panel ES el campo de la señal, así que el bloque lleva el pictograma y el número 07 igual que las placas del resto del sitio, sin repetir un rótulo aparte. */ .academia{ position:relative;isolation:isolate;background:var(--amber);color:var(--ink); border-top:4px solid var(--ink); } /* es la señal más grande del sitio: lleva la misma lámina retrorreflectante que las placas numeradas, a mayor escala */ .academia::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(104deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 66%,rgba(255,255,255,.12) 80%,rgba(255,255,255,0) 94%), var(--grit), var(--prism); background-size:100% 100%,260px 260px,20px 20px; background-blend-mode:normal,overlay,normal; mix-blend-mode:overlay; } .academia__tape{display:block;height:15px;--t:7px;--tape-step:16.9px;--tape-lit:var(--amber-hi);--tape-dark:#171310} /* Dos bandas apiladas, no dos columnas: con el rótulo a la izquierda y la ficha en una columna estrecha a la derecha, el centro del campo ámbar se quedaba vacío. Ahora el rótulo y el botón se reparten la primera banda y la ficha se tiende a todo el ancho en la segunda. */ .academia__inner{ padding:clamp(32px,4.6vw,64px) var(--pad-x) clamp(34px,4.6vw,66px); display:grid;gap:clamp(30px,4vw,54px); } .academia__top{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(24px,3vw,52px);align-items:stretch; } /* la foto no aporta alto propio (va en absoluto): la fila la manda el rótulo y la imagen se estira hasta su misma línea, sin dejar ámbar muerto al lado */ .academia__shot{ position:relative;margin:0;overflow:hidden;min-height:0;min-width:0; background:var(--ink);border:2px solid var(--ink); box-shadow:8px 8px 0 rgba(28,25,23,.22); } .academia__shot img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 28%; } /* El pase: las tres fotos apiladas en el mismo marco, solo una encendida. `visibility` además de la opacidad para que las apagadas no se queden recibiendo el clic ni cantando en un lector de pantalla. */ /* nombrada con la figura por delante a propósito: `[data-img-hover] img` ya declara un `transition` propio y, con una sola clase, se comía el fundido */ .academia__shot .academia__slide{ opacity:0;visibility:hidden; transition:opacity .9s var(--ease),transform .7s var(--ease),visibility 0s linear .9s; } .academia__shot .academia__slide.is-on{opacity:1;visibility:visible;transition-delay:0s,0s,0s} /* Las casillas del pase, en el canto opuesto al distintivo de ampliar y con su misma chapa: sobre una foto clara, tres rayas sueltas se perdían. */ .academia__dots{ position:absolute;left:10px;top:10px;z-index:4; display:flex;align-items:center;gap:6px;padding:8px 10px; background:rgba(11,10,9,.78);border:1px solid rgba(255,179,0,.5); } .academia__dot{ position:relative; width:22px;height:7px;flex:none;padding:0;border:none; background:rgba(237,230,216,.45);cursor:pointer; transition:background .3s,transform .3s var(--ease); } /* La raya mide 22 × 7: como diana de dedo es inviable. La zona sensible se extiende con un pseudoelemento hasta los 44 px de alto que pide el tacto, sin engordar la marca ni separar una raya de la siguiente. */ .academia__dot::after{ content:"";position:absolute;left:-3px;right:-3px;top:50%; height:44px;transform:translateY(-50%); } .academia__dot:hover{background:var(--paper-hi)} .academia__dot.is-on{background:var(--amber-hi);transform:scaleY(1.6)} .academia__dot:focus-visible{outline:2px solid var(--amber);outline-offset:3px} .academia__shot-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:grid;gap:5px;padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,22px) clamp(14px,1.6vw,18px); background:linear-gradient(to top,rgba(11,10,9,.95) 22%,rgba(11,10,9,0)); } .academia__shot-cap b{ font-family:var(--display);font-weight:400;font-size:clamp(17px,1.8vw,23px); line-height:1.02;text-transform:uppercase;color:var(--amber-hi); } .academia__shot-cap span{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--grey-3);line-height:1.5;text-wrap:pretty; } .academia__lead{display:grid;gap:clamp(14px,1.8vw,22px);justify-items:start;min-width:0;align-content:start} .academia__ico{ display:block;width:clamp(58px,6vw,86px);color:var(--ink); padding-bottom:clamp(4px,.6vw,8px); } .academia__ico svg{display:block;width:100%;height:auto} .academia__kicker{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.26em; text-transform:uppercase;color:var(--ink);margin:0; border-bottom:2px solid rgba(28,25,23,.34);padding-bottom:10px; } .academia__title{ display:flex;align-items:baseline;flex-wrap:wrap;column-gap:clamp(12px,1.6vw,22px);row-gap:4px; font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,86px); line-height:.82;letter-spacing:-.012em;text-transform:uppercase;color:var(--ink);margin:0; text-shadow:5px 5px 0 rgba(255,255,255,.36),0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.24); } .academia__title .sign__num{ align-self:center;font-size:.26em; background:var(--ink);color:var(--amber);text-shadow:none; } .academia__deck{ font-family:var(--sans);font-stretch:var(--w-mid);font-weight:600; font-size:clamp(17px,1.85vw,23px);line-height:1.32;color:rgba(28,25,23,.92); margin:0;max-width:40ch;text-wrap:pretty; } .academia__foot{display:grid;justify-items:start;margin-top:clamp(6px,1vw,14px)} /* la ficha de la suscripción: una banda tendida a todo el ancho del campo */ .academia__panel{ position:relative;min-width:0;background:rgba(28,25,23,.06); border:2px solid var(--ink); box-shadow:8px 8px 0 rgba(28,25,23,.22); } .academia__panel-title{ display:flex;align-items:center;justify-content:space-between;gap:12px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--amber);background:var(--ink); margin:0;padding:12px clamp(16px,1.8vw,24px); } /* el 07 del expediente, sellado en el canto de la cabecera */ .academia__panel-mark{ font-family:var(--display);font-weight:400;font-size:15px;line-height:1;letter-spacing:.04em; color:rgba(255,179,0,.45);font-variant-numeric:tabular-nums; } /* la traza de avance bajo la cabecera · la llena el scroll, no una transición */ .academia__panel-scan{ display:block;height:3px;background:var(--red); transform:scaleX(0);transform-origin:left center; } /* los tres puntos, uno al lado del otro: es lo que llena el ancho que antes quedaba en blanco */ .academia__points{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); } .academia__point{ position:relative;display:grid;gap:clamp(12px,1.4vw,18px);align-content:start; padding:clamp(20px,2.2vw,30px) clamp(18px,1.9vw,26px) clamp(22px,2.4vw,32px);min-width:0; } .academia__point+.academia__point{border-left:2px solid rgba(28,25,23,.2)} /* la barra de señal que se enciende al pasar por encima del punto */ .academia__point::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--red); transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--ease); } .academia__point:hover::before{transform:scaleX(1)} /* numeral de plantilla: contorno, como el número troquelado de un contenedor. Al pasar por encima se rellena de tinta. */ .academia__pt-num{ display:block; font-family:var(--display);font-weight:400;font-size:clamp(46px,5.4vw,78px);line-height:.78; color:rgba(28,25,23,.42);font-variant-numeric:tabular-nums;letter-spacing:-.01em; transition:color .3s,-webkit-text-stroke-color .3s; } @supports (-webkit-text-stroke:1px #000){ .academia__pt-num{color:transparent;-webkit-text-stroke:2px rgba(28,25,23,.5)} .academia__point:hover .academia__pt-num{color:var(--ink);-webkit-text-stroke-color:transparent} } .academia__pt-body{display:grid;gap:11px;min-width:0} .academia__pt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .academia__pt-head b{ font-family:var(--mono);font-stretch:var(--w-narrow);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; font-weight:700;color:var(--red-ink); } /* la condición de cada punto, en una etiqueta troquelada */ .academia__pt-tag{ flex:none;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap; background:var(--ink);color:var(--amber);padding:4px 8px 3px; } /* la traza la dibuja ScrollTrigger al entrar el bloque en pantalla */ .academia__pt-rule{ display:block;height:2px;background:rgba(28,25,23,.42);transform-origin:left center; } .academia__pt-body p{ font-size:15px;line-height:1.55;color:rgba(28,25,23,.86);margin:0;text-wrap:pretty; } /* ---------- Los talleres presenciales ---------- Contrapunto en tinta dentro del campo ámbar: la ficha de arriba cuenta lo que pasa cada mes en línea y ésta lo que pasa en una sala. El cambio de fondo es lo que separa las dos cosas sin abrir otra sección. */ .academia__labs{ position:relative;min-width:0;background:var(--ink);color:var(--paper); border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(28,25,23,.22); } .academia__labs-title{ display:flex;align-items:center;justify-content:space-between;gap:12px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--amber); margin:0;padding:12px clamp(16px,1.8vw,24px); border-bottom:1px solid rgba(237,230,216,.2); } .academia__labs-mark{ font-family:var(--display);font-weight:400;font-size:15px;line-height:1;letter-spacing:.04em; color:rgba(255,179,0,.45);font-variant-numeric:tabular-nums; } .academia__labs-list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); } .academia__lab{ position:relative;display:grid;gap:clamp(10px,1.2vw,14px);align-content:start;min-width:0; padding:clamp(20px,2.2vw,30px) clamp(18px,1.9vw,26px); } .academia__lab+.academia__lab{border-left:1px solid rgba(237,230,216,.2)} /* la misma barra de señal que enciende cada punto de la ficha de arriba */ .academia__lab::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber); transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--ease); } .academia__lab:hover::before{transform:scaleX(1)} .academia__lab-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} .academia__lab-title{ font-family:var(--display);font-weight:400;font-size:clamp(21px,2.3vw,31px); line-height:.98;letter-spacing:-.008em;text-transform:uppercase;color:var(--paper-hi); margin:0;text-wrap:balance; } /* la condición del taller, troquelada en ámbar como las etiquetas de arriba */ .academia__lab-tag{ flex:none;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap; background:var(--amber);color:var(--ink);padding:4px 8px 3px; } .academia__lab-desc{ font-size:15px;line-height:1.55;color:var(--grey-3);margin:0;text-wrap:pretty; } /* el último empujón: la frase que ata el taller con la suscripción, y el botón */ .academia__labs-foot{ display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,2vw,26px);flex-wrap:wrap; padding:clamp(16px,1.8vw,22px) clamp(18px,1.9vw,26px); border-top:1px solid rgba(237,230,216,.2);background:rgba(237,230,216,.05); } .academia__labs-line{ margin:0;min-width:0;max-width:52ch; font-family:var(--sans);font-stretch:var(--w-mid);font-weight:600; font-size:clamp(15px,1.4vw,18px);line-height:1.35;color:var(--paper);text-wrap:pretty; } /* ========================================================================== 08 · Booking ========================================================================== */ /* La foto ya no es una banda a sangre sobre el título: la señal 08 no llena el ancho del panel, así que la imagen ocupa el hueco que dejaba libre a su derecha y las dos piezas terminan a la misma altura. */ .booking-head{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(18px,2.4vw,32px);align-items:stretch; margin-bottom:clamp(26px,3.6vw,44px); } /* la placa llena su columna: si se queda a su ancho natural, entre el título y la foto se abre una zanja de trescientos píxeles */ .booking-head .sign{margin-bottom:0;align-content:start;justify-items:stretch} /* La imagen mide exactamente lo que la placa: la foto va en absoluto, así no aporta alto propio y la fila entera la define la señal. */ .booking-banner{ position:relative;overflow:hidden;min-height:0; border:1px solid rgba(237,230,216,.22); } .booking-banner img{ position:absolute;inset:0; width:100%;height:100%;object-fit:cover;object-position:center 28%; } .booking-banner__scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(11,10,9,.78) 4%,rgba(11,10,9,.06) 62%); } /* Apilados, la solicitud y el directorio gastaban casi dos pantallas. En dos columnas el directorio (siete filas de 60 px) iguala el alto del formulario y el panel entero cabe de una pasada. */ .booking{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,3.4vw,52px);align-items:stretch; } /* ---------- la solicitud, entera de una vez ---------- Sin pasos: son cinco decisiones cortas y caben todas. El bloque de detalles es el que crece, así que la columna mide siempre lo mismo que el directorio sin que ningún campo se estire de más. */ .booking__form{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);min-width:0;height:100%} .field{min-width:0} .field--grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} .field--grow .dark-area{flex:1 1 auto;min-height:96px} .booking__side{ min-width:0;padding-left:clamp(20px,2.4vw,34px); border-left:1px solid rgba(237,230,216,.18); display:flex;flex-direction:column; } .booking__block{min-width:0} /* el caso inverso: si la solicitud fuera la columna más alta, la nota se pega al fondo en vez de dejar el filete a media banda */ .booking__note{ font-size:14.5px;line-height:1.6;color:var(--grey-2);margin:auto 0 0; padding-top:16px;border-top:1px solid rgba(237,230,216,.16);text-wrap:pretty; } /* Sin color de señal en la selección: la marca es inversión de tinta. */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px; border:1px solid rgba(237,230,216,.28);background:rgba(237,230,216,.03); transition:background .25s,border-color .25s,color .25s; } .chip:hover{border-color:rgba(237,230,216,.6);background:rgba(237,230,216,.09)} .chip__box{width:9px;height:9px;flex:none;background:transparent;border:1px solid var(--grey-2);transition:background .2s,border-color .2s} .chip__label{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);transition:color .25s} .chip.is-on{background:var(--steel-2);border-color:var(--steel-2)} .chip.is-on .chip__box{background:var(--ink);border-color:var(--ink)} .chip.is-on .chip__label{color:var(--ink)} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.2vw,28px)} .dark-input{ width:100%;background:transparent;border:none;border-bottom:1px solid rgba(237,230,216,.35); color:var(--paper);font-family:var(--sans);font-size:16px;padding:10px 0;outline:none; transition:border-color .25s; } .dark-input::placeholder,.dark-area::placeholder{color:var(--grey)} .dark-input:focus{border-bottom-color:var(--amber)} /* el bloque de detalles es una caja, no un renglón: es el campo que crece para cuadrar la columna con el directorio */ .dark-area{ width:100%;background:rgba(237,230,216,.03); border:1px solid rgba(237,230,216,.28);border-left:3px solid rgba(237,230,216,.28); color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.55; padding:12px 14px;outline:none;resize:none; transition:border-color .25s,background .25s; } .dark-area:focus{border-color:rgba(237,230,216,.45);border-left-color:var(--amber);background:rgba(237,230,216,.06)} .send{ width:100%;text-align:center;min-height:62px;padding:16px 28px; transition:background .3s,color .3s,border-color .3s,letter-spacing .3s; border:1px solid var(--red);background:var(--red);color:var(--paper-hi); font-family:var(--display);font-weight:400;font-size:clamp(18px,2.2vw,26px); letter-spacing:.1em;text-transform:uppercase; } .send:hover{background:var(--amber);color:var(--ink);border-color:var(--amber);letter-spacing:.15em} /* Mientras la solicitud está incompleta el botón se apaga —pero SIGUE siendo pulsable: al tocarlo dice qué falta y lleva el foco a ese campo. Un botón deshabilitado no explica nada, y aquí el usuario tiene que saber por qué no avanza. Ver `refreshGate()` en app.js. */ .send[aria-disabled="true"]{ background:transparent;color:var(--grey-2); border-color:rgba(237,230,216,.28);border-style:dashed; } .send[aria-disabled="true"]:hover{ background:rgba(237,230,216,.05);color:var(--paper); border-color:rgba(237,230,216,.45);letter-spacing:.1em; } /* la condición de la puerta, bajo el botón · pegada a él, no a media columna */ .booking__gate{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8; color:var(--grey);text-wrap:pretty; margin:calc(clamp(16px,2vw,24px) * -1 + 10px) 0 0; } .booking__gate.is-ready{color:var(--amber)} /* directorio completo, con cifras · una columna dentro de la banda derecha */ .directory{display:grid;grid-template-columns:1fr;gap:10px} .dir{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; column-gap:13px;row-gap:1px;padding:12px 15px;min-width:0;min-height:60px;overflow:hidden; border:1px solid rgba(237,230,216,.22);background:rgba(237,230,216,.04); transition:background .25s,border-color .25s,transform .25s var(--ease); --dc:var(--amber); } .dir:nth-child(even){--dc:var(--red)} .dir:hover{background:var(--dc);border-color:var(--dc);transform:translateX(4px)} .dir__icon{ grid-column:1;grid-row:1 / span 2;align-self:center; width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--dc);color:var(--ink); transition:background .25s,color .25s; } .dir:nth-child(even) .dir__icon{color:var(--paper-hi)} .dir__icon svg{width:18px;height:18px;display:block;fill:currentColor} .dir:hover .dir__icon{background:var(--night);color:var(--dc)} .dir__name{ grid-column:2;grid-row:1;min-width:0;font-weight:600;font-size:15.5px;line-height:1.25; color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .dir__handle{ grid-column:2;grid-row:2;min-width:0; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.1em;color:var(--grey); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .dir__count{ grid-column:3;grid-row:1 / span 2;align-self:center;flex:none;white-space:nowrap; font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.01em;line-height:1; color:var(--dc);font-variant-numeric:tabular-nums; } .dir:hover .dir__name,.dir:hover .dir__handle,.dir:hover .dir__count{color:var(--ink)} .dir:nth-child(even):hover .dir__name,.dir:nth-child(even):hover .dir__handle,.dir:nth-child(even):hover .dir__count{color:var(--paper-hi)} /* ========================================================================== 09 · Muro libre · la pieza se rocía -------------------------------------------------------------------------- El escenario ES una pared: debajo va la pieza y encima un lienzo pintado con la textura del muro, que se borra al pasar el bote. La pieza va con `object-fit:contain` sobre ese mismo concreto —y no recortada a sangre— para que lo que se descubre fuera de ella siga siendo pared, que es lo que hay alrededor de una pieza de verdad. Con `cover` el usuario destapaba un recorte y en el teléfono no llegaba a ver la pieza entera nunca. ========================================================================== */ /* `.deck` viene con `margin:0` de serie, así que el aire hasta el muro se pone aquí y sólo en esta sección: en las demás lo resuelve su propio contenedor. */ .sheet--9 .deck{margin-bottom:clamp(20px,3vw,40px)} .spray{display:grid;gap:clamp(14px,1.9vw,24px)} .spray__stage{ position:relative;isolation:isolate;overflow:hidden; aspect-ratio:2688/1197; border:3px solid var(--ink-3); background-color:#141110; background-image:var(--concrete); background-size:620px 620px; background-blend-mode:soft-light; cursor:crosshair; /* `pan-y` y no `none`: con `none` el lienzo se traga el gesto y en el teléfono no se puede pasar de la sección arrastrando. Así el arrastre vertical hace scroll —lo cede el navegador— y el toque y el arrastre horizontal rocían. Ver initSpray() en app.js. */ touch-action:pan-y; } .spray__art{ position:absolute;inset:0;width:100%;height:100%; object-fit:contain; padding:clamp(10px,1.7vw,28px); } .spray__canvas{ position:absolute;inset:0;display:block;width:100%;height:100%; touch-action:pan-y; transition:opacity .9s var(--ease); } /* al completarse, la pared que queda se disuelve sola */ .spray.is-done .spray__canvas{opacity:0;pointer-events:none} .spray__hint{ position:absolute;left:50%;top:50%;z-index:2; transform:translate(-50%,-50%); margin:0;pointer-events:none; transition:opacity .45s var(--ease); } .spray__hint-in{ display:inline-block;padding:10px 18px; border:1px solid rgba(237,230,216,.28); background:rgba(11,10,9,.52); font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:clamp(9px,1vw,11px);letter-spacing:.28em;text-transform:uppercase; color:var(--grey-3); } .spray.is-touched .spray__hint{opacity:0} /* --- el medidor y los mandos --- */ .spray__bar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:clamp(14px,2vw,30px); } .spray__gauge{ flex:1 1 280px;min-width:0; display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:14px; } .spray__gauge .label{margin:0;white-space:nowrap} .spray__track{ height:9px;border:1px solid rgba(28,25,23,.28); background:rgba(28,25,23,.1);overflow:hidden; } .spray__fill{display:block;height:100%;width:0;background:var(--sig);transition:width .2s linear} .spray__pct{ margin:0;font-family:var(--display);font-weight:400; font-size:clamp(19px,2.3vw,27px);line-height:1;color:var(--sig-ink); font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right; } .spray__acts{display:flex;flex-wrap:wrap;gap:10px} /* En el teléfono la pared crece de alto: con la proporción de la pieza se quedaba en una franja de 150px y no había dónde rociar. */ @media (max-width:700px){ .spray__stage{aspect-ratio:3/2} .spray__acts{width:100%} .spray__acts .cta{flex:1 1 100%;justify-content:space-between} .spray__gauge{flex-basis:100%} } /* Sólo para lectores de pantalla */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* ========================================================================== Pie del muro ========================================================================== */ .wall-foot{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--grey);padding:40px 4px 0; } .wall-foot__accent{color:var(--amber)} /* la firma del taller · el enlace se marca con el filete, no con otro color */ .wall-foot__credit{color:var(--grey)} .wall-foot__credit a{ color:var(--grey-3);border-bottom:1px solid rgba(237,230,216,.28); transition:color .25s,border-color .25s; } .wall-foot__credit a:hover{color:var(--amber-hi);border-bottom-color:var(--amber-hi)} /* ========================================================================== Menú lateral ========================================================================== */ .menu{position:fixed;inset:0;z-index:220} .menu[hidden]{display:none} /* Mientras se cierra —medio segundo de desvanecido— el velo sigue tapando la pantalla entera. Sin esto se traga los toques justo después de pulsar un enlace del menú, y el desplazamiento hacia la sección se sentía muerto. */ .menu:not(.is-open){pointer-events:none} .menu__scrim{ position:absolute;inset:0;background:rgba(6,5,5,.82);backdrop-filter:blur(4px); opacity:0;transition:opacity .45s ease; } .menu.is-open .menu__scrim{opacity:1} .menu__panel{ position:absolute;right:0;top:0;bottom:0;width:min(440px,88vw); display:flex;flex-direction:column; background-color:#100E0D; background-image:var(--concrete); background-size:700px 700px; background-blend-mode:soft-light; border-left:1px solid rgba(237,230,216,.16); box-shadow:-30px 0 80px -30px rgba(0,0,0,1); transform:translateX(101%); transition:transform .55s var(--ease-hard); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } .menu.is-open .menu__panel{transform:translateX(0)} .menu__hazard{height:16px;flex:none;--t:8px;--tape-step:19.3px} .menu__hazard--b{--tape-lit:var(--red)} .menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 12px;flex:none} .menu__kicker{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber)} .menu__close{position:relative;width:44px;height:44px;flex:none;border:1px solid rgba(237,230,216,.28);transition:background .25s,border-color .25s} .menu__close:hover{background:var(--red);border-color:var(--red)} .menu__close-x{position:absolute;inset:0} .menu__close-x::before,.menu__close-x::after{ content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:var(--paper); } .menu__close-x::before{transform:rotate(45deg)} .menu__close-x::after{transform:rotate(-45deg)} .menu__list{display:flex;flex-direction:column;padding:6px 0 10px;flex:1 0 auto} .menu__list a{ position:relative;display:flex;align-items:baseline;gap:14px;min-height:56px; padding:14px 24px;border:none;border-bottom:1px solid rgba(237,230,216,.09); opacity:0;transform:translateX(34px); transition:opacity .45s ease,transform .5s var(--ease),background .25s,padding-left .3s var(--ease); --mc:var(--amber); } .menu__list a:nth-child(even){--mc:var(--red-hi)} .menu__list a.is-accent{--mc:var(--amber-hi);background:rgba(255,179,0,.08)} .menu.is-open .menu__list a{ opacity:1;transform:translateX(0); transition-delay:calc(.16s + var(--i,0) * .055s); } .menu__list a::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--mc); transition:width .3s var(--ease); } .menu__list a.is-accent::before{width:5px} .menu__list a:hover{background:rgba(237,230,216,.05);padding-left:32px} .menu__list a:hover::before{width:5px} .menu__list a[aria-current]{background:rgba(237,230,216,.07)} .menu__list a[aria-current]::before{width:5px} .menu__num{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--mc);flex:none;width:24px} .menu__label{font-family:var(--display);font-weight:400;font-size:clamp(26px,7vw,34px);line-height:1;text-transform:uppercase;color:var(--paper);flex:none} .menu__list a:hover .menu__label{color:var(--mc)} .menu__meta{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-left:auto;text-align:right;min-width:0} .menu__foot{display:flex;flex-direction:column;gap:14px;padding:20px 24px 26px;flex:none} .menu__foot-line{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)} .menu__cta{ display:block;text-align:center;border:none;min-height:52px;line-height:52px; font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.1em;text-transform:uppercase; background:var(--red);color:var(--paper-hi);padding:0 20px; transition:background .25s,color .25s; } .menu__cta:hover{background:var(--amber);color:var(--ink)} /* ========================================================================== Lightbox, ficha y aviso ========================================================================== */ /* La imagen ampliada es una pieza montada, no una foto suelta sobre un velo: cinta arriba, imagen enmarcada y una barra de datos abajo con el pie y la acción. Antes el CTA flotaba en absoluto sobre la propia imagen. */ .lightbox{ position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:clamp(20px,4vw,56px); background:rgba(6,5,5,.95);backdrop-filter:blur(6px); /* El deslizamiento horizontal es NUESTRO: sin esto el navegador se lo queda como gesto de «atrás» y el dedo, en vez de cambiar de foto, saca al visitante del sitio. `pan-y` deja el vertical al navegador. */ touch-action:pan-y;overscroll-behavior:contain; } .lightbox[hidden]{display:none} /* Rejilla de tres filas —cinta, imagen, datos— que en retrato se reordena a dos columnas. La proporción exacta de la foto la escribe el JS en la caja de la imagen (`aspect-ratio`), así que el marco se ciñe a ella y no quedan cantos negros a los lados. */ .lightbox__frame{ position:relative;margin:0;width:min(1100px,92vw);max-height:92svh; display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto; min-height:0; background:var(--panel);border:1px solid rgba(237,230,216,.3); box-shadow:0 50px 110px -40px rgba(0,0,0,1); animation:zoomIn .35s var(--ease) forwards; } .lightbox__tape{display:block;height:9px;--t:4.5px;--tape-step:10.9px;--tape-lit:var(--amber)} /* La caja toma todo el ancho del marco y el alto se lo dicta la proporción de la foto (`aspect-ratio`, que escribe el JS): así la imagen llena el contenedor y no quedan cantos negros. Un elemento con `aspect-ratio` NO se estira solo en una rejilla —`normal` se comporta como `start`—, de ahí el `width:100%`. */ .lightbox__img{ width:100%;height:auto;aspect-ratio:16/9;max-height:min(78svh,880px);min-height:0; background-size:contain;background-repeat:no-repeat;background-position:center; background-color:#0B0A09; } /* la barra de datos: pie a la izquierda, acción a la derecha */ .lightbox__bar{ display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,2vw,26px); flex-wrap:wrap;padding:14px clamp(14px,1.8vw,22px); background:rgba(11,10,9,.92);border-top:1px solid rgba(237,230,216,.18); } .lightbox__lines{display:grid;gap:6px;min-width:0;flex:1 1 220px} .lightbox__kicker{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--amber); } .lightbox__kicker:empty{display:none} .lightbox__cap{font-size:14.5px;line-height:1.5;color:var(--grey-3);text-wrap:pretty} .lightbox__cap:empty{display:none} .lightbox__cta{flex:none} .lightbox__cta[hidden]{display:none} /* ---------- RETRATO ---------- Un cartel de 799 × 1200 centrado en un marco apaisado deja dos franjas negras enormes a los lados. En vertical la imagen se queda con su forma a la izquierda y los datos ocupan ese hueco: rótulo grande, pie y la acción al pie de la columna. */ .lightbox__frame.is-portrait{ width:auto;max-width:min(1180px,94vw); grid-template-columns:auto minmax(240px,340px); grid-template-rows:auto min(74svh,860px); } .is-portrait .lightbox__tape{grid-column:1 / -1} /* aquí manda el alto y el ancho lo saca la proporción: es lo que hace que el marco se ciña al cartel en vez de dejarle franjas negras al lado */ .is-portrait .lightbox__img{ grid-column:1;grid-row:2; height:min(74svh,860px);width:auto;max-height:none;background-size:cover; } .is-portrait .lightbox__bar{ grid-column:2;grid-row:2;min-width:0; flex-direction:column;align-items:stretch;justify-content:flex-start; gap:clamp(14px,1.8vw,20px);padding:clamp(20px,2.4vw,30px); border-top:none;border-left:1px solid rgba(237,230,216,.18); overflow-y:auto;overscroll-behavior:contain; } .is-portrait .lightbox__lines{flex:1 1 auto;gap:12px;align-content:start} .is-portrait .lightbox__kicker{ padding-bottom:12px;border-bottom:2px solid rgba(255,179,0,.42); } /* en su propia columna el pie deja de ser una nota al margen */ .is-portrait .lightbox__cap{ font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,28px); line-height:1.06;letter-spacing:-.005em;text-transform:uppercase; color:var(--paper);text-wrap:balance; } .is-portrait .lightbox__cta{width:100%;justify-content:space-between;margin-top:auto} /* sin pie y sin acción la barra no tiene nada que decir */ .lightbox__bar:not(:has(.lightbox__cap:not(:empty),.lightbox__kicker:not(:empty),.lightbox__cta:not([hidden]))){display:none} /* cerrar · la misma cruz seca del resto del sistema */ .lightbox__close{ position:absolute;right:clamp(12px,2vw,22px);top:clamp(12px,2vw,22px);z-index:3; display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--paper);background:rgba(11,10,9,.82);border:1px solid rgba(237,230,216,.4); transition:background .25s,color .25s,border-color .25s; } .lightbox__close:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)} .lightbox__x{position:relative;width:11px;height:11px;flex:none} .lightbox__x::before,.lightbox__x::after{ content:"";position:absolute;left:0;top:5px;width:100%;height:2px;background:currentColor; } .lightbox__x::before{transform:rotate(45deg)} .lightbox__x::after{transform:rotate(-45deg)} .lightbox__hint{ position:absolute;left:0;right:0;bottom:clamp(6px,1.4vw,14px);text-align:center; font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey); padding:0 clamp(16px,4vw,40px);text-wrap:balance;line-height:1.5; } /* ---------- Paso entre las fotos de un mismo grupo ---------- Van sobre el velo, no dentro del marco: el marco se ciñe a la proporción de cada foto y unas flechas ancladas a él bailarían al cambiar de una vertical a una apaisada. Aquí se quedan quietas en el canto de la pantalla. */ .lightbox__step{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;padding:0; font-size:30px;line-height:1; color:var(--paper);background:rgba(11,10,9,.82);border:1px solid rgba(237,230,216,.4); cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease); } .lightbox__step[hidden]{display:none} .lightbox__step span{display:block;margin-top:-4px} .lightbox__step--prev{left:clamp(8px,1.6vw,20px)} .lightbox__step--next{right:clamp(8px,1.6vw,20px)} .lightbox__step:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)} .lightbox__step--prev:hover{transform:translate(-3px,-50%)} .lightbox__step--next:hover{transform:translate(3px,-50%)} .lightbox__step:focus-visible{outline:2px solid var(--amber);outline-offset:3px} /* en qué foto del grupo vamos · bajo el botón de cerrar, en su mismo canto */ .lightbox__count{ position:absolute;right:clamp(12px,2vw,22px);top:calc(clamp(12px,2vw,22px) + 52px);z-index:3; padding:7px 11px;background:rgba(11,10,9,.82);border:1px solid rgba(255,179,0,.45); font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.18em; color:var(--amber);font-variant-numeric:tabular-nums; } .lightbox__count[hidden]{display:none} /* ========================================================================== Aviso · la Academia todavía no abre Es la señal 07 hecha tarjeta: campo ámbar, pictograma y numeral, para que se lea como una continuación del panel del que salió el botón y no como un error del sitio. ========================================================================== */ .soon{position:fixed;inset:0;z-index:265;display:grid;place-items:center;padding:clamp(18px,4vw,40px)} .soon[hidden]{display:none} .soon__scrim{position:absolute;inset:0;background:rgba(8,7,6,.92);backdrop-filter:blur(5px)} .soon__card{ position:relative;z-index:2;width:min(560px,94vw);max-height:88svh;overflow:auto; overscroll-behavior:contain; background:var(--amber);color:var(--ink); border:2px solid var(--ink);box-shadow:0 40px 90px -40px rgba(0,0,0,1),10px 10px 0 rgba(11,10,9,.55); animation:zoomIn .32s var(--ease) forwards; } .soon__tape{display:block;height:13px;--t:6px;--tape-step:14.6px;--tape-lit:var(--amber-hi);--tape-dark:#171310} .soon__inner{ display:grid;gap:clamp(12px,1.8vw,16px);justify-items:start; padding:clamp(24px,4vw,38px) clamp(22px,4vw,38px) clamp(26px,4vw,38px); } .soon__ico{display:block;width:clamp(48px,9vw,62px);color:var(--ink)} .soon__ico svg{display:block;width:100%;height:auto} .soon__kicker{ margin:0;font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700; font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink); border-bottom:2px solid rgba(28,25,23,.34);padding-bottom:9px; } .soon__title{ margin:0;font-family:var(--display);font-weight:400; font-size:clamp(38px,7vw,60px);line-height:.86;letter-spacing:-.012em; text-transform:uppercase;color:var(--ink); text-shadow:4px 4px 0 rgba(255,255,255,.34); } .soon__text{ margin:0;font-family:var(--sans);font-stretch:var(--w-mid);font-weight:500; font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:rgba(28,25,23,.9);text-wrap:pretty; } .soon__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(4px,1vw,8px)} /* el botón de contorno vive sobre ámbar: el `--ghost` de hueso desaparecería */ .soon__acts .cta--ghost{color:var(--ink);border-color:rgba(28,25,23,.5);cursor:pointer} .soon__acts .cta--ghost:hover{background:var(--ink);color:var(--amber);border-color:var(--ink)} /* «Cerrar» no lleva a ninguna parte: la flecha del CTA sobra */ .soon__acts .cta--ghost::after{content:none} .modal{position:fixed;inset:0;z-index:240;display:grid;place-items:center;padding:24px} .modal[hidden]{display:none} .modal__scrim{position:absolute;inset:0;background:rgba(8,7,6,.9);backdrop-filter:blur(4px)} .modal__card{ position:relative;z-index:2;width:min(920px,94vw);max-height:88svh;overflow:hidden; display:flex;flex-direction:column; background:var(--steel);border:1px solid var(--ink); box-shadow:0 40px 90px -40px rgba(0,0,0,1); animation:modalIn .4s var(--ease) forwards; } .modal__tape{display:block;height:10px;flex:none;--t:5px;--tape-step:12.1px;--tape-lit:var(--red)} .modal__grid{display:grid;grid-template-columns:.86fr 1.14fr;min-height:0;overflow:hidden} .modal__art{position:relative;min-height:260px;background-size:cover;background-position:center;border-right:1px solid rgba(28,25,23,.4)} .modal__body{ padding:clamp(22px,2.8vw,34px);display:flex;flex-direction:column;gap:14px;min-width:0; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } /* la etiqueta de tipo ya no comparte fila con el botón: éste vive en el canto de la tarjeta, así que solo hay que dejarle sitio a la derecha */ .modal__top{display:flex;align-items:flex-start;gap:16px;padding-right:clamp(96px,12vw,130px)} .modal__kind{font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-ink);margin:0} /* cerrar · misma pieza que en la imagen ampliada: cruz + rótulo, en el canto */ .modal__close{ position:absolute;right:clamp(12px,1.6vw,20px);top:clamp(20px,2.2vw,28px);z-index:5; display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px; background:rgba(246,242,232,.92);border:1px solid rgba(28,25,23,.5);color:var(--ink); font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase; transition:background .25s,border-color .25s,color .25s; } .modal__close:hover{background:var(--ink);border-color:var(--ink);color:var(--steel-2)} .modal__x{position:relative;width:11px;height:11px;flex:none} .modal__x::before,.modal__x::after{ content:"";position:absolute;left:0;top:5px;width:100%;height:2px;background:currentColor; } .modal__x::before{transform:rotate(45deg)} .modal__x::after{transform:rotate(-45deg)} .modal__title{ font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,42px);line-height:.98; text-transform:uppercase;color:var(--ink);margin:0;text-wrap:balance; } .modal__desc{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0;text-wrap:pretty} .modal__tags{display:flex;flex-wrap:wrap;gap:8px} .modal__tags:empty{display:none} .modal__tags span{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase; white-space:nowrap;color:var(--grey-ink);border:1px solid rgba(28,25,23,.35);padding:6px 10px; } /* material público del proyecto · mismo ancho que el botón de Spotify */ .modal__link{justify-content:space-between;box-shadow:4px 4px 0 rgba(28,25,23,.85)} .modal__link[hidden]{display:none} .modal__tracks{margin-top:4px} /* Repertorio de la ficha · las charlas de Conferencias. Mismo encabezado que el tracklist, pero cada fila lleva su propia línea: no es una lista de enlaces, es un catálogo que hay que poder leer. */ .modal__items{margin-top:10px} .modal__items[hidden]{display:none} .itemlist{list-style:none;margin:0;padding:0;counter-reset:none} .item{ display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start; padding:13px 4px 14px;border-bottom:1px solid rgba(28,25,23,.16); } .item__num{ font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10px;letter-spacing:.1em; color:var(--red-ink);font-variant-numeric:tabular-nums;padding-top:4px; } .item__body{display:grid;gap:6px;min-width:0} .item__title{ margin:0;font-family:var(--sans);font-stretch:var(--w-narrow);font-weight:600; font-size:16px;line-height:1.2;letter-spacing:.01em;text-transform:uppercase;color:var(--ink); text-wrap:balance; } .item__desc{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty} /* la ficha de disco toma la señal roja del panel 02 */ .modal__card{--sig:var(--red);--sig-ink:var(--red-ink);--sig-on:var(--paper-hi)} .toast{ position:fixed;left:50%;bottom:26px;z-index:290; transform:translate(-50%,16px);opacity:0; transition:opacity .3s ease,transform .35s var(--ease); max-width:min(460px,92vw);padding:15px 20px; background:var(--panel);border:1px solid rgba(237,230,216,.24);border-left:5px solid var(--amber); box-shadow:0 24px 50px -24px rgba(0,0,0,1); font-family:var(--mono);font-stretch:var(--w-narrow);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--paper);line-height:1.6; } .toast[hidden]{display:none} .toast.is-on{opacity:1;transform:translate(-50%,0)} /* ========================================================================== Responsive · el teléfono es el dispositivo principal -------------------------------------------------------------------------- Sin tope de ancho en los paneles, la pantalla grande también es un caso a resolver: más aire en el canto y más columnas donde hay listas. ========================================================================== */ @media (min-width:1600px){ .wall{--wall-pad:44px} .stack{gap:64px} .file__cols{columns:3} .booking .directory{grid-template-columns:repeat(2,minmax(0,1fr))} .booking{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } /* nueve hitos en dos columnas: el último se lleva la fila entera y no queda un hueco al final de la rejilla */ @media (max-width:1100px){ .milestones{grid-template-columns:repeat(2,minmax(0,1fr))} .milestones .milestone:last-child:nth-child(odd){grid-column:1 / -1} } /* la barra en una sola fila: se aprieta antes que envolver */ @media (max-width:1300px){ .topnav{gap:4px} .topnav a{padding:9px 8px;letter-spacing:.1em;gap:5px} /* la tira de cinco se parte en dos columnas antes de que las fichas se estrechen hasta perder el rótulo */ .projects{grid-template-columns:repeat(2,minmax(0,1fr))} /* con un número impar de fichas la última se queda sola: en vez de dejar el hueco al lado, toma la fila entera y cambia de formato */ .project:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9} } @media (max-width:1180px){ .stack{gap:44px} .battle-cols{grid-template-columns:repeat(5,minmax(0,1fr))} .battle-col{border-top-width:2px} } /* --- se activa la hamburguesa --- */ @media (max-width:980px){ .topnav{display:none} .burger{display:flex} .topbar{padding:12px 0 13px} :root{--topbar:70px} .roast{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} /* el retrato necesita más sitio del que le deja la columna de texto */ .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } @media (max-width:900px){ .wall{--wall-pad:16px;padding-bottom:90px} .stack{gap:36px;padding-top:28px} .divider{--t:14px;--tape-step:33.8px} .divider__tape{height:32px} /* En vertical el hero se apila: primero el retrato, después la lectura. `1fr` y NO `minmax(0,1fr)`: con mínimo cero la fila del texto podía quedarse más corta que su contenido y el sobrante lo recortaba el `overflow:hidden` del hero. En el móvil esa zona recortada se traga el gesto —el scroll se queda clavado justo ahí—, así que la fila nunca baja de su contenido y el panel deja de recortar. */ .hero{ height:auto;max-height:none;min-height:100svh;overflow:visible; grid-template-columns:1fr;grid-template-rows:auto 1fr auto; } /* `justify-self:stretch` en TODA pieza con `aspect-ratio`: en una rejilla, el valor `normal` se comporta como `start` —no como `stretch`— cuando el elemento tiene proporción, así que estas cajas se quedaban a su ancho intrínseco, pegadas a la izquierda, en vez de llenar la columna. Alto explícito en vez de `aspect-ratio` + tope: cuando una caja con proporción topa con un `max-height`, el navegador le TRANSFIERE ese alto al ancho y la deja estrecha y pegada a la izquierda. Con el alto escrito a pelo y el ancho al 100%, el retrato ocupa la pantalla entera y es `object-fit:cover` quien decide el encuadre. */ .hero__frame{ order:-1;width:100%;justify-self:stretch; height:52svh;max-height:none;aspect-ratio:auto; border-left:none;border-bottom:4px solid rgba(237,230,216,.22); } .hero__bg{object-position:center 6%} .hero__scrim{background:linear-gradient(to top,rgba(11,10,9,.9) 0%,rgba(11,10,9,.16) 44%,rgba(11,10,9,0) 70%)} .hero__glow{background:radial-gradient(80% 40% at 50% 100%,rgba(255,179,0,.2),rgba(0,0,0,0) 70%)} .hero__inner{padding:clamp(26px,5vw,40px) var(--pad-x);gap:clamp(15px,3.4vw,24px)} /* Aquí el hero pasa a `overflow:visible` —lo necesita el scroll—, así que la pieza no puede sangrar: sin recorte se saldría del panel y pisaría la sección siguiente. Se queda dentro y baja de intensidad, porque el retrato ya ocupa media pantalla justo encima. */ .hero__piece{ left:0;right:0;bottom:1%;width:90%;margin:0 auto; opacity:.38;transform:rotate(-2deg); } /* siete redes en dos filas parejas, no seis y una suelta */ .social{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .social a{width:auto;height:48px} /* la firma del pie crece en proporción y deja de robar tanto alto */ .file__cols{columns:1} .taller__grid{grid-template-columns:1fr} /* Apilada, la ficha conserva la imagen fija arriba y es el CUERPO el que se recorre —no la tarjeta entera—: así el botón de cerrar, que va anclado al canto, no se va con el scroll. */ .modal__grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);overflow:hidden} .modal__art{width:100%;justify-self:stretch;min-height:0;border-right:none;border-bottom:1px solid rgba(28,25,23,.4);aspect-ratio:16/9} .modal__body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0} .roast{grid-template-columns:1fr;gap:26px} .roast__poster{ width:auto;justify-self:stretch; margin:calc(clamp(44px,5vw,72px) * -1) calc(var(--pad-x) * -1) 0; border-right:none;border-bottom:4px solid var(--ink);max-height:56svh; } .roast__poster img{object-position:center 18%} /* TEDx apilado: foto arriba, placa debajo */ .tedx{grid-template-columns:1fr;min-height:0} .tedx__media{order:-1;width:100%;justify-self:stretch;aspect-ratio:16/9} .tedx__bg{object-position:center 26%} .tedx__scrim{background:linear-gradient(to top,rgba(11,10,9,.72) 0%,rgba(11,10,9,0) 46%)} .tedx__plate{border-left:none;border-top:5px solid var(--red)} /* booking en una columna, el directorio al final */ .booking{grid-template-columns:1fr;gap:clamp(26px,4vw,36px)} .booking__side{padding-left:0;border-left:none;padding-top:clamp(22px,3vw,30px);border-top:1px solid rgba(237,230,216,.18)} .booking .directory{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .academia__inner{gap:clamp(26px,4vw,36px)} /* la foto pasa arriba del rótulo y los tres puntos se apilan */ .academia__top{grid-template-columns:1fr;gap:clamp(20px,3vw,28px);align-items:start} .academia__shot{order:-1;width:100%;justify-self:stretch;aspect-ratio:16/9} .academia__points{grid-template-columns:1fr} .academia__point+.academia__point{border-left:none;border-top:2px solid rgba(28,25,23,.2)} .academia__point::before{right:auto;bottom:0;width:4px;height:auto;transform:scaleY(0);transform-origin:center top} .academia__point:hover::before{transform:scaleY(1)} .academia__pt-num{font-size:clamp(38px,9vw,54px)} /* los dos talleres, uno debajo del otro, con la barra de señal al canto */ .academia__labs-list{grid-template-columns:1fr} .academia__lab+.academia__lab{border-left:none;border-top:1px solid rgba(237,230,216,.2)} .academia__lab::before{right:auto;bottom:0;width:3px;height:auto;transform:scaleY(0);transform-origin:center top} .academia__lab:hover::before{transform:scaleY(1)} .academia__labs-foot{align-items:stretch;flex-direction:column} .academia__labs-foot .cta{align-self:start} .academia__ico{width:clamp(56px,13vw,78px)} .academia__title{line-height:.9} .hazard{height:30px;--t:13px;--tape-step:31.4px} /* el encabezado de booking se apila y la foto vuelve arriba, a sangre ancha */ .booking-head{grid-template-columns:1fr;gap:clamp(20px,3vw,28px)} .booking-banner{order:-1;width:100%;justify-self:stretch;min-height:0;aspect-ratio:16/7} } @media (max-width:760px){ .stack{gap:28px} .divider{--t:11px;--tape-step:26.5px} .divider__tape{height:26px} .sheet{border-width:3px} .sheet::before{inset:9px} :root{--topbar:64px} /* LA SEÑAL EN VERTICAL · placa centrada a todo el ancho. En columna estrecha la placa quedaba desalineada con el resto del panel y el pictograma flotaba suelto arriba a la izquierda. Ahora la placa ocupa la pantalla completa, el pictograma va centrado en su propia banda —separado por la misma regla negra que en horizontal, solo que abajo en vez de al costado— y el rótulo se compone al centro. */ .sign{justify-items:stretch} .sign__tape{width:min(100%,240px);height:8px;--t:4px;--tape-step:9.7px;justify-self:center} .sign__plate{ grid-template-columns:1fr;border-width:3px;text-align:center; box-shadow:0 0 0 2px var(--paper-hi),0 16px 32px -24px rgba(0,0,0,.95); margin:3px; } .sign__ico{ width:100%;place-items:center;padding:14px 14px 12px; border-right:none;border-bottom:3px solid var(--ink); } .sign__ico svg{width:clamp(46px,14vw,62px)} /* `.sign--slim .sign__ico` fija un ancho de 46-66px en horizontal y gana por especificidad: sin repetirlo aquí, en las señales compactas (TEDx, batallas, laboratorio) el pictograma se quedaba en una cajita a la izquierda y su regla inferior salía cortada bajo un título ya centrado. */ .sign--slim .sign__ico{width:100%;padding:12px 12px 10px;border-bottom-width:2px} .sign__lines{padding:14px 16px 16px;justify-items:center} .sign__title{justify-content:center;text-align:center} .sign__sub{max-width:none;text-align:center} /* La señal de TEDx es la única que cuelga de una rejilla con `justify-items:start` (`.tedx__inner`), así que se quedaba al ancho de su propio contenido mientras las demás llenaban el panel. */ .tedx__inner .sign{justify-self:stretch} /* el rótulo de la Academia se compone igual que el resto de señales */ .academia__lead{justify-items:center;text-align:center} .academia__title{justify-content:center} .academia__kicker{width:100%} .academia__deck{max-width:38ch} .projects{grid-template-columns:1fr} .project{width:100%;justify-self:stretch;aspect-ratio:16/10} /* en una sola columna ya no hay huérfana que compensar */ .project:last-child:nth-child(odd){aspect-ratio:16/10} .hero__facts li{flex:1 1 88px;padding:12px 10px 13px 0} .hero__facts li+li{padding-left:12px} .hero__actions .cta{width:100%;justify-content:space-between} .cta{width:100%;justify-content:space-between} .academia__foot{width:100%} .academia__foot .cta{width:100%} .covers{grid-template-columns:repeat(2,minmax(0,1fr))} .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,26vw,150px)} .shot--lead{grid-column:span 2;grid-row:span 1} .shot:last-child{grid-column:span 2} /* en vertical el mosaico se reordena y la pieza principal deja de estar abajo: los avales bajan a fila normal en vez de montarse sobre otra foto */ .avales{margin:12px 0 0} .aval{flex:1 1 0;min-width:0;padding:7px} .aval img{width:44px;height:44px} .aval span{font-size:8px;max-width:none;padding-right:4px} /* ---- batallas en teléfono: riel de años que se desliza ---- */ .battle-stage{grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding-left:14px;padding-right:14px} /* La señal se compone como las demás —apilada y centrada—, así que la cabecera pasa a columna: el rótulo arriba a todo el ancho y debajo la pista y el contador. Solo se aprieta el pictograma, porque esta señal comparte pantalla con la foto. */ .battle-top{flex-direction:column;align-items:stretch;gap:10px} .battle-top .sign__ico{padding:10px 12px 8px} .battle-top .sign__ico svg{width:clamp(34px,9vw,44px)} .battle-top .sign__lines{padding:10px 14px 12px} .battle-meta{justify-content:space-between;width:100%} .battle-counter{padding:8px 10px;font-size:9px} .battle-photo__info{flex-direction:column;align-items:stretch;gap:14px} .yt-btn{justify-content:center;width:100%} /* El riel lo centra el JS conforme avanza el scroll (`centerBattleChip`). Sin `scroll-snap`: el imán del snap peleaba con ese `scrollLeft` programado y el gesto vertical se quedaba atrapado en la franja del riel. */ .battle-cols{ display:flex;gap:0;margin-top:8px;min-width:0;max-width:100%; overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .battle-cols::-webkit-scrollbar{display:none} .battle-col{flex:0 0 116px;padding:8px 10px} /* cuatro cifras en dos por dos: apiladas ocupaban media pantalla cada una */ .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .stat{padding:18px 16px} .stat__label{font-size:9px;letter-spacing:.12em} .battle-photo__scrim{background:linear-gradient(to top,rgba(11,10,9,.97) 0%,rgba(11,10,9,.84) 26%,rgba(11,10,9,.06) 72%)} .taller__meters{grid-template-columns:1fr} /* apilados, cada medidor es una fila: rótulo a la izquierda y cifra a la derecha · la carrera de la dificultad baja a renglón propio */ .meter{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;padding:12px 14px} .meter__bar{flex:1 0 100%;margin-top:2px} .meter__label{margin:0} .meter__value{margin:0} .booking .directory{grid-template-columns:1fr} .wall-foot{justify-content:center;text-align:center;gap:8px} .hazard{height:26px;--t:11px;--tape-step:26.5px} /* ficha a pantalla completa · la tarjeta entera es el contenedor de scroll, así que ni la rejilla ni el cuerpo pueden recortar */ .modal{padding:0;place-items:stretch} .modal__card{width:100%;max-width:none;max-height:100svh;height:100svh;border:none} .modal__art{width:100%;justify-self:stretch;aspect-ratio:16/10;min-height:0} /* a pantalla completa el botón se aprieta al canto y deja solo la cruz */ .modal__close{right:10px;top:14px;padding:0 12px;min-width:44px;justify-content:center} .modal__close-text{display:none} .modal__top{padding-right:64px} /* el pie deja sitio a la barra de mando del paso entre fotos */ .lightbox{padding:14px 14px 92px} .lightbox__frame{max-height:82svh} .lightbox__img{max-height:min(58svh,640px)} .lightbox__bar{padding:12px 14px;gap:12px} .lightbox__cta{width:100%;justify-content:space-between} /* Con la foto ocupando casi toda la pantalla, unas flechas flotando encima la tapan. Bajan a una barra de mando al pie —flecha, contador, flecha— y el gesto de deslizar sigue siendo la vía rápida. */ .lightbox__step{ top:auto;bottom:42px;transform:none; width:52px;height:46px;font-size:26px; } .lightbox__step--prev{left:50%;margin-left:-96px} .lightbox__step--next{right:50%;margin-right:-96px} .lightbox__step--prev:hover,.lightbox__step--next:hover{transform:none} .lightbox__count{ left:50%;right:auto;top:auto;bottom:42px;transform:translateX(-50%); display:inline-flex;align-items:center;height:46px;padding:0 14px; } /* en vertical no hay hueco al lado que aprovechar: la maqueta de dos columnas vuelve a apilarse */ .lightbox__frame.is-portrait{ width:min(1100px,92vw);max-width:none; grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto; } .is-portrait .lightbox__tape{grid-column:auto} .is-portrait .lightbox__img{ grid-column:auto;grid-row:auto; width:100%;height:auto;max-height:min(58svh,600px);background-size:contain; } .is-portrait .lightbox__bar{ grid-column:auto;grid-row:auto;flex-direction:row;align-items:center; padding:12px 14px;border-left:none;border-top:1px solid rgba(237,230,216,.18);overflow:visible; } .is-portrait .lightbox__lines{gap:6px} .is-portrait .lightbox__kicker{padding-bottom:0;border-bottom:none} .is-portrait .lightbox__cap{ font-family:var(--sans);font-size:14.5px;line-height:1.5;letter-spacing:0; text-transform:none;color:var(--grey-3); } .is-portrait .lightbox__cta{margin-top:0} } @media (max-width:460px){ .wall{--wall-pad:12px} .sheet{--pad-x:16px} .brand{font-size:21px} .burger__text{display:none} .burger{padding:0 12px;min-width:48px;justify-content:center} .covers{grid-template-columns:1fr 1fr;gap:10px} .cover__title{font-size:14px} .project{width:100%;justify-self:stretch;aspect-ratio:4/3} .milestones{grid-template-columns:1fr} .stat__num{font-size:32px} .gallery{grid-auto-rows:132px} .chips{flex-direction:column} .chip{width:100%} .hero__facts b{font-size:26px} .roast__title{text-shadow:3px 3px 0 var(--red),0 1px 0 rgba(255,255,255,.2),0 -1px 0 rgba(0,0,0,.22)} .academia__title{text-shadow:3px 3px 0 rgba(255,255,255,.36),0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.24)} .scan{padding:14px} .scan__body{font-size:12px} .menu__meta{display:none} } /* Sin cursor personalizado ni imantado en pantallas táctiles */ @media (hover:none){ html,body,input,textarea,button,a{cursor:auto} .cursor,.cursor-dot{display:none} .zoom-badge{opacity:1} .cover:hover,.project:hover,.dir:hover{transform:none} .battle-photo:hover .battle-photo__art,.cover:hover .cover__art,.project:hover .project__art{transform:scale(1.03)} /* ---------- COSTE DE PINTADO ---------- Todo lo de aquí abajo es material que el teléfono tendría que recomponer en CADA fotograma de scroll. Ninguna de estas capas se echa en falta a esa resolución, y son la diferencia entre un scroll fluido y uno a tirones. */ /* El grano del muro era una capa del ALTO DEL DOCUMENTO entero con `mix-blend-mode`: la más cara de la página. La textura no se pierde, sigue en el `background-image` del propio muro. */ .noise{display:none} /* Un desenfoque de fondo dentro de la etapa fija se repinta durante los ~360 svh que dura la sección. La placa se vuelve un poco más opaca y ya. */ .battle-photo__lines{ backdrop-filter:none;-webkit-backdrop-filter:none; background:rgba(11,10,9,.9); } /* halo en modo `screen` sobre el retrato, justo en la primera pantalla */ .hero__glow{display:none} /* La cinta se sigue animando igual, pero deja de mantener una capa promovida por cada tramo: hay una veintena repartida por la página. */ .tape-chev::before{will-change:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .intro{display:none} /* la traza de la Academia la llena el scroll; sin animación se queda puesta */ .academia__panel-scan{transform:none} .wall{background-attachment:scroll} }