/* ============================================================
METIS · inicio.css — la hoja del inicio, y sólo del inicio
------------------------------------------------------------
`index.html` NO carga `landing.css`: aquella hoja lleva el
sistema de secciones a pantalla completa que usan `dictamen`
y `rescate-90`, y pelearía con el guion por scroll de aquí.
Las dos conviven sin tocarse.
De dónde sale cada cosa, para poder discutirla por separado:
cruzestudio la precarga con contador; la figura quieta que
no arranca hasta el scroll; el grano sobre negro
goats.com.pl Metis ACERCÁNDOSE y bajando; la ventana del
video que se abre a pantalla completa
nexstudio el polvo por delante de las letras; lo que
aparece poco a poco en vez de estar ya puesto
vanlent los rótulos numerados pegajosos y el revelado
por máscara sección a sección
cosmoq los RECURSOS: esquinas redondeadas, pastillas,
resplandor y tipografía de display más ligera.
Aquí con la paleta de METIS: la capa decorativa
es NAVY DEEP y BLANCO. El azul sólo en estados;
el amarillo y el rojo, sólo como señal.
CERO DEPENDENCIAS.
============================================================ */
:root{
/* Los mismos nombres y valores de `landing.css`: la paleta Deep Navy
que ya tenía la web. */
--void:#07070C; --void-soft:#0E0E18; --panel:#14141F;
--navy:#1C1C28; --navy-alto:#262637;
--bone:#F5F6F8; --bone-muted:#C7CCD8;
--hair:rgba(200,212,255,.14); --hair2:rgba(200,212,255,.07);
--azul:#5B7CFF;
--display:"Archivo","Segoe UI Variable Display",system-ui,sans-serif;
--tipo:"Lato","Segoe UI",system-ui,sans-serif;
--mono:"Space Mono",Consolas,ui-monospace,monospace;
--marco:clamp(20px,4.5vw,72px);
--curva:cubic-bezier(.16,.84,.34,1);
--radio:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--void);color:var(--bone);
font-family:var(--tipo);-webkit-font-smoothing:antialiased;
/* clip recorta el exceso horizontal sin crear un contenedor de scroll.
La portada y el video deben seguir pegados al viewport con sticky. */
overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
.saltar{
position:absolute;left:-9999px;top:0;z-index:99;
background:var(--bone);color:var(--void);padding:12px 18px;
font-family:var(--mono);font-size:11px;letter-spacing:.14em;
}
.saltar:focus{left:12px;top:12px}
/* ---------- el grano, de Cruz ----------
Textura SVG en línea: no es un archivo, no pesa y no se descarga. */
body::after{
content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
opacity:.10;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---------- el resplandor, en NAVY y BLANCO ----------
Cosmoq lo hace con azul contra ámbar. Aquí no hay segundo color: el
navy levanta el fondo y una luz blanca muy floja hace el contraste.
Flojo a propósito — con más intensidad se come las partículas. */
.brillo{
position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(70% 46% at 50% 114%, rgba(38,38,55,.85), transparent 66%),
radial-gradient(52% 34% at 50% 108%, rgba(245,246,248,.055), transparent 60%),
radial-gradient(48% 34% at 10% 4%, rgba(28,28,40,.75), transparent 68%);
}
#escenario{position:fixed;inset:0;z-index:1;pointer-events:none}
#campo{display:block;width:100%;height:100%}
main{position:relative;z-index:2}
/* ---------- la precarga, de Cruz ----------
Doble salida a propósito: la animación CSS la retira y además el JS
la quita del árbol. Una capa de carga pegada deja la web inservible. */
#precarga{
position:fixed;inset:0;z-index:60;background:var(--void);
display:grid;place-items:center;
animation:salir .7s var(--curva) 2.1s forwards;
}
#precarga .cuenta{
font-family:var(--display);font-weight:500;
font-variation-settings:"wdth" 110;
font-size:clamp(3.4rem,11vw,9rem);line-height:1;letter-spacing:-.04em;
}
#precarga .marca{
position:absolute;bottom:clamp(22px,5vh,48px);left:var(--marco);
font-family:var(--mono);font-size:10px;letter-spacing:.24em;
text-transform:uppercase;color:var(--bone-muted);
}
@keyframes salir{to{opacity:0;visibility:hidden}}
/* ---------- la barra ---------- */
.barra{
position:fixed;top:0;left:0;right:0;z-index:30;
display:flex;align-items:center;justify-content:space-between;
padding:clamp(14px,2.4vh,26px) var(--marco);
pointer-events:none;
}
.barra a,.barra button{pointer-events:auto}
/* `logo-h-blanco.png` viene OPACO, con fondo negro puro —comprobado: las
cuatro esquinas son 0,0,0,255—, así que sobre el campo estrellado se veía
su recuadro. Taparlo con `mix-blend-mode: screen` funcionaba a medias:
el blend suma con lo que haya detrás y sobre las partículas se ensucia.
La solución de verdad es el archivo: `logo-h-blanco-alfa.png` lleva el
alfa sacado de la luminancia —blanco opaco, negro transparente, y los
bordes suavizados conservan su gradación—. 30 KB, 9,2 % de tinta. */
.barra__marca img{height:clamp(18px,2.2vw,24px);width:auto}
.saltos{display:flex;gap:clamp(14px,1.8vw,28px)}
.saltos a{
font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--bone-muted);text-decoration:none;
transition:color .35s var(--curva);
}
.saltos a:hover{color:var(--bone)}
@media(max-width:860px){.saltos{display:none}}
/* ---------- pastillas, de Cosmoq ---------- */
.pastilla{
display:inline-flex;align-items:center;gap:9px;
border:1px solid var(--hair);border-radius:999px;
padding:7px 16px;background:rgba(255,255,255,.035);
backdrop-filter:blur(8px);
font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--bone-muted);
}
.pastilla::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--bone);box-shadow:0 0 10px rgba(245,246,248,.5)}
/* ---------- el rótulo pegajoso, numerado ---------- */
.seccion{position:relative;padding:0 var(--marco)}
.rotulo{
position:sticky;top:clamp(58px,9vh,86px);z-index:3;
display:flex;gap:14px;align-items:baseline;
font-family:var(--mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--bone-muted);
mix-blend-mode:difference;pointer-events:none;
}
.rotulo b{color:var(--bone);font-weight:400}
.rotulo i{font-style:normal;opacity:.45}
/* ---------- la regla que se dibuja sola ---------- */
[data-regla]{
height:1px;background:var(--hair);margin:0 0 clamp(28px,5vh,64px);
transform:scaleX(0);transform-origin:0 50%;
transition:transform 1.1s var(--curva);
}
[data-regla].dentro{transform:scaleX(1)}
/* ---------- revelado por MÁSCARA ----------
La máscara va en el HIJO, nunca en el elemento observado: un
clip-path que oculta el 100 % deja al IntersectionObserver con
intersección cero, no dispara nunca y el texto no aparece jamás.
Se bloquea a sí mismo. */
[data-revela]>*{
clip-path:inset(0 0 100% 0);
transition:clip-path 1.15s var(--curva);
}
[data-revela].dentro>*{clip-path:inset(0 0 0% 0)}
/* ---------- palabra a palabra, de NexStudio ---------- */
[data-palabras] .pal{
/* El envoltorio lo inyecta el JS, así que cae dentro de cualquier
regla de descendencia de la página. Hereda TODO a propósito: sin
esto, una regla como `.cifra span{font-size:10px}` se comía las
cifras y salían a 10 px. */
font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
display:inline-block;
opacity:0;transform:translateY(.45em);
transition:opacity .6s var(--curva),transform .6s var(--curva);
transition-delay:calc(var(--i,0) * 55ms);
}
[data-palabras].dentro .pal{opacity:1;transform:none}
[data-escalona]>*{
opacity:0;transform:translateY(26px) scale(.965);
transition:opacity .9s var(--curva),transform .9s var(--curva);
transition-delay:calc(var(--i,0) * 90ms);
}
[data-escalona].dentro>*{opacity:1;transform:none}
[data-retrocede]{
transform:scale(calc(1 + var(--ido,0) * .04));
opacity:calc(1 - var(--ido,0) * .34);
will-change:transform,opacity;
}
/* ---------- tipografía ----------
Peso 500, como Cosmoq. El 800 es peso de cartel y competía con las
frases de partículas, que ya son macizas. */
h2{
font-family:var(--display);font-weight:500;
font-variation-settings:"wdth" 110;
font-size:clamp(2.6rem,7vw,6.6rem);
line-height:1;letter-spacing:-.035em;margin:0;
text-wrap:balance;
}
/* El énfasis lo da el TONO, no un color. */
h2 em{font-style:normal;color:var(--bone-muted)}
.dos h2{font-size:clamp(2.3rem,4.8vw,4.6rem)}
.parrafo{
font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.64;
color:var(--bone-muted);max-width:46ch;margin:0;
}
/* ============================================================
§I · LA PISTA de la portada
============================================================ */
.pista{height:520vh;position:relative}
.fijo{
position:sticky;top:0;height:100vh;
display:grid;place-items:center;padding:0 var(--marco);
}
/* El titular de verdad. Nunca display:none: es el que leen Google y
los lectores de pantalla. Sólo está invisible hasta que cuaja. */
.titular{
font-family:var(--display);font-weight:500;
font-variation-settings:"wdth" 110;
font-size:clamp(2.2rem,5.2vw,4.8rem);
line-height:1.02;letter-spacing:-.035em;text-align:center;margin:0;
max-width:16ch;
opacity:0;transform:translateY(22px);
transition:opacity 1s var(--curva),transform 1s var(--curva);
}
.titular.visible{opacity:1;transform:none}
.solo-lector{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.paradas{
position:absolute;right:var(--marco);bottom:clamp(22px,5vh,48px);
display:flex;gap:10px;font-family:var(--mono);font-size:10px;
letter-spacing:.18em;color:var(--bone-muted);
}
.paradas span{opacity:.28;transition:opacity .5s}
.paradas span.on{opacity:1;color:var(--bone)}
.baja{
position:absolute;left:var(--marco);bottom:clamp(22px,5vh,48px);
font-family:var(--mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--bone-muted);
display:flex;align-items:center;gap:10px;
}
.baja::before{content:"";width:34px;height:1px;background:var(--bone);
animation:corre 2.4s var(--curva) infinite}
@keyframes corre{0%{transform:scaleX(.2);transform-origin:0}
50%{transform:scaleX(1);transform-origin:0}
51%{transform:scaleX(1);transform-origin:100%}
100%{transform:scaleX(.2);transform-origin:100%}}
/* ============================================================
§III · LA VENTANA QUE SE ABRE
------------------------------------------------------------
El video no está puesto, se ABRE. Empieza como una ventana en
medio del negro y crece hasta ocupar la pantalla entera; el radio
y el borde se van a cero, así que deja de ser una tarjeta y pasa a
ser la pantalla. El texto va DEBAJO, nunca al lado.
============================================================ */
.pista-video{height:300vh;position:relative}
.fijo-video{
position:sticky;top:0;height:100vh;width:100%;
display:grid;place-items:center;overflow:hidden;
}
/* Doble clase a propósito: `.tarjeta` se declara más abajo y con una
sola clase le ganaba por orden de fuente al radio y al borde, así que
la ventana crecía pero seguía con esquina redondeada y filete. */
.marco-video.tarjeta{
position:relative;display:grid;place-items:center;overflow:hidden;
width: calc(42vw + (100vw - 42vw) * var(--abre,0));
height:calc(48vh + (100vh - 48vh) * var(--abre,0));
border-radius:calc(var(--radio) * (1 - var(--abre,0)));
border-width:calc(1px * (1 - var(--abre,0)));
background:linear-gradient(168deg,var(--navy-alto),var(--void));
}
/* NADA de `mix-blend-mode: screen` aquí. Ese truco sirve cuando el sujeto
está recortado por luz sobre negro PURO; este clip está rodado en un
plató con pared de fichas y su fondo es gris oscuro, no negro. Con
`screen` ese gris se aclaraba y aparecía una banda más clara a la altura
de la cara. El video va normal.
`cover`, no `contain`: la ventana cambia de proporción mientras se abre y
con `contain` salen franjas arriba y abajo —eso es lo que se veía como si
estuviera partido—. El encuadre se sube al 32 % para que al recortar no
se le vaya la cabeza al sujeto. */
.marco-video video{
width:100%;height:100%;
object-fit:cover;object-position:center 32%;
}
/* `.tarjeta::before` pinta un 10 % de blanco sobre el tercio superior, y
por ser absoluto se dibuja POR ENCIMA del video: de ahí la banda más
clara que cruzaba el plano entero de lado a lado. En una tarjeta de
texto es el resplandor de Cosmoq; sobre un video es suciedad. */
.marco-video::before{display:none}
/* Con video, el marco pasa a negro puro y los bordes se funden con la
página: mientras la ventana es pequeña, un rectángulo de filo duro sobre
el negro canta, y así el plano entra como si emergiera del fondo. */
.marco-video.con-video{
background:var(--void);
-webkit-mask-image:radial-gradient(128% 118% at 50% 42%, #000 62%, transparent 100%);
mask-image:radial-gradient(128% 118% at 50% 42%, #000 62%, transparent 100%);
}
.marco-video .vacio{
font-family:var(--mono);font-size:11px;letter-spacing:.2em;
color:var(--bone-muted);text-align:center;padding:0 24px;
}
/* El pie entra cuando la ventana ya está casi abierta: si aparece
antes, compite con el movimiento y no se lee ni una cosa ni otra. */
.pie-video{
position:absolute;left:var(--marco);right:var(--marco);
bottom:clamp(34px,7vh,80px);z-index:2;pointer-events:none;
opacity:calc((var(--abre,0) - .52) * 2.4);
transform:translateY(calc((1 - var(--abre,0)) * 46px));
}
.pie-video h2{font-size:clamp(2.2rem,5.4vw,5rem)}
/* Velo bajo el pie: el texto cae sobre el video y sin él no se lee.
Va en un pseudo-elemento para no tocar el contenido ni su sangrado. */
.pie-video::before{
content:"";position:absolute;inset:-40% -6vw -60% -6vw;z-index:-1;
background:linear-gradient(to top,
rgba(7,7,12,.92) 0%, rgba(7,7,12,.78) 42%, transparent 100%);
pointer-events:none;
}
.pie-video .parrafo{margin-top:18px}
.rotulo-abs{position:absolute;top:clamp(58px,9vh,86px);left:var(--marco);z-index:3}
/* ============================================================
§II, §IV y §V
============================================================ */
.tramo{min-height:100vh;display:grid;align-content:center;
padding-top:clamp(70px,13vh,140px);padding-bottom:clamp(70px,13vh,140px)}
.dos{display:grid;gap:clamp(34px,6vw,90px);
grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center}
@media(max-width:860px){.dos{grid-template-columns:1fr}}
/* ---------- la tarjeta de Cosmoq ---------- */
.tarjeta{
position:relative;overflow:hidden;
border:1px solid var(--hair);border-radius:var(--radio);
background:linear-gradient(165deg,var(--navy-alto),var(--panel));
backdrop-filter:blur(8px);
}
.tarjeta::before{
content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;
background:radial-gradient(60% 100% at 50% 100%,rgba(245,246,248,.10),transparent 70%);
pointer-events:none;
}
/* ---------- §IV · marcas · sin partículas ---------- */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(16px,3vw,32px);margin-top:clamp(30px,6vh,70px)}
@media(max-width:700px){.cifras{grid-template-columns:1fr}}
.cifra{padding:clamp(22px,2.6vw,34px)}
.cifra b{display:block;font-family:var(--display);font-weight:500;
font-size:clamp(3rem,6.4vw,5.6rem);line-height:.92;letter-spacing:-.045em;
background:linear-gradient(180deg,var(--bone) 35%,rgba(199,204,216,.55));
-webkit-background-clip:text;background-clip:text;color:transparent}
.cifra>span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--bone-muted)}
.marcas-lista{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,4vh,40px)}
/* Las marcas. Los logotipos se pintan en blanco a media opacidad; si
`config.js → marcas.logos` está vacío, la fila no se muestra. */
.marcas-fila{
display:flex;flex-wrap:wrap;align-items:center;
gap:clamp(22px,4vw,64px);
margin-top:clamp(30px,5vh,58px);
padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--hair2);
}
/* Cada logo va dentro de un `` que pone el JS. El envoltorio es quien
recibe el escalonado de entrada; si el escalonado cayera sobre el ``,
`[data-escalona].dentro>*{opacity:1}` le ganaría por especificidad al
reposo del .55 y el hover no tendría de dónde subir —que es justo lo que
pasaba: los logos no se iluminaban—. */
.marcas-fila img{
height:clamp(20px,2.4vw,30px);width:auto;
filter:brightness(0) invert(1);opacity:.5;
transition:opacity .35s ease, filter .35s ease;
}
.marcas-fila img:hover{
opacity:1;
filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(245,246,248,.45));
}
/* Los dos elementos que tenían transición declarada y ningún estado al que
ir: se quedaban inertes. Todo en navy y blanco, sin color. */
.cifra{transition:border-color .45s var(--curva),transform .45s var(--curva)}
.cifra:hover{transform:translateY(-4px);border-color:var(--hair)}
.pastilla{transition:color .35s var(--curva),border-color .35s var(--curva)}
.pastilla:hover{color:var(--bone);border-color:rgba(245,246,248,.34)}
.marcas-t{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--bone-muted);opacity:.6;
margin:clamp(26px,4vh,44px) 0 0;
}
/* ---------- las dos puertas ---------- */
.puertas{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(18px,3vw,34px);margin-top:clamp(34px,6vh,72px)}
@media(max-width:860px){.puertas{grid-template-columns:1fr}}
.puerta{
display:block;text-decoration:none;color:inherit;
padding:clamp(26px,3.4vw,44px);
transition:border-color .5s var(--curva),transform .5s var(--curva);
}
.puerta:hover{border-color:rgba(91,124,255,.5);transform:translateY(-5px)}
.puerta h3{font-family:var(--display);font-weight:500;
font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.04;margin:18px 0 12px;
letter-spacing:-.025em}
.puerta p{margin:0 0 26px;color:var(--bone-muted);font-size:.98rem;line-height:1.55}
.precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
border-top:1px solid var(--hair2);padding-top:18px}
.precio b{font-family:var(--display);font-weight:500;
font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.02em}
.precio span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
color:var(--bone-muted)}
/* ---------- el cierre ---------- */
.cierre{text-align:center;padding:clamp(80px,14vh,150px) var(--marco) clamp(50px,8vh,90px)}
.cierre h2{margin:0 auto;max-width:20ch}
.botonera{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
margin-top:clamp(34px,6vh,64px)}
.btn{
display:inline-flex;align-items:center;gap:10px;text-decoration:none;
border:1px solid var(--hair);border-radius:999px;
padding:14px 28px;font-family:var(--mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;
transition:background .4s var(--curva),color .4s var(--curva),
border-color .4s var(--curva);
}
.btn--lleno{background:var(--bone);color:var(--void);border-color:var(--bone)}
.btn--lleno:hover{background:transparent;color:var(--bone)}
.btn--linea:hover{border-color:var(--bone)}
.pie-legal{
display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
margin:clamp(50px,8vh,90px) 0 0;
font-family:var(--mono);font-size:10px;letter-spacing:.12em;
color:var(--bone-muted);opacity:.7;
}
.pie-legal a{color:inherit}
/* En el celular la ventana nace CASI abierta: a 375 px, el 42 % de ancho son
157 px y el plano se pierde. Y la pista se acorta, que si no son tres
pantallas de scroll para abrir un recuadro. */
@media(max-width:860px){
/* El rótulo deja de pegarse: en una columna estrecha se queda clavado
encima del texto de las tarjetas y se lee como un error, no como el
rótulo de sección de Van Lent. */
.rotulo{position:static;margin-bottom:18px}
.rotulo-abs{position:absolute}
.pista-video{height:220vh}
.marco-video.tarjeta{
width: calc(86vw + (100vw - 86vw) * var(--abre,0));
height:calc(54vh + (100vh - 54vh) * var(--abre,0));
}
.pie-video{bottom:clamp(26px,5vh,54px)}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-revela]>*,[data-escalona]>*,[data-palabras] .pal,[data-regla]{
clip-path:none!important;opacity:1!important;transform:none!important;
transition:none!important}
.baja::before{animation:none}
#precarga{display:none}
/* Sin movimiento, la ventana del video nace abierta. */
.marco-video.tarjeta{width:100%;height:76vh;border-radius:var(--radio)}
.pie-video{position:static;opacity:1;transform:none;margin-top:28px}
.fijo-video{position:static;height:auto;padding:0 var(--marco)}
.pista-video{height:auto}
}