/* Nukleo — escena "Diseño web" (panel de la puerta de entrada)

   Pantalla completa: marco amarillo con grano, tarjeta azul, barra superior
   con "nukleo x richsmart" a la derecha, footer y, abajo, la palabra
   gigante "DISEÑO WEB" de borde a borde. La palabra la anima webdesign.js:
   cada letra es un span aparte cuyo eje de anchura (`wdth`) cambia según el
   puntero, y todas se reparten el ancho de la tarjeta (nunca se sale ni sobra
   hueco). Referencia visual: warmnfuzzy.tv (paleta y composición, no el código).

   Sigue siendo un `.gate__panel[data-gate-panel]` de la puerta: showPanel,
   "Volver" y Escape (main.js) funcionan igual que en el panel de Chips NFC. */

:root {
  --wd-blue: #231aab;
  --wd-blue-hi: #3a2ed4;
  --wd-frame: #dfc94d;
  --wd-ink: #f2f0ea;
  --wd-red: #ff4b3e;
  --wd-line: rgba(242, 240, 234, 0.16);
  --wd-frame-w: clamp(0.5rem, 0.1rem + 2.6vw, 2.6rem);
  /* Geometría compartida por el estudio (ventana 3) y la capa fija (webdesign-hud.css), para que
     la barra, el menú, el título y el número gigante caigan en las mismas líneas:
     alto de la barra Volver · Arriba · Baja, hueco de arriba y de los lados del contenido. */
  --wd-bar-h: 3.1rem;
  --wd-hub-top: clamp(1.5rem, 4vh, 3rem);
  --wd-hub-pad-x: clamp(1rem, 2vw, 1.75rem);

  /* Las dos únicas fuentes de esta escena (ver la cabecera de index.html).
     Con respaldo pesado por si Google Fonts no carga: la palabra sigue siendo
     legible y de borde a borde, solo pierde el eje de anchura. */
  --wd-font-chunk: "Anybody", "Archivo Black", Impact, "Arial Black", sans-serif;
  --wd-font-warm: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* Grano del marco amarillo y de la ventana 3: ruido NEGRO con alfa (mezcla
     normal). Antes era ruido de color con `mix-blend-mode: multiply` al 32 %, y
     esa mezcla sobre pantalla entera provocaba tirones de ~1,4 s de la GPU
     (medido: desaparecen al quitarla). Calibrado contra el original sobre el
     amarillo: mismo oscurecimiento medio (~4 %) y misma desviación (~3,5/255). */
  --wd-grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.134 0 0 0 0.11'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Contenedor a pantalla completa ---------- */

.gate__panel.wd {
  position: fixed;
  /* fuera de la muesca y de la barra de inicio (0 fuera de iOS); lo que queda detrás, el azul */
  inset: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);
  z-index: 5; /* dentro del contexto de .gate: por encima de la marca "Nukleo." */
  width: auto;
  height: auto;
  /* sin relleno (el de .gate__panel): el scroller ocupa la pantalla y el marco va encima */
  padding: 0;
  background: var(--wd-frame);
  color: var(--wd-ink);
  /* La escena entra "subiendo" como un telón sobre la lista de opciones. */
  animation: wd-wipe 900ms var(--ease-out-expo) both;
}

@keyframes wd-wipe {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- El marco amarillo: un anillo fijo por encima de todo ----------
   El scroller ocupa la pantalla entera (no hay relleno en .wd) y el marco son cuatro
   tiras encima de él (con el grano, que es negro con alfa: sin mezclas). Las ventanas
   1, 2 y 3 llevan un borde transparente del ancho del marco para que su contenido
   quede dentro de él; los capítulos lo llevan en su relleno. Así el marco se puede
   retirar SIN que cambie la geometría de nada: webdesign-fx.js escribe --fr (1 → 0)
   mientras llega el capítulo 02 y las tiras se encogen hacia el borde (solo transform). */
.wd__frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.wd__frame i {
  position: absolute;
  background-color: var(--wd-frame);
  background-image: var(--wd-grain-dark);
  will-change: transform;
}

.wd__frame-t,
.wd__frame-b {
  left: 0;
  right: 0;
  height: var(--wd-frame-w);
}

.wd__frame-t {
  top: 0;
  transform-origin: 50% 0;
  transform: scaleY(var(--fr, 1));
}

.wd__frame-b {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: scaleY(var(--fr, 1));
}

.wd__frame-l,
.wd__frame-r {
  top: 0;
  bottom: 0;
  width: var(--wd-frame-w);
}

.wd__frame-l {
  left: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--fr, 1));
}

