:root {
    /* === Colores === */
    --principal-violeta: #aaaadc;
    --terceario-azul: #2e3382;
    --moderate-cyan: hsl(170, 45%, 43%);
    --light-grayish-blue: #f6f6fe;
    --light-gray: #bfbfbf;
    --fondo-claro: #f6f6fe;

    /* === Espaciados === */
    --padding-container: 90px 0;

    /* === Fuentes === */
    --font1: "DM Sans", sans-serif;
    --font2: 'Raleway', sans-serif;

    /* === Tamaños de fuente === */
    /* Base */
    --font-size-body: 0.8rem;
    --font-size-h2: 2rem;
    --font-size-encabezado-titulo: 1.5rem;
    --font-size-encabezado-subtitulo: 0.8rem;
    --font-size-nav-enlace: 0.9rem;
    --font-size-tooltip: 0.6rem;
    --font-size-bienvenida-p: 1.2rem;
    --font-size-proyecto-titulo: 1.2rem;
    --font-size-proyecto-descripcion: 0.8rem;
    --font-size-proyecto-enlace: 0.8rem;
    --font-size-sobre-mi-base: 1.2rem;
    --font-size-sobre-mi-p: 1.2rem;
    --font-size-contacto-h2: 1.8rem;

    /* Responsive (min-width: 900px) */
    --font-size-h2-900px: 2.4rem;
    --font-size-encabezado-titulo-900px: 2.3rem;
    --font-size-encabezado-subtitulo-900px: 1.0rem;
    --font-size-bienvenida-p-900px: 1.4rem;
    --font-size-proyecto-descripcion-900px: 0.8rem;
    --font-size-proyecto-enlace-900px: 0.7rem;
    --font-size-sobre-mi-p-900px: 1.4rem;

    /* Responsive (min-width: 1200px) */
    --font-size-bienvenida-p-1200px: 1.4rem;
    --font-size-proyecto-titulo-1200px: 1.5rem;
    --font-size-proyecto-enlace-1200px: 0.7rem;
}


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

a {
    text-decoration: none;
}

body {
    font-family: var(--font2);
    font-size: var(--font-size-body);
    line-height: 1.4;
    letter-spacing: 0.5px;
    word-spacing: 4px;


    /*  font-family: 'Karla', sans-serif; */
    /*   font-family: 'Montserrat', Arial, sans-serif; */
    margin: 0;
    background: #fff;
    color: rgb(48, 47, 51);
}

h2 {
    text-align: center;
    font-family: var(--font2);
    font-size: var(--font-size-h2);
    color: var(--terceario-azul);
    margin-bottom: 20px;
}

h3 {
    line-height: 1;

}

.texto-centrado {
    text-align: center;
    margin-bottom: 70px;

}

.encabezado {
    position: relative;
    background: #222;
    color: #fff;
    padding: 3vh 0 1vh 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;

}

.encabezado__logo {

    position: absolute;
    /* centrar el logo en la parte izquierda */
    left: 0;
    top: 0;

    /* bottom: 1vh; */
    margin: 0.5vw;


    width: 60px;
    height: 60px;
    /* border-style: solid;
    border-radius: 20%; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-self: start;

    transition: transform ease-in-out 0.5s;

}

.encabezado__logo:hover {
    transform: scale(1.1);
    transition: transform ease-in-out 0.5s;
}

.encabezado__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.encabezado__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 20;
    flex-basis: 0;
    order: 1;
}

.encabezado__titulo {
    margin: 0;
    font-size: var(--font-size-encabezado-titulo);
    letter-spacing: 1px;
}

.encabezado__subtitulo {
    margin: 8px 0 0 0;
    font-size: var(--font-size-encabezado-subtitulo);
    color: #b2bec3;
}

.barra-navegacion {
    margin: 16px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-transform: uppercase;


}

.barra-navegacion__enlace {
    color: #636e72;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
    font-size: var(--font-size-nav-enlace);
    padding: 10px;
    border-radius: 10px;
    transition: all ease-in-out 0.2s;
}

.barra-navegacion__enlace:hover {
    color: #e2e1e7;
    background-color: #6767ba;

    transition: all ease-in-out 0.5s;

}

.encabezado__redes {

    position: absolute;
    top: 1vw;
    right: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    flex-grow: 1;
    justify-self: end;
    gap: 2vw;
    margin-right: 1vw;
    margin-top: 0.5vw;
    order: 2;

}

.encabezado__redes a {
    color: #fff;
    text-decoration: none;

}

.icono {
    display: inline-block;
    width: 25px;
    height: 25px;
    fill: currentColor;
    vertical-align: middle;
    transition: fill ease-in-out 0.2s;
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.815));
    transition: all ease-in-out 0.5s;
}

.icono-xl {
    width: 35px;
    height: 35px;
}

.icono:hover {
    fill: var(--principal-violeta);
    transition: all ease-in-out 0.5s;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.815));
    transform: scale(1.1) translateY(-2px) translateX(-2px);
}

.inline-icon {
    height: 2em;
    /* Se ajusta al tamaño de la fuente del texto circundante */
    width: auto;
    vertical-align: bottom;
    /* Alinea la imagen verticalmente con el texto */
}

