/*
 * Aiguarda · prototipo de EnekoDevs (marca ficticia).
 *
 * Regla de esta hoja: el estado POR DEFECTO es el final y legible. Los estados de partida
 * de las animaciones solo los pone JavaScript, y las alturas largas y los escenarios fijos
 * solo existen bajo html.con-escenas (que pone escenas.js si hay movimiento). Sin JS, sin
 * GSAP o con «reducir movimiento», la página se lee entera de arriba abajo.
 */

@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --noche: #0B1210;
  --roca: #0E1614;
  --pizarra: #151F1C;
  --nieve: #E3ECE9;
  --nieve-78: rgba(227, 236, 233, 0.78);
  --nieve-55: rgba(227, 236, 233, 0.55);
  --linea: rgba(227, 236, 233, 0.16);
  --alba: #8EC3D4;
  --alba-viva: #9ACADA;
  --haz: 226, 238, 242;
  --error: #FF9A85;
  --reserva: linear-gradient(160deg, #192321 0%, var(--noche) 70%);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titular: "Anton", Impact, "Arial Narrow", sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --margen: 4vw;
  --barra: 72px;
}

@media (max-width: 599px) {
  :root { --margen: 16px; --barra: 60px; }
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--noche);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--nieve);
  font: 400 clamp(15px, 0.9vw + 4px, 17px) / 1.5 var(--fuente);
  overflow-wrap: break-word;
  overflow-x: clip;
}

img, svg { max-width: 100%; }

a { color: inherit; }

::selection { background: var(--alba); color: var(--noche); }

:focus-visible {
  outline: 2px solid var(--nieve);
  outline-offset: 3px;
}

/* Grano: un velo de ruido fijo, hecho con feTurbulence (nuestro), estático */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Piezas comunes                                                      */
/* ------------------------------------------------------------------ */

.titular {
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--nieve);
}

/* Cada línea de un titular es una máscara: dentro, el texto que sube */
.linea {
  display: block;
  overflow: hidden;
  padding: 0.07em 0 0.03em;
  margin: -0.07em 0 -0.03em;
}
.linea__dentro { display: block; }

.alba { color: var(--alba); }
.tenue { color: var(--nieve-55); }

