/**
 * ¿Cuánto falta para el otro lado? — estilos de la maqueta.
 * Paleta y tipos de zaxfun, sin tocar (ver BRIEF §6).
 */

:root {
  --fondo: #05060f;
  --panel: rgba(255, 255, 255, .045);
  --borde: rgba(255, 255, 255, .10);
  --texto: #e9edfb;
  --texto-tenue: #8e97b8;
  --cian: #6fd3ff;
  --violeta: #b98cff;
  --oro: #ffd479;
  --radio: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ *
 * Botón de atrás — uno solo, y se releva
 * ------------------------------------------------------------------ */

.atras {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  z-index: 40;
  padding: 9px 15px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(10, 12, 24, .72);
  color: var(--texto-tenue);
  font: 500 13px/1 Inter, sans-serif;
  cursor: pointer;
  transition: color .18s, border-color .18s, transform .18s;
}
.atras:hover { color: var(--texto); border-color: rgba(255, 255, 255, .26); transform: translateX(-2px); }

/* Idioma. Arriba a la derecha, la misma cápsula que el botón de atrás, y
   **solo fuera del hoyo**: dentro esa esquina es de la música, que es lo que hay
   que tener a mano mientras cavas. El idioma es de todo zaxfun (`zaxfun_idioma`)
   y se elige al entrar, no a media partida. */
.idioma {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 40;
  padding: 9px 13px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(10, 12, 24, .72);
  color: var(--texto-tenue);
  font: 600 12px/1 Inter, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.idioma:hover { color: var(--texto); border-color: var(--cian); }
body.en-hoyo .idioma { display: none; }

/* Música sí/no. Enfrente del botón de atrás y **solo dentro del hoyo**: en la
   pantalla de inicio no suena nada, así que ahí no pinta nada. */
.sonido {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 40;
  display: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(10, 12, 24, .72);
  cursor: pointer;
  transition: border-color .18s, opacity .18s;
}
body.en-hoyo .sonido { display: grid; }
.sonido:hover { border-color: var(--cian); }
.sonido svg { width: 19px; height: 19px; }
.sonido-bocina { fill: var(--texto-tenue); }
.sonido-onda { fill: none; stroke: var(--texto-tenue); stroke-width: 1.7; stroke-linecap: round; }
.sonido-tachon { display: none; stroke: var(--texto-tenue); stroke-width: 1.7; stroke-linecap: round; }
.sonido[aria-pressed="false"] { opacity: .55; }
.sonido[aria-pressed="false"] .sonido-onda { display: none; }
.sonido[aria-pressed="false"] .sonido-tachon { display: block; }

/* ------------------------------------------------------------------ *
 * Pantalla de inicio
 * ------------------------------------------------------------------ */

.envoltorio {
  flex: 1;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: clamp(72px, 12vh, 110px) 20px 40px;
}

.cabecera { text-align: center; margin-bottom: clamp(28px, 5vh, 46px); }

.titulo {
  margin: 0 0 14px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 7.5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  background: linear-gradient(105deg, #ffffff 8%, var(--cian) 48%, var(--violeta) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitulo {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--texto-tenue);
  font-size: clamp(.92rem, 2.6vw, 1.03rem);
  line-height: 1.55;
}

.grupo { margin-bottom: 26px; }

.grupo-titulo {
  margin: 0 0 12px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  font: 500 .88rem/1.25 Inter, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
}
.opcion:hover { border-color: rgba(111, 211, 255, .45); transform: translateY(-2px); }
.opcion[aria-checked="true"] {
  border-color: var(--cian);
  background: linear-gradient(135deg, rgba(111, 211, 255, .16), rgba(185, 140, 255, .12));
  box-shadow: 0 0 0 1px rgba(111, 211, 255, .35), 0 10px 30px -18px var(--cian);
}
/* Lo que no existe se avisa desde el principio, con el mismo oro del sello
   «INVENTADO» de la bitácora: así el láser de minería y el topo no parecen
   datos de verdad colados entre la cuchara y la tuneladora. */
.opcion-inventada { border-style: dashed; border-color: rgba(255, 212, 121, .34); }
.opcion-inventada:hover { border-color: rgba(255, 212, 121, .6); }
.opcion-inventada .opcion-dato { color: var(--oro); opacity: .78; }

.opcion-icono { width: 34px; height: 34px; flex: none; }
.opcion-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-nombre { }
.opcion-dato { font-size: .72rem; color: var(--texto-tenue); font-weight: 400; }

.empezar {
  display: block;
  width: 100%;
  margin-top: 26px;
  padding: 16px;
  border: 0;
  border-radius: var(--radio);
  background: linear-gradient(105deg, var(--cian), var(--violeta));
  color: #07091a;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s, filter .18s;
  box-shadow: 0 16px 42px -20px var(--cian);
}
.empezar:hover { transform: translateY(-2px); filter: brightness(1.06); }
.empezar:active { transform: translateY(0); }

/* ------------------------------------------------------------------ *
 * El hoyo
 * ------------------------------------------------------------------ */

.cabina {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.cabina[hidden] { display: none; }

.mundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- marcadores --- */

.hud {
  position: relative;
  z-index: 2;
  padding: max(58px, calc(env(safe-area-inset-top) + 52px)) 16px 0;
  text-align: center;
  pointer-events: none;
}

.hud-principal { margin-bottom: 6px; }
/* El `- 72px` deja libre el carril de la regla del planeta, que va pegada al
   borde derecho del lienzo. Con el 100% pelado, en un móvil de 375 la tarjeta
   de «Te faltan» se metía debajo de la regla y se leían las dos encima. */
.hud-fila { width: min(430px, 100% - 72px); margin: 0 auto; }

/* «Qué estoy haciendo»: la frase que faltaba. Sin esto la pantalla enseñaba
   un número y una piedra, y no se sabía contra qué estabas. */
.hud-haciendo {
  margin: 0 auto 10px;
  max-width: 30ch;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--texto-tenue);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.hud-haciendo b { color: var(--cian); font-weight: 600; }

/* Las dos frases que aterrizan las cifras: el hoyo medido en cosas conocidas
   («Caben 3 Torres Eiffel») y desde qué época llevarías cavando. Se quedan
   vacías hasta que hay algo que decir, y con `:empty` no dejan hueco: en la
   superficie y en el primer segundo no hay nada que comparar. */
.hud-comparacion {
  margin: 2px auto 6px;
  max-width: 30ch;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--texto);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.hud-desde {
  margin: 8px auto 0;
  max-width: 32ch;
  font-size: .74rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--texto-tenue);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.hud-comparacion:empty,
.hud-desde:empty { display: none; }

/* --- zoom --- */

/* Abajo a la derecha, en fila y pegado a los mandos. Probado arriba y en
   medio: arriba estrujaba los marcadores y en medio tapaba justo el planeta,
   que es lo que hay que estar mirando. */
.zoom {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 0 auto 6px;
  padding: 0 2px;
}

.zoom-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: rgba(6, 8, 18, .7);
  color: var(--texto);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .1s;
}
.zoom-btn:hover:not(:disabled) { border-color: var(--cian); background: rgba(111, 211, 255, .16); }
.zoom-btn:active:not(:disabled) { transform: scale(.92); }
.zoom-btn:disabled { opacity: .28; cursor: default; }

.zoom-nivel {
  margin-right: auto;
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--texto-tenue);
  text-shadow: 0 1px 8px #000;
}
/* La lupa era el último emoji que quedaba. Dos círculos y un palo en CSS
   pesan lo mismo y se ven igual en todos los teléfonos. */
.zoom-nivel::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: 3px 3px 0 -1px currentColor;
  vertical-align: -1px;
}
.zoom-btn { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 11px; }

.hud-principal strong {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums;
}

.hud-fila {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.hud-dato {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(6, 8, 18, .55);
  border: 1px solid rgba(255, 255, 255, .07);
}
.hud-principal { background: none; border: 0; padding: 0; }

.hud-etiqueta {
  display: block;
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 3px;
}
.hud-dato strong {
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#hud-temp { color: var(--oro); }

/* --- bitácora --- */

/* La escena es la protagonista: los hallazgos asoman, se leen y se van.
   En la primera prueba ocupaban media pantalla y tapaban el taladro. */
.bitacora {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;          /* `auto` arriba: se pega justo encima de los mandos */
  margin-top: auto;
  padding: 0 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}

/* La tarjeta ya no es una píldora con un emoji: es un sello + un título + una
   línea de explicación. El sello dice si lo que acabas de cruzar existe de
   verdad o nos lo hemos inventado, y ese es medio chiste del juguete, así que
   se lee de un vistazo y no se mezcla con el texto. */
.bitacora-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  align-self: flex-start;
  max-width: min(360px, 88%);
  padding: 8px 13px 9px 9px;
  border-radius: 14px;
  background: rgba(6, 8, 18, .82);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: .74rem;
  line-height: 1.35;
  animation: entra .3s ease both;
}
.bitacora-item.se-va { animation: sale .5s ease both; }

.bitacora-sello {
  flex: none;
  margin-top: 1px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  max-width: 5.2em;
}
.es-real .bitacora-sello {
  color: var(--cian);
  background: rgba(111, 211, 255, .14);
  border: 1px solid rgba(111, 211, 255, .32);
}
.es-falso .bitacora-sello {
  color: var(--oro);
  background: rgba(255, 212, 121, .14);
  border: 1px solid rgba(255, 212, 121, .32);
}

.bitacora-cuerpo { min-width: 0; }
.bitacora-titulo {
  display: block;          /* sin esto el título y el texto salían pegados */
  margin-bottom: 2px;
  color: #fff;
  font-weight: 600;
}
.bitacora-texto { color: var(--texto-tenue); }

@keyframes entra {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sale {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(-10px); }
}

/* --- mandos --- */

/* El juguete es vertical. En pantalla ancha los mandos no se estiran: se
   quedan en una columna centrada del ancho de un móvil, que es donde la mano
   los alcanza y donde el acelerador se lee de un vistazo. */
.mandos {
  position: relative;
  z-index: 3;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5, 6, 15, .95) 55%, rgba(5, 6, 15, 0));
}
.mandos > * { width: min(430px, 100%); margin-inline: auto; }
.acelerador-burla { margin-top: 9px; }
.bitacora { align-items: center; }
.bitacora-item { width: auto; margin-inline: 0; }
@media (min-width: 500px) {
  .bitacora { padding-inline: calc(50% - 215px); align-items: flex-start; }
}

