/* ============================================================
   EL LENGUAJE DE GRUPO XIOON
   ------------------------------------------------------------
   Esto es lo que nació dentro de la portada nueva y ahora sale
   de ahí para que lo usen todas las páginas. La razón es
   aburrida y es la correcta: mientras cada página tenga su
   propio CSS, cada cambio hay que hacerlo veinte veces y a la
   tercera vez ya no coinciden. Un solo archivo, una sola barra,
   un solo pie.

   SIN COLOR A PROPÓSITO. Blanco, negro y grises. Es la
   restricción más útil que hay: cuando no puedes resolver una
   pantalla con un dorado, la resuelves con el tamaño, el
   espacio y el silencio. El dorado y el azul entran al final,
   encima de algo que ya funciona sin ellos, y entonces suman en
   vez de tapar.

   CUATRO TAMAÑOS DE LETRA. Si hace falta un quinto, es que la
   pantalla tiene dos ideas y hay que partirla.

   NADA DE DECORACIÓN. Ni telón de entrada, ni esquinas de
   visor, ni vidrio, ni sombras de color. El único ornamento es
   el movimiento, y el movimiento solo subraya el orden de
   lectura. Vive en movimiento-xioon.js y se apaga solo si el
   sistema pide menos movimiento.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:#fff;
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Mismo valor que identidad.css. Se repite aqui porque estas
     paginas no cargan esa hoja; si algun dia se unifican, este
     token sobra. El respaldo es Archivo, no Georgia: si Zilla
     no llega, mejor la otra de la casa que una serif de sistema. */
  --display:"Zilla Slab","Archivo",Georgia,serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit}

:root{
  --d:clamp(2.75rem,8.4vw,8rem);      /* el titular de pantalla */
  --t1:clamp(2rem,4.6vw,3.75rem);     /* el nombre de una cosa */
  --t2:clamp(1.125rem,1.7vw,1.5rem);  /* la frase que acompaña */
  --p:clamp(.9375rem,1.15vw,1.0625rem);
  --mini:.6875rem;
  --gut:clamp(20px,4.2vw,64px);
  --max:1600px;
}

/* ---------- Pantallas ---------- */
.p{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;scroll-margin-top:0}
.p--claro{background:#fff;color:var(--fondo);align-items:center;min-height:auto;padding-block:clamp(5rem,12vw,11rem)}
.p--corta{min-height:auto;align-items:center;padding-block:clamp(4.5rem,10vw,8rem)}
.in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--gut) clamp(3.5rem,8vh,6.5rem)}
.p--claro .in,.p--corta .in{padding-bottom:0}

/* El medio de fondo. Arranca un punto grande y se asienta. */
.medio{position:absolute;inset:0;z-index:0}
.medio>*{width:100%;height:100%;object-fit:cover}
.js-mv .medio>*{transform:scale(1.12)}
.velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.18) 34%,rgba(7,8,10,.82) 78%,rgba(7,8,10,.96) 100%)}

/* ---------- Tipografía ---------- */
/* La voz de marca. Copiado de identidad.css, que la fija y la
   razona: Zilla Slab se eligio el 2026-10-09 por el encargo —el
   slab serif viene de los planos de ingenieria y los titulos de
   propiedad— y trae cifras tabulares, que esta web son numeros
   en columna. Hasta hoy la llevaban 11 paginas y estas ocho no:
   las que venden iban en Archivo y las que cierran la venta en
   slab, sin que nadie lo hubiera decidido.

   NO se enchufa identidad.css entera: son 59 KB que ademas pisan
   color y reticula, y la portada esta hecha a proposito sin
   color. Solo viene su tratamiento de titulares.

   EL PESO BAJA DE 900 A 700 A PROPOSITO: Zilla Slab no tiene
   900, y pedirselo hace que el navegador falsifique la negrita
   engordando el trazo. En un slab, con los remates finos, eso
   se ve sucio y emborrona en grande.

   Y EL INTERLETRADO SUBE DE -.045em A -.018em: Zilla monta mas
   que Archivo y el valor de antes la apelmazaba. */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;
  letter-spacing:-.018em;line-height:.9;text-wrap:balance;
  font-variant-numeric:tabular-nums}
.d{font-size:var(--d)}
.t1{font-size:var(--t1)}
.t2{font-size:var(--t2)}
.lin{display:block;overflow:hidden;padding-bottom:.08em}
.lin>span{display:block}
.js-mv .lin>span{transform:translateY(104%)}

