* {
    box-sizing: border-box;
    /* Hace que el padding y el border se incluyan dentro del ancho y alto total de los elementos */
    margin: 0;
    /* Elimina el margen por defecto de todos los elementos */
    padding: 0;
    /* Elimina el padding por defecto de todos los elementos */
}

html {
    scroll-behavior: smooth;
    /* Permite un deslizamiento suave cuando se hace clic en los enlaces del menú */
}

/* MENU ENCABEZADO -------------------------------------------------------------------------------------------------------------------------------------------*/
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    background: rgb(9, 36, 36);
    color: #ffffff;
    height: 4.1rem; 
}

.logo {
    display: flex;
    align-items: center;
    height: 100%; /* Asegúrate de que el contenedor tenga una altura */
}

.logo img {
    width: 3.4375rem;
    height: auto;
    margin-left: 1.5rem;
}

header nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    height: 100%;
    margin-right: 30px;
}

header nav ul li a {
    margin: -0.1875rem 1rem;
    margin-top: 0.2rem;
    padding: 0 10px;
    text-decoration: none; /* Elimina el subrayado de los enlaces del menú */
    font-family: "Courier Prime", monospace;
    font-weight: 100;
    font-size: 1.3rem; 
}

.mostrar-menu,
.esconder-menu{
    font-size: 30px;
    cursor: pointer;
    display: none;
}

.mostrar-menu{
    order: 1;
}

.mostrar-menu i {
    font-size: 1.5rem; /* Ajusta este valor según el tamaño que desees */
}

#check{
    display: none;
}

/* MENU ENCABEZADO EFECTOS*/

.link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 100;
}

.link::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0.125rem;
    background-color: rgb(0, 255, 132);
    transition: width 0.4s, left 0.4s;
    bottom: -0.1875rem;
    transform-origin: center; 
}

.link:hover::after,
.link.active::after { /* Específico para los enlaces con clase active */
    width: 100%; /* Cuando el enlace está activo o se pasa el ratón sobre él, la línea se expande completamente */
    left: 0; /* La línea se desplaza hacia la izquierda desde el centro */
}



/* SECCION INICIO (BANNER)  ------------------------------------------------------------------------------------------------------------------------------------*/
#banner {
    background: 
        linear-gradient(to top, rgba(25, 30, 33, 0.7), rgba(18, 73, 72, 0.9)), /* Gradiente */
        url('Fotos_portfolio/codigo1.jpg'); /* Imagen de fondo */
    background-size: cover; /* Ajuste del tamaño de la imagen de fondo */
    background-blend-mode: overlay; /* Mezcla la imagen con el gradiente */
    width: 100%;
    height: 40rem;
    color: #fff;
    display: flex; /* Usa flexbox */
    flex-direction: row; /* Distribuye los elementos en columnas */
    padding: 0 50px; /* Padding lateral */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
    overflow: hidden; /* Evita que el contenido se desborde */
    margin-top: 4.1rem;
}

.texto-izquierda, .redes, .foto-perfil {
    flex: 1; /* Hace que todos los div ocupen el mismo espacio */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* TEXTO IZQUIERDA */
.texto-izquierda {
    /* border: 2px solid red; */
    font-size: 3rem;
    padding-left: 2rem;
    font-style: normal;
    color: #fff;
    font-family: "Courier Prime", monospace;;
}


.hola {
    font-size: 5.5rem; /* Convertido a rem, ajustando el tamaño según el diseño */
    font-weight: bold; /* Mantenido en negrita */
    letter-spacing: 0.2rem;
}

.soy-fernando,
.hernandez {
    font-weight: lighter;
}

.backend {
    font-size: 1.3rem;
    font-style: italic;
    font-weight: normal;
    letter-spacing: -0.05rem;
    word-spacing: -0.1rem;
    color: rgba(107, 122, 128, 0.8);
}

.backend span {
    display: block; /* Cambia el span a bloque para controlar el line-height */
    line-height: 1.2; /* Ajusta la altura de línea solo para este span */
}



/* BOTON CONTACTO */
.boton-contacto {
    background: transparent;
    color: white; /* Mantener el color del texto a blanco */
    font-family: "Courier Prime", monospace; /* Cambiar la fuente */
    font-weight: 100; /* Cambiar el peso de la fuente */
    padding: 0.9375rem 1.875rem; /* Aumentar el padding para hacer el botón más grande */
    border-radius: 0.625rem; /* Aumentar el border-radius para mantener proporción con el tamaño del botón */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.308);
    transition: background-color 0.3s, color 0.3s; /* Transición suave para los cambios de color */
    z-index: 2; /* Asegurar que el texto esté encima del pseudo-elemento */
    text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.7); /* Agregar sombra al texto */
    font-size: 1.375rem;
    cursor: pointer;
    width: 11rem;
    margin-top: 3rem;
}

