/* El cruce · fase 1 (texto plano) · identidad del home actual
   terminal WEB · 2026-10-24 · WEB-04b
   Fuentes por nombre (Geist / Inter / JetBrains Mono) con respaldo del sistema: sin fuentes en línea. */
:root {
  --blanco: #FFFFFF;
  --tinta: #1A1F26;
  --acero: #5A6470;
  --linea: #E2E8EE;
  --cian: #22D3EE;
  --cian-medio: #67E8F9;
  --cian-suave: #CFFAFE;
  --coral: #F97316;
  --noche: #0A0F14;
  --titulos: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', Consolas, Menlo, 'Courier New';
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }

body {
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  background: var(--blanco);
  color: var(--tinta);
}
body.noche {
  background: linear-gradient(180deg, #0A0F14 0%, #0E2A38 55%, #0E5C74 82%, #05101A 100%) fixed;
  color: var(--blanco);
}

[data-idioma="es"] .en { display: none; }
[data-idioma="en"] .es { display: none; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.barra { position: fixed; top: 0; left: 0; right: 0; height: 5px; background: var(--cian); z-index: 7; }

.arriba {
  position: fixed; top: 5px; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
}
.marca {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--titulos); font-size: 18px; font-weight: 600; letter-spacing: -0.3px;
  color: var(--tinta); text-decoration: none;
}
.marca .ai { color: var(--coral); }
body.noche .marca { color: var(--blanco); }

.idioma {
  margin-left: auto;
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  color: var(--acero); display: flex; gap: 0.35rem; align-items: center;
}
.idioma button {
  background: none; border: none; color: inherit; font: inherit; letter-spacing: 2px;
  cursor: pointer; padding: 6px 6px; min-height: 32px;
}
.idioma button.activo { color: var(--tinta); font-weight: 600; }
.idioma .sep { opacity: 0.3; }
body.noche .idioma { color: rgba(255, 255, 255, 0.7); }
body.noche .idioma button.activo { color: var(--blanco); }

.modo {
  position: fixed; top: 58px; right: 20px; z-index: 8;
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--linea);
}
body.noche .modo { background: rgba(10, 15, 20, 0.55); border-color: rgba(255, 255, 255, 0.18); }
.modo button {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px;
  color: var(--acero); padding: 6px 13px; border-radius: 999px; min-height: 30px;
}
.modo button.on { background: var(--tinta); color: var(--blanco); }
body.noche .modo button { color: rgba(255, 255, 255, 0.7); }
body.noche .modo button.on { background: var(--cian); color: #06323B; }

.contenido {
  position: relative; z-index: 5;
  min-height: 100vh;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 112px 20px 28px;
}

.escena { display: flex; flex-direction: column; gap: 16px; }

.titulo {
  font-family: var(--titulos); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(24px, 6vw, 34px); line-height: 1.2;
}
.titulo2 { font-family: var(--titulos); font-weight: 600; font-size: clamp(20px, 5vw, 26px); line-height: 1.25; }
.sub { font-size: 15px; color: var(--acero); }
body.noche .sub { color: rgba(255, 255, 255, 0.82); }
.privacidad { font-size: 13px; color: var(--acero); border-left: 3px solid var(--cian); padding-left: 12px; }
body.noche .privacidad { color: rgba(255, 255, 255, 0.75); }

/* La puerta: transparente con borde blanco (de noche). */
.puerta {
  align-self: flex-start;
  font-family: var(--titulos); font-size: 17px; font-weight: 600;
  padding: 14px 22px; min-height: 48px; border-radius: 12px; cursor: pointer;
  background: var(--tinta); color: var(--blanco); border: 1px solid var(--tinta);
  transition: transform 0.25s ease;
}
body.noche .puerta { background: transparent; border-color: var(--blanco); color: var(--blanco); }
.puerta:hover { transform: translateY(-3px); }
.puerta .flecha { color: var(--cian); }
.puerta:disabled { opacity: 0.5; cursor: wait; }

.secundario {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--acero); text-decoration: underline; font: inherit; font-size: 14px; padding: 10px 0; min-height: 44px;
}
body.noche .secundario { color: rgba(255, 255, 255, 0.78); }

.progreso { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--cian); }
body.dia .progreso { color: #0E7490; }

.charla { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.msg { border-radius: 12px; padding: 12px 14px; max-width: 92%; }
.msg p + p { margin-top: 8px; }
.msg .quien { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; opacity: 0.75; margin-bottom: 4px; }
.barquero { background: rgba(34, 211, 238, 0.10); border: 1px solid rgba(34, 211, 238, 0.35); align-self: flex-start; }
.visitante { background: rgba(127, 140, 150, 0.12); border: 1px solid rgba(127, 140, 150, 0.30); align-self: flex-end; }

.respuesta { display: flex; flex-direction: column; gap: 10px; }
.respuesta textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
}
body.noche .respuesta textarea { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); color: var(--blanco); }
.enviar {
  align-self: flex-end; font-family: var(--titulos); font-weight: 600; font-size: 15px;
  padding: 10px 18px; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--cian); color: #06323B;
}
.enviar:disabled { opacity: 0.5; cursor: wait; }

.moneda {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titulos); font-weight: 700; font-size: 44px;
  color: #3A2A05; background: radial-gradient(circle at 35% 30%, #FFE7A3, #E0A82E 70%, #A8761A);
  border: 2px solid #FFE7A3;
}
.mensaje-final p + p { margin-top: 8px; }
.botones { display: flex; flex-direction: column; gap: 6px; }

.cupos { display: flex; flex-direction: column; gap: 14px; }
.dia-cupos h3 { font-family: var(--titulos); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.horas { display: flex; flex-wrap: wrap; gap: 8px; }
.hora {
  font-family: var(--mono); font-size: 14px; padding: 10px 14px; min-height: 44px; border-radius: 10px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid var(--linea);
}
body.noche .hora { border-color: rgba(255, 255, 255, 0.35); }
.hora.elegida { background: var(--cian); color: #06323B; border-color: var(--cian); }
.confirmar { display: flex; flex-direction: column; gap: 10px; }

.cohete { font-size: 48px; color: var(--cian); line-height: 1; }

.aviso { min-height: 22px; margin-top: 14px; font-size: 14px; color: var(--coral); }

.pie {
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  font-size: 12px; color: var(--acero);
}
.pie a { color: var(--acero); text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie .q { color: var(--cian); }
.pie .sep { opacity: 0.4; }
body.noche .pie { color: rgba(255, 255, 255, 0.65); border-top-color: rgba(255, 255, 255, 0.12); }
body.noche .pie a { color: rgba(255, 255, 255, 0.65); }
body.noche .pie a:hover { color: var(--blanco); }

button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}