/* ═══════════════════════════════════════════════════════════════════════════
   ULTRA / AGENTES DE IA — DESIGN SYSTEM V2 ULTRA CHAROL PREMIUM
   Paleta sólida, materiales render, acabados type Unreal Engine 5
   ─────────────────────────────────────────────────────────────────────────
   Filosofía: colores SÓLIDOS y saturados, NO pasteles ni semitransparentes
   como base. Las superficies tienen profundidad real. Cada card, botón,
   marco es un MATERIAL, no solo un color plano.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Marca / Logo lockup (CSS — siempre carga) ── */
.brand-lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-spiral-mark{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:18px;color:#fff;
    background:conic-gradient(from 0deg,#00E5FF,#00BCD4,#00897B,#6C63FF,#B388FF,#E91E8C,#FFD740,#00E5FF);
    box-shadow:0 0 16px rgba(0,229,255,.5),0 0 34px rgba(108,99,255,.4),inset 0 0 9px rgba(255,255,255,.32);
    flex-shrink:0;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.brand-lockup:hover .brand-spiral-mark{transform:rotate(180deg) scale(1.06)}
.brand-wordmark{font-family:'Orbitron','Rajdhani',sans-serif;font-weight:800;font-size:1.28rem;letter-spacing:.01em;line-height:1;
    background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#00E5FF;color:#00E5FF;white-space:nowrap}
.brand-wordmark .brand-ia{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#8A5BFF;color:#8A5BFF}
.brand-lockup-lg .brand-spiral-mark{width:52px;height:52px;font-size:24px}
.brand-lockup-lg .brand-wordmark{font-size:1.7rem}
@media (max-width:420px){ .ultra-nav .brand-wordmark{font-size:1.05rem} }

:root {
    /* ── Paleta OFICIAL AI-SOLUTIONS · UltrAgentes-IA ── */
    --u-cyan:     #00E5FF;  /* cian neón */
    --u-cyan-dk:  #00BCD4;  /* cian medio */
    --u-cyan-xdk: #00897B;  /* teal */
    --u-violet:   #6C63FF;  /* índigo IA */
    --u-violet-2: #B388FF;  /* púrpura claro */
    --u-violet-dk:#5145d6;  /* violeta profundo */
    --u-magenta:  #E91E8C;  /* magenta/pink */
    --u-mag-dk:   #9C27B0;
    --u-gold:     #FFD740;  /* oro */
    --u-gold-dk:  #FFC107;  /* ámbar */
    --u-orange:   #FF6B35;  /* naranja */
    --u-orange-dk:#F7931E;
    --u-green:    #25D366;  /* whatsapp/verde */
    --u-blue:     #448AFF;  /* azul */
    --u-teal:     #00897B;
    --u-aqua:     #00E5FF;
    --u-silver:   #F4F7FB;  /* nácar */
    --u-silver-2: #E2E8F0;  /* plata */
    --u-white:    #F4F7FB;
    --u-indigo:   #0a1628;

    /* ── Fondos profundos AI-SOLUTIONS ── */
    --u-bg:       #030712;
    --u-bg-2:     #061018;
    --u-bg-3:     #0a1628;
    --u-bg-4:     #0d1f33;
    --u-bg-5:     #13294a;

    /* ── Superficies charol sólidas ── */
    --u-surface-1: #111827;  /* tarjetas base */
    --u-surface-2: #1A2540;  /* tarjetas hover */
    --u-surface-3: #1F2D4E;  /* tarjetas activas */
    --u-surface-4: #0D1627;  /* más oscura */

    /* ── Texto ── */
    --u-text:      #E8EEFC;
    --u-text-dim:  #8B9EC8;
    --u-text-muted:#4D5E80;

    /* ── Bordes sólidos precisos ── */
    --u-border:        rgba(0, 229, 255, 0.18);
    --u-border-strong: rgba(108, 99, 255, 0.45);
    --u-border-cyan:   rgba(0, 229, 255, 0.35);
    --u-border-cyan-2: rgba(0, 229, 255, 0.65);
    --u-border-gold:   rgba(255, 215, 64, 0.45);
    --u-border-hot:    rgba(0, 229, 255, 0.9);

    /* ── Gradientes oficiales UltrAgentes-IA ── */
    --u-grad-primary: linear-gradient(135deg, #00E5FF 0%, #00BCD4 40%, #00897B 100%);
    --u-grad-cool:    linear-gradient(135deg, #00E5FF 0%, #448AFF 50%, #6C63FF 100%);
    --u-grad-fire:    linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FFD740 100%);
    --u-grad-violet:  linear-gradient(135deg, #B388FF 0%, #6C63FF 100%);
    --u-grad-gold:    linear-gradient(135deg, #FFD740 0%, #FFC107 100%);
    --u-grad-logo:    linear-gradient(90deg, #00E5FF 0%, #E91E8C 50%, #FFD740 100%);
    --u-grad-aqua:    linear-gradient(135deg, #00E5FF 0%, #00897B 100%);
    --u-grad-pink:    linear-gradient(135deg, #E91E8C 0%, #9C27B0 100%);
    --u-grad-teal:    linear-gradient(135deg, #00BCD4 0%, #009688 100%);

    /* ── Charol sólido de superficie ── */
    --u-grad-card: linear-gradient(
        160deg,
        #1A2540 0%,
        #0F1A35 50%,
        #0C1228 100%
    );
    --u-grad-card-hover: linear-gradient(
        160deg,
        #1F2D50 0%,
        #162040 50%,
        #0F1835 100%
    );
    --u-grad-card-featured: linear-gradient(
        145deg,
        #1D1060 0%,
        #160E48 35%,
        #0D1228 70%,
        #070B1C 100%
    );

    /* ── Charol brillante top ── */
    --u-sheen: linear-gradient(180deg,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0.04) 40%,
        rgba(255,255,255,0) 100%
    );
    --u-sheen-strong: linear-gradient(180deg,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.06) 40%,
        rgba(255,255,255,0) 100%
    );

    /* ── Sombras volumétricas ── */
    --u-shadow-sm:    0 2px 8px rgba(0,0,0,0.5);
    --u-shadow-md:    0 8px 28px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    --u-shadow-lg:    0 20px 60px rgba(0,0,0,0.65), 0 6px 20px rgba(0,0,0,0.45);
    --u-shadow-xl:    0 32px 80px rgba(0,0,0,0.7), 0 10px 30px rgba(0,0,0,0.5);
    --u-shadow-cyan:  0 0 16px rgba(0,229,255,0.5), 0 0 40px rgba(0,229,255,0.25), 0 8px 24px rgba(0,0,0,0.5);
    --u-shadow-violet:0 0 20px rgba(124,77,255,0.55), 0 0 50px rgba(124,77,255,0.28), 0 10px 30px rgba(0,0,0,0.5);
    --u-shadow-gold:  0 0 18px rgba(255,215,64,0.5), 0 0 40px rgba(255,107,53,0.3), 0 8px 24px rgba(0,0,0,0.5);
    --u-shadow-glow:  0 0 50px rgba(0,229,255,0.3), 0 0 100px rgba(124,77,255,0.2);
    --u-shadow-card:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 16px 40px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.4);

    /* ── Radios ── */
    --u-r-xs: 6px;
    --u-r-sm: 10px;
    --u-r-md: 14px;
    --u-r-lg: 20px;
    --u-r-xl: 28px;
    --u-r-2xl:36px;
    --u-r-pill: 999px;

    /* ── Tipografías ── */
    --u-font-display: 'Orbitron', sans-serif;
    --u-font-ui:      'Rajdhani', sans-serif;
    --u-font-body:    'Inter', system-ui, sans-serif;
    --u-font-mono:    'JetBrains Mono', monospace;

    /* ── Transiciones ── */
    --u-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --u-ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --u-ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
    --u-t-fast: 0.18s;
    --u-t:      0.32s;
    --u-t-slow: 0.6s;

    /* ── Layout ── */
    --u-container: 1280px;
    --u-container-narrow: 860px;
    --u-nav-h: 76px;

    /* Espaciado */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
    --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--u-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--u-text);
    background: var(--u-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: rgba(0,229,255,0.25); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--u-bg-2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--u-cyan), var(--u-violet));
    border-radius: var(--u-r-pill);
    border: 2px solid var(--u-bg-2);
}

/* ─── Containers ─── */
.container { width:100%; max-width:var(--u-container); margin:0 auto; padding:0 var(--s5); }
.container-narrow { max-width:var(--u-container-narrow); }

/* ─── Utilidades ─── */
/* Acentos sólidos (sin gradiente de texto) */
.text-gradient {
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: #00E5FF; color: #00E5FF;
}
.text-gradient-fire {
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: #FF6B35; color: #FF6B35;
}
.text-cyan { color: var(--u-cyan); }
.text-violet { color: var(--u-violet-2); }
.text-gold { color: var(--u-gold); }
.hide-mobile { display: inline-flex; }

/* ════════════════════════════════════════════════════
   FONDO CINEMATOGRÁFICO SÓLIDO
   ════════════════════════════════════════════════════ */
.cosmos-bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background: radial-gradient(ellipse 140% 100% at 50% 0%,
        #0F1A38 0%, #070B1C 50%, #03060E 100%);
}
.cosmos-gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 1100px 700px at 15% 5%,  rgba(0,229,255,0.10),  transparent 55%),
        radial-gradient(ellipse 900px 600px  at 85% 20%, rgba(124,77,255,0.13), transparent 55%),
        radial-gradient(ellipse 800px 500px  at 50% 85%, rgba(224,64,251,0.08), transparent 55%);
}
.cosmos-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 20%, transparent 75%);
}
.cosmos-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: 0.35;
    animation: orbFloat 18s ease-in-out infinite;
}
.cosmos-orb-1 { width:520px;height:520px;top:-130px;left:-130px; background:radial-gradient(circle,#00B8D4,transparent 70%); }
.cosmos-orb-2 { width:580px;height:580px;top:25%;right:-180px; background:radial-gradient(circle,#5E35B1,transparent 70%); animation-delay:-7s; }
.cosmos-orb-3 { width:440px;height:440px;bottom:5%;left:28%; background:radial-gradient(circle,#AD1457,transparent 70%); animation-delay:-13s; }
@keyframes orbFloat {
    0%,100%{ transform:translate(0,0) scale(1); }
    33%    { transform:translate(45px,-35px) scale(1.08); }
    66%    { transform:translate(-30px,45px) scale(0.93); }
}
#particle-canvas { position:absolute;inset:0;width:100%;height:100%; }
.cosmos-noise {
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.035; mix-blend-mode:overlay;
}

/* ════════════════════════════════════════════════════
   NAVBAR PREMIUM SÓLIDO
   ════════════════════════════════════════════════════ */
.ultra-nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:var(--u-nav-h);
    background: linear-gradient(180deg, rgba(3,6,14,0.85), rgba(3,6,14,0.5));
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid transparent;
    transition: all var(--u-t) var(--u-ease);
}
.ultra-nav.scrolled {
    background: rgba(7,11,28,0.95);
    border-bottom: 1px solid var(--u-border-cyan);
    box-shadow: 0 4px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(0,229,255,0.15);
}
.ultra-nav-inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--s5); height:100%;
}

/* Marca con logo imagen */
.ultra-brand {
    display:flex; align-items:center; gap:var(--s3); flex-shrink:0;
}
.ultra-brand-logo {
    width:44px; height:44px;
    object-fit:contain;
    filter: drop-shadow(0 0 10px rgba(0,229,255,0.5)) drop-shadow(0 0 22px rgba(124,77,255,0.4));
    transition: transform var(--u-t) var(--u-ease), filter var(--u-t) var(--u-ease);
}
.ultra-brand:hover .ultra-brand-logo {
    transform: scale(1.12) rotate(-5deg);
    filter: drop-shadow(0 0 18px rgba(0,229,255,0.8)) drop-shadow(0 0 36px rgba(124,77,255,0.6));
}
.ultra-brand-text {
    display:inline-flex; align-items:baseline;
    font-family:var(--u-font-display);
    font-size:1.18rem; font-weight:800; letter-spacing:0.02em; line-height:1;
}
.brand-ultra {
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    -webkit-text-fill-color:#EAF2FF; color:#EAF2FF;
}
.brand-agentes {
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    -webkit-text-fill-color:#00E5FF; color:#00E5FF;
}
.brand-slash {
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    -webkit-text-fill-color:#8A5BFF; color:#8A5BFF;
    margin-left:2px; font-weight:700;
}
@media (max-width:560px){ .ultra-brand-text{ display:none; } }

/* Nav menu */
.ultra-nav-menu { display:flex; align-items:center; gap:var(--s2); }
.nav-link {
    position:relative; padding:8px 14px;
    font-family:var(--u-font-ui);
    font-size:0.95rem; font-weight:600; letter-spacing:0.02em;
    color:var(--u-text-dim); border-radius:var(--u-r-sm);
    transition:all var(--u-t-fast) var(--u-ease);
}
.nav-link::after {
    content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    width:0; height:2px; background:var(--u-grad-primary);
    border-radius:2px; transition:width var(--u-t) var(--u-ease);
}
.nav-link:hover { color:var(--u-text); background:rgba(0,229,255,0.06); }
.nav-link:hover::after { width:50%; }

.ultra-nav-actions { display:flex; align-items:center; gap:var(--s3); }

.nav-toggle {
    display:none; width:44px; height:44px; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    border-radius:var(--u-r-sm); background:var(--u-surface-1);
    border:1px solid var(--u-border);
}
.nav-toggle span { display:block; width:20px; height:2px; background:var(--u-text); border-radius:2px; transition:all var(--u-t) var(--u-ease); }
.nav-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════════════
   SISTEMA DE BOTONES CHAROL SÓLIDO
   ════════════════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:var(--s2); padding:12px 22px;
    font-family:var(--u-font-ui);
    font-size:1rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; border-radius:var(--u-r-pill);
    cursor:pointer; transition:all var(--u-t) var(--u-ease);
    position:relative; overflow:hidden; white-space:nowrap;
    border:1px solid transparent;
}
.btn i { font-size:0.9em; }
.btn-sm  { padding:9px 16px; font-size:0.82rem; }
.btn-lg  { padding:16px 30px; font-size:1.05rem; }
.btn-xl  { padding:18px 36px; font-size:1.1rem; }
.btn-block { width:100%; }

/* Shimmer effect */
.btn::after {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition:left 0.55s var(--u-ease);
}
.btn:hover::after { left:100%; }

/* PRIMARY — cyan sólido charol */
.btn-primary {
    background: #8A5BFF;
    color: #fff;
    border-color: #8A5BFF;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -2px 0 rgba(0,0,0,0.35),
        0 0 20px rgba(0,229,255,0.5),
        0 0 45px rgba(0,229,255,0.25),
        0 6px 20px rgba(0,0,0,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-primary::before {
    content:''; position:absolute; inset:0;
    background:var(--u-sheen-strong); pointer-events:none;
}
.btn-primary:hover {
    background: #7A47F5;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(0,0,0,0.35),
        0 0 30px rgba(0,229,255,0.7),
        0 0 60px rgba(0,229,255,0.4),
        0 8px 28px rgba(0,0,0,0.5);
    transform:translateY(-3px);
}
.btn-primary:active { transform:translateY(0); }

/* VIOLET — violeta sólido charol */
.btn-violet {
    background: #8A5BFF;
    color: #fff;
    border-color: #8A5BFF;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -2px 0 rgba(0,0,0,0.35),
        0 0 20px rgba(124,77,255,0.5),
        0 6px 20px rgba(0,0,0,0.4);
}
.btn-violet::before { content:''; position:absolute; inset:0; background:var(--u-sheen); pointer-events:none; }
.btn-violet:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 0 30px rgba(124,77,255,0.7),
        0 8px 28px rgba(0,0,0,0.5);
    transform:translateY(-3px);
}

/* GLASS — vidrio premium sólido */
.btn-glass {
    background: rgba(22, 32, 60, 0.8);
    color: var(--u-text);
    border: 1px solid var(--u-border-strong);
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 4px 16px rgba(0,0,0,0.4);
}
.btn-glass:hover {
    background: rgba(30, 45, 80, 0.9);
    border-color: var(--u-border-cyan-2);
    color: var(--u-cyan);
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 20px rgba(0,229,255,0.2),
        0 8px 24px rgba(0,0,0,0.5);
}

/* GHOST */
.btn-ghost {
    background: transparent;
    color: var(--u-text-dim);
    border: 1px solid var(--u-border);
}
.btn-ghost:hover {
    background: rgba(22,32,60,0.6);
    color: var(--u-text);
    border-color: var(--u-border-strong);
}

/* GOLD — dorado sólido charol */
.btn-gold {
    background: #E8C66B;
    color: #3a2a05;
    border-color: #E8C66B;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -2px 0 rgba(0,0,0,0.3),
        0 0 20px rgba(255,215,64,0.5),
        0 6px 20px rgba(0,0,0,0.4);
    font-weight:800;
}
.btn-gold::before { content:''; position:absolute; inset:0; background:var(--u-sheen-strong); pointer-events:none; }
.btn-gold:hover {
    box-shadow: 0 0 35px rgba(255,215,64,0.7), 0 8px 28px rgba(0,0,0,0.5);
    transform:translateY(-3px);
}

/* WHATSAPP */
.btn-whatsapp {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 0 20px rgba(37,211,102,0.4),
        0 6px 20px rgba(0,0,0,0.4);
}
.btn-whatsapp::before { content:''; position:absolute; inset:0; background:var(--u-sheen); pointer-events:none; }
.btn-whatsapp:hover { transform:translateY(-3px); box-shadow:0 0 30px rgba(37,211,102,0.6); }

/* ════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════ */
.hero {
    position:relative; min-height:100vh;
    padding:calc(var(--u-nav-h) + var(--s8)) 0 var(--s9);
    display:flex; align-items:center;
}
.hero-grid {
    display:grid; grid-template-columns:1.1fr 1fr;
    gap:var(--s8); align-items:center;
}
.hero-content { position:relative; z-index:2; }

.hero-badge {
    display:inline-flex; align-items:center; gap:var(--s2);
    padding:8px 18px; margin-bottom:var(--s5);
    background: var(--u-surface-1);
    border:1px solid var(--u-border-cyan);
    border-radius:var(--u-r-pill);
    font-family:var(--u-font-mono); font-size:0.78rem; font-weight:500;
    color:var(--u-cyan); letter-spacing:0.06em;
    box-shadow: 0 0 20px rgba(0,229,255,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-badge-dot {
    width:8px; height:8px; border-radius:50%; background:var(--u-cyan);
    box-shadow:0 0 10px var(--u-cyan), 0 0 22px var(--u-cyan);
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.55;transform:scale(0.8)} }

.hero-title {
    font-family:var(--u-font-display);
    font-size:clamp(2.5rem,5.5vw,5rem);
    line-height:1.01; font-weight:900; letter-spacing:-0.02em;
    margin-bottom:var(--s5);
}
.hero-title span { display:block; }
.hero-line-1 { color:var(--u-silver); }
.hero-line-3 { color:var(--u-text-dim); }

.hero-subtitle {
    font-size:clamp(1rem,1.4vw,1.2rem);
    color:var(--u-text-dim); margin-bottom:var(--s6);
    max-width:560px; line-height:1.68;
}
.hero-subtitle strong { color:var(--u-text); font-weight:700; }
.hero-subtitle em {
    font-style:normal;
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    -webkit-text-fill-color:#00E5FF; color:#00E5FF;
    font-weight:700;
}

.hero-actions { display:flex; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s7); }

/* Métricas */
.hero-metrics {
    display:flex; align-items:center; gap:var(--s5);
    padding-top:var(--s5);
    border-top:1px solid var(--u-border);
}
.metric { display:flex; flex-direction:column; align-items:flex-start; }
.metric-val-wrap { display:flex; align-items:baseline; gap:2px; }
.metric-value {
    font-family:var(--u-font-display);
    font-size:2.1rem; font-weight:900; line-height:1;
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    -webkit-text-fill-color:#EAF1FF; color:#EAF1FF;
}
.metric-unit { font-family:var(--u-font-display); font-size:1.2rem; font-weight:700; color:var(--u-violet-2); }
.metric-label {
    font-size:0.72rem; color:var(--u-text-muted); text-transform:uppercase;
    letter-spacing:0.1em; margin-top:3px;
}
.metric-divider { width:1px; height:42px; background:linear-gradient(180deg,transparent,var(--u-border-strong),transparent); }

/* Visual hero */
.hero-visual { position:relative; perspective:1600px; }
.hero-visual-frame {
    position:relative; aspect-ratio:3/4; border-radius:var(--u-r-xl); overflow:hidden;
    background: var(--u-grad-card);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 0 0 1px var(--u-border-cyan),
        0 0 40px rgba(124,77,255,0.2),
        0 30px 70px rgba(0,0,0,0.65);
    transition:transform 0.6s var(--u-ease);
    transform-style:preserve-3d;
}
.hero-android {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top;
    animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
    0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}
}

/* Esquinas HUD sólidas */
.hero-corner {
    position:absolute; width:30px; height:30px;
    border:2px solid var(--u-cyan); z-index:3;
    box-shadow:0 0 14px rgba(0,229,255,0.7), inset 0 0 8px rgba(0,229,255,0.2);
}
.hero-corner-tl{top:14px;left:14px;border-right:none;border-bottom:none;border-top-left-radius:6px;}
.hero-corner-tr{top:14px;right:14px;border-left:none;border-bottom:none;border-top-right-radius:6px;}
.hero-corner-bl{bottom:14px;left:14px;border-right:none;border-top:none;border-bottom-left-radius:6px;}
.hero-corner-br{bottom:14px;right:14px;border-left:none;border-top:none;border-bottom-right-radius:6px;}

/* HUD Cards flotantes sólidas */
.hud-card {
    position:absolute; background:var(--u-surface-1);
    border:1px solid var(--u-border-cyan);
    border-radius:var(--u-r-md); padding:12px 16px; z-index:4;
    font-family:var(--u-font-mono); font-size:0.78rem;
    animation:hudFloat 4s ease-in-out infinite; min-width:145px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 20px rgba(0,229,255,0.2),
        0 12px 28px rgba(0,0,0,0.55);
}
.hud-card-label { color:var(--u-text-muted); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:4px; }
.hud-card-value { font-family:var(--u-font-display); font-size:1.4rem; font-weight:700; color:var(--u-cyan); line-height:1; }
.hud-card-row { display:flex; align-items:center; gap:8px; color:var(--u-text-dim); padding:2px 0; }
.hud-card-row i { color:var(--u-cyan); }
.hud-card-1{top:12%;left:-9%;animation-delay:0s;}
.hud-card-2{top:48%;right:-11%;animation-delay:-1.5s;}
.hud-card-3{bottom:12%;left:-7%;animation-delay:-3s;}
@keyframes hudFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.hud-bar { margin-top:6px; height:4px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; border:1px solid rgba(0,229,255,0.2); }
.hud-bar-fill { height:100%; background:var(--u-grad-primary); border-radius:4px; box-shadow:0 0 10px var(--u-cyan); }
.hud-pulse { position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--u-cyan); box-shadow:0 0 14px var(--u-cyan); animation:pulse 1.5s ease-in-out infinite; }

/* Scroll hint */
.hero-scroll-hint { position:absolute; bottom:var(--s5); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:0.65rem; color:var(--u-text-muted); letter-spacing:0.22em; text-transform:uppercase; }
.scroll-line { width:1px; height:40px; background:linear-gradient(180deg,var(--u-cyan),transparent); animation:scrollDown 2s ease-in-out infinite; }
@keyframes scrollDown { 0%{height:0;opacity:0} 50%{opacity:1} 100%{height:40px;opacity:0} }

/* Trust strip */
.trust-strip { padding:var(--s5) 0; border-top:1px solid var(--u-border); border-bottom:1px solid var(--u-border); background:var(--u-surface-4); }
.trust-label { text-align:center; font-size:0.72rem; color:var(--u-text-muted); text-transform:uppercase; letter-spacing:0.16em; margin-bottom:var(--s4); font-family:var(--u-font-mono); }
.trust-marquee { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.trust-track { display:flex; gap:var(--s7); animation:marquee 30s linear infinite; width:max-content; }
.trust-item { display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--u-font-display); font-size:1rem; font-weight:700; color:var(--u-text-dim); white-space:nowrap; letter-spacing:0.03em; }
.trust-item i { color:var(--u-cyan); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Secciones base */
.section { padding:var(--s9) 0; position:relative; }
.section-dark { background:rgba(4,7,18,0.5); }
.section-head { text-align:center; max-width:760px; margin:0 auto var(--s8); }

.section-eyebrow {
    display:inline-flex; align-items:center; gap:var(--s2);
    padding:6px 16px; margin-bottom:var(--s4);
    background: var(--u-surface-1);
    border:1px solid var(--u-border-strong);
    border-radius:var(--u-r-pill);
    font-family:var(--u-font-mono); font-size:0.72rem; font-weight:600;
    color:var(--u-violet-2); text-transform:uppercase; letter-spacing:0.12em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 16px rgba(124,77,255,0.12);
}
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--u-violet-2); box-shadow:0 0 8px var(--u-violet-2); }
.section-eyebrow.center { margin-left:auto; margin-right:auto; }

.section-title {
    font-family:var(--u-font-display);
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1.08; font-weight:900; letter-spacing:-0.015em;
    color:var(--u-silver); margin-bottom:var(--s4);
}
.section-lead {
    font-size:clamp(1rem,1.3vw,1.18rem); color:var(--u-text-dim);
    line-height:1.68; max-width:640px; margin:0 auto;
}

/* Reveal animation */
[data-reveal] { opacity:0; transform:translateY(32px); transition:opacity 0.85s var(--u-ease-out),transform 0.85s var(--u-ease-out); }
[data-reveal].in { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════════
   MEDIA QUERIES
   ════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    .hero-grid { grid-template-columns:1fr; gap:var(--s7); }
    .hero-visual { max-width:520px; margin:0 auto; }
    .ultra-nav-menu { display:none; }
}
@media (max-width:768px) {
    :root { --u-nav-h:64px; }
    .hero { padding:calc(var(--u-nav-h) + var(--s6)) 0 var(--s7); min-height:auto; }
    .section { padding:var(--s8) 0; }
    .section-head { margin-bottom:var(--s6); }
    .nav-toggle { display:flex; }
    .hud-card { font-size:0.7rem; padding:8px 12px; min-width:115px; }
    .hud-card-1{left:4px;top:4%;} .hud-card-2{right:4px;} .hud-card-3{left:4px;bottom:4%;}
    .container { padding:0 var(--s4); }
    .hero-actions .btn { padding:14px 22px; }
    .hero-metrics { flex-wrap:wrap; gap:var(--s3); }
    .metric-divider { display:none; }
    .metric-value { font-size:1.7rem; }
    .ultra-nav-menu {
        position:fixed; top:var(--u-nav-h); left:0; right:0;
        flex-direction:column; gap:0; padding:var(--s4);
        background:rgba(7,11,28,0.98); backdrop-filter:blur(20px);
        border-bottom:1px solid var(--u-border-cyan);
        transform:translateY(-100%); opacity:0; pointer-events:none;
        transition:all var(--u-t) var(--u-ease);
    }
    .ultra-nav-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; display:flex; }
    .ultra-nav-menu .nav-link { width:100%; padding:14px 16px; border-bottom:1px solid var(--u-border); }
    .hide-mobile { display:none; }
}
@media (max-width:480px) {
    .hero-title { font-size:2.2rem; }
    .hero-actions { flex-direction:column; align-items:stretch; }
    .hero-actions .btn { width:100%; }
    .section-title { font-size:1.9rem; }
}