.boton-contacto::before {
    content: '';
    border-radius: 0.625rem; /* Ajustar el border-radius para el pseudo-elemento también */
    background: linear-gradient(320deg, rgba(116, 239, 239, 0.8), rgba(0, 255, 132, 1)); /* Ajuste de colores de fondo */
    opacity: 0.4; /* Reducir la opacidad para que el texto sea más visible */
    z-index: 1; /* Poner el pseudo-elemento detrás del texto */
    transition: background 3s, opacity 0.3s; /* Añadir transición para la opacidad */
}

.boton-contacto:hover::before {
    animation: rotate 1s;
    opacity: 0.8; /* Aumentar la opacidad al pasar el cursor para mayor efecto */
}

@keyframes rotate {
    0% {
        transform: rotateX(180deg); /* Cambio a rotación vertical */
    }

    100% {
        transform: rotateX(360deg); /* Cambio a rotación vertical */
    }
}


/* REDES */
.redes {
    /* border: 2px solid red; */
    /* align-items: center; */
    flex-direction: row;
    /* margin-bottom: 20px; */
    display: flex;
    gap: 10px; /* Espacio entre los iconos */
    align-items: flex-end;
}

.redes a {
    width: 50px; /* Ajusta el tamaño de cada enlace */
    height: 50px; /* Ajusta el tamaño de cada enlace */
    transition: 0.3s;
    text-decoration: none; /* Elimina cualquier subrayado */
    display: flex; /* Asegura que el contenido esté centrado dentro del enlace */
    justify-content: center;
    /* align-items: center; */
}

.redes a i {
    font-size: 1.5rem;
    color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.redes a:hover i {
    color: rgb(0, 255, 132);
    transform: rotate(15deg);
}


/* FOTO PERFIL */
.foto-perfil {
    align-items: center;
    /* border: 2px solid red; */
    display: flex;
    /* justify-content: right; */
    /* margin-right: 0.7rem; */
    /* margin-top: 3rem; */
}

.foto-perfil img {
    max-width: 75%;
    /* height: auto; */
    border: 1px solid rgb(0, 255, 132);
    box-shadow: -10px -10px 0 2px rgb(0, 255, 132);
}



/*SOBRE MI -----------------------------------------------------------------------------------------------------------------------------------------------------*/

#sobremi h4 {
    font-family: "Whisper", cursive;
    font-weight: 100;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    margin-left: -11.875rem;
    letter-spacing: 0.125rem;
    color: rgb(116, 239, 239);
    opacity: 0.1;
}

#sobremi h4 i {
    display: block;
    font-style: italic;
}

/* Tabulaciones */
.tab {
    padding-left: 1.875rem;
}

.tab2 {
    padding-left: 3.75rem;
}


/*sobre mi2*/
#sobremi {
    font-family: "Courier Prime", monospace;
    background-color: #1e2326;
    color: #fff;
    padding: 3.125rem 1.25rem;
}

.contenido-seccion {
    max-width: 68.75rem;
    margin: auto;
}

#sobremi h2 {
    font-size: 3rem;
    font-family: "Courier Prime", monospace;
    font-weight: 100;
    text-align: left;
    margin-left: -2.5rem;
    padding: 1.25rem 2.5rem;
}

.public-void {
    font-family: "Whisper", cursive;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    margin-left: -8.4375rem;
    letter-spacing: 0.125rem;
}

.sobre_mi {
    color: rgb(255, 255, 255);
    font-style: normal;
    line-height: 1;
}

.try {
    display: block;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-family: "Whisper", cursive;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    margin-left: -7.5rem;
    letter-spacing: 0.125rem;
}

.code-line {
    line-height: 0.9;
}

.sout1 {
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-family: "Whisper", cursive;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    margin-left: -5.625rem;
    letter-spacing: 0.125rem;
}

.contenido-seccion p {
    font-size: 1.0625rem;
    line-height: 1.375rem;
    margin-bottom: 2.25rem;
    margin-left: 1.25rem;
    padding: 0;
    line-height: 1.7;
}

.catch {
    display: block;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-family: "Whisper", cursive;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    letter-spacing: 0.125rem;
    margin-left: -5rem; /* Alineado a la izquierda */
}

.llave1, .llave2 {
    display: block;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-family: "Whisper", cursive;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    letter-spacing: 0.125rem;
    margin-left: -5.5rem; /* Alineado a la izquierda */
}

.sout2 {
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-family: "Whisper", cursive;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    letter-spacing: 0.125rem;
    margin-left: 0; /* Alineado a la izquierda */
}

.llave3 {
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-family: "Whisper", cursive;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    letter-spacing: 0.125rem;
    margin-left: -10rem; /* Alineado a la izquierda */
}




/*logos intereses*/
.intereses {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intereses h3 {
    margin-top: 2.125rem;
    margin-bottom: 2.5rem;
    font-size: 1.75rem;
    font-family: "Courier Prime", monospace;
    font-weight: 100;
    
}

.contenedor-intereses {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no caben en una sola fila */
    gap: 2.25rem; /* Espacio entre los contenedores */
}

.interes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.25rem;
    height: 8.75rem;
    border-radius: 0.625rem;
    background-color: #252A2E;
    transition: .3s;
    margin-bottom: 3.125rem;
}