/* Pantalla corta: en un móvil pequeño los marcadores se comían el 40 % del
   alto y abajo no quedaba sitio ni para el planeta ni para la tira de capas.
   Se quitan los dos renglones de adorno —la comparación y la época—, que son
   propina; la profundidad, el tiempo, la temperatura y lo que falta se quedan. */
@media (max-height: 720px) {
  .hud { padding-top: 12px; gap: 6px; }
  .hud-comparacion, .hud-desde { display: none; }
  .acelerador-burla { display: none; }
}

.barra { margin-bottom: 13px; }

.barra-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--texto-tenue);
}
#barra-pct { color: var(--oro); font-weight: 600; font-variant-numeric: tabular-nums; }

.barra-riel {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.barra-relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cian), var(--violeta), var(--oro));
  transition: width .12s linear;
}

.acelerador {
  display: flex;
  align-items: center;
  gap: 11px;
}

.marcha-btn {
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--panel);
  color: var(--texto);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .1s;
}
.marcha-btn:hover:not(:disabled) { border-color: var(--cian); background: rgba(111, 211, 255, .14); }
.marcha-btn:active:not(:disabled) { transform: scale(.94); }
.marcha-btn:disabled { opacity: .3; cursor: default; }

.acelerador-centro {
  flex: 1;
  min-width: 0;
  padding: 9px 12px 10px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
}

