main {  
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
}

html, body {  
    height: 100%;   
    margin: 0; 
}  

body {  
    display: flex;   
    flex-direction: column; 
}  
 
.navbar {  
    display: flex; 
    justify-content: flex-end; 
    align-items: center;    
    padding: 10px 75px;  
    position: relative; 
}  
 
.menu-icon {  
    color: white; 
    font-size: 30px;  
    cursor: pointer;
    z-index: 10; 
    width: 45px;
}  

.menu {  
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none;  
    flex-direction: column;
    position: absolute;  
    top: 55px;  
    right: 10px;  
    background-color: #000000cc; 
    border-radius: 5px;  
    z-index: 10;  
}  
 
.menu li {  
    padding: 10px 15px;  
    transition: background-color 0.3s ease; 
}  
 
.menu li a {  
    color: white;  
    text-decoration: none; 
    font-weight: bold; 
    display: block; 
}  

.menu li:hover {  
    background-color: #444444cc;  
    border-radius: 5px; 
}  
  
.menu.active {  
    display: flex;  
}  

.content {  
    flex: 1;   
}  

main {  
    flex: 1;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    flex-direction: column;  
    padding: 20px;   
}  

html, body {  
    height: 100%;   
    margin: 0;   
}  

body {  
    display: flex;   
    flex-direction: column;   
}  

.navbar {  
    display: flex;  
    justify-content: flex-end;  
    align-items: center;   
    padding: 10px 5%;  
    position: relative;  
}  

.menu-icon {  
    color: white;  
    font-size: 1.875rem; 
    cursor: pointer;  
    z-index: 10;  
    width: 45px;  
}  

.menu {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
    display: none;  
    flex-direction: column;  
    position: absolute;  
    top: 55px;  
    right: 10px;  
    background-color: #00000067;  
    border-radius: 5px;  
    z-index: 10;  
}  

.menu li {  
    padding: 10px 15px;  
    transition: background-color 0.3s ease;  
}  

.menu li a {  
    color: white;  
    text-decoration: none;  
    font-weight: bold;  
    display: block;  
}  

.menu li:hover {  
    background-color: #444;  
    border-radius: 5px;  
}  

.menu.active {  
    display: flex;  
}  

.content {  
    flex: 1;  
}  


/* Estilo general para la sección de carga */  
.upload-section {  
    text-align: center; /* Centra el contenido */  
    margin: 10px; /* Espacio alrededor del contenedor */  
}  

/* Estilo para el contenedor de botones */  
.button-container {  
    display: flex; /* Usa flex para alinear los botones en fila */  
    justify-content: center; /* Centra los botones horizontalmente */  
    gap: 40px; /* Espacio entre los botones */  
}  

/* Estilo para cada botón */  
.button-wrapper {  
    text-align: center; /* Centra el texto debajo del botón */  
}  

/* Estilo de los botones */  
.btn2 {  
    display: inline-flex; /* Flexbox para icono y texto */  
    align-items: center; /* Alinea el icono y el texto */  
    background-color: #ff9800; /* Color de fondo naranja */  
    color: white; /* Color del texto */  
    font-weight: bold; /* Texto en negrita */
    padding: 2px 15px; /* Aumenta el relleno interno para agrandar el botón */  
    border-radius: 50px; /* Aumenta el radio para bordes más redondeados */ 
    text-decoration: none;
    border: none;
    font-size: 13px; /* Tamaño de fuente */  
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */  
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */  
}  

/* Efecto hover para los botones */  
.btn2:hover {  
    background-color: #e68a00; /* Color más oscuro al pasar el ratón */  
    transform: translateY(-3px); /* Efecto de elevación */  
}  

/* Estilo para los iconos dentro del botón */  
.ic2 {  
    width: 30px; /* Tamaño del icono */  
    height: auto; /* Mantiene la proporción del icono */  
    margin-right: 5px; /* Espacio entre el icono y el texto */  
}  

/* Estilo para las instrucciones de cada botón */  
.instruction-text {  
    margin-top: 10px; /* Espacio superior */  
    font-size: 0.9rem; /* Tamaño de fuente de las instrucciones */  
    color: white; /* Color del texto */  
}  

/* Estilo para el texto informativo */  
.news-text {  
    font-size: 1rem; 
    color: white; 
}  


