/* Automóviles Deusto · Hyundai i30 N — dirección de arte "Automocion Cinetica" v2.
   El lenguaje sale de la referencia MEDIDA, no copiada: grafito de estudio, titular
   condensado gigantesco en movimiento, todo lo demás en monoespaciada versal,
   retícula visible con marcas, grano fotográfico y coreografía de scroll.
   Todo el color sale de los tokens de bai-site.json. Ni un color fuera de paleta. */

:root{
  --fondo:#111214;
  --tinta:#0b0b0c;
  --superficie:#1a1c1e;
  --linea:#2a2e33;
  --texto:#f4f4f5;
  --atenuado:#a1a5aa;
  --acento:#4fb3e8;
  --negro:#000000;

  --paso-1:4px; --paso-2:8px; --paso-3:12px; --paso-4:16px; --paso-5:24px;
  --paso-6:32px; --paso-7:48px; --paso-8:64px; --paso-9:96px; --paso-10:128px; --paso-11:192px;

  --radio:2px;
  --curva:cubic-bezier(.16,1,.3,1);
  --dur:640ms;

  --display:"Bebas Neue",Impact,ui-monospace,monospace;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@font-face{font-family:"Bebas Neue";src:url("../fonts/bebas-neue-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--mono);font-size:16px;line-height:1.5;letter-spacing:-.03em;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.sr-solo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:var(--acento);color:var(--tinta)}

/* ── retícula visible + marcas: la firma de la casa ───────────────────── */
body::before{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to right,rgba(244,244,245,.06) 0 1px,rgba(244,244,245,0) 1px 100%) 25% 0/25% 100% repeat-x,
    linear-gradient(to right,rgba(244,244,245,.06) 0 1px,rgba(244,244,245,0) 1px 100%) 0 0/25% 100% repeat-x;
}
.seccion{position:relative;z-index:3}
.seccion::before,.seccion::after{
  content:"+";position:absolute;top:-7px;z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:13px;line-height:1;color:rgba(244,244,245,.28);
}
.seccion::before{left:calc(25% - 4px)}
.seccion::after{left:calc(75% - 4px)}

/* grano fotográfico global (el JS lo crea; decorativo puro) */
.grano{
  position:fixed;inset:-100px;z-index:40;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ── cargador ─────────────────────────────────────────────────────────── */
.cargador{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--tinta);transition:transform 900ms var(--curva),visibility 0s 900ms;
}
.cargador--fuera{transform:translateY(-100%);visibility:hidden}
.cargador__marco{display:grid;gap:var(--paso-3);justify-items:center}
.cargador__num{font-family:var(--display);font-size:clamp(80px,16vw,220px);line-height:.85;color:var(--texto)}
.cargador__pie{font-size:12px;text-transform:uppercase;color:var(--atenuado);letter-spacing:.14em}
html.cargando{overflow:hidden}

/* ── cursor propio (solo puntero fino, decorativo) ────────────────────── */
.cursor{
  position:fixed;left:0;top:0;z-index:70;width:10px;height:10px;border-radius:50%;
  background:var(--acento);pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width 200ms var(--curva),height 200ms var(--curva),opacity 200ms;
  opacity:0;
}
.cursor--viva{opacity:1}
.cursor--activo{width:34px;height:34px}
@media (pointer:coarse){.cursor{display:none}}

/* ── cabecera flotante ────────────────────────────────────────────────── */
.cabecera{
  position:fixed;top:var(--paso-4);left:50%;transform:translateX(-50%);
  z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--paso-5);
  width:min(92vw,720px);padding:var(--paso-3) var(--paso-4);
  background:rgba(26,28,30,.92);border:1px solid var(--linea);border-radius:999px;
  backdrop-filter:blur(14px);transition:transform var(--dur) var(--curva);
}
.cabecera--oculta{transform:translateX(-50%) translateY(calc(-1 * var(--paso-9)))}
.cabecera__marca{position:relative;z-index:1;font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.cabecera__cta,.cabecera__menu{position:relative;z-index:1;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0}
.cabecera__cta{color:var(--acento)}
.cabecera__menu{display:grid;gap:5px;width:26px;padding:0;background:none;border:0;cursor:pointer}
.cabecera__menu span{display:block;height:1px;background:var(--texto);transition:transform 300ms var(--curva)}
.cabecera__menu[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.cabecera__menu[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu{
  position:fixed;top:calc(var(--paso-8) + var(--paso-2));left:50%;transform:translateX(-50%);z-index:19;
  display:grid;gap:var(--paso-3);width:min(92vw,720px);padding:var(--paso-5);
  background:rgba(26,28,30,.96);border:1px solid var(--linea);border-radius:var(--radio);
  font-size:13px;text-transform:uppercase;backdrop-filter:blur(14px);
}
.menu[hidden]{display:none}
.menu a{transition:color 200ms,transform 200ms var(--curva)}
.menu a:hover,.menu a:focus-visible{color:var(--acento);transform:translateX(6px)}

/* ── tipografía ───────────────────────────────────────────────────────── */
.titular{font-family:var(--display);font-weight:400;line-height:.86;letter-spacing:.01em;text-transform:uppercase;margin:0}
.titular--hero{font-size:clamp(52px,6vw,96px)}
.titular--tarjeta{font-size:clamp(40px,4vw,64px)}
.titular--bloque{font-size:clamp(32px,3vw,44px)}
.titular--seccion{font-size:clamp(40px,5vw,76px)}
.titular--franja{font-size:clamp(40px,7vw,120px);max-width:14ch}
.texto{font-size:15px;line-height:1.6;color:var(--texto);margin:0}
.etiqueta{font-size:12px;text-transform:uppercase;color:var(--atenuado);margin:0;letter-spacing:0}
.nota{font-size:12px;line-height:1.6;color:var(--atenuado)}

/* titulares partidos en caracteres (el JS envuelve; sin JS no hay spans) */
.titular .lin{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.14em;margin-top:-.14em}
.titular .ch{display:inline-block;transform:translateY(115%);transition:transform 900ms var(--curva);transition-delay:var(--retardo,0ms)}
html.lista .titular--hero .ch,
.titular--franja.esta-visible .ch{transform:translateY(0)}

.boton{
  display:inline-block;padding:var(--paso-3) var(--paso-5);
  background:var(--acento);color:var(--tinta);
  font-size:13px;text-transform:uppercase;letter-spacing:0;border:1px solid var(--acento);border-radius:999px;cursor:pointer;
  font-family:var(--mono);transition:transform 300ms var(--curva),background 300ms var(--curva),border-color 300ms;
}
.boton:hover,.boton:focus-visible{transform:translateY(-2px);background:var(--texto);border-color:var(--texto)}
.boton--fantasma{background:rgba(0,0,0,0);color:var(--texto);border-color:var(--linea)}
.boton--fantasma:hover,.boton--fantasma:focus-visible{background:var(--acento);color:var(--tinta);border-color:var(--acento)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.seccion--hero{min-height:100svh;display:grid;align-items:start;overflow:hidden}
.hero__medio{position:absolute;inset:0;margin:0;z-index:0}
.hero__foto{width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.14);transition:transform 2200ms var(--curva)}
html.lista .hero__foto{transform:scale(1)}
.hero__tinta{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(11,11,12,.94) 0%,rgba(11,11,12,.42) 42%,rgba(11,11,12,.08) 72%,rgba(11,11,12,.30) 100%),
    linear-gradient(to left,rgba(11,11,12,.72) 0%,rgba(11,11,12,0) 52%);
}
.marquesina{position:absolute;left:0;right:0;bottom:var(--paso-6);z-index:1;overflow:hidden}
.marquesina__pista{display:flex;gap:var(--paso-8);width:max-content;will-change:transform}
.marquesina__pista span{
  font-family:var(--display);font-size:clamp(110px,19vw,290px);line-height:.8;text-transform:uppercase;
  color:var(--texto);opacity:.96;
}
.hero__texto{
  position:relative;z-index:4;display:grid;gap:var(--paso-4);justify-items:start;
  margin:auto clamp(var(--paso-4),3vw,var(--paso-7)) clamp(230px,32vh,360px) auto;
  padding:var(--paso-6);max-width:min(92vw,520px);
  background:rgba(11,11,12,.9);border:1px solid rgba(42,46,51,.9);border-radius:var(--radio);
  backdrop-filter:blur(10px);
  margin-top:calc(var(--paso-9) + var(--paso-6));
}
.hero__aviso{
  position:absolute;z-index:5;left:clamp(var(--paso-4),3vw,var(--paso-7));top:calc(var(--paso-8) + var(--paso-3));
  margin:0;padding:var(--paso-2) var(--paso-3);font-size:11px;color:var(--atenuado);max-width:34ch;
  background:rgba(11,11,12,.9);border:1px solid var(--linea);border-radius:999px;
}

/* ── cifras ───────────────────────────────────────────────────────────── */
.seccion--cifras{background:var(--superficie);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cifras{list-style:none;margin:0;padding:var(--paso-8) clamp(var(--paso-5),4vw,var(--paso-8));
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--paso-7)}
.cifras li{display:grid;gap:var(--paso-2)}
.cifra{font-family:var(--display);font-size:clamp(56px,7vw,112px);line-height:.85;color:var(--texto)}
.cifra__pie{font-size:12px;text-transform:uppercase;color:var(--atenuado)}

/* ── versiones: imagen fija a pantalla + tarjeta centrada ─────────────── */
.version{position:relative;min-height:170svh}
.version__medio{position:sticky;top:0;margin:0;height:100svh;overflow:hidden;z-index:0}
.version__medio img{width:100%;height:100%;object-fit:cover;will-change:transform}
.version__fondo--manual{object-position:50% 78%}
.version__medio::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,12,.55) 0%,rgba(11,11,12,.08) 45%,rgba(11,11,12,.35) 100%);
}
.tarjeta{
  position:absolute;left:50%;top:110svh;transform:translateX(-50%);z-index:2;
  display:grid;gap:var(--paso-3);justify-items:center;text-align:center;
  width:min(88vw,400px);padding:var(--paso-6);
  background:rgba(17,18,20,.9);border:1px solid var(--linea);border-radius:var(--radio);
  backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.tarjeta__linea{margin:0;font-size:13px;text-transform:uppercase;color:var(--acento)}
.tarjeta__mini{margin:var(--paso-2) 0;width:min(58%,200px);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.tarjeta__mini img{transition:transform 700ms var(--curva)}
.tarjeta:hover .tarjeta__mini img{transform:scale(1.06)}

/* ── especie: palabras gigantes con eco ───────────────────────────────── */
.seccion--especie{padding:var(--paso-11) clamp(var(--paso-4),4vw,var(--paso-8));overflow:hidden}
.especie{display:grid;gap:0}
.especie__linea{display:block;overflow:hidden;line-height:.84;padding-top:.14em;margin-top:-.14em}
.especie__linea--der{text-align:right}
.especie__palabra{
  display:block;font-family:var(--display);font-size:clamp(64px,15vw,230px);
  line-height:.84;text-transform:uppercase;color:var(--texto);
}
.especie__linea--eco{line-height:.7}
.especie__eco{color:rgba(244,244,245,.34)}
.especie__eco--2{color:rgba(244,244,245,.12)}
html.js .especie__palabra{transform:translateY(110%);transition:transform 1000ms var(--curva);transition-delay:var(--retardo,0ms)}
html.js .especie__palabra.esta-visible{transform:translateY(0)}
.especie__nota{max-width:44ch;margin-top:var(--paso-7);color:var(--atenuado)}

/* ── bloques numerados ────────────────────────────────────────────────── */
.seccion--bloques{
  display:grid;gap:var(--paso-8);
  padding:var(--paso-10) clamp(var(--paso-4),4vw,var(--paso-8));
  border-top:1px solid var(--linea);
}
.bloque{display:grid;gap:var(--paso-3);align-content:start;max-width:56ch}
.bloques__medio{margin:0;overflow:hidden;border:1px solid var(--linea)}
.bloques__medio img{width:100%;will-change:transform}

/* ── titular cinético: el scroll lo arrastra ──────────────────────────── */
.seccion--cinetica{padding:var(--paso-11) 0;overflow:hidden}
.cinetica{display:grid;gap:var(--paso-2)}
.cinetica__palabra{
  display:block;white-space:nowrap;will-change:transform;
  font-family:var(--display);font-size:clamp(56px,12vw,190px);line-height:.84;text-transform:uppercase;
  color:var(--texto);padding:0 clamp(var(--paso-4),4vw,var(--paso-8));
}
.cinetica__palabra--hueca{
  color:rgba(0,0,0,0);-webkit-text-stroke:2px var(--atenuado);text-align:right;
}

/* ── franja a sangre ──────────────────────────────────────────────────── */
.seccion--franja{position:relative;display:grid;align-items:end;min-height:88svh;overflow:hidden}
.franja__medio{position:absolute;inset:0;margin:0;z-index:0}
.franja__medio img{width:100%;height:100%;object-fit:cover;will-change:transform}
.seccion--franja .titular--franja{position:relative;z-index:1;padding:var(--paso-8) clamp(var(--paso-4),4vw,var(--paso-8))}
.seccion--franja::after{
  content:"+";position:absolute;
}
.seccion--franja .franja__medio::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,12,.9) 0%,rgba(11,11,12,.3) 55%,rgba(11,11,12,.45) 100%);
}