/* ════════════════════════════════════════════════════
   LOGO IMAGEN EN NAVBAR — CHAROL PREMIUM
   ════════════════════════════════════════════════════ */
.nav-logo-img {
    height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(0,229,255,0.45))
        drop-shadow(0 0 20px rgba(124,77,255,0.35))
        brightness(1.1);
    transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), filter 0.3s;
}
.nav-logo-img:hover {
    transform: scale(1.08);
    filter:
        drop-shadow(0 0 14px rgba(0,229,255,0.7))
        drop-shadow(0 0 35px rgba(124,77,255,0.55))
        brightness(1.2);
}
.footer-logo-img {
    height: 64px;
    margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════
   GALERÍA DE ROBOTS — ULTRA CHAROL PREMIUM
   ════════════════════════════════════════════════════ */
.robot-gallery-section {
    padding: var(--s10) 0;
    position: relative;
    overflow: hidden;
}
.robot-gallery-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,229,255,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 50%, rgba(124,77,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.robot-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
    margin-top: var(--s7);
}

/* Card base */
.robot-card {
    position: relative;
    border-radius: var(--u-r-lg);
    overflow: hidden;
    background: linear-gradient(
        160deg,
        #131A30 0%,
        #0D1424 50%,
        #08101E 100%
    );
    border: 1px solid rgba(124,77,255,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 20px 50px rgba(0,0,0,0.6),
        0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.4s, border-color 0.4s;
    cursor: pointer;
    /* Efecto charol */
    background-image:
        linear-gradient(
            160deg,
            #131A30 0%,
            #0D1424 50%,
            #08101E 100%
        );
}
/* Brillo top charol */
.robot-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.02) 50%,
        transparent 100%
    );
    border-radius: var(--u-r-lg) var(--u-r-lg) 0 0;
    z-index: 2;
    pointer-events: none;
}