.title-cards {  
    width: 100%;  
    max-width: 1080px;  
    margin: auto;  
    padding: 20px;  
    margin-top: 20px;  
    text-align: center;  
    color: #7a7a7a;  
}  

.container {  
    justify-content: center;  
    align-items: center;  
}  

.row {  
    justify-content: center;  
    align-items: center;  
    position: relative;  
    margin-top: 300px;  
}  

.contenedor1, .contenedor2, .contenedor3, .contenedor4, .contenedor5, .contenedor6 {  
    width: 100%;  
    max-width: 308px;  
    position: relative;  
    height: 400px;  
    background: #0b5033;  
    text-align: center;  
    margin: 10px 10px;  
    padding: 20px 15px;  
    display: flex;  
    flex-direction: column;  
    box-shadow: 0 2px 10px rgb(0, 0, 0);  
    border-radius: 10px;  
    transition: 0.3s ease-in-out;  
    cursor: pointer;
}  

.card-img-top {  
    height: 200px;  
    cursor: pointer;
    transition: transform 0.2s; /* Añadir transición */ 
}  

.card-img-top:hover {  
    transform: scale(1.02); /* Efecto de zoom al pasar el ratón */  
}   

/* Estilo base para el botón */  
.btn {  
    background-color: #ffa218;   
    color: white; /* Color del texto */  
    padding: 5px 10px; /* Espaciado interno */
    border: none; /* Sin borde */  
    border-radius: 5px; /* Bordes redondeados */  
    font-size: 16px; /* Tamaño de fuente */  
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */  
}  

/* Efecto hover para el botón */  
.btn:hover {  
    background-color: #ffb340; /* Color de fondo al pasar el ratón */  
    transform: scale(1.02); /* Escala del botón al pasar el ratón */  
}  

.ic {  
    width: 20px;  
    margin-right: 5px;  
    height: auto;   
}  

/* formulario de cargar de cv */  
.relative.z-10 {  
    margin: 40px auto; /* Espaciado superior e inferior más amplio */  
    max-width: 400px; /* Ancho máximo del contenedor */  
    margin-top: 320px;
}  

/* Estilo del formulario */  
form {   
    background-color: rgba(255, 255, 255, 0); /* Fondo completamente transparente */  
    border-radius: 10px; /* Bordes redondeados */  
    padding: 20px; /* Espaciado interno */  
    box-shadow:none;  
}  

/* Estilo de los inputs de texto */  
input[type="text"],  
input[type="email"],  
input[type="file"] {  
    width: 100%; /* Ocupa todo el ancho disponible */  
    padding: 10px; /* Espaciado interno */  
    border: 1px solid #000000; /* Borde gris claro */  
    border-radius: 5px; /* Bordes redondeados */  
    margin-bottom: 10px; /* Espaciado entre elementos */  
    font-size: 0.9rem; /* Tamaño de la fuente reducido */  
}    

/* Estilo para los selects */  
select {  
    width: 100%; /* Ocupa todo el ancho disponible */  
    padding: 10px; /* Espaciado interno */  
    border: 1px solid #ccc; /* Borde gris claro */  
    border-radius: 5px; /* Bordes redondeados */  
    color: #000000;
    cursor: pointer; /* Cambia el cursor a puntero */  
    font-size: 0.9rem; /* Tamaño de la fuente reducido */
}  

/* Ocultar el campo de texto para "Otros" inicialmente */  
.hidden {  
    display: none;  
}  

.file-upload {  
    position: relative; /* Permite el posicionamiento absoluto del icono */  
    width: 100%; /* Ancho completo */  
    border: 1px solid #ccc;  
    border-radius: 4px; /* Bordes redondeados */  
    padding: 10px 40px 10px 15px; /* Espaciado interno */  
    display: flex; /* Usamos flexbox para alineación */  
    align-items: center; /* Centra verticalmente */  
    cursor: pointer; /* Cambia el cursor al pasar sobre el área */  
    font-size: 14px;
}  

.file-upload input[type="file"] {  
    position: absolute; /* Posicionamiento absoluto para que no afecte el diseño */  
    width: 100%; /* Ancho completo para que cubra todo el área */  
    height: 100%; /* Altura completa */  
    opacity: 0; /* Hace el input invisible */  
    cursor: pointer; /* Muestra el cursor de puntero */  
}  