.mono {
  font-family: var(--fuente-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.foto-reserva { background: var(--reserva); }
.foto-reserva img { display: block; }
.img-rota { opacity: 0; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 44px;
  padding: 13px 18px;
  border: 0;
  border-radius: 2px;
  background: var(--alba);
  color: var(--noche);
  font: 600 12px / 1.2 var(--fuente-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.boton:hover { background: var(--alba-viva); }
.boton:focus-visible { outline: 2px solid var(--nieve); outline-offset: 3px; }
.boton--bloque { width: 100%; }
.boton--linea {
  background: transparent;
  color: var(--nieve);
  border: 1px solid var(--nieve);
}
.boton--linea:hover { background: rgba(227, 236, 233, 0.1); }

.solo-ancho { display: inline; }
.solo-movil { display: none; }

/*
 * Titulares con luz: el relleno va en degradado según de dónde viene la luz de SU foto
 * (el alba arriba a la izquierda en la portada, el sol bajo a la derecha en el cierre).
 * Es fijo: no cambia con el scroll. La parada más apagada guarda ≥ 3:1 sobre la noche.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .luz .linea__dentro {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .luz .linea__dentro::selection { -webkit-text-fill-color: var(--noche); }
  .luz--alba .linea__dentro { background-image: linear-gradient(100deg, #F3F8F7 0%, #E3ECE9 38%, #9DA5A3 100%); }
  .luz--alba .alba .linea__dentro { background-image: linear-gradient(100deg, #BAE1EF 0%, #8EC3D4 40%, #4F8293 100%); }
  .luz--ocaso .linea__dentro { background-image: linear-gradient(80deg, #9DA5A3 0%, #E3ECE9 62%, #F3F8F7 100%); }
  .luz--ocaso .alba .linea__dentro { background-image: linear-gradient(80deg, #4F8293 0%, #8EC3D4 62%, #BAE1EF 100%); }
}

/* Curvas de nivel: la identidad de montaña, de fondo en Foco y Tecnologías */
.curvas {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse at 30% 62%, transparent 0 22px, rgba(227, 236, 233, 0.045) 22px 23px);
}

/* Saltar al configurador (visible solo con el teclado) */
.saltar {
  position: fixed;
  left: 8px;
  top: -120px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--nieve);
  color: var(--noche);
  font: 600 12px / 1.2 var(--fuente-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.saltar:focus { top: 8px; }

/* ------------------------------------------------------------------ */
/* Barra fija                                                          */
/* ------------------------------------------------------------------ */

.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--barra);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--margen);
  background: linear-gradient(180deg, rgba(11, 18, 16, 0.85) 0%, rgba(11, 18, 16, 0.6) 55%, rgba(11, 18, 16, 0) 100%);
}
/* Pasada la portada, la barra se vuelve opaca para que nada se lea por debajo (escenas.js) */
.barra--solida { background: rgba(11, 18, 16, 0.9); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra--solida {
    background: rgba(11, 18, 16, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
/* La marca es el logotipo (marca/final-3/logo.svg, en línea): toma el color del enlace. */
.barra__marca {
  justify-self: start;
  display: block;
  line-height: 0;
  text-decoration: none;
  color: var(--nieve);
}
/* max-width: none: con la regla general (svg { max-width: 100% }) el logo cedía todo su
   sitio en la rejilla y entre 600 y 800 px de ancho medía 0 px. */
.barra__logo { display: block; height: 34px; width: auto; max-width: none; aspect-ratio: 612 / 228; }
.barra__aviso {
  margin: 0;
  color: var(--nieve-55);
  text-align: center;
  white-space: nowrap;
}
.barra__acciones {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.barra__movimiento {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--nieve-78);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.barra__movimiento:hover { color: var(--nieve); }
/* Pulsado = página quieta. La marca no se lee en voz alta (el estado ya lo dice aria-pressed). */
.barra__movimiento[aria-pressed="true"] { color: var(--alba); }
.barra__movimiento[aria-pressed="true"]::after { content: " \2713"; content: " \2713" / ""; }

/*
 * La barra en tres anchos (el móvil, < 600 px, va abajo, en «Móvil»). El reparto de
 * 1fr · aviso · 1fr, con el aviso centrado en la página, solo cabe desde 1200 px. Por
 * debajo, el aviso pierde « · a concept by EnekoDevs» (sigue en el pie); de 900 a 1199 px
 * va en una fila sin centrar en la página, y de 600 a 899 px en dos, como en el móvil:
 * logo arriba, aviso debajo y botones a la derecha (y «Quote» sin « for your club»).
 */
@media (max-width: 1199px) {
  .barra__aviso .solo-ancho { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .barra { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .barra {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 2px;
  }
  .barra__marca { grid-column: 1; grid-row: 1; }
  .barra__aviso { grid-column: 1; grid-row: 2; text-align: left; color: var(--nieve-78); }
  .barra__acciones { grid-column: 2; grid-row: 1 / 3; }
  .barra .boton .solo-ancho { display: none; }
}

/* ------------------------------------------------------------------ */
/* Escena 1 · Cargador de cifras                                       */
/* ------------------------------------------------------------------ */

.carga { display: none; }
html.con-carga { overflow: hidden; }
html.con-carga .carga {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
}
html.con-carga .perfil { visibility: hidden; }

.carga__mitad {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #000;
  will-change: transform;
}
.carga__mitad--arriba { top: 0; }
.carga__mitad--abajo { bottom: 0; }

.carga__linea {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: var(--alba);
  transform: scaleX(0);
}

.carga__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.carga__marca,
.carga__altitud {
  position: absolute;
  bottom: 24px;
  margin: 0;
  color: var(--nieve-55);
}
.carga__marca { left: var(--margen); }
.carga__altitud { right: var(--margen); }

.carga__entrar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--nieve-78);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 4px;
}
.carga__entrar:hover { color: var(--nieve); }

/* ------------------------------------------------------------------ */
/* Escena 2 · Portada                                                  */
/* ------------------------------------------------------------------ */

.portada {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
  /* El texto conserva su apoyo abajo y la portada crece antes de meterlo bajo la barra. */
  padding: calc(var(--barra) + 1rem) var(--margen) max(9vh, calc(3vh + 2.5rem));
  overflow: hidden;
  background: var(--noche);
}
.portada__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.portada__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--noche) 0%, rgba(11, 18, 16, 0) 28%),
    linear-gradient(90deg, rgba(11, 18, 16, 0.82) 0%, rgba(11, 18, 16, 0.35) 38%, rgba(11, 18, 16, 0) 60%);
}
.portada__texto {
  max-width: 36vw;
}
.portada__ante { margin: 0; color: var(--nieve-78); }
.portada__titulo {
  --titulo-portada: clamp(3.5rem, min(8.4vw, 13vh), 9.5rem);
  margin: 16px 0 22px;
  font-size: var(--titulo-portada);
  /* En ventanas bajas, las cuatro líneas comparten el espacio con la barra y la acción. */
  font-size: min(var(--titulo-portada), max(3.5rem, calc((100svh - 21rem) / 3.75)));
}
.portada__accion { margin: 22px 0 0; }
.portada__entradilla {
  margin: 0 0 14px;
  max-width: 34ch;
  color: var(--nieve-78);
}
.portada__precio { margin: 0; color: var(--nieve-78); }
.portada__ficha {
  position: absolute;
  right: var(--margen);
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  color: var(--nieve-78);
}
.portada__bajar {
  position: absolute;
  left: var(--margen);
  bottom: 3vh;
  margin: 0;
  color: var(--nieve-55);
}

/* Sin cargador: la portada espera a escenas.js (como mucho 2 s, lo quita el <head>) */
html.entrada-pendiente .portada__titulo .linea__dentro { transform: translateY(105%); }
html.entrada-pendiente .portada .aparece { opacity: 0; }

/* ------------------------------------------------------------------ */
/* Escena 3 · Foco                                                     */
/* ------------------------------------------------------------------ */

.foco {
  position: relative;
  z-index: 1;
  background: var(--noche);
}
/* Sin escenas (sin JS, sin GSAP o con «reducir movimiento»): la frase arriba y la
   botella debajo, una tras otra, sin taparse. */
.foco__escenario {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  padding: calc(var(--barra) + 6vh) var(--margen) 16vh;
}
/* Con escenas: 100vh de escenario + 160vh de animación. Equipo empieza encima de los
   últimos 100vh, así que su cresta sube justo cuando acaba la vuelta. */
html.con-escenas .foco { height: 260vh; }
html.con-escenas .foco__escenario {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
}

.foco__frase {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 11vw, 13rem);
  text-align: center;
  color: #636B69;
}
html.con-escenas .foco__frase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--margen);
}
.foco__fila { display: block; white-space: nowrap; }
.foco__frase .alba { color: #457281; }
/*
 * La frase está en penumbra y solo se aclara donde cae el haz: un charco de luz fijo en
 * el centro de la pantalla. La frase se desliza por debajo (escenas.js mueve --dx y la
 * frase a la vez), así que se encienden las letras que pasan bajo el cono.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foco__fila {
    background-image: radial-gradient(24vw 130% at calc(50% - var(--dx, 0px)) 55%, #F3F8F7 0%, #E3ECE9 32%, #828A89 72%, #636B69 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .foco__frase .alba {
    background-image: radial-gradient(24vw 130% at calc(50% - var(--dx, 0px)) 55%, #BAE1EF 0%, #8EC3D4 32%, #548798 72%, #457281 100%);
  }
  .foco__fila::selection { -webkit-text-fill-color: var(--noche); }
}

/* El haz del frontal: cae vertical desde arriba. El desenfoque va fuera del recorte. */
.foco__haz {
  position: absolute;
  top: -8vh;
  left: 30vw;
  width: 40vw;
  height: 112vh;
  z-index: 2;
  pointer-events: none;
  filter: blur(6px);
  mix-blend-mode: screen;
}
.foco__haz::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(var(--haz), 0) 0%, rgba(var(--haz), 0.35) 50%, rgba(var(--haz), 0) 100%),
    linear-gradient(180deg, rgba(var(--haz), 0.62) 0%, rgba(var(--haz), 0.3) 30%, rgba(var(--haz), 0.12) 62%, rgba(var(--haz), 0) 100%);
}
.foco__lente {
  position: absolute;
  top: -6px;
  left: calc(50% - 45px);
  width: 90px;
  height: 22px;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(rgba(var(--haz), 1), rgba(var(--haz), 0) 70%);
  filter: blur(4px);
}
.foco__charco {
  position: absolute;
  bottom: 9vh;
  left: 31vw;
  width: 38vw;
  height: 7vw;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--haz), 0.3) 0%, rgba(var(--haz), 0) 70%);
}
.foco__polvo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.foco__polvo i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--t);
  height: var(--t);
  border-radius: 50%;
  background: rgba(var(--haz), 0.7);
  opacity: 0.15;
  animation: polvo var(--d) ease-in-out var(--r) infinite alternate;
}
@keyframes polvo {
  to { transform: translateY(-30px); opacity: 0.6; }
}
html.quieto .foco__polvo i { animation-play-state: paused; }

