/* ============================================
   TIPOGRAFÍA — Slussen
   ============================================ */
@font-face {
  font-family: 'Slussen';
  src: url('fonts/Slussen-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

:root {
  --bg: #0a0a0a;
  --about-bg: #ffffff;
  --about-text: #b0b0b0;
  --about-text-hover: #000000;
  --font: 'Slussen', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Nota: el color del texto SOBRE LAS FOTOS (nombre/caption/flecha) no
     se define aquí — se controla desde script.js (COLOR_LIGHT / COLOR_DARK)
     para que sea fácil de cambiar desde un único sitio, como se pidió. */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  font-family: var(--font);
}

html.mobile-mode,
body.mobile-mode {
  overflow: auto;
}

/* ============================================
   PANTALLA DE CARGA (INTRO)
   ============================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  cursor: pointer; /* deja claro que un clic detiene la secuencia */
}

.intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ============================================
   VISOR PRINCIPAL — ESCRITORIO
   ============================================ */
.viewer {
  position: fixed;
  inset: 0;
}

/* Nombre — arriba centrado, texto centrado, poco margen */
.site-name {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  z-index: 20;
  cursor: pointer;
  user-select: none;
}

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.stage-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.stage-media.is-visible {
  opacity: 1;
}

/* Zonas clicables invisibles, izquierda/derecha — sin pista visual en el visor normal */
.click-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 10;
  cursor: default;
}

.click-zone-left {
  left: 0;
}

.click-zone-right {
  right: 0;
}

/* Caption — abajo centrado, texto centrado, poco margen */
.caption {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 60px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  z-index: 20;
  pointer-events: none;
}

/* Flecha "volver arriba" en móvil — mismo tamaño, color se aplica por JS */
.back-to-top {
  position: fixed;
  bottom: 14px;
  right: 24px;
  font-size: 11.5px;
  z-index: 25;
  cursor: pointer;
  user-select: none;
}

/* ============================================
   PÁGINA ABOUT / INFORMATION
   ============================================ */
.about {
  position: fixed;
  inset: 0;
  background: var(--about-bg);
  z-index: 50;
  cursor: pointer; /* deja claro que un clic cierra la página */
}

.about-name {
  color: var(--about-text);
}

.about-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.about-block {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: center;
}

/* La etiqueta (INFO/CONTACT) va pegada al texto, como un prefijo más
   dentro de la misma línea — no es una columna aparte. El pequeño
   margin-right es el único espacio entre la etiqueta y el texto. */
.about-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--about-text);
  margin-right: 6px;
  vertical-align: text-top;
  position: relative;
  top: 1.6px;
  cursor: default;
}

.about-text {
  font-size: 11.5px; /* mismo tamaño que las descripciones de los proyectos */
  line-height: 1.4;
  color: var(--about-text);
  white-space: pre-line; /* respeta el \n del texto — corta justo donde lo pongas */
  cursor: default;
}

.about-link {
  font-size: 11.5px; /* mismo tamaño que las descripciones de los proyectos */
  color: var(--about-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.about-link:hover {
  color: var(--about-text-hover);
}

/* Separación entre el email y el Instagram — ambos en la misma línea */
.about-link + .about-link {
  margin-left: 24px;
}

/* ============================================
   MODO MÓVIL — scroll vertical con snap
   ============================================ */
@media (max-width: 768px) {

  .viewer {
    position: static;
    height: 100vh;
    height: 100dvh; /* corrige el salto por la barra de direcciones en iOS/Android */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  .stage {
    position: static;
  }

  .mobile-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }

  .mobile-slide .stage-media {
    opacity: 1;
  }

  .click-zone {
    display: none;
  }

  .site-name {
    font-size: 10.5px;
    top: 12px;
  }

  .caption {
    font-size: 10.5px;
    bottom: 12px;
    padding: 0 30px;
  }

  .back-to-top {
    font-size: 10.5px;
    bottom: 12px;
    right: 18px;
  }

  .about-content {
    padding: 0 8%;
  }

  .about-block {
    gap: 22px;
  }

  .about-text,
  .about-link {
    font-size: 10.5px; /* mismo tamaño que las descripciones en móvil */
  }

  /* Email e Instagram en la misma línea, con menos separación que en escritorio */
  .about-link + .about-link {
    margin-left: 14px;
  }
}