.icono-gmail {
    color: var(--principal-violeta);
}

.icono-gmail:hover {
    fill: var(--fondo-claro);

}

.icono-github {
    color: var(--principal-violeta);
}

.icono-github:hover {
    fill: var(--fondo-claro);

}



.icono-linkedin {
    color: var(--principal-violeta);
}

.icono-linkedin:hover {
    fill: var(--fondo-claro);

}

.tooltip {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.tooltip-text {
    visibility: hidden;
    background-color: #3d449b;
    color: #fff;


    text-align: center;
    padding: 6px 8px;
    border-radius: 4px;
    position: absolute;

    white-space: nowrap;
    font-size: var(--font-size-tooltip);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
}

.encabezado__redes__tooltip-text {
    left: calc(-20%);
    bottom: -1px;
    transform: translateX(-110%);
}



.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition: all 0.1s ease-in-out 0.6s;
}

.contenido-principal {
    max-width: 1600px;
    position: relative;

}

.contenido-principal::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to right, #7167a1, #24266e);
    background-color: #4b33c4;
    left: 0;
    top: 0;
    z-index: 5;
    animation: slideInX 4s forwards;

}

.bienvenida {
    display: flex;
    flex-direction: column;
    padding: 5vh 10vw 0vh 10vw;
    margin: 0 auto;
    max-width: 100%;
    font-size: var(--font-size-bienvenida-p);
    position: relative;
    background-color: #c7c2dce8;
    animation: slideInY 1s forwards;
    text-align: center;
}


.bienvenida__imagen {
    width: 100%;
    max-width: 350px;
    height: auto;
    overflow: hidden;
    padding-top: 5vh;
    margin: 0 auto;

}

.bienvenida__imagen img {
    width: 100%;
    height: auto;


}


.bienvenida::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 15vw;


    background-image: url('../assets/imagenes/bg-curve-desktop.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #c7c2dc00;

    left: 0;
    bottom: -6vh;
    z-index: -1;
    animation: slideInY 4s forwards;
}



@keyframes slideInY {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(5px);
        opacity: 1;
    }
}


@keyframes slideInX {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}


.seccion {
    position: relative;
    max-width: 100%;
    /*  padding: 5vh 10vw 10vh 10vw; */

    background-color: var(--fondo-claro);
}

.seccion-proyectos {}


.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;;
    padding: 5vh 8vw 10vh 8vw;
    /* animation: slideInY 4s forwards; */
    margin: 0 auto;

}


.proyectos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10vh;

}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}


.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}



.proyectos__tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 40px;
    /*  padding: 1rem; */
    border-style: solid;
    border-width: 25px;
    border-color: #2a292f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    justify-content: space-between;
    align-content: space-between;
    transition: all ease-in-out 0.5s;
    max-width: 600px;

    overflow: hidden;


}

.proyectos__tarjeta:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.334);
    /*   border-color: #aca7c7; */

    transition: all ease-in-out 0.5s;
}

.proyectos__figure {
    /* width: 100%; */
    height: inherit;
    padding: 0;
    /*
    display: flex;
    flex-direction: column;
    
    align-items: top;
    justify-content: top; */
    overflow: hidden;

    max-height: 30vh;




}

.proyectos__imagen {

    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
    object-position: top;




}

/* Modificador para imágenes que no deben ser recortadas, como la del asistente */
.proyectos__imagen--contain {
    object-fit: contain;
    /* Mantiene la proporción y la ajusta dentro del contenedor */
    object-position: center;
    /* Asegura que esté centrada verticalmente */
    padding: 1rem;
    /* Añade un poco de espacio para que no se vea pegada a los bordes */
    background-color: #ccc8df;
}

