@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../pantalla/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../pantalla/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+E000-FFFF;
}

:root {
  --fondo: #06131f;
  --tinta: #eef1fb;
  --tenue: rgba(238, 241, 251, 0.62);
  --panel: rgba(6, 19, 31, 0.72);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Dos capas: abajo la pantalla (CSS3D, iframe), arriba el lienzo WebGL con un
   "agujero" transparente donde está la pantalla. */
.escena { position: fixed; inset: 0; }
.escena > .css3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.escena > canvas { position: absolute; inset: 0; z-index: 1; display: block; touch-action: none; }
.escena iframe { border: 0; display: block; background: var(--fondo); }

.etiqueta {
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}
.etiqueta.visible { opacity: 1; }

.pista {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  margin: 0;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  color: var(--tenue);
  font-size: 13px;
  text-align: center;
  max-width: calc(100vw - 32px);
  transition: opacity 0.6s ease;
}
.pista.oculta { opacity: 0; pointer-events: none; }
.pista a { color: var(--tinta); }

.volver {
  position: fixed;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f4;
  color: #000;
  font: 500 13px 'Outfit', system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.volver[hidden] { display: none; }
.volver img { display: block; width: 30px; height: auto; }
.volver:focus-visible, .saltar:focus { outline: 2px solid #9fc2ff; outline-offset: 2px; }

.carga {
  position: fixed;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--fondo);
  transition: opacity 0.8s ease;
}
.carga.lista { opacity: 0; pointer-events: none; }
.carga-titulo { font-size: 22px; font-weight: 300; letter-spacing: 0.35em; text-transform: lowercase; color: var(--tenue); }
.carga-barra { width: 140px; height: 2px; background: rgba(238, 241, 251, 0.12); overflow: hidden; border-radius: 2px; }
.carga-barra span { display: block; height: 100%; width: 0; background: var(--tinta); transition: width 0.2s ease; }
.carga.error .carga-titulo { letter-spacing: 0.02em; font-size: 15px; text-transform: none; }

.saltar {
  position: fixed;
  z-index: 6;
  left: 12px;
  top: -60px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #f4f4f4;
  color: #000;
  font-size: 13px;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

@media (max-width: 640px) {
  .pista { font-size: 12px; bottom: 14px; }
}

/* Intro: vista general del taller con un velo oscuro, el título y la invitación. */
.intro {
  position: fixed;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  border: 0;
  background: rgba(6, 19, 31, 0.68);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.intro[hidden] { display: none; }
.intro.visible { opacity: 1; }
.intro.saliendo { opacity: 0; pointer-events: none; }
.intro:focus-visible { outline: 2px solid #9fc2ff; outline-offset: -6px; }
.intro-titulo {
  font-size: clamp(44px, 9vw, 112px);
  font-weight: 300;
  letter-spacing: 0.3em;
  margin-right: -0.3em;                                /* compensa el espaciado de la última letra */
  line-height: 1;
}
.intro-pista {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--tenue);
}

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

/* La pantalla a toda la ventana: aparece cuando la cámara ya la llenó. */
.pantalla-completa {
  position: fixed;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--fondo);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pantalla-completa[hidden] { display: none; }
.pantalla-completa.visible { opacity: 1; }

/* modo energizado: el escritorio de la pantalla (capa CSS3D) también pasa por el filtro */
.escena > .css3d { transition: filter 1.1s ease; }
.escena.energia > .css3d { filter: blur(1.4px) saturate(1.9) contrast(1.15); animation: energia-tono 6s linear infinite; }
@keyframes energia-tono {
  0% { filter: blur(1.4px) saturate(1.9) contrast(1.15) hue-rotate(0deg); }
  100% { filter: blur(1.4px) saturate(1.9) contrast(1.15) hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .escena.energia > .css3d { animation: none; }
}

/* título del modo energizado: aparece al entrar y se va solo */
.titulo-energia {
  position: fixed;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  text-shadow: 0 2px 18px rgba(6, 19, 31, 0.7);
  background: radial-gradient(ellipse 60% 32% at 50% 50%, rgba(6, 19, 31, 0.55), rgba(6, 19, 31, 0) 100%);
}
.titulo-energia.visible { opacity: 1; }
.titulo-energia p { margin: 0; }
.titulo-energia-titulo {
  font-size: clamp(30px, 5.5vw, 68px);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.1;
}
.titulo-energia-sub {
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.08em;
  color: var(--tinta);
}