.interes:hover {
    background-color: hwb(151 0% 0%); /* Cambia el color de fondo al pasar el ratón por encima */
}

.imagen-musica, .earth-americas, .square-code, .gym, .book-alt, .mountain {
    width: 3.75rem;
    height: 3.75rem;
    background-size: cover;
    background-position: center; /* Asegura que la imagen esté centrada */
    border-radius: 0.625rem;
    margin: 0; /* Elimina el margen para centrar la imagen */
    transition: transform 0.3s ease, filter 0.3s ease; /* Añade transición suave */
    filter: brightness(100%);
}


.imagen-musica:hover, .earth-americas:hover, .square-code:hover, .gym:hover, .book-alt:hover, .mountain:hover {
    filter: brightness(100%) saturate(200%); /* Aumenta la saturación al pasar el cursor para resaltar los colores */
    transform: scale(1.1); /* Escala la imagen ligeramente */
}

.interes span {
    color: white; /* Color de texto predeterminado */
    transition: color 0.3s ease; /* Agregar una transición para el cambio de color */
}

.interes:hover span {
    color: black; /* Cambiar el color del texto a negro al pasar el ratón por encima */
}

.imagen-musica {
    background-image: url('Fotos_portfolio/music-alt.png');
}

.earth-americas {
    background-image: url('Fotos_portfolio/earth-americas.png');
}

.square-code {
    background-image: url('Fotos_portfolio/square-code.png');
}

.gym {
    background-image: url('Fotos_portfolio/gym.png');
}

.book-alt {
    background-image: url('Fotos_portfolio/book-alt.png');
}

.mountain {
    background-image: url('Fotos_portfolio/mountain.png');
}

.interes span {
    margin-top: 1.5625rem; /* Ajusta este valor según el espacio que necesites */
    color: #fff; /* Añadido para asegurar que el texto sea visible */
    font-size: 1rem; /* Puedes ajustar el tamaño de la fuente según tus necesidades */
}


/*Boton curriculum*/
button {
    position: relative; /* Añadir posición relativa para que el ::before se posicione correctamente */
    background: transparent;
    color: white; /* Mantener el color del texto a blanco */
    font-family: "Courier Prime", monospace; /* Cambiar la fuente */
    font-weight: 100; /* Cambiar el peso de la fuente */
    font-size: 1rem; /* Reducir el tamaño de la fuente */
    text-transform: uppercase;
    border: none;
    padding: 0.625rem 1.25rem; /* Reducir el padding para hacer el botón más pequeño */
    perspective: 30rem;
    border-radius: 0.3125rem;
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.308);
    display: block;
    margin: 0.625rem auto; /* Añadir margen superior para bajar el botón y centrarlo horizontalmente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave para los cambios de color */
    z-index: 2; /* Asegurar que el texto esté encima del pseudo-elemento */
    text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.7); /* Agregar sombra al texto */
    cursor: pointer;
}

button::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0.625rem;
    background: linear-gradient(320deg, rgba(116, 239, 239, 0.8), rgba(0, 255, 132, 1)); /* Ajuste de colores de fondo */
    opacity: 0.4; /* Reducir la opacidad para que el texto sea más visible */
    z-index: 1; /* Poner el pseudo-elemento detrás del texto */
    transition: background 3s, opacity 0.3s; /* Añadir transición para la opacidad */
}

button:hover::before {
    animation: rotate 1s;
    transition: all 0.5s;
    opacity: 0.8; /* Aumentar la opacidad al pasar el cursor para mayor efecto */
}

@keyframes rotate {
    0% {
        transform: rotateX(180deg); /* Cambio a rotación vertical */
    }

    100% {
        transform: rotateX(360deg); /* Cambio a rotación vertical */
    }
}

button:hover {
    color: yellow; /* Cambia el color del texto a amarillo al pasar el cursor sobre el botón */
    background-color: rgba(0, 0, 0, 0.5); /* Cambia el color de fondo del botón a un color oscuro semi-transparente */
}


/* SECCION SKILLS ------------------------------------------------------------------------------------------------------------------------------------------------*/

.skills {
    background-color: #252A2E;
    font-family: "Courier Prime", monospace; /* Aplicada globalmente */
    font-weight: 100; /* Aplicada globalmente */
    color: #fff;
    padding: 1.25rem 2.5rem;
}

.skills .contenido-seccion {
    max-width: 68.75rem;
    margin: auto;
}

.public-void2 {
    font-family: "Whisper", cursive;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left; /* Potencialmente redundante */
    margin-left: -11.125rem;
    letter-spacing: 0.125rem;
}

.skills-titulo {
    font-size: 3rem;
    margin-left: 1rem;
    text-align: left; /* Potencialmente redundante */
}

.fila {
    display: flex;
    justify-content: space-between;
    gap: 9rem; /* Ajusta el espacio entre columnas */
    margin-top: 1.25rem;
    font-size: 1.1875rem;
    /* Las propiedades `font-family`, `font-weight`, y `text-align` son heredadas */
}

