:root {
    --font-main: 'Outfit', sans-serif;
    --tec-family: "Jersey 10", sans-serif;
    --bg-color: #191622;
    --bg-color-uno: #191622;
    --bg-color-dos: #191622;
    --bg-one: #96c4f8;
    --bg-two: #6eaff8;
    --bg-three: #3557c6;
    --text-color: #ffffff;
    --text-tecs: #ffffff;
    --text-color-det: #b4b4b4;
    --text-color-section: #ffffff;
    --primary: #222223;
    --secondary: #4e4e4e;
    --timeline: #c9c9c9;
    --neon: #5d4865a1;
    --technology: #1d1d1d93;
    --complementary: #6a5f9b4d;
    --nav-bg: #353439ac;
}

/*------------Global---------*/

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
}

main {
    width: 95%;
    max-width: 53rem;
    margin: 0 auto 2rem auto;
}

img,
picture {
    object-fit: contain;
}

a {
    text-decoration: none;
}

.bloque-uno h1,
h2,
h3,
span {
    width: fit-content;
    background: #E7BFFF;
    background: linear-gradient(to right, var(--bg-one) 0%, var(--bg-two) 30%, var(--bg-three) 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon) 0px 0px 39px;
    margin: 0 auto 1rem auto;
}

.titulo-seccion {
    font-size: 2.4rem;
    text-align: center;
    text-shadow: #a2a2a2e6 0px 0px 39px;
    background: var(--text-color-section);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 3rem auto;
}

small {
    color: #a4a8b1;
}

/*------------Dark mode---------*/

.boton-dm {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    cursor: pointer;
    background: var(--nav-bg);
    box-shadow: 0 2px 20px #09174681;
    backdrop-filter: blur(2px);
    border-radius: 1.1rem;
    padding: 0.5rem;

    img {
        filter: invert(18%);
    }
}



.checkbox-oculto {
    display: none;
}

body:has(#dark-mode-palanca:checked) {
    --bg-color: #ffffff;
    --text-color: #000000;
    --text-tecs: #6a6b7a;
    --text-color-det: #505050;
    --text-color-section: #3e8aed;
    --primary: #ededed;
    --secondary: #cccccc;
    --complementary: #e9efff;
    --timeline: #8487a0;
    --technology: #dfdfdf9c;
    --neon: #ffffff00;
    --nav-bg: #efefefb3;
}

@media (width >=768px) {
    .boton-dm {
        bottom: 1rem;
    }
}

/*------------Barra----------*/

.barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    z-index: 10;
    background: var(--nav-bg);
    box-shadow: 0 2px 20px #09174681;
    backdrop-filter: blur(2px);
}

.barra a {
    padding: 0.6rem;
    color: var(--text-tecs);
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: #a2a2a2e6 0px 0px 39px;
}

.barra a:hover {
    text-shadow: #5869bd 0px 0px 26px;
    color: #667bf6;
    transition: all ease-in-out 200ms;
}

@media (width >=768px) {
    .barra {
        flex-direction: row;
        justify-content: center;
        max-width: 26rem;
        border-radius: 2rem;
        position: sticky;
        top: 0.4rem;
        gap: 3rem;
        margin: 1rem auto 0 auto;
    }

    .barra a {
        padding: 0.3rem;
        font-size: 0.8rem;
    }
}

/*------------Bento Grid----------*/