.vitrina {
  position: relative;
  margin: 0;
}
.foco__vitrina {
  z-index: 3;
  width: min(32vw, 440px);
  height: 55vh;
  height: 55svh;
}
.visor {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--alba);
  --progress-bar-height: 2px;
}
/* La pista va debajo de la botella, nunca encima de ella */
.foco__pista {
  position: absolute;
  left: -40px;
  right: -40px;
  top: 100%;
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--nieve-78);
}
.foco__ficha,
.foco__giro {
  position: absolute;
  bottom: 24px;
  z-index: 3;
  margin: 0;
  color: var(--nieve-55);
}
.foco__ficha { left: var(--margen); }
.foco__giro { right: var(--margen); }
/* Sin escenas la botella no gira con el scroll: el contador de grados no dice nada */
html:not(.con-escenas) .foco__giro { display: none; }

.vitrina__error {
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  z-index: 4;
  translate: 0 -50%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--alba);
  background: var(--pizarra);
  color: var(--nieve);
  font-size: 15px;
}
/* En el foco el aviso va debajo de la vitrina, para no tapar la frase; y sin modelo no
   tiene sentido ni la pista de giro ni el contador de grados. */
.foco__vitrina .vitrina__error { top: 100%; translate: none; margin-top: 10px; left: -24px; right: -24px; }
.vitrina--sin-3d .foco__pista,
.vitrina--sin-3d .vitrina__pista { display: none; }
.foco:has(.vitrina--sin-3d) .foco__giro { display: none; }