.col-1,
.col-2 {
    width: 48%; /* Ajustado para acomodar el gap */
    margin-bottom: 5rem;
}

.col-1 h3,
.col-2 h3 {
    font-size: 1.75rem;
    margin-left: 4rem;
    margin-bottom: 4rem;
    font-weight: 100;
}

.skill span {
    display: block;
    margin-bottom: 0.625rem;
    margin-top: 1.875rem;
    font-size: 1.125rem;
}

.barra-skill {
    height: 0.7rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    border-radius: 0.3125rem;
    overflow: hidden;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
    margin-bottom: 1.875rem;
}

.progreso {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        rgb(0, 255, 132),
        rgb(0, 255, 132) 0.625rem,
        transparent 0.625rem,
        transparent 0.9375rem
    );
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.625rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 0 0.625rem rgba(0, 255, 132, 0.5);
}



/* Estas clases se agregaran dinamicamente mediante javascript */
.preocupacion {
    width: 0%;
    animation: 2s preocupacion forwards;
}

@keyframes preocupacion {
    0% {width: 0%;}
    100% {width: 90%;}
}

.trabajo {
    width: 0%;
    animation: 2s trabajo forwards;
}
@keyframes trabajo {
    0% { width: 0%;}
    100% { width: 70%; }
}

.autoconfianza {
    width: 0%;
    animation: 2s autoconfianza forwards;
}
@keyframes autoconfianza {
    0% { width: 0%; }
    100% { width: 80%;}
}

.flexibilidad {
    width: 0%;
    animation: 2s flexibilidad forwards;
}
@keyframes flexibilidad {
    0% { width: 0%;}
    100% { width: 85%;}
}

.cliente {
    width: 0%;
    animation: 2s cliente forwards;
}
@keyframes cliente {
    0% { width: 0%; }
    100% { width: 75%;  }
}

.iniciativa {
    width: 0%;
    animation: 2s iniciativa forwards;
}
@keyframes iniciativa {
    0% { width: 0%;  }
    100% { width: 75%;}
}

.planificacion {
    width: 0%;
    animation: 2s planificacion forwards;
}
@keyframes planificacion {
    0% { width: 0%; }
    100% { width: 85%; }
}

/*Technical Skills*/
 .Java {
    width: 0%;
    animation: 2s Java forwards;
}
@keyframes Java {
    0% { width: 0%; }
    100% { width: 50%; }
}

.Python {
    width: 0%;
    animation: 2s Python forwards;
}
@keyframes Python {
    0% { width: 0%;  }
    100% { width: 40%;  }
}

.HTML5 {
    width: 0%;
    animation: 2s HTML5 forwards;
}
@keyframes HTML5 {
    0% { width: 0%; }
    100% { width: 75%; }
}

.CSS3 {
    width: 0%;
    animation: 2s CSS3 forwards;
}
@keyframes CSS3 {
    0% { width: 0%;}
    100% { width: 75%; }
}

.JavaScript {
    width: 0%;
    animation: 2s JavaScript forwards;
}
@keyframes JavaScript {
    0% { width: 0%;}
    100% { width: 50%; }
}

.MySQL {
    width: 0%;
    animation: 2s MySQL forwards;
}
@keyframes MySQL {
    0% { width: 0%; }
    100% { width: 30%;  }
}


.WordPress {
    width: 0%;
    animation: 2s WordPress forwards;
}
@keyframes WordPress {
    0% { width: 0%;  }
    100% { width: 50%;  }
}


/* SECCION PORTFOLIO ----------------------------------------------------------------------------------------------------------------------------*/
#portfolio {
    background-color: #1e2326;
    font-family: "Courier Prime", monospace; /* Cambiar la fuente */
    font-weight: 100; /* Cambiar el peso de la fuente */
    color: #fff;
    font-size: 3rem;
    font-weight: 100;
    text-align: left;
    padding: 1.25rem 0;
}

.titulo-portfolio {
    margin-top: 1rem;
    margin-left: 13rem;
}

.public-void3 {
    font-family: "Whisper", cursive;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem;
    text-align: left;
    margin-left: -8.4375rem;
    letter-spacing: 0.125rem;
}

.page-content {
    display: grid;
    grid-gap: 5rem;
    padding: 1rem;
    max-width: 64rem;
    margin: 2.5rem auto;
    font-family: "Courier Prime", monospace;
    place-items: center;
    grid-template-columns: repeat(4, 1fr);
}

h2.title {
    font-size: 1.4375rem;
    font-family: "Courier Prime", monospace;
    font-weight: 100;
    text-align: center;
    margin-left: 0.9375rem;
    padding: 1.25rem 0;
}