/* ── ficha técnica ────────────────────────────────────────────────────── */
.seccion--ficha{display:grid;gap:var(--paso-6);padding:var(--paso-10) clamp(var(--paso-4),4vw,var(--paso-8));border-top:1px solid var(--linea)}
.ficha{width:100%;border-collapse:collapse;font-size:14px}
.ficha th,.ficha td{text-align:left;padding:var(--paso-4) 0;border-bottom:1px solid var(--linea);vertical-align:top}
.ficha th{width:34%;font-weight:400;text-transform:uppercase;font-size:12px;color:var(--atenuado)}
.ficha tr{transition:background 200ms}
.ficha tbody tr:hover{background:rgba(244,244,245,.03)}

/* ── reservar ─────────────────────────────────────────────────────────── */
.seccion--reservar{
  display:grid;gap:var(--paso-8);
  padding:var(--paso-10) clamp(var(--paso-4),4vw,var(--paso-8));
  background:var(--superficie);border-top:1px solid var(--linea);
}
.reservar__texto{display:grid;gap:var(--paso-4);align-content:start;max-width:52ch}
.formulario{display:grid;gap:var(--paso-5)}
.formulario label{display:grid;gap:var(--paso-2);font-size:12px;text-transform:uppercase;color:var(--atenuado)}
.formulario input[type=text],.formulario input[type=tel],.formulario input[type=email],.formulario select{
  font-family:var(--mono);font-size:15px;color:var(--texto);
  background:rgba(0,0,0,0);border:0;border-bottom:1px solid var(--linea);padding:var(--paso-3) 0;
  transition:border-color 250ms;
}
.formulario input:focus-visible,.formulario select:focus-visible{outline:0;border-bottom-color:var(--acento)}
.formulario__consentimiento{grid-template-columns:auto 1fr;align-items:start;gap:var(--paso-3);text-transform:none;font-size:12px;line-height:1.6}
.formulario button{justify-self:start}

