body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

* {

    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

/*header{
    height: 65px;
    background-color: #012847;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 25px;
}*/

header {
    display: flex;
    justify-content: flex-start; /* Alinea los elementos al inicio */
    /*justify-content: space-between; /* Distribuye el espacio entre el botón y el título */
    align-items: center; /* Alinea verticalmente el botón y el título */
    padding: 0 1rem; /* Agrega espacio horizontal interno */
    background-color: #012847; /* Opcional: color de fondo */
    background-size: cover;
    color: white;
    height: 65px; /* Define una altura fija para el header */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega sombra para separación visual */
    width: 100%;
    /*overflow: hidden;*/
}

header h3 {
    font-size: 1rem; /* Ajusta el tamaño de fuente del título si es necesario */
    margin: 0 0 0 1rem; /* Agrega margen izquierdo entre el título y el botón */
    text-align: center; /* Centra el texto del título */
    /*flex: 1;  Opcional: permite que el título ocupe espacio restante */
}

/*button {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    background: transparent;
    gap: 0.65rem;
    cursor: pointer; /* Cambia el cursor al pasar por el botón 
}

button > div{
    background: white;
    height: 2px;
    width: 100%;
    border-radius: 5px;
    transition: all .5s;
    transform-origin: left;
}

button:hover div:first-child{
    transform: rotate(45deg);
}

button:hover div:nth-child(2){
    opacity: 0;
}

button:hover div:last-child{
    transform: rotate(-45deg);
}

.menu-container {
    display: flex;
    align-items: center; /* Alinea verticalmente el botón y el nombre 
    gap: 1rem; /* Espaciado entre el botón y el título 
    position: relative;  /* Posiciona el contenedor de manera relativa 
}

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

/* Mostrar menú al pasar el mouse sobre el contenedor 
.menu-container:hover nav {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

/* Menú desplegable 
nav {
    position: absolute;
    top: 65px; /* Justo debajo del header 
    left: 0; /* Ajusta la posición del menú respecto al botón 
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 200px;
    overflow: hidden;
    visibility: hidden; /* Oculto por defecto 
    opacity: 0; /* Oculto por defecto 
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

/* Mostrar menú al pasar el mouse sobre el botón 
button:hover + h3 + nav {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

/* Lista del menú 
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid #ddd;
}

nav ul li:last-child {
    border-bottom: none;
}

nav ul li a {
    display: block;
    text-decoration: none;
    color: #012847;
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
}

nav ul li a:hover {
    background-color: #012847;
    color: white;
}*/

/* Ocultar el checkbox */
#menu-toggle {
    display: none;
}

/* Botón de menú */
.menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    background: transparent;
    gap: 0.65rem;
    cursor: pointer;
    padding-top: 5%;
    padding-left: 5%;
}

.menu-button > div {
    background: white;
    height: 2px;
    width: 100%;
    border-radius: 5px;
    transition: all 0.5s;
    transform-origin: left;
}

/* Estado activo del botón */
#menu-toggle:checked + .menu-button > div:first-child {
    transform: rotate(45deg);
}

#menu-toggle:checked + .menu-button > div:nth-child(2) {
    opacity: 0;
}

#menu-toggle:checked + .menu-button > div:last-child {
    transform: rotate(-45deg);
}

/* Contenedor del menú */
.menu-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding-left: 20px;
    padding-right: 5px;
}

/* Panel del menú 
.menu-panel {
    position: fixed; /*Cambiado a fixed para que ocupe toda la pantalla 
    top: 65px;
    left: 0;
    width: 100%;  Ancho completo 
    height: calc(100vh - 65px);  Altura completa de la pantalla menos el header 
    background-color: #012847;  Opcional: color de fondo 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);  Oculto por defecto, fuera de la vista 
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    display: flex; /* Flex para centrar los elementos 
    align-items: center; /* Centrar verticalmente 
    justify-content: center; /* Centrar horizontalmente 
    z-index: 1000; /* Asegura que el panel esté sobre otros elementos 
}*/

/* Panel del menú */
.menu-panel {
    position: absolute; /* Cambiado a absolute para que se ajuste al contenedor */
    top: 65px;
    left: 0;
    width: 100%; /* Ancho completo */
    height: 680px; /* Altura fija para limitar el menú */
    background-color: #012847; /* Opcional: color de fondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%); /* Oculto por defecto, fuera de la vista */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    /*overflow-y: auto;  Añadido para permitir desplazamiento si los ítems exceden la altura */
    display: flex; /* Flex para alinear contenido */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    z-index: 1000; /* Asegura que el panel esté sobre otros elementos */
}

