:root {

    --bg: #080b14;
    --bg2: #0d1220;

    --ink: #fff;

    --muted: rgba(255, 255, 255, .68);
    --dim: rgba(255, 255, 255, .42);

    --line: rgba(255, 255, 255, .1);

    --indigo: #6366f1;
    --violet: #a5b4fc;
    --pink: #ec4899;
    --cyan: #22d3ee;
    --green: #4ade80;

    --grad: linear-gradient(135deg,
            #fff 0%,
            #a5b4fc 45%,
            #ec4899 100%);

    --grad2: linear-gradient(135deg,
            #6366f1,
            #ec4899);

    --sans: 'Space Grotesk', sans-serif;
    --body: 'DM Sans', sans-serif;
    --mono: 'JetBrains Mono', monospace;

    --ease: cubic-bezier(.19, 1, .22, 1);
}


/* ================= GENERAL ================= */

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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--bg);

    color: var(--ink);

    font-family: var(--body);

    line-height: 1.6;
}


/* Fondo */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -2;

    background:

        radial-gradient(circle at 15% 10%,
            rgba(99, 102, 241, .2),
            transparent 32%),

        radial-gradient(circle at 85% 65%,
            rgba(236, 72, 153, .12),
            transparent 30%),

        radial-gradient(circle at 50% 100%,
            rgba(34, 211, 238, .07),
            transparent 30%);
}


body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    opacity: .35;

    background-image:

        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px);

    background-size: 64px 64px;
}


a {

    color: inherit;

    text-decoration: none;
}


.container {

    width: min(1180px, 92%);

    margin: auto;
}


section {

    padding: 105px 0;
}


h1,
h2,
h3 {

    font-family: var(--sans);

    letter-spacing: -.035em;
}


/* ================= NAVBAR ================= */

.navbar {

    position: fixed;

    top: 18px;

    left: 50%;

    transform: translateX(-50%);

    width: min(1120px, 92%);

    z-index: 50;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    background: rgba(8, 11, 20, .68);

    border: 1px solid var(--line);

    border-radius: 18px;

    backdrop-filter: blur(20px);
}


.brand {

    font: 600 15px var(--sans);

    display: flex;

    align-items: center;

    gap: 10px;
}


.logo {

    width: 28px;

    height: 28px;

    border-radius: 8px;

    background: var(--grad2);

    display: grid;

    place-items: center;

    font: 700 10px var(--mono);
}


.navlinks {

    display: flex;

    gap: 22px;

    font-size: 12px;

    color: var(--muted);
}


.navlinks a {

    transition: .25s;
}


.navlinks a:hover {

    color: #fff;

    transform: translateY(-1px);
}


.nav-social {

    display: flex;

    gap: 7px;
}


.iconbtn {

    width: 34px;

    height: 34px;

    border: 1px solid var(--line);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font: 700 10px var(--mono);

    transition: .25s;
}


.iconbtn:hover {

    background: rgba(255, 255, 255, .1);

    transform: translateY(-2px);
}


.menu-toggle {

    display: none;

    border: 1px solid var(--line);

    background: rgba(255, 255, 255, .05);

    color: white;

    border-radius: 10px;

    width: 38px;

    height: 38px;

    cursor: pointer;

    font-size: 20px;
}


/* ================= HERO ================= */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 130px;
}


.hero-grid {

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 60px;

    align-items: center;
}


.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

    border: 1px solid rgba(99, 102, 241, .35);

    background: rgba(99, 102, 241, .1);

    border-radius: 999px;

    color: var(--violet);

    font: 11px var(--mono);

    letter-spacing: .08em;

    text-transform: uppercase;
}


.dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--indigo);

    box-shadow: 0 0 12px var(--indigo);
}


h1 {

    font-size: clamp(52px, 8vw, 105px);

    line-height: .96;

    font-weight: 500;

    margin: 24px 0;
}


.gradient {

    background: var(--grad);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero p {

    font-size: clamp(16px, 2vw, 20px);

    max-width: 690px;

    color: var(--muted);
}


.actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 30px;
}


.btn {

    padding: 13px 20px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    transition: .3s;
}


.primary {

    background: #fff;

    color: #080b14;
}


.primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(255, 255, 255, .13);
}


.secondary {

    background: rgba(255, 255, 255, .05);

    border: 1px solid var(--line);
}


.secondary:hover {

    background: rgba(255, 255, 255, .1);

    transform: translateY(-2px);
}


/* ================= PROFILE ================= */

.profile-card {

    padding: 30px;

    border: 1px solid var(--line);

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .07),
            rgba(255, 255, 255, .025));

    backdrop-filter: blur(25px);
}


.avatar {

    width: 95px;

    height: 95px;

    border-radius: 25px;

    background: var(--grad2);

    display: grid;

    place-items: center;

    font: 700 25px var(--mono);

    margin-bottom: 24px;

    box-shadow:
        0 20px 50px rgba(99, 102, 241, .22);
}


.profile-card h3 {

    font-size: 23px;
}


.profile-card p {

    font-size: 13px;

    color: var(--muted);

    margin-top: 6px;
}


.meta {

    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid var(--line);

    display: grid;

    gap: 12px;
}


.meta div {

    display: flex;

    justify-content: space-between;

    font-size: 12px;
}


.meta span:first-child {

    color: var(--dim);
}


.meta span:last-child {

    color: #fff;
}


/* ================= SECCIONES ================= */

.section-head {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    align-items: end;

    margin-bottom: 35px;
}


.section-head h2 {

    font-size: clamp(38px, 5vw, 68px);

    line-height: 1;
}


.section-head p {

    max-width: 430px;

    color: var(--muted);

    font-size: 14px;
}


/* ================= CARDS ================= */