/* ── créditos y pie ──────────────────────────────────────────────────── */
.seccion--creditos{display:grid;gap:var(--paso-5);padding:var(--paso-9) clamp(var(--paso-4),4vw,var(--paso-8));border-top:1px solid var(--linea)}
.creditos{list-style:none;margin:0;padding:0;display:grid;gap:var(--paso-3);font-size:12px;line-height:1.7;color:var(--atenuado);max-width:80ch}
.pie{display:grid;gap:var(--paso-3);padding:var(--paso-8) clamp(var(--paso-4),4vw,var(--paso-8));border-top:1px solid var(--linea);background:var(--tinta);position:relative;z-index:3}
.pie__marca{font-family:var(--display);font-size:clamp(40px,9vw,120px);line-height:.85;text-transform:uppercase;margin:0}
.pie__nota{margin:0;font-size:12px;color:var(--atenuado)}

/* ── coreografía de reveals ──────────────────────────────────────────── */
html.js [data-motion=revelar]{opacity:0;transform:translateY(44px);transition:opacity var(--dur) var(--curva),transform var(--dur) var(--curva)}
html.js [data-motion=revelar].esta-visible{opacity:1;transform:none}

/* ── escritorio ──────────────────────────────────────────────────────── */
@media (min-width:900px){
  .cifras{grid-template-columns:repeat(4,1fr)}
  .seccion--bloques{grid-template-columns:repeat(3,1fr);align-items:start}
  .bloques__medio{grid-column:1 / -1}
  .seccion--reservar{grid-template-columns:1fr 1fr;align-items:start}
  .seccion--ficha{grid-template-columns:1fr 1fr;align-items:start}
}

/* ── la preferencia manda: sin movimiento, TODO visible y quieto ─────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html.js [data-motion=revelar],html.js .especie__palabra{opacity:1;transform:none}
  .titular .ch{transform:none}
  .hero__foto{transform:none}
  .marquesina__pista,.cinetica__palabra{transform:none !important}
  .cursor,.grano{display:none}
}