/* Mostrar el menú cuando el checkbox está activado */
#menu-toggle:checked ~ .menu-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Desplazar a la posición inicial */
}

/* Lista del menú */
.menu-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Alinear el texto a la izquierda */
}

/* Elementos del menú */
.menu-panel ul li {
    margin-bottom: 2px; /* Espaciado entre elementos */
}

.menu-panel ul li:last-child {
    border-bottom: none;
}

.menu-panel ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 50px;
    font-size: 1.0rem; /* Tamaño de fuente más grande */
    transition: background-color 0.3s, color 0.3s;
    border-radius: 8px; /* Bordes redondeados para mejor apariencia */
}


/* Cerrar menú al hacer clic en un ítem 
.menu-panel ul li a {
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}*/

/*.menu-panel ul li a:active + #menu-toggle {
    visibility: hidden;
    opacity: 0;
}*/

.cara {
    border-radius: 50%; /* Asegura que la imagen sea circular */
    height: 200px; /* Mantiene la altura */
    width: 200px; /* Asegura que el ancho sea proporcional */
    border: 5px solid white; /* Agrega un borde blanco de 5px */
}

.uno {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: calc(100vh - 65px);
    background-color: #5b5c6165;
    background-image: url("BackgroundImage.jpg"); /* Cambia "ruta-de-tu-imagen.jpg" por la ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra toda la sección */
    background-position: center; /* Centra la imagen en la sección */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    color: white;
    padding-top: 1%;
    padding-bottom: 20%;
    padding-left: 3%;
}

/*.caja-central{
    margin-top: 10%;
    margin-left: 26%;
    width: 50%;
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    overflow: hidden;
    height: 50%;
}*/

.caja-central {
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: auto; /* Ajustado para que se centre automáticamente */
    margin-right: auto; /* Ajustado para que se centre automáticamente */
    width: 90%; /* Aumenté el ancho para aprovechar más el espacio */
    max-width: 50%; /* El tamaño máximo sigue siendo del 50% en pantallas grandes */
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    overflow: hidden;
    height: auto; /* Mantiene la altura ajustada al contenido */
}

/* Asegura que la caja se ajuste bien en pantallas pequeñas 
@media (max-width: 768px) {
    .caja-central {
        margin-left: 5%; /* Reduce los márgenes en pantallas pequeñas 
        margin-right: 5%; /* Reduce los márgenes en pantallas pequeñas 
        width: 90%; /* Mantén el ancho grande en pantallas pequeñas 
        max-width: 90%; /* Permite que ocupe más espacio en pantallas pequeñas 
        height: auto; /* Ajusta la altura según el contenido 
    }

     #sobre-mi {
        padding-top: 70px;  Agrega más espacio en la parte superior de la sección "Sobre mí"
    }
}*/

@media (max-width: 768px) {
    .caja-central {
        margin-left: auto; /* Centra automáticamente */
        margin-right: auto; /* Centra automáticamente */
        margin-top: 5%; /* Añade un poco de espacio superior */
        margin-bottom: 5%; /* Añade espacio inferior */
        width: 95%; /* Aprovecha más espacio horizontal */
        max-width: none; /* Elimina la restricción máxima para pantallas pequeñas */
        height: auto; /* Asegúrate de que la altura se ajuste al contenido */
    }
}
@media (max-width: 768px) {
    #sobre-mi {
        padding-top: 100px; /* Incrementa el espacio en la parte superior */
    }
}



.caja-cara{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    background-color: #012847;
}
.caja-presentacion{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    background-color: #F2F2F2;
    color: #303030;
    padding: 10px;
}

/*.cuatro{
    background-color: #312828;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 10%;
    padding-top: 10%;
}*/

.cuatro {
    background-color: #312828;
    background-size: cover;
    min-height: 200px; /* Asegura un mínimo pero permite crecer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding: 10% 20%; /* Simplifica padding */
    box-sizing: border-box; /* Asegura que padding no sume al tamaño total */
    width: 100ww;
    overflow: hidden;
}