.contenedor {
    list-style: none;
    padding: 2rem 0;
    /* Creacion de columnas */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.contenedor>article,
.proyecto {
    border-radius: 1.2rem;
    padding: 1rem;
    background-color: var(--primary);
    background-image: radial-gradient(var(--complementary), rgba(255, 255, 255, 0));
    z-index: 0;
}

.bloque-uno {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.bloque-uno p {
    filter: grayscale(0.4);
}

.foto {
    position: relative;
    width: 12rem;
    overflow: hidden;
}

.foto img {
    border-radius: 1.1rem;
    border: #5a40a34a solid 1px;
    filter: grayscale(0.30);
}

.foto::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 5.4rem;
    width: 5.4rem;
    background-color: #4a5fffb6;
    border-radius: 50%;
    filter: blur(15px);
    z-index: -1;

}

.bloque-dos {
    text-align: center;
}

.enlace-personal:hover {
    animation: gelatina 0.6s both;
    scale: 1.2;
}

.bloque-dos-contacto a:nth-of-type(1):hover img {
    filter: invert(38%) sepia(13%) saturate(2013%) hue-rotate(221deg) brightness(91%) contrast(85%);
}

.bloque-dos-contacto a:nth-of-type(2):hover img {
    filter: brightness(1.1);
}

.bloque-dos-contacto a:nth-of-type(3):hover img {
    filter: invert(41%) sepia(21%) saturate(2655%) hue-rotate(188deg) brightness(89%) contrast(85%);
}

.bloque-dos-contacto a:nth-of-type(4):hover img {
    filter: invert(8%) sepia(97%) saturate(5425%) hue-rotate(349deg) brightness(84%) contrast(80%);
}

.bloque-dos-contacto {
    display: flex;
    justify-content: space-around;
}

.bloque-dos-contacto a {
    display: block;
    height: 30px;
    width: 30px;
}

.bloque-tres {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roadmap-contenedor {
    margin: auto;
}

.roadmap-contenedor p {
    margin: 0;
}

.roadmap {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.roadmap::before {
    content: '';
    position: absolute;
    width: 2px;
    bottom: 5px;
    background: var(--timeline);
    left: 6px;
    top: 5px;
}

.roadmap li {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 1.2rem;
}

.roadmap-bloque {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.tec-titulo {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 500;
}

.tec-detalles {
    font-size: 0.85rem;
    color: var(--text-color-det);
    margin-top: 2px;
    line-height: 1.3;
}

.tech-estado {
    font-size: 0.75rem;
    color: #7d7777b5;
}

.punto {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1a1a1a;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.punto.ultimo {
    box-shadow: 0 0 0 #2fff7866;
    animation: pulse-azul 1.6s infinite;
}

.punto.pendiente {
    border: 1px solid var(--timeline);
    background-color: var(--primary);
    margin: 0;
}

.punto.hecho {
    background-color: #6fe39f;
    border: 1px solid var(--timeline);
    margin: 0;
}

.bloque-cuatro {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.bloque-cuatro h3 {
    margin-bottom: 0.5rem;
}

.linea-tiempo {
    list-style: none;
    padding-left: 1.32rem;
    border-left: 2px solid var(--timeline);
}

.linea-tiempo li {
    position: relative;
    margin-bottom: 1.2rem;
}

.linea-tiempo li::before {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    background: var(--timeline);
    border-radius: 50%;
    left: -28.5px;
    top: 5px;
}

.linea-tiempo li:first-child:before {
    box-shadow: 0 0 0 #2facff66;
    animation: pulse-gris 1.6s infinite;
}

.linea-tiempo small {
    display: block;
    margin-bottom: 0.2rem;
}

.linea-tiempo li small:last-of-type {
    color: var(--text-color);
    opacity: 0.85;
}

.linea-tiempo h3 {
    margin: 0;
    font-size: 1rem;
}

.bloque-seis {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.stack {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 1.5rem auto;
}

.stack div,
.boton-proyectos,
button {
    display: grid;
    place-items: center;
    height: 3.5rem;
    width: 3.5rem;
    padding: 0.6rem;
    border-radius: 0.7rem;
    z-index: 1;
    transform-style: preserve-3d;
    background: var(--technology);
    border: 1px solid #b3b3b33b;
    position: relative;
}

.stack div::before,
.boton-proyectos::before,
button::before {
    position: absolute;
    content: "";
    height: 2.5rem;
    width: 3.2rem;
    top: 0.8rem;
    border-radius: 0.7rem;
    left: 50%;
    transform: translateX(-50%) translateZ(-1px);
    filter: blur(7px) brightness(1.1);
}

/* Título de iconos */

.stack div:hover::after {
    position: absolute;
    font-weight: 500;
    bottom: -1.8rem;
    left: 50%;
    color: var(--text-tecs);
    font-family: var(--tec-family);
    transform: translateX(-50%);
    font-size: 1.3rem;
    white-space: nowrap;
    animation: blur-title ease 0.3s;
}

.icono_html:hover::after {
    content: "HTML";
}

.icono_css:hover::after {
    content: "CSS";
}

.icono_js:hover::after {
    content: "JavaScript";
}

.icono_ts:hover::after {
    content: "TypeScript";
}

.icono_tcss:hover::after {
    content: "Tailwind";
}

.icono_react:hover::after {
    content: "React";
}

.icono_sequelize:hover::after {
    content: "Sequelize";
}

.icono_mongodb:hover::after {
    content: "MongoDB";
}

.icono_express:hover::after {
    content: "Express";
}

.icono_java:hover::after {
    content: "Java";
}

.icono_pnpm:hover::after {
    content: "PNPM";
}

.icono_postgresql:hover::after {
    content: "PostgreSQL";
}

.icono_prisma:hover::after {
    content: "Prisma";
}

.icono_mysql:hover::after {
    content: "MySQL";
}

.icono_nodejs:hover::after {
    content: "Node.js";
}

.icono_sass:hover::after {
    content: "SASS";
}

.icono_nextjs:hover::after {
    content: "Next.js";
}

.icono_docker:hover::after {
    content: "Docker";
}

.icono_vite:hover::after {
    content: "Vite";
}

.icono_php:hover::after {
    content: "PHP";
}

.icono_html::before {
    background-color: #e46b00;
}

.icono_css::before {
    background-color: #a851ff;
}

.icono_express::before,
.icono_nextjs::before {
    background-color: var(--text-color);
}

.icono_js::before {
    background-color: #ffe851;
}

.icono_vite::before {
    background-color: rgb(130, 63, 255);
}


.icono_ts::before {
    background-color: #449eff;
}

.icono_tcss::before {
    background-color: #76afff;
}

.icono_react::before {
    background-color: #7ce5ff;
}

.icono_sequelize::before {
    background-color: #3690ff;
}

.icono_mongodb::before {
    background-color: #66ff9b;
}

.icono_pnpm::before {
    background-color: #f7b557;
}

.icono_docker::before {
    background-color: #279aff;
}

.icono_mysql::before {
    background-color: #26a9eb;
}

.icono_postgresql::before {
    background-color: #5493ff;
}

.icono_prisma::before {
    background-color: #23aab9;
}

.icono_nodejs::before {
    background-color: #98e337;
}

.icono_sass::before {
    background-color: #ff9fcd;
}

.icono_java::before {
    background-color: #de8d2b;
}

.icono_php::before {
    background-color: #7783ff;
}

button::before,
.boton-proyectos::before {
    top: 0.4rem;
    height: 2.1rem;
    width: 7rem;
    background-color: #ffffff5a;
    z-index: -1;
    filter: blur(20px)
}

/* Desktop view */

@media (width >=768px) {
    .contenedor {
        list-style: none;
        padding: 2rem 0 4rem 0;
        /* Creacion de columnas */
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(5, auto);
    }

    .bloque-uno h2,
    .bloque-tres h2,
    .bloque-cuatro h3,
    .bloque-cinco h2 {
        margin: 0 0 1rem 0;
    }

    .bloque-uno {
        grid-area: 1/1/3/5;
        flex-direction: row;
        text-align: left;
    }

    .bloque-uno h1 {
        margin: 0 0 1rem 0;
    }

    .foto {
        width: 22rem;
    }

    .bloque-dos {
        grid-area: 1/5/2/7;
    }

    .bloque-tres {
        grid-area: 2/5/5/7;
    }

    .roadmap-contenedor {
        align-self: flex-start;
    }

    .formacion-general div:not(:last-of-type) {
        margin-bottom: 0.5rem;
    }

    .bloque-cuatro {
        grid-area: 3/1/5/2;
        flex-direction: column;
        justify-content: center;
        gap: 0.8rem;
    }

    .bloque-cinco {
        grid-area: 3/2/5/5;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .bloque-seis {
        grid-area: 5/1/6/7;
    }

    .stack {
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: 1fr;
        gap: 1.5rem;
        margin: 0.5rem auto;
    }

    .stack div {
        height: 3.3rem;
        width: 3.3rem;
        margin-bottom: 0.6rem;
    }
}

/*------------Proyectos----------*/

.contenedor-proyectos {
    margin-bottom: 7rem;
}

.contenedor-proyectos>div {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.proyecto {
    display: flex;
    flex-direction: column;
}

.proyecto>img {
    width: 100%;
    max-height: 16.5rem;
    max-width: 30rem;
    border-radius: 0.4rem;
    margin: 0 auto;
}

.proyecto>img:hover {
    transform: scale(1.03);
}


.proyecto>div {
    display: grid;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.proyecto h2 {
    display: flex;
    margin: 2rem 0 0 0;
    align-items: center;
}

.proyecto h2:hover {
    animation: gelatina 0.6s both;
    scale: 1.1;
}

.proyecto svg {
    stroke: var(--text-color);
}

.tecnologias {
    display: flex;
    flex-wrap: wrap;
}

.boton-proyectos {
    margin: 2rem auto 2rem auto;
}

@media (width >=768px) {
    .proyecto {
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }

    .proyecto>img {
        width: 30rem;
    }

    .proyecto h2 {
        margin: 0;
    }

    .proyecto>div {
        align-items: start;
        gap: 0.5rem;
    }
}

/*------------Contacto----------*/

#contacto h2 {
    margin-bottom: 0.2rem;
}

.contenedor-contacto small {
    display: block;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
}

form {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 1rem;
    max-width: 28rem;
}

form input {
    padding: 0.4rem 1rem;
    background-color: var(--primary);
    color: var(--text-color);
    border: var(--secondary) solid 1px;
    border-radius: 0.5rem;
}

textarea {
    padding: 0.4rem 1rem;
    height: 10rem;
    resize: none;
    background-color: var(--primary);
    color: var(--text-color);
    border: var(--secondary) solid 1px;
    border-radius: 0.5rem;
}

form button,
.boton-proyectos {
    height: 2.5rem;
    width: 8rem;
    padding: 0 1rem;
    align-self: center;
    min-width: fit-content;
    font-weight: 800;
    color: white;
    cursor: pointer;
    overflow: hidden;
    border: var(--secondary) solid 1px;
    background: #00000038;
}

form button:hover,
.boton-proyectos:hover {
    scale: 1.05;
    background-color: #3250fc6c;
    color: white;
    border: white solid 0.1px;
    transition: all ease 500ms;
}

@media (width >=768px) {
    #contacto h2 {
        margin-top: 6rem;
    }
}

/*------------Footer---------*/

footer {
    padding: 3rem 0 1rem 0;
    text-align: center;
    color: var(--text-color);
}

/*------------Animaciones----------*/

.stack img {
    animation: blur ease-out 2s;
}

.stack div::before {
    animation: show-neon ease-in-out 3s, breathing 2s ease-in-out infinite alternate 3s;
}

.proyecto img,
.proyecto h2,
.proyecto p,
.contenedor-contacto h2,
.contenedor-contacto small,
form label,
button::before {
    view-timeline-name: --reveal;
    animation-name: show;
    animation-fill-mode: both;
    animation-timeline: --reveal;
    animation-range: entry 50% cover 18%;
}

@keyframes gelatina {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes show {
    0% {
        opacity: 0;
        scale: 0.1;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes show-neon {
    0% {
        opacity: 0;
        scale: 0.1;
        transform: translateX(-120%);
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes blur {
    0% {
        opacity: 0;
        transform: scale(1.2);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

@keyframes blur-title {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.2) translate(-50%, -50%);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1) translateX(-50%);
    }
}

@keyframes breathing {
    0% {
        scale: 1;
    }

    100% {
        scale: 0.85;
        transform: translateX(-58%) translateZ(-1px);
    }
}

@keyframes pulse-azul {
    0% {
        box-shadow: 0 0 0 0 hsla(136, 100%, 57%, 0.78);
    }

    70% {
        box-shadow: 0 0 0 8px #34db7a00;
    }

    100% {
        box-shadow: 0 0 0 0 #34db9300;
    }
}

@keyframes pulse-gris {
    0% {
        box-shadow: 0 0 0 0 #8487a0eb;
    }

    70% {
        box-shadow: 0 0 0 8px #3437db00;
    }

    100% {
        box-shadow: 0 0 0 0 #3447db00;
    }
}