/* ------------------------------------------------------------------ */
/* Escena 5 · Tecnologías                                              */
/* ------------------------------------------------------------------ */

.tecnologias {
  position: relative;
  z-index: 4;
  overflow: hidden;
  background: var(--roca);
}
/* Por defecto (sin movimiento): todo apilado y visible */
.tira {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12vh;
  padding: 16vh var(--margen);
}
.tira__entrada { max-width: 760px; }
.tira__titulo {
  margin: 16px 0 22px;
  font-size: clamp(2.75rem, 6.4vw, 7rem);
}
.tira__nota { margin: 0; max-width: 28ch; }

.tarjeta {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pizarra);
  border: 1px solid var(--linea);
}
.tarjeta__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tarjeta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
}
.tarjeta__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 18, 16, 0.78) 0%, rgba(11, 18, 16, 0) 24%),
    linear-gradient(0deg, rgba(11, 18, 16, 0.94) 0%, rgba(11, 18, 16, 0) 58%);
}
.tarjeta__etiqueta {
  position: absolute;
  top: 20px;
  left: 24px;
  margin: 0;
}
.tarjeta__pie {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
}
.tarjeta__nombre {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 2.5vw, 2.75rem);
}
.tarjeta__texto {
  margin: 0;
  max-width: 30ch;
  font-size: 15px;
  color: var(--nieve-78);
}
/* Con movimiento: un escenario de una pantalla con la tira en horizontal, que sube por
   encima del Equipo mientras este sigue fijo (de ahí el margen negativo). Las tarjetas
   van todas a la misma altura, centradas, y la última no toca el borde. */
html.con-escenas .tecnologias { height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; }
html.con-escenas .tira {
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: max-content;
  height: 100%;
  padding: 0 8vw 0 0;
  will-change: transform;
}
html.con-escenas .tira__entrada {
  flex: 0 0 100vw;
  max-width: none;
  padding-left: 8vw;
}
html.con-escenas .tarjeta {
  flex: 0 0 auto;
  width: clamp(280px, 30vw, 460px);
  max-width: none;
  margin: 0 0 0 8vw;
}

/* ------------------------------------------------------------------ */
/* Escena 4 · Equipo                                                   */
/* ------------------------------------------------------------------ */

.equipo {
  position: relative;
  z-index: 2;
  background: var(--noche);
}
.equipo__escenario {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--noche);
}
/* Con movimiento, Equipo empieza encima del final del foco y es transparente: la cresta
   sube por delante de la botella. Su animación dura 120vh; en los 100vh siguientes la
   tira de Tecnologías sube por encima. */