.acelerador-muescas {
  display: flex;
  gap: 3px;
  height: 16px;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 7px;
}
.muesca {
  width: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .13);
  transition: background .18s, height .18s;
}
.muesca.on { background: linear-gradient(to top, var(--cian), var(--violeta)); }
.muesca.on:last-of-type { }

.acelerador-nivel {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: var(--texto);
}

.acelerador-burla {
  margin: 9px 0 0;
  min-height: 1.1em;
  text-align: center;
  font-size: .76rem;
  color: var(--oro);
  opacity: .9;
}

/* --- llegada --- */

.llegada {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 6, 15, .82);
  animation: aparece .4s ease both;
}
.llegada[hidden] { display: none; }

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.llegada-caja {
  width: min(420px, 100%);
  padding: 30px 26px 26px;
  border: 1px solid var(--borde);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(26, 30, 56, .96), rgba(10, 12, 26, .96));
  text-align: center;
  box-shadow: 0 40px 100px -40px #000;
}
.llegada-emoji { display: block; margin-bottom: 8px; }
.llegada-marca { width: 64px; height: 64px; }
.llegada-caja h2 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.5rem;
}
.llegada-caja p { margin: 0 0 10px; font-size: .9rem; line-height: 1.55; color: var(--texto); }
.llegada-dato { color: var(--texto-tenue) !important; font-size: .82rem !important; }

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * El bloque de SEO — contenido de verdad, debajo del juguete
 *
 * Va DESPUÉS de los selectores a propósito: lo primero que se ve es el
 * juguete. Es la tabla de tiempos y las preguntas frecuentes, uno por idioma
 * (`#seo-es` / `#seo-en`, se alternan desde `pintarIdioma()`), y es lo que
 * puede traer gente de Google — el juguete solo no tiene texto que indexar.
 * Calcado del de «¿Cuánto falta?», que ya está en producción.
 * ------------------------------------------------------------------ */