.robot-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0,229,255,0.45);
}

/* Glows por color */
.robot-card-glow {
    position: absolute;
    inset: 0;
    border-radius: var(--u-r-lg);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 1;
}
.robot-card:hover .robot-card-glow { opacity: 1; }
.robot-glow-cyan {
    box-shadow: 0 0 40px rgba(0,229,255,0.25), inset 0 0 30px rgba(0,229,255,0.05);
    background: radial-gradient(ellipse at center, rgba(0,229,255,0.06) 0%, transparent 70%);
}
.robot-glow-blue {
    box-shadow: 0 0 40px rgba(29,100,255,0.3), inset 0 0 30px rgba(29,100,255,0.06);
    background: radial-gradient(ellipse at center, rgba(29,100,255,0.07) 0%, transparent 70%);
}
.robot-glow-teal {
    box-shadow: 0 0 40px rgba(29,233,182,0.25), inset 0 0 30px rgba(29,233,182,0.05);
    background: radial-gradient(ellipse at center, rgba(29,233,182,0.06) 0%, transparent 70%);
}
.robot-glow-violet {
    box-shadow: 0 0 40px rgba(124,77,255,0.3), inset 0 0 30px rgba(124,77,255,0.06);
    background: radial-gradient(ellipse at center, rgba(124,77,255,0.07) 0%, transparent 70%);
}
.robot-glow-gold {
    box-shadow: 0 0 40px rgba(255,215,64,0.25), inset 0 0 30px rgba(255,215,64,0.05);
    background: radial-gradient(ellipse at center, rgba(255,215,64,0.06) 0%, transparent 70%);
}