html.con-escenas .equipo {
  z-index: 3;
  height: 320vh;
  margin-top: -100vh;
  margin-top: -100svh;
  background: transparent;
}
html.con-escenas .equipo__escenario { position: sticky; top: 0; background: transparent; }

.equipo__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.equipo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.equipo__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 16, 0.55) 0%, rgba(11, 18, 16, 0) 40%, rgba(11, 18, 16, 0) 66%, rgba(11, 18, 16, 0.94) 100%);
}
.equipo__palabra {
  --equipo-titular-top: 11vh;
  position: absolute;
  /* Deja sitio para la barra y para el borde superior de las máscaras de las letras. */
  top: max(var(--equipo-titular-top), calc(var(--barra) + 0.75rem + 0.08em));
  left: var(--margen);
  font-size: clamp(5rem, 14vw, 15rem);
  line-height: 0.82;
  color: var(--alba);
  white-space: nowrap;
}
.letra-mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-top: 0.08em; margin-top: -0.08em; }
.letra { display: inline-block; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.equipo__vertical {
  position: absolute;
  right: 3vw;
  bottom: 25vh;
  margin: 0;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: clamp(1.5rem, 4.5vh, 3.25rem);
  line-height: 1;
  white-space: nowrap;
}
/* La franja de pedido: una línea baja sobre la roca, bajo las botellas, sin tapar ninguna */
.equipo__franja {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: 5vh;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 4vw;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.equipo__franja-cabeza { flex: 0 1 auto; }
.equipo__franja-cabeza > p { margin: 0 0 8px; }
.equipo__franja-titulo { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 0.95; }
.equipo__franja-texto { flex: 1 1 32ch; max-width: 52ch; margin: 0; font-size: 15px; color: var(--nieve-78); }
.equipo__franja .boton { flex: none; }
/* Con el teclado, el foco puede caer en «Set the club colours» antes de que el scroll haya
   hecho aparecer la franja (escenas.js la tiene a opacidad 0): con el foco dentro, se ve. */
.equipo__franja:focus-within { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ */
/* Escena 6 · Configurador                                             */
/* ------------------------------------------------------------------ */

.configurador {
  position: relative;
  z-index: 2;
  padding: 11vh 6vw 10vh;
  background: var(--noche);
}
.pedido__abrir { margin: 8px 0 0; }

/* El diálogo del pedido: resumen y datos de contacto, fuera de la escena */
.dialogo {
  width: min(560px, calc(100vw - 32px));
  max-height: min(90vh, 920px);
  max-height: min(90svh, 920px);
  margin: auto;
  padding: 26px 28px 28px;
  border: 1px solid var(--linea);
  background: var(--roca);
  color: var(--nieve);
  overflow: auto;
  overscroll-behavior: contain;
}
.dialogo::backdrop { background: rgba(11, 18, 16, 0.8); }
.dialogo__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.dialogo__titulo { font-size: clamp(2rem, 4vw, 2.75rem); }
.dialogo__cerrar {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--nieve-78);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 4px;
}
.dialogo__cerrar:hover { color: var(--nieve); }
.dialogo .resumen { margin-bottom: 28px; }
.dialogo .grupo { margin-bottom: 24px; }
.configurador:focus { outline: none; }
.configurador__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 6vw;
  align-items: start;
}
.configurador__escena {
  position: sticky;
  top: 12vh;
  height: 76vh;
}
.vitrina--config {
  height: 100%;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--haz), 0.16) 0%, transparent 62%);
}
.vitrina--config .visor { height: calc(100% - 92px); }
.vitrina__pista {
  margin: 12px 0 0;
  font-size: 10px;
  text-align: center;
  color: var(--nieve-55);
}
.vitrina__eleccion {
  display: block;
  margin-bottom: 4px;
  color: var(--nieve);
}

.configurador__titulo {
  margin: 14px 0 20px;
  font-size: clamp(2.75rem, 6vw, 6rem);
}
.configurador__intro { margin: 0 0 40px; max-width: 44ch; color: var(--nieve-78); }

.aviso-sin-js {
  padding: 14px 16px;
  border-left: 3px solid var(--alba);
  background: var(--pizarra);
}

.grupo {
  min-width: 0;
  margin: 0 0 36px;
  padding: 0;
  border: 0;
}
.grupo legend {
  padding: 0;
  margin-bottom: 16px;
  color: var(--nieve-78);
}