.seo {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--borde);
  color: rgba(233, 237, 251, .72);
  font-size: .92rem;
  line-height: 1.65;
}

.seo h2 {
  margin: 2.2rem 0 .9rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 500;
  color: var(--texto);
  letter-spacing: -.01em;
}
.seo h2:first-child { margin-top: 0; }

.seo h3 {
  margin: 1.6rem 0 .4rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--oro);
}

.seo p { margin: 0 0 .9rem; }
.seo strong { color: var(--texto); font-weight: 600; }

.seo-nota {
  color: rgba(142, 151, 184, .75);
  font-size: .8rem;
}

/* La tabla se sale en móvil: se desplaza sola en vez de romper el ancho. */
.seo-tabla-marco {
  overflow-x: auto;
  margin: 1.2rem 0;
  -webkit-overflow-scrolling: touch;
}

.seo-tabla {
  width: 100%;
  min-width: 40rem;          /* seis columnas: una más que en «¿Cuánto falta?» */
  border-collapse: collapse;
  font-size: .85rem;
}

.seo-caption {
  padding-bottom: .6rem;
  color: rgba(142, 151, 184, .75);
  font-size: .78rem;
  text-align: left;
}

.seo-tabla th,
.seo-tabla td {
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  text-align: right;
  white-space: nowrap;
}

.seo-tabla thead th {
  color: var(--texto-tenue);
  font-weight: 500;
  border-bottom-color: var(--borde);
}

.seo-tabla tbody th {
  color: var(--texto);
  font-weight: 500;
  text-align: left;
}

.seo-tabla tbody tr:hover td,
.seo-tabla tbody tr:hover th { background: rgba(255, 255, 255, .03); }

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */

.pie {
  padding: 26px 20px max(26px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: .8rem;
  color: var(--texto-tenue);
}
.firma { color: var(--oro); font-weight: 600; text-decoration: none; }
.firma:hover { text-decoration: underline; }

body.en-hoyo .pie { display: none; }

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