/* Card imagen */
.robot-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1);
    position: relative;
    z-index: 1;
}
.robot-card:hover img { transform: scale(1.06); }

/* Card featured — más grande */
.robot-card-featured {
    grid-column: span 2;
}
.robot-card-featured img {
    height: 380px;
}

/* Card wide */
.robot-card-wide {
    grid-column: span 2;
}
.robot-card-wide img {
    height: 320px;
    object-position: center center;
}

/* Info del robot */
.robot-card-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(
        0deg,
        rgba(3,6,14,0.95) 0%,
        rgba(7,11,28,0.85) 50%,
        transparent 100%
    );
    z-index: 3;
    transform: translateY(4px);
    transition: transform 0.3s;
}
.robot-card:hover .robot-card-info { transform: translateY(0); }

.robot-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--u-r-pill);
    font-family: var(--u-font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(124,77,255,0.2));
    border: 1px solid rgba(0,229,255,0.35);
    color: var(--u-cyan);
    margin-bottom: 6px;
    box-shadow: 0 0 10px rgba(0,229,255,0.15);
}
.robot-badge-blue {
    background: linear-gradient(135deg, rgba(29,100,255,0.2), rgba(0,100,255,0.15));
    border-color: rgba(29,100,255,0.4);
    color: #4DB6FF;
    box-shadow: 0 0 10px rgba(29,100,255,0.2);
}
.robot-badge-teal {
    background: linear-gradient(135deg, rgba(29,233,182,0.2), rgba(0,229,255,0.15));
    border-color: rgba(29,233,182,0.4);
    color: var(--u-aqua);
    box-shadow: 0 0 10px rgba(29,233,182,0.2);
}
.robot-badge-violet {
    background: linear-gradient(135deg, rgba(124,77,255,0.25), rgba(179,136,255,0.15));
    border-color: rgba(124,77,255,0.45);
    color: var(--u-violet-2);
    box-shadow: 0 0 10px rgba(124,77,255,0.2);
}
.robot-badge-gold {
    background: linear-gradient(135deg, rgba(255,215,64,0.2), rgba(255,107,53,0.15));
    border-color: rgba(255,215,64,0.4);
    color: var(--u-gold);
    box-shadow: 0 0 10px rgba(255,215,64,0.2);
}