/* Muestras de color (radios accesibles con el teclado: Tab entra, flechas cambian) */
.muestras {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 6px;
}
.muestras--tapa { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.muestra { position: relative; }

.muestra__input,
.escalon__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.muestra__etiqueta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;
}
.muestra__color {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--muestra, #888888);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -6px 10px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s ease;
}
.muestra__nombre {
  font-size: 12px;
  line-height: 1.25;
  color: var(--nieve-78);
}
.muestra__etiqueta:hover .muestra__color { box-shadow: 0 0 0 3px var(--noche), 0 0 0 4px var(--nieve-55), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.muestra__input:checked + .muestra__etiqueta .muestra__color {
  box-shadow: 0 0 0 3px var(--noche), 0 0 0 5px var(--alba), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.muestra__input:checked + .muestra__etiqueta .muestra__nombre { color: var(--nieve); }

.muestra__input:focus-visible + .muestra__etiqueta,
.escalon__input:focus-visible + .escalon__etiqueta {
  outline: 2px solid var(--nieve);
  outline-offset: 3px;
}

/* Escalones de cantidad */
.escalones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.escalon { position: relative; }
.escalon__etiqueta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--linea);
  background: var(--pizarra);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.escalon__etiqueta:hover { border-color: var(--nieve-55); }
.escalon__uds {
  font-family: var(--fuente-titular);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}
.escalon__precio { font-size: 14px; color: var(--nieve-78); }
.escalon__total {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nieve-55);
}
.escalon__input:checked + .escalon__etiqueta {
  border-color: var(--alba);
  box-shadow: inset 0 0 0 1px var(--alba);
}

/*
 * Contraste alto de Windows (forced-colors): el navegador cambia bordes y fondos por
 * colores del sistema y quita las sombras, así que lo elegido no se distinguiría. Se
 * marca con el color de selección del sistema y con un ✓ que no depende del color.
 */
@media (forced-colors: active) {
  .muestra__input:checked + .muestra__etiqueta,
  .escalon__input:checked + .escalon__etiqueta { border: 2px solid Highlight; }
  .muestra__input:checked + .muestra__etiqueta .muestra__nombre::before,
  .escalon__input:checked + .escalon__etiqueta .escalon__uds::before {
    content: "\2713";
    content: "\2713" / "";
    margin-right: 0.3em;
  }
  /* El navegador pone un fondo sólido bajo cada texto, pero no bajo el logo (es un SVG),
     y quita el degradado: sin esto, el logo se pinta directamente sobre la foto. */
  .barra { background: Canvas; }
}

.nota {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--nieve-55);
}

/* Campos */
.campo { margin-bottom: 20px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--nieve-78);
}
.campo input[type="text"],
.campo input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(227, 236, 233, 0.3);
  border-radius: 0;
  background: var(--pizarra);
  color: var(--nieve);
  font: inherit;
}
.campo input:focus-visible {
  outline: 2px solid var(--alba);
  outline-offset: 0;
}
.campo input[aria-invalid="true"] { border-bottom: 2px solid var(--error); }
.campo__error {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--error);
}
.campo__error:empty { display: none; }

.campo--casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}
.campo--casilla input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--alba);
}
.campo--casilla label { margin: 0; font-size: 15px; }
.campo--casilla .campo__error { grid-column: 1 / -1; }

/* Resumen del pedido */
.resumen {
  margin: 0 0 36px;
  padding: 24px;
  border: 1px solid var(--linea);
  background: var(--roca);
}
.resumen h4 { margin: 0 0 8px; color: var(--alba); font-weight: 400; }
.resumen__lista { margin: 0; }
.resumen__lista div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
}
.resumen dt { color: var(--nieve-55); }
.resumen dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.resumen__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 18px 0 0;
}
.resumen__total strong {
  font-size: 40px;
  line-height: 1;
  color: var(--alba);
}
.resumen__iva {
  flex-basis: 100%;
  text-align: right;
  color: var(--nieve-55);
}
.resumen__nota { margin: 16px 0 0; font-size: 13px; color: var(--nieve-55); }

