/* =====================================================================
   EXIMIR — base.css
   Sistema de diseño compartido por todas las pantallas.
   ===================================================================== */

:root {
  /* Fondo y tinta */
  --bg0:        #f5f7fe;
  --bg1:        #eaf2ff;
  --ink:        #0f172a;
  --soft:       #5b6b84;
  --muted:      #94a3b8;

  /* Cristal */
  --glass:      rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(15, 23, 42, 0.10);
  --glass-fill: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.55) 55%);
  --sombra:     0 20px 50px -24px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.9);
  --sombra-alta:0 30px 70px -24px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.95);

  /* Tonos por sección */
  --cosmic:     #4a9dff;
  --memoria:    #8b6cff;
  --red:        #2dd4a7;

  /* Estados */
  --ok:         #18c99a;
  --alerta:     #f0a33c;
  --fallo:      #e05a5a;

  /* Tipografía */
  --display:    'Space Grotesk', system-ui, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  --radio:      22px;
  --radio-sm:   14px;
}

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

html, body {
  width: 100%;
  min-height: 100%;
  font-family: var(--display);
  background: var(--bg0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; outline: none; }

/* REGLAS GLOBALES DE SEGURIDAD PARA SVG */
svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

::selection { background: rgba(74,157,255,.22); }

:focus-visible {
  outline: 2px solid var(--cosmic);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =====================================================================
   EL CIELO
   ===================================================================== */

#cielo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 18% 10%, rgba(96,165,250,.22) 0%, transparent 70%),
    radial-gradient(46% 40% at 85% 16%, rgba(129,140,248,.16) 0%, transparent 70%),
    radial-gradient(50% 46% at 78% 88%, rgba(45,212,167,.13) 0%, transparent 70%),
    radial-gradient(44% 40% at 12% 86%, rgba(255,146,190,.10) 0%, transparent 70%),
    linear-gradient(135deg, #eaf2ff 0%, #f7f9ff 45%, #eff6ff 100%);
}

#cielo .orbe { position: absolute; opacity: .45; }
#cielo .orbe > div { border-radius: 50%; }

#orbe1 { left: 50%; top: -220px; transform: translateX(-50%); }
#orbe1 > div {
  width: 820px; height: 560px;
  background: radial-gradient(circle, rgba(74,157,255,.17) 0%, transparent 66%);
}
#orbe2 { left: -200px; bottom: -200px; }
#orbe2 > div {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(139,108,255,.14) 0%, transparent 64%);
}
#orbe3 { right: -170px; bottom: 40px; }
#orbe3 > div {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(24,201,154,.12) 0%, transparent 64%);
}

#grano {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.capa { position: relative; z-index: 2; }

/* =====================================================================
   TIPOGRAFÍA Y ETIQUETAS
   ===================================================================== */

.titulo-xl {
  font-weight: 700;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.titulo-l {
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 36px);
  letter-spacing: -.025em;
}

.titulo-m {
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: -.02em;
}

.eti {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
}

.eti--ancha { letter-spacing: .28em; font-size: clamp(9px, 1.2vw, 11px); color: var(--muted); }
.eti--dato  { letter-spacing: .06em; font-size: 11px; color: var(--muted); }

/* =====================================================================
   BOTONES
   ===================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all .2s ease;
  white-space: nowrap;
}

.btn:hover { border-color: rgba(15,23,42,.28); color: var(--ink); background: rgba(255,255,255,.95); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--fuerte {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--fuerte:hover {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}

.btn-circ {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s ease;
}

.btn-circ:hover { border-color: rgba(15,23,42,.28); color: var(--ink); background: rgba(255,255,255,.95); }
.btn-circ:active { transform: scale(.94); }
.btn-circ svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }

.volver { position: fixed; top: 18px; left: 20px; z-index: 40; }

/* =====================================================================
   GLIFO ORBITAL
   ===================================================================== */

.glifo { width: 40px; height: 40px; display: inline-block; flex-shrink: 0; }
.glifo svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: visible; }

.g-anillo {
  fill: none;
  stroke: rgba(15,23,42,.22);
  stroke-width: 1;
  stroke-dasharray: 2.5 4.5;
}
.g-nucleo { fill: color-mix(in srgb, var(--tono, var(--cosmic)) 78%, #fff 8%); }
.g-orbita { transform-origin: 20px 20px; animation: orbitar 11s linear infinite; }
.g-satelite { fill: var(--ink); }

@keyframes orbitar { to { transform: rotate(360deg); } }

/* =====================================================================
   PÍLDORAS
   ===================================================================== */

.pil {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--pil-tono, var(--cosmic)) 14%, transparent);
  color: color-mix(in srgb, var(--pil-tono, var(--cosmic)) 78%, #0f172a);
  border: 1px solid color-mix(in srgb, var(--pil-tono, var(--cosmic)) 26%, transparent);
  white-space: nowrap;
}

.pil--nucleo    { --pil-tono: #f0653c; }
.pil--dominio   { --pil-tono: var(--cosmic); }
.pil--episodica { --pil-tono: var(--memoria); }

.aviso {
  max-width: 640px;
  margin: 16px auto;
  padding: 14px 18px;
  border-radius: var(--radio-sm);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--glass-edge);
  font-size: 13.5px;
  color: var(--soft);
  backdrop-filter: blur(12px);
}

.aviso--fallo { border-color: rgba(224,90,90,.35); color: #a13b3b; }



/* =====================================================================
   OPTIMIZACION MOVIL (RESPONSIVE)
   ===================================================================== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .titulo-xl { font-size: clamp(28px, 8vw, 38px) !important; }
  .titulo-l { font-size: clamp(20px, 5vw, 26px) !important; }
  .aviso { margin: 12px; padding: 12px; }
  .btn { padding: 8px 14px; font-size: 10px; }
  .volver { top: 12px; left: 12px; }
  #cielo .orbe { transform: scale(0.6); }
}