.robot-card-info h3 {
    font-family: var(--u-font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--u-silver);
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}
.robot-card-info p {
    font-size: 0.78rem;
    color: var(--u-text-dim);
}

/* Responsive galería */
@media (max-width: 1024px) {
    .robot-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .robot-gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .robot-card-featured,
    .robot-card-wide {
        grid-column: span 2;
    }
    .robot-card img,
    .robot-card-featured img,
    .robot-card-wide img {
        height: 200px;
    }
    .nav-logo-img { height: 40px; }
}

/* ════════════════════════════════════════════════════
   MEJORAS BOTONES CHAROL ULTRA SÓLIDO
   ════════════════════════════════════════════════════ */
.btn-primary {
    position: relative;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.2) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 1;
}
.btn-primary > * { position: relative; z-index: 2; }

/* Botón gold con sheen charol superior */
.btn-gold {
    position: relative;
}
.btn-gold::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.32) 0%,
        rgba(255,255,255,0.05) 45%,
        transparent 55%
    );
    pointer-events: none;
    z-index: 1;
}
.btn-gold > * { position: relative; z-index: 2; }

/* ════════════════════════════════════════════════════
   V4.0 — LIGHTBOX UNIVERSAL DE PREVIEW
   ════════════════════════════════════════════════════ */
