/* ═══════════════════════════════════════════════════════════════
   components.css — Estilos extraídos de index.html (inline → externo)
   CodeHub by Wilson.E
   
   ORDEN DE CARGA en index.html:
     1. css/index.css          (base, variables, layout)
     2. css/index-responsive.css (media queries)
     3. css/components.css     (este archivo — componentes y secciones)
   
   ⚠️  NO editar el bloque id="font-fallback" en index.html — 
       ese permanece inline intencionalmente (evita FOUT en primera carga)
═══════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════
   BLOQUE PRINCIPAL — Dock, Header, Hero, Secciones, Componentes
   (extraído del <style> principal inline)
════════════════════════════════════════════════════════ */

/* ====== NOVEDADES ICON — REDISEÑO PRO ====== */

/* ═══ KEYFRAMES CANÓNICOS — no duplicar en bloques locales ═══ */
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.97)} }
@keyframes shimmer{ 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes pop    { 0%{transform:scale(.9)} 60%{transform:scale(1.07)} 100%{transform:scale(1)} }
/* ═══════════════════════════════════════════════════════════ */
/* ====== DOCK FLOTANTE ====== */
#hub-dock {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(12,12,20,0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl, 22px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  z-index: 4000;
  transition: box-shadow .3s ease;
}
#hub-dock:hover {
  box-shadow: 0 12px 56px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.9,.2,1);
  position: relative;
}
.dock-item:hover {
  transform: translateY(-10px) scale(1.18);
}
.dock-item:hover .dock-icon {
  box-shadow: 0 8px 28px var(--dock-glow, rgba(47,128,237,0.5));
}
.dock-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  transition: box-shadow .25s ease;
  position: relative;
}
.dock-icon-tools   { background: linear-gradient(135deg,#0088cc,#22c55e); --dock-glow: rgba(34,197,94,0.5); }
.dock-icon-apps    { background: linear-gradient(135deg,#00b248,#00e676); --dock-glow: rgba(0,230,118,0.5); }
.dock-icon-chat    { background: linear-gradient(135deg,#2f80ed,#22c55e); --dock-glow: rgba(47,128,237,0.5); }
.dock-icon-cv      { background: linear-gradient(135deg,#7c3aed,#b464ff); --dock-glow: rgba(180,100,255,0.5); }
.dock-label {
  font-size: 0.62rem;
  font-family: 'Space Grotesk', sans-serif;
  color: rgba(255,255,255,0.55);
  letter-spacing: .03em;
  font-weight: 500;
  transition: color .2s;
}
.dock-item:hover .dock-label { color: rgba(255,255,255,0.9); }
.dock-notif {
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  background: #00e676;
  border-radius: var(--radius-full, 50%);
  border: 2px solid #0a0a0a;
  animation: dockPulse 2s ease-in-out infinite;
}
@keyframes dockPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,230,118,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(0,230,118,0); }
}
.dock-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.1);
  margin: 0 2px 8px;
}
@media (max-width: 480px) {
  #hub-dock { bottom: 16px; gap: 6px; padding: 8px 12px; }
  .dock-icon { width: 44px; height: 44px; font-size: 1.2rem; border-radius: var(--radius-md, 14px); }
  .dock-label { font-size: 0.55rem; }
}

/* ====== SECTION: TOOLS PREVIEW ====== */
#tools-preview {
  padding: 80px 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.tp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.tp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: #22c55e;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.tp-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #22c55e 60%, #0088cc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin: 0;
}
.tp-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-md, 14px);
  background: rgba(34,197,94,0.1); color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
  font-weight: 600; font-size: .88rem; text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  transition: all .2s ease; white-space: nowrap;
}
.tp-cta:hover { background: rgba(34,197,94,0.2); transform: translateY(-2px); }
.tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.tp-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg, 18px);
  padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; cursor: pointer; text-decoration: none;
  transition: all .25s cubic-bezier(.2,.9,.2,1);
  position: relative; overflow: hidden;
}
.tp-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--tc, rgba(34,197,94,0.1)), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.tp-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.14); }
.tp-card:hover::before { opacity: 1; }
.tp-card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md, 14px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
}
.tp-card-name { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.tp-card-desc { font-size: .72rem; color: rgba(255,255,255,0.4); line-height: 1.4; }

/* ====== SECTION: APP STORE PREVIEW ====== */
#appstore-preview {
  padding: 80px 0;
}
.ap-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px; flex-wrap: wrap; gap: 16px;
}
.ap-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; color: #00e676; letter-spacing: .1em; margin-bottom: 6px;
}
.ap-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #00e676 60%, #00b248 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin: 0;
}
.ap-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-md, 14px);
  background: rgba(0,230,118,0.1); color: #00e676;
  border: 1px solid rgba(0,230,118,0.25);
  font-weight: 600; font-size: .88rem; text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  transition: all .2s ease; white-space: nowrap;
}
.ap-cta:hover { background: rgba(0,230,118,0.2); transform: translateY(-2px); }
.ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.ap-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl, 22px); padding: 18px;
  display: flex; align-items: center; gap: 16px;
  text-decoration: none;
  transition: all .25s cubic-bezier(.2,.9,.2,1);
  position: relative; overflow: hidden;
}
.ap-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(0,230,118,0.06), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.ap-card:hover { transform: translateY(-4px); border-color: rgba(0,230,118,0.2); }
.ap-card:hover::after { opacity: 1; }
.ap-app-icon {
  width: 60px; height: 60px; border-radius: var(--radius-lg, 18px);
  object-fit: cover; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.ap-app-icon img { width: 100%; height: 100%; border-radius: var(--radius-lg, 18px); object-fit: cover; }
.ap-app-info { flex: 1; min-width: 0; }
.ap-app-name { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-app-cat { font-size: .72rem; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
.ap-app-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radius-xs, 6px);
  font-size: .65rem; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  background: rgba(0,230,118,0.12); color: #00e676;
  border: 1px solid rgba(0,230,118,0.2);
}
.ap-arrow {
  color: rgba(255,255,255,0.2); font-size: .9rem; flex-shrink: 0;
  transition: color .2s, transform .2s;
}
.ap-card:hover .ap-arrow { color: #00e676; transform: translateX(3px); }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #2f80ed;
            --secondary: #22c55e;
            --accent: #38bdf8;
        }

        body {
            font-family: 'Space Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #0c0c0c 100%);
            color: #ffffff;
            overflow-x: hidden;
            line-height: 1.6;
            transition: all 0.5s ease;
            padding-bottom: 110px;
        }

        /* Scroll Progress Bar */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
            z-index: 9999;
            transition: width 0.1s ease;
        }

        /* ========== MENÚ LATERAL EXPERIMENTAL ========== */
        #experimental-menu {
            position: fixed;
            left: -320px;
            top: 50%;
            transform: translateY(-50%);
            width: 300px;
            max-height: 82vh;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(26, 26, 46, 0.95));
            backdrop-filter: blur(20px);
            border: 2px solid var(--primary);
            border-left: none;
            border-radius: 0 var(--radius-xl, 22px) var(--radius-xl, 22px) 0;
            padding: 20px;
            z-index: 1000;
            transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 5px 0 30px rgba(255, 69, 0, 0.3);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(47,128,237,.55) rgba(255,255,255,.06);
        }
        #experimental-menu::-webkit-scrollbar { width: 8px; }
        #experimental-menu::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: var(--radius-pill, 999px); }
        #experimental-menu::-webkit-scrollbar-thumb { background: rgba(47,128,237,.55); border-radius: var(--radius-pill, 999px); }

        #experimental-menu.active {
            left: 0;
        }

        .menu-toggle-btn {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            box-sizing: border-box;
            width: 40px;
            height: 118px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: 2px solid rgba(47,128,237,.6);
            border-left: none;
            border-radius: 0 var(--radius-md, 14px) var(--radius-md, 14px) 0;
            cursor: pointer;
            z-index: 999;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: .3rem .2rem;
            transition: all 0.3s ease;
            box-shadow: 3px 0 15px rgba(255, 69, 0, 0.4);
        }
        .menu-toggle-btn:hover {
            width: 46px;
            box-shadow: 5px 0 25px rgba(255, 69, 0, 0.6);
        }
        .menu-toggle-btn i {
            font-size: 1rem;
            line-height: 1;
            color: white;
            flex-shrink: 0;
            animation: pulse 2s ease-in-out infinite;
        }
        .menu-toggle-text {
            writing-mode: vertical-rl;
            color: white;
            font-weight: bold;
            font-size: 0.6rem;
            letter-spacing: 1.5px;
            opacity: .85;
            white-space: nowrap;
        }
        /* Deslizador visible en desktop */
        .exp-drag-handle {
            position: fixed; left: 40px; top: 50%;
            transform: translateY(-50%);
            width: 14px; height: 40px;
            background: rgba(47,128,237,.25);
            border: 1px solid rgba(47,128,237,.3);
            border-left: none; border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
            z-index: 998; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all .2s;
        }
        .exp-drag-handle::after {
            content: '›';
            color: rgba(47,128,237,.7); font-size: .75rem; font-weight: 700;
        }
        .exp-drag-handle:hover { background: rgba(47,128,237,.4); width: 18px; }
        #experimental-menu.active ~ .exp-drag-handle,
        .exp-drag-handle.open { left: 300px; }
        .exp-drag-handle.open::after { content: '‹'; }
        @media (max-width: 768px) { .exp-drag-handle { display: none; } }

        .menu-header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
        }

        .menu-header h3 {
            color: var(--accent);
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

        .menu-header p {
            color: #888;
            font-size: 0.85rem;
        }
        .exp-scroll-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .55rem;
            margin: 0 0 14px;
            padding: .7rem .85rem;
            border-radius: var(--radius-md, 14px);
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            color: rgba(255,255,255,.78);
            font-size: .73rem;
            font-family: 'JetBrains Mono', monospace;
        }
        .exp-scroll-indicator i {
            color: var(--accent);
            animation: expArrowBounce 1.5s ease-in-out infinite;
        }
        @keyframes expArrowBounce {
            0%, 100% { transform: translateY(0); opacity: .8; }
            50% { transform: translateY(4px); opacity: 1; }
        }

        .menu-item {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 69, 0, 0.05));
            border: 2px solid rgba(255, 69, 0, 0.3);
            border-radius: var(--radius-md, 14px);
            padding: 15px;
            margin: 10px 0;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
            transform: translateY(var(--exp-shift, 0px));
        }

        .menu-item:hover {
            transform: translateX(10px) translateY(var(--exp-shift, 0px));
            border-color: var(--primary);
            box-shadow: 0 5px 20px rgba(255, 69, 0, 0.4);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 69, 0, 0.1));
        }

        .menu-item i {
            font-size: 1.5rem;
            color: var(--primary);
            width: 30px;
            text-align: center;
        }

        .menu-item-content {
            flex: 1;
        }

        .menu-item-title {
            color: var(--accent);
            font-weight: bold;
            font-size: 0.95rem;
            margin-bottom: 3px;
        }

        .menu-item-desc {
            color: #999;
            font-size: 0.75rem;
        }

        .menu-close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 69, 0, 0.2);
            border: 2px solid var(--primary);
            border-radius: var(--radius-full, 50%);
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .menu-close-btn:hover {
            background: var(--primary);
            transform: rotate(90deg);
        }

        /* ========== FIN MENÚ LATERAL ========== */

        /* Command Palette (Ctrl+K) */
        #command-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        #command-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .command-palette {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -20px);
            width: 600px;
            max-width: 90%;
            background: rgba(0, 0, 0, 0.95);
            border: 2px solid var(--primary);
            border-radius: var(--radius-md, 14px);
            padding: 20px;
            transition: all 0.3s ease;
        }

        #command-overlay.active .command-palette {
            transform: translate(-50%, 0);
        }

        .command-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-bottom: 2px solid var(--primary);
            color: #ffffff;
            padding: 15px;
            font-size: 1.2rem;
            outline: none;
        }

        .command-hint {
            text-align: center;
            color: var(--accent);
            margin-top: 10px;
            font-size: 0.9rem;
        }

        .command-results {
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .command-item {
            padding: 15px;
            border-radius: var(--radius-sm, 10px);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 15px;
            color: #ffffff;
        }

        .command-item:hover, .command-item-active {
            background: rgba(255, 69, 0, 0.3);
            transform: translateX(5px);
        }

        .command-item i {
            color: var(--primary);
            font-size: 1.2rem;
        }

        /* ❌ DESACTIVADO: Cursor Particles causaban lag */
        /*.cursor-particle {
            position: fixed;
            width: 6px;
            height: 6px;
            background: var(--primary);
            border-radius: var(--radius-full, 50%);
            pointer-events: none;
            z-index: 9998;
            animation: particleFade 1s ease-out forwards;
        }

        @keyframes particleFade {
            to {
                opacity: 0;
                transform: translateY(-30px) scale(0);
            }
        }*/

        /* Neural Network Canvas */
        #neural-network {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.6;
        }

        /* Variables CSS para modo oscuro */
        :root {
            --bg-color: #0a0a0a;
            --text-color: #fff;
            --accent-color: #2f80ed;
            --card-bg: rgba(255, 255, 255, 0.05);
        }

        [data-theme="light"] {
            --bg-color: #f5f5f5;
            --text-color: #000;
            --accent-color: #2f80ed;
            --card-bg: rgba(0, 0, 0, 0.05);
            --text: #0f172a;
            --text-secondary: #475569;
            --muted: #64748b;
            --tc: rgba(15, 23, 42, 0.85);
        }

        body {
            background: var(--bg-color);
            color: var(--text-color);
            transition: background 0.3s, color 0.3s;
        }
        @media (max-width: 768px) {
            .mobile-nav { padding-top: 52px; }
        }

        /* ===== HEADER PRO ===== */
        header {
            padding: 0;
            background: linear-gradient(180deg, rgba(5,5,10,0.97) 0%, rgba(10,10,20,0.95) 100%);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(47,128,237,0.25);
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 500;
            box-sizing: border-box;
            box-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(47,128,237,0.15);
        }

        /* Línea animada bajo el header */
        header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--accent), var(--primary), transparent);
            background-size: 200% 100%;
            animation: headerLine 4s linear infinite;
        }

        @keyframes headerLine {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Contenedor interno del header */
        .header-inner {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0.65rem 2rem;
            max-width: 1300px;
            margin: 0 auto;
            gap: 0.85rem;
        }

        /* ═══ BURGER MENU MOBILE ═══ */
        .burger-btn {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 38px; height: 38px;
            background: rgba(47,128,237,.08);
            border: 1px solid rgba(47,128,237,.25);
            border-radius: var(--radius-sm, 10px);
            cursor: pointer;
            padding: 8px;
            flex-shrink: 0;
            transition: all .2s;
        }
        .burger-btn:hover { background: rgba(47,128,237,.18); }
        .burger-btn span {
            display: block;
            height: 2px;
            background: var(--primary);
            border-radius: var(--radius-2xs, 4px);
            transition: all .3s cubic-bezier(.4,0,.2,1);
        }
        .burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* Menú mobile desplegable */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0;
            padding-top: 58px;
            background: rgba(5,5,12,.97);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(47,128,237,.2);
            z-index: 499;
            padding: 1rem 1.5rem 1.5rem;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .mobile-nav.open { display: block; }
        .mobile-nav ul {
            list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: .2rem;
        }
        .mobile-nav a {
            display: block;
            padding: .7rem 1rem;
            color: rgba(255,255,255,.75);
            text-decoration: none;
            font-size: .9rem;
            font-weight: 500;
            border-radius: var(--radius-sm, 10px);
            transition: all .18s;
        }
        .mobile-nav a:hover, .mobile-nav a:active {
            background: rgba(47,128,237,.1);
            color: #fff;
        }
        .mobile-nav-divider {
            height: 1px;
            background: rgba(255,255,255,.07);
            margin: .5rem 0;
        }

        @media (max-width: 768px) {
            .burger-btn { display: flex; }
            header nav { display: none; }
            .header-actions #beta-btn { display: none; }
            .header-logo-mark { width: 54px; height: 54px; border-radius: var(--radius-md, 14px); }
            .header-logo-desc { display: none; }
        }

        /* Logo */
        .header-logo {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            flex-shrink: 0;
            text-decoration: none;
            position: relative;
            z-index: 1;
        }

        .header-logo-mark { display: none; }

        .header-logo-copy {
            display: flex;
            flex-direction: column;
            gap: 0.18rem;
            min-width: 0;
            position: relative;
            z-index: 2;
            overflow: hidden;
        }

        .header-logo-meta {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .header-logo-text {
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: #fff;
            white-space: nowrap;
        }

        .header-logo-text .bracket {
            color: var(--primary);
            text-shadow: 0 0 12px rgba(47,128,237,0.6);
        }

        .header-logo-badge {
            font-size: 0.68rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #2f80ed, #2563eb);
            border: none;
            padding: 3px 10px 3px 10px;
            border-radius: var(--radius-xl, 22px);
            letter-spacing: 0.06em;
            position: relative;
            overflow: visible;
            display: inline-flex;
            align-items: center;
            box-shadow: 0 2px 10px rgba(47,128,237,0.4), 0 0 0 0 rgba(47,128,237,0);
            cursor: default;
        }

        /* ── TEXT MORPH — badge del logo: cicla roles con fade ──
           Sin filtro gooey: su feGaussianBlur (3px) destruía la legibilidad
           de las letras de ~11px — el badge se veía como un rectángulo azul
           vacío. El morph queda limpio con fade+scale. */
        .tm-words {
            display: inline-grid;
            justify-items: center;
            line-height: 1;
        }
        .tm-word {
            grid-area: 1 / 1;
            white-space: nowrap;
            opacity: 0;
            transform: scale(.9);
            transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
            pointer-events: none;
        }
        .tm-word.is-active {
            opacity: 1;
            transform: scale(1);
        }

        .header-logo-desc {
            font-size: 0.64rem;
            color: rgba(255,255,255,0.52);
            letter-spacing: 0.04em;
            font-family: var(--mono);
            white-space: nowrap;
        }

        /* Nav central */
        header nav {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        nav ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            margin: 0;
            padding: 0;
            flex-wrap: nowrap;
        }

        nav li {
            display: flex;
            align-items: center;
        }

        nav a {
            color: rgba(255,255,255,0.72);
            text-decoration: none;
            padding: 0.38rem 0.75rem;
            border-radius: var(--radius-sm, 10px);
            font-size: 0.82rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            transition: all 0.2s ease;
            white-space: nowrap;
            position: relative;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 60%;
            height: 1.5px;
            background: var(--primary);
            border-radius: var(--radius-2xs, 4px);
            transition: transform 0.2s ease;
        }

        nav a:hover {
            color: #fff;
            background: rgba(47,128,237,0.1);
        }

        nav a:hover::after {
            transform: translateX(-50%) scaleX(1);
        }

        /* Acciones del header (derecha) — en fila, compactas */
        .header-actions {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
        }

        #update-btn {
            display: none;
        }

        /* Typing bajo el nav — en mobile */
        .header-typing {
            text-align: center;
            font-size: 0.72rem;
            color: rgba(255,255,255,0.45);
            padding: 0 2rem 0.4rem;
            letter-spacing: 0.04em;
            min-height: 1.1em;
        }

        /* Accesibilidad */
        *:focus {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        button:focus, a:focus {
            outline: 2px solid var(--accent-color);
        }

        /* ═══ BOTONES UNIFICADOS ════════════════════════════════════
           Sistema de botones consistente para todo CodeHub.
           Uso: .ch-btn .ch-btn-primary / .ch-btn-ghost / .ch-btn-danger / .ch-btn-icon / .ch-btn-pill
           ════════════════════════════════════════════════════════════ */
        .ch-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            padding: var(--btn-padding);
            border-radius: var(--btn-radius);
            font-family: var(--btn-font);
            font-size: .83rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            text-decoration: none;
            white-space: nowrap;
            transition: var(--btn-transition);
            position: relative;
            overflow: hidden;
        }
        .ch-btn:active { transform: scale(.97); }
        .ch-btn:disabled, .ch-btn[disabled] { opacity: var(--btn-disabled-opacity); cursor: not-allowed; transform: none; pointer-events: none; }
        .ch-btn i { font-size: .85em; }

        /* Primary — gradiente azul */
        .ch-btn-primary {
            background: var(--btn-primary-bg);
            color: #fff;
            box-shadow: var(--btn-primary-shadow);
        }
        @media (hover: hover) {
            .ch-btn-primary:hover { box-shadow: 0 6px 20px rgba(47,128,237,.5); transform: translateY(-1px); }
        }

        /* Ghost — borde sutil transparente */
        .ch-btn-ghost {
            background: var(--btn-ghost-bg);
            color: rgba(232,232,240,.7);
            border: 1px solid var(--btn-ghost-border);
        }
        @media (hover: hover) {
            .ch-btn-ghost:hover { background: var(--btn-ghost-hover-bg); color: #fff; border-color: rgba(255,255,255,.25); }
        }

        /* Danger — rojo */
        .ch-btn-danger {
            background: rgba(239,68,68,.15);
            color: #f87171;
            border: 1px solid rgba(239,68,68,.25);
        }
        @media (hover: hover) {
            .ch-btn-danger:hover { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.45); color: #fca5a5; }
        }

        /* Icon — cuadrado 34px */
        .ch-btn-icon {
            width: var(--btn-icon-size);
            height: var(--btn-icon-size);
            padding: 0;
            border-radius: var(--btn-radius);
            background: var(--btn-ghost-bg);
            border: 1px solid var(--btn-ghost-border);
            color: rgba(232,232,240,.6);
        }
        @media (hover: hover) {
            .ch-btn-icon:hover { border-color: var(--primary); color: var(--accent); background: rgba(47,128,237,.08); }
        }

        /* Pill — borderRadius 999px */
        .ch-btn-pill {
            border-radius: var(--btn-radius-pill);
            padding: var(--btn-padding-sm) .85rem;
            font-size: .75rem;
        }

        /* Small */
        .ch-btn-sm {
            padding: var(--btn-padding-sm);
            font-size: .75rem;
        }

        /* Large */
        .ch-btn-lg {
            padding: var(--btn-padding-lg);
            font-size: .9rem;
        }

        /* Block — full width */
        .ch-btn-block { width: 100%; }

        /* ── Light theme overrides ── */
        [data-theme="light"] .ch-btn-ghost {
            background: rgba(15,23,42,.04);
            border-color: rgba(15,23,42,.12);
            color: rgba(15,23,42,.65);
        }
        [data-theme="light"] .ch-btn-ghost:hover {
            background: rgba(15,23,42,.08);
            border-color: rgba(15,23,42,.2);
            color: #0f172a;
        }
        [data-theme="light"] .ch-btn-icon {
            background: rgba(15,23,42,.04);
            border-color: rgba(15,23,42,.12);
            color: rgba(15,23,42,.6);
        }
        [data-theme="light"] .ch-btn-icon:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(47,128,237,.06);
        }
        [data-theme="light"] .ch-btn-danger {
            background: rgba(239,68,68,.08);
            color: #dc2626;
            border-color: rgba(239,68,68,.2);
        }


        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        header h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textFloat 3s ease-in-out infinite;
        }

        @keyframes textFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .animated-message {
            font-size: 1.2rem;
            color: var(--accent);
            margin: 1.5rem 0;
        }

        /* nav ul ya definido arriba en header PRO */
        nav a::before { display: none; } /* eliminar el shimmer anterior que interfiere */

        /* Main Content */
        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        section {
            margin: 2rem 0;
            padding: 2rem;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-xl, 22px);
            border: 1px solid rgba(255, 69, 0, 0.2);
            position: relative;
            overflow: hidden;
            animation: slideInUp 0.8s ease-out;
        }
        #hero {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        #mi-pueblo {
            margin-top: 0 !important;
        }
        #open-to-work {
            margin-top: 0 !important;
        }
        /* AdSense: ocultar cuando no hay anuncio activo */
        ins.adsbygoogle[data-ad-status="unfilled"],
        ins.adsbygoogle:not([data-ad-status]) {
            display: none !important;
        }
        ins.adsbygoogle[data-ad-status="filled"] {
            display: block !important;
        }

        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
            animation: flowingGradient 3s ease-in-out infinite;
        }

        @keyframes flowingGradient {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Stats Counter */
        .stats-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .stat-card {
            text-align: center;
            padding: 2rem;
            background: linear-gradient(145deg, rgba(255, 69, 0, 0.1), rgba(255, 107, 53, 0.05));
            border-radius: var(--radius-md, 14px);
            border: 2px solid var(--primary);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        @media (max-width: 768px) {
            .stat-card { padding: 1.1rem .8rem; border-radius: var(--radius-md, 14px); }
            .stat-number { font-size: 2rem !important; }
            .stat-label { font-size: .9rem !important; }
            .stat-sub { font-size: .68rem !important; }
            .stat-icon { font-size: 1.2rem !important; }
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 69, 0, 0.1), transparent);
            transform: rotate(45deg);
            animation: statShine 3s ease-in-out infinite;
        }

        @keyframes statShine {
            0%, 100% { transform: translateX(-100%) rotate(45deg); }
            50% { transform: translateX(100%) rotate(45deg); }
        }

        .stat-card:hover {
            transform: translateY(-15px) scale(1.05);
            box-shadow: 0 20px 40px rgba(255, 69, 0, 0.4);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary);
            position: relative;
            z-index: 1;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: -0.02em;
            line-height: 1;
            min-height: 3.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: text-shadow .3s ease;
        }
        .stat-number.counter-done {
            animation: counterPop .45s cubic-bezier(.2,.9,.2,1.4);
            text-shadow: 0 0 24px rgba(47,128,237,0.7);
        }
        @keyframes counterPop {
            0%   { transform: scale(1); }
            50%  { transform: scale(1.18); }
            100% { transform: scale(1); }
        }

        .stat-label {
            font-size: 1rem;
            color: var(--accent);
            margin-top: 0.4rem;
            position: relative;
            z-index: 1;
            font-weight: 700;
        }
        .stat-sub {
            font-size: .72rem;
            color: rgba(255,255,255,0.4);
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: .04em;
            position: relative;
            z-index: 1;
            margin-top: 2px;
        }

        /* Skills Section (DEJAMOS SOLO UNA) */
        #skills {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(26, 26, 46, 0.6));
            border: 2px solid rgba(255, 69, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        #skills::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        .skill {
            display: flex;
            align-items: center;
            margin: 2rem 0;
            padding: 2rem;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 69, 0, 0.08));
            border-radius: var(--radius-xl, 22px);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }

        .skill::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
            border-radius: var(--radius-xl, 22px);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .skill:hover::before {
            opacity: 1;
        }

        .skill:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 60px rgba(255, 69, 0, 0.5);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 69, 0, 0.15));
        }

        .skill-icon {
            font-size: 4.5rem;
            margin-right: 2.5rem;
            color: var(--primary);
            animation: iconFloat 3s ease-in-out infinite;
            position: relative;
            filter: drop-shadow(0 0 20px var(--primary));
        }

        .skill-icon::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150%;
            height: 150%;
            background: radial-gradient(circle, rgba(255, 69, 0, 0.3) 0%, transparent 70%);
            z-index: -1;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes iconFloat {
            0%, 100% { transform: translateY(0px) rotateY(0deg); }
            50% { transform: translateY(-8px) rotateY(5deg); }
        }

        .skill-info {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .skill-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8rem;
        }

        .skill-info span {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--accent);
        }

        .skill-percentage {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary);
            opacity: 0;
            animation: fadeInRight 0.5s ease forwards;
        }

        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .progress-bar {
            width: 100%;
            height: 14px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-sm, 10px);
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
            border-radius: var(--radius-sm, 10px);
            position: relative;
            box-shadow: 0 0 20px var(--primary);
            animation: progressLoad 2s ease-out forwards;
            transform-origin: left;
        }

        .progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: shimmerProgress 2s ease-in-out infinite;
        }

        @keyframes progressLoad {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        @keyframes shimmerProgress {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* Continúa en Parte 2... */
    
/* ═══════════════════════════════════════════
   ASISTENTE IA — EMI IA CHAT
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   EMI IA CHAT — AURORA
   ═══════════════════════════════════════════ */
:root {
  --ai-accent:  #7C4DFF;
  --ai-accent2: #6a5ae0;
  --ai-bg:      #17171f;
  --ai-s1:      #1c1c26;
  --ai-s2:      #20202b;
  --ai-s3:      #262631;
  --ai-border:  rgba(255,255,255,.09);
  --ai-border2: rgba(255,255,255,.07);
  --ai-text:    #ECECF3;
  --ai-muted:   rgba(210,210,225,.5);
  --ai-online:  #3ecf8e;
}
/* FAB */
#ai-fab {
  position:fixed; right:20px; bottom:100px;
  height:44px; padding:0 14px 0 10px; border-radius:var(--radius-2xl, 28px);
  background: linear-gradient(135deg, #6a11ff 0%, #2575fc 50%, #00c6ff 100%);
  border:none; color:#fff; display:flex; align-items:center; gap:7px;
  cursor:pointer; z-index:5000; white-space:nowrap; overflow:hidden;
  box-shadow: 0 4px 20px rgba(106,17,255,.46), 0 1px 6px rgba(0,0,0,.4);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, opacity .25s;
  animation: aiFabPop .6s cubic-bezier(.2,.9,.2,1) both 1s;
}
@keyframes aiFabPop{0%{opacity:0;transform:scale(0) rotate(-90deg)}75%{transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Ondas líquidas dentro del FAB */
#ai-fab .fab-wave {
  position: absolute;
  bottom: -5px; left: 0;
  width: 100%; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M0 7 C25 0 50 14 75 7 S125 0 150 7 S175 14 200 7 L200 14 L0 14 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 300px 22px;
  pointer-events: none;
}
#ai-fab .fab-wave.fw1 {
  animation: fabWave1 4s linear infinite;
  opacity: 0.28; bottom: -4px;
}
#ai-fab .fab-wave.fw2 {
  animation: fabWave2 2.5s linear infinite;
  opacity: 0.18; bottom: -1px;
}
#ai-fab .fab-wave.fw3 {
  animation: fabWave1 6s linear infinite;
  opacity: 0.12; bottom: -7px;
  animation-delay: -2s;
}
@keyframes fabWave1 { 0%{background-position-x:0} 100%{background-position-x:300px} }
@keyframes fabWave2 { 0%{background-position-x:0} 100%{background-position-x:-300px} }

