/* Prototipo A — The Last Witness. Estética: limpia pero táctil,
   muted earth tones, nada compite con el globo. */

:root {
  --fondo: #0B0E12;
  --texto: #E8E3DA;
  --ambar: #D9A441;
  --granate: #7A2E2E;
  --tierra: rgba(214, 204, 188, 0.55);
  --borde-suave: rgba(214, 204, 188, 0.16);
}

* { box-sizing: border-box; }

/* El atributo hidden manda siempre (aunque el elemento tenga display propio). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { overflow-x: hidden; }
body.scroll-bloqueado { overflow: hidden; }

/* La pista de scroll: 500vh de viaje. El canvas queda fijo debajo. */
.altura-scroll { height: 500vh; }

#escena {
  position: fixed;
  inset: 0;
  z-index: 1;
}
#escena canvas { display: block; }

/* --- Cabecera y pórtico -------------------------------------------------

   La cabecera del sitio vive en sitio.css (tres zonas, compartida por las
   cuatro páginas). Lo que es SOLO del atlas es el pórtico: en reposo la marca
   crece y aparece la promesa del canal; al arrancar el viaje, ambas se van y
   la marca queda en su tamaño de cabecera. El estado lo publica main.js como
   la clase .en-viaje del body (el reposo es el estado base). */

.sitio-marca {
  /* Estado base = reposo: grande y ceremonial. Sin JavaScript la home sigue
     enseñando su marca y su promesa. */
  font-size: clamp(19px, 3vw, 28px);
  transform: translateY(58px);
  color: var(--texto);
  transition: font-size 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.en-viaje .sitio-marca {
  font-size: 16px;
  transform: none;
  color: rgba(232, 227, 218, 0.85);
}

.portico-atlas {
  position: fixed;
  top: 152px;
  left: 0; right: 0;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}

.portico-promesa {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.4;
  color: rgba(214, 204, 188, 0.78);
  transition: opacity 0.6s ease;
}
.en-viaje .portico-promesa { opacity: 0; }

.pista-scroll {
  margin: 54px 0 0;               /* cuelga de la promesa, dentro del pórtico */
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 227, 218, 0.5);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.pista-scroll.oculta { opacity: 0; }

/* --- Ficha mínima de episodio ------------------------------------------- */

.ficha {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 300px;
  padding: 10px;
  background: rgba(16, 20, 26, 0.88);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.ficha:hover, .ficha:focus-visible { border-color: rgba(217, 164, 65, 0.55); }
.ficha:focus-visible { outline: 1px solid var(--ambar); outline-offset: 2px; }

.ficha-miniatura {
  width: 92px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #12161C;
}

.ficha-texto { min-width: 0; }

.ficha-titulo {
  margin: 0 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
}
.ficha-fecha {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
}
.ficha-lugar {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(232, 227, 218, 0.6);
}

/* --- Señal de carga (CSS puro, previa a cualquier JS) ---------------------- */

.carga {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.carga--fuera { opacity: 0; }
.carga-punto {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ambar, #D9A441);
  box-shadow: 0 0 18px rgba(217, 164, 65, 0.55);
}
.carga-punto::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.5);
  animation: carga-onda 1.6s ease-out infinite;
}
@keyframes carga-onda {
  from { transform: scale(0.6); opacity: 0.9; }
  to   { transform: scale(2.4); opacity: 0; }
}
.carga-texto {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tierra, rgba(214, 204, 188, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  .carga-punto::after { animation: none; opacity: 0; }
}

/* --- Velo de viaje al capítulo ------------------------------------------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #05070A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.velo.visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Dial de cronología -------------------------------------------------- */

.dial {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--sitio-alto-barra, 34px);   /* se apoya sobre la franja de pie */
  z-index: 5;
  width: 100%;
  height: 100px;
  /* El dial tiene foco de gesto propio: arrastrarlo es scrubear el viaje. */
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  background: linear-gradient(to top, rgba(11, 14, 18, 0.92) 40%, rgba(11, 14, 18, 0));
}

/* --- Panel de capítulo (placeholder) ------------------------------------- */

.panel-capitulo {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  background: rgba(11, 14, 18, 0.94);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.panel-capitulo.visible { opacity: 1; }

.panel-volver {
  position: fixed;
  top: 22px;
  left: 22px;
  padding: 8px 18px;
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  background: none;
  border: 1px solid rgba(214, 204, 188, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.panel-volver:hover, .panel-volver:focus-visible { border-color: var(--ambar); }
.panel-volver:focus-visible { outline: 1px solid var(--ambar); outline-offset: 2px; }

.panel-contenido {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 72px;
}

.panel-miniatura {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--borde-suave);
  background: #12161C;
}

.panel-fecha {
  margin: 26px 0 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar);
}

.panel-titulo {
  margin: 6px 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(26px, 4.5vw, 38px);
  line-height: 1.15;
}

.panel-lugar {
  margin: 0;
  font-size: 15px;
  color: rgba(232, 227, 218, 0.6);
}

.panel-resumen {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(232, 227, 218, 0.85);
}

.panel-nota {
  display: inline-block;
  margin-top: 30px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 227, 218, 0.65);
  border: 1px solid var(--granate);
  border-radius: 999px;
}

/* --- Fallback sin WebGL --------------------------------------------------- */

.modo-fallback #escena,
.modo-fallback .dial,
.modo-fallback .pista-scroll,
.modo-fallback .altura-scroll { display: none; }

.fallback {
  max-width: 680px;
  margin: 0 auto;
  padding: 130px 24px 80px;
}

.fallback-intro {
  margin: 0 0 28px;
  font-size: 14px;
  color: rgba(232, 227, 218, 0.6);
}

.fallback-capitulo {
  display: flex;
  gap: 18px;
  padding: 18px;
  margin-bottom: 18px;
  background: rgba(16, 20, 26, 0.7);
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
}
.fallback-capitulo img {
  width: 180px;
  height: 101px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #12161C;
}
.fallback-capitulo h2 {
  margin: 2px 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 20px;
}
.fallback-fecha {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
}
.fallback-lugar { margin: 0; font-size: 13px; color: rgba(232, 227, 218, 0.6); }
.fallback-resumen { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: rgba(232, 227, 218, 0.82); }
.fallback-entrar {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ambar);
}
.fallback-entrar:hover { color: var(--texto); }