body.lb-locked { overflow: hidden; }

.lightbox-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
}
.lightbox-overlay.open {
    opacity: 1; pointer-events: auto;
}
.lightbox-backdrop {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(3,6,14,.88) 0%, rgba(0,0,0,.96) 70%),
        rgba(0,0,0,.6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.lightbox-close {
    position: absolute; top: 22px; right: 22px;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(224,64,251,.18), rgba(124,77,255,.18));
    border: 1px solid rgba(224,64,251,.5);
    color: var(--u-white, #F4F8FF);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px;
    transition: transform .25s, background .25s, box-shadow .25s;
    z-index: 3;
    box-shadow: 0 0 0 1px rgba(224,64,251,.25), 0 8px 30px rgba(0,0,0,.6);
}
.lightbox-close:hover {
    transform: scale(1.12) rotate(90deg);
    background: linear-gradient(135deg, rgba(224,64,251,.4), rgba(124,77,255,.35));
    box-shadow: 0 0 0 1px rgba(224,64,251,.7), 0 0 30px rgba(224,64,251,.4);
}

.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,229,255,.12), rgba(124,77,255,.15));
    border: 1px solid rgba(0,229,255,.4);
    color: var(--u-cyan, #00E5FF);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px;
    transition: transform .25s, background .25s, box-shadow .25s;
    z-index: 3;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(0,229,255,.2), 0 8px 30px rgba(0,0,0,.5);
}
.lightbox-nav:hover {
    background: linear-gradient(135deg, rgba(0,229,255,.28), rgba(124,77,255,.28));
    box-shadow: 0 0 0 1px rgba(0,229,255,.7), 0 0 25px rgba(0,229,255,.4);
}
.lightbox-prev { left: 24px; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next { right: 24px; }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

.lightbox-stage {
    position: relative; z-index: 2;
    width: min(1180px, 95vw); height: min(82vh, 760px);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 24px;
    padding: 20px;
    background: linear-gradient(160deg, rgba(13,20,36,.78) 0%, rgba(8,16,30,.82) 100%);
    border: 1px solid rgba(124,77,255,.3);
    border-radius: 18px;
    box-shadow:
        0 30px 100px rgba(0,0,0,.7),
        inset 0 1px 0 rgba(255,255,255,.08);
    transform: scale(.92) translateY(20px);
    opacity: 0;
    transition: transform .45s cubic-bezier(.2,.8,.3,1.1), opacity .35s;
}
.lightbox-overlay.open .lightbox-stage { transform: scale(1) translateY(0); opacity: 1; }

.lightbox-bracket {
    position: absolute; width: 36px; height: 36px;
    border: 2px solid var(--u-cyan, #00E5FF);
    pointer-events: none;
}
.lightbox-bracket.lb-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 18px; }
.lightbox-bracket.lb-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 18px; }
.lightbox-bracket.lb-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 18px; }
.lightbox-bracket.lb-br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 18px; }

.lightbox-glow {
    position: absolute; inset: -40px;
    background: radial-gradient(ellipse at center, rgba(0,229,255,.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 30%, rgba(224,64,251,.12) 0%, transparent 50%);
    z-index: -1; pointer-events: none; filter: blur(30px);
}

.lightbox-image {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 10px;
    opacity: 0; transform: scale(.96);
    transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.3,1.1);
    filter: drop-shadow(0 0 40px rgba(0,229,255,.25));
}
.lightbox-image.loaded { opacity: 1; transform: scale(1); }