:root {
    --d: 500ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.card {
    position: relative;
    margin-left: 12.5rem;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 1rem;
    width: 110%;
    max-width: 25rem;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: whitesmoke;
    height: 21.875rem;
    transition: box-shadow 0.3s; /* Transición para la sombra */
    z-index: 0; /* Asegura que la card esté detrás del ::before y ::after */
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105%; /* Ajustar a la altura de la card */
    background-size: cover;
    background-position: center;
    transition: transform calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
    z-index: 1; /* Asegura que la imagen esté encima del gradient */
}

.card::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%; /* Iniciar desde abajo */
    left: 0;
    width: 100%;
    height: 100%; /* Ajustar a la altura de la card */
    pointer-events: none;
    background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.1) 0%,     /* Más oscuro al principio */
    rgba(0, 0, 0, 0.15) 11.7%, /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.2) 22.1%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.3) 31.2%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.4) 39.4%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.5) 46.6%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.6) 53.1%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.7) 58.9%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.8) 64.3%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.85) 69.3%, /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.9) 74.1%,  /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.92) 78.8%, /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.93) 83.6%, /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.94) 88.7%, /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.95) 94.1%, /* Ajuste para hacerlo más oscuro */
    rgba(0, 0, 0, 0.96) 100%  /* Ajuste para hacerlo más oscuro */
    );
    transform: translateY(0); /* Iniciar desde arriba */
    transition: transform calc(var(--d) * 2) var(--e);
    z-index: 2; /* Asegura que el gradient esté encima de la imagen */
}

.card:hover::after {
    transform: translateY(-100%);
}


.card:hover .content {
    display: flex; /* Muestra el contenido cuando se pasa el cursor */
    opacity: 1; /* Hace que el contenido sea visible */
}

.card:nth-child(1):before {
    background-image: url('Fotos_portfolio/calcu.png');
}

.card:nth-child(2):before {
    background-image: url('Fotos_portfolio/Space_invaders.jpg');
}

.card:nth-child(3):before {
    background-image: url('Fotos_portfolio/montañas.jpg');
}

.content {
    display: none; /* Oculta el contenido por defecto */
    opacity: 0; /* Inicialmente transparente */
    transition: opacity 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    transition: transform var(--d) var(--e);
    z-index: 3;
}

.title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
}

.copy {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-style: normal;
    line-height: 1.35;
    margin-bottom: 1.5rem; /* Ajusta el margen inferior */
}

.btn {
    cursor: pointer;
    margin-top: 1.5rem; /* Ajusta el margen superior */
    margin-bottom: 1.5rem; /* Ajusta el margen inferior */
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: normal;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: white;
}


/* SECCION CONTACTO ----------------------------------------------------------------------------------------------------------------------------------*/
.contacto {
    background-color: #252A2E;
    color: #fff; /* Texto en blanco */
    padding: 3.125rem 1.25rem; /* Convertido a rem */
}

.contenido-seccion {
    max-width: 68.75rem; /* Convertido a rem */
    margin: auto; /* Mantenido en píxeles */
}

.public-void4 {
    font-family: "Whisper", cursive;
    color: rgb(116, 239, 239);
    opacity: 0.1;
    font-weight: 100;
    font-style: normal;
    line-height: 1;
    font-size: 2rem; /* Convertido a rem */
    text-align: left;
    margin-left: -8.4375rem; /* Ajustado a píxeles */
    letter-spacing: 0.125rem; /* Convertido a rem */
}

.contacto-funcion {
    font-size: 3rem; /* Convertido a rem */
    font-family: "Courier Prime", monospace;
    font-weight: 100;
    text-align: left;
    margin-left: 2rem;
}

.fila {
    display: flex;
}

.col {
    width: 100%; /* Ancho completo del contenedor */
    padding: 1em; /* Espaciado interno con unidades relativas */
    position: relative; /* Posición relativa para alinear elementos hijos */
    display: flex; /* Flexbox para distribuir elementos hijos en una fila */
    flex-wrap: wrap; /* Envolver elementos hijos si no caben en una línea */
}

.nombre {
    width: calc(50% - 0.6875em); /* 50% del ancho del contenedor padre con un pequeño espacio entre los campos en em */
    margin-right: 0.625em; /* Espacio entre los campos en em */
}

.mail {
    width: calc(50% - 0.6875em); /* 50% del ancho del contenedor padre con un pequeño espacio entre los campos en em */
    margin-left: 0.625em; /* Espacio entre los campos en em */
}

.otros-campos {
    width: 100%; /* Ocupa todo el ancho disponible */
}

.col textarea {
    width: 100%;
    padding: 1.125rem; /* Equivalente a 18px */
    border: none;
    margin-bottom: 1.25rem; /* Equivalente a 20px */
    background-color: rgb(0, 255, 132);
    color: #000000; /* Texto en blanco */
    font-size: 1.125rem; /* 18px */
}