.wd__frame-r {
  right: 0;
  transform-origin: 100% 50%;
  transform: scaleX(var(--fr, 1));
}

.wd__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  /* borde transparente = el hueco que ocupa el marco (el fondo sigue por debajo de él) */
  border: var(--wd-frame-w) solid transparent;
  background: radial-gradient(90% 75% at 82% 0%, var(--wd-blue-hi) 0%, transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(10, 6, 90, 0.55) 0%, transparent 70%), var(--wd-blue);
  /* los degradados se reparten por toda la ventana (borde incluido), no se repiten en la franja del borde */
  background-origin: border-box;
}

/* ---------- Scroll interior: dos ventanas que se apilan ---------- */

/* La puerta bloquea el scroll de la página, así que esta escena tiene el suyo:
   el marco amarillo queda fijo (encima) y por debajo se desplazan las ventanas.
   Sin barra (rompería el marco); el teclado y la rueda siguen funcionando. */
.wd__scroller {
  /* Alto de UNA ventana = el de la pantalla (el marco va encima, no la reduce: las
     ventanas con marco lo llevan dentro de su borde/relleno). Un porcentaje no
     vale: las ventanas viven dentro de .wd__track, de altura automática, y
     contra eso un height/min-height en % no se resuelve. */
  --wd-view-h: calc(100vh - var(--sa-t) - var(--sa-b));
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

@supports (height: 100dvh) {
  .wd__scroller {
    --wd-view-h: calc(100dvh - var(--sa-t) - var(--sa-b));
  }
}

.wd__scroller::-webkit-scrollbar {
  display: none;
}

.wd__track {
  position: relative;
}

/* Ventana 1: se queda pegada arriba mientras la 2 sube por encima ("cortina").
   Ocupa un scroll entero de alto (el sitio que ocupa en el flujo), y de ahí
   sale el recorrido de la cortina. */
.wd__card--one {
  position: sticky;
  top: 0;
  height: var(--wd-view-h);
}

/* Ventana 2: papel crudo con el azul de la escena como tinta. Se redefinen los
   colores locales (--wd-ink/--wd-blue) para que las celdas, su hover invertido y
   el anillo de foco funcionen igual que en la ventana 1 sin reglas nuevas. */
.wd__card--paper {
  /* YA NO es sticky (antes se quedaba pegada y la ventana 3 subía por encima, tapándola): el
     usuario quería que de la 2 a la 3 se viera "como en una web normal al scrollear". Ahora la 2
     sube con el scroll y la 3 viene justo detrás, sin hueco — las dos son opacas, así que la
     ventana 1 (esa sí sticky, detrás) nunca llega a asomar entre ellas. */
  position: relative;
  --wd-ink: #231aab;
  --wd-blue: #f4f1e8;
  --wd-line: rgba(35, 26, 171, 0.2);
  z-index: 2;
  height: auto;
  min-height: var(--wd-view-h);
  color: var(--wd-ink);
  background: radial-gradient(75% 60% at 0% 0%, rgba(223, 201, 77, 0.34) 0%, transparent 62%),
    #f4f1e8;
  background-origin: border-box;
  /* sombra hacia arriba: la separa del azul mientras sube por encima */
  box-shadow: 0 -1.4rem 4rem -0.6rem rgba(6, 3, 64, 0.55);
}

/* (El grano de las tarjetas azul y papel era `soft-light` al 16 %: medido, movía
   ±1 nivel de 255 — invisible — y la mezcla costaba GPU. Se quitó de todas las tarjetas;
   el único grano que queda en la escena es el del marco amarillo, ver `.wd__frame*`.) */
.wd__card::after {
  content: none;
}

/* ---------- Barra superior ---------- */

.wd__bar,
.wd__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: wd-fade 800ms ease both;
  animation-delay: 650ms;
}