.lightbox-panel {
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px 12px 12px;
    align-self: stretch;
    overflow-y: auto;
}
.lightbox-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--u-font-ui, 'Orbitron', sans-serif);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--u-cyan, #00E5FF);
}
.lightbox-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--u-cyan, #00E5FF);
    box-shadow: 0 0 10px var(--u-cyan, #00E5FF);
    animation: lbPulse 1.6s ease-in-out infinite;
}
@keyframes lbPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}
.lightbox-counter {
    margin-left: auto;
    color: rgba(244,248,255,.5);
    font-size: .65rem;
    letter-spacing: .15em;
}
.lightbox-title {
    font-family: var(--u-font-display, 'Orbitron', sans-serif);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.15;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: #FFFFFF; color: #FFFFFF;
    margin: 0;
}
.lightbox-desc {
    color: rgba(244,248,255,.78);
    font-size: .96rem;
    line-height: 1.6;
    margin: 0;
}
.lightbox-specs {
    margin-top: 4px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.lightbox-spec {
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(0,229,255,.06), rgba(124,77,255,.08));
    border: 1px solid rgba(124,77,255,.22);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.lightbox-spec-label {
    font-family: var(--u-font-ui, 'Orbitron', sans-serif);
    font-size: .58rem; text-transform: uppercase; letter-spacing: .2em;
    color: rgba(0,229,255,.7);
}
.lightbox-spec-value {
    font-size: .9rem; font-weight: 600; color: var(--u-white, #F4F8FF);
}

/* Imágenes y cards click-friendly */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-trigger:focus-visible {
    outline: 2px solid var(--u-cyan, #00E5FF);
    outline-offset: 4px;
}

@media (max-width: 820px) {
    .lightbox-stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1.2fr) auto;
        height: 88vh;
        gap: 12px;
    }
    .lightbox-image { max-height: 50vh; }
    .lightbox-specs { grid-template-columns: 1fr; }
    .lightbox-nav { width: 44px; height: 44px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

/* ════════════════════════════════════════════════════
   V4.0 — DECORACIONES EGIPCIAS + ALIEN
   ════════════════════════════════════════════════════ */
.egyptian-divider {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin: 40px auto;
    max-width: 720px; opacity: .85;
}
.egyptian-divider svg {
    width: 28px; height: 28px;
    fill: var(--u-gold, #FFD740);
    filter: drop-shadow(0 0 8px rgba(255,215,64,.5));
}
.egyptian-divider .line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,215,64,.4), rgba(0,229,255,.4), rgba(255,215,64,.4), transparent);
}
.egyptian-divider .hieroglyphs {
    display: flex; gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px; letter-spacing: .25em;
    color: rgba(255,215,64,.7);
}

/* Hieroglyph border decorative band */
.hieroglyph-band {
    display: flex; gap: 18px;
    padding: 12px 0;
    justify-content: center;
    opacity: .55;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    color: var(--u-gold, #FFD740);
    text-shadow: 0 0 8px rgba(255,215,64,.5);
    letter-spacing: .3em;
}

/* Egyptian floating symbols (background ornaments) */
.egyptian-orn {
    position: absolute;
    pointer-events: none;
    opacity: .08;
    z-index: 0;
    fill: var(--u-gold, #FFD740);
    filter: drop-shadow(0 0 12px rgba(255,215,64,.4));
}
.egyptian-orn.eye-1 { top: 8%; left: 4%; width: 110px; height: 110px; transform: rotate(-8deg); }
.egyptian-orn.ankh-1 { top: 22%; right: 5%; width: 80px; height: 80px; transform: rotate(12deg); }
.egyptian-orn.pyramid-1 { bottom: 12%; left: 6%; width: 120px; height: 120px; opacity: .06; }
.egyptian-orn.scarab-1 { bottom: 18%; right: 8%; width: 90px; height: 90px; transform: rotate(-15deg); }

/* Alien neon spikes / wings */
.alien-spikes {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 220px; height: 320px;
    pointer-events: none;
    opacity: .35;
    z-index: 0;
    filter: blur(.4px) drop-shadow(0 0 16px rgba(0,229,255,.55));
}
.alien-spikes.left { left: 0; }
.alien-spikes.right { right: 0; transform: translateY(-50%) scaleX(-1); }
.alien-spikes svg { width: 100%; height: 100%; }

/* Neural network animated svg layer */
.neural-net {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0; opacity: .25;
}
.neural-net circle {
    fill: rgba(0,229,255,.7);
    animation: neuralPulse 3.4s ease-in-out infinite;
}
.neural-net line { stroke: rgba(124,77,255,.4); stroke-width: 1; }
@keyframes neuralPulse {
    0%, 100% { opacity: .3; r: 2; }
    50%      { opacity: 1; r: 4; }
}

/* ════════════════════════════════════════════════════
   V4.0 — EJÉRCITO IA · ROBOT CARD ULTRA PRO
   ════════════════════════════════════════════════════ */
.robot-gallery-section {
    position: relative;
    padding-top: var(--s10);
    padding-bottom: var(--s10);
}
.robot-gallery-section::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,215,64,.4), rgba(0,229,255,.4), rgba(255,215,64,.4), transparent);
}

/* Robot grid: ahora cada card más alto con specs panel */
.robot-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
}

.robot-card {
    cursor: zoom-in;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.robot-card .robot-img-wrap {
    position: relative; overflow: hidden;
    border-radius: var(--u-r-lg) var(--u-r-lg) 0 0;
    aspect-ratio: 4 / 5;
    background: radial-gradient(ellipse at center, rgba(0,229,255,.06) 0%, rgba(3,6,14,.8) 70%);
}
.robot-card .robot-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.robot-card:hover .robot-img-wrap img { transform: scale(1.08); }

/* Egyptian eye scan overlay on hover */
.robot-card .robot-scan {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(0,229,255,.2) 50%, transparent 100%);
    height: 30%;
    transform: translateY(-100%);
    transition: transform 1.2s ease;
    pointer-events: none;
    z-index: 2;
}
.robot-card:hover .robot-scan { transform: translateY(330%); }

/* Detailed info panel inside the card */
.robot-card-body {
    padding: 18px 18px 20px;
    position: relative;
    z-index: 4;
    background: linear-gradient(180deg, rgba(8,16,30,.7) 0%, rgba(3,6,14,.95) 100%);
}
.robot-card-body h3 {
    font-family: var(--u-font-display, 'Orbitron', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 6px;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: #FFFFFF; color: #FFFFFF;
    letter-spacing: .02em;
}
.robot-card-body .robot-tagline {
    font-size: .82rem;
    color: rgba(244,248,255,.65);
    line-height: 1.5;
    margin-bottom: 12px;
}
.robot-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 10px 0 12px;
    padding: 10px;
    background: rgba(0,229,255,.04);
    border: 1px solid rgba(0,229,255,.15);
    border-radius: 10px;
}
.robot-stat {
    text-align: center;
}
.robot-stat-val {
    display: block;
    font-family: var(--u-font-display, 'Orbitron', sans-serif);
    font-size: 1rem; font-weight: 800;
    color: var(--u-cyan, #00E5FF);
    line-height: 1;
    text-shadow: 0 0 8px rgba(0,229,255,.4);
}
.robot-stat-label {
    display: block;
    font-size: .58rem; text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(244,248,255,.45);
    margin-top: 3px;
}
.robot-caps {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 12px;
}
.robot-caps .cap-chip {
    font-family: var(--u-font-ui, 'Orbitron', sans-serif);
    font-size: .55rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .15em;
    padding: 4px 8px; border-radius: 4px;
    background: rgba(124,77,255,.12);
    border: 1px solid rgba(124,77,255,.3);
    color: rgba(179,136,255,.95);
}
.robot-cta-line {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(124,77,255,.15);
}
.robot-cta-line .robot-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    color: rgba(0,229,255,.6);
    letter-spacing: .1em;
}
.robot-cta-line .robot-view {
    font-family: var(--u-font-ui, 'Orbitron', sans-serif);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--u-cyan, #00E5FF);
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap .25s;
}
.robot-card:hover .robot-cta-line .robot-view { gap: 12px; }
.robot-cta-line .robot-view i { transition: transform .25s; }
.robot-card:hover .robot-cta-line .robot-view i { transform: translateX(3px); }