.boton-contacto {
    display: inline-block;
    background: transparent;
    color: white; /* Mantener el color del texto en blanco */
    font-family: "Courier Prime", monospace; /* Fuente */
    font-weight: 100; /* Peso de la fuente */
    text-transform: uppercase; /* Texto en mayúsculas */
    border: none; /* Sin borde */
    padding: 0.9375rem 2.1875rem; /* Padding del botón */
    border-radius: 0.625rem; /* Radio del borde */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.308); /* Sombra del botón */
    text-align: center; /* Centrar el texto */
    transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Transiciones suaves */
    font-size: 1.375rem; /* Tamaño de la fuente */
    position: relative; /* Cambiar a relative para permitir el posicionamiento del pseudo-elemento */
}

.boton-contacto a {
    text-decoration: none; /* Sin subrayado */
    color: inherit; /* Heredar el color del botón */
    font-size: inherit; /* Heredar el tamaño de fuente del botón */
}

.boton-contacto::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0.625rem; /* Ajustar el border-radius */
    background: linear-gradient(320deg, rgba(116, 239, 239, 0.8), rgba(0, 255, 132, 1)); /* Gradiente de fondo */
    opacity: 0.4; /* Opacidad */
    z-index: 1; /* Poner el pseudo-elemento detrás del texto */
    transition: background 3s, opacity 0.3s; /* Transiciones */
}

.boton-contacto:hover::before {
    opacity: 0.8; /* Aumentar la opacidad al pasar el cursor */
}


@keyframes rotate {
    0% {
        transform: rotateX(180deg); /* Rotación inicial */
    }
    100% {
        transform: rotateX(360deg); /* Rotación final */
    }
}


/*FOOTER --------------------------------------------------------------------------------------------------------------------------------------*/
footer {
    background-color: #1e2326;
    color: #fff;
    padding: 3.125rem 0 1.875rem 0; /* Equivalente a 50px 0 30px 0 */
    text-align: center;
    position: relative;
    width: 100%;
}

.arriba {
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    background-color: #1CB698;
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1.5625rem; /* -25px */
    border-radius: 50%;
    line-height: 3.125rem; /* 50px */
    font-size: 1.125rem; /* 18px */
}

.arriba:hover .icono-flecha {
    transform: translateY(-0.3125rem);
}


.icono-flecha {
    display: inline-block;
    transition: transform 0.3s ease; /* Agregar una transición suave */
}


.redes-footer {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    margin-top: 1.25rem; /* 20px */
    gap: 20px;
}

.icono {
    display: inline-block;
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    line-height: 3.125rem; /* 50px */
    text-align: center; /* Centrar el icono dentro del enlace */
}

.icono i {
    font-size: 1.5rem; /* 24px */
    color: #fff;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.icono:hover i {
    color: rgb(0, 255, 132);
    transform: rotate(15deg); /* Añadimos la rotación de 15 grados */
}

.copyright{
    font-family: "Courier Prime", monospace;
    font-weight: 100;
    margin-top: 2rem;
}



/* RESPONSIVE (MENU ENCABEZADO)#################################################################################################################################*/
@media (max-width: 1024px){
    header {
        padding: 0;
    }

    header nav ul {
        margin-right: 30px;
    }
    
    .logo img {
        margin-left: 3rem;
        width: 2.8rem;
    }
    
    header nav ul li a {
        font-size: 1rem; 
    }

    /* BANNER */
    #banner{
        height: 31rem;
    }
    
    .texto-izquierda{
        flex: 2;
        font-size: 2rem;
        padding: 0;
    }
    .hola {
        font-size: 3.8rem;
    }

    .backend {
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .redes {
        flex: 1;
        padding-right: 1rem;
        flex-direction: column;
        justify-content: center; /* Centra horizontalmente */
        position: relative; /* Para manejar el desplazamiento */
    }
    
    .foto-perfil{
        flex: 2;
    }
    
    .foto-perfil img {
        max-width: 75%;
        box-shadow: -5px -5px 0 0.1px rgb(0, 255, 132);
    }

    /*SOBRE MI*/
    #sobremi h4 {
        font-size: 1.5rem;
        margin-left:1rem;
    }

    .public-void {
        font-size: 1.5rem;
        margin-left: 1rem;
    }
    
    .sobre_mi {
        font-size: 2rem;
        margin-left: -1rem;
    }

    .try {
        font-size: 1.5rem;
        margin-left: 2rem;
    }

    .code-line {
        line-height: 0.6;
    }
    
    .sout1 {
        font-size: 1.5rem;
        margin-left: 2.5rem;
    }

    .contenido-seccion p {
        font-size: 1rem;
        margin-left: 2.3rem;
        margin-right: 2rem;
    }

    .catch {
        font-size: 1.5rem;
        margin-left: 2rem;
    }
    
    .llave1, .llave2 {
        font-size: 1.5rem;
        margin-left: 2rem; /* Alineado a la izquierda */
    }
    
    .sout2 {
        font-size: 1.5rem;
        margin-left: 5rem;
    }
    
    .llave3 {
        font-size: 1.5rem;
        margin-left: 0.5rem;
    }

    /* SKILLS */
    .public-void2 {
        font-size: 1.5rem;
        margin-left: -2.5rem;
    }

    .skills-titulo {
        font-size: 2rem;
        margin-left: 0rem;
    }

    .col-1 h3,
    .col-2 h3 {
        margin-left: 0rem;
    }

    .col-2 .skill {
        margin-bottom: 2.10rem; /* Puedes ajustar este valor según necesites */
    }

    .barra-skill {
        height: 0.6rem;
    }


    /* PORTFOLIO */
    #portfolio {
        height: auto;
        min-height: 100vh; /* Asegura que el contenedor ocupe al menos la altura de la ventana */
        padding-bottom: 2rem; /* Añade un poco de espacio al final */
        overflow: visible; /* Asegura que todo el contenido sea visible */
    }

    .titulo-portfolio {
        margin-top: 1rem;
        margin-left: 11rem;
    }

    .public-void3 {
        font-size: 1.5rem;

    }

    .portfolio{
        font-size: 2rem;
        margin-left: -1rem;
    }

    .page-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem; /* Espaciado entre las tarjetas */
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
        max-width: 35rem; /* Limita el ancho máximo para centrar las tarjetas */
        margin: 0 auto; /* Centra el grid en la página */
    }
    
    .card {
        width: 100%; /* Ocupa todo el ancho disponible en la celda del grid */
        margin-left: 0rem;
        padding: 0;
        height: 20rem;
    }


    h2.title {
        font-size: 1rem; /* Ajusta el tamaño del texto de los títulos */
    }

    .copy {
        font-size: 0.875rem; /* Reduce el tamaño del texto en la descripción */
    }

    .btn {
        font-size: 0.75rem; /* Reduce el tamaño del botón */
        padding: 0.5rem 1rem; /* Ajusta el padding del botón */
    }

    /* CONTACTO */
    .public-void4 {
        font-size: 1.5rem; /* Convertido a rem */
        margin-left: 1.5rem; /* Ajustado a píxeles */
        
    }

    .contacto-funcion {
        font-size: 2rem;
        margin-left: 1rem;
    }
}

