/* ============================================================
   ATLAS CHILE — núcleo: tokens, tipografía, chrome HUD, botones
   Lenguaje: "Google Earth / centro de control" sobre fotografía real
   ============================================================ */

:root{
  /* — paleta cinematográfica — */
  --void:      #04060c;
  --void-2:    #070b16;
  --ink:       #0b0f1a;
  --ink-soft:  #11161f;
  --paper:     #f3efe6;
  --paper-mut: #b9b4a8;
  --paper-dim: #7d8593;

  /* warm = humano/marca · cool = satélite/HUD */
  --gold:      #eab062;
  --gold-dk:   #c9893d;
  --gold-lt:   #f6d29a;
  --cyan:      #6fd6ec;
  --cyan-dim:  #3a7f93;

  --line:      rgba(233,228,216,.14);
  --line-soft: rgba(233,228,216,.08);
  --line-cyan: rgba(111,214,236,.30);

  --glass:     rgba(10,13,20,.62);
  --glass-2:   rgba(8,11,18,.80);

  /* — tipografía — */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-text:    "Sora", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
  --f-serif:   "Newsreader", Georgia, serif;

  /* — easings — */
  --ease:   cubic-bezier(.4,0,.2,1);
  --cinema: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --plunge: cubic-bezier(.7,0,.3,1);

  --sh-lg: 0 30px 80px -30px rgba(0,0,0,.7);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-text);
  background:var(--void);
  color:var(--paper);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#1a1206; }

/* ============================================================
   STAGE — un solo escenario a pantalla completa
   ============================================================ */
#stage{
  position:fixed; inset:0;
  overflow:hidden;
  perspective:1400px;
  background:#000;
}
.layer{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
}
.layer.is-on{ opacity:1; visibility:visible; animation:fadeIn .7s var(--ease); }

/* solo para lectores de pantalla y crawlers (fallback de widgets JS) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ── Rendimiento: las capas ocultas no animan ni renderizan ──
   visibility:hidden NO detiene animaciones ni libera trabajo de render:
   congelamos los timelines (reanudan donde quedaron al volver) y
   saltamos el render del subtree completo con content-visibility.
   #sections queda FUERA de content-visibility: sus widgets (grafo
   neuronal, vitrina, grilla de servicios) se montan y miden geometría
   mientras la capa está oculta y medirían 0×0. */
.layer:not(.is-on) *,
.layer:not(.is-on) *::before,
.layer:not(.is-on) *::after{ animation-play-state:paused !important; }
#solar:not(.is-on),
#space:not(.is-on),
#chile:not(.is-on),
#travel:not(.is-on),
#descent:not(.is-on),
#planetLand:not(.is-on){ content-visibility:hidden; }

/* ============================================================
   VIEWFINDER CHROME — marco de visor que enmarca todo
   ============================================================ */
.chrome{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.chrome .corner{
  position:absolute; width:42px; height:42px;
  border:1.5px solid var(--line-cyan);
  opacity:.7;
  transition:opacity .6s var(--ease);
}
.chrome .tl{ top:18px; left:18px; border-right:0; border-bottom:0; }
.chrome .tr{ top:18px; right:18px; border-left:0; border-bottom:0; }
.chrome .bl{ bottom:18px; left:18px; border-right:0; border-top:0; }
.chrome .br{ bottom:18px; right:18px; border-left:0; border-top:0; }
.chrome .crosshair{
  position:absolute; top:50%; left:50%; width:34px; height:34px;
  transform:translate(-50%,-50%); opacity:.0;
  transition:opacity .5s var(--ease);
}
.chrome.aiming .crosshair{ opacity:.45; }
.chrome .crosshair::before,
.chrome .crosshair::after{
  content:''; position:absolute; background:var(--cyan);
}
.chrome .crosshair::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.chrome .crosshair::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }

/* vignette permanente para profundidad cinematográfica */
.vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
}
.grain{
  position:fixed; inset:0; z-index:56; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   HUD — barra superior (estado de misión) + inferior
   ============================================================ */
.hud{ position:fixed; left:0; right:0; z-index:50; pointer-events:none;
  font-family:var(--f-mono); }
.hud-top{ top:0; padding:22px clamp(20px,4vw,52px) 0; position:relative;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.hud-bot{ bottom:0; padding:0 clamp(20px,4vw,52px) 22px; position:relative;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
/* scrim de legibilidad detrás del HUD (sobre fotos brillantes) */
.hud-top::before{ content:''; position:absolute; left:0; right:0; top:0; height:170px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(2,6,14,.72) 0%, rgba(2,6,14,.32) 45%, transparent 100%); }
.hud-bot::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:150px; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, rgba(2,6,14,.66) 0%, rgba(2,6,14,.26) 50%, transparent 100%); }

