/* =====================================================================
   portada-theme.css — COPIA FIEL del "mundo visual" de la PORTADA (index.html)
   ---------------------------------------------------------------------
   Estos valores están COPIADOS a mano de index.html (no es un archivo
   compartido). Si algún día cambian los colores/fondo/efectos de la
   portada, HAY QUE REFLEJARLO AQUÍ a mano para que el estudio siga
   idéntico. Referencias de origen (index.html): :root L22-32, body L36-49,
   #stars L53, .gridfloor L54-64, .glass L74-83, .label L70.

   NO se incluyen aquí (a propósito, para no colisionar con estudio.html):
     · @font-face  → estudio.html ya carga las MISMAS fuentes (base64).
     · .wrap / .logo / header  → estudio.html define los suyos (layout propio).
   Se carga DESPUÉS del <style> inline del estudio para que el fondo y los
   tokens de la portada ganen la cascada.
   ===================================================================== */

/* ---------- tokens de color (idénticos a la portada) ---------- */
:root{
  --bg:#05070C; --bg2:rgba(12,18,28,.90); --card:rgba(15,22,33,.84);
  --text:#EAF2FB; --muted:#A6B8CC; --soft:#7C8DA3;
  --cyan:#7FB8F0; --blue:#56A8F0; --violet:#2F6BC8;
  --green:#61B771; --gold:#8CC6FF; --orange:#62AEF2; --coral:#7EA6FF;
  --line:rgba(140,180,230,.22);
  --line-bright:rgba(150,195,255,.46);
  --glow-cyan:rgba(150,195,255,.18); --glow-purple:rgba(90,145,225,.14);
  --grad:linear-gradient(135deg,#2A5FB8 0%,#4A90E2 46%,#79BAF5 100%);
  --grad2:linear-gradient(135deg,#4A90E2,#79BAF5);
}

/* ---------- fondo espacial de la portada (negro profundo + nebulosas azules) ---------- */
body{
  background:
    radial-gradient(1100px 700px at 50% -6%, rgba(130,185,245,.13), transparent 60%),
    radial-gradient(900px 600px at 88% 4%, rgba(90,150,235,.10), transparent 55%),
    radial-gradient(1000px 700px at 8% 26%, rgba(90,145,225,.08), transparent 60%),
    radial-gradient(1200px 900px at 50% 116%, rgba(70,120,200,.07), transparent 60%),
    #04060c;
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
}
::selection{background:rgba(120,180,240,.35)}

/* ---------- capa de estrellas (THREE) + rejilla 3D ---------- */
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none}
.gridfloor{
  position:fixed;left:0;right:0;bottom:-12vh;height:44vh;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(120,180,240,.04), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120,180,240,.05) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(80,140,220,.045) 0 1px, transparent 1px 50px);
  transform:perspective(620px) rotateX(62deg);
  transform-origin:top center;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

/* ---------- vidrio (glassmorphism) y label — átomos de la portada ---------- */
.glass{
  background:linear-gradient(158deg, rgba(20,30,44,.26), rgba(9,13,20,.22));
  border:1px solid rgba(150,195,255,.20);
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 14px 44px rgba(0,0,0,.38),
             inset 0 1px 0 rgba(210,235,255,.12),
             0 0 28px rgba(115,182,250,.06);
  border-radius:24px;
}
.label{font-family:'Orbitron',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}