/* Confirmación (no se envía nada) */
.confirmacion {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--alba);
  background: rgba(142, 195, 212, 0.08);
}
.confirmacion p { margin: 0; }
.confirmacion__titulo { margin-bottom: 8px !important; font-weight: 600; }
.confirmacion:focus { outline: 2px solid var(--nieve); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Escena 7 · Cierre al anochecer                                      */
/* ------------------------------------------------------------------ */

.cierre {
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: 110vh;
  height: 110svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--noche);
}
.cierre__foto {
  position: absolute;
  inset: -8% 0;
  z-index: -3;
  overflow: hidden;
}
.cierre__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
}
.cierre__resplandor {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 70% 35%, rgba(var(--haz), 0.28), transparent 60%);
  mix-blend-mode: screen;
}
.cierre__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--noche) 0%, rgba(11, 18, 16, 0) 32%),
    linear-gradient(0deg, var(--noche) 0%, rgba(11, 18, 16, 0) 40%);
}
.cierre__texto {
  position: absolute;
  left: var(--margen);
  bottom: 12vh;
  max-width: 60vw;
}
.cierre__titulo {
  margin: 0 0 20px;
  font-size: clamp(3rem, 8vw, 9rem);
}
.cierre__texto p { margin: 0 0 24px; max-width: 40ch; color: var(--nieve-78); }

/* ------------------------------------------------------------------ */
/* Escena 8 · Pie                                                      */
/* ------------------------------------------------------------------ */

.pie {
  position: relative;
  z-index: 2;
  padding: 10vh var(--margen) 4vh;
  border-top: 1px solid var(--linea);
  background: var(--noche);
}
.pie__arriba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32ch);
  gap: 24px 6vw;
  align-items: end;
}
.pie__marca { margin: 0; }
.pie__marca .titular {
  display: inline-block;
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: 0.86;
  vertical-align: bottom;
}
.pie__marca .mono { display: inline-block; margin-left: 12px; vertical-align: bottom; }
.pie__aviso { margin: 0; color: var(--nieve-78); }
.pie__aviso strong { color: var(--nieve); font-weight: 600; }
.pie__creditos {
  margin: 48px 0 24px;
  padding: 0;
  list-style: none;
}
.pie__creditos li { margin: 0 0 6px; }
.pie__creditos a { color: var(--nieve-78); }
.pie__arriba-enlace { color: var(--nieve); text-decoration-color: var(--linea); text-underline-offset: 4px; }
.pie__final {
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: 10px;
}

/* ------------------------------------------------------------------ */
/* Perfil de ruta (índice de avance, solo en escritorio)               */
/* ------------------------------------------------------------------ */

.perfil { display: none; }
@media (min-width: 1024px) {
  .perfil {
    display: block;
    position: fixed;
    right: var(--margen);
    bottom: 18px;
    z-index: 40;
    padding: 8px 10px 6px;
    background: rgba(11, 18, 16, 0.55);
    pointer-events: none;
  }
  .foco__giro { bottom: 96px; }
}
.perfil { transition: opacity 0.3s ease; }
.perfil--apartado { opacity: 0; }
.perfil__svg { display: block; overflow: visible; }
.perfil__base { fill: none; stroke: var(--linea); stroke-width: 1.5; stroke-linejoin: round; }
.perfil__hecho { fill: none; stroke: var(--alba); stroke-width: 1.5; stroke-linejoin: round; }
.perfil__alt { margin: 4px 0 0; font-size: 10px; text-align: right; color: var(--nieve-55); }