.hud-cluster{ display:flex; flex-direction:column; gap:6px; }
.hud-cluster.r{ align-items:flex-end; text-align:right; }

.hud-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); text-shadow:0 1px 7px rgba(0,4,12,.85);
}
.hud-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); animation:hudPulse 2s var(--ease) infinite; }
@keyframes hudPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.hud-read{ font-size:.66rem; letter-spacing:.08em; color:var(--paper-mut); text-shadow:0 1px 7px rgba(0,4,12,.85); }
.hud-read b{ color:var(--paper); font-weight:500; }
.hud-mini{ font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); text-shadow:0 1px 7px rgba(0,4,12,.85); }

/* al scrollear dentro de una sección los textos del HUD se desvanecen
   (quedaban impresos sobre los títulos del contenido, ilegible en móvil);
   el botón de salida NO se toca */
.hud-tag, .hud-mini, .hud-read{ transition:opacity .35s var(--ease); }
body.hud-min .hud-tag,
body.hud-min .hud-mini,
body.hud-min .hud-read{ opacity:0; }

/* línea de escaneo sutil arriba */
.hud-scan{
  position:fixed; top:0; left:0; right:0; height:1px; z-index:49;
  background:linear-gradient(90deg, transparent, var(--line-cyan) 30%, var(--line-cyan) 70%, transparent);
  opacity:.5;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85em 1.4em; border-radius:2px;
  border:1px solid var(--line);
  color:var(--paper); background:var(--glass);
  backdrop-filter:blur(10px);
  transition:transform .4s var(--cinema), background .3s, border-color .3s, color .3s;
}
.btn svg{ width:15px; height:15px; transition:transform .4s var(--cinema); }
.btn:hover{ transform:translateY(-2px); border-color:var(--gold); }
.btn:hover svg{ transform:translateX(3px); }
.btn-gold{ background:var(--gold); color:#1a1206; border-color:var(--gold); font-weight:600; }
.btn-gold:hover{ background:var(--gold-lt); border-color:var(--gold-lt); }
.btn-ghost{ background:rgba(255,255,255,.04); }

.ico-btn{
  pointer-events:auto;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(10px);
  transition:transform .4s var(--cinema), border-color .3s, background .3s;
}
.ico-btn:hover{ transform:scale(1.08); border-color:var(--cyan); }
.ico-btn svg{ width:18px; height:18px; }

/* utilidad */
.tabular{ font-variant-numeric:tabular-nums; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  /* sin iteration-count:1 las animaciones infinite reinician cada .001ms
     en un micro-loop — justo en quien pidió menos movimiento */
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.12s !important;
    scroll-behavior:auto !important;
  }
}

/* ── BOTONES SALTAR ANIMACIONES ─────────────────────────────────────────── */
.skip-btn{
  position:fixed; z-index:9999; pointer-events:auto;
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(200,210,230,.55); padding:.6em 1em; border-radius:40px;
  border:1px solid rgba(255,255,255,.1); background:rgba(4,6,12,.55); backdrop-filter:blur(12px);
  cursor:pointer; transition:color .25s, border-color .25s, opacity .3s, transform .3s;
}
.skip-btn svg{ width:13px; height:13px; flex-shrink:0; }
.skip-btn:hover{ color:var(--cyan); border-color:rgba(111,214,236,.4); transform:translateY(-2px); }
/* intro: top-right durante el sistema solar y el descenso */
.skip-intro{ top:clamp(14px,3vh,24px); right:clamp(14px,3vw,28px); opacity:0; pointer-events:none; }
.skip-intro.visible{ opacity:1; pointer-events:auto; }
/* sin-anims: bottom-left, siempre disponible al estar en secciones */
.skip-anim{ bottom:clamp(14px,3vh,24px); left:clamp(14px,3vw,28px); opacity:0; pointer-events:none; }
.skip-anim.visible{ opacity:1; pointer-events:auto; }
/* cuando el usuario ya eligió saltar anims */
.no-anims .skip-anim{ display:none; }
/* el grano usa mix-blend-mode (composición de pantalla completa por frame);
   en modo "sin animaciones" se quita para aliviar GPU de equipos lentos */
.no-anims .grain{ display:none; }