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

        :root {
            --bg:       #080c14;
            --bg2:      #0d1220;
            --bg3:      #111827;
            --cyan:     #00d4ff;
            --cyan-dim: rgba(0,212,255,.12);
            --violet:   #7c3aed;
            --violet-dim: rgba(124,58,237,.12);
            --text:     #e2e8f0;
            --muted:    #94a3b8;
            --border:   rgba(255,255,255,.07);
            --card:     rgba(13,18,32,.8);
        }

        html { scroll-behavior: smooth; }
        body {
            background: var(--bg); color: var(--text);
            font-family: 'Space Grotesk', sans-serif;
            line-height: 1.6; overflow-x: hidden; cursor: none;
        }
        body::before {
            content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
            background-image:
                linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),
                linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);
            background-size: 40px 40px;
        }

        /* cursor personalizado — punto cian con anillo flotante */
        #cursor-dot  { position:fixed;width:7px;height:7px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen; }
        #cursor-ring { position:fixed;width:30px;height:30px;border:1.5px solid rgba(0,212,255,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .12s,top .12s,transform .2s; }

        /* scrollbar personalizada para que no rompa el diseño */
        ::-webkit-scrollbar { width:6px; }
        ::-webkit-scrollbar-track { background:var(--bg); }
        ::-webkit-scrollbar-thumb { background:rgba(0,212,255,.25);border-radius:3px; }

        /* barra de navegación fija arriba con efecto blur */
        nav {
            position:fixed;top:0;width:100%;z-index:100;
            background:rgba(8,12,20,.88);backdrop-filter:blur(16px);
            border-bottom:1px solid var(--border);
            padding:14px 40px;display:flex;align-items:center;justify-content:space-between;
        }
        .nav-logo { font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;color:var(--cyan);letter-spacing:.08em;text-decoration:none; }
        .nav-logo span { color:rgba(255,255,255,.45); }
        .nav-links { display:flex;gap:28px;align-items:center; }
        .nav-links a { color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:color .2s;cursor:none; }
        .nav-links a:hover { color:var(--cyan); }
        .nav-back { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:color .2s;cursor:none; }
        .nav-back:hover { color:var(--cyan); }

        /* estilos comunes para todas las secciones */
        section { padding:90px 0; }
        .container { max-width:1100px;margin:0 auto;padding:0 40px; }
        .section-label { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);letter-spacing:.35em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:12px; }
        .section-label::before { content:'//';opacity:.5; }
        .section-title { font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.1;margin-bottom:48px; }
        .section-title span { color:var(--cyan); }

        /* sección hero — la parte inicial con el nombre y el typewriter */
        #hero { min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:80px 0 0; }
        .hero-glow  { position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none; }
        .hero-glow2 { position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.06) 0%,transparent 70%);top:20%;right:10%;pointer-events:none;animation:floatBlob 8s ease-in-out infinite alternate; }
        @keyframes floatBlob { from{transform:translate(0,0) scale(1)} to{transform:translate(20px,-30px) scale(1.1)} }
        .hero-inner { position:relative;z-index:1; }
        .hero-tag { display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);border:1px solid rgba(0,212,255,.25);padding:6px 14px;border-radius:99px;margin-bottom:28px;background:rgba(0,212,255,.06); }
        .hero-tag::before { content:'> ';opacity:.6; }
        .hero-name { font-size:clamp(48px,8vw,96px);font-weight:700;line-height:.95;letter-spacing:-.02em;margin-bottom:16px; }
        .hero-name .typed-wrapper { display:block;color:var(--cyan);font-size:clamp(22px,3.5vw,40px);font-weight:300;letter-spacing:.01em;margin-top:12px;font-family:'JetBrains Mono',monospace; }
        #typed-text { border-right:2px solid var(--cyan);padding-right:4px; }
        .hero-desc { max-width:620px;color:var(--muted);font-size:17px;line-height:1.75;margin-bottom:40px; }
        .hero-desc strong { color:var(--text); }
        .hero-cta { display:flex;flex-wrap:wrap;gap:14px;align-items:center; }
        .btn-primary { display:inline-flex;align-items:center;gap:9px;padding:14px 32px;border-radius:8px;background:var(--cyan);color:#000;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:box-shadow .3s,transform .2s;cursor:none; }
        .btn-primary:hover { box-shadow:0 0 40px rgba(0,212,255,.5);transform:translateY(-2px); }
        .btn-ghost { display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:8px;border:1px solid var(--border);color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:all .25s;cursor:none; }
        .btn-ghost:hover { border-color:rgba(0,212,255,.4);color:var(--cyan); }
        .hero-stats { display:flex;gap:48px;margin-top:56px;padding-top:40px;border-top:1px solid var(--border);flex-wrap:wrap; }
        .stat-num { display:block;font-size:36px;font-weight:700;color:var(--cyan);line-height:1;font-family:'JetBrains Mono',monospace; }
        .stat-label { display:block;font-size:11px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:6px; }

        /* franja de contacto debajo del hero */
        .contact-strip { background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0; }
        .contact-strip .container { display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center; }
        .contact-item { display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted); }
        .contact-item a { color:var(--cyan);text-decoration:none; }
        .contact-item a:hover { text-decoration:underline; }
        .ci-icon { width:32px;height:32px;border-radius:6px;background:var(--cyan-dim);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }

        /* el email se monta en JS desde data-u y data-d para no ponerlo a pelo en el HTML */
        .email-obf { cursor:pointer;color:var(--cyan); }
        .email-obf::before { content:attr(data-u) "@" attr(data-d); }

        /* sección de habilidades con tags clicables */
        #skills { background:var(--bg2); }
        .skill-categories { display:flex;flex-direction:column;gap:32px; }
        .skill-cat-title { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--violet);letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px; }
        .skill-tags { display:flex;flex-wrap:wrap;gap:10px; }
        .skill-tag { padding:7px 16px;border-radius:6px;font-size:13px;font-weight:500;border:1px solid var(--border);background:var(--card);color:var(--text);transition:all .25s;cursor:default;position:relative;overflow:hidden; }
        .skill-tag::before { content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,var(--cyan-dim),var(--violet-dim));transition:opacity .25s; }
        .skill-tag:hover { border-color:rgba(0,212,255,.4);transform:translateY(-2px); }
        .skill-tag:hover::before { opacity:1; }
        .skill-tag.hi { border-color:rgba(0,212,255,.3);color:var(--cyan); }

        /* timeline de experiencia — la línea vertical la hago con ::before */
        .timeline { position:relative;padding-left:28px; }
        .timeline::before { content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(to bottom,var(--cyan),var(--violet),transparent); }
        .timeline-item { position:relative;margin-bottom:44px; }
        .timeline-item::before { content:'';position:absolute;left:-32px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan); }
        .timeline-date { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);letter-spacing:.2em;margin-bottom:8px; }
        .timeline-role { font-size:19px;font-weight:700;margin-bottom:4px; }
        .timeline-company { font-size:14px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
        .company-badge { display:inline-block;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.1em;background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,212,255,.2); }
        .timeline-bullets { list-style:none; }
        .timeline-bullets li { font-size:14px;color:var(--muted);line-height:1.6;padding:4px 0 4px 18px;position:relative; }
        .timeline-bullets li::before { content:'▸';position:absolute;left:0;color:var(--cyan);font-size:11px;top:6px; }
        .timeline-bullets li strong { color:var(--text); }

        /* sección de formación */
        #education { background:var(--bg2); }
        .edu-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px; }
        .edu-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;transition:border-color .25s,transform .25s;position:relative;overflow:hidden; }
        .edu-card::after { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:0;transition:opacity .25s; }
        .edu-card:hover { border-color:rgba(0,212,255,.3);transform:translateY(-3px); }
        .edu-card:hover::after { opacity:1; }
        .edu-year { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);letter-spacing:.2em;margin-bottom:10px; }
        .edu-name { font-size:16px;font-weight:700;margin-bottom:6px; }
        .edu-inst { font-size:13px;color:var(--muted); }

        /* tarjetas de proyectos */
        .projects-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px; }
        .project-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;transition:all .3s;position:relative;overflow:hidden;display:flex;flex-direction:column; }
        .project-card::before { content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,var(--cyan-dim),transparent);transition:opacity .3s; }
        .project-card:hover { border-color:rgba(0,212,255,.35);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.4); }
        .project-card:hover::before { opacity:1; }
        .project-emoji { font-size:30px;margin-bottom:16px;position:relative;z-index:1; }
        .project-title { font-size:19px;font-weight:700;margin-bottom:10px;position:relative;z-index:1; }
        .project-desc { font-size:13.5px;color:var(--muted);line-height:1.7;flex:1;position:relative;z-index:1; }
        .project-stack { display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;position:relative;z-index:1; }
        .stack-tag { font-family:'JetBrains Mono',monospace;font-size:11px;padding:4px 10px;border-radius:4px;background:rgba(0,212,255,.08);color:var(--cyan);border:1px solid rgba(0,212,255,.18); }
        .project-links { display:flex;gap:10px;margin-top:16px;position:relative;z-index:1; }
        .proj-link { display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;letter-spacing:.08em;text-decoration:none;padding:5px 13px;border-radius:5px;border:1px solid var(--border);color:var(--muted);transition:all .22s; }
        .proj-link:hover { border-color:rgba(0,212,255,.4);color:var(--cyan); }
        .proj-link svg { width:12px;height:12px; }
        .project-award { display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;font-weight:600;color:#fbbf24;position:relative;z-index:1; }

        /* habilidades blandas */
        #about { background:var(--bg2); }
        .soft-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px; }
        .soft-card { background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;text-align:center;transition:all .25s; }
        .soft-card:hover { border-color:rgba(124,58,237,.4);transform:translateY(-2px); }
        .soft-icon { font-size:28px;margin-bottom:10px; }
        .soft-name { font-size:13px;font-weight:600; }

        /* sección de contacto al final */
        #contact-section { text-align:center;background:linear-gradient(to bottom,var(--bg),#0a0f1a);border-top:1px solid var(--border); }
        .contact-grid { display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px; }
        .contact-pill { display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:99px;border:1px solid var(--border);background:var(--card);font-size:14px;color:var(--text);text-decoration:none;transition:all .25s;cursor:none; }
        .contact-pill:hover { border-color:rgba(0,212,255,.4);color:var(--cyan);transform:translateY(-2px); }

        footer { background:#030610;border-top:1px solid var(--border);padding:28px 40px;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.12em; }
        footer a { color:var(--cyan);text-decoration:none; }
        footer kbd { font-family:monospace;border:1px solid rgba(255,255,255,.2);padding:2px 6px;border-radius:3px;font-size:11px; }

        /* overlay de transición entre páginas — empieza invisible */
        #page-transition {
            position:fixed;inset:0;background:#030610;
            z-index:9999;pointer-events:none;
            opacity:0;transition:opacity .45s ease;
        }

        /* overlay exit-intent — se activa cuando el ratón sale por arriba */
        #exit-overlay {
            position:fixed;inset:0;z-index:2000;
            display:flex;align-items:center;justify-content:center;
            background:rgba(3,6,16,.0);
            backdrop-filter:blur(0px);
            pointer-events:none;
            transition:background .5s ease, backdrop-filter .5s ease;
        }
        #exit-overlay.show {
            background:rgba(3,6,16,.88);
            backdrop-filter:blur(8px);
            pointer-events:all;
        }
        #exit-card {
            text-align:center;
            padding:52px 60px;
            border:1px solid rgba(0,212,255,.2);
            border-radius:20px;
            background:rgba(8,14,28,.97);
            box-shadow:0 0 80px rgba(0,212,255,.1), 0 24px 64px rgba(0,0,0,.7);
            max-width:480px;
            opacity:0;
            transform:translateY(28px) scale(.96);
            transition:opacity .45s cubic-bezier(.22,.68,0,1.1), transform .45s cubic-bezier(.22,.68,0,1.1);
        }
        #exit-overlay.show #exit-card {
            opacity:1;
            transform:translateY(0) scale(1);
        }
        #exit-card .exit-emoji {
            font-size:52px;
            display:block;
            margin-bottom:18px;
            animation:exitPulse 2.2s ease-in-out infinite;
        }
        @keyframes exitPulse {
            0%,100% { transform:scale(1); }
            50%      { transform:scale(1.1); }
        }
        #exit-card h2 {
            font-size:22px;font-weight:700;letter-spacing:.06em;
            color:#fff;margin:0 0 12px;
        }
        #exit-card p {
            font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 28px;
        }
        #exit-card p span { color:var(--cyan); }
        .exit-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; }
        .exit-btn {
            padding:10px 22px;border-radius:8px;font-size:13px;
            font-family:inherit;cursor:pointer;border:none;
            font-weight:600;letter-spacing:.04em;transition:opacity .2s, transform .15s;
        }
        .exit-btn:hover { opacity:.85; transform:translateY(-1px); }
        .exit-btn-primary {
            background:var(--cyan);color:#020915;
        }
        .exit-btn-ghost {
            background:transparent;color:var(--muted);
            border:1px solid rgba(255,255,255,.15);
        }
        #exit-overlay .exit-line {
            width:48px;height:1px;background:rgba(0,212,255,.25);
            margin:0 auto 24px;
        }

        /* personaje que aparece cada 60s intentando que me contraten */
        #pitch-char {
            position:fixed;bottom:-260px;left:24px;z-index:1000;
            display:flex;flex-direction:column;align-items:center;gap:8px;
            transition:bottom .55s cubic-bezier(.34,1.56,.64,1);
            pointer-events:none;
        }
        #pitch-char.show { bottom:24px; }
        #pitch-char.hide { bottom:-260px; }
        .pitch-bubble {
            background:rgba(8,12,20,.97);color:var(--text);
            border:1px solid rgba(0,212,255,.55);
            padding:11px 16px;border-radius:12px;
            font-size:13px;max-width:240px;text-align:center;line-height:1.6;
            box-shadow:0 6px 28px rgba(0,0,0,.7),0 0 22px rgba(0,212,255,.14);
            position:relative;
        }
        .pitch-bubble::after {
            content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
            border:8px solid transparent;border-top-color:rgba(8,12,20,.97);border-bottom:0;
        }
        /* animación de entrada del personaje */
        @keyframes pitchWobble {
            0%   { transform:rotate(0deg); }
            20%  { transform:rotate(-6deg); }
            40%  { transform:rotate(5deg); }
            60%  { transform:rotate(-3deg); }
            80%  { transform:rotate(2deg); }
            100% { transform:rotate(0deg); }
        }
        #pitch-svg.wobble { animation:pitchWobble .6s ease-in-out; }

        /* personaje de inactividad — igual que en index pero con colores del cv */
        #idle-char { position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;pointer-events:none; }
        #idle-char.show { opacity:1;transform:translateY(0); }
        .idle-bubble { background:rgba(13,18,32,.95);color:var(--text);border:1px solid var(--border);padding:9px 15px;border-radius:12px;font-size:13px;max-width:220px;text-align:center;line-height:1.5;box-shadow:0 6px 24px rgba(0,0,0,.6);position:relative; }
        .idle-bubble::after { content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:rgba(13,18,32,.95);border-bottom:0; }

        /* estilos de todos los easter eggs */
        #matrix-canvas { position:fixed;inset:0;z-index:200;display:none;pointer-events:none; }
        #hire-overlay { position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.93);display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px; }
        #hire-overlay.show { display:flex; }
        .hire-title { font-size:clamp(42px,9vw,110px);font-weight:700;background:linear-gradient(90deg,#cf9b17,#00d4ff,#b57fff,#cf9b17);background-size:300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2.5s linear infinite;text-align:center;line-height:1; }
        @keyframes shimmer{from{background-position:0%}to{background-position:300%}}
        .hire-sub { color:rgba(255,255,255,.65);font-size:16px;text-align:center;line-height:1.8; }
        .hire-sub a { color:var(--cyan);text-decoration:none; }
        .hire-close { background:none;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.7);padding:10px 32px;border-radius:99px;cursor:pointer;font-size:14px;font-family:'Space Grotesk',sans-serif;letter-spacing:.1em;transition:all .25s; }
        .hire-close:hover { background:rgba(255,255,255,.1);color:#fff; }

        /* terminal retro del CV */
        #retro-overlay { position:fixed;inset:0;z-index:250;background:#000;display:none;flex-direction:column;padding:0;overflow:hidden; }
        #retro-overlay.show { display:flex; }
        #retro-overlay::before { content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px); }
        .retro-titlebar { background:#1a1a1a;border-bottom:1px solid #333;padding:10px 18px;display:flex;align-items:center;gap:10px;font-family:monospace;font-size:13px;color:#888;flex-shrink:0;position:relative;z-index:2; }
        .retro-dot { width:12px;height:12px;border-radius:50%; }
        .retro-dot-r{background:#ff5f56} .retro-dot-y{background:#ffbd2e} .retro-dot-g{background:#27c93f;cursor:pointer;}
        .retro-body { flex:1;overflow-y:auto;padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;color:#00ff41;line-height:1.7;position:relative;z-index:2; }
        .retro-body::-webkit-scrollbar{width:4px} .retro-body::-webkit-scrollbar-thumb{background:#333}
        .retro-input-row { display:flex;align-items:center;gap:8px;padding:12px 24px;border-top:1px solid #1a1a1a;flex-shrink:0;position:relative;z-index:2; }
        .retro-prompt { color:#00ff41;font-family:monospace;font-size:14px;white-space:nowrap; }
        #retro-input { flex:1;background:none;border:none;outline:none;color:#00ff41;font-family:monospace;font-size:14px;caret-color:#00ff41; }
        .rl { margin:2px 0; }
        .rl.cmd{color:#fff} .rl.out{color:#00ff41} .rl.err{color:#ff4444} .rl.sys{color:#888} .rl.hi{color:#00cfff}

        /* partículas de efectos varios: confetti, sparks, gravedad */
        .confetti { position:fixed;top:-12px;pointer-events:none;z-index:400; }
        .spark { position:fixed;border-radius:50%;pointer-events:none;z-index:50;transform:translate(-50%,-50%); }
        .gravity-char { position:fixed;pointer-events:none;z-index:500;font-weight:700;will-change:transform; }

        /* easter egg secreto: escribir "gitpush" simula un deploy — quedó muy gracioso */
        #deploy-toast {
            position:fixed;bottom:100px;right:28px;
            background:#050e05;border:1px solid #00ff41;border-radius:10px;
            padding:18px 22px;z-index:600;font-family:'JetBrains Mono',monospace;
            font-size:12px;color:#00ff41;max-width:310px;line-height:1.85;
            box-shadow:0 0 35px rgba(0,255,65,.18),0 8px 32px rgba(0,0,0,.6);
            transform:translateX(130%);opacity:0;
            transition:transform .35s cubic-bezier(.22,.68,0,1.2),opacity .35s;
            pointer-events:none;
        }
        #deploy-toast.show { transform:translateX(0);opacity:1; }
        #deploy-toast .dt-bar {
            height:4px;border-radius:2px;background:linear-gradient(90deg,#00ff41,#00c8ff);
            margin-top:10px;width:0;transition:width 2.4s linear;
        }
        #deploy-toast .dt-bar.full { width:100%; }
        #deploy-toast .dt-success { color:#00cfff;font-weight:700;display:none; }

        /* botón hamburguesa para el menú en móvil — se convierte en X al abrirse */
        #nav-toggle {
            display:none;flex-direction:column;justify-content:center;gap:5px;
            background:none;border:none;cursor:pointer;padding:6px;
        }
        #nav-toggle span {
            display:block;width:22px;height:2px;background:var(--muted);
            border-radius:2px;transition:all .25s;
        }
        #nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
        #nav-toggle.open span:nth-child(2){opacity:0;}
        #nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
        .nav-right { display:flex;align-items:center;gap:16px; }

        /* responsive — breakpoint principal en 768px */
        @media (max-width:768px) {
            body { cursor:auto; }
            #cursor-dot, #cursor-ring { display:none; }

            /* nav en móvil con menú desplegable */
            nav { padding:12px 20px; position:relative; flex-wrap:wrap; }
            #nav-toggle { display:flex; }
            .nav-links {
                display:none;
                position:absolute;top:100%;left:0;right:0;
                flex-direction:column;gap:0;
                background:rgba(8,12,20,.97);
                border-bottom:1px solid var(--border);
                padding:8px 0;z-index:200;
            }
            .nav-links.open { display:flex; }
            .nav-links a {
                padding:13px 24px;font-size:13px;letter-spacing:.1em;
                border-bottom:1px solid var(--border);
            }
            .nav-links a:last-child { border-bottom:none; }

            /* contenedores más estrechos en móvil */
            .container { padding:0 20px; }
            section { padding:60px 0; }

            /* stats del hero en cuadrícula 2x2 */
            .hero-stats {
                display:grid;grid-template-columns:1fr 1fr;
                gap:28px 20px;
            }

            /* educación en columna única en móvil */
            .edu-grid { grid-template-columns:1fr; }

            /* proyectos en columna única en móvil */
            .projects-grid { grid-template-columns:1fr; }

            /* habilidades blandas en 2 columnas en móvil */
            .soft-grid { grid-template-columns:1fr 1fr; }

            /* footer con menos padding */
            footer { padding:24px 20px; }

            /* card de exit-intent ocupa casi todo el ancho */
            #exit-card { padding:36px 24px;margin:16px; }

            /* franja de contacto en columna */
            .contact-strip .container { flex-direction:column;gap:14px; }

            /* personaje pitch más pequeño en móvil */
            #pitch-char { left:12px; }
            .pitch-bubble { font-size:12px;max-width:200px; }

            /* personaje de inactividad */
            #idle-char { right:12px;bottom:12px; }

            /* botones del hero más compactos */
            .hero-cta { gap:10px; }
            .btn-primary, .btn-ghost { padding:12px 20px;font-size:12px; }
        }

        @media (max-width:480px) {
            .hero-stats { grid-template-columns:1fr 1fr; gap:20px; }
            .soft-grid  { grid-template-columns:1fr; }
            .stat-num   { font-size:28px; }
        }