.wd__bar {
  border-bottom: 1px solid var(--wd-line);
}

/* La barra de la ventana 2 y su copia fija (capa fija, webdesign-hud.css) miden EXACTAMENTE lo
   mismo: al acoplarse, una releva a la otra en el mismo sitio sin que se note. */
.wd__two > .wd__bar,
.wd__bar--hud {
  height: var(--wd-bar-h);
}

.wd__foot {
  border-top: 1px solid var(--wd-line);
  animation-delay: 900ms;
}

@keyframes wd-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.wd__cell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 1.05rem 1.2rem;
  border: 0;
  border-right: 1px solid var(--wd-line);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

/* Mismo lenguaje de "rodeado + invertido" que la nav y las opciones de la puerta. */
a.wd__cell:hover,
button.wd__cell:hover,
a.wd__cell:focus-visible,
button.wd__cell:focus-visible {
  background: var(--wd-ink);
  color: var(--wd-blue);
}

/* El botón "Volver" conserva `.gate__back` (main.js lo enfoca y lo engancha),
   así que se le quitan sus márgenes/tamaño de la puerta. */
.wd .gate__back.wd__back {
  margin: 0;
  padding: 1.05rem 1.2rem;
  font-size: inherit;
  cursor: pointer;
}

.wd .gate__back.wd__back:hover {
  color: var(--wd-blue);
}

.wd :focus-visible {
  outline: 2px solid var(--wd-ink);
  outline-offset: -4px;
  border-radius: 0;
}

.wd__tag {
  color: rgba(242, 240, 234, 0.62);
}

/* La marca (cuadrado + círculo), centrada arriba y sutil: no compite con "Volver"/el rótulo ni
   con "nukleo x richsmart" a los lados. Position:absolute (no participa del flex) para quedar
   centrada en TODA la barra, no solo en el hueco que dejan sus vecinos. */
.wd__bar-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--wd-ink);
  opacity: 0.38;
  translate: -50% -50%;
  pointer-events: none;
}

/* "nukleo x richsmart": a la derecha; nukleo con la fuente de siempre,
   richsmart en rojo y con una serif cálida, nada moderna. */
.wd__lockup {
  margin-left: auto;
  align-items: baseline;
  gap: 0.5em;
  padding-block: 0.7rem;
  padding-inline: clamp(1rem, 2vw, 2rem);
  border-right: 0;
  border-left: 1px solid var(--wd-line);
  font-size: clamp(1.1rem, 0.85rem + 1.1vw, 1.85rem);
  letter-spacing: 0;
  text-transform: none;
}

.wd__brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.wd__x {
  font-family: var(--font-display);
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.7;
}

.wd__rm {
  font-family: var(--wd-font-warm);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--wd-red);
  letter-spacing: 0;
}

/* ---------- La palabra gigante ---------- */

.wd__word {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  padding: 0 clamp(0.4rem, 0.8vw, 0.9rem) clamp(0.4rem, 1.5vh, 0.95rem);
  font-weight: 900;
  /* pan-y: el arrastre horizontal sigue llegando como pointermove (el efecto de
     las letras) pero el vertical hace scroll hacia la ventana 2 en el móvil. */
  touch-action: pan-y;
}

/* El font-size lo fija webdesign.js para que el ancho total sea exacto; este
   valor solo cubre el instante previo (y el caso sin JS). */
.wd__row {
  display: flex;
  align-items: flex-end;
  gap: 0.2em;
  width: max-content;
  font-size: 15vw;
  transform-origin: 0 100%;
}

/* Cada línea recorta a sus letras: es la "ventana" por la que suben al entrar. */
.wd__line {
  display: flex;
  padding-bottom: 0;
  overflow: hidden;
  transform-origin: 0 100%; /* versión apilada: cada línea se ajusta por separado */
}

/* Las mayúsculas de Anybody se salen ~0,12em por encima de la caja de línea
   (ver line-height en .wd__letter), así que cada línea deja ese margen para no
   recortarlas al animar su entrada; la primera, además, el de la tilde de la Ñ
   (~0,28em por encima de la caja). */
