:root{
    --bg: #0f1221;
    --panel: #151935;
    --text: #f4f7ff;
    --muted: #aab0d6;
    --accent: #ff7ab6;
    --accent-2: #8f7aff;
    --accent-3: #4de1d3;
    --grad-1: #8f7aff;
    --grad-2: #ff7ab6;
    --grad-3: #4de1d3;
    --maxW: 1200px;
    --rad: 16px;
    --pad: 1.3rem;
    --lh: 1.75;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:
        radial-gradient(900px 600px at 15% 10%, rgba(143,122,255,.20), transparent),
        radial-gradient(700px 500px at 90% 20%, rgba(255,122,182,.18), transparent),
        radial-gradient(600px 400px at 60% 80%, rgba(77,225,211,.18), transparent),
        linear-gradient(180deg, var(--bg), var(--bg));
    color: var(--text);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    }

    a{ 
    color: var(--accent-3); 
    text-decoration:none; 
    }
    a:hover{
    text-decoration:underline; 
    }

    .skip{ 
    position:absolute; 
    left:-9999px; top:auto; 
    width:1px; height:1px; 
    overflow:hidden; 
    }
    .skip:focus{ 
    position:fixed; 
    left:1rem; 
    top:1rem; background:#fff; 
    color:#000; padding:.5rem; 
    border-radius:8px; 
    }

    /* Layout */
    .wrap{ 
    display:grid; 
    grid-template-columns: 1fr; 
    max-width:var(--maxW); 
    margin-inline:auto;
    min-height:100vh; 
    }

    /* Sidebar */
    .left{ 
    padding:2.2rem 1.5rem; 
    border-bottom:1px solid rgba(255,255,255,.08); 
    }
    .title{ 
    font-size: clamp(2.5rem, 4.5vw, 3.5rem); letter-spacing:.1px; 
    margin:0 0 .5rem 0; }
    .role{ 
    margin:.10rem 0 .15rem; 
    opacity: .95; }
    .summary{ 
    color:var(--muted); 
    margin:0 0 1rem; 
    }

    /* Menú */
    .sections{ 
    display:flex; 
    flex-direction:column; 
    gap:.3rem; 
    margin:1rem 0; 
}
    .tab{ display:flex; 
        align-items:center; 
        gap:.75rem; 
        color:var(--muted); 
        padding:.4rem 0; 
        position:relative; 
        text-decoration:none; 
    }
    .tab::before{ content:''; 
        width:28px; height:2px; 
        background:rgba(255,255,255,.16); 
        transition:width .25s ease, background .25s ease; 
    }
    .tab:hover::before{ width:40px; background:linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)); 
    }
    .tab.active{ color:var(--text); 
    }
    .tab.active::before{ background:linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)); 
        width:40px; 
    }

    /* Redes sociales*/
    .social{ 
    list-style:none; 
    display:flex; 
    gap:1rem; 
    padding:0;
    margin:1rem 0 0;
    }
    .social a{
    display:grid; 
    place-items:center; 
    width:38px; height:38px; 
    border-radius:10px; color:#fff;
    background:linear-gradient(135deg, var(--grad-1), var(--grad-2));
    border:1px solid rgba(255,255,255,.10); 
    box-shadow: 0 6px 24px rgba(0,0,0,.25)
    }
    .social a:hover{ 
        background:linear-gradient(135deg, var(--grad-2), var(--grad-3)) 
    }

    /* Contenido */
    .right{ padding:2rem 1.5rem }
    .panel{
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--rad);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .lead{ font-size: clamp(1.05rem, 1.1rem + .5vw, 1.2rem) 
    }
    .panel h2{ font-size:1.2rem; 
    letter-spacing:.2px; 
    margin:0 0 1rem 
}
    .proj{ border-top:1px solid rgba(255,255,255,.08); 
    padding-top:1rem; 
    margin-top:1rem 
}
    .proj header{ display:flex; 
    align-items:baseline; 
    gap:.75rem; flex-wrap:wrap 
}
    .proj h3{ font-size:1.07rem; 
    margin:.1rem 0 
}
    .proj small{ color:var(--muted) 
    }
    .links a{ margin-right:1rem; 
    color: var(--accent); 
}
    .list{ padding-left:1.1rem 
    }
    .foot{ color:var(--muted); margin-top:.9rem 
    }

    /* Desktop */
    @media (min-width: 980px){
    .wrap{ grid-template-columns: 380px 1fr }
    .left{
        position:sticky; 
        top:0; 
        height:100vh; 
        display:flex; 
        flex-direction:column; 
        justify-content:flex-start;
        border-bottom:none; 
        padding:3rem 2.2rem
    }
    .right{ padding:3rem 2.2rem }
    .panel{ padding:1.7rem 1.9rem }
    }

    /* Centrar íconos en movil */
    @media (max-width: 979px){
    .left{
        padding: 2rem 1.5rem 2.6rem;
    }
    .sections{
        margin: 1.4rem 0 1.6rem;
    }
    .social{ justify-content:center; 
    margin-top: 1.2rem;}
    }

    /* Accesibilidad */
    :focus-visible{ outline:2px solid var(--accent-3); 
        outline-offset:3px }
    @media (prefers-reduced-motion: reduce){ *{ 
        animation:none; transition:none } 
    }

    /* formulario de contácto */
    .contact-form{
    display: grid;
    gap: .7rem;
    margin-top: .1rem;
    font-size: .90rem;
    }
    .form-control{ 
        display:grid; 
        gap:.30rem; 
    }
    .form-control label{ 
        letter-spacing:.1px; 
    }
    .required{ 
        color: var(--accent); 
    }
    .input-field{
    width:100%;
    color:var(--text);
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:.5rem .6rem;
    line-height:1.4;
    }
    .input-field::placeholder{ 
        color: rgba(255,255,255,.55); 
    }
    .input-field:focus{
    outline:2px solid var(--accent-3);
    outline-offset:2px;
    border-color: transparent;
    }
    textarea.input-field{ 
        resize:vertical; 
        min-height:100px; 
    }
    .form-status{ margin:.3rem 0 0; 
        color:var(--muted); 
        font-size:.95rem; 
    }
    .submit-btn{
    appearance:none;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:.6rem 7rem;
    font-weight:700;
    letter-spacing:.2px;
    cursor:pointer;
    background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
    color:#0d0f1a;
    box-shadow:0 6px 24px rgba(0,0,0,.25);
    transition: transform .12s ease, box-shadow .12s ease;
    }
    .submit-btn:hover{ 
        transform: translateY(-1px); 
    }
    .submit-btn:active{ 
        transform: translateY(0); 
    }
    @media (max-width: 979px){ 
        .contact-form{ gap:1.1rem; } 
    }