/*.dos{
    background-color: #312828;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding-left: 20%;
    padding-right: 20%;
}*/

.dos {
    background-color: #312828;
    background-size: cover;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding-left: 15%;
    padding-right: 20%;
    padding-top: 2%;
    padding-bottom: 10%;
    width: 100ww;
    overflow: hidden;
}

/*.dos {
    background-color: #312828; /* Mantiene el color de fondo específico 
    color: #ffffff;
    height: auto; /* Ajusta automáticamente la altura al contenido 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 20%; /* Espaciado interno superior e inferior 
}*/

/*section {
    margin-bottom: 3rem;  /*Espaciado uniforme entre secciones*
}*/


.aptitudes{
    width: 50%;
}

/*.tech-list{
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.tech{
    height: 90px;
}*/

/*.tech-list {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Espaciado entre las imágenes 
}

.tech-list img {
    width: 150px; 
    height: auto; 
    border: 2px solid #0589f5; 
    border-radius: 8px; 
    padding: 5px; 
    transition: transform 0.1s ease, border-color 0.1s ease; 
    filter: brightness(0.5); 
}*/

.tech-list {
    display: flex; /* Crea una fila horizontal */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias filas si es necesario */
    justify-content: center; /* Centra los elementos en el contenedor */
    gap: 1rem; /* Espaciado uniforme entre las imágenes */
}

.tech-list img {
    max-width: 150px; /* Ajusta el tamaño máximo de las imágenes */
    height: auto; /* Mantén la proporción original */
    border: 2px solid #0589f5; 
    border-radius: 8px; 
    padding: 5px; 
    transition: transform 0.1s ease, border-color 0.1s ease; 
    filter: brightness(0.5);
}


.tech-list img:hover {
    transform: scale(1.20); /* Aumenta ligeramente el tamaño al pasar el cursor */
    border: 2px solid #6f00ff; /* Cambia el color del borde a azul en hover */
    filter: brightness(1); /* Devuelve el brillo normal de la imagen */
    z-index: 1; /* Asegura que la imagen ampliada esté por encima de las demás */
}

.tres{
    background-color: #312828;
    background-size: cover;
    height: 600px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    width: 100ww;
    overflow: hidden;
}
.proyectos{
    width: 90%;
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espacio entre las cards */
}
.card {
    position: relative;
    text-align: center;
    width: 60%;
    border: solid #ffffff 1px;
    border-radius: 10px;
    padding: 10px;
    background-color: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}

.card a {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
    margin: 5px;
    pointer-events: none; /* Opcional: evita que se cliqueen mientras son invisibles */
}

.card:hover a {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Se activa el clic al aparecer */
}


/*.card{
    text-align: center;
    width: 60%;
    border: solid #ffffff 1px;
    border-radius: 10px;
    padding: 10px;
}*/
.card img{
    width: 100%;
    height: 200px; /* Puedes ajustar esta altura */
    object-fit: cover; /* También puedes usar "contain" si prefieres ver toda la imagen */
    border-radius: 5px;
}
.card a, footer a {
    color: rgb(255, 255, 255);
}

.cinco{
    background-color: #312828;
    background-size: cover;
    min-height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding-left: 15%;
    padding-right: 5%;
    width: 100ww;
   overflow: hidden;
}

.cinco h2 {
    padding-right: 20%;
}

/*.estudios {
    background-color: #2A2A2A;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
}*/

.estudios {
    padding: 20px 0; /* Reduce el espacio superior e inferior */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
    margin: 0 auto;
    margin-right: 17%;
    max-width: 1200px; /* Define un ancho máximo */
}

.estudios .titulo {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #000000;
}

/*.estudios .cursos {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Reduce el espacio entre las cards 
    justify-content: center;
    box-sizing: border-box;
}*/

.estudios .cursos {
    width: 100%; /* Usa todo el ancho disponible */
    max-width: 1200px; /* Ancho máximo para la estructura */
    margin: 0 auto; /* Centra el contenedor */
    display: flex;
    flex-wrap: wrap; /* Permite apilar las tarjetas si no caben */
    gap: 20px; /* Espacio entre las cards */
    justify-content: center; /* Centra las cards en la última fila */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */
}