/* Override old info absolute layout for new cards */
.robot-card.robot-card-v4 .robot-card-info { display: none; }

/* Status indicator dot */
.robot-status {
    position: absolute; top: 12px; right: 12px;
    z-index: 5;
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: rgba(3,6,14,.85);
    border: 1px solid rgba(29,233,182,.4);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    font-family: var(--u-font-ui, 'Orbitron', sans-serif);
    font-size: .58rem; font-weight: 700;
    letter-spacing: .15em;
    color: var(--u-aqua, #1DE9B6);
    text-transform: uppercase;
}
.robot-status::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--u-aqua, #1DE9B6);
    box-shadow: 0 0 8px var(--u-aqua, #1DE9B6);
    animation: lbPulse 1.4s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 1024px) {
    .robot-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .robot-gallery-grid { grid-template-columns: 1fr; gap: 14px; }
    .robot-stats { grid-template-columns: repeat(3, 1fr); }
    .lightbox-stage { padding: 12px; }
}

/* ════════════════════════════════════════════════════
   V4.0 — HERO ENHANCEMENTS · 3D + EGYPTIAN ACCENTS
   ════════════════════════════════════════════════════ */
.hero {
    position: relative;
    perspective: 1400px;
}
.hero .egyptian-orn,
.section .egyptian-orn,
.robot-gallery-section .egyptian-orn { z-index: 0; }

/* Section spacer with hieroglyph decoration */
.section-deco {
    position: relative;
    padding: 40px 0;
}

/* Floating decorative orb */
.deco-orb {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,229,255,.18) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: orbFloat 12s ease-in-out infinite;
}
.deco-orb.violet {
    background: radial-gradient(circle, rgba(124,77,255,.18) 0%, transparent 70%);
    animation-delay: -4s;
}
.deco-orb.gold {
    background: radial-gradient(circle, rgba(255,215,64,.14) 0%, transparent 70%);
    animation-delay: -8s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 40px) scale(.95); }
}

/* New 3D effect for service cards on hover */
.service-card,
.cap-card,
.price-card {
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s, border-color .5s;
}
.service-card:hover {
    transform: translateY(-8px) rotateX(2deg);
}

/* Logo glow — official UltrAgentes-IA logo */
.nav-logo-img {
    height: 46px;
    filter:
        drop-shadow(0 0 10px rgba(0,242,254,.55))
        drop-shadow(0 0 24px rgba(142,45,226,.4))
        brightness(1.04);
}
.nav-logo-horizontal {
    height: 52px;
    max-width: 260px;
}
.nav-logo-img:hover {
    transform: scale(1.06);
    filter:
        drop-shadow(0 0 18px rgba(0,242,254,.8))
        drop-shadow(0 0 40px rgba(142,45,226,.6))
        brightness(1.12);
}
.footer-logo-img { height: 90px; max-width: 220px; }

@keyframes brandShine {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(0,242,254,.5)) drop-shadow(0 0 24px rgba(142,45,226,.35)); }
    50%      { filter: drop-shadow(0 0 18px rgba(0,242,254,.8)) drop-shadow(0 0 40px rgba(142,45,226,.55)); }
}
.ultra-brand .nav-logo-img { animation: brandShine 4.5s ease-in-out infinite; }


/* Botón glass — pulido charol sutil */
.btn-glass {
    position: relative;
}
.btn-glass::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px;
    height: 45%;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.02) 50%,
        transparent 100%
    );
    pointer-events: none;
}

/* ════════════════════════════════════════════════════
   NAV LINK INTRO — botón especial para reproducir intro
   ════════════════════════════════════════════════════ */
.nav-link-intro {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(124,77,255,0.18)) !important;
    border: 1px solid rgba(0,229,255,0.4) !important;
    border-radius: var(--u-r-pill) !important;
    color: var(--u-cyan) !important;
    font-family: var(--u-font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 14px rgba(0,229,255,0.18);
    transition: all 0.3s var(--u-ease);
}
.nav-link-intro:hover {
    background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(124,77,255,0.3)) !important;
    border-color: var(--u-cyan) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 0 24px rgba(0,229,255,0.5),
        0 8px 18px rgba(0,0,0,0.4);
}
.nav-link-intro i {
    animation: introPulse 2s ease-in-out infinite;
}
@keyframes introPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ════════════════════════════════════════════════════
   AJUSTES FINALES — Logo brand con imagen
   ════════════════════════════════════════════════════ */
.ultra-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.ultra-brand .nav-logo-img + .ultra-brand-mark,
.ultra-brand .nav-logo-img + .ultra-brand-mark + .ultra-brand-text {
    /* ocultos por defecto cuando la imagen funciona */
}

/* Charol sheen extra en service-card hover */
.service-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.04) 0%,
        transparent 100%
    );
    border-radius: var(--u-r-lg) var(--u-r-lg) 0 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}
.service-card:hover::after { opacity: 1; }

/* Charol sheen extra en price-card */
.price-card {
    position: relative;
}
.price-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.01) 50%,
        transparent 100%
    );
    border-radius: var(--u-r-lg) var(--u-r-lg) 0 0;
    pointer-events: none;
    z-index: 1;
}
.price-card > * { position: relative; z-index: 2; }

/* Footer brand con logo image alineado */
.footer-brand .ultra-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.footer-logo-img {
    height: 60px !important;
    width: auto;
    margin-bottom: 8px;
}

.btn-gold::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.25) 0%,
        transparent 50%
    );
    pointer-events: none;
}

/* ════════════════════════════════════════════════════
   SECCIÓN SHOWCASE MEJORADA CON FOTO LATERAL
   ════════════════════════════════════════════════════ */
.robot-side-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
    align-items: center;
    margin: var(--s8) 0;
    background: linear-gradient(
        135deg,
        rgba(13,18,32,0.95) 0%,
        rgba(8,12,30,0.95) 100%
    );
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: var(--u-r-xl);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 30px 80px rgba(0,0,0,0.6);
}
.robot-side-showcase img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center top;
}
.robot-side-content {
    padding: var(--s7);
}
.robot-side-content h2 {
    font-family: var(--u-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--u-silver);
    margin-bottom: var(--s4);
    line-height: 1.15;
}
.robot-side-content p {
    color: var(--u-text-dim);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: var(--s5);
}

@media (max-width: 768px) {
    .robot-side-showcase {
        grid-template-columns: 1fr;
    }
    .robot-side-showcase img {
        height: 300px;
    }
}