/* Brillo animado de fondo */
#ai-fab::before {
  content:'';position:absolute;inset:0;border-radius:var(--radius-2xl, 28px);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: fabShine 3.5s ease-in-out infinite;
}
@keyframes fabShine { 0%,100%{transform:translateX(-100%)} 60%{transform:translateX(100%)} }

/* Anillo exterior pulsante */
#ai-fab::after {
  content:'';position:absolute;inset:-3px;border-radius:var(--radius-2xl, 28px);
  border:1.5px solid rgba(106,17,255,.5);
  animation:fabRing 3s ease-in-out infinite;pointer-events:none;
}
@keyframes fabRing{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

#ai-fab:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 32px rgba(106,17,255,.65), 0 0 0 4px rgba(37,117,252,.2); }
#ai-fab:active { transform:scale(.96); }
#ai-fab.hidden { display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:scale(0) rotate(-90deg)!important; }

#ai-fab .ai-fab-icon {
  width:24px;height:24px;
  background:rgba(255,255,255,.18);
  border-radius:var(--radius-full, 50%);display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
  transition:transform .3s;
  position:relative;z-index:2;
}
#ai-fab:hover .ai-fab-icon { transform:rotate(-15deg) scale(1.12); }
#ai-fab .ai-fab-text { display:flex;flex-direction:column;line-height:1.1;position:relative;z-index:2; }
#ai-fab .ai-fab-label { font-size:.72rem;font-weight:700;font-family:'Space Grotesk',system-ui,sans-serif; }
#ai-fab .ai-fab-sub { font-size:.52rem;color:rgba(255,255,255,.65);font-family:'JetBrains Mono',monospace; }
#ai-fab .ai-notif { position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:#ff5252;border-radius:var(--radius-full, 50%);border:2px solid #0a0a14;animation:notifBlink 2s infinite;z-index:3; }
@keyframes notifBlink{0%,100%{opacity:1}50%{opacity:.15}}
/* Panel */
#ai-panel{
  position:fixed;right:24px;bottom:24px;width:min(390px,calc(100vw - 28px));
  height:min(620px,calc(100dvh - 44px));max-height:min(620px,calc(100dvh - 44px));min-height:460px;
  background:var(--ai-bg);
  border:1px solid var(--ai-border);border-radius:var(--radius-xl, 22px);
  display:flex;flex-direction:column;z-index:9600;overflow:hidden;isolation:isolate;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
  transform:scale(.96) translateY(10px);transform-origin:bottom right;
  opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .22s;
}
#ai-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all;display:flex !important;animation:panelIn .3s cubic-bezier(.2,.9,.2,1) both;}
@keyframes panelIn{
  0%  {transform:scale(.96) translateY(10px);opacity:0;}
  100%{transform:scale(1) translateY(0);opacity:1;}
}
#ai-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;background:var(--ai-border);}
/* Header */
.ai-head{padding:.85rem 1rem .78rem;border-bottom:1px solid var(--ai-border2);display:flex;align-items:center;gap:.75rem;flex-shrink:0;background:var(--ai-s1);position:relative;z-index:1;}
.ai-head-avatar{width:40px;height:40px;border-radius:var(--radius-md, 14px);background:linear-gradient(135deg,#7C4DFF,#00B0FF);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 3px 12px rgba(124,77,255,.5);}
.ai-head-avatar::after{content:'';position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;background:var(--ai-online);border-radius:var(--radius-full, 50%);border:2px solid var(--ai-bg);animation:onlinePulse 2.5s ease-in-out infinite;}
@keyframes eyeGlow{0%,100%{opacity:.95}50%{opacity:.5}}
.ai-head-avatar svg rect[fill="#00e5ff"]{animation:eyeGlow 2.8s ease-in-out infinite;}
.ai-head-avatar svg rect[fill="#00e5ff"]:last-of-type{animation-delay:.4s;}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,.5)}60%{box-shadow:0 0 0 4px rgba(0,230,118,0)}}
.ai-head-info{flex:1;min-width:0;}
.ai-head-title{font-size:.92rem;font-weight:700;color:var(--ai-text);letter-spacing:-.01em;}
.ai-head-sub{
  font-size:.64rem;color:var(--ai-muted);font-family:'JetBrains Mono',monospace;margin-top:3px;
  display:flex;align-items:center;gap:.42rem;min-width:0;max-width:100%;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ai-head-sub .online-dot{
  width:6px;height:6px;background:var(--ai-online);border-radius:var(--radius-full, 50%);flex-shrink:0;
  box-shadow:0 0 10px rgba(0,230,118,.45);
  animation:aiStatusPulse 1.8s ease-in-out infinite;
}
@keyframes aiStatusPulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.18);opacity:.75;}
}
.ai-status-text{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,rgba(232,232,248,.9),rgba(196,184,255,.88),rgba(128,207,255,.85),rgba(232,232,248,.9));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:aiStatusGlow 7.5s linear infinite;
}
.ai-status-text[data-tone="busy"] {
  background:linear-gradient(90deg,rgba(255,181,91,.95),rgba(255,136,84,.9),rgba(255,214,120,.78),rgba(255,181,91,.95));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@keyframes aiStatusGlow{
  0%{background-position:0% 50%;}
  100%{background-position:220% 50%;}
}
/* ── AI bottom action bar ── */
.ai-bottom-bar{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;
  padding:.54rem .8rem calc(.62rem + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  flex-shrink:0;
  min-height:62px;
  position:relative;z-index:1;
}
.ai-circle-btn{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.4rem;
  background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);cursor:pointer;
  transition:var(--btn-transition);
  padding:.42rem .52rem;border-radius:var(--radius-md, 14px);
  flex-shrink:0;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
@media (hover: hover) {
  .ai-circle-btn:hover{transform:translateY(-1px);border-color:rgba(124,77,255,.24);background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.028));}
}
.ai-circle-btn:active{transform:scale(.97);}
.ai-circle-icon{
  width:26px;height:26px;border-radius:var(--radius-md, 12px);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.055);
  color:rgba(200,200,230,.55);
  transition:all .22s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  flex-shrink:0;
}
.ai-circle-label{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  font-size:.56rem;
  color:rgba(200,200,230,.62);
  font-family:'Space Grotesk',system-ui,sans-serif;
  transition:color .2s;
  letter-spacing:.01em;
  pointer-events:none;
  white-space:normal;
  line-height:1.15;
}
.ai-circle-label::after{
  content:attr(data-subtitle);
  font-size:.46rem;
  color:rgba(200,200,230,.38);
  font-family:'JetBrains Mono',monospace;
  margin-top:.04rem;
  white-space:nowrap;
}
.ai-circle-clear:hover .ai-circle-icon{
  background:rgba(124,77,255,.22);
  border-color:rgba(124,77,255,.5);
  color:#c4b8ff;
  box-shadow:0 0 16px rgba(124,77,255,.45);
}
.ai-circle-clear:hover .ai-circle-label{color:#c4b8ff;}
.ai-circle-close:hover .ai-circle-icon{
  background:rgba(47,128,237,.18);
  border-color:rgba(47,128,237,.45);
  color:#ff6535;
  box-shadow:0 0 16px rgba(47,128,237,.35);
}
.ai-circle-close:hover .ai-circle-label{color:#ff6535;}
/* mood bar */
.ai-mood-bar{padding:.5rem .85rem;display:flex;gap:.3rem;align-items:center;border-bottom:1px solid var(--ai-border2);background:rgba(19,19,31,.92);flex-shrink:0;overflow-x:auto;scrollbar-width:none;position:relative;z-index:1;}
.ai-mood-bar::-webkit-scrollbar{display:none;}
.ai-mood-label{font-size:.6rem;color:var(--ai-muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;margin-right:.2rem;}
.ai-mood-btn{padding:.2rem .52rem;border-radius:var(--radius-xl, 22px);border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--ai-muted);font-size:.62rem;cursor:pointer;transition:all .18s;font-family:'Space Grotesk',system-ui,sans-serif;white-space:nowrap;}
.ai-mood-btn.active,.ai-mood-btn:hover{background:rgba(124,77,255,.2);border-color:rgba(124,77,255,.45);color:#c4b8ff;}
/* Messages */
#ai-msgs{flex:1;min-height:0;overflow-y:auto;padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth;background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 22%);position:relative;z-index:1;}
#ai-msgs::-webkit-scrollbar{width:2px;}
#ai-msgs::-webkit-scrollbar-thumb{background:rgba(124,77,255,.3);border-radius:var(--radius-2xs, 4px);}
.ai-msg-wrap{display:flex;gap:.5rem;animation:msgIn .28s cubic-bezier(.2,.9,.2,1);}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ai-msg-wrap.user{flex-direction:row-reverse;}
.ai-msg-wrap.ai-welcome{align-items:flex-start;margin-bottom:.2rem;}
.ai-msg-avatar{width:24px;height:24px;border-radius:var(--radius-full, 50%);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-top:3px;}
.ai-msg-wrap.ai .ai-msg-avatar{background:linear-gradient(135deg,#7C4DFF,#00B0FF);}
.ai-msg-wrap.user .ai-msg-avatar{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);}
.ai-msg-content{display:flex;flex-direction:column;gap:.2rem;max-width:88%;}
.ai-msg-wrap.ai .ai-msg-content{max-width:94%;}
.ai-msg-wrap.user .ai-msg-content{align-items:flex-end;}
.ai-msg{padding:.6rem .82rem;border-radius:var(--radius-md, 14px);font-size:.8rem;line-height:1.55;position:relative;word-break:break-word;}
.ai-msg-wrap.user .ai-msg{background:var(--ai-accent);border:none;color:#fff;border-bottom-right-radius:4px;}
.ai-msg-wrap.ai .ai-msg{background:var(--ai-s2);border:1px solid var(--ai-border2);color:var(--ai-text);border-bottom-left-radius:4px;padding-right:2.2rem;}
.ai-msg-wrap.ai-welcome .ai-msg-avatar{
  width:28px;height:28px;border-radius:var(--radius-sm, 10px);font-size:.8rem;margin-top:1px;
  box-shadow:0 6px 18px rgba(124,77,255,.25);
}
.ai-msg-wrap.ai-welcome .ai-msg-content{max-width:100%;width:100%;}
.ai-msg-wrap.ai-welcome .ai-msg{
  padding:.76rem .9rem .82rem;
  border-radius:var(--radius-lg, 18px);
  background:
    linear-gradient(135deg, rgba(124,77,255,.18), rgba(0,176,255,.08)),
    rgba(19,19,31,.96);
  border:1px solid rgba(124,77,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-size:.8rem;
  line-height:1.58;
}
.ai-msg-wrap.ai-welcome .ai-msg-copy{top:.55rem;right:.55rem;}
.ai-msg-wrap.ai-welcome .ai-msg-time{padding:.08rem .25rem 0 2.15rem;}
.ai-msg-time{font-size:.58rem;color:var(--ai-muted);font-family:'JetBrains Mono',monospace;padding:0 .2rem;}
.ai-msg-copy{position:absolute;top:.3rem;right:.3rem;background:rgba(255,255,255,.06);border:none;border-radius:var(--radius-xs, 6px);color:rgba(255,255,255,.3);font-size:.58rem;padding:.15rem .35rem;cursor:pointer;opacity:0;transition:opacity .18s;line-height:1;}
.ai-msg-wrap.ai .ai-msg:hover .ai-msg-copy{opacity:1;}
.ai-msg-copy:hover{color:#fff;background:rgba(124,77,255,.3);}
.ai-inline-cta{background:linear-gradient(135deg,var(--primary),var(--accent));border:none;color:#fff;font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;padding:.28rem .65rem;border-radius:var(--radius-sm, 10px);cursor:pointer;transition:all .18s;vertical-align:middle;}
.ai-inline-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(47,128,237,.35);}
[data-theme="light"] .ai-inline-cta{color:#fff;}
.ai-msg-reactions{display:flex;gap:.4rem;margin:.2rem .2rem 0;}
.ai-msg-react-btn{all:unset;display:flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:var(--radius-full, 50%);background:linear-gradient(135deg,rgba(124,77,255,.18),rgba(0,176,255,.12));border:1px solid rgba(124,77,255,.3);color:var(--ai-text);font-size:.82rem;line-height:1;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;box-shadow:none;margin:0;padding:0;}
.ai-msg-react-btn:hover{transform:scale(1.12);background:linear-gradient(135deg,rgba(124,77,255,.3),rgba(0,176,255,.2));border-color:rgba(124,77,255,.5);}
.ai-msg-react-btn.active{background:linear-gradient(135deg,#7C4DFF,#00B0FF);border-color:transparent;color:#fff;}
.ai-typing-stop{all:unset;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:var(--radius-full, 50%);background:linear-gradient(135deg,rgba(124,77,255,.22),rgba(0,176,255,.16));border:1px solid rgba(124,77,255,.35);color:var(--ai-text);font-size:.65rem;line-height:1;cursor:pointer;margin-left:.5rem;transition:transform .15s ease,background .15s ease,border-color .15s ease;}
.ai-typing-stop:hover{transform:scale(1.1);background:linear-gradient(135deg,#7C4DFF,#00B0FF);border-color:transparent;color:#fff;}
.ai-msg strong{color:#C0B8FF;font-weight:600;}
.ai-msg code{font-family:'JetBrains Mono',monospace;font-size:.72rem;background:rgba(0,0,0,.4);padding:.1rem .35rem;border-radius:var(--radius-2xs, 4px);color:#80CFFF;border:1px solid rgba(128,207,255,.12);}
.ai-msg em{color:#B8D4E3;font-style:italic;}
.ai-msg del{color:rgba(180,180,220,.5);text-decoration:line-through;}
.ai-md-h{color:#E8C978;font-size:.95rem;font-weight:700;margin:.6rem 0 .3rem;border-bottom:1px solid rgba(232,201,120,.15);padding-bottom:.2rem;}
.ai-md-h:first-child{margin-top:0;}
.ai-md-list{list-style:disc;padding-left:1.3rem;margin:.3rem 0;}
.ai-md-list li{margin:.15rem 0;color:var(--ai-text, #d4d4e8);font-size:.88rem;}
.ai-md-link{color:#80CFFF;text-decoration:underline;text-underline-offset:2px;}
.ai-md-link:hover{color:#a8deff;}
.ai-md-hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:.5rem 0;}
.ai-code-block{position:relative;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm, 8px);padding:.6rem .8rem;margin:.4rem 0;overflow-x:auto;}
.ai-code-block code{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:#e0e0e8;background:transparent;border:none;padding:0;white-space:pre-wrap;word-break:break-word;}
.ai-code-copy{position:absolute;top:.35rem;right:.35rem;font-size:.65rem;padding:.2rem .5rem;border-radius:var(--radius-xs, 4px);background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:none;cursor:pointer;transition:background .15s, color .15s;}
.ai-code-copy:hover{background:rgba(255,255,255,.2);color:#fff;}
/* Typing */
.ai-typing .ai-msg{display:flex;gap:4px;align-items:center;padding:.65rem .85rem;}
.ai-typing-dot{width:5px;height:5px;background:rgba(124,77,255,.7);border-radius:var(--radius-full, 50%);animation:typingBounce 1.3s ease-in-out infinite;}
.ai-typing-dot:nth-child(2){animation-delay:.18s;}
.ai-typing-dot:nth-child(3){animation-delay:.36s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.ai-cursor-blink{color:var(--ai-accent,#7c4dff);animation:cursorBlink .8s step-end infinite;font-weight:400;}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.ai-msg-retry{display:inline-flex;align-items:center;gap:4px;margin-top:.35rem;padding:.25rem .55rem;font-size:.68rem;color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm, 8px);cursor:pointer;transition:all .15s;}
@media(hover:hover){.ai-msg-retry:hover{color:#fff;background:rgba(124,77,255,.25);border-color:rgba(124,77,255,.35);}}
[data-theme="light"] .ai-msg-retry{color:rgba(15,23,42,.4);background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.08);}
[data-theme="light"] .ai-msg-retry:hover{color:#0f172a;background:rgba(124,77,255,.1);}
/* Head action buttons */
.ai-head-actions{display:flex;gap:5px;margin-left:auto;}
.ai-head-btn{width:26px;height:26px;border-radius:var(--radius-xs, 6px);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(200,200,230,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .18s;}
.ai-head-btn:hover{background:rgba(124,77,255,.2);color:#fff;border-color:rgba(124,77,255,.5);}
/* Suggestions */
.ai-sugs-wrap{display:none !important;}
.ai-sug-btn{font-size:.65rem;padding:.28rem .65rem;border-radius:var(--radius-xl, 22px);border:1px solid rgba(255,255,255,.08);background:rgba(124,77,255,.06);color:rgba(200,200,230,.55);cursor:pointer;transition:all .18s;white-space:nowrap;font-family:inherit;}
.ai-sug-btn:hover{background:rgba(124,77,255,.18);color:#fff;border-color:rgba(124,77,255,.4);transform:translateY(-1px);}
/* Search results */
.ai-search-results{background:rgba(17,17,31,.95);border:1px solid rgba(124,77,255,.18);border-radius:var(--radius-md, 14px);overflow:hidden;margin-top:2px;width:100%;}
.ai-sr-head{padding:.45rem .7rem .35rem;font-size:.65rem;color:rgba(200,200,230,.5);border-bottom:1px solid rgba(124,77,255,.12);display:flex;align-items:center;gap:5px;}
.ai-sr-head span{color:#7C4DFF;font-weight:600;}
.ai-sr-images{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:.5rem;}
.ai-sr-img{aspect-ratio:1;border-radius:var(--radius-sm, 10px);overflow:hidden;cursor:pointer;border:1px solid rgba(124,77,255,.15);transition:transform .18s;background:rgba(26,26,46,.8);position:relative;}
.ai-sr-img:hover{transform:scale(1.04);border-color:rgba(124,77,255,.5);}
.ai-sr-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ai-sr-img-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);font-size:.55rem;color:rgba(255,255,255,.8);padding:6px 5px 3px;font-family:'JetBrains Mono',monospace;}
.ai-sr-links{padding:0 .5rem .5rem;display:flex;flex-direction:column;gap:3px;}
.ai-sr-link{padding:.42rem .55rem;border-radius:var(--radius-sm, 10px);border:1px solid transparent;transition:all .18s;cursor:pointer;display:flex;align-items:flex-start;gap:7px;}
.ai-sr-link:hover{background:rgba(124,77,255,.08);border-color:rgba(124,77,255,.18);}
.ai-sr-link-icon{font-size:.8rem;margin-top:1px;flex-shrink:0;}
.ai-sr-link-info{flex:1;min-width:0;}
.ai-sr-link-title{font-size:.74rem;color:#d0d0f0;font-weight:500;margin-bottom:1px;line-height:1.35;}
.ai-sr-link-url{font-size:.62rem;color:#7C4DFF;font-family:'JetBrains Mono',monospace;}
.ai-sr-link-snippet{font-size:.66rem;color:rgba(200,200,230,.52);line-height:1.45;margin-top:2px;}
/* Input */
.ai-input-wrap{
  padding:.6rem .85rem .8rem;
  border-top:1px solid var(--ai-border2);
  display:flex;flex-direction:column;gap:.55rem;flex-shrink:0;
  background:var(--ai-s1);
  position:relative;z-index:1;
}
/* ── Acciones rápidas ── */
.ai-quick-actions{
  display:flex;gap:.4rem;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;
}
.ai-quick-actions::-webkit-scrollbar{display:none;}
.ai-quick-btn{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.32rem .72rem;border-radius:var(--radius-xl, 22px);
  border:1px solid var(--ai-border2);
  background:var(--ai-s2);
  color:var(--ai-muted);font-size:.68rem;font-family:var(--btn-font);
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:var(--btn-transition);
}
@media (hover: hover) {
  .ai-quick-btn:hover,.ai-quick-btn.active{
    border-color:var(--ai-accent);
    background:rgba(124,77,255,.14);
    color:#fff;
  }
}
.ai-quick-btn:active{transform:scale(.96);}
.ai-quick-btn i{font-size:.7rem;}
/* Botón imagen — mismo estilo neutral que el resto */
#ai-img-btn{border-color:var(--ai-border2);background:var(--ai-s2);color:var(--ai-muted);}
#ai-img-btn:hover{border-color:var(--ai-accent);background:rgba(124,77,255,.14);color:#fff;}
/* ── Shell del input ── */
.ai-input-shell{
  position:relative;
  background:var(--ai-s2);
  border:1px solid var(--ai-border2);
  border-radius:var(--radius-lg, 18px);
  transition:border-color .15s,box-shadow .15s;
  overflow:hidden;
}
.ai-input-shell:focus-within{
  border-color:var(--ai-accent);
  box-shadow:0 0 0 3px rgba(124,77,255,.14);
}
/* (glow RGB del borde eliminado — ahora el foco usa solo el ring de arriba) */
.ai-input-row{
  display:flex;align-items:flex-end;
  position:relative;z-index:1;
  padding:.1rem .1rem .1rem .1rem;
}
#ai-input,.ai-input-row,#ai-send-btn{position:relative;z-index:1;}
#ai-input{
  flex:1;
  background:transparent;
  border:none;
  border-radius:0;
  color:#e8e8f8;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:.8rem;
  padding:.72rem .88rem .72rem .96rem;
  outline:none;resize:none;
  max-height:140px;min-height:42px;height:42px;
  transition:height .18s ease;
  line-height:1.45;
  letter-spacing:.01em;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(124,77,255,.3) transparent;
  word-break:break-word;overflow-wrap:break-word;
}
#ai-input::placeholder{color:rgba(180,180,220,.28);font-style:italic;}
/* Footer dentro del shell */
.ai-input-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:.25rem .75rem .45rem;
  border-top:1px solid rgba(255,255,255,.04);
  position:relative;z-index:1;
}
.ai-input-hint-inline{
  font-size:.56rem;font-family:'JetBrains Mono',monospace;
  color:rgba(180,160,255,.4);letter-spacing:.04em;
}
#ai-send-btn{
  width:42px;height:42px;border-radius:var(--radius-md, 14px);
  background:var(--ai-accent);
  border:none;color:#fff;font-size:.82rem;
  cursor:pointer;flex-shrink:0;margin:.1rem .1rem .1rem 0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:none;
  transition:background .15s,transform .15s;overflow:hidden;position:relative;
  align-self:flex-end;
}
#ai-send-btn:hover{background:var(--ai-accent2);transform:translateY(-1px);}
#ai-send-btn:active{transform:scale(.94);}
#ai-send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
#emi-mic-btn{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(0,229,255,.25);background:rgba(0,229,255,.08);
  color:var(--c,#00e5ff);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;
  position:relative;overflow:hidden;
}
#emi-mic-btn:hover{background:rgba(0,229,255,.16);border-color:rgba(0,229,255,.5);transform:scale(1.04);}
#emi-mic-btn.emi-mic-active{
  background:rgba(47,128,237,.18);border-color:rgba(47,128,237,.7);color:#2f80ed;
  box-shadow:0 0 16px rgba(47,128,237,.35);animation:emi-mic-pulse 1.4s ease-in-out infinite;
}
#emi-mic-btn.emi-mic-unsupported{opacity:.38;cursor:not-allowed;}
@keyframes emi-mic-pulse{
  0%,100%{box-shadow:0 0 10px rgba(47,128,237,.3);}
  50%{box-shadow:0 0 22px rgba(47,128,237,.65);}
}
.emi-mic-ripple{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(47,128,237,.3) 0%,transparent 70%);
  opacity:0;transform:scale(0);transition:none;
}
#emi-mic-btn.emi-mic-active .emi-mic-ripple{animation:emi-ripple-expand 1.4s ease-out infinite;}
@keyframes emi-ripple-expand{
  0%{opacity:.5;transform:scale(0);}
  100%{opacity:0;transform:scale(2);}
}
/* ── Botón adjuntar imagen/PDF ── */
#emi-attach-btn{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(124,77,255,.28);background:rgba(124,77,255,.08);
  color:#9d8cff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;
  margin:0 .15rem .1rem 0;align-self:flex-end;
}
#emi-attach-btn:hover{background:rgba(124,77,255,.16);border-color:rgba(124,77,255,.55);color:#c4b8ff;transform:scale(1.04);}
/* ── Chip de adjunto sobre el input ── */
.ai-attach-slot{
  display:flex;align-items:center;gap:.5rem;min-width:0;
  background:rgba(124,77,255,.1);
  border:1px solid rgba(124,77,255,.3);
  border-radius:var(--radius-md, 12px);
  padding:.42rem .7rem;margin:0 0 .4rem;
  font-size:.72rem;font-family:'JetBrains Mono',monospace;
  color:#d0c4ff;
}
.ai-attach-slot>i{color:#ff8fb8;font-size:.8rem;flex-shrink:0;}
.ai-attach-slot>span{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e6e0ff;
}
.ai-attach-slot>em{font-style:normal;color:rgba(180,160,255,.55);white-space:nowrap;flex-shrink:0;}
.ai-attach-slot>button{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(255,82,82,.15);color:#ff9a9a;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;transition:background .2s;
}
.ai-attach-slot>button:hover{background:rgba(255,82,82,.32);}
@media (max-width:480px){
  .ai-attach-slot>em{display:none;}
}
/* Bubble de PDF adjunto en el chat */
.ai-attach-msg-pdf-wrap{
  display:flex;align-items:center;gap:.5rem;max-width:100%;min-width:0;
  padding:.5rem .7rem;border-radius:var(--radius-md, 12px);
  background:rgba(124,77,255,.12);border:1px solid rgba(124,77,255,.3);
  color:#d0c4ff;font-size:.75rem;font-family:'JetBrains Mono',monospace;
}
.ai-attach-msg-pdf-wrap i{color:#ff8fb8;flex-shrink:0;}
.ai-attach-msg-pdf-wrap span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e6e0ff;}
/* Toast fallback (solo si no existe #toast en CodeHub) */
.emi-voice-toast{
  position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%) translateY(12px);
  background:rgba(13,13,26,.96);border:1px solid rgba(255,255,255,.1);color:#f0f0fa;
  padding:.55rem 1.1rem;border-radius:99px;font-size:.75rem;
  font-family:var(--mono,monospace);opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .25s,transform .25s;white-space:nowrap;max-width:90vw;text-align:center;
}
.emi-voice-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.emi-voice-toast.error{border-color:rgba(47,128,237,.5);color:#ff9a7a;}
.emi-voice-toast.warn{border-color:rgba(56,189,248,.5);color:var(--a,#38bdf8);}
.ai-char-count{font-size:.59rem;font-family:'JetBrains Mono',monospace;color:rgba(180,180,220,.35);transition:color .2s;}
.ai-char-count.warn{color:rgba(255,171,0,.7);}
.ai-char-count.over{color:rgba(255,82,82,.8);}
.ai-input-actions{display:flex;align-items:center;gap:.35rem;}
.ai-action-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:8px;font-size:.85rem;line-height:1;
  color:rgba(180,160,255,.55);transition:color .2s,background .2s,transform .1s;
  -webkit-tap-highlight-color:transparent;}
.ai-action-btn:hover{color:#fff;background:rgba(180,160,255,.14);}
.ai-action-btn:active{transform:scale(.92);}
/* Imagen generada en el chat */
.ai-gen-img-wrap{margin:.3rem 0;}
.ai-gen-img{
  width:auto;max-width:200px;max-height:200px;border-radius:var(--radius-md, 14px);display:block;
  cursor:zoom-in;transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.5);object-fit:cover;
}
.ai-gen-img:hover{transform:scale(1.02);box-shadow:0 8px 32px rgba(124,77,255,.3);}
.ai-gen-img-footer{
  font-size:.65rem;color:rgba(180,180,220,.5);
  font-family:'JetBrains Mono',monospace;
  margin-top:.45rem;display:flex;align-items:center;gap:.4rem;
}
.ai-gen-img-footer i{color:rgba(255,107,170,.7);}
.ai-gen-img-prompt{
  margin-top:.4rem;font-size:.62rem;font-family:'JetBrains Mono',monospace;
  color:rgba(180,160,255,.65);border:1px solid rgba(180,160,255,.14);
  border-radius:10px;padding:.35rem .55rem;background:rgba(180,160,255,.05);
  max-width:100%;word-break:break-word;min-width:0;
}
.ai-gen-img-prompt summary{
  cursor:pointer;color:rgba(200,180,255,.85);display:flex;align-items:center;gap:.3rem;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.ai-gen-img-prompt span{display:block;margin-top:.3rem;color:rgba(190,190,230,.7);line-height:1.45;word-break:break-word;}
@media (max-width:480px){
  .ai-gen-img-prompt{font-size:.58rem;padding:.3rem .45rem;}
}

/* ── Lightbox: toca la miniatura para verla en grande ── */
#ai-img-lightbox{
  position:fixed;inset:0;z-index:99998;background:rgba(6,6,10,.92);
  display:none;align-items:center;justify-content:center;padding:1.2rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#ai-img-lightbox.open{display:flex;animation:aiLightboxIn .18s ease-out both;}
@keyframes aiLightboxIn{from{opacity:0}to{opacity:1}}
#ai-img-lightbox img{
  max-width:min(94vw,900px);max-height:88vh;border-radius:var(--radius-md, 14px);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:aiLightboxZoom .22s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes aiLightboxZoom{from{transform:scale(.9);opacity:.4}to{transform:scale(1);opacity:1}}
#ai-img-lightbox-close{
  position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));
  width:44px;height:44px;border-radius:var(--radius-full, 50%);
  background:rgba(20,20,28,.7);border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
#ai-img-lightbox-close:hover{
  background:rgba(47,128,237,.22);border-color:rgba(47,128,237,.5);
  transform:scale(1.08);
}
#ai-img-lightbox-close:active{ transform:scale(.92); }
#ai-img-lightbox-close::before,
#ai-img-lightbox-close::after{
  content:'';position:absolute;width:18px;height:2px;border-radius:var(--radius-2xs, 4px);
  background:#fff;
}
#ai-img-lightbox-close::before{ transform:rotate(45deg); }
#ai-img-lightbox-close::after{ transform:rotate(-45deg); }
@media(max-width:640px){
  .ai-gen-img{max-width:150px;max-height:150px;}
}
@media(max-width:920px){
  .ai-bottom-bar { min-height:66px; padding-left:.85rem; padding-right:.85rem; }
  .ai-circle-btn { min-height:44px; }
  .ai-input-wrap { padding:.55rem .75rem .7rem; }
  #ai-send-btn { width:44px; height:44px; border-radius:var(--radius-md, 14px); }

  #ai-panel{
    right:14px;bottom:74px;
    width:min(420px,calc(100vw - 20px));
    height:min(680px,calc(100dvh - 88px));
    max-height:min(680px,calc(100dvh - 88px));
  }
}

/* ── AI panel 550px ── */
@media(max-width:550px){
  #ai-fab { right:16px; bottom:20px; height:46px; padding:0 14px 0 10px; }
  #ai-fab .ai-fab-sub { display:none; }
  #ai-panel {
    right:0 !important; left:0 !important; bottom:0 !important;
    width:100% !important;
    height:min(90dvh,800px) !important;
    max-height:min(90dvh,800px) !important;
    border-radius:var(--radius-xl, 22px) var(--radius-xl, 22px) 0 0 !important;
    border-bottom:none !important;
    transform:translateY(100%) !important;
    transform-origin:bottom center !important;
  }
  #ai-panel.open { transform:translateY(0) !important; animation:mobileSlideUp .35s cubic-bezier(.2,.9,.2,1) both; }
  #ai-input { font-size:16px !important; }
  .ai-head { padding-top:1.5rem; padding-left:.9rem; padding-right:.9rem; }
  .ai-head-title { font-size:.9rem; }
  .ai-head-sub { font-size:.58rem; }
  .ai-bottom-bar { min-height:66px; padding-left:.85rem; padding-right:.85rem; }
  .ai-circle-btn { min-height:44px; }
  .ai-input-wrap { padding:.65rem .85rem .75rem; }
  #ai-send-btn { width:46px; height:44px; border-radius:var(--radius-md, 14px); }
  .ai-msg { font-size:.8rem; }
  #ai-msgs { padding:.75rem .85rem 1rem; }
}
/* Mobile */
@media(max-width:640px){
  #ai-panel{right:0;left:0;bottom:0;width:100%;height:min(92dvh,820px);max-height:min(92dvh,820px);min-height:0;border-radius:var(--radius-xl, 22px) var(--radius-xl, 22px) 0 0;border-bottom:none;transform:translateY(100%);transform-origin:bottom center;}
  #ai-panel.open{transform:translateY(0);animation:mobileSlideUp .35s cubic-bezier(.2,.9,.2,1) both;}
  @keyframes mobileSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  #ai-panel::after{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:36px;height:4px;background:rgba(255,255,255,.18);border-radius:var(--radius-2xs, 4px);}
  .ai-head{padding-top:1.5rem;padding-left:1rem;padding-right:1rem;}
  .ai-head-avatar{width:38px;height:38px;}
  .ai-head-title{font-size:.95rem;}
  .ai-head-sub{font-size:.62rem;gap:.34rem;}
  .ai-bottom-bar{grid-template-columns:repeat(3,1fr);gap:.55rem;padding:.72rem 1rem calc(.96rem + env(safe-area-inset-bottom, 0px));min-height:70px;}
  .ai-circle-btn{padding:.56rem .68rem;gap:.48rem;border-radius:var(--radius-md, 14px);}
  .ai-circle-icon{width:32px;height:32px;}
  .ai-circle-label{font-size:.6rem;}
  .ai-input-topline{gap:.4rem;}
  .ai-input-hint{font-size:.54rem;}
  .ai-input-wrap{padding:.7rem .85rem .8rem;}
  #ai-input{font-size:.88rem;padding:.75rem .9rem;}
  #ai-send-btn{width:48px;height:44px;border-radius:var(--radius-md, 14px);}
  #ai-fab{right:14px;bottom:84px;height:46px;padding:0 14px 0 10px;gap:8px;}
  #ai-fab .ai-fab-sub{display:none;}
}
@media(max-width:420px){
  .ai-mood-label{display:none;}
  .ai-head{padding-left:.9rem;padding-right:.9rem;}
  .ai-head-title{font-size:.9rem;}
  .ai-head-sub{font-size:.56rem;}
  .ai-bottom-bar{grid-template-columns:repeat(3,1fr);gap:.5rem;padding-left:.75rem;padding-right:.75rem;}
  .ai-input-topline{flex-direction:column;align-items:flex-start;gap:.3rem;}
  .ai-input-hint{max-width:100%;}
}
@media(max-width:380px){
  #ai-fab .ai-fab-label{font-size:.73rem;}
  .ai-circle-btn{padding:.52rem .54rem;}
}

/* ═══ HERO ═══════════════════════════════════════════════ */
        /* ── PARALLAX HERO ── */
        #hero {
            padding: 2.5rem 0 1.5rem;
            margin-top: 0 !important;
            position: relative;
            overflow: hidden;
        }
        /* Parallax canvas behind everything */
        #hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: .55;
        }
        /* Floating gradient orbs */
        .parallax-orb {
            position: absolute;
            border-radius: var(--radius-full, 50%);
            pointer-events: none;
            filter: blur(60px);
            will-change: transform;
            z-index: 0;
        }
        .parallax-orb-1 {
            width: 420px; height: 420px;
            background: radial-gradient(circle, rgba(47,128,237,.18) 0%, transparent 70%);
            top: -80px; right: -60px;
        }
        .parallax-orb-2 {
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(0,229,255,.13) 0%, transparent 70%);
            bottom: -40px; left: -40px;
        }
        .parallax-orb-3 {
            width: 200px; height: 200px;
            background: radial-gradient(circle, rgba(0,230,118,.10) 0%, transparent 70%);
            top: 40%; left: 35%;
        }
        /* Grid overlay */
        .parallax-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
            z-index: 0;
            will-change: transform;
        }
        /* Scanline shimmer */
        .parallax-scanline {
            position: absolute;
            left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(47,128,237,.35), transparent);
            pointer-events: none;
            z-index: 1;
            animation: scanMove 4s linear infinite;
            top: 0;
        }
        @keyframes scanMove {
            0%   { top: 0%; opacity: 0; }
            5%   { opacity: 1; }
            95%  { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        /* Hero inner content stays above parallax layers */
        .hero-inner { position: relative; z-index: 2; }
        .hero-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        @media(max-width:860px){ .hero-inner { grid-template-columns:1fr; } .hero-visual { display:none; } }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            color: var(--accent);
            background: rgba(56,189,248,.08);
            border: 1px solid rgba(56,189,248,.2);
            padding: .28rem .9rem;
            border-radius: var(--radius-xl, 22px);
            margin-bottom: 1.2rem;
        }
        .hero-dot {
            width: 7px; height: 7px;
            border-radius: var(--radius-full, 50%);
            background: #00e676;
            animation: heroDot 2.5s ease-in-out infinite;
        }
        @keyframes heroDot { 0%,100%{opacity:1} 50%{opacity:.3} }

        .hero-title {
            font-size: clamp(2rem, 4.5vw, 3.5rem);
            font-weight: 900;
            line-height: 1.05;
            letter-spacing: -.03em;
            color: rgba(232,232,240,.85);
            margin-bottom: .9rem;
            display: flex;
            flex-direction: column;
            gap: .05em;
        }
        .hero-title-greeting {
            display: block;
            color: rgba(232,232,240,.85);
        }
        .hero-name {
            color: #fff;
            position: relative;
            overflow: visible;
            display: inline-block;
        }

        /* ── LIQUID LETTERS — CodeHub & Wilson.E ── */
        .liquid-word {
            display: inline-block;
            position: relative;
            cursor: default;
        }
        .liquid-letter {
            display: inline-block;
            position: relative;
            will-change: transform, color;
            transition: color .18s ease, text-shadow .18s ease;
        }


        /* ════════════════════════════════════════
           SPLASH SCREEN — CodeHub Pro (Rediseño Elegante)
        ════════════════════════════════════════ */
        #ch-splash {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background:
                radial-gradient(ellipse 80% 60% at 50% 20%, rgba(106,17,255,.18) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0,198,255,.1) 0%, transparent 60%),
                radial-gradient(ellipse 50% 40% at 20% 70%, rgba(37,117,252,.08) 0%, transparent 60%),
                #06060f;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
        }
        #ch-splash.ch-splash--out {
            opacity: 0;
            transform: scale(1.06);
            pointer-events: none;
        }

        /* Partículas de fondo */
        #ch-splash-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* ── Ondas líquidas en la base ── */
        .ch-waves {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 200px;
            z-index: 1;
            pointer-events: none;
        }
        .ch-wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 110px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M0 7 C25 0 50 14 75 7 S125 0 150 7 S175 14 200 7 L200 14 L0 14 Z' fill='%23ffffff'/%3E%3C/svg%3E");
            background-size: 1000px 110px;
        }
        /* Ola 1 — magenta/violeta principal, más opaca */
        .ch-wave.w1 {
            animation: chWave1 16s linear infinite;
            z-index: 4;
            opacity: 0.75;
            bottom: 0;
            filter: hue-rotate(200deg) saturate(2) brightness(1.4);
        }
        /* Ola 2 — cian eléctrico */
        .ch-wave.w2 {
            animation: chWave2 10s linear infinite;
            z-index: 3;
            opacity: 0.5;
            bottom: 10px;
            animation-delay: -3s;
            filter: hue-rotate(160deg) saturate(3) brightness(1.6);
        }
        /* Ola 3 — naranja/coral suave de fondo */
        .ch-wave.w3 {
            animation: chWave1 24s linear infinite;
            z-index: 2;
            opacity: 0.22;
            bottom: 18px;
            animation-delay: -8s;
            filter: hue-rotate(0deg) saturate(2) brightness(1.2);
        }
        /* Ola 4 — violeta profundo, rápida */
        .ch-wave.w4 {
            animation: chWave2 7s linear infinite;
            z-index: 1;
            opacity: 0.45;
            bottom: 26px;
            animation-delay: -1s;
            filter: hue-rotate(240deg) saturate(2.5) brightness(1.3);
        }
        /* Gradiente sobre las olas para fusionarlas con el fondo */
        .ch-waves::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 60%;
            background: linear-gradient(to bottom,
                #06060f 0%,
                transparent 100%);
            z-index: 6;
            pointer-events: none;
        }
        /* Resplandor de color en la base */
        .ch-waves::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 70px;
            background: linear-gradient(to top,
                rgba(106,17,255, 0.25) 0%,
                rgba(0,198,255, 0.12) 50%,
                transparent 100%);
            z-index: 7;
            pointer-events: none;
        }
        @keyframes chWave1 {
            0%   { background-position-x: 0; }
            100% { background-position-x: 1000px; }
        }
        @keyframes chWave2 {
            0%   { background-position-x: 0; }
            100% { background-position-x: -1000px; }
        }

        /* Anillo exterior giratorio */
        .ch-ring-wrap {
            position: relative;
            width: 320px;
            height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            z-index: 10;
            animation: chFadeUp .7s cubic-bezier(.16,1,.3,1) .1s both, chRingBreathe 4s ease-in-out infinite 1s;
        }
        @keyframes chRingBreathe {
            0%,100% { transform: scale(1) rotate(0deg); }
            25%     { transform: scale(1.04) rotate(2deg); }
            50%     { transform: scale(1.02) rotate(0deg); }
            75%     { transform: scale(1.04) rotate(-2deg); }
        }
        .ch-ring {
            position: absolute;
            inset: 0;
            border-radius: var(--radius-full, 50%);
            background: conic-gradient(from 0deg, #2f80ed, #22c55e, #6a11ff, #2575fc, #00c6ff, #7c4dff, #2f80ed);
            animation: chSpin 2.8s linear infinite;
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
            mask:         radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
        }
        .ch-ring-inner {
            position: absolute;
            inset: 12px;
            border-radius: var(--radius-full, 50%);
            background: conic-gradient(from 180deg, #2f80ed, #38bdf8, #00c6ff, #6a11ff, #2f80ed);
            animation: chSpinRev 4s linear infinite;
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 2px));
            mask:         radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 2px));
            opacity: .6;
        }
        .ch-glow-ring {
            position: absolute;
            inset: -10px;
            border-radius: var(--radius-full, 50%);
            box-shadow:
                0 0 28px rgba(106,17,255,.8),
                0 0 56px rgba(37,117,252,.4),
                0 0 90px rgba(0,198,255,.2);
            animation: chGlowPulse 2.5s ease-in-out infinite;
        }
        @keyframes chSpin    { to { transform: rotate(360deg);  } }
        @keyframes chSpinRev { to { transform: rotate(-360deg); } }
        /* Logo orbiting glow dots */
        @keyframes chLogoOrbit {
            0%   { transform: rotate(0deg)   translateX(115px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(115px) rotate(-360deg); }
        }
        @keyframes chGlowPulse {
            0%,100% { opacity: .6;  box-shadow: 0 0 28px rgba(106,17,255,.8), 0 0 56px rgba(37,117,252,.4); }
            50%     { opacity: 1;   box-shadow: 0 0 44px rgba(106,17,255,1),  0 0 88px rgba(0,198,255,.55); }
        }

        /* Logo centrado — aparece al cargar */
        .ch-logo-img {
            width: 210px;
            height: 210px;
            border-radius: var(--radius-3xl, 50px);
            object-fit: contain;
            position: relative;
            z-index: 2;
            opacity: 0;
            transition: opacity .5s ease, filter .5s ease;
            filter: drop-shadow(0 0 32px rgba(47,128,237,.9));
        }
        .ch-logo-img.loaded {
            opacity: 1 !important;
            animation: chLogoPop .6s cubic-bezier(.16,1,.3,1) both, chLogoSpin 8s linear infinite .7s;
        }
        @keyframes chLogoSpin {
            0%   { filter: drop-shadow(0 0 28px rgba(47,128,237,.9)) drop-shadow(0 0 0px rgba(106,17,255,0)); }
            25%  { filter: drop-shadow(0 0 20px rgba(37,117,252,.9)) drop-shadow(16px 0 28px rgba(0,198,255,.6)); }
            50%  { filter: drop-shadow(0 0 28px rgba(124,77,255,.9)) drop-shadow(0 16px 28px rgba(106,17,255,.6)); }
            75%  { filter: drop-shadow(0 0 20px rgba(47,128,237,.7)) drop-shadow(-16px 0 28px rgba(34,197,94,.6)); }
            100% { filter: drop-shadow(0 0 28px rgba(47,128,237,.9)) drop-shadow(0 0 0px rgba(106,17,255,0)); }
        }
        @keyframes chLogoPop {
            from { transform: scale(.75); }
            to   { transform: scale(1);   }
        }

        /* Texto inferior */
        .ch-brand {
            margin-top: 1.8rem;
            text-align: center;
            position: relative;
            z-index: 10;
            animation: chFadeUp .6s ease .5s both;
        }
        .ch-brand-name {
            font-family: 'Space Grotesk', system-ui, sans-serif;
            font-size: 2.1rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: .05em;
            line-height: 1;
        }
        .ch-brand-name span {
            background: linear-gradient(90deg, #2575fc, #00c6ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .ch-brand-sub {
            margin-top: .4rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: .6rem;
            letter-spacing: .3em;
            color: rgba(255,255,255,.3);
            text-transform: uppercase;
        }

        /* Barra de progreso — Pro */
        .ch-progress-wrap {
            margin-top: 2rem;
            width: 220px;
            position: relative;
            z-index: 10;
            animation: chFadeUp .6s ease .65s both;
        }
        .ch-progress-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .55rem;
        }
        .ch-progress-status {
            font-family: 'JetBrains Mono', monospace;
            font-size: .58rem;
            color: rgba(255,255,255,.3);
            letter-spacing: .1em;
            text-transform: uppercase;
        }
        .ch-progress-pct {
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            font-weight: 700;
            color: #00c6ff;
            letter-spacing: .05em;
            min-width: 36px;
            text-align: right;
        }
        .ch-progress-track {
            height: 4px;
            background: rgba(255,255,255,.06);
            border-radius: var(--radius-pill, 999px);
            overflow: hidden;
            position: relative;
        }
        .ch-progress-track::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(47,128,237,.08);
            border-radius: var(--radius-pill, 999px);
        }
        .ch-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #6a11ff, #2575fc, #00c6ff);
            border-radius: var(--radius-pill, 999px);
            transition: width .12s linear;
            box-shadow: 0 0 14px rgba(106,17,255,.9), 0 0 4px #fff3;
            position: relative;
        }
        .ch-progress-bar::after {
            content: '';
            position: absolute;
            right: 0; top: 50%;
            transform: translateY(-50%);
            width: 8px; height: 8px;
            border-radius: var(--radius-full, 50%);
            background: #00c6ff;
            box-shadow: 0 0 8px #00c6ff, 0 0 16px rgba(0,198,255,.6);
        }


        /* ── Splash mobile optimization ─────────────────────── */
        @media (max-width: 640px) {
            .ch-ring-wrap {
                width: 220px;
                height: 220px;
            }
            .ch-logo-img {
                width: 150px;
                height: 150px;
                border-radius: var(--radius-2xl, 28px);
            }
            .ch-brand-name { font-size: 1.6rem; }
            .ch-progress-wrap { width: 180px; }
            .ch-waves { height: 140px; }
        }
        @media (max-width: 380px) {
            .ch-ring-wrap { width: 180px; height: 180px; }
            .ch-logo-img { width: 120px; height: 120px; border-radius: var(--radius-xl, 22px); }
        }

        @keyframes chFadeUp {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0);    }
        }

        .hero-desc {
            font-size: .95rem;
            color: rgba(232,232,240,.5);
            line-height: 1.75;
            max-width: 480px;
            margin-bottom: 1.4rem;
        }
        .hero-stack {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin-bottom: 1.6rem;
        }
        .hero-stack span {
            font-family: 'JetBrains Mono', monospace;
            font-size: .68rem;
            color: rgba(232,232,240,.5);
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.08);
            padding: .2rem .6rem;
            border-radius: var(--radius-xs, 6px);
        }
        .hero-ctas { display: flex; gap: .65rem; flex-wrap: wrap; }
        .hero-btn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: var(--btn-padding);
            border-radius: var(--btn-radius);
            font-family: var(--btn-font);
            font-size: .83rem;
            font-weight: 700;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: var(--btn-transition);
        }
        .hero-btn:active { transform: scale(.97); }
        .hero-btn-ghost {
            background: rgba(255,255,255,.05);
            color: rgba(232,232,240,.65);
            border: 1px solid rgba(255,255,255,.1);
        }
        .hero-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

        /* Hero card de código */
        .hero-visual { display: flex; justify-content: flex-end; }
        .hero-card {
            width: 100%;
            max-width: 400px;
            background: rgba(12,12,22,.95);
            border: 1px solid rgba(47,128,237,.2);
            border-radius: var(--radius-lg, 18px);
            overflow: hidden;
            box-shadow: 0 24px 72px rgba(0,0,0,.6);
            animation: heroCardIn .8s cubic-bezier(.2,.9,.2,1) .3s both;
        }
        @keyframes heroCardIn { from{opacity:0;transform:translateY(24px) rotate(1deg)} to{opacity:1;transform:none} }
        .hc-header {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .7rem 1rem;
            background: rgba(255,255,255,.03);
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .hc-dot { width: 12px; height: 12px; border-radius: var(--radius-full, 50%); }
        .hc-dot.red    { background: #ff5f56; }
        .hc-dot.yellow { background: #ffbd2e; }
        .hc-dot.green  { background: #27c93f; }
        .hc-file {
            margin-left: .3rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            color: rgba(232,232,240,.4);
        }
        .hc-code {
            padding: 1.1rem 1.3rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: .8rem;
            line-height: 1.7;
        }
        .hc-code pre { margin: 0; white-space: pre-wrap; }
        .hc-k  { color: #c792ea; }
        .hc-v  { color: #82aaff; }
        .hc-p  { color: #f07178; }
        .hc-s  { color: #c3e88d; }
        .hc-n  { color: #f78c6c; }
        .hc-b  { color: #ff9d00; }
        .hc-c  { color: rgba(232,232,240,.3); font-style: italic; }
        .hc-footer {
            display: flex;
            justify-content: space-between;
            padding: .5rem 1rem;
            background: rgba(255,255,255,.02);
            border-top: 1px solid rgba(255,255,255,.05);
            font-family: 'JetBrains Mono', monospace;
            font-size: .65rem;
            color: rgba(232,232,240,.3);
        }
        .hc-status { color: #00e676; }
        #hero {
            padding: 2.75rem 0 2rem;
        }
        #hero::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 15% 20%, rgba(255, 69, 0, .22), transparent 32%),
                radial-gradient(circle at 85% 18%, rgba(0, 230, 118, .12), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
            opacity: .95;
        }
        .hero-inner {
            position: relative;
            grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
            padding: 2rem;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: var(--radius-2xl, 28px);
            background:
                linear-gradient(145deg, rgba(16,16,28,.9), rgba(8,10,18,.82)),
                rgba(255,255,255,.02);
            box-shadow:
                0 30px 80px rgba(0,0,0,.45),
                inset 0 1px 0 rgba(255,255,255,.06);
            overflow: hidden;
            isolation: isolate;
        }
        .hero-inner::before {
            content: '';
            position: absolute;
            inset: auto auto -30% -12%;
            width: 340px;
            height: 340px;
            border-radius: var(--radius-full, 50%);
            background: radial-gradient(circle, rgba(47,128,237,.18), transparent 70%);
            filter: blur(10px);
            z-index: -1;
        }
        .hero-inner::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(255,255,255,.04), transparent 40%, transparent 60%, rgba(255,255,255,.03));
            pointer-events: none;
            z-index: -1;
        }
        .hero-kicker {
            display: block;
            margin-bottom: .55rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: .76rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(232,232,240,.46);
        }
        .hero-title {
            font-size: clamp(2.35rem, 5.2vw, 4.6rem);
            line-height: .98;
            max-width: 11ch;
        }
        .hero-title-greeting {
            color: rgba(232,232,240,.78);
            font-size: .44em;
            line-height: 1.2;
            margin-bottom: .4rem;
            letter-spacing: .02em;
        }
        .hero-desc {
            font-size: 1rem;
            color: rgba(232,232,240,.62);
            line-height: 1.82;
            max-width: 560px;
            margin-bottom: 1.15rem;
        }
        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
            margin-bottom: 1.35rem;
        }
        .hero-proof span {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .45rem .8rem;
            border-radius: var(--radius-pill, 999px);
            background: rgba(255,255,255,.045);
            border: 1px solid rgba(255,255,255,.08);
            color: rgba(232,232,240,.72);
            font-size: .75rem;
            font-weight: 600;
        }
        .hero-proof i {
            color: var(--accent);
        }
        .hero-ctas {
            margin-bottom: 1.1rem;
        }
        .hero-btn {
            padding: .75rem 1.2rem;
            border-radius: var(--radius-md, 14px);
            font-size: .84rem;
        }
        .hero-note {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            color: rgba(232,232,240,.48);
            font-size: .8rem;
        }
        .hero-note span {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
        }
        .hero-note i {
            color: #00e676;
        }
        .hero-visual-shell {
            position: relative;
            width: 100%;
            max-width: 440px;
            padding-top: 2.2rem;
        }
        .hero-card {
            max-width: 420px;
            border-radius: var(--radius-xl, 22px);
            backdrop-filter: blur(14px);
        }
        .hero-float-card {
            position: absolute;
            border-radius: var(--radius-lg, 18px);
            padding: .9rem 1rem;
            background: rgba(11, 15, 26, .88);
            border: 1px solid rgba(255,255,255,.08);
            backdrop-filter: blur(14px);
            box-shadow: 0 18px 45px rgba(0,0,0,.35);
            animation: heroFloat 5s ease-in-out infinite;
        }
        .hero-float-card strong {
            display: block;
            font-size: 1.05rem;
            color: #fff;
        }
        .hero-float-card span {
            display: block;
            margin-top: .18rem;
            font-size: .7rem;
            font-family: 'JetBrains Mono', monospace;
            color: rgba(232,232,240,.5);
            text-transform: uppercase;
            letter-spacing: .08em;
        }
        .hero-float-card-left {
            top: 0;
            left: -2rem;
        }
        .hero-float-card-right {
            right: -1.3rem;
            bottom: 2rem;
            animation-delay: -2.5s;
        }
        @keyframes heroFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        @media(max-width:860px) {
            .hero-inner {
                grid-template-columns: 1fr;
                padding: 1.35rem;
                gap: 2rem;
            }
        }
        @media(max-width:640px) {
            .hero-title {
                max-width: none;
            }
            .hero-note {
                flex-direction: column;
                gap: .55rem;
            }
        }

        /* ═══ STATS MEJORADO ════════════════════════════════════ */
        .stats-eyebrow {
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            color: var(--accent);
            opacity: .65;
            margin-bottom: .4rem;
        }
        .stat-icon {
            font-size: 1.4rem;
            margin-bottom: .6rem;
            width: 50px; height: 50px;
            border-radius: var(--radius-md, 14px);
            background: rgba(47,128,237,0.12);
            border: 1px solid rgba(47,128,237,0.25);
            display: flex; align-items: center; justify-content: center;
            margin-left: auto; margin-right: auto;
            color: var(--primary);
            transition: background .3s, box-shadow .3s;
        }
        .stat-card:hover .stat-icon {
            background: rgba(47,128,237,0.22);
            box-shadow: 0 0 18px rgba(47,128,237,0.35);
        }
        .stat-sub {
            font-size: .68rem;
            color: rgba(232,232,240,.38);
            font-family: 'JetBrains Mono', monospace;
            margin-top: .25rem;
        }

        /* ═══ SKILLS CON TABS ════════════════════════════════════ */
        .skills-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        .skills-eyebrow {
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            color: var(--accent);
            opacity: .65;
            margin-bottom: .3rem;
        }
        .skills-tabs { display: flex; gap: .4rem; }
        .sk-tab {
            padding: .35rem .85rem;
            border-radius: var(--radius-xl, 22px);
            border: 1px solid rgba(47,128,237,.2);
            background: transparent;
            color: rgba(232,232,240,.45);
            font-family: 'Syne', sans-serif;
            font-size: .75rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .18s;
        }
        .sk-tab:hover, .sk-tab.active {
            border-color: var(--primary);
            color: var(--accent);
            background: rgba(47,128,237,.1);
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
        }
        .skills-grid.hidden { display: none !important; }

        .skill-chip {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.1rem 1.3rem;
            background: rgba(19,19,31,.9);
            border: 1px solid rgba(47,128,237,.15);
            border-radius: var(--radius-md, 14px);
            transition: all .22s ease;
        }
        .skill-chip:hover {
            border-color: rgba(47,128,237,.4);
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0,0,0,.4);
        }
        .skill-chip.skill-new {
            border-color: rgba(47,128,237,.2);
            flex-direction: column;
            align-items: flex-start;
            gap: .6rem;
        }
        .skill-chip.skill-new:hover { border-color: rgba(47,128,237,.45); }
        .skill-chip.skill-new .sc-icon { font-size: 1.6rem; }

        .sc-icon {
            font-size: 2rem;
            color: var(--primary);
            width: 40px;
            text-align: center;
            flex-shrink: 0;
        }
        .sc-info { flex: 1; width: 100%; }
        .sc-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .45rem;
            font-size: .88rem;
            font-weight: 700;
            color: rgba(232,232,240,.85);
        }
        .sc-pct {
            font-family: 'JetBrains Mono', monospace;
            font-size: .75rem;
            color: var(--primary);
        }
        .sc-pct.sc-badge {
            background: rgba(47,128,237,.15);
            color: #2f80ed;
            border: 1px solid rgba(47,128,237,.25);
            padding: .15rem .5rem;
            border-radius: var(--radius-xl, 22px);
            font-size: .65rem;
        }
        .sc-bar {
            height: 5px;
            background: rgba(255,255,255,.07);
            border-radius: var(--radius-xs, 6px);
            overflow: hidden;
        }
        .sc-fill {
            height: 100%;
            width: var(--w, 0%);
            background: var(--c, var(--primary));
            border-radius: var(--radius-xs, 6px);
            animation: fillBar .9s cubic-bezier(.4,0,.2,1) both;
        }
        @keyframes fillBar { from{width:0} to{width:var(--w)} }
        .sc-desc {
            font-size: .73rem;
            color: rgba(232,232,240,.4);
            margin-top: .4rem;
            line-height: 1.5;
        }

        /* Tools badges */
        .sk-tools-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
            gap: .55rem !important;
        }
        .tool-badge {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .6rem .9rem;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: var(--radius-sm, 10px);
            font-size: .78rem;
            color: rgba(232,232,240,.6);
            transition: all .18s;
        }
        .tool-badge:hover {
            border-color: rgba(47,128,237,.3);
            color: var(--accent);
            background: rgba(47,128,237,.06);
        }
        .tool-badge i { color: var(--primary); width: 16px; }

        /* ═══ PANEL DE CONFIGURACIÓN ══════════════════════════════ */
        #config-panel {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.65);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all .28s ease;
        }
        #config-panel.open {
            opacity: 1;
            visibility: visible;
        }
        .cfg-dialog {
            width: 92%;
            max-width: 420px;
            background: linear-gradient(160deg, rgba(12,12,24,.98), rgba(18,18,34,.98));
            border: 1px solid rgba(47,128,237,.25);
            border-radius: var(--radius-xl, 22px);
            box-shadow: 0 32px 80px rgba(0,0,0,.7);
            transform: translateY(16px) scale(.96);
            transition: transform .28s cubic-bezier(.2,.9,.2,1);
        }
        #config-panel.open .cfg-dialog { transform: none; }

        .cfg-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.1rem 1.3rem;
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .cfg-head-title {
            font-size: .95rem;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .cfg-head-title i { color: var(--primary); }
        #cfg-close {
            background: rgba(255,255,255,.07);
            border: none;
            color: rgba(232,232,240,.5);
            width: 28px; height: 28px;
            border-radius: var(--radius-sm, 10px);
            cursor: pointer;
            font-size: .85rem;
            transition: all .18s;
        }
        #cfg-close:hover { background: rgba(255,255,255,.13); color: #fff; }

        .cfg-body { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 1.2rem; }
        .cfg-group { display: flex; flex-direction: column; gap: .55rem; }
        .cfg-label {
            font-size: .72rem;
            font-weight: 700;
            color: rgba(232,232,240,.4);
            text-transform: uppercase;
            letter-spacing: .08em;
            font-family: 'JetBrains Mono', monospace;
        }
        .cfg-options { display: flex; gap: .4rem; flex-wrap: wrap; }
        .cfg-opt {
            padding: .38rem .85rem;
            border-radius: var(--radius-sm, 10px);
            border: 1px solid rgba(255,255,255,.1);
            background: rgba(255,255,255,.04);
            color: rgba(232,232,240,.55);
            font-family: 'Syne', sans-serif;
            font-size: .8rem;
            cursor: pointer;
            transition: all .18s;
        }
        .cfg-opt:hover { border-color: rgba(47,128,237,.35); color: var(--accent); }
        .cfg-opt.active {
            border-color: var(--primary);
            background: rgba(47,128,237,.12);
            color: var(--accent);
            font-weight: 700;
        }
        .cfg-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: .85rem;
            color: rgba(232,232,240,.6);
        }
        .cfg-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
        .cfg-toggle input { opacity: 0; width: 0; height: 0; }
        .cfg-slider {
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,.12);
            border-radius: var(--radius-xl, 22px);
            cursor: pointer;
            transition: .3s;
        }
        .cfg-slider::before {
            content: '';
            position: absolute;
            width: 18px; height: 18px;
            left: 3px; bottom: 3px;
            background: #fff;
            border-radius: var(--radius-full, 50%);
            transition: .3s;
        }
        .cfg-toggle input:checked + .cfg-slider { background: var(--primary); }
        .cfg-toggle input:checked + .cfg-slider::before { transform: translateX(18px); }

        .cfg-foot {
            padding: .9rem 1.3rem;
            border-top: 1px solid rgba(255,255,255,.06);
        }
        .cfg-reset {
            display: flex;
            align-items: center;
            gap: .4rem;
            background: transparent;
            border: 1px solid rgba(255,255,255,.1);
            color: rgba(232,232,240,.45);
            padding: .4rem .9rem;
            border-radius: var(--radius-sm, 10px);
            font-size: .78rem;
            cursor: pointer;
            transition: all .18s;
        }
        .cfg-reset:hover { border-color: rgba(47,128,237,.3); color: var(--accent); }

        /* ═══ PANEL DE CUENTA / LOGIN ════════════════════════════════════════ */
        #auth-panel {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.65);
            backdrop-filter: blur(10px);
            z-index: 5100;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all .28s ease;
        }
        #auth-panel.open {
            opacity: 1;
            visibility: visible;
        }
        .auth-dialog {
            width: 92%;
            max-width: 420px;
            background: linear-gradient(160deg, rgba(12,12,24,.98), rgba(18,18,34,.98));
            border: 1px solid rgba(47,128,237,.25);
            border-radius: var(--radius-xl, 22px);
            box-shadow: 0 32px 80px rgba(0,0,0,.7);
            transform: translateY(16px) scale(.96);
            transition: transform .28s cubic-bezier(.2,.9,.2,1);
        }
        #auth-panel.open .auth-dialog { transform: none; }
        .auth-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.1rem 1.3rem;
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .auth-head-title {
            font-size: .95rem;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .auth-head-title i { color: var(--primary); }
        .auth-close {
            background: rgba(255,255,255,.07);
            border: none;
            color: rgba(232,232,240,.5);
            width: 28px; height: 28px;
            border-radius: var(--radius-sm, 10px);
            cursor: pointer;
            font-size: .85rem;
            transition: all .18s;
        }
        .auth-close:hover { background: rgba(255,255,255,.13); color: #fff; }

        .auth-body { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
        .auth-account {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .55rem;
            text-align: center;
        }
        .auth-acc-avatar {
            width: 58px; height: 58px;
            border-radius: var(--radius-full, 50%);
            background: linear-gradient(135deg, var(--primary), var(--accent));
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem;
            color: #fff;
            box-shadow: 0 6px 22px rgba(47,128,237,.4);
        }
        .auth-acc-badge {
            display: inline-flex; align-items: center; gap: .4rem;
            background: rgba(47,128,237,.15);
            border: 1px solid rgba(47,128,237,.35);
            color: var(--accent);
            padding: .3rem .75rem;
            border-radius: var(--radius-full, 50px);
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .auth-acc-plan {
            display: inline-flex; align-items: center; gap: .4rem;
            color: var(--secondary);
            font-size: .75rem;
            font-weight: 600;
        }
        .auth-acc-stats {
            display: flex;
            gap: .4rem;
            width: 100%;
            margin: .25rem 0 .35rem;
        }
        .auth-acc-stat {
            flex: 1;
            display: flex; flex-direction: column; align-items: center; gap: .1rem;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.07);
            border-radius: var(--radius-sm, 10px);
            padding: .5rem .25rem;
        }
        .auth-acc-stat b {
            font-size: .85rem;
            color: var(--accent);
        }
        .auth-acc-stat span {
            font-size: .62rem;
            color: rgba(232,232,240,.5);
            text-align: center;
            line-height: 1.1;
        }
        [data-theme="light"] .auth-acc-stat {
            background: rgba(15,23,42,.04);
            border-color: rgba(15,23,42,.08);
        }
        [data-theme="light"] .auth-acc-stat span { color: rgba(15,23,42,.5); }
        .auth-acc-name {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
        }
        .auth-acc-email {
            font-size: .78rem;
            color: rgba(232,232,240,.45);
            overflow-wrap: break-word;
        }
        #auth-logout {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            color: rgba(232,232,240,.6);
            padding: .45rem 1.1rem;
            border-radius: var(--radius-sm, 10px);
            font-size: .8rem;
            cursor: pointer;
            transition: all .18s;
        }
        #auth-logout:hover { border-color: rgba(255,80,80,.4); color: #ff5c5c; background: rgba(255,80,80,.08); }
        .auth-tabs {
            display: flex;
            background: rgba(255,255,255,.05);
            border-radius: var(--radius-md, 14px);
            padding: .25rem;
            gap: .25rem;
        }
        .auth-tab {
            flex: 1;
            border: none;
            background: transparent;
            color: rgba(232,232,240,.5);
            padding: .5rem;
            border-radius: var(--radius-sm, 10px);
            font-family: 'Syne', sans-serif;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .18s;
        }
        .auth-tab.active {
            background: rgba(47,128,237,.18);
            color: var(--accent);
        }
        .auth-status {
            font-size: .78rem;
            color: rgba(232,232,240,.55);
            min-height: 1em;
            text-align: center;
        }
        .auth-status.error { color: #ff5c5c; }
        .auth-status.ok { color: var(--secondary); }
        .auth-label {
            font-size: .72rem;
            font-weight: 700;
            color: rgba(232,232,240,.4);
            text-transform: uppercase;
            letter-spacing: .08em;
            font-family: 'JetBrains Mono', monospace;
        }
        .auth-form-login,
        .auth-form-register {
            display: flex;
            flex-direction: column;
            gap: .7rem;
        }
        .auth-input {
            width: 100%;
            box-sizing: border-box;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.1);
            color: #fff;
            padding: .65rem .9rem;
            border-radius: var(--radius-sm, 10px);
            font-size: .85rem;
            font-family: 'Syne', sans-serif;
            transition: all .18s;
        }
        .auth-input::placeholder { color: rgba(232,232,240,.35); }
        .auth-input:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(47,128,237,.06);
        }
        .auth-pass-wrap {
            position: relative;
            display: block;
        }
        .auth-pass-wrap .auth-input {
            padding-right: 2.7rem;
        }
        .auth-eye {
            position: absolute;
            top: 50%;
            right: .35rem;
            transform: translateY(-50%);
            width: 2.1rem;
            height: 2.1rem;
            display: grid;
            place-items: center;
            background: transparent;
            border: none;
            color: rgba(232,232,240,.45);
            font-size: .95rem;
            cursor: pointer;
            border-radius: var(--radius-sm, 8px);
            transition: color .18s, background .18s;
            padding: 0;
        }
        .auth-eye:hover {
            color: var(--primary);
            background: rgba(47,128,237,.1);
        }
        .auth-eye.active { color: var(--primary); }
        .auth-turnstile {
            display: flex;
            justify-content: center;
            margin: .15rem 0 .25rem;
            min-height: 65px;
        }
        .auth-turnstile iframe { max-width: 100%; }
        .auth-turnstile .auth-ts-hidden {
            font-size: .7rem;
            color: rgba(232,232,240,.4);
            text-align: center;
        }
        .auth-remember {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin: .3rem 0 .6rem;
            font-size: .78rem;
            color: rgba(232,232,240,.6);
            cursor: pointer;
            user-select: none;
        }
        .auth-remember input[type="checkbox"] {
            width: 15px;
            height: 15px;
            accent-color: #7c4dff;
            cursor: pointer;
        }
        .auth-btn {
            font-family: var(--btn-font);
            font-size: .85rem;
            font-weight: 700;
            border: none;
            border-radius: var(--btn-radius);
            cursor: pointer;
            transition: var(--btn-transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
        }
        .auth-btn:active { transform: scale(.97); }
        .auth-btn-primary {
            background: var(--btn-primary-bg);
            color: #fff;
            padding: .68rem 1rem;
            box-shadow: var(--btn-primary-shadow);
        }
        @media (hover: hover) {
            .auth-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(47,128,237,.5); }
        }
        .auth-btn-primary:disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; transform: none; box-shadow: none; }
        .auth-btn-block { width: 100%; }
        .auth-divider {
            display: flex;
            align-items: center;
            gap: .6rem;
            color: rgba(232,232,240,.35);
            font-size: .72rem;
        }
        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,.08);
        }
        .auth-google {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .55rem;
            background: var(--btn-ghost-bg);
            border: 1px solid var(--btn-ghost-border);
            color: #fff;
            padding: .62rem;
            border-radius: var(--btn-radius);
            font-family: var(--btn-font);
            font-size: .84rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--btn-transition);
        }
        @media (hover: hover) {
            .auth-google:hover { border-color: rgba(255,255,255,.25); background: var(--btn-ghost-hover-bg); }
        }
        .auth-google i { font-size: 1rem; }
        .auth-note {
            font-size: .72rem;
            color: rgba(232,232,240,.4);
            line-height: 1.5;
            text-align: center;
        }

        /* Botón config en header */
        #cfg-btn {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            color: rgba(232,232,240,.6);
            width: 34px; height: 34px;
            border-radius: var(--radius-sm, 10px);
            cursor: pointer;
            font-size: .85rem;
            transition: all .2s;
            display: flex; align-items: center; justify-content: center;
        }
        #cfg-btn:hover { border-color: var(--primary); color: var(--accent); background: rgba(47,128,237,.08); }
        .header-dl-btn {
            display: flex; align-items: center; justify-content: center;
            width: 34px; height: 34px;
            border-radius: var(--radius-sm, 10px);
            background: rgba(47,128,237,.12);
            border: 1px solid rgba(47,128,237,.25);
            color: var(--primary);
            font-size: .85rem;
            text-decoration: none;
            transition: all .2s;
        }
        .header-dl-btn:hover { background: rgba(47,128,237,.22); transform: translateY(-2px); }
        .header-yt-btn {
            display: flex; align-items: center; justify-content: center;
            width: 34px; height: 34px;
            border-radius: var(--radius-sm, 10px);
            background: rgba(255,0,0,.1);
            border: 1px solid rgba(255,0,0,.25);
            color: #ff0000;
            font-size: .9rem;
            text-decoration: none;
            transition: all .2s;
        }
        .header-yt-btn:hover { background: rgba(255,0,0,.22); transform: translateY(-2px); }

        /* Font size cfg */
        body.font-sm { font-size: 14px; }
        body.font-lg { font-size: 18px; }
        body.no-anim *, body.no-anim *::before, body.no-anim *::after {
            animation: none !important;
            transition: none !important;
        }

        
        /* ═══ CLIMA ═════════════════════════════════════════════ */
        #weather-section {
            background: linear-gradient(135deg, rgba(0,0,0,.6), rgba(26,26,46,.6));
            border: 2px solid rgba(34,197,94,.2);
        }
        .wx-eyebrow {
            font-family: var(--mono); font-size: .72rem;
            color: #22c55e; opacity: .65; margin-bottom: .3rem;
        }
        .wx-header {
            display: flex; align-items: flex-end;
            justify-content: space-between; flex-wrap: wrap;
            gap: 1rem; margin-bottom: 1.5rem;
        }
        .wx-location-btn {
            display: flex; align-items: center; gap: .4rem;
            padding: .4rem .9rem; border-radius: var(--radius-sm, 10px);
            background: rgba(34,197,94,.1);
            border: 1px solid rgba(34,197,94,.3);
            color: #22c55e; font-size: .78rem; font-weight: 700;
            cursor: pointer; transition: all .2s; font-family: var(--font);
        }
        .wx-location-btn:hover { background: rgba(34,197,94,.2); }
        .wx-header-actions {
            display: flex; align-items: center; gap: .5rem;
            flex-wrap: wrap;
        }
        .wx-widget-btn {
            display: flex; align-items: center; gap: .4rem;
            padding: .4rem .9rem; border-radius: var(--radius-sm, 10px);
            background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(99,102,241,.14));
            border: 1px solid rgba(56,189,248,.35);
            color: #38bdf8; font-size: .78rem; font-weight: 700;
            cursor: pointer; transition: all .2s; font-family: var(--font);
        }
        .wx-widget-btn:hover {
            background: linear-gradient(135deg, rgba(56,189,248,.25), rgba(99,102,241,.25));
            box-shadow: 0 4px 14px rgba(56,189,248,.2);
        }
        .wx-alerts-toggle {
            display: flex; align-items: center; gap: .7rem;
            margin-bottom: 1.5rem; padding: .7rem 1rem;
            border-radius: var(--radius-md, 14px);
            background: rgba(34,197,94,.05);
            border: 1px solid rgba(56,189,248,.18);
            cursor: pointer; user-select: none;
            transition: all .25s ease;
        }
        .wx-alerts-toggle:hover { border-color: rgba(56,189,248,.45); background: rgba(34,197,94,.09); }
        .wx-alerts-icon {
            flex: 0 0 auto; width: 30px; height: 30px;
            display: flex; align-items: center; justify-content: center;
            border-radius: var(--radius-full, 50%);
            background: rgba(56,189,248,.12); color: var(--gold, #38bdf8); font-size: .85rem;
        }
        .wx-alerts-text { flex: 1 1 auto; font-size: .82rem; font-weight: 600; color: rgba(232,240,238,.9); }
        .wx-switch {
            flex: 0 0 auto; width: 44px; height: 24px; border-radius: var(--radius-pill, 999px);
            background: rgba(232,240,238,.16); position: relative;
            transition: background .25s ease; box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
        }
        .wx-switch-knob {
            position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
            border-radius: var(--radius-full, 50%); background: #f8fafc;
            transition: transform .25s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 1px 4px rgba(0,0,0,.4);
        }
        .wx-alerts-toggle.on .wx-switch { background: linear-gradient(90deg, #2f80ed, #22c55e); }
        .wx-alerts-toggle.on .wx-switch-knob { transform: translateX(20px); }
        .wx-alerts-toggle.on .wx-alerts-icon { background: rgba(34,197,94,.15); color: #22c55e; }
        .wx-loading {
            display: flex; align-items: center; gap: .8rem;
            color: var(--muted); font-family: var(--mono); font-size: .82rem;
            padding: 1.5rem 0;
        }
        .wx-spinner {
            width: 20px; height: 20px;
            border: 2px solid rgba(34,197,94,.2);
            border-top-color: #22c55e;
            border-radius: var(--radius-full, 50%);
            animation: spin .8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .wx-card {
            background: rgba(13,13,26,.9);
            border: 1px solid rgba(34,197,94,.2);
            border-radius: var(--radius-lg, 18px); padding: 1.5rem;
            margin-bottom: 1rem;
        }
        .wx-main { margin-bottom: 1.2rem; }
        .wx-city { font-size: 1.1rem; font-weight: 700; color: #fff; }
        .wx-desc { font-size: .82rem; color: var(--muted); margin: .2rem 0 .5rem; }
        .wx-temp {
            font-size: 3.5rem; font-weight: 900; line-height: 1;
            background: linear-gradient(135deg, #22c55e, #00e676);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .wx-feels { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
        .wx-grid {
            display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem;
        }
        @media(max-width:600px){ .wx-grid { grid-template-columns: repeat(2,1fr); } }
        .wx-stat {
            display: flex; flex-direction: column; align-items: center; gap: .2rem;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            border-radius: var(--radius-md, 14px); padding: .7rem .5rem;
        }
        .wx-stat i { color: #22c55e; font-size: .9rem; }
        .wx-stat span { font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--a); }
        .wx-stat small { font-size: .62rem; color: var(--muted); }
        .wx-search {
            display: flex; gap: .5rem;
        }
        .wx-input {
            flex: 1; padding: .55rem 1rem;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-sm, 10px); color: var(--text);
            font-family: var(--mono); font-size: .82rem; outline: none;
            transition: border-color .2s;
        }
        .wx-input:focus { border-color: rgba(34,197,94,.4); }
        .wx-input::placeholder { color: rgba(232,232,240,.25); }
        .wx-search-btn {
            padding: .55rem 1rem;
            background: rgba(34,197,94,.12);
            border: 1px solid rgba(34,197,94,.25);
            border-radius: var(--radius-sm, 10px); color: #22c55e;
            cursor: pointer; transition: all .2s; font-size: .85rem;
        }
        .wx-search-btn:hover { background: rgba(34,197,94,.22); }
        .wx-error {
            display: flex; flex-direction: column;
            align-items: flex-start; gap: .4rem;
            color: rgba(56,189,248,.7); font-size: .85rem;
            padding: 1rem 0;
        }
        .wx-error i { color: var(--a); }

        /* ═══ NOTICIAS INDEX ═════════════════════════════════════ */
        /* ── BLOGGER SECTION ── */
        #news-section {
            background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(20,20,38,.6));
            border: 2px solid rgba(47,128,237,.2);
        }
        .blogger-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.2rem;
            margin-top: 1.5rem;
        }
        .blogger-card {
            display: flex; flex-direction: column;
            background: rgba(255,255,255,.03);
            border: 1px solid rgba(255,255,255,.07);
            border-radius: var(--radius-md, 14px); overflow: hidden;
            text-decoration: none;
            transition: all .22s ease;
        }
        .blogger-card:hover {
            border-color: rgba(47,128,237,.4);
            background: rgba(47,128,237,.04);
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(0,0,0,.4);
        }
        .blogger-card-thumb {
            width: 100%; height: 160px;
            background: linear-gradient(135deg, rgba(47,128,237,.15), rgba(56,189,248,.1));
            display: flex; align-items: center; justify-content: center;
            font-size: 2.5rem; color: rgba(255,255,255,.15);
            flex-shrink: 0; overflow: hidden;
        }
        .blogger-card-thumb img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .blogger-card-body {
            padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1;
        }
        .blogger-card-label {
            font-family: var(--mono); font-size: .63rem;
            color: var(--primary); text-transform: uppercase; letter-spacing: .08em;
        }
        .blogger-card-title {
            font-size: .9rem; font-weight: 700;
            color: var(--text); line-height: 1.4;
        }
        .blogger-card-desc {
            font-size: .78rem; color: var(--muted); line-height: 1.55; flex: 1;
        }
        .blogger-card-meta {
            font-size: .67rem; font-family: var(--mono); color: var(--muted);
            display: flex; gap: .6rem; align-items: center; margin-top: .3rem;
        }
        .blogger-card-meta i { color: var(--primary); font-size: .6rem; }
        .blogger-card-relative {
            margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
            color: rgba(56,189,248,.85);
        }
        .news-fresh-label {
            display: inline-block; margin-top: .3rem;
            font-family: var(--mono); font-size: .65rem;
            color: rgba(56,189,248,.75);
        }
        .blogger-view-btn {
            display: inline-flex; align-items: center; gap: .4rem;
            margin-top: 1.8rem;
            padding: .55rem 1.3rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff; font-size: .8rem; font-weight: 700;
            border-radius: var(--radius-sm, 10px); text-decoration: none;
            box-shadow: 0 4px 14px rgba(47,128,237,.28);
            transition: all .2s;
            align-self: flex-start;
        }
        .blogger-view-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(47,128,237,.42); }
        /* Botón desplegar/contraer — solo tiene efecto visual en móvil,
           ver reglas dentro de los @media en index-responsive.css */
        .news-toggle-wrap { display: none; margin-top: 1.1rem; justify-content: center; }
        .news-toggle-btn {
            display: inline-flex; align-items: center; gap: .4rem;
            padding: .55rem 1.2rem;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(47,128,237,.35);
            color: var(--text); font-family: var(--mono);
            font-size: .72rem; font-weight: 700; letter-spacing: .02em;
            border-radius: var(--radius-xl, 22px); cursor: pointer;
            transition: all .2s;
        }
        .news-toggle-btn:hover, .news-toggle-btn:active {
            background: rgba(47,128,237,.14); border-color: rgba(47,128,237,.55);
        }
        .news-toggle-btn i { transition: transform .25s ease; }
        .news-toggle-btn.expanded i { transform: rotate(180deg); }
        .blogger-loading {
            text-align: center; padding: 2.5rem 1rem;
            font-family: var(--mono); font-size: .8rem; color: var(--muted);
        }
        .blogger-loading i { font-size: 1.4rem; color: var(--primary); display: block; margin-bottom: .6rem; animation: spin 1.2s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .blogger-card.skeleton-card { pointer-events: none; }
        .blogger-card.skeleton-card .blogger-card-thumb {
            background: linear-gradient(90deg,
                rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.4s ease-in-out infinite;
        }
        .blogger-card.skeleton-card .sk-line {
            height: 11px; border-radius: var(--radius-xs, 6px); margin: .25rem 0;
            background: linear-gradient(90deg,
                rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.4s ease-in-out infinite;
        }
        .blogger-card.skeleton-card .sk-line.w-70 { width: 70%; }
        .blogger-card.skeleton-card .sk-line.w-90 { width: 90%; }
        .blogger-card.skeleton-card .sk-line.w-40 { width: 40%; height: 9px; margin-top: .6rem; }
        @keyframes skeleton-shimmer {
            0%   { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        /* Animación de skeleton-loading: se mantiene activa siempre (independiente del SO) */
        .blogger-error {
            text-align: center; padding: 2rem 1rem;
            font-size: .82rem; color: var(--muted);
        }
        .blogger-error i { font-size: 1.6rem; color: rgba(47,128,237,.5); display: block; margin-bottom: .5rem; }

        


        /* ── EASTER EGG ──────────────────────────────────────── */
        .egg-counter {
            position: absolute; top: -8px; right: -8px;
            width: 16px; height: 16px; border-radius: var(--radius-full, 50%);
            background: var(--primary); color: #fff;
            font-size: .55rem; font-weight: 900;
            display: none; align-items: center; justify-content: center;
            font-family: var(--mono); animation: pop .2s ease;
        }
        @keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.3)} 100%{transform:scale(1)} }
        /* .header-logo position consolidated above */

        /* Overlay easter egg */
        #egg-overlay {
            position: fixed; inset: 0; z-index: 99999;
            background: rgba(0,0,0,.97);
            display: none; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center; padding: 2rem;
        }
        #egg-overlay.active { display: flex; animation: fadeIn .4s ease; }
        @keyframes fadeIn { from{opacity:0} to{opacity:1} }
        .egg-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: clamp(2rem, 8vw, 5rem);
            font-weight: 900; line-height: 1; margin-bottom: 1rem;
        }
        .egg-title .e1 { color: #2f80ed; }
        .egg-title .e2 { color: #00e5ff; }
        .egg-title .e3 { color: #38bdf8; }
        .egg-msg {
            font-family: 'JetBrains Mono', monospace;
            font-size: .9rem; color: rgba(255,255,255,.5);
            margin-bottom: 2rem; line-height: 1.8; max-width: 500px;
        }
        .egg-msg span { color: #00e676; }
        .egg-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
        .egg-particle {
            position: absolute; width: 4px; height: 4px; border-radius: var(--radius-full, 50%);
            animation: particle-fly 2s ease-out forwards;
        }
        @keyframes particle-fly {
            0% { transform: translate(0,0) scale(1); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
        }
        .egg-close {
            padding: .6rem 1.8rem; border-radius: var(--radius-sm, 10px);
            background: linear-gradient(135deg, #2f80ed, #22c55e);
            border: none; color: #fff; font-family: 'JetBrains Mono', monospace;
            font-size: .85rem; font-weight: 700; cursor: pointer;
            transition: all .2s;
        }
        .egg-close:hover { transform: scale(1.05); }
        .egg-matrix {
            position: absolute; inset: 0; pointer-events: none;
            font-family: 'JetBrains Mono', monospace;
            font-size: .75rem; color: rgba(0,230,118,.15);
            overflow: hidden; white-space: pre; line-height: 1.4;
            z-index: -1;
        }

        /* ═══ GALERÍA MI PUEBLO ══════════════════════════════════ */
        #mi-pueblo { text-align: left; }
        .pueblo-eyebrow {
            font-family: var(--mono); font-size: .72rem;
            color: rgba(56,189,248,.6); letter-spacing: .1em;
            text-transform: uppercase; margin-bottom: .4rem;
        }
        .pueblo-desc {
            color: rgba(232,232,240,.65); font-size: .92rem;
            line-height: 1.7; margin-bottom: 1.5rem;
            max-width: 600px;
        }
        /* ── Expanding Panels Carrusel ── */
        .pueblo-panels {
            display: flex;
            width: 100%;
            height: 340px;
            gap: 10px;
            margin-bottom: 1.5rem;
        }
        .pueblo-panel {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            flex: 0.5;
            border-radius: var(--radius-xl, 22px);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: flex 900ms cubic-bezier(.16,1,.3,1), background-position 900ms cubic-bezier(.16,1,.3,1);
            will-change: flex;
        }
        .pueblo-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 60%);
            opacity: 0;
            transition: opacity .4s;
        }
        .pueblo-panel.active::before { opacity: 1; }
        .pueblo-panel h3 {
            color: #fff;
            position: absolute;
            bottom: 0; left: 20px;
            font-size: 1rem;
            font-family: var(--font, 'Space Grotesk', sans-serif);
            font-weight: 700;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity .3s .2s, transform .3s .2s;
            margin: 0 0 16px 0;
            text-shadow: 0 2px 8px rgba(0,0,0,.5);
        }
        .pueblo-panel h3 span {
            display: block;
            font-size: .7rem;
            font-family: var(--mono, 'JetBrains Mono', monospace);
            color: rgba(255,255,255,.6);
            font-weight: 400;
            margin-top: 2px;
        }
        .pueblo-panel.active {
            flex: 5;
            animation: puebloKenBurns 16s ease-in-out infinite alternate;
        }
        @keyframes puebloKenBurns {
            0%   { background-position: center 18%; }
            100% { background-position: center 72%; }
        }
        .pueblo-panel.active h3 {
            opacity: 1;
            transform: translateY(0);
        }
        .pueblo-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .7rem;
            margin: .4rem 0 1.6rem;
        }
        .pueblo-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
        }
        .pueblo-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border: none;
            border-radius: var(--radius-pill, 999px);
            background: rgba(255,255,255,.22);
            cursor: pointer;
            transition: all .45s cubic-bezier(.16,1,.3,1);
        }
        .pueblo-dot:hover {
            background: rgba(255,255,255,.4);
        }
        .pueblo-dot.active {
            width: 26px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            box-shadow: 0 0 12px rgba(47,128,237,.55);
        }
        .pueblo-nav-hint {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            padding: .75rem 1.2rem;
            border-radius: var(--radius-pill, 999px);
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            color: rgba(232,232,240,.72);
            font-size: .82rem;
            justify-content: center;
            text-align: center;
        }
        .pueblo-nav-hint strong {
            color: #fff;
            font-weight: 700;
        }
        @media (max-width: 600px) {
            .pueblo-panels { height: 220px; gap: 6px; }
            .pueblo-panel { border-radius: var(--radius-md, 14px); }
            .pueblo-panel h3 { font-size: .82rem; left: 14px; }
            .pueblo-controls {
                gap: .6rem;
            }
            .pueblo-nav-hint {
                font-size: .74rem;
                padding: .6rem .8rem;
            }
            .pueblo-dot { width: 7px; height: 7px; }
            .pueblo-dot.active { width: 22px; }
        }
        @media (max-width: 380px) {
            .pueblo-panels { height: 180px; }
        }
        .pueblo-video-wrap {
            margin-top: 1rem;
        }
        .pueblo-iframe-wrap {
            position: relative; border-radius: var(--radius-lg, 18px); overflow: hidden;
            border: 1px solid rgba(47,128,237,.25);
            box-shadow: 0 20px 60px rgba(0,0,0,.6);
            height: 320px; max-width: 640px;
        }
        @media (max-width: 600px) {
            .pueblo-gallery { grid-template-columns: 1fr; }
            .pueblo-side-imgs { grid-template-rows: auto; grid-template-columns: repeat(3,1fr); }
            .pueblo-main-img { height: 220px; }
            .pueblo-side-item { min-height: 90px; }
            .pueblo-iframe-wrap { height: 200px; }
        }



  .upd-dot{width:8px;height:8px;border-radius:var(--radius-full, 50%);background:#00e676;flex-shrink:0;animation:pulse-g 2s infinite}
  @keyframes pulse-g{0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,.4)}50%{box-shadow:0 0 0 6px rgba(0,230,118,0)}}
  .upd-btn{padding:.32rem .8rem;background:rgba(0,230,118,.15);color:#00e676;border:1px solid rgba(0,230,118,.3);border-radius:var(--radius-sm, 10px);font-size:.75rem;font-weight:700;cursor:pointer}
  .upd-close{background:none;border:none;color:rgba(232,232,240,.3);cursor:pointer;font-size:1rem}


/* ════════════════════════════════════════════════════════
   CLS FIXES + COMPONENTES ADICIONALES (About, Stats, Skills)
════════════════════════════════════════════════════════ */

/* Reservar espacio para imágenes antes de cargar */
      img { content-visibility: auto; }
      .ap-app-icon img { width: 48px; height: 48px; object-fit: contain; }

      /* Estabilizar fuentes — evitar FOUT que causa CLS */
      @font-face {
        font-family: 'Space Grotesk';
        font-display: swap;
      }
      @font-face {
        font-family: 'JetBrains Mono';
        font-display: swap;
      }

      /* Skeleton loader para secciones que cargan tarde */
      .section-loading {
        background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: var(--radius-sm, 10px); min-height: 40px;
      }
      @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

      /* Evitar reflow al cargar iconos de Font Awesome */
      .fas, .fab, .far, .fa { display: inline-block; min-width: 1em; }

        /* ══ OPEN TO WORK ══════════════════════════════════ */
        #open-to-work { padding: 1rem 0; }
        .otw-inner {
          background: linear-gradient(135deg, rgba(0,230,118,.06), rgba(0,230,118,.02));
          border: 1px solid rgba(0,230,118,.2); border-radius: var(--radius-xl, 22px);
          padding: 2rem 2.5rem; position: relative; overflow: hidden;
        }
        .otw-inner::before {
          content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
          background: linear-gradient(90deg, transparent, #00e676, transparent);
        }
        .otw-badge {
          display: inline-flex; align-items: center; gap: .5rem;
          background: rgba(0,230,118,.1); border: 1px solid rgba(0,230,118,.3);
          color: #00e676; font-size: .75rem; font-weight: 700;
          padding: .3rem .85rem; border-radius: var(--radius-xl, 22px);
          font-family: 'JetBrains Mono', monospace; margin-bottom: 1.5rem;
        }
        .otw-dot { width: 7px; height: 7px; background: #00e676; border-radius: var(--radius-full, 50%); flex-shrink: 0; animation: otwPulse 1.5s ease-in-out infinite; }
        @keyframes otwPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,230,118,.5); } 50%{ box-shadow:0 0 0 5px rgba(0,230,118,0); } }
        .otw-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
        .otw-title { font-size: clamp(1.4rem,2.5vw,1.9rem); font-weight: 800; margin-bottom: .75rem; color: #fff; }
        .otw-desc { font-size: .88rem; color: rgba(240,240,250,.6); line-height: 1.7; margin-bottom: 1.2rem; }
        .otw-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
        .otw-tags span { font-size: .72rem; padding: .25rem .65rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl, 22px); color: rgba(240,240,250,.6); }
        .otw-info-card { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-lg, 18px); padding: 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
        .otw-info-row { display: flex; align-items: flex-start; gap: .75rem; }
        .otw-info-row > i { color: #00e676; font-size: .9rem; margin-top: 2px; flex-shrink: 0; }
        .otw-info-label { display: block; font-size: .65rem; color: rgba(240,240,250,.4); font-family: 'JetBrains Mono',monospace; margin-bottom: 1px; }
        .otw-info-val { font-size: .83rem; color: rgba(240,240,250,.85); font-weight: 500; }
        .otw-actions { display: flex; gap: .6rem; padding-top: .3rem; flex-wrap: wrap; }
        .otw-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: var(--radius-sm, 10px); font-size: .82rem; font-weight: 700; text-decoration: none; transition: all .2s; font-family: 'Space Grotesk',sans-serif; }
        .otw-btn-primary { background: #00e676; color: #000; }
        .otw-btn-primary:hover { background: #00ff87; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,230,118,.3); }
        .otw-btn-ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(240,240,250,.7); }
        .otw-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }
        @media(max-width:768px){ .otw-content { grid-template-columns: 1fr; } .otw-inner { padding: 1.5rem; } }

        /* ══ WHY HIRE ME ════════════════════════════════════ */
        #why-me { padding: 4rem 0; }
        .wm-eyebrow { font-family: 'JetBrains Mono',monospace; font-size: .75rem; color: var(--primary,#2f80ed); letter-spacing: .1em; margin-bottom: .5rem; }
        .wm-title { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; margin-bottom: 2.5rem; background: linear-gradient(135deg, #fff, rgba(255,255,255,.6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .wm-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1.2rem; }
        .wm-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-lg, 18px); padding: 1.5rem; transition: transform .25s, border-color .25s, box-shadow .25s; }
        .wm-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.14); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
        .wm-icon { width: 44px; height: 44px; border-radius: var(--radius-md, 14px); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; margin-bottom: 1rem; }
        .wm-card-title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
        .wm-card-desc { font-size: .8rem; color: rgba(240,240,250,.5); line-height: 1.65; }

    
        /* changelog-btn eliminado */

        /* ── DIÁLOGO iOS NOTIFICACIONES ── */
        #ios-notif-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,.55);
            backdrop-filter: blur(8px);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
        }
        #ios-notif-overlay.show {
            opacity: 1;
            pointer-events: all;
        }
        .ios-notif-card {
            background: #1c1c2e;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-xl, 22px);
            padding: 0;
            width: 100%;
            max-width: 340px;
            overflow: hidden;
            transform: scale(.88) translateY(30px);
            transition: transform .35s cubic-bezier(.34,1.56,.64,1);
            box-shadow: 0 24px 80px rgba(0,0,0,.7);
        }
        #ios-notif-overlay.show .ios-notif-card {
            transform: scale(1) translateY(0);
        }
        #ch-app-perms-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,.55);
            backdrop-filter: blur(8px);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
        }
        #ch-app-perms-overlay.show {
            opacity: 1;
            pointer-events: all;
        }
        #ch-app-perms-overlay.show .ios-notif-card {
            transform: scale(1) translateY(0);
        }
        .ch-perms-card {
            max-width: 360px;
            transform: scale(.88) translateY(30px);
            transition: transform .35s cubic-bezier(.34,1.56,.64,1);
        }
        .ch-perms-list {
            padding: 1rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: .55rem;
            max-height: 52vh;
            overflow-y: auto;
        }
        .ch-perm-item {
            display: flex;
            align-items: flex-start;
            gap: .75rem;
            font-size: .8rem;
            color: rgba(240,240,250,.75);
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.4;
        }
        .ch-perm-icon {
            width: 32px; height: 32px;
            border-radius: var(--radius-sm, 10px);
            display: flex; align-items: center; justify-content: center;
            font-size: .95rem;
            flex-shrink: 0;
            background: rgba(47,128,237,.12);
        }
        .ch-perm-info { flex: 1; min-width: 0; }
        .ch-perm-name { font-weight: 700; color: #f0f0fa; }
        .ch-perm-desc { font-size: .72rem; color: rgba(240,240,250,.5); }
        .ch-perm-badge {
            margin-left: auto;
            flex-shrink: 0;
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .03em;
            padding: .25rem .55rem;
            border-radius: 999px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .ch-perm-badge.ok   { background: rgba(34,197,94,.15); color: #22c55e; }
        .ch-perm-badge.warn { background: rgba(245,158,11,.15); color: #f59e0b; }
        .ch-perm-badge.bad  { background: rgba(239,68,68,.15); color: #ef4444; }
        [data-theme="light"] #ch-app-perms-overlay {
            background: rgba(15,23,42,.45);
        }
        [data-theme="light"] .ch-perm-name { color: #0c0c0c; }
        [data-theme="light"] .ch-perm-item { color: #334155; }
        [data-theme="light"] .ch-perm-desc { color: #64748b; }
        .ios-notif-header {
            text-align: center;
            padding: 1.6rem 1.5rem 1rem;
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .ios-notif-icon {
            width: 64px; height: 64px;
            background: linear-gradient(135deg,#2f80ed,#22c55e);
            border-radius: var(--radius-lg, 18px);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.8rem;
            margin: 0 auto 1rem;
            box-shadow: 0 8px 24px rgba(47,128,237,.4);
        }
        .ios-notif-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: #f0f0fa;
            margin-bottom: .4rem;
        }
        .ios-notif-sub {
            font-size: .78rem;
            color: rgba(240,240,250,.5);
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.5;
        }
        .ios-notif-perks {
            padding: 1rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }
        .ios-notif-perk {
            display: flex;
            align-items: flex-start;
            gap: .75rem;
            font-size: .8rem;
            color: rgba(240,240,250,.75);
            font-family: 'JetBrains Mono', monospace;
            line-height: 1.4;
        }
        .ios-notif-perk-icon {
            width: 32px; height: 32px;
            border-radius: var(--radius-sm, 10px);
            display: flex; align-items: center; justify-content: center;
            font-size: .95rem;
            flex-shrink: 0;
        }
        .ios-notif-actions {
            border-top: 1px solid rgba(255,255,255,.07);
            display: flex;
            flex-direction: column;
        }
        .ios-notif-actions button {
            width: 100%;
            padding: .95rem;
            border: none;
            background: transparent;
            font-family: 'Syne', sans-serif;
            font-size: .92rem;
            cursor: pointer;
            transition: background .15s;
        }
        .ios-notif-actions button:first-child {
            font-weight: 700;
            color: #22c55e;
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .ios-notif-actions button:first-child:hover { background: rgba(47,128,237,.1); }
        .ios-notif-actions button:last-child {
            color: rgba(240,240,250,.4);
            font-size: .82rem;
        }
        .ios-notif-actions button:last-child:hover { background: rgba(255,255,255,.04); }


/* ════════════════════════════════════════════════════════
   NEON KEYFRAMES (Avatar dev photo)
════════════════════════════════════════════════════════ */

@keyframes neonSpinConic  { 0%{transform:rotate(0deg)}   100%{transform:rotate(360deg)} }
                          @keyframes neonSpinConic2 { 0%{transform:rotate(0deg)}   100%{transform:rotate(-360deg)} }
                          @keyframes neonGlowPulse  { 0%,100%{opacity:.8} 50%{opacity:1} }


/* ════════════════════════════════════════════════════════
   SECCIONES NUEVAS (Services grid, Footer extras)
════════════════════════════════════════════════════════ */

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }

        .service-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 69, 0, 0.05));
            border: 2px solid rgba(255, 69, 0, 0.3);
            border-radius: var(--radius-xl, 22px);
            padding: 2.5rem;
            text-align: center;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 69, 0, 0.1) 0%, transparent 70%);
            transform: scale(0);
            transition: transform 0.6s ease;
        }

        .service-card:hover::before {
            transform: scale(1);
        }

        .service-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 50px rgba(255, 69, 0, 0.4);
            border-color: var(--primary);
        }

        .service-icon {
            font-size: clamp(1.6rem, 6vw, 3.5rem);
            color: var(--primary);
            margin-bottom: clamp(0.6rem, 2vw, 1.5rem);
            line-height: 1;
            display: inline-block;
            animation: iconFloat 3s ease-in-out infinite;
            filter: drop-shadow(0 5px 15px rgba(255, 69, 0, 0.5));
            position: relative;
            z-index: 1;
        }

        .service-card h3 {
            color: var(--accent);
            font-size: 1.5rem;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .service-card p {
            color: #cccccc;
            line-height: 1.6;
        }



        .badges-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 1.2rem;
            margin: 2rem 0;
        }

        .badge {
            width: auto;
            height: auto;
            aspect-ratio: 1;
            background: linear-gradient(145deg, rgba(47,128,237,0.08), rgba(34,197,94,0.04));
            border-radius: var(--radius-xl, 22px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 1.4rem 0.8rem;
            border: 1px solid rgba(47,128,237,0.25);
            transition: all 0.35s cubic-bezier(.2,.9,.2,1);
            cursor: pointer;
            position: relative;
            overflow: visible;
        }

        .badge::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-xl, 22px);
            background: linear-gradient(135deg, rgba(47,128,237,0.15), rgba(56,189,248,0.08));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .badge:hover {
            transform: translateY(-8px) scale(1.04);
            border-color: rgba(47,128,237,0.7);
            box-shadow: 0 16px 40px rgba(47,128,237,0.35), 0 0 0 1px rgba(47,128,237,0.2);
        }

        .badge:hover::after {
            opacity: 1;
        }

        .badge i {
            font-size: 2.2rem;
            color: var(--primary);
            filter: drop-shadow(0 0 8px rgba(47,128,237,0.5));
            position: relative;
            z-index: 1;
        }

        .badge span {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.75);
            text-align: center;
            font-weight: 600;
            letter-spacing: 0.03em;
            position: relative;
            z-index: 1;
        }

        .testimonials-container {
            position: relative;
            max-width: 800px;
            margin: 2rem auto;
            overflow: hidden;
        }

        .testimonial {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 69, 0, 0.05));
            border: 2px solid rgba(255, 69, 0, 0.3);
            border-radius: var(--radius-xl, 22px);
            padding: 3rem;
            text-align: center;
            position: relative;
        }

        .testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            color: #cccccc;
            margin-bottom: 2rem;
            line-height: 1.8;
        }

        .testimonial-author {
            color: var(--accent);
            font-weight: bold;
            font-size: 1.1rem;
        }

        .testimonial-role {
            color: var(--primary);
            font-size: 0.95rem;
            margin-top: 0.5rem;
        }

        .quote-icon {
            font-size: 4rem;
            color: var(--primary);
            opacity: 0.2;
            position: absolute;
            top: 20px;
            left: 30px;
        }

        /* ── PROYECTOS ── */
        /* ── CONTACTO ── */
        .contact-wrap {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 3rem;
            align-items: start;
        }
        @media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; } }

        .contact-eyebrow {
            font-family: 'JetBrains Mono', monospace;
            font-size: .75rem;
            color: var(--accent);
            opacity: .7;
            margin-bottom: .5rem;
        }
        .contact-title {
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.02em;
            background: linear-gradient(135deg,#fff 0%,var(--accent) 60%,var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }
        .contact-sub { font-size: .9rem; color: rgba(232,232,240,.5); line-height: 1.7; margin-bottom: 1.8rem; }

        .contact-status {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            font-size: .78rem;
            color: rgba(232,232,240,.5);
            font-family: 'JetBrains Mono', monospace;
        }
        .status-dot {
            width: 8px; height: 8px;
            border-radius: var(--radius-full, 50%);
            background: #00e676;
            box-shadow: 0 0 0 3px rgba(0,230,118,.2);
            animation: pulse-status 2.5s infinite;
        }
        @keyframes pulse-status {
            0%,100% { box-shadow: 0 0 0 3px rgba(0,230,118,.2); }
            50%      { box-shadow: 0 0 0 6px rgba(0,230,118,.05); }
        }

        /* Formulario */
        .contact-form-wrap {
            background: rgba(19,19,31,.95);
            border: 1px solid rgba(47,128,237,.2);
            border-radius: var(--radius-xl, 22px);
            padding: 2rem;
        }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
        @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

        .form-group { display: flex; flex-direction: column; gap: .35rem; }
        .form-label  { font-size: .75rem; font-weight: 600; color: rgba(232,232,240,.6); letter-spacing: .04em; }
        .form-input  {
            padding: .7rem .95rem;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-sm, 10px);
            color: #e8e8f0;
            font-size: .88rem;
            outline: none;
            transition: all .2s ease;
            width: 100%;
        }
        .form-input:focus { border-color: rgba(47,128,237,.55); background: rgba(47,128,237,.04); box-shadow: 0 0 0 3px rgba(47,128,237,.1); }
        .form-input::placeholder { color: rgba(232,232,240,.3); }
        .form-input.error { border-color: rgba(255,100,100,.5); }
        .form-select { cursor: pointer; }
        .form-select option { background: #1a1a2e; }
        .form-textarea { resize: vertical; min-height: 120px; font-family: inherit; }
        .form-err   { font-size: .72rem; color: #ff6b6b; min-height: 1em; }
        .form-char  { font-size: .68rem; color: rgba(232,232,240,.3); font-family: 'JetBrains Mono', monospace; text-align: right; margin-top: .2rem; }

        .form-submit {
            width: 100%;
            padding: .85rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            border: none;
            border-radius: var(--radius-md, 14px);
            font-size: .92rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s ease;
            margin-top: .5rem;
            box-shadow: 0 6px 20px rgba(47,128,237,.3);
        }
        .form-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(47,128,237,.45); }
        .form-submit:disabled { opacity: .6; cursor: not-allowed; }

        .form-feedback {
            margin-top: .85rem;
            padding: .75rem 1rem;
            border-radius: var(--radius-sm, 10px);
            font-size: .84rem;
            font-weight: 600;
            text-align: center;
            display: none;
        }
        .form-feedback.success { background: rgba(0,230,118,.1); border: 1px solid rgba(0,230,118,.3); color: #00e676; display: block; }
        .form-feedback.error   { background: rgba(255,100,100,.1); border: 1px solid rgba(255,100,100,.3); color: #ff6b6b; display: block; }

        .visitor-counter {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 69, 0, 0.1));
            padding: 10px 20px;
            border-radius: var(--radius-2xl, 28px);
            border: 2px solid var(--primary);
            margin: 1rem 0;
        }

        .visitor-counter i {
            color: var(--primary);
            font-size: 1.2rem;
        }

        .visitor-number {
            color: var(--accent);
            font-weight: bold;
            font-size: 1.1rem;
        }

        .typing-effect {
            font-size: 1.3rem;
            color: var(--accent);
            margin: 1rem 0;
            min-height: 40px;
            display: inline-block;
        }

        .typing-cursor {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .copy-email {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--radius-2xl, 28px);
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .copy-email:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(255, 69, 0, 0.5);
        }

        #game {
            background: linear-gradient(135deg, rgba(20, 20, 40, 0.8), rgba(40, 20, 60, 0.6));
            border: 2px solid rgba(47, 128, 237, 0.35);
            border-radius: var(--radius-xl, 22px);
            padding: 2.5rem 1.5rem;
        }

        .game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 1.1rem;
            max-width: 920px;
            margin: 0 auto;
        }

        .game-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: .7rem;
            padding: 1.4rem 1.3rem;
            border-radius: var(--radius-lg, 18px);
            background: linear-gradient(160deg, rgba(47, 128, 237, .08), rgba(20, 20, 40, .55));
            border: 1px solid rgba(255, 255, 255, .09);
            text-align: left;
            transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s;
        }

        .game-card:hover {
            transform: translateY(-4px);
            border-color: var(--gc, var(--primary));
            box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px var(--gc, var(--primary));
        }

        .game-card-head {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: var(--radius-md, 14px);
            font-size: 1.35rem;
            color: #fff;
            background: linear-gradient(135deg, var(--gc, var(--primary)), rgba(255, 255, 255, .12));
            box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
        }

        .game-card h3 {
            margin: 0;
            font-size: 1.02rem;
            font-weight: 800;
            color: #fff;
        }

        .game-card p {
            margin: 0;
            font-size: .8rem;
            line-height: 1.55;
            color: rgba(232, 232, 240, .6);
            flex: 1;
        }

        .game-card button {
            background: linear-gradient(135deg, var(--gc, var(--primary)), var(--primary));
            color: #fff;
            border: none;
            padding: .55rem 1.15rem;
            border-radius: var(--radius-md, 14px);
            font-size: .8rem;
            font-weight: 700;
            cursor: pointer;
            transition: filter .2s, transform .2s;
        }

        .game-card button:hover {
            filter: brightness(1.15);
            transform: translateY(-2px);
        }

        @media (hover: hover) {
            button:hover:not(.ch-btn):not(.ai-quick-btn):not(.ai-circle-btn):not(.ai-mood-btn):not(.ai-sug-btn):not(.auth-tab):not(.auth-close):not(.auth-eye):not(.auth-google):not([class*="ch-btn"]) {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(47, 128, 237, 0.3);
            }
        }

        /* ══ Botones faltantes (admin-hub, updater) ══ */
        .blog-btn-danger {
            background: rgba(239,68,68,.15);
            color: #f87171;
            border: 1px solid rgba(239,68,68,.25);
            border-radius: var(--btn-radius);
            padding: var(--btn-padding-sm);
            font-family: var(--btn-font);
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--btn-transition);
        }
        @media (hover: hover) {
            .blog-btn-danger:hover { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.45); }
        }
        .updater-close-btn {
            background: var(--btn-ghost-bg);
            border: 1px solid var(--btn-ghost-border);
            color: rgba(232,232,240,.5);
            border-radius: var(--btn-radius);
            padding: .25rem .5rem;
            font-size: .72rem;
            cursor: pointer;
            transition: var(--btn-transition);
        }
        @media (hover: hover) {
            .updater-close-btn:hover { color: #fff; border-color: rgba(255,255,255,.25); }
        }

        #floating-menu {
            position: fixed;
            bottom: 30px;
            left: 30px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px 25px;
            border-radius: var(--radius-3xl, 50px);
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 5px 25px rgba(255, 69, 0, 0.6);
            transition: all 0.4s ease;
            font-weight: bold;
            animation: floatBounce 3s ease-in-out infinite;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        @keyframes floatBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        #floating-menu:hover {
            transform: scale(1.15) rotate(5deg) translateY(-5px);
            box-shadow: 0 15px 40px rgba(255, 69, 0, 0.9);
        }

        #floating-menu::before {
            content: '🔥';
            font-size: 1.2rem;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .konami-active {
            animation: rainbow 2s linear infinite !important;
        }

        @keyframes rainbow {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }

        footer {
            background: linear-gradient(180deg, rgba(5,5,10,0.0) 0%, rgba(5,5,10,0.95) 40%);
            text-align: center;
            padding: 4rem 2rem 2.5rem;
            margin-top: 4rem;
            border-top: 1px solid rgba(47,128,237,0.15);
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(47,128,237,0.5), rgba(56,189,248,0.5), rgba(47,128,237,0.5), transparent);
        }

        .footer-content {
            max-width: 700px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        /* Terminal */
        .footer-terminal {
            font-family: 'JetBrains Mono', 'Courier New', monospace;
            font-size: 0.88rem;
            color: rgba(255,255,255,0.5);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.55));
            -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: var(--radius-md, 14px);
            padding: 0 0 14px;
            display: flex;
            flex-direction: column;
            min-width: min(420px, 90vw);
            box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
            position: relative;
            overflow: hidden;
            transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
        }

        .footer-terminal::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(120deg, rgba(47,128,237,0.35), transparent 35%, transparent 65%, rgba(56,189,248,0.3));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: .7;
        }

        .footer-terminal:hover {
            border-color: rgba(47,128,237,0.35);
            box-shadow: 0 10px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(47,128,237,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
            transform: translateY(-2px);
        }

        .footer-terminal-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 9px 12px;
            background: rgba(255,255,255,0.03);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            margin-bottom: 12px;
        }

        .ft-dot { width: 9px; height: 9px; border-radius: var(--radius-full, 50%); opacity: .85; }
        .ft-dot-r { background: #ff5f56; }
        .ft-dot-y { background: #ffbd2e; }
        .ft-dot-g { background: #27c93f; }

        .footer-terminal-line {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
            padding: 0 20px;
        }

        .footer-prompt {
            color: var(--primary);
            font-weight: 600;
        }

        .footer-sep { color: rgba(255,255,255,0.3); }

        .footer-cmd { color: rgba(255,255,255,0.75); }

        .footer-cursor {
            color: var(--accent);
            animation: none;
            opacity: 1;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0; }
        }

        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .footer-terminal { background: rgba(10,10,14,0.92); }
        }

        /* Cursor del footer: animación activa siempre (independiente del SO) */

        /* Redes sociales */
        .footer-socials {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .social-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: var(--radius-md, 14px);
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.7);
            transition: all 0.25s ease;
            letter-spacing: 0.02em;
        }

        .social-link i { font-size: 1.1rem; }

        .social-wa { color: rgba(37,211,102,.9); border-color: rgba(37,211,102,.22); background: rgba(37,211,102,.06); }
        .social-wa i { color: #25d366; }
        .social-wa:hover { background: rgba(37,211,102,0.16); border-color: rgba(37,211,102,0.5); box-shadow: 0 8px 20px rgba(37,211,102,.25); transform: translateY(-3px); }

        .social-tg { color: rgba(0,136,204,.9); border-color: rgba(0,136,204,.22); background: rgba(0,136,204,.06); }
        .social-tg i { color: #0088cc; }
        .social-tg:hover { background: rgba(0,136,204,0.16); border-color: rgba(0,136,204,0.5); box-shadow: 0 8px 20px rgba(0,136,204,.25); transform: translateY(-3px); }

        .social-em { color: rgba(34,197,94,.9); border-color: rgba(34,197,94,.22); background: rgba(34,197,94,.06); }
        .social-em i { color: #22c55e; }
        .social-em:hover { background: rgba(47,128,237,0.16); border-color: rgba(47,128,237,0.5); box-shadow: 0 8px 20px rgba(47,128,237,.25); transform: translateY(-3px); }

        .social-yt { color: rgba(255,0,0,.9); border-color: rgba(255,0,0,.22); background: rgba(255,0,0,.06); }
        .social-yt i { color: #ff0000; }
        .social-yt:hover { background: rgba(255,0,0,0.16); border-color: rgba(255,0,0,0.5); box-shadow: 0 8px 20px rgba(255,0,0,.25); transform: translateY(-3px); }

        /* Visitantes */
        .footer-visitors {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: rgba(255,255,255,0.4);
        }

        .footer-visitors i { color: var(--primary); }
        .footer-visitors strong { color: var(--accent); font-variant-numeric: tabular-nums; }

        /* Bottom bar */
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            font-size: 0.8rem;
            color: rgba(255,255,255,0.3);
            border-top: 1px solid rgba(255,255,255,0.06);
            padding-top: 1.5rem;
            width: 100%;
        }

        .footer-bottom strong { color: rgba(255,255,255,0.6); }

        .footer-kbd {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'JetBrains Mono', monospace;
            background: rgba(47,128,237,0.12);
            border: 1px solid rgba(47,128,237,0.25);
            border-radius: var(--radius-sm, 10px);
            padding: 4px 10px;
            color: rgba(56,189,248,0.7);
        }

        .footer-kbd em { font-style: normal; color: rgba(255,255,255,0.3); }

        @media (max-width: 768px) {
            .splash-title { font-size: 2.5rem; }
            /* NAV DESKTOP — forzar oculto en mobile (no sobreescribir el burger) */
            header nav { display: none !important; }
            nav ul { flex-wrap: wrap; gap: 0.3rem; }
            nav a { font-size: 0.75rem; padding: 0.32rem 0.6rem; }
            .header-logo-text { font-size: 1rem; }
            .skill { flex-direction: column; text-align: center; }
            .skill-icon { margin-right: 0; margin-bottom: 1rem; }
            /* Stats — 2 columnas compactas */
            .stats-section { grid-template-columns: repeat(2,1fr); gap: .8rem; }
            .stat-card { padding: 1rem .7rem; }
            .stat-number { font-size: 1.8rem !important; }
            .stat-label { font-size: .82rem !important; }
            .stat-sub { font-size: .65rem !important; }
            /* Servicios — 2 columnas en mobile */
            .services-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
            .service-card { padding: 1.2rem .8rem; }
            /* .service-icon: tamaño fluido ahora controlado por clamp() en components.css */
            .service-card h3 { font-size: 1rem; margin-bottom: .4rem; }
            .service-card p { font-size: .78rem; line-height: 1.5; }
            .command-palette { width: 95%; }
            .footer-bottom { flex-direction: column; gap: 1rem; }
            .header-inner { padding: 0.5rem 1rem; gap: 0.8rem; }
        }
    
        /* ═══ PROTECCIÓN ANTI-COPIAR ════════════════════════════ */
        ::selection { background: rgba(47,128,237,.15); color: var(--text); }

        /* ═══ ANTI-DEVTOOLS OVERLAY ═════════════════════════════ */
        #devtools-warning {
            display: none;
            position: fixed; inset: 0; z-index: 99999;
            background: rgba(0,0,0,.97);
            align-items: center; justify-content: center;
            flex-direction: column; gap: 1rem; text-align: center;
        }
        #devtools-warning.show { display: flex; }
        #devtools-warning h2 { font-size: 1.8rem; color: var(--primary); }
        #devtools-warning p { color: var(--muted); font-size: .9rem; max-width: 400px; }


/* ════════════════════════════════════════════════════════
   CHAT DIALOG + SCROLLBAR CUSTOM
════════════════════════════════════════════════════════ */

@keyframes chDialogIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#ch-activity-list::-webkit-scrollbar{width:3px}
#ch-activity-list::-webkit-scrollbar-thumb{background:rgba(47,128,237,.3);border-radius:3px} .ch-act-item{padding:.38rem 1rem;font-size:.6rem;color:rgba(240,240,250,.65);
  border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:.5rem;line-height:1.4}
.ch-act-item:last-child{border-bottom:none}
.ch-act-time{font-size:.52rem;color:rgba(240,240,250,.28);white-space:nowrap;flex-shrink:0;margin-top:.05rem}
#ch-activity-btn:hover{background:linear-gradient(135deg,rgba(47,128,237,.25),rgba(47,128,237,.12));transform:translateY(-2px)}
@media(max-width:768px){
  #ch-activity-btn{right:auto!important;left:16px!important;}
}


/* ═══ CODEHUB LOGO SPIN — Splash ═══ */
.ch-logo-img.loaded {
    transform-origin: center center;
}

/* ═══ NEON CURSOR TRAIL ═══ */
/* REMOVED: Custom cursor - using browser default for better performance */

/* ═══ MAGNETIC CARD EFFECT ═══ */
.stat-card, .service-card, .wm-card, .proj-card {
    transition: transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s ease, border-color .3s;
    transform-style: preserve-3d;
}

/* ═══ HERO NAME GLOW PULSE ═══ */
.hero-name {
    position: relative;
}
.hero-name::after {
    content: '';
    position: absolute;
    inset: -8px -20px;
    background: radial-gradient(ellipse, rgba(47,128,237,0.12), transparent 70%);
    border-radius: var(--radius-full, 50%);
    animation: heroNameGlow 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes heroNameGlow {
    0%,100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* ═══ SPLASH WAVE SIZE FIX ═══ */
/* .ch-wave background-size override removido — usa el valor original 1000px 110px definido en el splash */

/* ── Experimental menu mobile ── */
@media(max-width:768px){
  .menu-toggle-btn {
    box-sizing: border-box;
    width: 32px;
    height: 132px;
    padding: .4rem .25rem;
    writing-mode: vertical-rl;
    overflow: hidden;
  }
  .menu-toggle-btn i { font-size: .85rem; }
  .menu-toggle-text {
    display: block !important;
    font-size: .52rem;
    letter-spacing: 1px;
  }
  #experimental-menu { width:260px; }
}

        /* ── CodeHub badge text morph: se anima en ux-animations.js (initTextMorph) ── */

/* ── AI head X close button ── */
.ai-head-actions { margin-left: auto; display: flex; gap: 4px; }
.ai-head-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(200,200,230,.5);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  transition: background .18s, color .18s, border-color .18s, transform .15s;
}
.ai-head-btn:hover {
  background: rgba(255,80,80,.18);
  color: #ff6b6b;
  border-color: rgba(255,80,80,.4);
  transform: scale(1.1);
}
.ai-head-btn:active { transform: scale(.92); }

/* ── AI backdrop blur ── */
#ai-backdrop {
  will-change: opacity;
}

/* ── badge text morph — fix overflow clipping (permite el blur del gooey) ── */
.header-logo-badge { overflow: visible !important; }

/* ═══════════════════════════════════════════════════════════════
   COACH TIPS — burbujas de ayuda contextual (patrón reutilizable)
   Muestran brevemente para qué sirve un botón/función, apuntando
   hacia él con una flechita. Se cierran solas, al tocarlas, o al
   tocar el elemento señalado — y no vuelven a aparecer (se guardan
   en localStorage por "key"). Ver showCoachTip() en el JS de cada
   página que las use.
   ═══════════════════════════════════════════════════════════════ */
.coach-tip {
  position: fixed;
  z-index: 9999;
  max-width: 210px;
  background: linear-gradient(135deg, var(--primary,#2f80ed), var(--secondary,#38bdf8));
  color: #fff;
  font-family: inherit;
  font-size: .74rem;
  line-height: 1.35;
  font-weight: 600;
  padding: .6rem .8rem;
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(6px) scale(.94);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.coach-tip.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; cursor: pointer; }
.coach-tip .coach-tip-arrow {
  position: absolute;
  width: 10px; height: 10px;
  background: inherit;
  transform: rotate(45deg);
}
.coach-tip[data-pos="bottom"] .coach-tip-arrow { top: -5px; }
.coach-tip[data-pos="top"] .coach-tip-arrow    { bottom: -5px; }
@media (max-width:480px){ .coach-tip { max-width: 168px; font-size:.68rem; padding:.5rem .65rem; } }

/* -- SIDE NAV — Barra lateral deslizable (flexbox layout) -- */
#side-nav {
  position: fixed;
  top: 0; right: 0; left: auto;
  width: min(300px, 88vw);
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: rgba(7,7,14,.98);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-left: 1px solid rgba(47,128,237,.22);
  box-shadow: -20px 0 60px rgba(0,0,0,.55);
  transform: translateX(102%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(47,128,237,.3) transparent;
}
#side-nav.open { transform: translateX(0); visibility: visible; }
#side-scrim {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
#side-scrim.open { opacity: 1; pointer-events: auto; }

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.side-brand { display: flex; align-items: center; gap: .6rem; }
.side-brand img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(47,128,237,.35); }
.side-brand b { font-size: .95rem; color: var(--text,#e8e8f0); display: block; line-height: 1.15; }
.side-brand small { font-family: var(--mono,'JetBrains Mono'); font-size: .6rem; color: var(--muted,#888); }
.side-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  color: rgba(240,240,250,.65); border-radius: 9px; cursor: pointer; font-size: .75rem;
  transition: all .2s;
}
.side-close:hover { color: #fff; border-color: rgba(47,128,237,.5); background: rgba(47,128,237,.1); }

.side-group { padding: .6rem 1rem 0; flex-shrink: 0; }
.side-group-label {
  font-family: var(--mono,'JetBrains Mono');
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,240,250,.38); margin: .35rem .45rem .5rem;
}
.side-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .65rem; margin: .12rem 0;
  border-radius: 12px; color: rgba(240,240,250,.72);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  transition: all .18s;
}
.side-link i { width: 20px; text-align: center; color: var(--a,#38bdf8); font-size: .82rem; flex-shrink: 0; }
.side-link:hover, .side-link.active {
  background: rgba(47,128,237,.12); color: #fff;
  border: 1px solid rgba(47,128,237,.22);
}
.side-link.soon { opacity: .45; pointer-events: none; }

.side-foot {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  flex-shrink: 0;
}
.side-foot a {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(240,240,250,.6); font-size: .85rem;
  border: 1px solid rgba(255,255,255,.09); text-decoration: none;
  transition: all .2s;
}
.side-foot a:hover { color: #fff; border-color: rgba(47,128,237,.5); background: rgba(47,128,237,.1); transform: translateY(-2px); }
.side-copy { padding: .7rem 1rem .9rem; text-align: center; font-size: .58rem; color: rgba(240,240,250,.3); font-family: var(--mono,'JetBrains Mono'); flex-shrink: 0; }

/* Preferencias en el menú lateral — siempre visibles (todo vive en el único burger) */
.side-prefs { display: block; }
.side-pref-btn {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .65rem; margin: .12rem 0;
  border-radius: 12px; color: rgba(240,240,250,.72);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; text-align: left; transition: all .18s;
}
.side-pref-btn i { width: 20px; text-align: center; color: var(--a,#38bdf8); font-size: .82rem; flex-shrink: 0; }
.side-pref-btn:hover { background: rgba(47,128,237,.12); color: #fff; border-color: rgba(47,128,237,.22); }
.side-pref-btn.active { background: rgba(47,128,237,.12); color: var(--accent); border-color: rgba(47,128,237,.22); }

/* El header solo logo + burger en TODAS las pantallas; los controles viven en el menú */
.header-actions #theme-toggle,
.header-actions #lang-toggle,
.header-actions #cfg-btn { display: none !important; }
/* Nav central de escritorio oculta en todas las pantallas (todo en el menú) */
header nav { display: none !important; }

/* Burger visible en todas las pantallas */
.burger-btn { display: flex !important; }

/* ── Header delgado — barra compacta de una sola línea ── */
.header-inner { padding: 0.4rem 1.5rem; gap: 0.7rem; }
.header-logo-desc { display: none !important; }
.header-logo-text { font-size: 1.02rem; }
.header-typing { display: none !important; }
.burger-btn { width: 34px; height: 34px; padding: 7px; }
/* Logo de una sola línea: texto + badge en fila horizontal */
.header-logo-copy { flex-direction: row; align-items: center; gap: 0.5rem; }
.header-logo-meta { flex-wrap: nowrap; gap: 0.35rem; }
.header-logo-badge { font-size: 0.62rem; padding: 2px 9px; }

/* ════════════════════════════════════════════════════════════
   LIGHT MODE — overrides completos
   Secciones con id propio (skills/news/game/otw/mi-pueblo) y
   componentes con texto claro fijo que quedaban ilegibles.
   ════════════════════════════════════════════════════════════ */
[data-theme="light"] #skills {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,240,250,.96));
  border-color: rgba(47,128,237,.25);
}
[data-theme="light"] #skills::after { background: radial-gradient(circle at 50% 50%, rgba(47,128,237,.04) 0%, transparent 70%); }
[data-theme="light"] #news-section {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,240,250,.96));
  border-color: rgba(47,128,237,.25);
}
[data-theme="light"] #game {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,244,252,.96));
  border-color: rgba(47,128,237,.25);
}
[data-theme="light"] #mi-pueblo { text-align: left; }

/* ── Header ── */
[data-theme="light"] .header-logo-text { color: #0f172a; }
[data-theme="light"] .header-logo-text .bracket { color: var(--primary); text-shadow: none; }
[data-theme="light"] .header-logo-desc { color: rgba(15,23,42,.5); }
[data-theme="light"] .header-typing { color: rgba(15,23,42,.45); }
[data-theme="light"] #lang-toggle {
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.12);
  color: rgba(15,23,42,.7);
}
[data-theme="light"] .burger-btn span { background: var(--primary); }

/* ── Hero ── */
[data-theme="light"] .hero-title { color: #0f172a; }
[data-theme="light"] .hero-name { color: #0f172a; }
[data-theme="light"] .hero-name .liquid-letter {
  background: linear-gradient(135deg, #0f172a 0%, var(--accent) 60%, var(--primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .hero-name .liquid-letter[style*="color"] {
  -webkit-text-fill-color: unset; background: none; color: #0f172a;
}
[data-theme="light"] .hero-note i { color: var(--primary); }
[data-theme="light"] .hero-note span { color: #475569; }
[data-theme="light"] .hero-metric {
  background: #fff; border-color: rgba(15,23,42,.1);
  box-shadow: 0 1px 8px rgba(15,23,42,.05);
}
[data-theme="light"] .hero-metric strong { color: #0f172a; }
[data-theme="light"] .hero-metric span { color: #64748b; }

/* ── Open to work ── */
[data-theme="light"] .otw-inner {
  background: linear-gradient(135deg, rgba(0,230,118,.05), rgba(0,230,118,.02));
  border-color: rgba(0,230,118,.25);
}
[data-theme="light"] .otw-title { color: #0f172a; }
[data-theme="light"] .otw-desc { color: #475569; }
[data-theme="light"] .otw-tags span {
  color: #334155; background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.1);
}
[data-theme="light"] .otw-info-card {
  background: rgba(255,255,255,.9); border-color: rgba(15,23,42,.1);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
[data-theme="light"] .otw-info-label { color: #64748b; }
[data-theme="light"] .otw-info-val { color: #0f172a; }
[data-theme="light"] .otw-btn-ghost {
  background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.12); color: #334155;
}
[data-theme="light"] .otw-btn-ghost:hover { background: rgba(47,128,237,.1); color: #0c0c0c; }

/* ── Mi pueblo ── */
[data-theme="light"] .pueblo-desc { color: #475569; }
[data-theme="light"] .pueblo-nav-hint { color: #475569; }

/* ── Skills ── */
[data-theme="light"] .sk-tab { color: #475569; border-color: rgba(47,128,237,.2); }
[data-theme="light"] .sk-tab:hover,
[data-theme="light"] .sk-tab.active { border-color: var(--primary); color: var(--accent); background: rgba(47,128,237,.1); }
[data-theme="light"] .skill-chip {
  background: #fff; border-color: rgba(47,128,237,.2);
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
}
[data-theme="light"] .skill-chip:hover {
  border-color: rgba(47,128,237,.45); box-shadow: 0 12px 30px rgba(15,23,42,.1);
}
[data-theme="light"] .sc-top { color: #0f172a; }
[data-theme="light"] .sc-desc { color: #64748b; }
[data-theme="light"] .sc-bar { background: rgba(15,23,42,.08); }
[data-theme="light"] .tool-badge {
  background: #fff; border-color: rgba(15,23,42,.12); color: #334155;
  box-shadow: 0 1px 8px rgba(15,23,42,.05);
}
[data-theme="light"] .tool-badge:hover { border-color: rgba(47,128,237,.4); color: var(--primary); background: rgba(47,128,237,.06); }

/* ── Services ── */
[data-theme="light"] .service-card {
  background: #fff; border-color: rgba(15,23,42,.1);
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
}
[data-theme="light"] .service-card:hover { border-color: var(--primary); box-shadow: 0 12px 32px rgba(15,23,42,.12); }
[data-theme="light"] .service-card h3 { color: var(--primary); }
[data-theme="light"] .service-card p { color: #475569; }

/* ── Weather ── */
[data-theme="light"] .wx-input {
  background: #fff; border-color: rgba(15,23,42,.12); color: #0f172a;
}
[data-theme="light"] .wx-input::placeholder { color: rgba(15,23,42,.35); }
[data-theme="light"] .wx-loading { color: #64748b; }

/* ── News ── */
[data-theme="light"] .news-idx-tab { color: #475569; border-color: rgba(47,128,237,.2); }
[data-theme="light"] .news-idx-tab:hover,
[data-theme="light"] .news-idx-tab.active-idx { border-color: var(--primary); color: var(--accent); background: rgba(47,128,237,.1); }
[data-theme="light"] .news-idx-icon { color: var(--primary); }
[data-theme="light"] .blogger-card {
  background: #fff; border-color: rgba(15,23,42,.1);
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
}
[data-theme="light"] .blogger-card:hover { border-color: rgba(47,128,237,.35); box-shadow: 0 12px 32px rgba(15,23,42,.1); }
[data-theme="light"] .blogger-card-title { color: #0f172a; }
[data-theme="light"] .blogger-card-desc,
[data-theme="light"] .blogger-card-meta { color: #64748b; }
[data-theme="light"] .blogger-card-label { color: var(--primary); }
[data-theme="light"] .news-fresh-label { color: #64748b; }
[data-theme="light"] .blogger-error { color: #64748b; border-color: rgba(15,23,42,.15); }

/* ── Contact ── */
[data-theme="light"] .contact-title {
  background: linear-gradient(135deg, #0f172a 0%, var(--accent) 60%, var(--primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .contact-sub { color: #475569; }
[data-theme="light"] .contact-status { color: #475569; }
[data-theme="light"] .contact-form-wrap {
  background: #fff; border-color: rgba(15,23,42,.1);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
[data-theme="light"] .form-label { color: #334155; }
[data-theme="light"] .form-input {
  background: #f8fafc; border-color: rgba(15,23,42,.12); color: #0f172a;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-char { color: rgba(15,23,42,.35); }
[data-theme="light"] .form-select { background: #f8fafc; border-color: rgba(15,23,42,.12); color: #0f172a; }
[data-theme="light"] .form-select option { background: #fff; color: #0f172a; }
[data-theme="light"] .form-feedback.success { background: rgba(0,230,118,.12); border-color: rgba(0,180,92,.4); color: #047857; }
[data-theme="light"] .form-feedback.error { background: rgba(255,100,100,.12); border-color: rgba(220,60,60,.4); color: #b91c1c; }

/* ── Games ── */
[data-theme="light"] .game-card {
  background: linear-gradient(145deg, rgba(47,128,237,.05), rgba(20,20,40,.04));
  border-color: rgba(15,23,42,.1);
}
[data-theme="light"] .game-card:hover { border-color: rgba(47,128,237,.4); box-shadow: 0 12px 32px rgba(15,23,42,.1); }
[data-theme="light"] .game-card h3 { color: #0f172a; }
[data-theme="light"] .game-card p { color: #475569; }

/* ── Footer ── */
[data-theme="light"] .footer-content,
[data-theme="light"] .footer-terminal { background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.1); }
[data-theme="light"] .footer-sep { color: rgba(15,23,42,.25); }
[data-theme="light"] .footer-bottom { color: rgba(15,23,42,.45); border-color: rgba(15,23,42,.1); }
[data-theme="light"] .footer-bottom strong { color: rgba(15,23,42,.6); }
[data-theme="light"] .footer-kbd em { color: rgba(15,23,42,.4); }
[data-theme="light"] .footer-terminal { color: #334155; }
[data-theme="light"] .footer-terminal .footer-cmd { color: #334155; }
[data-theme="light"] .social-link { border-color: rgba(15,23,42,.12); color: rgba(15,23,42,.6); }
[data-theme="light"] .social-link:hover { background: rgba(47,128,237,.1); border-color: rgba(47,128,237,.4); color: #0c0c0c; }

/* ── Dock ── */
[data-theme="light"] #hub-dock {
  background: rgba(255,255,255,.85);
  border-color: rgba(15,23,42,.1);
  box-shadow: 0 8px 32px rgba(15,23,42,.15);
}
[data-theme="light"] .dock-label { color: #475569; }

/* ── Config panel ── */
[data-theme="light"] .cfg-dialog {
  background: linear-gradient(160deg, rgba(255,255,255,.99), rgba(248,250,252,.99));
  border-color: rgba(47,128,237,.25);
  box-shadow: 0 32px 80px rgba(15,23,42,.18);
}
[data-theme="light"] .cfg-head { border-bottom-color: rgba(15,23,42,.08); }
[data-theme="light"] .cfg-head-title { color: #0f172a; }
[data-theme="light"] .cfg-label { color: rgba(15,23,42,.5); }
[data-theme="light"] .cfg-opt { color: rgba(15,23,42,.6); border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); }
[data-theme="light"] .cfg-opt:hover { border-color: rgba(47,128,237,.35); color: var(--accent); }
[data-theme="light"] .cfg-opt.active { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="light"] .cfg-toggle-row { color: rgba(15,23,42,.65); }
[data-theme="light"] .cfg-slider { background: rgba(15,23,42,.15); }
[data-theme="light"] .cfg-slider::before { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); }
[data-theme="light"] .cfg-foot { border-top-color: rgba(15,23,42,.08); }
[data-theme="light"] #cfg-close { color: rgba(15,23,42,.6); }
[data-theme="light"] #cfg-close:hover { background: rgba(47,128,237,.1); color: #0c0c0c; }
[data-theme="light"] .cfg-reset {
  background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); color: rgba(15,23,42,.5);
}
[data-theme="light"] .cfg-reset:hover { border-color: var(--primary); color: var(--primary); background: rgba(47,128,237,.08); }

/* ── Modal de cuenta / login: panel claro ── */
[data-theme="light"] .auth-dialog {
  background: linear-gradient(160deg, rgba(255,255,255,.99), rgba(248,250,252,.99));
  border-color: rgba(47,128,237,.25);
  box-shadow: 0 32px 80px rgba(15,23,42,.18);
}
[data-theme="light"] .auth-head { border-bottom-color: rgba(15,23,42,.08); }
[data-theme="light"] .auth-head-title { color: #0f172a; }
[data-theme="light"] .auth-close { color: rgba(15,23,42,.6); background: rgba(15,23,42,.06); }
[data-theme="light"] .auth-close:hover { background: rgba(47,128,237,.1); color: #0c0c0c; }
[data-theme="light"] .auth-acc-name { color: #0f172a; }
[data-theme="light"] .auth-acc-email { color: rgba(15,23,42,.55); }
[data-theme="light"] #auth-logout { color: rgba(15,23,42,.6); border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); }
[data-theme="light"] #auth-logout:hover { border-color: rgba(255,80,80,.45); color: #e02f2f; background: rgba(255,80,80,.07); }
[data-theme="light"] .auth-tabs { background: rgba(15,23,42,.06); }
[data-theme="light"] .auth-tab { color: rgba(15,23,42,.5); }
[data-theme="light"] .auth-tab.active { background: rgba(47,128,237,.12); color: var(--primary); }
[data-theme="light"] .auth-status { color: rgba(15,23,42,.6); }
[data-theme="light"] .auth-status.error { color: #d63031; }
[data-theme="light"] .auth-label { color: rgba(15,23,42,.5); }
[data-theme="light"] .auth-input { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); color: #0f172a; }
[data-theme="light"] .auth-input::placeholder { color: rgba(15,23,42,.35); }
[data-theme="light"] .auth-input:focus { background: rgba(47,128,237,.05); }
[data-theme="light"] .auth-btn-primary { color: #fff; }
[data-theme="light"] .auth-divider { color: rgba(15,23,42,.35); }
[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after { background: rgba(15,23,42,.1); }
[data-theme="light"] .auth-google { color: #0f172a; background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); }
[data-theme="light"] .auth-google:hover { background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.2); }
[data-theme="light"] .auth-note { color: rgba(15,23,42,.5); }
[data-theme="light"] .auth-remember { color: rgba(15,23,42,.6); }

/* ── Chat AI: panel claro ── */
[data-theme="light"] {
  --ai-bg: #ffffff;
  --ai-s1: #f8fafc;
  --ai-s2: #f1f5f9;
  --ai-s3: #e2e8f0;
  --ai-text: #0f172a;
  --ai-muted: rgba(15,23,42,.55);
  --ai-border: rgba(15,23,42,.12);
  --ai-border2: rgba(15,23,42,.08);
}
[data-theme="light"] .ai-msg-wrap.ai .ai-msg {
  background: #f1f5f9; border-color: rgba(15,23,42,.08); color: #0f172a;
}
[data-theme="light"] .ai-msg-wrap.ai-welcome .ai-msg {
  background: linear-gradient(135deg, rgba(124,77,255,.08), rgba(0,176,255,.05)), #f8fafc;
  border-color: rgba(124,77,255,.2); color: #0f172a;
}
[data-theme="light"] .ai-msg-wrap.user .ai-msg {
  background: linear-gradient(135deg, var(--primary), #1e6fd9);
  border-color: rgba(47,128,237,.4); color: #fff;
}
[data-theme="light"] .ai-msg-copy { background: rgba(15,23,42,.06); color: rgba(15,23,42,.4); }
[data-theme="light"] .ai-msg-copy:hover { color: #fff; background: rgba(124,77,255,.5); }
[data-theme="light"] .ai-msg-wrap.user .ai-msg-avatar { background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.12); }
[data-theme="light"] .ai-msg strong { color: #4a3ab5; }
[data-theme="light"] .ai-msg code { background: rgba(15,23,42,.06); color: #2563eb; border-color: rgba(15,23,42,.1); }
[data-theme="light"] .ai-msg em { color: #475569; }
[data-theme="light"] .ai-md-h { color: #92400e; border-bottom-color: rgba(146,64,14,.15); }
[data-theme="light"] .ai-md-link { color: #2563eb; }
[data-theme="light"] .ai-md-link:hover { color: #1d4ed8; }
[data-theme="light"] .ai-md-hr { border-top-color: rgba(15,23,42,.1); }
[data-theme="light"] .ai-code-block { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); }
[data-theme="light"] .ai-code-block code { color: #1e293b; }
[data-theme="light"] .ai-code-copy { background: rgba(15,23,42,.06); color: rgba(15,23,42,.5); }
[data-theme="light"] .ai-code-copy:hover { background: rgba(15,23,42,.12); color: #0f172a; }
[data-theme="light"] .ai-input-wrap { background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,1)); }
[data-theme="light"] .ai-bottom-bar { background: rgba(248,250,252,.8); border-top-color: rgba(15,23,42,.08); }
[data-theme="light"] .ai-input-shell { background: #fff; }
[data-theme="light"] #ai-input { color: #0f172a; }
[data-theme="light"] #ai-input::placeholder { color: rgba(15,23,42,.35); }
[data-theme="light"] .ai-input-footer { border-top-color: rgba(15,23,42,.08); }
[data-theme="light"] .ai-input-hint-inline { color: rgba(15,23,42,.4); }
[data-theme="light"] .ai-circle-btn { background: #fff; border-color: rgba(15,23,42,.1); box-shadow: none; }
[data-theme="light"] .ai-circle-icon { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.1); color: rgba(15,23,42,.55); }
[data-theme="light"] .ai-circle-label { color: rgba(15,23,42,.6); }
[data-theme="light"] .ai-circle-label::after { color: rgba(15,23,42,.4); }
[data-theme="light"] .ai-quick-btn { color: rgba(124,77,255,.85); border-color: rgba(124,77,255,.25); background: rgba(124,77,255,.07); }
[data-theme="light"] .ai-quick-btn:hover,
[data-theme="light"] .ai-quick-btn.active { color: #6a3dff; background: rgba(124,77,255,.14); }
[data-theme="light"] #emi-attach-btn { border-color: rgba(124,77,255,.32); background: rgba(124,77,255,.06); color: #6a3dff; }
[data-theme="light"] .ai-attach-slot { background: rgba(124,77,255,.08); border-color: rgba(124,77,255,.28); }
[data-theme="light"] .ai-attach-slot>span { color: #4a3f8f; }
[data-theme="light"] .ai-attach-slot>em { color: rgba(90,70,160,.65); }
[data-theme="light"] .ai-attach-msg-pdf-wrap { background: rgba(124,77,255,.08); border-color: rgba(124,77,255,.3); }
[data-theme="light"] .ai-attach-msg-pdf-wrap span { color: #4a3f8f; }
[data-theme="light"] .ai-status-text {
  background: linear-gradient(90deg, #3b3b52, #6a3dff, #0284c7, #3b3b52);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ai-mood-bar { background: #f8fafc; }
[data-theme="light"] .ai-mood-btn { border-color: rgba(15,23,42,.1); color: rgba(15,23,42,.5); }
[data-theme="light"] .ai-mood-btn.active,
[data-theme="light"] .ai-mood-btn:hover { background: rgba(124,77,255,.12); border-color: rgba(124,77,255,.35); color: #6a3dff; }
[data-theme="light"] .ai-head { background: linear-gradient(135deg, rgba(124,77,255,.08) 0%, rgba(0,176,255,.04) 100%); }
[data-theme="light"] .ai-notif { border-color: #fff; }
[data-theme="light"] #ai-panel { box-shadow: 0 24px 80px rgba(15,23,42,.25), 0 0 48px rgba(124,77,255,.1); }
[data-theme="light"] #ai-panel.open,
[data-theme="light"] #ai-panel.boot-flash { animation:panelIn .42s cubic-bezier(.2,.9,.2,1) both; }

/* ═══════════════════════════════════════════════════════════════
   REDISEÑO ANIMADO — batch 2026-08-09
   border-beam (hover), sheen en barras de skill, text-reveal por
   palabras en h2, tilt 3D del hero-card y depth-lift de chips.
   Todo GPU-only (transform/opacity), gateado a dispositivos con
   hover+puntero fino y desactivado con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

@property --beam-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes beamRotate { to { --beam-angle: 360deg; } }
@keyframes scSheen {
    from { transform: translateX(-130%) skewX(-20deg); }
    to   { transform: translateX(340%) skewX(-20deg); }
}

/* ── 1. BORDER-BEAM en hover (skill-chip, game-card, service-card) ── */
@media (hover: hover) and (pointer: fine) {
    .skill-chip,
    .game-card,
    .service-card {
        position: relative;
    }
    .skill-chip::after,
    .game-card::after,
    .service-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: conic-gradient(from var(--beam-angle, 0deg), transparent 0deg, var(--beam, var(--primary)) 70deg, transparent 170deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }
    .skill-chip:hover::after,
    .game-card:hover::after,
    .service-card:hover::after,
    .skill-chip:focus-within::after,
    .game-card:focus-within::after,
    .service-card:focus-within::after {
        opacity: 1;
        animation: beamRotate 2.4s linear infinite;
    }
    .skill-chip { --beam: rgba(47,128,237,.9); }
    .game-card { --beam: var(--gc, var(--primary)); }
    .service-card { --beam: rgba(255,69,0,.85); }
}

/* ── 2. SHEEN en las barras de skill (al entrar en viewport) ── */
.sc-fill {
    position: relative;
    overflow: hidden;
}
.sc-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-130%) skewX(-20deg);
    pointer-events: none;
}
.skills-grid.in-view .sc-fill::after {
    animation: scSheen 1s cubic-bezier(.4,0,.2,1) .95s 1;
}

/* ── 4. TEXT-REVEAL por palabras en h2 ── */
.tw-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.65em);
    filter: blur(6px);
    background: linear-gradient(45deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity .6s cubic-bezier(.22,1,.36,1),
                transform .6s cubic-bezier(.22,1,.36,1),
                filter .6s cubic-bezier(.22,1,.36,1);
}
h2.tw-split { background: none; }
h2.tw-split .tw-word.tw-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ── 3D: DEPTH-LIFT de chips + TILT del hero-card ── */
@media (hover: hover) and (pointer: fine) {
    #skills .skills-grid { perspective: 900px; }
    .skill-chip { transform-style: preserve-3d; }
    .skill-chip:hover {
        transform: translateY(-3px) translateZ(16px);
    }
    .hero-card.tilt-ready {
        animation: none;
        transition: transform .45s cubic-bezier(.22,1,.36,1);
    }
}

/* ── Reduced motion: todo quieto, textos visibles ── */
@media (prefers-reduced-motion: reduce) {
    .skill-chip::after,
    .game-card::after,
    .service-card::after { animation: none !important; }
    .sc-fill { animation: none !important; }
    .skills-grid.in-view .sc-fill::after { animation: none !important; }
    .tw-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .skill-chip:hover,
    .skill-chip { transform: none !important; }
    .hero-card.tilt-ready { transition: none !important; }
}


/* ------------------------------------------------------------
   CENTRO DE NOTIFICACIONES � campana + panel (PC y m�vil)
   Estructura: #notif-btn (header) ? #notif-panel
   ------------------------------------------------------------ */

/* -- Campana del header -- */
#notif-btn {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(47,128,237,.08);
  border: 1px solid rgba(47,128,237,.25);
  color: rgba(232,232,240,.7);
  cursor: pointer;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
#notif-btn:hover {
  border-color: var(--primary);
  color: var(--accent);
  background: rgba(47,128,237,.18);
}
#notif-btn .fa-bell { pointer-events: none; }

/* Badge de no le�das */
#notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #2f80ed;
  color: #fff;
  border-radius: 999px;
  font-size: .48rem;
  font-weight: 700;
  min-width: 15px; height: 15px;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a14;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  padding: 0 3px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(47,128,237,.4);
}
[data-theme="light"] #notif-badge { border-color: #fff; }

/* -- Panel flotante -- */
#notif-panel {
  position: fixed;
  top: 4.6rem;
  right: 1rem;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 520px);
  background: linear-gradient(145deg, #0d0d1a, #111120);
  border: 1px solid rgba(47,128,237,.28);
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 16px 48px rgba(0,0,0,.75);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  z-index: 4900;
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#notif-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(47,128,237,.06);
}
.notif-panel-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #e8e8f0;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.notif-panel-title i { color: var(--accent, #38bdf8); }
#notif-clear {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(240,240,250,.45);
  width: 24px; height: 24px;
  border-radius: var(--radius-xs, 6px);
  cursor: pointer;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
#notif-clear:hover { color: #f87171; border-color: rgba(248,113,113,.4); }

.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: .35rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(47,128,237,.3) transparent;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(47,128,237,.3); border-radius: 4px; }

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 2.2rem 1rem;
  color: rgba(240,240,250,.35);
  font-size: .68rem;
  text-align: center;
}
.notif-empty i { font-size: 1.5rem; opacity: .5; }
.notif-empty small { color: rgba(240,240,250,.25); font-size: .6rem; }

.notif-item {
  display: flex;
  gap: .6rem;
  padding: .55rem .8rem;
  cursor: pointer;
  transition: background .15s;
  border-left: 2px solid transparent;
}
.notif-item:hover { background: rgba(47,128,237,.07); }
.notif-item.unread { border-left-color: var(--accent, #38bdf8); }
.notif-item.unread .notif-item-title::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent, #38bdf8);
  margin-left: 6px;
  vertical-align: middle;
}

.notif-item-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-xs, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: #e8e8f0;
  flex-shrink: 0;
}
.notif-item-body { min-width: 0; flex: 1; }
.notif-item-title {
  font-size: .68rem;
  font-weight: 700;
  color: #f0f0fa;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.notif-item-text {
  font-size: .62rem;
  color: rgba(240,240,250,.55);
  line-height: 1.45;
  margin-top: 2px;
  overflow-wrap: break-word;
}
.notif-item-time {
  font-size: .55rem;
  color: rgba(240,240,250,.3);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.notif-panel-foot {
  padding: .45rem .85rem;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .55rem;
  color: rgba(240,240,250,.3);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* -- Light mode -- */
[data-theme="light"] #notif-panel {
  background: linear-gradient(145deg, #ffffff, #f3f6fd);
  border-color: rgba(47,128,237,.25);
  box-shadow: 0 16px 48px rgba(15,23,42,.18);
}
[data-theme="light"] .notif-panel-head { background: rgba(47,128,237,.05); border-bottom-color: rgba(15,23,42,.08); }
[data-theme="light"] .notif-panel-title { color: #0f172a; }
[data-theme="light"] #notif-clear { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.1); color: rgba(15,23,42,.5); }
[data-theme="light"] .notif-item:hover { background: rgba(47,128,237,.07); }
[data-theme="light"] .notif-item-title { color: #0f172a; }
[data-theme="light"] .notif-item-text { color: rgba(15,23,42,.6); }
[data-theme="light"] .notif-item-time { color: rgba(15,23,42,.35); }
[data-theme="light"] .notif-panel-foot { border-top-color: rgba(15,23,42,.08); color: rgba(15,23,42,.4); }

.notif-perms-btn {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(47,128,237,.07);
  color: var(--accent, #38bdf8);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .7rem .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: background .15s;
}
.notif-perms-btn:hover {
  background: rgba(47,128,237,.16);
}
[data-theme="light"] .notif-perms-btn {
  border-top-color: rgba(15,23,42,.08);
  background: rgba(47,128,237,.07);
}

/* ═══ Office Download Bar ═══ */
.office-dl-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .6rem; padding: .5rem .7rem;
  background: rgba(124,77,255,.08); border: 1px solid rgba(124,77,255,.2);
  border-radius: 10px; animation: aiFadeIn .3s ease;
}
.office-dl-label {
  font-size: .62rem; color: rgba(232,232,240,.5); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
}
.office-dl-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05); color: rgba(232,232,240,.8);
  font-size: .6rem; font-weight: 600; cursor: pointer;
  transition: all .15s ease; font-family: inherit;
}
.office-dl-btn i { font-size: .7rem; }
.office-dl-btn:hover { background: rgba(124,77,255,.25); border-color: rgba(124,77,255,.4); color: #fff; }
.office-dl-btn[data-fmt="docx"]:hover { color: #2b579a; }
.office-dl-btn[data-fmt="xlsx"]:hover { color: #217346; }
.office-dl-btn[data-fmt="pptx"]:hover { color: #b7472a; }
.office-dl-btn[data-fmt="pdf"]:hover { color: #e2574c; }
[data-theme="light"] .office-dl-bar { background: rgba(124,77,255,.05); border-color: rgba(124,77,255,.15); }
[data-theme="light"] .office-dl-label { color: rgba(15,23,42,.45); }
[data-theme="light"] .office-dl-btn { background: rgba(124,77,255,.06); border-color: rgba(124,77,255,.15); color: rgba(15,23,42,.7); }
[data-theme="light"] .office-dl-btn:hover { background: rgba(124,77,255,.12); color: #4a3f8f; }

/* ═══ Deep Search Results ═══ */
.deep-search-answer {
  margin-bottom: .5rem; padding: .5rem .7rem;
  background: rgba(47,128,237,.08); border-left: 3px solid rgba(47,128,237,.5);
  border-radius: 0 8px 8px 0; font-size: .72rem;
  color: rgba(232,232,240,.85); line-height: 1.5;
}
.deep-search-sources {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.deep-search-label {
  font-size: .58rem; color: rgba(232,232,240,.4);
  font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
.deep-search-source {
  font-size: .58rem; color: rgba(56,189,248,.8);
  text-decoration: none; padding: .15rem .4rem;
  border-radius: 6px; background: rgba(56,189,248,.08);
  transition: background .15s;
}
.deep-search-source:hover { background: rgba(56,189,248,.2); color: #38bdf8; }
[data-theme="light"] .deep-search-answer { background: rgba(47,128,237,.06); border-left-color: rgba(47,128,237,.4); color: rgba(15,23,42,.8); }
[data-theme="light"] .deep-search-sources { border-top-color: rgba(15,23,42,.06); }
[data-theme="light"] .deep-search-label { color: rgba(15,23,42,.4); }
[data-theme="light"] .deep-search-source { background: rgba(47,128,237,.06); color: rgba(47,128,237,.8); }

/* ═══ Permissions Setup Overlay ═══ */
.perms-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.perms-overlay.active { opacity: 1; pointer-events: all; }

.perms-card {
  position: relative; width: 92%; max-width: 420px;
  background: linear-gradient(145deg, #121726, #0e1220);
  border: 1px solid rgba(124,77,255,.2); border-radius: 20px;
  padding: 0; overflow: hidden;
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.perms-overlay.active .perms-card { transform: translateY(0) scale(1); }

.perms-card-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,77,255,.25), transparent 70%);
  pointer-events: none;
}

.perms-card-header {
  text-align: center; padding: 2rem 1.5rem 1rem; position: relative; z-index: 1;
}
.perms-card-icon { font-size: 2.2rem; margin-bottom: .5rem; }
.perms-card-header h2 {
  font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 800;
  color: #e8e8f0; margin: 0 0 .3rem;
}
.perms-card-header p {
  font-size: .72rem; color: rgba(232,232,240,.5); margin: 0;
}

.perms-card-list {
  padding: .5rem 1.2rem; display: flex; flex-direction: column; gap: .4rem;
}

.perms-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  transition: background .2s;
}
.perms-item:hover { background: rgba(255,255,255,.06); }

.perms-item-left {
  display: flex; align-items: center; gap: .6rem; min-width: 0;
}
.perms-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.perms-item-name {
  font-size: .72rem; font-weight: 700; color: #e8e8f0;
}
.perms-item-desc {
  font-size: .6rem; color: rgba(232,232,240,.4); margin-top: 1px;
}

.perms-item-status {
  font-size: .58rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: 8px; white-space: nowrap; flex-shrink: 0;
  background: rgba(255,255,255,.05); color: rgba(232,232,240,.4);
}
.perms-item-status.granted { background: rgba(34,197,94,.12); color: #86efac; }
.perms-item-status.denied { background: rgba(239,68,68,.12); color: #fca5a5; }
.perms-item-status.pending { background: rgba(56,189,248,.12); color: #bae6fd; animation: permsPulse 1.2s ease infinite; }
.perms-item-status.unsupported { background: rgba(251,191,36,.12); color: #fde68a; }
.perms-item-status.error { background: rgba(239,68,68,.08); color: #f87171; }

@keyframes permsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.perms-card-actions {
  display: flex; gap: .6rem; padding: 1rem 1.2rem .6rem;
}

.perms-btn {
  flex: 1; padding: .7rem 1rem; border-radius: 12px; border: none;
  font-family: 'Syne', sans-serif; font-size: .72rem; font-weight: 700;
  cursor: pointer; transition: all .2s ease;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.perms-btn-primary {
  background: linear-gradient(135deg, #7c4dff, #6a3dff);
  color: #fff; box-shadow: 0 4px 16px rgba(124,77,255,.3);
}
.perms-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,77,255,.4); }
.perms-btn-primary:disabled { opacity: .6; cursor: wait; transform: none; }
.perms-btn-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; box-shadow: 0 4px 16px rgba(34,197,94,.3);
}
.perms-btn-secondary {
  background: rgba(255,255,255,.06); color: rgba(232,232,240,.6);
  border: 1px solid rgba(255,255,255,.08);
}
.perms-btn-secondary:hover { background: rgba(255,255,255,.1); color: #e8e8f0; }

.perms-card-footer {
  text-align: center; padding: .4rem 1.2rem 1.2rem;
  font-size: .55rem; color: rgba(232,232,240,.3);
}

/* ── Light theme ── */
[data-theme="light"] .perms-card {
  background: linear-gradient(145deg, #f8fafc, #f1f5f9);
  border-color: rgba(124,77,255,.15);
}
[data-theme="light"] .perms-card-glow {
  background: radial-gradient(circle, rgba(124,77,255,.12), transparent 70%);
}
[data-theme="light"] .perms-card-header h2 { color: #0f172a; }
[data-theme="light"] .perms-card-header p { color: rgba(15,23,42,.5); }
[data-theme="light"] .perms-item { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.05); }
[data-theme="light"] .perms-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .perms-item-name { color: #0f172a; }
[data-theme="light"] .perms-item-desc { color: rgba(15,23,42,.45); }
[data-theme="light"] .perms-item-status { background: rgba(0,0,0,.04); color: rgba(15,23,42,.4); }
[data-theme="light"] .perms-item-status.granted { background: rgba(34,197,94,.1); color: #16a34a; }
[data-theme="light"] .perms-item-status.denied { background: rgba(239,68,68,.1); color: #dc2626; }
[data-theme="light"] .perms-btn-secondary { background: rgba(0,0,0,.04); color: rgba(15,23,42,.6); border-color: rgba(0,0,0,.08); }

/* ── Denied dialog ── */
.perms-card-denied { border-color: rgba(239,68,68,.25) !important; }
.perms-card-denied .perms-card-glow { background: radial-gradient(circle, rgba(239,68,68,.2), transparent 70%); }

.perms-denied-steps {
  padding: .5rem 1.5rem 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.perms-denied-step {
  display: flex; align-items: center; gap: .6rem;
  font-size: .7rem; color: rgba(232,232,240,.7);
}
.perms-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(239,68,68,.15); color: #fca5a5;
  font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-theme="light"] .perms-denied-step { color: rgba(15,23,42,.7); }
[data-theme="light"] .perms-step-num { background: rgba(239,68,68,.1); color: #dc2626; }
[data-theme="light"] .perms-card-denied { border-color: rgba(239,68,68,.15) !important; }

/* ═══ APK Install Button + Guide ═══ */
.hero-btn-apk {
  background: linear-gradient(135deg, #7c4dff, #2f80ed) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(124,77,255,.35);
  animation: apkPulse 2.5s ease-in-out infinite;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: .5rem;
}
.hero-btn-apk:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(124,77,255,.5);
  color: #fff !important;
}
@keyframes apkPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(124,77,255,.35); }
  50% { box-shadow: 0 4px 30px rgba(124,77,255,.55), 0 0 60px rgba(47,128,237,.15); }
}

.hero-apk-info {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: rgba(124,77,255,.06);
  border: 1px solid rgba(124,77,255,.12);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: .4rem;
}
.apk-info-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .65rem; color: rgba(232,232,240,.6);
}
.apk-info-icon { font-size: .8rem; flex-shrink: 0; }
.apk-info-text { line-height: 1.3; }

[data-theme="light"] .hero-apk-info {
  background: rgba(124,77,255,.04);
  border-color: rgba(124,77,255,.1);
}
[data-theme="light"] .apk-info-row { color: rgba(15,23,42,.6); }

/* APK Guide overlay */
.apk-guide-benefits {
  padding: .5rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.apk-guide-benefit {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .6rem; border-radius: 10px;
  background: rgba(124,77,255,.05);
}
.apk-benefit-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.apk-benefit-title { font-size: .7rem; font-weight: 700; color: #e8e8f0; }
.apk-benefit-desc { font-size: .58rem; color: rgba(232,232,240,.45); margin-top: 1px; }

[data-theme="light"] .apk-guide-benefit { background: rgba(124,77,255,.04); }
[data-theme="light"] .apk-benefit-title { color: #0f172a; }
[data-theme="light"] .apk-benefit-desc { color: rgba(15,23,42,.5); }

.apk-guide-steps {
  padding: .5rem 1.2rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.apk-step {
  display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; color: rgba(232,232,240,.7);
}
.apk-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(124,77,255,.15); color: #b4a0ff;
  font-size: .55rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

[data-theme="light"] .apk-step { color: rgba(15,23,42,.7); }
[data-theme="light"] .apk-step-num { background: rgba(124,77,255,.1); color: #7c4dff; }