.card-curso {
    flex: 0 1 calc(33.333% - 20px); /* Calcula el tamaño de las cards */
    box-sizing: border-box; /* Asegúrate de incluir padding y border en el cálculo */
    max-width: calc(33.333% - 20px); /* Limita el ancho máximo */
    min-width: 250px; /* Tamaño mínimo para mantener el diseño */
    text-align: center;
    border: solid #000000 1px;
    border-radius: 10px;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: transform 0.3s ease; /* Añade animación suave */
}

.card-curso :hover{
    transform: scale(1.10);
    z-index: 1;
    transition: transform 0.3s ease; /* Añade animación suave */
}


/*.card-curso {
    flex: 0 1 calc(30% - 20px); /* Reduce el ancho 
    max-width: calc(30% - 20px);
    min-width: 200px;
    min-height: 20px; /* Altura mínima para mayor consistencia 
    height: auto; /* Permite que crezca si es necesario 
    text-align: center;
    border: solid #000000 1px;
    border-radius: 10px;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Evita desbordamientos
}*/

.card-curso img {
    width: 100%;  
    height: auto;  
    object-fit: cover;  
    border-radius: 8px;   
}

.card-curso h3 {
    font-size: 1.2rem;
    margin: 10px 0;
}

.card-curso p {
    font-size: 0.9rem;
    color: #020000;
}

.card-curso a {
    color: #000000;
    text-decoration: underline;
    font-weight: bold;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 2px solid;
}

/* Estilo específico para el botón de enviar mail */
.btn-mail {
    background-color: #f32121; /* Azul */
    color: #ffffff; /* Blanco */
    background-color: #f32121; /* Azul */
}

/* Efecto hover del botón de enviar mail */
.btn-mail:hover {
    background-color: #f32121; /* Azul */
    background-color: #f32121; /* Azul */
}

/* Botón general */
.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 2px solid;
}

/* Estilo específico para el botón de descarga */
.btn-download {
    background-color: #4CAF50; /* Verde */
    color: #ffffff; /* Blanco */
    border-color: #4CAF50;
}

.btn-download:hover {
    background-color: #45a049; /* Verde oscuro en hover */
    border-color: #45a049;
}


/* Estilos generales para los botones */
a.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none; /* Elimina el subrayado */
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    color: #ffffff !important; /* Fuerza el color blanco */
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 2px solid;
}

/* Botón azul claro */
a.btn-light-blue {
    background-color: #00bfff;
    border-color: #00bfff;
}

a.btn-light-blue:hover {
    background-color: #009acd;
    border-color: #009acd;
}

/* Botón morado */
a.btn-purple {
    background-color: #800080;
    border-color: #800080;
}

a.btn-purple:hover {
    background-color: #660066;
    border-color: #660066;
}


.red-social {
    height: 60px;
    /*background-color: #ffffff;*/
    border-radius: 10px;
    /*margin: 0 10px;*/
}

.red-social:hover{
    transform: scale(1.20); /* Aumenta ligeramente el tamaño al pasar el cursor */
    border: 2px solid #6f00ff; /* Cambia el color del borde a azul en hover */
    filter: brightness(1); /* Devuelve el brillo normal de la imagen */
    z-index: 1; /* Asegura que la imagen ampliada esté por encima de las demás */
}

footer{
    background-color: #012847;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: #F2F2F2;
    height: 250px;
    width: 100%;
    overflow: hidden;
}

.contacto{
    width: 100%;
    max-width: 600px; /* Opcional: restringe el ancho máximo */
    display: flex;
    /*justify-content: center;*/
    justify-content: space-between; /* Ajusta el espaciado entre elementos */
    /*gap: 1px;  Espaciado uniforme entre los elementos */
    /*margin: 0 auto; Centra horizontalmente si hay ancho máximo */
}

@media (max-width: 1000px) {
    .caja-central{
        width: 90%;
        height: 70%;
        flex-direction: column;
    }
    .caja-cara{
        width: 100%;
        height: 50%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .caja-presentacion{
        width: 100%;
        height: 50%;
        align-items: flex-start;
    }
    .aptitudes{
        width: auto;
    }
    .dos{
        height: auto;
        padding: 0 10px 10px 10px;

    }
    .tres{
        height: auto;
    }
    .proyectos{
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
    }
    .card{
        width: 80%;
        margin-top: 20px;
    }
    .red-social{
        margin: 0 10px 0 10px;
    }
}