.ojo{display:flex;align-items:center;gap:14px;margin:0 0 20px;
  font-size:var(--mini);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.p--claro .ojo{color:rgba(7,8,10,.62)}
.ojo::after{content:"";height:1px;flex:1;max-width:90px;background:currentColor;opacity:.45;transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.js-mv .ojo::after{transform:scaleX(0)}
.js-mv .ojo.vino::after{transform:scaleX(1)}

.frase{margin:28px 0 0;font-size:var(--t2);line-height:1.45;font-weight:400;color:rgba(255,255,255,.76);max-width:34ch}
.p--claro .frase{color:rgba(7,8,10,.62)}
.pie{margin:26px 0 0;font-size:var(--p);line-height:1.6;color:rgba(255,255,255,.58);max-width:56ch}
.p--claro .pie{color:rgba(7,8,10,.58)}

/* Lo que entra al hacer scroll. Sin JS no se esconde nada: el
   estado de reposo cuelga de .js-mv, que pone el script. */
.js-mv [data-r]{opacity:0;transform:translateY(22px)}

/* ---------- Acciones ---------- */
.acc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(28px,3.6vw,44px)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 32px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--fondo);text-decoration:none;font:inherit;font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s,background .3s}
.btn:hover{transform:translateY(-2px);opacity:.88}
.p--claro .btn{background:var(--fondo);color:#fff}
.btn--linea{background:0;color:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.btn--linea:hover{background:rgba(255,255,255,.1)}
.p--claro .btn--linea{background:0;color:var(--fondo);box-shadow:inset 0 0 0 1px rgba(7,8,10,.24)}
.p--claro .btn--linea:hover{background:rgba(7,8,10,.06)}
.fl{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.btn:hover .fl{transform:translateX(5px)}

/* ---------- Cifras en línea ----------
   Sin caja: una caja encima de la foto es un parche. Una línea
   de números con su etiqueta debajo basta y deja ver el sitio. */
.datos{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,48px);margin-top:clamp(26px,3vw,38px)}
.dato b{display:block;font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.dato span{display:block;margin-top:9px;font-size:var(--mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.p--claro .dato span{color:rgba(7,8,10,.48)}

/* ---------- Listas de texto ----------
   Dos columnas: a la izquierda cómo se llama, a la derecha qué
   es. Es la forma más rápida de leer cinco cosas seguidas. */
.lista{list-style:none;margin:clamp(40px,5vw,68px) 0 0;padding:0}
.lista li{display:grid;grid-template-columns:minmax(140px,.3fr) 1fr;gap:clamp(14px,3vw,44px);
  padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid rgba(255,255,255,.14)}
.lista li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.p--claro .lista li{border-color:rgba(7,8,10,.12)}
.lista b{font-size:clamp(1.0625rem,1.8vw,1.375rem);font-weight:800;letter-spacing:-.025em}
.lista span{font-size:var(--p);line-height:1.5;color:rgba(255,255,255,.56)}
.p--claro .lista span{color:rgba(7,8,10,.56)}
@media (max-width:620px){.lista li{grid-template-columns:1fr;gap:8px}}

/* Una línea de palabras separadas por un punto. Nueve iconos
   inventados dicen menos que nueve palabras ciertas. */
.amen{display:flex;flex-wrap:wrap;gap:8px 0;list-style:none;margin:26px 0 0;padding:0;max-width:60ch}
.amen li{font-size:.875rem;color:rgba(255,255,255,.62)}
.amen li+li::before{content:"·";margin:0 10px;opacity:.5}

/* ============================================================
   LA FILA QUE CAMINA DE LADO
   Dos modos en el mismo marcado. De base es una tira que se
   arrastra con el dedo, con anclaje por tarjeta: eso es lo que
   ve quien no tiene JS o pidió menos movimiento. Con `.js-mv`
   se le quita el scroll propio y pasa a empujarla el scroll de
   la página.
   ============================================================ */
.lado{position:relative}
.lado__viga{display:flex;align-items:center;min-height:100vh;min-height:100svh;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.lado__viga::-webkit-scrollbar{display:none}
.js-mv .lado__viga{overflow:hidden;scroll-snap-type:none}
.lado__pista{display:flex;align-items:stretch;gap:clamp(14px,1.6vw,26px);
  padding:0 var(--gut);will-change:transform}
/* La tarjeta es la foto. El texto va encima, sobre un degradado
   que sube desde abajo: asi la imagen se ve entera arriba y el
   texto se lee siempre, sea cual sea la foto que entre. */
.lado__pan{position:relative;flex:0 0 auto;scroll-snap-align:center;display:block;
  overflow:hidden;text-decoration:none;color:#fff;
  width:min(80vw,420px);min-height:min(62vh,540px);border-radius:26px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.lado__pan>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.lado__pan:hover>img{transform:scale(1.05)}
.lado__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.1) 38%,rgba(0,0,0,.78) 100%)}
.lado__txt{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;
  justify-content:flex-end;padding:clamp(24px,2.6vw,38px)}
.lado__pan--rotulo{background:0;box-shadow:none;width:min(84vw,520px);
  display:flex;flex-direction:column;justify-content:center;padding:0 0 0 0}
.lado__num{font-size:var(--mini);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.lado__pan h3{margin:14px 0 0;font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:800;letter-spacing:-.03em}
.lado__pan p{margin:10px 0 0;font-size:var(--p);line-height:1.5;color:rgba(255,255,255,.76);max-width:34ch}
.lado__pan em{display:block;margin-top:20px;font-style:normal;font-size:.8125rem;font-weight:700;
  letter-spacing:.04em;opacity:.8;transition:opacity .3s}
.lado__pan:hover em{opacity:1}
.lado__hilo{position:absolute;bottom:clamp(26px,4vh,54px);left:var(--gut);right:var(--gut);
  display:block;height:1px;background:rgba(255,255,255,.16)}
.lado__hilo>i{display:block;height:100%;width:100%;background:#fff;
  transform:scaleX(0);transform-origin:0 50%}
@media (max-width:760px){.lado__hilo{display:none}}