.proyectos__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1vw;
    padding: 0.5vw 2.5vw 2vw 2.5vw;
    text-align: center;
    /*Use el flex-grow:1 para poder poner los botones al final
    Yo lo entiendo asi, habia espacio disponible en el .proyectos__tarjeta al poner flex-grow:1 se lo llevo el contenido,
    pero le puse flex-grow:1 tambien a los enlaces para que se llevan ese espacio que conseguimos*/
    flex-grow: 1;
    flex-basis: 0;


    opacity: 1;
    position: relative;
}

/*El hover en el ancestro que era la card, creo un pseudoelemento en el nieto! Espectacular*/
/* .proyectos__tarjeta:hover .proyectos__contenido::before {
    content: "";
    position: absolute;
    top: 0;
    

    padding: auto;
    width: 20%;
    height: 3px;
    background: linear-gradient(to right, #464c9e, #3c4294);

    
    animation: slideIn-Y 0.8s forwards;
    align-self: center;
}
 */
@keyframes slideIn-Y {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0px);
        opacity: 1;
    }
}




.proyectos__titulo {
    margin-top: 2vh;
    margin-bottom: 0.5vw;
    color: var(--terceario-azul);
    font-size: var(--font-size-proyecto-titulo);
    position: relative;
}

.proyectos__descripcion {
    font-family: var(--font1);
    color: #4f4c6c;
    font-size: var(--font-size-proyecto-descripcion);
    font-weight: 400;
    font-style: normal;
    letter-spacing: .01rem;
    word-spacing: 0.01rem;
    line-height: 1rem;
    /* padding-bottom: 20px; */
    margin: 2px;

}




.proyectos__descripcion p {
    margin: 0.6rem 0rem;
    padding: 0;
    text-align: center;
}


.proyectos__enlaces {

    width: 90%;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 4vw;
    margin: 1vw 2vw 2vw 2vw;
    flex-wrap: wrap;
    /*Le puse flex-grow:1 para que se lleve el espacio que conseguimos cuando usamos flex-grow:1 a su padre que era el contenido*/
    flex-grow: 1;
    flex-basis: 0;

}

.proyectos__enlace {
    color: #ffffff;
    text-decoration: none;
    font-size: var(--font-size-proyecto-enlace);
    padding: 5px 10px;
    font-family: var(--font1);
    font-weight: 600;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    word-spacing: 0em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 80px;
    background-color: #9e9ead;
    border-style: solid;
    border-color: #f6f6fb;
    /* background-color: #bdc5e4;
    border: 5px solid #f6f6fe; */
    transition: all ease-in-out 0.5s;


    /**Si tenemos items unos mas grandes que otros por defecto, es decir no le definimos ancho ni alto, se adaptan al contenido 
    y ahi el flex grow no define el tamaño total de cada elemento.* *Para este caso se puede agregar la propiedad `flex-basis:0` 
    para que todos los elementos queden del mismo tamaño**/

    flex-grow: 1;
    flex-basis: 0;
    max-width: 30vw;

}

.proyectos__enlace:hover {
    background-color: #695ead;
    /* background: var(--principal-violeta); */
    padding: 5px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    transition: all ease-in-out 0.5s;
    border-color: #e6e6ff;
    /* border-color: #dfdffa; */
    color: #fff;
}



.sobre-mi {

    background: #c1d0ef;
    padding: 10vh 10vw 15vh 10vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);

    font-size: var(--font-size-sobre-mi-base);
    z-index: 10;
}

.sobre-mi p {
    margin: 1rem 0rem;
    font-size: var(--font-size-sobre-mi-p);
    letter-spacing: 0.01rem;
}

.sobre-mi h2 {

    margin-bottom: 2rem;
}


.contacto {

    background: #191919;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    padding: 10vh;
    z-index: 10;
}

.contacto h2 {
    text-align: center;



    color: #958ac9;
    font-size: var(--font-size-contacto-h2);
    margin-bottom: 30px;
}

.contacto p {
    margin-top: 10px;
    color: azure;
    text-align: center;
    font-size: 1rem;
}

.contacto__enlaces {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px;
    gap: 40px;
}

.contacto__enlace {
    color: #0984e3;
    text-decoration: none;
    margin-right: 15px;
}


.contacto__enlaces__tooltip-text {
    left: calc(50% - 1px);
    bottom: -130%;
    transform: translateX(-50%);

}


