/* ═══════════════════════════════════════════════════════════
   CUNDASIA™ — Capa de marca 2026 para páginas internas
   Se carga DESPUÉS de la hoja propia de cada página. Define los
   tokens de tema (oscuro por defecto, claro con la paleta del
   portal HSI) y alinea tipografía, botones y logotipo con el home.
   El tema lo resuelve el script inline del <head>
   (data-theme-resolved) y lo alterna brand-2026.js.
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap');

/* ── Tokens: oscuro ── */
:root{
  --bg:#050A16; --bg2:#08101F; --bg3:#0B1426;
  --white:#EAF1FB; --muted:#9AABC3;
  --fg-rgb:234 241 251; --bg-rgb:5 10 22; --muted-rgb:154 171 195;
  --teal:#3CC6E3; --teal-glow:rgba(60,198,227,.18); --teal-soft:rgba(60,198,227,.07);
  --gold:#4F8DF7; --gold-glow:rgba(79,141,247,.15);
  --violet:#7C9CFF;
  --line:rgba(148,178,214,.13);
  --display:'Jost',system-ui,sans-serif; --body:'Mulish',system-ui,sans-serif;
  --brand-grad:linear-gradient(120deg,#25CFC0 0%,#29B1D3 42%,#1969D6 100%);
  /* tokens del home (para componentes compartidos) */
  --surface:#0B1426; --surface-2:#0F1B31; --text:#EAF1FB; --text-2:#9AABC3; --text-3:#6E7F99;
  --line-2:rgba(148,178,214,.22); --brand:#3CC6E3; --brand-ink:#5ED3EC; --action:#3B82F6;
  --brand-soft:rgba(60,198,227,.10); --brand-glow:rgba(60,198,227,.30);
  --shadow:0 14px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 50px 90px -30px rgba(0,0,0,.8);
  --card-bg:rgb(var(--fg-rgb) / .03); --card-shadow:none;
  color-scheme:dark;
}
/* ── Tokens: claro (paleta HSI Business Portal) ── */
:root[data-theme-resolved="light"]{
  --bg:#F5F8FC; --bg2:#EAF1F8; --bg3:#FFFFFF;
  --white:#0D1729; --muted:#4D5A70;
  --fg-rgb:13 23 41; --bg-rgb:245 248 252; --muted-rgb:77 90 112;
  --teal:#1885A2; --teal-glow:rgba(41,177,211,.16); --teal-soft:rgba(41,177,211,.09);
  --gold:#1969D6; --gold-glow:rgba(25,105,214,.10);
  --violet:#5B63D9;
  --line:#DCE5EF;
  --surface:#FFFFFF; --surface-2:#F1F6FB; --text:#0D1729; --text-2:#4D5A70; --text-3:#7B879B;
  --line-2:#C9D6E5; --brand:#29B1D3; --brand-ink:#1885A2; --action:#1969D6;
  --brand-soft:rgba(41,177,211,.10); --brand-glow:rgba(41,177,211,.28);
  --shadow:0 10px 30px -12px rgba(13,40,80,.18),0 2px 6px rgba(13,23,41,.04);
  --shadow-lg:0 40px 80px -30px rgba(13,40,80,.35);
  --card-bg:#FFFFFF; --card-shadow:0 1px 2px rgba(13,23,41,.04),0 8px 24px -12px rgba(13,40,80,.12);
  color-scheme:light;
}
body{font-family:var(--body);background-color:var(--bg);color:var(--white);transition:background-color .35s ease,color .35s ease}

/* ── Tipografía: el peso ligero de Jost como en el home ── */
h1,h2{font-weight:500!important;letter-spacing:-.025em}
h3{font-weight:500!important;letter-spacing:-.015em}
h1 strong,h2 strong{font-weight:600}

/* ── Botones ── */
.btn{font-family:var(--body)!important;text-transform:none!important;letter-spacing:.01em!important;border-radius:12px!important;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background-color .25s,border-color .25s,color .25s!important}
.btn-primary,.btn-gold{background:var(--brand-grad)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px -10px rgba(25,105,214,.65)!important}
.btn-primary:hover,.btn-gold:hover{box-shadow:0 16px 30px -12px rgba(25,105,214,.75)!important}
.btn-outline{border-color:rgba(60,198,227,.45)}
[data-theme-resolved="light"] .btn-ghost{background:#fff}

/* ── Logotipo: símbolo nuevo + wordmark CUNDΛSIA ── */
.nav-logo-img{mix-blend-mode:normal!important;border-radius:10px!important;background:radial-gradient(120% 120% at 30% 20%,#13233F 0%,#070E1C 70%)!important;padding:4px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.nav-logo-text{font-family:'Jost',system-ui,sans-serif!important;font-weight:400!important;letter-spacing:.2em!important;text-transform:uppercase;display:inline-flex!important;align-items:center;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--white)!important;line-height:1}
.nav-logo-text .lam{display:inline-block;width:.86em;height:.8em;margin:0 .06em 0 .02em;position:relative;top:-.03em;color:var(--white)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.nav-logo-text .lam svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;overflow:visible}
.nav-logo-text .lam.dot::after{content:'';position:absolute;left:50%;bottom:.06em;width:.15em;height:.15em;border-radius:50%;background:#29B1D3;transform:translateX(-50%)}
.nav-logo-text .tm{-webkit-text-fill-color:var(--muted)!important;color:var(--muted)!important;letter-spacing:0}
.logo .nav-logo-text{font-size:1.1rem}

/* ── Navegación con vidrio, en ambos temas ── */
#nav.scrolled,nav.scrolled{background:rgb(var(--bg-rgb) / .8)!important;backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)}
#progress-bar{background:var(--brand-grad)!important}
.mobile-menu{background:var(--bg)!important}

/* ── Botón de tema (lo inserta brand-2026.js) ── */
.cd-theme-btn{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;border:1px solid var(--line);background:rgb(var(--fg-rgb) / .04);color:var(--muted);cursor:pointer;flex-shrink:0;transition:color .2s,border-color .2s}
.cd-theme-btn:hover{color:var(--teal);border-color:var(--teal)}
.cd-theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cd-theme-btn .moon{display:none}
[data-theme-resolved="dark"] .cd-theme-btn .sun{display:none}
[data-theme-resolved="dark"] .cd-theme-btn .moon{display:block}
.mobile-menu .cd-theme-btn{margin-top:14px}

/* ── Modo claro: ajustes de superficies que no dependen de variables ── */
[data-theme-resolved="light"] ::-webkit-scrollbar-thumb{background:#CBD4E6}
[data-theme-resolved="light"] .tag{background:rgba(41,177,211,.08)}
[data-theme-resolved="light"] .divider{opacity:.6}

::selection{background:rgba(41,177,211,.28)}
::-webkit-scrollbar-thumb{background:#29B1D3}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Ámbito oscuro: mockups de dispositivos y texto sobre foto se ven
      igual en ambos temas (re-declaramos los tokens oscuros localmente) ── */
:root[data-theme-resolved="light"] :is(.op-media-card,.phone-outer,.music-card,.course-img-wrap){
  --bg:#050A16; --bg2:#08101F; --bg3:#0B1426; --white:#EAF1FB; --muted:#A9B8CE;
  --fg-rgb:234 241 251; --bg-rgb:5 10 22; --muted-rgb:169 184 206;
  --teal:#3CC6E3; --gold:#4F8DF7; --violet:#7C9CFF;
  color:#EAF1FB;
}

/* ── Páginas "Muy pronto": brillo + cuadrícula en lugar de foto a sangre completa ── */
.soon-hero{min-height:88vh!important}
.soon-bg{background:
  radial-gradient(45% 55% at 50% 30%,rgba(41,177,211,.20),transparent 70%),
  radial-gradient(40% 50% at 90% 85%,rgba(25,105,214,.18),transparent 70%),
  radial-gradient(35% 45% at 8% 80%,rgba(45,212,191,.10),transparent 70%)!important}
.soon-bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgb(var(--fg-rgb) / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--fg-rgb) / .05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 60% at 50% 45%,#000 30%,transparent 80%)}
.soon-inner::before{content:'';display:block;width:84px;height:84px;margin:0 auto 26px;border-radius:22px;background:url('../brand/cundasia-mark.png') center/72% no-repeat,radial-gradient(120% 120% at 30% 20%,#13233F 0%,#070E1C 70%);box-shadow:0 18px 40px -16px rgba(25,105,214,.55),inset 0 0 0 1px rgba(255,255,255,.07)}
.soon-glow{display:none}
.soon-h1{font-weight:500!important}

/* ── Tema claro: logo sin fondo oscuro ── */
[data-theme-resolved="light"] .nav-logo-img{background:transparent!important;box-shadow:none!important;padding:0!important}
[data-theme-resolved="light"] .logo-mark{background:transparent!important;box-shadow:none!important;border:0!important}