.wd__line {
  padding-top: 0.16em;
}

.wd__line:first-child {
  padding-top: 0.3em;
}

.wd__letter {
  display: block;
  font-family: var(--wd-font-chunk);
  font-weight: 900;
  font-synthesis: none;
  font-variation-settings: "wdth" 62;
  /* 0,58em deja la línea de base a ~0,01em del fondo de la caja (con las
     métricas de Anybody: ascenso 0,795em, descenso 0,241em): las letras quedan
     pegadas al footer en vez de flotar ~30px por encima. Si se cambia la
     fuente, hay que volver a medirlo, no ajustarlo a ojo. */
  line-height: 0.58;
  color: var(--wd-ink);
  animation: wd-rise 1100ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 55ms + 250ms);
}

@keyframes wd-rise {
  from {
    transform: translateY(110%);
  }
  to {
    transform: none;
  }
}

/* ---------- Footer ---------- */

.wd__spacer {
  flex: 1;
}

.wd__foot .wd__cell:last-child {
  border-right: 0;
}

.wd__foot .wd__spacer + .wd__cell {
  border-left: 1px solid var(--wd-line);
}

.wd__cell--email {
  color: rgba(242, 240, 234, 0.62);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* Crédito de richsmart, abajo a la derecha: "©" con el mismo estilo que el de
   "© 2026 Nukleo" (versalitas del footer) y richsmart en rojo con la misma
   tipografía (`.wd__rm`) que el rótulo de la barra superior, en un cuerpo que
   se lea dentro de un footer en versalitas. */
.wd__cell--credit {
  gap: 0.45rem;
  padding-block: 0.6rem;
  border-right: 0;
}

.wd__cell--credit .wd__rm {
  font-size: 1.2rem;
  line-height: 1;
  text-transform: none;
}

/* ---------- Móvil: la palabra se apila en dos líneas ---------- */

@media (max-width: 42rem) {
  :root {
    --wd-bar-h: 2.8rem;
  }

  .wd__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.04em;
  }

  .wd__tag,
  .wd__cell--email {
    display: none;
  }

  /* El footer no cabe entero en un móvil: se queda con Escríbenos y el crédito
     de richsmart; Madrid y el © de Nukleo se van. */
  .wd__cell--place,
  .wd__cell--legal {
    display: none;
  }

  .wd__cell,
  .wd .gate__back.wd__back {
    padding: 0.9rem 0.9rem;
  }

  .wd__foot .wd__spacer + .wd__cell {
    border-left: 0;
  }
}

/* ---------- Ventana 1: botón "Baja" ---------- */

button.wd__cell,
a.wd__cell {
  cursor: pointer;
}

.wd__down svg {
  animation: wd-bob 1.6s ease-in-out infinite;
}

@keyframes wd-bob {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(3px);
  }
}

/* La ventana 2 (papel, con la frase y los datos del INE) está en webdesign-data.css. */

@media (prefers-reduced-motion: reduce) and (width < 0px) {
  .wd__down svg {
    animation: none;
  }
}

/* ---------- Coordinación con el robot de la puerta ---------- */

/* El robot "bc" (z-index 110, por encima de .gate) no debe asomar sobre esta
   escena si ya estaba en marcha cuando se eligió Diseño web. */
.gate:has(.wd:not([hidden])) ~ .peek-bot[data-side="bc"] {
  visibility: hidden;
}

/* El aviso "Email copiado" (.toast, z-index 90) quedaría por debajo de la puerta
   (100): al pulsar "Escríbenos" o "¿Jugamos?" no se vería. Solo se sube
   mientras esta escena está abierta. */
.gate:has(.wd:not([hidden])) ~ .toast {
  z-index: 120;
}

@media (prefers-reduced-motion: reduce) and (width < 0px) {
  .gate__panel.wd,
  .wd__bar,
  .wd__foot,
  .wd__letter {
    animation: none;
  }
}

/* lo que asoma por la muesca / barra de inicio con la escena abierta: su azul, no el crema */
.gate:has(.gate__panel.wd:not([hidden])) {
  background: #231aab;
}