.pie-pagina {
    background-color: #111112;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

@media (min-width: 900px) {

    h2 {

        font-size: var(--font-size-h2-900px);
    }

    .encabezado__nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 50;
        flex-basis: 0;
        order: 1;
    }

    .encabezado__titulo {
        font-size: var(--font-size-encabezado-titulo-900px);
    }

    .encabezado__subtitulo {
        font-size: var(--font-size-encabezado-subtitulo-900px);
    }

    .encabezado__redes {
        bottom: 0;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: end;

        gap: 2vw;
        margin-bottom: 3vh;
        margin-right: 2vw;
        order: 2;

    }

    .encabezado__redes__tooltip-text {

        bottom: 130%;
        left: calc(50% - 3px);
        transform: translateX(-50%);

    }

    .icono {

        width: 5vh;
        height: 5vh;

    }



    .seccion {

        /* padding: 2vh 4vw 10vh 4vw; */
    }

    .barra-navegacion {
        gap: 30px;
    }

    .bienvenida p {
        font-size: var(--font-size-bienvenida-p-900px);
    }

    .bienvenida::before {
        background-image: url('../assets/imagenes/bg-curve-desktop.svg');
        height: 10vw;
    }

    .bienvenida h2 {
        text-align: center;
    }

    .container {
        padding: 5vh 5vw 10vh 5vw;
        /* animation: slideInY 4s forwards; */
    }

    .proyectos {
        grid-template-columns: repeat(2, 1fr);
        gap: 4vw;
    }

    .proyectos__tarjeta {
        /* font-size: 1.1vw; */
        border-width: 25px;
    }

    .proyectos__figure {
        height: 20vw;

        max-height: 30vw;
    }

    .proyectos__imagen {
        width: 100%;

        /* object-fit: cover; */
        /* height: auto; */
        margin-bottom: 10px;
        object-position: top;



    }

    .proyectos__contenido {
        padding: 0.5vw 2vw 0.5vw 2vw;
    }

    .proyectos__titulo {
        /* font-size: 2rem; */
        margin-top: 1vw;
        margin-bottom: 0.5vw;
    }

    .proyectos__descripcion {
        color: #4f4c6c;
        font-size: var(--font-size-proyecto-descripcion-900px);
        font-weight: 400;
        letter-spacing: .01rem;
        /* line-height: 1.1rem; */
        word-spacing: 0.01rem;
        /* margin: 2px; */
    }

    .proyectos__enlaces {
        width: 90%;
        gap: 2vw;

    }

    .proyectos__enlace {
        font-size: var(--font-size-proyecto-enlace-900px);
        max-width: 17vw;

    }

    .sobre-mi p {
        margin: 1rem 0rem;
        font-size: var(--font-size-sobre-mi-p-900px);
        letter-spacing: 0.01rem;
    }
}

@media (min-width: 1200px) {

    .container {
        padding: 5vh 12vw 10vh 12vw;
        /* animation: slideInY 4s forwards; */
    }




    .bienvenida {
        flex-direction: row;
        padding: 3% 3vw 1vw 8vw;
        text-align: left;
        font-size: var(--font-size-bienvenida-p-1200px);
        /* gap: 20px; */
        justify-content: center;


    }

    .bienvenida h2 {
        text-align: left;
    }

    .bienvenida__texto {
        flex-grow: 5;
        padding-right: 1vw;
        padding-bottom: 10vw;

    }

    .bienvenida__imagen {
        position: relative;
        flex-grow: 1;
        overflow: visible;
        max-width: 30vw;
        padding-top: 0;

    }

    .bienvenida__imagen img {
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        /* width: 32vw; */
    }

    .proyectos {
        grid-template-columns: repeat(2, 1fr);
        gap: 6vw;
    }

    .proyectos__tarjeta {
        /* font-size: 1.1vw; */
        border-width: 25px;
    }

    .proyectos__figure {
        height: 15vw;

        max-height: 30vw;
    }

    .proyectos__imagen {
        width: 100%;

        /* object-fit: cover; */
        /* height: auto; */
        margin-bottom: 10px;
        object-position: top;



    }

    .proyectos__contenido {
        padding: 0.5vw 2vw 0.5vw 2vw;
    }

    .proyectos__titulo {
        /* font-size: 2rem; */
        margin-top: 1vw;
        margin-bottom: 0.5vw;
    }

    .proyectos__contenido {
        /* padding: 0.5vw 0.5vw 0.5vw 0.5vw; */
    }

    .proyectos__titulo {
        font-size: var(--font-size-proyecto-titulo-1200px);
        margin-top: 0.5vw;
        margin-bottom: 0.25vw;
    }


    .proyectos__enlaces {

        gap: 2vw;

    }

    .proyectos__enlace {
        font-size: var(--font-size-proyecto-enlace-1200px);

    }

}