@media (max-width: 768px){
    /* HEADER */
    header {
        padding: 0;
    }


    .mostrar-menu,
    .esconder-menu{
        margin-right: 3.5rem;
        display: block;
        cursor: pointer;
    }

    .nav{
        position: fixed;
        width: 30%;
        height: 30rem;
        background: rgb(9, 36, 36);
        right: -100%;
        top: 0;
        text-align: center;
        padding: 100px 0px;
        z-index: 100;
        transition: 0.8s;
    }

    .nav ul {
        display: flex;
        flex-direction: column; /* Esto alinea los enlaces en una columna */
        align-items: center; /* Centra los enlaces horizontalmente */
        justify-content: center; /* Centra los enlaces verticalmente */
        height: 100%;
        list-style: none; /* Elimina los puntos de la lista */
        padding: 0;
        margin: 0;
    }

    .nav ul li {
        margin: 4px 0; /* Espacio entre los elementos de la lista */
    }

    .nav ul li a {
        display: block;
        padding: 20px;
        width: 100%; /* Ocupa todo el ancho disponible */
        text-align: center; /* Centra el texto del enlace */
        font-size: 1.5rem; /* Aumenta el tamaño de la fuente para mejor legibilidad */
    }

    .esconder-menu {
        position: absolute;
        bottom: 10px; /* Posiciona la 'X' en la parte inferior */
        left: 50%;
        align-items: center;
        font-size: 2rem; /* Ajusta el tamaño de la 'X' */
        display: none; /* Inicialmente oculta */
    }

    #check:checked ~ .nav{
        right: 0;
    }
    
    #check:checked ~ .nav .esconder-menu {
        display: block; /* Muestra la 'X' cuando el menú está abierto */
    }

    #check:checked ~ .mostrar-menu {
        display: none; /* Oculta el ícono de menú cuando el menú está abierto */
    }

/* BANNER */
    #banner{
        height: 27rem;
    }
    .texto-izquierda{
        flex: 2;
        font-size: 1.5rem;
        padding: 0;
    }
    .hola {
        font-size: 3.8rem;
    }

    .backend {
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .boton-contacto {
        padding: 0.7rem 0rem;
        font-size: 1rem;
        width: 9rem;
        margin-top: 3rem;
    }
    
    .redes {
        flex: 1;
        padding-right: 1rem;
        flex-direction: column;
        justify-content: center; /* Centra horizontalmente */
        position: relative; /* Para manejar el desplazamiento */
    }
    
    .foto-perfil{
        flex: 2;
    }
    
    .foto-perfil img {
        max-width: 100%;
        box-shadow: -5px -5px 0 0.1px rgb(0, 255, 132);
    }

/* SOBRE MI */
    

    .intereses h3 {
        font-size: 1.2rem;   
    }

    .contenedor-intereses {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 4rem;
    }

    .interes {
        margin-bottom: 0rem;
    }

/* SKILLS */
    

    .fila {
        gap: 5rem; /* Ajusta el espacio entre columnas */
        margin-top: 1.25rem;
        font-size: 1.1875rem;
        /* Las propiedades `font-family`, `font-weight`, y `text-align` son heredadas */
    }

    .col-1,
    .col-2 {
        width: 48%; /* Ajustado para acomodar el gap */
        margin-bottom: 2rem;
}

    .col-1 h3,
    .col-2 h3 {
        font-size: 1.2rem;
    }
 
    .col-2 .skill {
        margin-bottom: 2.27rem; /* Puedes ajustar este valor según necesites */
    }

    .skill span {
        font-size: 1rem;
    }
    
    .barra-skill {
        height: 0.4rem;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        position: relative;
        border-radius: 0.3125rem;
        overflow: hidden;
        box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
        margin-bottom: 1.875rem;
    }



/* CONTACTO */
    .public-void4 {
        font-size: 1.5rem; /* Convertido a rem */
        margin-left: 1.5rem; /* Ajustado a píxeles */
        
    }

    .contacto-funcion {
        font-size: 2rem;
        margin-left: 1rem;
    }
}