.fallback-nota {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 227, 218, 0.45);
}

@media (max-width: 560px) {
  .fallback-capitulo { flex-direction: column; }
  .fallback-capitulo img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* --- Aviso sin JavaScript -------------------------------------------------- */

.aviso-noscript {
  position: fixed;
  top: 45%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 20;
}

/* --- Respeto por el dispositivo ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* --- Hoja de información (móvil) -----------------------------------------
   En 390 px la franja de pie no cabe desplegada, así que su contenido vive
   aquí y lo abre el botón de la barra de pestañas. */

.hoja-info {
  position: fixed;
  left: 0; right: 0;
  bottom: 56px;                    /* justo encima de la barra de pestañas */
  z-index: 21;
  padding: 18px 20px 20px;
  background: rgba(13, 17, 22, 0.96);
  border-top: 1px solid var(--borde-suave);
  backdrop-filter: blur(6px);
}
.hoja-info p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tierra);
}
.hoja-info-enlaces {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.hoja-info-enlaces a {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ambar);
  text-decoration: none;
}

/* --- Sin WebGL: esto ES la página de inicio de quien no puede viajar ------
   Deja de ser una lista de emergencia dentro de una escena: la franja de pie
   suelta su posición fija y el contenido respira bajo la cabecera. */

.modo-fallback .sitio-barra { position: static; }
.modo-fallback .portico-atlas { position: static; padding-top: 120px; }
.modo-fallback .hoja-info { display: none; }
.modo-fallback .sitio-marca { transform: none; font-size: 16px; }

/* --- La marca en móvil ---------------------------------------------------
   Este archivo se carga DESPUÉS de sitio.css, así que su .sitio-marca pisa el
   tamaño móvil de allí (misma especificidad, gana el último). El pórtico del
   atlas quiere su marca grande también en el teléfono, pero al viajar tiene
   que caber junto al icono del canal: por eso el estado de viaje baja aquí a
   los 12 px de la casa. */

@media (max-width: 720px) {
  .sitio-marca { font-size: clamp(15px, 5.2vw, 21px); transform: translateY(44px); }
  .en-viaje .sitio-marca {
    font-size: 12px;
    letter-spacing: 0.38em;
    text-indent: 0.38em;
    transform: none;
  }
  .portico-atlas { top: 118px; }
  .portico-promesa { padding: 0 28px; }
  .pista-scroll { margin-top: 40px; }

  /* El dial se apoya en la barra de pestañas, no en la franja de escritorio */
  .dial { bottom: 56px; height: 88px; }
}