.file-icon {  
    position: absolute; /* Posicionamiento absoluto para el icono */  
    right: 10px; /* Espaciado desde la derecha */  
    color: black; /* Color del icono */  
}

/* Botón de envío */  
button {  
    width: 100%; /* Ocupa todo el ancho disponible */  
    padding: 10px; /* Espaciado interno */  
    background-color: #000000; /* Color de fondo teal */  
    color: rgb(0, 0, 0); /* Color del texto */  
    font-weight: bold; /* Negrita */  
    border: none; /* Sin borde */  
    border-radius: 5px; /* Bordes redondeados */  
    cursor: pointer; /* Cambia el cursor a puntero */  
    font-size: 0.9rem; 
    transition: 0.3s; 
}  

button[type="submit"]:hover {  
    background-color: #252525; /* Un tono más oscuro de teal al pasar el mouse */  
}

.relative {  
    position: relative;  
    color: #000000;
} 

.icon-container img {  
    opacity: 0.7;  
    transition: transform 0.3s ease, opacity 0.3s ease;  
}  

.icon-container img:hover {  
    opacity: 1;  
    transform: scale(1.1);  
    filter: brightness(0) invert(1);  
}  

.icons {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    flex-wrap: wrap;  
    gap: 20px; 
}  
.icons img {  
    width: 50px;  
    height: auto; 
}  

.icon-label {  
    margin-bottom: 5px;   
    font-size: 14px; 
    text-align: center; 
}  

.icon-container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
}  

.icon-label {  
    margin-bottom: 10px;  
    font-size: 1rem; /* 16px en rem */ 
}  

footer {  
    background-color: #333;  
    color: white;  
    text-align: center;  
    padding: 20px 0;  
    width: 100%;  
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);  
}  

.footer-links {  
    margin: 10px 0;  
}  

.footer-links a {  
    color: #fff;  
    text-decoration: none;  
    margin: 0 15px;  
    text-decoration: none;
}  

.footer-links a:hover {  
    text-decoration: underline;  
}  

.footer-text {  
    font-size: 0.875rem; /* 14px en rem */  
}  

footer {  
    background-color: rgba(0, 0, 0, 0.7);  
    color: white;  
    padding: 20px;  
    position: relative;  
    text-align: center;  
    bottom: 0;  
    width: 100%;  
}  

.footer-contacts a {  
    color: white;  
    margin: 0 10px;  
}  

.footer-contacts {  
    margin-bottom: 10px;  
}  

.derechos-de-autor {  
    font-size: 0.875rem;  
    margin-top: 10px;  
    text-decoration: none;
}  

/* Media Queries para Responsividad */  
@media (max-width: 768px) {  
    .navbar {  
         
        padding: 10px 10px;  
    }  

    .menu {  
        right: 5px;  
    }  

    .menu-icon {  
        font-size: 1.5rem; /* Tamaño del icono más pequeño en móviles */  
    }  

    .icon-container img {  
        width: 60px; /* Tamaño de iconos más pequeño en móviles */  
    }  

    .icon-label {  
        font-size: 0.875rem; /* 14px en rem */  
    }  
}  

@media (max-width: 480px) {  
    main {  
        padding: 10px; /* Reduce el padding en móviles */  
    }  

    .navbar {  
        flex-direction: row; /* Cambia la dirección a columna en móviles */  
       
    }  

    .menu {  
        right: 10; /* Ajusta la posición del menú */  
        top: 45px; /* Ajusta la posición en pantallas pequeñas */   
    } 

    .menu li {  
        padding: 10px 5px; /* Reduce padding */  
    }  

    .content {  
        padding: 10px; /* Añade padding en la sección de contenido */  
    }  

    .footer {  
        padding: 15px; /* Reduce padding en el pie de página */  
    }  

    .footer-text, .derechos-de-autor {  
        font-size: 0.75rem; /* 12px en rem para texto en el footer */  
    }  

    .footer-links a {  
        margin: 0 5px; /* Reduce espacio entre enlaces */  
    }  
}  
 
.icons img {  
    max-width: 100%; /* Las imágenes no exceden el ancho de su contenedor */  
    height: auto; /* Mantiene la relación de aspecto */  
}