/* ==========================================================
   Comomoda · Pantalla de entrada: showroom con probador
   Todo se mide en "unidades de escena" (lienzo de 1600 x 900).
   --s = píxeles por unidad (lo calcula entrada.js) y cada capa
   tiene el suyo para crear profundidad durante el zoom.
   ========================================================== */
:root {
  --text: #f3f1ee;
  --soft: #a3a0a8;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --light: 0;               /* neón: 0 apagado, 1 encendido */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #030303; }
body { font-family: var(--sans); font-weight: 300; color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- Escena y capas ---------- */
.scene { position: fixed; inset: 0; overflow: hidden; background: #030303; }
.layer { --s: 1px; position: absolute; left: 50%; top: 50%;
  width: calc(1600 * var(--s)); height: calc(900 * var(--s));
  margin-left: calc(-1 * var(--fx) * var(--s)); margin-top: calc(-1 * var(--fy) * var(--s)); }
.layer--room { perspective: calc(900 * var(--s)); perspective-origin: calc(800 * var(--s)) calc(420 * var(--s)); }
.layer--racks { pointer-events: none; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Paredes y suelo: planos 3D con la misma textura, alineados con el punto de fuga */
.wall, .floor { position: absolute; }
.wall { background: url("../img/ladrillos.jpg") 0 0 / calc(400 * var(--s)) calc(288 * var(--s)); background-color: #070707; }
.wall--back { left: calc(250 * var(--s)); top: calc(-1400 * var(--s)); width: calc(1100 * var(--s)); height: calc(2040 * var(--s));
  background-position: 0 calc(8 * var(--s)); }
.wall--l, .wall--r { top: calc(-1400 * var(--s)); width: calc(820 * var(--s)); height: calc(2040 * var(--s));
  background-position: 0 calc(8 * var(--s)); }
.wall--l { left: calc((250 - 820) * var(--s)); transform-origin: 100% 50%; transform: rotateY(90deg); }
.wall--r { left: calc(1350 * var(--s)); transform-origin: 0 50%; transform: rotateY(-90deg); }
.floor { left: calc(250 * var(--s)); top: calc(640 * var(--s)); width: calc(1100 * var(--s)); height: calc(820 * var(--s));
  transform-origin: 50% 0; transform: rotateX(90deg);
  background: url("../img/suelo.jpg") 0 0 / calc(137.5 * var(--s)) calc(137.5 * var(--s)); }
/* Iluminación calculada (lighting.py): el mapa de luz oscurece donde no llegan los focos
   y los haces añaden la luz en el aire */
.lightmap, .beams { position: absolute; left: calc(-800 * var(--s)); top: calc(-700 * var(--s));
  width: calc(3200 * var(--s)); height: calc(2100 * var(--s)); max-width: none; pointer-events: none; user-select: none; }
/* Sin mezclas (multiply/screen): luz.webp es sombra negra con transparencia y haces.webp luz blanca
   con transparencia. Da el mismo resultado y el navegador lo pinta mucho más rápido. */
.beams { opacity: .9; }
.rack { position: absolute; top: calc(-40 * var(--s)); width: calc(1220 * var(--s)); height: auto; max-width: none; user-select: none; }
.rack--l { left: calc(-700 * var(--s)); }
.rack--r { left: calc(1080 * var(--s)); }
.reflection { pointer-events: none; }

/* ---------- Neón ---------- */
.neon { position: absolute; left: calc(500 * var(--s)); top: calc(58 * var(--s)); width: calc(600 * var(--s)); height: auto;
  user-select: none; cursor: pointer;
  opacity: calc(.3 + var(--light) * .7);
  filter: brightness(calc(.4 + var(--light) * .65))
          drop-shadow(calc(3 * var(--s) * (1 - var(--light))) calc(6 * var(--s) * (1 - var(--light))) calc(3 * var(--s)) rgba(0,0,0,.8))
          drop-shadow(0 0 calc(var(--light) * 1.5 * var(--s)) #fff)
          drop-shadow(0 0 calc(var(--light) * 8 * var(--s)) rgba(255,255,255,.8))
          drop-shadow(0 0 calc(var(--light) * 24 * var(--s)) rgba(255,255,255,.45)); }
.neon-glow { position: absolute; left: calc(300 * var(--s)); top: calc(-60 * var(--s)); width: calc(1000 * var(--s)); height: calc(430 * var(--s));
  pointer-events: none; opacity: var(--light); transition: opacity .12s linear;
  background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255,255,255,.28), rgba(255,255,255,.07) 55%, transparent 75%); }

/* ---------- Probador ---------- */
.booth { cursor: pointer; }
.booth__label { font: 600 17px var(--serif); letter-spacing: 6px; fill: #f5f2ee; filter: url(#fText); opacity: calc(.45 + var(--light) * .55); }
.curtain { transform-box: fill-box; transition: transform 1s cubic-bezier(.6, .05, .2, 1); }
.curtain--l { transform-origin: 0% 50%; }
.curtain--r { transform-origin: 100% 50%; }
.slit { opacity: .35; transition: opacity .5s; }
.spill { opacity: .35; transition: opacity .6s; }
.booth:hover .curtain--l { transform: scaleX(.93) skewY(-.6deg); }
.booth:hover .curtain--r { transform: scaleX(.93) skewY(.6deg); }
.booth:hover .slit { opacity: 1; }
.booth:hover .spill { opacity: .8; }
.is-opening .curtain--l, .is-opening .curtain--r { transform: scaleX(.13); }
.is-opening .spill { opacity: 1; }
.is-opening .slit { opacity: 0; }

/* ---------- Interruptor (en la pared, escala con la escena) ---------- */
.switch { position: absolute; left: calc(1070 * var(--s)); top: calc(470 * var(--s)); width: calc(24 * var(--s)); height: calc(36 * var(--s));
  padding: 0; border: 0; border-radius: calc(3 * var(--s)); cursor: pointer;
  background: linear-gradient(160deg, #e2dfda, #a9a6a0); box-shadow: calc(2 * var(--s)) calc(3 * var(--s)) calc(6 * var(--s)) rgba(0,0,0,.7); }
.switch:hover { box-shadow: 0 0 calc(12 * var(--s)) rgba(255,255,255,.6); }
.switch__toggle { position: absolute; left: 30%; top: 25%; width: 40%; height: 50%; border-radius: calc(1.5 * var(--s));
  background: linear-gradient(#fbfaf8, #cfcbc4); transform: perspective(calc(40 * var(--s))) rotateX(-24deg); transition: transform .2s; }
.switch[aria-pressed="false"] .switch__toggle { transform: perspective(calc(40 * var(--s))) rotateX(24deg); }

/* ---------- Capa fija encima ---------- */
.vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.75)); transition: opacity .6s; }
.actions { position: fixed; left: 0; right: 0; bottom: max(24px, 5vh); display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.is-lit .actions { opacity: 1; transform: none; }
.enter { display: inline-block; padding: 15px 50px; border-radius: 999px; text-decoration: none; color: var(--text);
  background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.85); backdrop-filter: blur(4px);
  font-size: 14px; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; text-indent: .38em;
  box-shadow: 0 0 10px rgba(255,255,255,.5), inset 0 0 10px rgba(255,255,255,.2); text-shadow: 0 0 8px rgba(255,255,255,.8);
  transition: background .35s, color .35s, box-shadow .35s; }
.enter:hover, .enter:focus-visible { background: #fff; color: #000; text-shadow: none;
  box-shadow: 0 0 22px rgba(255,255,255,.9), 0 0 60px rgba(255,255,255,.5), 0 0 120px rgba(255,255,255,.25); }
.hint { margin: 0; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--soft); text-align: center; padding: 0 16px; }
.is-opening .actions { opacity: 0; transition: opacity .3s; pointer-events: none; }
.is-opening .vignette { opacity: 0; }
.flash { position: fixed; inset: 0; pointer-events: none; background: #070708; opacity: 0; }
.is-entering .flash { transition: opacity .5s cubic-bezier(.4,0,.6,1) 1.15s; opacity: 1; }
/* Durante la entrada se apagan los efectos que más cuestan de pintar (ya salen de la pantalla) */
.beams, .neon-glow { transition: opacity .35s; }
.is-entering .beams, .is-entering .neon-glow { opacity: 0; }

@media (max-width: 560px) {
  .enter { padding: 14px 40px; }
  .hint { letter-spacing: .16em; }
}
/* Versión ligera para móvil/tablet (la clase .lite la pone entrada.js) */
.lite .neon { filter: brightness(calc(.4 + var(--light) * .65)) drop-shadow(0 0 calc(var(--light) * 6 * var(--s)) rgba(255,255,255,.75)); }
.lite .beams, .lite .neon-glow { transition: opacity .25s; }
.lite .is-entering .beams, .lite .is-entering .neon-glow, .lite .is-entering .reflection { opacity: 0; }
.lite .is-entering .neon { filter: none; }
.lite .is-entering .flash { transition: opacity .42s cubic-bezier(.4,0,.6,1) .85s; }

@media (prefers-reduced-motion: reduce) {
  .curtain { transition: none; }
}

/* Paso a la página de inicio sin corte (navegadores que lo admiten) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* Barra de administración de WordPress (solo la ves tú cuando has iniciado sesión) */
.admin-bar .scene { top: 32px; }
@media (max-width: 782px) { .admin-bar .scene { top: 46px; } }