@media (max-width: 426px) {
    /* HEADER */
    .logo img {
        margin-left: 2rem;
    }

    .mostrar-menu,
    .esconder-menu{
        margin-right: 2rem;
    }

    .esconder-menu {
        position: absolute;
        bottom: 10px; /* Posiciona la 'X' en la parte inferior */
        font-size: 2rem; /* Ajusta el tamaño de la 'X' */
        display: none; /* Inicialmente oculta */
        transform: translateX(-50%);
    }

    .nav{
        width: 60%;
        height: 24rem;
    }

    .nav ul li {
        margin: 2px 0; /* Espacio entre los elementos de la lista */
        width: 100%;
    }

    .nav ul li a {
        margin: 1rem 0rem;
        padding: 0 10px;
        font-size: 1rem; /* Aumenta el tamaño de la fuente para mejor legibilidad */
    }

    /* BANNER */
    #banner {
        display: grid;
        grid-template-columns: 2fr 1fr; /* La primera columna es el doble de ancha que la segunda */
        grid-template-rows: auto auto; /* Dos filas ajustables */
        gap: 1rem; /* Espacio entre columnas y filas */
        padding: 1rem; /* Añade padding al contenedor */
        height: auto; /* Ajustar la altura para que se adapte al contenido */
    }

    .texto-izquierda {
        grid-column: 1 / 2; /* Ocupa la primera columna */
        grid-row: 1; /* En la primera fila */
        text-align: left; /* Centra el texto dentro del contenedor */
        padding-right: 0;
        padding-left: 1rem;
    }

    .hola {
        font-size: 2.5rem; /* Ajusta el tamaño del texto */
    }

    .backend {
        margin-top: 0.5rem;
        font-size: 0.9rem;
    }

    .boton-contacto {
        padding: 0.5rem;
        font-size: 0.9rem;
        width: 8rem;
        margin-top: 1rem;
    }

    .redes {
        grid-column: 2 / 3; /* Ocupa la segunda columna */
        grid-row: 1; /* En la primera fila */
        padding-right: 0;
        display: grid;
    }

    .redes a {
        margin: 0 0.5rem; /* Espacio entre los íconos de redes */
        font-size: 1.5rem; /* Ajusta el tamaño de los íconos */
        justify-content: center; /* Centra las redes horizontalmente */
        align-items: center; /* Centra las redes verticalmente */
    }

    .foto-perfil {
        grid-column: 1 / 3; /* Ocupa ambas columnas */
        grid-row: 2; /* En la segunda fila */
        display: flex;
        justify-content: center; /* Centra la imagen horizontalmente */
        margin-top: 1rem; /* Espacio superior para separar la imagen del resto */
    }

    .foto-perfil img {
        max-width: 90%; /* Mantiene el tamaño de la imagen dentro del contenedor */
        height: auto; /* Mantiene las proporciones de la imagen */
        box-shadow: -5px -5px 0 0.1px rgb(0, 255, 132);
    }

    /* SOBRE MI */
    .sobre_mi {
        font-size: 1.9rem;
    }  

    /* SKILLS */
    .fila {
        display: grid;
        grid-template-rows: auto auto; /* Dos filas automáticas que se ajustan al contenido */
        grid-template-columns: 1fr; /* Una columna que ocupa todo el ancho disponible */
        gap: 1rem; /* Espacio entre filas */
    }

    .col-1 {
        grid-row: 1; /* Ocupa la primera fila */
    }

    .col-2 {
        grid-row: 2; /* Ocupa la segunda fila */
    }

    /* Opcional: Asegúrate de que el texto en las columnas ocupe todo el ancho disponible */
    .col-1, .col-2 {
        width: 100%; /* Asegura que las columnas ocupen todo el ancho del contenedor */
    }

    .col-1 h3,
    .col-2 h3 {
        margin-bottom: 1rem;
    }

    /* PORTFOLIO */
    .page-content{
        grid-template-columns: 1fr;
    }

    .card {
        width: 60%; /* Ocupa todo el ancho disponible en la celda del grid */
    }
}