/* ------------------------------------------------------------------ */
/* Móvil (< 600 px)                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 599px) {
  .mono { font-size: 10px; }
  .solo-ancho { display: none; }
  .solo-movil { display: inline; }

  /* Cargador: el botón por encima de las dos etiquetas de abajo */
  .carga__entrar { bottom: 52px; }

  .barra {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 2px;
    column-gap: 10px;
  }
  .barra__marca { grid-column: 1; grid-row: 1; }
  .barra__logo { height: 26px; }
  .barra__aviso { grid-column: 1; grid-row: 2; text-align: left; font-size: 10px; letter-spacing: 0.08em; color: var(--nieve-78); }
  .barra__acciones { grid-column: 2; grid-row: 1 / 3; gap: 6px; }
  /* En el móvil «Still page» sí va en dos líneas: no hay sitio para una */
  .barra__movimiento { padding: 8px 2px; white-space: normal; }
  .barra .boton { padding: 12px 12px; }

  .portada__img { object-position: 45% 50%; }
  .portada__velo {
    background: linear-gradient(0deg, var(--noche) 0%, rgba(11, 18, 16, 0.85) 30%, rgba(11, 18, 16, 0) 62%);
  }
  .portada { padding-bottom: max(8svh, calc(2svh + 2rem)); }
  .portada__texto { max-width: none; }
  .portada__titulo { --titulo-portada: 17vw; margin: 12px 0 16px; }
  .portada__ficha { display: none; }
  .portada__bajar { bottom: 2svh; }

  /* Foco: la frase arriba y la botella debajo, más pequeña: se lee la frase entera */
  html.con-escenas .foco { height: 210vh; height: 210svh; }
  .foco__frase { font-size: 13vw; }
  html.con-escenas .foco__frase { justify-content: flex-start; padding-top: calc(var(--barra) + 5svh); }
  .foco__haz { left: 15vw; width: 70vw; }
  .foco__charco { left: 15vw; width: 70vw; height: 14vw; }
  .foco__vitrina { width: 62vw; height: 44svh; }
  html.con-escenas .foco__vitrina { margin-top: 24svh; }
  .foco__ficha { display: none; }
  .foco__giro { bottom: 16px; }

  .tira { padding: 12vh 16px; }
  html.con-escenas .tira { padding: 0 10vw 0 0; }
  html.con-escenas .tira__entrada { padding: 0 16px; }
  html.con-escenas .tarjeta { width: 78vw; margin-left: 10vw; }
  .tira__titulo { font-size: 12vw; }
  .tarjeta__nombre { font-size: 8vw; }
  .tarjeta__texto { font-size: 14px; }

  html.con-escenas .equipo { height: 300vh; height: 300svh; }
  /* La franja va bajo la foto, con su fondo: no puede ser transparente mientras sube */
  .equipo__escenario { display: flex; flex-direction: column; }
  .equipo__foto { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
  .equipo__img { object-position: 50% 62%; }
  .equipo__palabra { --equipo-titular-top: calc(var(--barra) + 4svh); font-size: 20vw; }
  .equipo__vertical { right: 12px; bottom: 6svh; font-size: 4svh; }
  .equipo__franja {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: none;
    display: block;
    padding: 20px 16px 24px;
    border-top: 1px solid var(--linea);
    background: var(--pizarra);
  }
  .equipo__franja-titulo { font-size: 26px; margin-bottom: 12px; }
  .equipo__franja-texto { font-size: 14px; margin-bottom: 14px; }

  .configurador { padding: 10vh 16px; }
  .dialogo { width: calc(100vw - 16px); padding: 20px 16px 24px; }
  .configurador__rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .configurador__escena { position: relative; top: auto; height: 56svh; }
  .configurador__titulo { font-size: 13vw; }
  .muestras, .muestras--tapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .muestra__color { width: 40px; height: 40px; }
  .escalones { grid-template-columns: minmax(0, 1fr); }

  .cierre { height: 100vh; height: 100svh; }
  .cierre__img { object-position: 64% 50%; }
  .cierre__texto { left: 16px; right: 16px; bottom: 10svh; max-width: none; }
  .cierre__titulo { font-size: 12vw; }

  .pie__arriba { grid-template-columns: minmax(0, 1fr); }
  .pie__marca .titular { font-size: 22vw; }
  .pie__marca .mono { display: block; margin: 8px 0 0; }
}

/* Móvil estrecho (< 360 px): el aviso no parte línea, así que se aprieta la barra para que
   «Quote» no se salga por la derecha (a 320 px se salía 18 px). */
@media (max-width: 359px) {
  .barra { column-gap: 8px; }
  .barra__aviso { letter-spacing: 0; }
  .barra__acciones { gap: 4px; }
  .barra .boton { padding: 12px 6px; }
}

/* Tableta: el configurador en una columna si no hay sitio para dos */
@media (min-width: 600px) and (max-width: 899px) {
  .configurador__rejilla { grid-template-columns: minmax(0, 1fr); }
  .configurador__escena { position: relative; top: auto; height: 60vh; }
  .portada__texto { max-width: 52vw; }
}

@media (max-height: 640px) {
  .portada__titulo { margin-block: 10px 14px; }
  .portada__accion { margin-top: 14px; }
  .portada__entradilla { margin-bottom: 10px; }
}

/* ------------------------------------------------------------------ */
/* Reducir movimiento: nada se mueve solo                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .foco__polvo { display: none; }
}