/* ═══════════════════════════════════════════
       RESET & CSS VARIABLES
    ═══════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg-primary:   #07111F;
      --bg-secondary: #0D1E35;
      --bg-navy:      #0A2040;
      --accent-1:     #00D4FF;
      --accent-2:     #0EA5E9;
      --text-main:    #F0F8FF;
      --text-muted:   #8BA3C0;
      --glass:        rgba(14,35,65,0.55);
      --border:       rgba(0,212,255,0.15);
      --gradient-hero: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(14,165,233,0.08) 0%, transparent 70%), #07111F;
      --shadow-glow:  rgba(0,212,255,0.45);
      --theme-speed:  0.45s;
    }
    [data-theme="aurora"] {
      --bg-primary:#0D0A1E; --bg-secondary:#150E2E; --bg-navy:#1A0F3A;
      --accent-1:#A855F7; --accent-2:#EC4899;
      --text-main:#F5F0FF; --text-muted:#9D86C4;
      --glass:rgba(30,15,60,0.55); --border:rgba(168,85,247,0.2);
      --gradient-hero:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(168,85,247,0.1) 0%,transparent 70%),#0D0A1E;
      --shadow-glow:rgba(168,85,247,0.45);
    }
    [data-theme="solstice"] {
      --bg-primary:#0C1208; --bg-secondary:#141F0C; --bg-navy:#1A2A0E;
      --accent-1:#84CC16; --accent-2:#22C55E;
      --text-main:#F0FFF0; --text-muted:#86A878;
      --glass:rgba(20,31,12,0.6); --border:rgba(132,204,22,0.18);
      --gradient-hero:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(132,204,22,0.07) 0%,transparent 70%),#0C1208;
      --shadow-glow:rgba(132,204,22,0.4);
    }
    [data-theme="dusk"] {
      --bg-primary:#1A0A05; --bg-secondary:#261208; --bg-navy:#331808;
      --accent-1:#FB923C; --accent-2:#F97316;
      --text-main:#FFF7F0; --text-muted:#C4906A;
      --glass:rgba(38,18,8,0.6); --border:rgba(251,146,60,0.18);
      --gradient-hero:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(251,146,60,0.08) 0%,transparent 70%),#1A0A05;
      --shadow-glow:rgba(251,146,60,0.45);
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--bg-primary); color: var(--text-main);
      font-family: 'Inter', sans-serif; overflow-x: hidden;
      transition: background var(--theme-speed) ease, color var(--theme-speed) ease;
    }

    /* ═══════════════════════════════════════════
       THREE.JS CANVAS — fijo detrás de todo
    ═══════════════════════════════════════════ */
    #three-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;          /* debajo de todo el contenido */
      pointer-events: none;
      /* El canvas es transparente; el color de fondo viene del body */
    }

    /* ═══════════════════════════════════════════
       OVERLAY — sutil para mejorar legibilidad
       sobre las partículas en secciones de contenido
    ═══════════════════════════════════════════ */
    #page-overlay {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.5) 40%,
        rgba(0,0,0,0.6) 100%
      );
    }

    /* Todo el contenido visible por encima del canvas */
    #progress-bar, nav, #page-content {
      position: relative;
      z-index: 10;
    }

    /* ═══════════════════════════════════════════
       PROGRESS BAR
    ═══════════════════════════════════════════ */
    #progress-bar {
      position: fixed; top: 0; left: 0; height: 2px; z-index: 300;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      width: 0%; transition: width 0.1s linear, background var(--theme-speed) ease;
    }

    /* ═══════════════════════════════════════════
       NAV
    ═══════════════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      padding: 1.2rem 5%;
      background: rgba(7,17,31,0.8); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s, padding 0.3s, border-color var(--theme-speed) ease;
    }
    [data-theme="aurora"]   nav { background: rgba(13,10,30,0.85); }
    [data-theme="solstice"] nav { background: rgba(12,18,8,0.85); }
    [data-theme="dusk"]     nav { background: rgba(26,10,5,0.85); }
    nav.scrolled { padding: 0.8rem 5%; }
    [data-theme="aurora"]   nav.scrolled { background: rgba(13,10,30,0.97); }
    [data-theme="solstice"] nav.scrolled { background: rgba(12,18,8,0.97); }
    [data-theme="dusk"]     nav.scrolled { background: rgba(26,10,5,0.97); }
    html:not([data-theme]) nav.scrolled,
    [data-theme="cosmos"]   nav.scrolled { background: rgba(7,17,31,0.97); }

    .nav-logo {
      font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700;
      color:var(--text-main); text-decoration:none; letter-spacing:-0.02em;
      display:flex; align-items:center; gap:0.5rem; justify-self:start;
      transition: color var(--theme-speed) ease;
    }
    .logo-dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--accent-1); box-shadow:0 0 10px var(--accent-1);
      transition: background var(--theme-speed) ease, box-shadow var(--theme-speed) ease;
    }
    .logo-img { height:34px; width:auto; display:block; }
    .nav-links { display:flex; gap:2rem; list-style:none; }
    .nav-links a {
      color:var(--text-muted); text-decoration:none; font-size:0.9rem;
      font-weight:500; transition:color 0.25s; position:relative; padding-bottom:2px;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:-2px; left:0;
      width:0; height:1px; background:var(--accent-1);
      transition:width 0.3s ease, background var(--theme-speed) ease;
    }
    .nav-links a:hover, .nav-links a.active { color:var(--text-main); }
    .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
    .nav-cta {
      justify-self:end;
      padding:0.55rem 1.4rem; background:var(--accent-1); color:var(--bg-primary);
      border:none; border-radius:6px; font-family:'Space Grotesk',sans-serif;
      font-weight:600; font-size:0.9rem; cursor:pointer; text-decoration:none;
      transition:box-shadow 0.25s, transform 0.2s, background var(--theme-speed) ease, color var(--theme-speed) ease;
    }
    .nav-cta:hover { box-shadow:0 0 22px var(--shadow-glow); transform:translateY(-1px); }

    /* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
    #inicio {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; min-height:100vh; padding:140px 5% 50px;
      /* Sin background propio — el canvas Three.js es el fondo */
      background: transparent;
      position:relative; z-index:0; overflow:hidden;
    }
    /* Orbe sutil para reforzar el hero sin ocultar el canvas */
    #inicio::before {
      content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
      width:900px; height:900px; border-radius:50%;
      background:radial-gradient(circle, color-mix(in srgb,var(--accent-1) 4%,transparent) 0%,transparent 65%);
      animation:breathe 8s ease-in-out infinite; pointer-events:none;
      transition: background var(--theme-speed) ease;
    }
    @keyframes breathe {
      0%,100%{transform:translateX(-50%) scale(1);opacity:.5}
      50%{transform:translateX(-50%) scale(1.15);opacity:.9}
    }

    .hero-inner { position:relative; z-index:2; max-width:820px; width:100%; }
    .hero-eyebrow {
      display:inline-flex; align-items:center;
      font-size:0.8rem; font-weight:500; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--accent-1); margin-bottom:1.5rem;
      transition:color var(--theme-speed) ease;
    }
    .hero-title {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(2.6rem,5.5vw,4.8rem); font-weight:700;
      line-height:1.07; letter-spacing:-0.03em; margin-bottom:1.25rem;
    }
    .hero-title .highlight {
      background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .hero-sub {
      color:var(--text-muted); font-size:1.1rem; line-height:1.7;
      max-width:560px; margin:0 auto 2.5rem;
      transition:color var(--theme-speed) ease;
    }

    /* ═══════════════════════════════════════════
       THEME SELECTOR
    ═══════════════════════════════════════════ */
    .theme-selector { margin:0 auto 2.5rem; display:flex; flex-direction:column; align-items:center; gap:0.85rem; }
    .theme-selector-label {
      font-size:0.7rem; font-weight:600; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--text-muted);
      transition:color var(--theme-speed) ease;
    }
    .theme-cards { display:flex; gap:0.75rem; flex-wrap:nowrap; justify-content:center; }
    .theme-card {
      position:relative; cursor:pointer; border-radius:12px; padding:0.85rem 1.1rem;
      border:1.5px solid transparent; display:flex; align-items:center; gap:0.6rem;
      font-family:'Space Grotesk',sans-serif; font-size:0.82rem; font-weight:600;
      color:var(--text-main); background:var(--glass); backdrop-filter:blur(10px);
      transition:transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
      user-select:none; -webkit-tap-highlight-color:transparent; min-width:120px;
      text-decoration:none;
    }
    .theme-card:hover { transform:translateY(-3px); }
    .theme-card.active { border-color:var(--tc-accent); box-shadow:0 0 18px var(--tc-glow),inset 0 0 0 1px var(--tc-accent); }
    .theme-card::after { content:'✓'; position:absolute; top:6px; right:8px; font-size:0.65rem; opacity:0; color:var(--tc-accent); transition:opacity 0.2s ease; }
    .theme-card.active::after { opacity:1; }
    .tc-swatch { display:flex; gap:3px; }
    .tc-dot { width:10px; height:10px; border-radius:50%; }
    .theme-card[data-pick="cosmos"]  { --tc-accent:#00D4FF; --tc-glow:rgba(0,212,255,0.3); }
    .theme-card[data-pick="aurora"]  { --tc-accent:#A855F7; --tc-glow:rgba(168,85,247,0.3); }
    .theme-card[data-pick="solstice"]{ --tc-accent:#84CC16; --tc-glow:rgba(132,204,22,0.3); }
    .theme-card[data-pick="dusk"]    { --tc-accent:#FB923C; --tc-glow:rgba(251,146,60,0.3); }
    .tc-name { color:inherit; }
    .tc-tag { font-size:0.68rem; font-weight:400; color:var(--text-muted); display:block; margin-top:1px; }

    .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
    .btn-primary {
      padding:0.9rem 2rem; background:#00D4FF; color:#07111F;
      border:none; border-radius:99px; font-family:'Space Grotesk',sans-serif;
      font-weight:600; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block;
      transition:box-shadow 0.25s, transform 0.2s, background var(--theme-speed) ease, color var(--theme-speed) ease;
    }
    .btn-primary:hover { box-shadow:0 0 32px rgba(0,212,255,0.35); transform:translateY(-2px); }
    .btn-ghost {
      padding:0.9rem 2rem; background:transparent; color:var(--text-main);
      border:1px solid var(--border); border-radius:99px;
      font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1rem;
      cursor:pointer; text-decoration:none; display:inline-block;
      transition:border-color 0.25s, background 0.25s, color var(--theme-speed) ease, border var(--theme-speed) ease;
    }
    .btn-ghost:hover { border-color:var(--accent-1); background:rgba(0,212,255,0.06); }

    .site-menu-toggle {
      display: none;
      position: fixed; top: 0.75rem; left: 1rem; z-index: 260;
      width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border);
      background: rgba(7, 17, 31, 0.85); backdrop-filter: blur(12px);
      flex-direction: column; justify-content: center; gap: 5px;
      padding: 0 12px; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    }
    .site-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text-main); transition: transform 0.25s ease, opacity 0.25s ease; }
    .site-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-menu-toggle.open span:nth-child(2) { opacity: 0; }
    .site-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .site-menu-panel {
      display: none;
      position: fixed; top: 0.9rem; left: 0.9rem; z-index: 255;
      min-width: 220px; padding: 0.9rem; border-radius: 16px;
      border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(16px);
      box-shadow: 0 18px 44px rgba(0,0,0,0.25); flex-direction: column; gap: 0.45rem;
      opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .site-menu-toggle.open + .site-menu-panel,
    .site-menu-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .site-menu-link { color: var(--text-main); text-decoration: none; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.92rem; transition: background 0.2s ease, color 0.2s ease; }
    .site-menu-link:hover, .site-menu-link.active { background: rgba(0,212,255,0.12); color: var(--accent-1); }
    .site-menu-group { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .site-menu-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 0 0.75rem; }

    /* ═══════════════════════════════════════════
       SECTIONS
    ═══════════════════════════════════════════ */
    .section-wrap { padding:50px 5%; }
    .section-wrap-alt { padding:50px 5%; background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%); transition:background var(--theme-speed) ease; }
    .section-wrap-dark { padding:50px 5%; background:var(--bg-secondary); transition:background var(--theme-speed) ease; }
    .section-header { text-align:center; margin-bottom:3rem; }
    .section-eyebrow {
      display:inline-block; font-size:0.75rem; font-weight:600;
      letter-spacing:0.15em; text-transform:uppercase;
      color:var(--accent-1); margin-bottom:0.9rem;
      transition:color var(--theme-speed) ease;
    }
    .section-title {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(1.9rem,3.5vw,2.8rem); font-weight:700;
      letter-spacing:-0.03em; line-height:1.15;
    }
    .section-sub {
      color:var(--text-muted); font-size:1rem; margin-top:0.75rem;
      line-height:1.65; max-width:540px; margin-inline:auto;
      transition:color var(--theme-speed) ease;
    }

    /* ═══════════════════════════════════════════
       CONSTELLATION SERVICES — Aurora Star Map
    ═══════════════════════════════════════════ */
    .constellation-services {
      position:relative; width:100%; max-width:1200px; margin:0 auto; min-height:320px;
    }
    .cs-canvas {
      position:absolute; inset:0; width:100%; height:100%;
      pointer-events:none; overflow:visible;
    }
    .cs-line {
      stroke:rgba(0,212,255,0.18); stroke-width:1; fill:none;
      stroke-dasharray:400; stroke-dashoffset:400;
      transition:stroke 0.4s ease, stroke-width 0.4s ease, opacity 0.4s ease;
    }
    .cs-line.drawn { animation:drawLine 1.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    @keyframes drawLine { to { stroke-dashoffset:0; } }
    .cs-line.lit {
      stroke:rgba(0,212,255,0.72); stroke-width:1.5;
      filter:drop-shadow(0 0 4px rgba(0,212,255,0.5));
    }
    /* ── Layout en grid: 3 nodos arriba, 2 nodos abajo, ambos ordenados de izquierda a derecha ── */
    .cs-nodes {
      position:relative; width:100%;
      display:grid; grid-template-columns:repeat(6, 1fr);
      column-gap:1.5rem; row-gap:2.5rem;
    }
    .cs-node {
      position:relative !important;
      left:auto !important; top:auto !important;
      display:flex; flex-direction:column; align-items:center;
      cursor:default; max-width:200px; margin:0 auto;
    }
    .cs-node[data-node="0"] { grid-column:1 / 3; grid-row:1; }
    .cs-node[data-node="1"] { grid-column:3 / 5; grid-row:1; }
    .cs-node[data-node="2"] { grid-column:5 / 7; grid-row:1; }
    .cs-node[data-node="3"] { grid-column:2 / 4; grid-row:2; }
    .cs-node[data-node="4"] { grid-column:4 / 6; grid-row:2; }
    /* Estrella grande: 80px */
    .cs-star { position:relative; width:72px; height:72px; flex-shrink:0; margin-bottom:0.75rem; }
    .cs-star-halo {
      position:absolute; inset:-14px; border-radius:50%;
      background:radial-gradient(circle,rgba(0,212,255,0.09) 0%,transparent 70%);
      animation:starBreathe 4s ease-in-out infinite;
    }
    @keyframes starBreathe {
      0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.35);opacity:1}
    }
    .cs-star-ring {
      position:absolute; inset:6px; border-radius:50%;
      border:1.5px solid rgba(0,212,255,0.28);
      transition:border-color 0.4s ease, box-shadow 0.4s ease;
    }
    .cs-star-ring2 {
      position:absolute; inset:0; border-radius:50%;
      border:1px solid rgba(0,212,255,0.1);
      transition:border-color 0.4s ease;
    }
    /* Núcleo: inset 16px sobre 80px = 48px de diámetro */
    .cs-star-core {
      position:absolute; inset:16px; border-radius:50%;
      background:radial-gradient(circle at 36% 36%,
        rgba(255,255,255,0.95) 0%,
        rgba(120,220,255,0.85) 35%,
        rgba(0,180,255,0.7) 70%);
      box-shadow:
        0 0 10px rgba(0,212,255,0.9),
        0 0 28px rgba(0,212,255,0.55),
        0 0 60px rgba(0,212,255,0.2),
        inset 0 0 12px rgba(255,255,255,0.3);
      transition:box-shadow 0.4s ease, transform 0.4s ease;
      animation:coreGlow 4s ease-in-out infinite;
    }
    @keyframes coreGlow {
      0%,100%{box-shadow:0 0 10px rgba(0,212,255,0.9),0 0 28px rgba(0,212,255,0.55),0 0 60px rgba(0,212,255,0.2),inset 0 0 12px rgba(255,255,255,0.3)}
      50%    {box-shadow:0 0 18px rgba(0,212,255,1),0 0 44px rgba(0,212,255,0.8),0 0 90px rgba(0,212,255,0.32),inset 0 0 18px rgba(255,255,255,0.5)}
    }
    /* Icono más grande y brillante */
    .cs-star-icon {
      position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
    }
    .cs-star-icon svg {
      width:24px; height:24px; color:#fff; stroke-width:2;
      filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 10px rgba(0,212,255,0.9)) drop-shadow(0 0 20px rgba(0,212,255,0.5));
    }
    .cs-info {
      background:rgba(7,17,31,0.9); border:1px solid rgba(0,212,255,0.2);
      border-radius:14px; padding:1.1rem 1.25rem; backdrop-filter:blur(18px);
      width:190px; opacity:0; transform:translateY(6px) scale(0.97);
      transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s ease;
      pointer-events:none; position:relative; text-align:left;
    }
    .cs-info::before {
      content:''; position:absolute; top:0; left:16px; right:16px; height:1px;
      background:linear-gradient(90deg,transparent,rgba(0,212,255,0.6),transparent);
    }
    .cs-node-label {
      font-family:'Space Grotesk',sans-serif; font-size:0.72rem; font-weight:700;
      letter-spacing:0.1em; text-transform:uppercase; color:rgba(0,212,255,0.7); margin-bottom:0.3rem;
    }
    .cs-node-title {
      font-family:'Space Grotesk',sans-serif; font-size:0.98rem; font-weight:700;
      color:#F0F8FF; margin-bottom:0.55rem; line-height:1.25;
    }
    .cs-node-desc { font-size:0.79rem; color:rgba(176,200,224,0.85); line-height:1.6; margin-bottom:0.65rem; }
    .cs-node-tag {
      display:inline-flex; align-items:center; gap:0.3rem; font-size:0.68rem; font-weight:600;
      color:rgba(0,212,255,0.9); background:rgba(0,212,255,0.08);
      border:1px solid rgba(0,212,255,0.22); padding:0.22rem 0.65rem;
      border-radius:99px; letter-spacing:0.04em;
    }
    .cs-node-tag::before { content:'◈'; font-size:0.6rem; }
    .cs-index {
      position:absolute; top:-8px; right:-8px; width:22px; height:22px;
      border-radius:50%; background:rgba(0,212,255,0.15); border:1px solid rgba(0,212,255,0.5);
      font-family:'Space Grotesk',sans-serif; font-size:0.65rem; font-weight:700;
      color:rgba(0,212,255,0.95); display:flex; align-items:center; justify-content:center; z-index:3;
    }
    .cs-node:hover .cs-star-core {
      box-shadow:
        0 0 22px rgba(0,212,255,1),
        0 0 55px rgba(0,212,255,0.8),
        0 0 100px rgba(0,212,255,0.4),
        inset 0 0 20px rgba(255,255,255,0.5);
      transform:scale(1.12);
    }
    .cs-node:hover .cs-star-ring { border-color:rgba(0,212,255,0.7); box-shadow:0 0 20px rgba(0,212,255,0.35); }
    .cs-node:hover .cs-star-ring2 { border-color:rgba(0,212,255,0.25); }
    .cs-node:hover .cs-star-halo { animation:none; transform:scale(1.7); opacity:1; }
    .cs-node:hover .cs-info { opacity:1; transform:translateY(0) scale(1); border-color:rgba(0,212,255,0.38); pointer-events:auto; }
    .cs-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:24px; }
    .cs-particle {
      position:absolute; border-radius:50%; background:rgba(0,212,255,0.5);
      animation:particleDrift linear infinite;
    }
    @keyframes particleDrift {
      0%  {transform:translateY(0) translateX(0) scale(1);opacity:0}
      15% {opacity:1}
      85% {opacity:0.6}
      100%{transform:translateY(-80px) translateX(var(--px-drift,20px)) scale(0.4);opacity:0}
    }
    @media(max-width:768px){
      .constellation-services{min-height:unset;height:auto}
      .cs-canvas,.cs-particles{display:none}
      .cs-nodes{
        position:static; display:flex; flex-direction:column;
        gap:1.1rem; padding:0 0.25rem;
      }
      .cs-node{
        position:static!important; flex-direction:row; align-items:flex-start;
        gap:0.9rem; background:rgba(14,35,65,0.5); border:1px solid rgba(0,212,255,0.15);
        border-radius:16px; padding:1.1rem; backdrop-filter:blur(12px);
        max-width:none; margin:0;
      }
      .cs-star{width:56px;height:56px;flex-shrink:0;margin-bottom:0}
      .cs-info{
        opacity:1!important; transform:none!important; width:auto; flex:1;
        background:transparent; border:none; padding:0; backdrop-filter:none; pointer-events:auto;
      }
      .cs-info::before{display:none}
      .cs-star-halo{display:none}
    }

    /* ═══════════════════════════════════════════
       CTA BANNER
    ═══════════════════════════════════════════ */
    .cta-banner {
      max-width:1200px; margin:3rem auto 0;
      background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 12%,var(--bg-navy)),color-mix(in srgb,var(--accent-2) 8%,var(--bg-secondary)));
      border:1px solid color-mix(in srgb,var(--accent-1) 25%,transparent);
      border-radius:20px; padding:3rem 3.5rem;
      display:flex; align-items:center; justify-content:space-between; gap:2rem;
      flex-wrap:wrap; position:relative; overflow:hidden;
      transition:background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .cta-banner::before {
      content:''; position:absolute; right:-80px; top:-80px;
      width:320px; height:320px; border-radius:50%;
      background:radial-gradient(circle,color-mix(in srgb,var(--accent-1) 8%,transparent),transparent 65%);
      pointer-events:none;
    }
    .cta-banner-text h3 {
      font-family:'Space Grotesk',sans-serif; font-size:clamp(1.4rem,2.5vw,1.9rem);
      font-weight:700; letter-spacing:-0.02em; margin-bottom:0.6rem;
    }
    .cta-banner-text p { color:var(--text-muted); font-size:0.95rem; line-height:1.6; max-width:460px; transition:color var(--theme-speed) ease; }
    .cta-banner-actions { display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap; }

    /* ═══════════════════════════════════════════
       TECH HIGHLIGHT
    ═══════════════════════════════════════════ */
    .tech-highlight-row {
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:1.25rem; max-width:1200px; margin:0 auto;
    }
    .tech-highlight-card {
      background:var(--glass); border:1px solid var(--border);
      border-radius:16px; padding:1.75rem; backdrop-filter:blur(12px);
      display:flex; gap:1.25rem; align-items:flex-start;
      flex:1 1 280px; max-width:380px;
      transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s, background var(--theme-speed) ease;
    }
    .tech-highlight-card:hover {
      transform:translateY(-8px) scale(1.032);
      box-shadow:0 20px 44px rgba(0,0,0,0.4), 0 0 24px color-mix(in srgb,var(--accent-1) 16%,transparent);
      border-color:color-mix(in srgb,var(--accent-1) 50%,transparent);
    }
    .th-icon {
      flex-shrink:0; width:52px; height:52px; border-radius:12px;
      background:color-mix(in srgb,var(--accent-1) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--accent-1) 20%,transparent);
      display:flex; align-items:center; justify-content:center;
      transition:background var(--theme-speed) ease;
    }
    .th-icon svg { width:24px; height:24px; }
    .th-title { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:600; margin-bottom:0.45rem; }
    .th-desc { font-size:0.85rem; color:var(--text-muted); line-height:1.65; transition:color var(--theme-speed) ease; }

    /* ═══════════════════════════════════════════
       TECH STRIP
    ═══════════════════════════════════════════ */
    .tech-strip {
      max-width:1200px; margin:2.5rem auto 0;
      display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
    }
    .tech-item {
      background:var(--glass); border:1px solid var(--border);
      border-radius:12px; padding:1.25rem 1rem;
      display:flex; flex-direction:column; align-items:center; gap:0.5rem;
      flex:1 1 150px; max-width:190px; text-align:center;
      transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s, background var(--theme-speed) ease;
    }
    .tech-item:hover {
      border-color:color-mix(in srgb,var(--accent-1) 55%,transparent);
      transform:translateY(-7px) scale(1.07);
      box-shadow:0 14px 32px rgba(0,0,0,0.35), 0 0 18px color-mix(in srgb,var(--accent-1) 20%,transparent);
    }
    .tech-icon { width:44px; height:44px; border-radius:10px; background:color-mix(in srgb,var(--accent-1) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent-1) 20%,transparent); display:flex; align-items:center; justify-content:center; transition:background var(--theme-speed) ease; }
    .tech-icon svg { width:26px; height:26px; }
    .tech-name { font-family:'Space Grotesk',sans-serif; font-size:0.85rem; font-weight:600; }
    .tech-label { font-size:0.72rem; color:var(--text-muted); transition:color var(--theme-speed) ease; }

    /* ═══════════════════════════════════════════
       FAQ
    ═══════════════════════════════════════════ */
    .faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:0.75rem; }
    .faq-item {
      background:var(--glass); border:1px solid var(--border);
      border-radius:12px; overflow:hidden; backdrop-filter:blur(8px);
      transition:border-color 0.3s, background var(--theme-speed) ease;
    }
    .faq-item:hover { border-color:color-mix(in srgb,var(--accent-1) 35%,transparent); }
    .faq-q {
      width:100%; background:none; border:none; cursor:pointer;
      padding:1.1rem 1.4rem; display:flex; align-items:center; justify-content:space-between;
      font-family:'Space Grotesk',sans-serif; font-size:0.95rem; font-weight:600;
      color:var(--text-main); text-align:left; gap:1rem;
      transition:color var(--theme-speed) ease;
    }
    .faq-arrow {
      width:22px; height:22px; border-radius:50%; flex-shrink:0;
      background:color-mix(in srgb,var(--accent-1) 12%,transparent);
      border:1px solid color-mix(in srgb,var(--accent-1) 25%,transparent);
      display:flex; align-items:center; justify-content:center; color:var(--accent-1);
      transition:transform 0.25s ease, background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .faq-arrow svg { width:12px; height:12px; transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1); }
    .faq-q:hover .faq-arrow { transform:scale(1.12); }
    .faq-item.open .faq-arrow { background:var(--accent-1); border-color:var(--accent-1); color:var(--bg-primary); }
    .faq-item.open .faq-arrow svg { transform:rotate(180deg); }
    .faq-a {
      max-height:0; overflow:hidden; padding:0 1.4rem;
      font-size:0.88rem; color:var(--text-muted); line-height:1.7;
      transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s ease, color var(--theme-speed) ease;
    }
    .faq-item.open .faq-a { max-height:200px; padding:0 1.4rem 1.1rem; }

    /* ═══════════════════════════════════════════
       FINAL CTA
    ═══════════════════════════════════════════ */
    .final-cta {
      text-align:center; padding:50px 5%;
      background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);
      position:relative; overflow:hidden; transition:background var(--theme-speed) ease;
    }
    .final-cta::before {
      content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:600px; height:600px; border-radius:50%;
      background:radial-gradient(circle,color-mix(in srgb,var(--accent-1) 5%,transparent),transparent 65%);
      pointer-events:none;
    }
    .final-cta-inner { position:relative; z-index:2; max-width:640px; margin:0 auto; }
    .final-cta h2 {
      font-family:'Space Grotesk',sans-serif;
      font-size:clamp(2rem,4vw,3.2rem); font-weight:700;
      letter-spacing:-0.03em; line-height:1.12; margin-bottom:1rem;
    }
    .final-cta p { color:var(--text-muted); font-size:1rem; line-height:1.7; margin-bottom:2.25rem; transition:color var(--theme-speed) ease; }
    .final-cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

    /* ═══════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════ */
    .page-footer {
      background:var(--bg-secondary); border-top:1px solid var(--border);
      padding:2rem 5%; display:flex; justify-content:space-between;
      align-items:center; flex-wrap:wrap; gap:1rem;
      transition:background var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .footer-logo {
      font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700;
      color:var(--text-main); text-decoration:none; letter-spacing:-0.02em;
      display:flex; align-items:center; gap:0.5rem;
    }
    .page-footer p { color:var(--text-muted); font-size:0.8rem; }
    .footer-links { display:flex; gap:1.5rem; }
    .footer-links a { color:var(--text-muted); text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
    .footer-links a:hover { color:var(--accent-1); }

    /* ═══════════════════════════════════════════
       NOVOVERT LOGO SVG
    ═══════════════════════════════════════════ */
    .novovert-reveal {
      margin-bottom:1.4rem; margin-top:0.1rem;
      pointer-events:none; user-select:none;
      display:flex; justify-content:center; width:100%;
    }
    .nv-svg { width:min(490px,88vw); height:auto; overflow:visible; }
    .nv-svg.nv-done { animation:nv-shimmer 4s ease-in-out infinite; }
    @keyframes nv-shimmer {
      0%,100% { filter:drop-shadow(0 0 0px transparent); }
      50%      { filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent-1) 60%,transparent)); }
    }
    .nv-glyph path, .nv-glyph rect {
      stroke-dasharray:1; stroke-dashoffset:1;
      transition:stroke-dashoffset 0.7s cubic-bezier(0.65,0,0.35,1);
      transition-delay:calc(0.4s + var(--gi) * 0.18s);
    }
    .nv-svg.nv-drawing .nv-glyph path,
    .nv-svg.nv-drawing .nv-glyph rect { stroke-dashoffset:0; }

    /* ═══════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════ */
    .fade-up { opacity:0; transform:translateY(50px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .fade-up.in-view { opacity:1; transform:none; }
    .slide-left  { opacity:0; transform:translateX(-50px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .slide-right { opacity:0; transform:translateX(50px);  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .slide-left.in-view, .slide-right.in-view { opacity:1; transform:none; }
    .stagger > * {
      opacity:0; transform:translateY(36px) rotateX(-10deg); transform-origin:bottom center;
      transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .stagger.in-view > * { opacity:1; transform:none; }

    .icon-draw { color:var(--accent-1); transition:color 0.6s cubic-bezier(0.65,0,0.35,1); }
    .icon-draw path, .icon-draw line, .icon-draw circle,
    .icon-draw rect, .icon-draw polygon, .icon-draw ellipse {
      stroke-dasharray:1; stroke-dashoffset:1;
      transition:stroke-dashoffset 0.9s cubic-bezier(0.65,0,0.35,1);
    }
    .in-view .icon-draw path, .in-view .icon-draw line, .in-view .icon-draw circle,
    .in-view .icon-draw rect, .in-view .icon-draw polygon, .in-view .icon-draw ellipse {
      stroke-dashoffset:0;
    }
    .service-card:hover .icon-draw, .tech-highlight-card:hover .icon-draw, .tech-item:hover .icon-draw {
      color:color-mix(in srgb,var(--accent-1) 55%,white 45%);
    }
    .service-card:hover .service-icon, .tech-highlight-card:hover .th-icon, .tech-item:hover .tech-icon {
      background:color-mix(in srgb,var(--accent-1) 18%,transparent);
      border-color:color-mix(in srgb,var(--accent-1) 45%,transparent);
    }

    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
    @media(max-width:900px){
      .cta-banner { flex-direction:column; text-align:center; padding:2.5rem 2rem; }
      .cta-banner-text p { margin:0 auto; }
    }
    @media(max-width:700px){
      .theme-cards { flex-wrap:wrap; gap:0.6rem; }
      .theme-card { min-width:0; flex:1 1 calc(50% - 0.35rem); justify-content:center; padding:0.75rem 0.8rem; }
    }
    @media(max-width:420px){
      .theme-card { flex:1 1 100%; }
    }
    @media(max-width:600px){
      nav {
        justify-content: center;
        padding: 1rem 1rem;
      }
      .nav-links { display:none; }
      .nav-cta { display:none; }
      .nav-logo { margin: 0 auto; }
      .site-menu-toggle { display:flex; }
      .site-menu-panel { display:flex; top: calc(1rem + 4.4rem); }
      .hero-actions { flex-direction:column; align-items:center; }
      .final-cta-actions { flex-direction:column; align-items:center; }
    }
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none !important;transition-duration:0.01ms !important}
    }

    /* ═══════════════════════════════════════════
       HERO — PANELES HOLOGRÁFICOS FLOTANTES
    ═══════════════════════════════════════════ */
    .holo-field { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:visible; }
    .holo-card {
      position:absolute; pointer-events:auto;
      display:flex; flex-direction:column; gap:0.15rem;
      padding:0.85rem 1.2rem; border-radius:14px;
      background:linear-gradient(160deg, color-mix(in srgb,var(--accent-1) 10%,var(--glass)), var(--glass));
      border:1px solid color-mix(in srgb,var(--accent-1) 35%,var(--border));
      backdrop-filter:blur(14px) saturate(140%);
      box-shadow:0 8px 32px rgba(0,0,0,0.35), inset 0 0 0 1px color-mix(in srgb,var(--accent-1) 12%,transparent);
      animation:holoFloat 7s ease-in-out infinite;
      transition:border-color var(--theme-speed) ease, transform 0.4s ease, box-shadow 0.4s ease;
      will-change:transform;
    }
    .holo-card:hover { box-shadow:0 8px 40px rgba(0,0,0,0.4), 0 0 26px var(--shadow-glow); }
    .holo-card .holo-num {
      font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700;
      background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      letter-spacing:-0.02em;
    }
    .holo-card .holo-label { font-size:0.68rem; font-weight:500; letter-spacing:0.04em; color:var(--text-muted); text-transform:uppercase; transition:color var(--theme-speed) ease; }
    .holo-1{ top:8%;  left:2%;  animation-delay:0s; }
    .holo-2{ top:14%; right:1%; animation-delay:1.4s; }
    .holo-3{ bottom:18%; left:4%; animation-delay:2.7s; }
    .holo-4{ bottom:10%; right:3%; animation-delay:0.9s; }
    @keyframes holoFloat { 0%,100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(0,-14px,0) rotate(0.4deg); } }
    @media(max-width:900px){
      .holo-card { padding:0.6rem 0.85rem; transform:scale(0.78); }
      .holo-card .holo-num { font-size:1.2rem; }
      .holo-1{ top:4%; left:1%; } .holo-2{ top:9%; right:0%; }
      .holo-3{ bottom:30%; left:1%; } .holo-4{ bottom:22%; right:0%; }
    }
    @media(max-width:600px){ .holo-field{ display:none; } }

    /* ÓRBITAS ALREDEDOR DEL LOGO */
    .logo-orbits { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; }
    .logo-orbits svg { width:min(720px,140vw); height:auto; opacity:0.55; }
    .orbit-ring { fill:none; stroke:var(--accent-1); stroke-opacity:0.18; transition:stroke var(--theme-speed) ease; }
    .orbit-ring.r2 { stroke:var(--accent-2); stroke-opacity:0.12; }
    .orbit-spin1 { animation:orbitSpin 38s linear infinite; transform-origin:center; }
    .orbit-spin2 { animation:orbitSpin 54s linear infinite reverse; transform-origin:center; }
    .orbit-spin3 { animation:orbitSpin 70s linear infinite; transform-origin:center; }
    @keyframes orbitSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
    .orbit-particle { fill:var(--accent-1); filter:drop-shadow(0 0 5px var(--accent-1)); }

    /* NARRATIVA */
    .narrative-section { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8rem 5%; text-align:center; }
    .narrative-eyebrow { font-size:0.8rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-1); margin-bottom:1.6rem; transition:color var(--theme-speed) ease; }
    .narrative-line {
      font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.025em;
      font-size:clamp(1.7rem,4.6vw,3.6rem); line-height:1.18; max-width:920px;
      color:var(--text-muted); margin:0.4rem 0;
      opacity:0; transform:translateY(28px) scale(0.97);
      transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1), color var(--theme-speed) ease;
    }
    .narrative-line.in-view { opacity:1; transform:none; }
    .narrative-line .nx { color:var(--text-main); }
    .narrative-line .nx-accent { background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .narrative-spacer { height:3vh; }

    /* TRANSFORMACIÓN */
    .transform-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; max-width:980px; margin:0 auto; align-items:stretch; }
    .transform-col { border-radius:20px; padding:2.2rem 1.9rem; backdrop-filter:blur(12px); display:flex; flex-direction:column; gap:1rem; transition:transform 0.4s ease, background var(--theme-speed) ease, border-color var(--theme-speed) ease; }
    .transform-before { background:linear-gradient(160deg, rgba(255,70,70,0.06), var(--glass)); border:1px solid rgba(255,90,90,0.22); }
    .transform-after { background:linear-gradient(160deg, color-mix(in srgb,var(--accent-1) 14%,transparent), var(--glass)); border:1px solid color-mix(in srgb,var(--accent-1) 35%,transparent); }
    .transform-before:hover, .transform-after:hover { transform:translateY(-6px); }
    .transform-heading { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:0.4rem; }
    .transform-before .transform-heading { color:#FF6B6B; }
    .transform-after .transform-heading { color:var(--accent-1); transition:color var(--theme-speed) ease; }
    .transform-row { display:flex; align-items:center; gap:0.7rem; font-size:0.95rem; color:var(--text-muted); transition:color var(--theme-speed) ease; padding:0.55rem 0; border-bottom:1px solid color-mix(in srgb, var(--text-muted) 12%, transparent); }
    .transform-row:last-child { border-bottom:none; }
    .transform-row .t-icon { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; }
    .transform-before .t-icon { background:rgba(255,90,90,0.16); color:#FF6B6B; }
    .transform-after .t-icon { background:color-mix(in srgb,var(--accent-1) 18%,transparent); color:var(--accent-1); transition:color var(--theme-speed) ease, background var(--theme-speed) ease; }
    .transform-arrow { display:flex; align-items:center; justify-content:center; }
    .transform-arrow svg { width:38px; height:38px; color:var(--accent-1); filter:drop-shadow(0 0 10px var(--shadow-glow)); transition:color var(--theme-speed) ease; animation:arrowPulse 2.4s ease-in-out infinite; }
    @keyframes arrowPulse { 0%,100%{ transform:translateX(0); opacity:0.7;} 50%{ transform:translateX(6px); opacity:1;} }
    @media(max-width:760px){ .transform-grid { grid-template-columns:1fr; } .transform-arrow svg { transform:rotate(90deg); } }

    /* SERVICIOS ORBITALES */
    .orbital-wrap { position:relative; max-width:1000px; aspect-ratio:1/1; margin:2rem auto 0; display:flex; align-items:center; justify-content:center; }
    .orbital-core {
      position:absolute; width:110px; height:110px; border-radius:50%; z-index:5;
      display:flex; align-items:center; justify-content:center; text-align:center;
      background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--accent-1) 30%,var(--bg-navy)), var(--bg-navy));
      border:1px solid color-mix(in srgb,var(--accent-1) 50%,transparent);
      box-shadow:0 0 50px var(--shadow-glow), inset 0 0 20px color-mix(in srgb,var(--accent-1) 25%,transparent);
      font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.95rem; letter-spacing:-0.02em;
      transition:box-shadow var(--theme-speed) ease, border-color var(--theme-speed) ease;
    }
    .orbital-ring-track { position:absolute; border-radius:50%; border:1px dashed color-mix(in srgb,var(--accent-1) 22%,transparent); transition:border-color var(--theme-speed) ease; }
    .ring-1 { width:48%; height:48%; } .ring-2 { width:78%; height:78%; } .ring-3 { width:100%; height:100%; }
    .orbit-layer { position:absolute; inset:0; animation:orbitSpin linear infinite; }
    .orbit-layer.l1 { animation-duration:46s; }
    .orbit-layer.l2 { animation-duration:64s; animation-direction:reverse; }
    .orbit-layer.l3 { animation-duration:84s; }
    .orbit-node {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:96px; padding:0.8rem 0.5rem; border-radius:14px; text-align:center;
      background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(10px);
      cursor:pointer; animation:orbitSpin linear infinite reverse; animation-duration:inherit;
      transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      pointer-events:auto;
    }
    .orbit-node:hover { transform:translate(-50%,-50%) scale(1.18); box-shadow:0 0 28px var(--shadow-glow); border-color:var(--accent-1); z-index:6; background:color-mix(in srgb,var(--accent-1) 14%,var(--glass)); }
    .orbit-node .on-icon { width:26px; height:26px; margin:0 auto 0.35rem; color:var(--accent-1); transition:color var(--theme-speed) ease; }
    .orbit-node .on-name { font-size:0.75rem; font-weight:600; font-family:'Space Grotesk',sans-serif; }
    .orbit-node .on-detail {
      position:absolute; top:108%; left:50%; transform:translate(-50%,4px);
      width:190px; padding:0.7rem 0.85rem; border-radius:10px; font-size:0.74rem; line-height:1.4;
      color:var(--text-muted); background:var(--bg-navy); border:1px solid var(--border);
      opacity:0; pointer-events:none; transition:opacity 0.25s ease, transform 0.25s ease; z-index:10;
    }
    .orbit-node:hover .on-detail { opacity:1; transform:translate(-50%,8px); pointer-events:auto; }
    .l1 .orbit-node:nth-child(1){ top:2%; left:50%; } .l1 .orbit-node:nth-child(2){ top:50%; left:98%; } .l1 .orbit-node:nth-child(3){ top:98%; left:50%; }
    .l2 .orbit-node:nth-child(1){ top:11%; left:11%; } .l2 .orbit-node:nth-child(2){ top:11%; left:89%; }
    .l3 .orbit-node:nth-child(1){ top:50%; left:0%; } .l3 .orbit-node:nth-child(2){ top:89%; left:89%; }
    @media(max-width:760px){
      .orbital-wrap { max-width:100%; aspect-ratio:auto; height:640px; }
      .orbit-node { width:80px; padding:0.6rem 0.4rem; }
      .orbit-node .on-detail { width:150px; font-size:0.68rem; }
    }

    /* CONSTELACIÓN TECNOLÓGICA */
    .constellation { position:relative; max-width:980px; margin:2.5rem auto 0; padding:2rem 1rem; }
    .constellation svg { width:100%; height:auto; display:block; }
    .const-line { stroke:var(--accent-1); stroke-opacity:0.28; stroke-width:1.4; stroke-dasharray:4 6; transition:stroke var(--theme-speed) ease; }
    .const-node-circle { fill:var(--bg-navy); stroke:var(--accent-1); stroke-width:1.6; transition:stroke var(--theme-speed) ease; }
    .const-node-glow { fill:var(--accent-1); opacity:0.85; transition:fill var(--theme-speed) ease; animation:constPulse 2.6s ease-in-out infinite; }
    @keyframes constPulse { 0%,100%{ opacity:0.5; } 50%{ opacity:1; } }
    .const-label { fill:var(--text-main); font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; }
    .const-sub { fill:var(--text-muted); font-size:10.5px; }

    /* CASOS DE ÉXITO */
    .cases-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; max-width:1200px; margin:0 auto; }
    .case-card {
      position:relative; flex:1 1 320px; max-width:380px; border-radius:18px; overflow:hidden;
      background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(12px);
      transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease, background var(--theme-speed) ease;
    }
    .case-card:hover { transform:translateY(-10px); box-shadow:0 28px 60px rgba(0,0,0,0.45), 0 0 30px var(--shadow-glow); border-color:color-mix(in srgb,var(--accent-1) 45%,transparent); }
    .case-mock { height:170px; position:relative; overflow:hidden; background:linear-gradient(150deg, color-mix(in srgb,var(--accent-1) 16%,var(--bg-navy)), var(--bg-navy)); display:flex; align-items:center; justify-content:center; }
    .case-mock::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, color-mix(in srgb,var(--accent-1) 26%,transparent), transparent 60%); }
    .case-mock-bars { position:relative; z-index:2; display:flex; align-items:flex-end; gap:6px; height:60px; }
    .case-mock-bars span { display:block; width:10px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--accent-1),var(--accent-2)); opacity:0.85; }
    .case-body { padding:1.5rem 1.6rem; }
    .case-name { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:0.3rem; }
    .case-result { color:var(--accent-1); font-size:0.85rem; font-weight:600; margin-bottom:0.9rem; transition:color var(--theme-speed) ease; }
    .case-meta { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:0.76rem; color:var(--text-muted); transition:color var(--theme-speed) ease; }
    .case-meta span { display:flex; align-items:center; gap:0.35rem; }
    .case-meta b { color:var(--text-main); font-weight:600; }

    /* ═══════════════════════════════════════════
       PROCESO — SLIDER INMERSIVO DE UNA ETAPA
    ═══════════════════════════════════════════ */
    .process-slider { position:relative; max-width:1200px; margin:0 auto; }
    .process-viewport { overflow:hidden; border-radius:28px; }
    .process-track-v2 {
      display:flex; width:100%;
      overflow-x:auto; scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
      scrollbar-width:none;
    }
    .process-track-v2::-webkit-scrollbar { display:none; }
    .process-slide {
      flex:0 0 100%; scroll-snap-align:center;
      position:relative; min-height:640px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:2.5rem 1.5rem 3rem;
      border-radius:28px; overflow:hidden;
      background:linear-gradient(160deg,color-mix(in srgb,var(--accent-1) 6%,var(--bg-navy)) 0%,var(--bg-secondary) 100%);
      border:1px solid var(--border);
    }
    .process-bgnum {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
      font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1;
      font-size:min(38vw,360px); opacity:0.05; color:var(--text-main);
      letter-spacing:-0.04em; pointer-events:none; z-index:0; user-select:none;
      transition:opacity 0.4s ease;
    }
    .process-illustration {
      position:relative; z-index:1; width:min(74vw,420px); height:min(74vw,420px);
      max-height:420px; margin-bottom:1.4rem;
      display:flex; align-items:center; justify-content:center;
    }
    .process-illustration svg { width:100%; height:100%; overflow:visible; }
    .process-slide-eyebrow {
      position:relative; z-index:1; font-family:'Space Grotesk',sans-serif; font-size:0.75rem;
      font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
      color:var(--accent-1); margin-bottom:0.6rem; opacity:0.85;
    }
    .process-slide-title {
      position:relative; z-index:1; font-family:'Space Grotesk',sans-serif; font-weight:700;
      font-size:clamp(1.5rem,3.6vw,2.1rem); margin-bottom:0.7rem; color:var(--text-main);
    }
    .process-slide-desc {
      position:relative; z-index:1; color:var(--text-muted); font-size:0.98rem; line-height:1.7;
      max-width:440px; transition:color var(--theme-speed) ease;
    }
    .process-nav {
      display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.6rem;
    }
    .process-arrow {
      width:42px; height:42px; border-radius:50%; flex-shrink:0;
      background:var(--glass); border:1px solid var(--border); color:var(--text-main);
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      font-size:1.2rem; transition:border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
    }
    .process-arrow:hover { border-color:var(--accent-1); transform:translateY(-2px); }
    .process-arrow:disabled { opacity:0.3; cursor:default; transform:none; }
    .process-dots { display:flex; gap:0.55rem; }
    .process-dot {
      width:8px; height:8px; border-radius:50%; background:var(--border); border:none;
      cursor:pointer; padding:0; transition:background 0.3s ease, transform 0.3s ease, width 0.3s ease;
    }
    .process-dot.active { background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); width:24px; border-radius:99px; }
    .process-hint { text-align:center; font-size:0.78rem; color:var(--text-muted); margin-top:1.1rem; opacity:0.7; }

    /* ── Ilustraciones animadas por etapa ── */
    .pi-spin { animation:piSpin 14s linear infinite; transform-origin:center; }
    .pi-spin-slow { animation:piSpin 22s linear infinite; transform-origin:center; }
    .pi-spin-rev { animation:piSpinRev 18s linear infinite; transform-origin:center; }
    @keyframes piSpin { to { transform:rotate(360deg); } }
    @keyframes piSpinRev { to { transform:rotate(-360deg); } }
    .pi-breathe { animation:piBreathe 3.2s ease-in-out infinite; transform-origin:center; }
    @keyframes piBreathe { 0%,100%{transform:scale(1);opacity:0.9} 50%{transform:scale(1.08);opacity:1} }
    .pi-twinkle { animation:piTwinkle 2.4s ease-in-out infinite; }
    .pi-twinkle:nth-child(2n) { animation-delay:0.6s; }
    .pi-twinkle:nth-child(3n) { animation-delay:1.1s; }
    @keyframes piTwinkle { 0%,100%{opacity:0.15;transform:scale(0.7)} 50%{opacity:1;transform:scale(1.15)} }
    .pi-draw { stroke-dasharray:240; stroke-dashoffset:240; animation:piDraw 3.6s ease-in-out infinite; }
    @keyframes piDraw { 0%{stroke-dashoffset:240} 45%,55%{stroke-dashoffset:0} 100%{stroke-dashoffset:-240} }
    .pi-rise { animation:piRise 2.6s ease-in-out infinite; }
    @keyframes piRise { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
    .pi-bar { animation:piBar 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom; }
    .pi-bar:nth-child(2) { animation-delay:0.25s; }
    .pi-bar:nth-child(3) { animation-delay:0.5s; }
    .pi-bar:nth-child(4) { animation-delay:0.75s; }
    @keyframes piBar { 0%,100%{transform:scaleY(0.55)} 50%{transform:scaleY(1)} }
    .pi-pulse-ring { animation:piPulseRing 2.6s ease-out infinite; transform-origin:center; }
    @keyframes piPulseRing { 0%{transform:scale(0.85);opacity:0.9} 100%{transform:scale(1.5);opacity:0} }
    .pi-flame { animation:piFlame 0.5s ease-in-out infinite alternate; transform-origin:center top; }
    @keyframes piFlame { 0%{transform:scaleY(0.85) scaleX(0.95)} 100%{transform:scaleY(1.15) scaleX(1.05)} }
    .pi-smoke { animation:piSmoke 2.4s ease-out infinite; }
    .pi-smoke:nth-child(2) { animation-delay:0.5s; }
    .pi-smoke:nth-child(3) { animation-delay:1s; }
    @keyframes piSmoke { 0%{transform:translateY(0) scale(0.6);opacity:0.6} 100%{transform:translateY(28px) scale(1.4);opacity:0} }
    .pi-launch { animation:piLaunch 4s ease-in infinite; }
    @keyframes piLaunch { 0%,70%{transform:translateY(0)} 100%{transform:translateY(-18px)} }
    @media (prefers-reduced-motion:reduce) {
      .pi-spin,.pi-spin-slow,.pi-spin-rev,.pi-breathe,.pi-twinkle,.pi-draw,.pi-rise,.pi-bar,.pi-pulse-ring,.pi-flame,.pi-smoke,.pi-launch { animation:none; }
    }
    @media(max-width:640px){
      .process-slide { min-height:520px; padding:2.2rem 1.1rem 2.4rem; }
      .process-illustration { width:min(80vw,280px); height:min(80vw,280px); }
    }

    /* FAQ — CÁPSULAS FLOTANTES */
    .faq-list { display:flex; flex-direction:column; gap:0.9rem; max-width:760px; margin:0 auto; }
    .faq-item {
      border-radius:18px; background:var(--glass); border:1px solid var(--border);
      backdrop-filter:blur(12px); overflow:hidden;
      transition:border-color 0.35s ease, background var(--theme-speed) ease, box-shadow 0.35s ease, transform 0.3s ease;
    }
    .faq-item:hover { transform:translateY(-3px); }
    .faq-item.open { border-color:color-mix(in srgb,var(--accent-1) 50%,transparent); box-shadow:0 0 30px color-mix(in srgb,var(--accent-1) 18%,transparent); }
    .faq-q {
      width:100%; text-align:left; background:none; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
      padding:1.3rem 1.6rem; font-family:'Inter',sans-serif; font-size:0.98rem; font-weight:500;
      color:var(--text-main);
    }
    .faq-arrow svg { width:18px; height:18px; color:var(--accent-1); transition:transform 0.4s cubic-bezier(0.65,0,0.35,1), color var(--theme-speed) ease; flex-shrink:0; }
    .faq-item.open .faq-arrow svg { transform:rotate(180deg); }
    .faq-a {
      max-height:0; opacity:0; overflow:hidden; padding:0 1.6rem;
      color:var(--text-muted); font-size:0.9rem; line-height:1.7;
      transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, padding 0.4s ease, color var(--theme-speed) ease;
    }
    .faq-item.open .faq-a { max-height:240px; opacity:1; padding:0 1.6rem 1.5rem; }

    /* CTA FINAL — PORTAL LUMINOSO */
    .final-cta { position:relative; isolation:isolate; }
    .portal-ring {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      border-radius:50%; border:1px solid color-mix(in srgb,var(--accent-1) 30%,transparent);
      pointer-events:none; z-index:0; animation:portalSpin linear infinite;
    }
    .portal-ring.p1 { width:320px; height:320px; animation-duration:30s; }
    .portal-ring.p2 { width:480px; height:480px; animation-duration:46s; animation-direction:reverse; border-style:dashed; }
    .portal-ring.p3 { width:640px; height:640px; animation-duration:64s; opacity:0.5; }
    @keyframes portalSpin { from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
    .portal-core {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:520px; height:520px; border-radius:50%; z-index:0; pointer-events:none;
      background:radial-gradient(circle, color-mix(in srgb,var(--accent-1) 16%,transparent) 0%, transparent 70%);
      animation:breathe 6s ease-in-out infinite;
    }
    @media(max-width:700px){
      .portal-ring.p1{width:220px;height:220px;} .portal-ring.p2{width:320px;height:320px;} .portal-ring.p3{width:420px;height:420px;}
      .portal-core{width:340px;height:340px;}
    }