/* ==========================================================================
   CORPORACIÓN X · Holdings & Enterprises — Sistema base v2
   Paleta oficial del isologo. Retícula instrumental + cristal conversacional.
   ========================================================================== */

:root{
  /* --- Paleta muestreada del isologo oficial ---------------------------
     cyan #29EBF4 · pizarra #414951 · plata #B0B5C0 · pizarra oscura #313941 */
  --bg:            #0B1116;
  --bg-deep:       #070B0F;
  --bg-slate:      #161C22;
  --bg-elev:       #232A31;
  --pizarra:       #414951;
  --pizarra-2:     #313941;

  --cyan:          #29EBF4;
  --cyan-hi:       #9BF6FB;
  --cyan-dim:      rgba(41,235,244,.18);
  --cyan-faint:    rgba(41,235,244,.06);
  --cyan-glow:     rgba(41,235,244,.55);

  --plata:         #B0B5C0;
  --silver:        #B0B5C0;
  --slate:         #8A93A0;
  --slate-dim:     #5C656F;

  --text:          #EAF2F5;
  --text-2:        #B0B5C0;
  --text-3:        #757E89;

  --line:          rgba(41,235,244,.14);
  --line-soft:     rgba(176,181,192,.10);
  --panel:         rgba(19,25,31,.74);
  --panel-solid:   rgba(24,31,38,.95);

  --danger:        #FF5A4D;
  --ok:            #2EE6A8;

  /* --- Acento por pilar (sectores reales del grupo) --- */
  --p1: #39E0A8;   /* Energía Nuclear        */
  --p2: #7FD4FF;   /* Litio                  */
  --p3: #29EBF4;   /* Inteligencia Artificial*/
  --p4: #F2C14E;   /* Criptoactivos          */
  --p5: #FF7A4D;   /* Construcciones         */
  --p6: #B79CFF;   /* Trade                  */

  /* --- Tipografía --- */
  --font-head: "Chakra Petch", "Rajdhani", system-ui, sans-serif;
  --font-body: "Rajdhani", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Métrica --- */
  --edge: clamp(18px, 4vw, 56px);
  --rule: .8px;
  --r-sm: 3px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 40px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:500;
  margin:0;
  letter-spacing:.02em;
  line-height:1.12;
}

p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
canvas{ display:block; }
img{ max-width:100%; display:block; }

::selection{ background:rgba(0,200,255,.28); color:#fff; }

/* --- Barra de scroll instrumental --- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(0,200,255,.5), rgba(0,200,255,.16));
  border-radius:0;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(0,200,255,.7); }

/* ==========================================================================
   Átomos compartidos
   ========================================================================== */

/* Etiqueta técnica monoespaciada */
.tag{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:.85;
}
.tag--dim{ color:var(--text-3); }

/* Numeración de acto */
.act-no{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--cyan);
  opacity:.7;
}

/* Regla con nodo */
.rule{
  position:relative;
  height:var(--rule);
  background:var(--line);
  width:100%;
}
.rule::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:5px; height:5px; margin-top:-2.5px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-glow);
  transform:rotate(45deg);
}

/* Botón institucional */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  border:var(--rule) solid rgba(0,200,255,.45);
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-hi);
  background:rgba(0,200,255,.05);
  transition:background .28s var(--ease-io), color .28s, border-color .28s,
             transform .28s var(--ease-io), box-shadow .28s;
}
.btn:hover{
  background:rgba(0,200,255,.14);
  border-color:rgba(0,200,255,.85);
  color:#eafaff;
  transform:translateY(-2px);
  box-shadow:0 10px 30px -14px var(--cyan-glow), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn--solid{
  background:var(--cyan); color:#04121f; border-color:var(--cyan);
  font-weight:600;
}
.btn--solid:hover{ background:var(--cyan-hi); color:#04121f; }
.btn__arrow{ transition:transform .28s var(--ease-io); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* Panel de cristal */
.glass{
  background:var(--panel);
  border:var(--rule) solid var(--line);
  border-radius:var(--r-md);
  backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:
    rgba(0,0,0,.85) 0 30px 70px -30px,
    rgba(255,255,255,.06) 0 1px 0 0 inset,
    rgba(0,200,255,.045) 0 0 60px 0 inset;
}

/* Retícula de fondo */
.grid-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(0,200,255,.16) 1px, rgba(0,0,0,0) 1.4px);
  background-size:34px 34px;
  opacity:.32;
  mask-image:radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
}

/* Viñeta */
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(at 50% 45%, rgba(0,0,0,0) 30%, rgba(4,7,14,.72) 100%);
}

/* Líneas de escaneo sutiles */
.scanlines{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:overlay;
}

/* Texto que se descifra */
.decode{ display:inline-block; white-space:pre-wrap; }

/* Aparición dirigida por scroll */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s ease-out, transform 1s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* Utilidades */
.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;
}
.mono{ font-family:var(--font-mono); }
.nowrap{ white-space:nowrap; }