.cards {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}


.card {

    border: 1px solid var(--line);

    border-radius: 20px;

    background: rgba(255, 255, 255, .035);

    padding: 24px;

    transition: .35s var(--ease);
}


.card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(165, 180, 252, .35);

    background:
        rgba(255, 255, 255, .055);
}


.num {

    font: 11px var(--mono);

    color: var(--violet);

    letter-spacing: .15em;
}


.card h3 {

    font-size: 19px;

    margin: 17px 0 8px;
}


.card p {

    font-size: 13px;

    color: var(--muted);
}


/* ================= TAGS ================= */

.tags {

    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin-top: 17px;
}


.tag {

    font: 10px var(--mono);

    padding: 5px 8px;

    border-radius: 6px;

    background: rgba(255, 255, 255, .06);

    color: var(--muted);
}


/* ================= PROYECTOS ================= */

.project {

    display: flex;

    flex-direction: column;

    min-height: 285px;
}


.project .bottom {

    margin-top: auto;

    padding-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.link {

    font-size: 12px;

    color: var(--violet);
}


.link:hover {

    text-decoration: underline;
}


/* ================= FILTROS ================= */

.project-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;
}


.filter-btn {

    border: 1px solid var(--line);

    background: rgba(255, 255, 255, .035);

    color: var(--muted);

    padding: 8px 14px;

    border-radius: 999px;

    cursor: pointer;

    font: 11px var(--mono);

    transition: .25s;
}


.filter-btn:hover,
.filter-btn.active {

    background: rgba(99, 102, 241, .18);

    border-color:
        rgba(165, 180, 252, .45);

    color: #fff;
}


.project-hidden {

    display: none !important;
}


/* ================= SKILLS ================= */

.skills {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;
}


.skill {

    padding: 20px;

    border: 1px solid var(--line);

    border-radius: 16px;

    background: rgba(255, 255, 255, .03);

    transition: .3s;
}


.skill:hover {

    transform: translateY(-4px);

    background: rgba(255, 255, 255, .055);
}


.skill strong {

    font: 500 14px var(--sans);

    display: block;

    margin-bottom: 8px;
}


.skill span {

    font-size: 11px;

    color: var(--muted);
}


/* ================= TIMELINE ================= */

.timeline {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
}


.item {

    padding: 24px;

    border-left: 2px solid var(--indigo);

    background: rgba(255, 255, 255, .03);

    border-radius: 0 18px 18px 0;

    transition: .3s;
}


.item:hover {

    transform: translateX(5px);
}


.item small {

    font: 10px var(--mono);

    color: var(--violet);

    text-transform: uppercase;
}


.item h3 {

    margin: 8px 0;

    font-size: 19px;
}


.item p {

    font-size: 13px;

    color: var(--muted);
}


/* ================= CONTACTO ================= */

.contact {

    border: 1px solid var(--line);

    border-radius: 28px;

    padding: 55px;

    text-align: center;

    background:
        linear-gradient(135deg,
            rgba(99, 102, 241, .11),
            rgba(236, 72, 153, .07));
}


.contact h2 {

    font-size: clamp(42px, 6vw, 78px);

    line-height: 1;
}


.contact p {

    color: var(--muted);

    max-width: 580px;

    margin: 18px auto 0;
}


.socials {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 25px;
}


.social {

    padding: 11px 16px;

    border: 1px solid var(--line);

    border-radius: 999px;

    font-size: 12px;

    transition: .3s;
}


.social:hover {

    background: rgba(255, 255, 255, .08);

    transform: translateY(-2px);
}


/* ================= FOOTER ================= */

footer {

    padding: 30px 0 45px;

    border-top: 1px solid var(--line);

    display: flex;

    justify-content: space-between;

    color: var(--dim);

    font: 10px var(--mono);
}


/* ================= ANIMACIONES ================= */

.reveal {

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);
}


/* ================= BACK TO TOP ================= */

.back-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    width: 44px;

    height: 44px;

    border: 1px solid var(--line);

    border-radius: 50%;

    background: rgba(8, 11, 20, .85);

    color: white;

    cursor: pointer;

    z-index: 100;

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px);

    transition: .3s;
}


.back-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.back-top:hover {

    background:
        rgba(99, 102, 241, .35);

    transform: translateY(-3px);
}


/* ================= TABLET ================= */

@media(max-width:900px) {

    .hero-grid {

        grid-template-columns: 1fr;
    }


    .profile-card {

        max-width: 520px;
    }


    .cards {

        grid-template-columns: 1fr 1fr;
    }


    .skills {

        grid-template-columns: 1fr 1fr;
    }


    .navlinks {

        display: none;
    }


    .menu-toggle {

        display: grid;

        place-items: center;
    }


    .navbar.menu-open .navlinks {

        display: flex;

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        right: 0;

        padding: 20px;

        flex-direction: column;

        gap: 15px;

        background:
            rgba(8, 11, 20, .97);

        border: 1px solid var(--line);

        border-radius: 16px;

        backdrop-filter: blur(20px);
    }

}


/* ================= CELULAR ================= */

@media(max-width:600px) {

    section {

        padding: 80px 0;
    }


    .hero {

        padding-top: 120px;
    }


    .cards,
    .skills,
    .timeline {

        grid-template-columns: 1fr;
    }


    .section-head {

        display: block;
    }


    .section-head p {

        margin-top: 18px;
    }


    .profile-card {

        padding: 22px;
    }


    .contact {

        padding: 35px 20px;
    }


    footer {

        display: block;
    }


    footer span {

        display: block;

        margin-top: 8px;
    }


    .project-filters {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;
    }


    .filter-btn {

        white-space: nowrap;
    }


    .back-top {

        right: 16px;

        bottom: 16px;
    }

}