@font-face {
    font-family: 'Forum';
    src: url('../fonts/Forum-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Roboto-Light;
    src: url('../fonts/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family: Roboto-Regular;
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Forum', sans-serif; /* Fallback a fuentes sans-serif si Roboto no está disponible */
}
header {
    background-color: rgba(51, 51, 51); /* Color de fondo transparente */
    color: #e5e0e0;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Fija el encabezado en la parte superior de la ventana */
    top: 0; /* Lo coloca en la parte superior */
    left: 0;
    width: 100%; /* Ajusta el ancho al 100% de la ventana */
    z-index: 1000; /* Asegura que esté por encima de la sección */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Agrega una sombra */
}

header h1 {
    margin: 0;
    padding-left: 5%;
}

header h1 a {
    text-decoration: none;
    color: inherit;
}

#myHeader {
    transition: background-color 0.3s ease, padding 0.3s;
  }
  
  .opaque {
    background-color: rgb(51, 51, 51); /* Cambia el valor de opacidad según tus preferencias */
    padding: 12.5px; /* Ajusta el padding según tus necesidades */
  }  

/* Estilos para el título principal */
.main-title {
    font-size: 0.85em; /* Tamaño de fuente para el título principal */
}

/* Estilos para el subtítulo */
.subtitle {
    font-size: 0.85em; /* Tamaño de fuente para el subtítulo */
    color: #888; /* Color de texto más claro para el subtítulo */
}

nav {
    text-align: right;
    padding-right: 5%;
}

nav ul {
    list-style-type: none;
    margin: 0;
    margin-top: 5px;
}

nav ul li {
    position: relative; /* Añade posicionamiento relativo para que el menú desplegable sea relativo a este elemento */
    display: inline-block; /* Cambia a inline-block para que los elementos se puedan posicionar uno al lado del otro */
    padding-right: 10px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    color: #e5e0e0;
    text-decoration: none;
    font-family: 'Roboto-Light', sans-serif;
    font-size: 0.925em;
    display: block; /* Cambia a bloque para que los elementos ocupen todo el ancho disponible */
    padding: 10px 25px;
}

nav ul .submenu {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.903);
    border-radius: 2.5px;
    min-width: 237.5px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    padding-bottom: 15px;
    text-align: left;
    top: 30px; /* Ajusta el valor según sea necesario */
    font-size: 0.975em;
}

nav ul .submenu li {
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

.servicios:hover {
    color: #e5e0e0; /* Color de enlace */
}

nav ul li:hover .submenu {
    display: block;
}

.menu-toggle, #menu-slideout {
    display: none; /* Oculta el botón de menú en tamaños de pantalla grandes */
}

main {
    padding-top: 0px; /* Ajusta el espacio superior para que no esté oculto por el encabezado */
}

.section {
    height: 100vh; /* Establece la altura de cada sección al 100% del viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    text-align: center;
}

#section1 {
    height: 325px;
    position: relative; /* Asegura que el z-index funcione correctamente */
    z-index: 1; /* Valor menor para que la animación no cubra el encabezado */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga de los límites de la sección */
}

#section1 h4 {
    font-size: 0.75em;
}

#section1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 22, 37, 0.762); /* Azul translúcido */
    z-index: -1; /* Valor menor para que esté detrás de la imagen */
}

#section1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/fondo-seccion1.jpg');
    background-size: cover;
    background-position: center;
    animation: scaleAnimation 15s infinite; /* Animación de escala infinita durante 15 segundos */
    z-index: -2; /* Valor menor para que esté detrás de la imagen */
}

@keyframes scaleAnimation {
    0%, 100% { transform: scale(1); } /* Escala normal al inicio y al final */
    50% { transform: scale(1.075); } /* Escala al 110% a la mitad de la animación */
}

#section1 .content-wrapper {
    color: #e5e0e0;
    margin-top: 100px;
    padding: 0px 30px; /* Añade un relleno alrededor del texto para simular un borde */
    background-color: rgba(0, 0, 0, 0); /* Agrega un color de fondo para el relleno */
    border-radius: 5px; /* Aplica bordes redondeados */
}

#section2 {
    height: 625px;
    padding: 0px 0; /* Agrega un espacio interno a la sección */
    background-color: #e5e0e04e;
}

#section2 .section-container {
    max-width: 1000px; /* Ancho máximo del contenido */
    margin: 25px; /* Centra el contenido horizontalmente */
}

#section2 .column-center {
    text-align: center; /* Centra el texto */
}

.container {
    display: flex;
}

.mission,
.vision {
    flex: 1;
    padding: 0;
}

/*.mission {
     border-right: 1px solid #ccc;  Línea divisoria entre las columnas 
}*/

.mission h2,
.vision h2 {
    margin-top: 0;
}

#section2 .column-center h2 {
    font-size: 0.9em; /* Tamaño del título */
    color: #333; /* Color del título */
    margin-left: none;
    margin-bottom: -5px;
    text-align: left;
}

#section2 .column-center p {
    font-size: 0.525em; /* Tamaño del texto */
    color: #666; /* Color del texto */
    line-height: 1.6; /* Altura de línea del texto */
    text-align: left;
    font-family: 'Roboto-Light', sans-serif;
}

.background-casa {
    position: fixed;
    top: 250px;
    right: -250px; /* Ajusta el valor según sea necesario */
    width: 425px; /* Ancho de la imagen */
    height: 425px; /* Altura de la imagen */
    filter: brightness(1.2) saturate(120%) hue-rotate(20deg);
    background-image: url('../img/u.png'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
    z-index: -1;
    pointer-events: none;
}

.u2 {
    position: fixed;
    top: -200px;
    left: -300px; /* Ajusta el valor según sea necesario */
    width: 425px; /* Ancho de la imagen */
    height: 425px; /* Altura de la imagen */
    filter: brightness(1.2) saturate(120%) hue-rotate(20deg);
    background-image: url('../img/u.png'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
    z-index: -1;
    pointer-events: none;
}

#section3 {
    height: 275px; /* Altura automática */
    padding: 75px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section3 .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    width: 100%;
    opacity: 0;
    transform: translateX(-20px); /* Mueve la sección hacia la izquierda */
    transition: opacity 0.5s, transform 1.25s;
}

#section3.visible .content-wrapper {
    opacity: 1;
    transform: translateY(0); /* Restablece la posición original */
}

.image-container {
    flex: 1;
    opacity: 0;
    transform: translateX(-20px); /* Mueve la imagen hacia la izquierda */
    transition: opacity 0.5s, transform 1.25s;
    margin-right: 50px;
}

.image-container img {
    max-width: 55%;
    height: auto;
    width: 100%;
    border-radius: 0.835%; /* Para hacer la imagen redonda */
}

.description-container {
    flex: 1;
    opacity: 0;
    transform: translateX(100px); /* Mueve la descripción hacia la derecha */
    transition: opacity 0.5s, transform 1.25s;
}

#section3.visible .image-container,
#section3.visible .description-container {
    opacity: 1;
    transform: translateY(0); /* Restablece la posición original */
}

.description-container h2 {
    font-size: 0.9em;
    margin-bottom: 10px;
}

.description-container p {
    font-size: 0.525em;
    margin-bottom: 10px;
    font-family: 'Roboto-Light', sans-serif;
}

#section4 {
    height: 525px;
    padding: 0px 0; /* Agrega un espacio interno a la sección */
    background-color: #e5e0e04e;
}

#section4 .section-container {
    max-width: 1000px; /* Ancho máximo del contenido */
    margin: 25px; /* Centra el contenido horizontalmente */
}

#section4 .column-center {
    text-align: center; /* Centra el texto */
}

#section4 .container {
    display: flex;
}

#section4 .mission,
#section4 .vision {
    flex: 1;
    padding: 0 25px;
}

/*.mission {
     border-right: 1px solid #ccc;  Línea divisoria entre las columnas 
}*/

#section4 .column-center p {
    font-size: 0.525em; /* Tamaño del texto */
    color: #666; /* Color del texto */
    line-height: 1.6; /* Altura de línea del texto */
    text-align: left;
    font-family: 'Roboto-Light', sans-serif;
}

footer {
    height: 300px;
    background-color: #111625f9;
    color: #e5e0e0;
    display: flex;
    justify-content: center; /* Centra las columnas horizontalmente */
    padding-top: 2.5px;
    padding-bottom: 20px;
    padding-left: 12%;
}

.columna {
    flex: 1;
    margin-left: 0%; /* Espacio entre columnas */
}

.columna:last-child {
    margin-left: 5%; /* Elimina el margen derecho de la última columna */
}

h3 {
    font-size: 2.5em; /* Tamaño de fuente para los títulos de columna */
}

.rol {
    color: #888; /* Color para "Asesor" */
}

ul {
    list-style-type: none;
    padding: 0;
}

.columna ul li {
    margin-top: 30px; /* Espacio entre elementos de lista */
}

ul li a {
    text-decoration: none;
    color: #e5e0e0; /* Color de enlace */
    font-size: 0.95em; /* Tamaño de fuente para los enlaces */
    font-family: 'Roboto-Light', sans-serif;
}

ul li a:hover {
    text-decoration: none; /* Subraya el enlace al pasar el cursor */
    color: #ffffff; /* Cambia el color del texto al pasar el cursor */
}

.special {
    padding-top: 55px;
    font-family: 'Roboto-Light', sans-serif;
    font-size: 0.95em;
}

.special2 {
    display: none;
    font-family: 'Roboto-Light', sans-serif;
    font-size: 0.95em;
}

/* Estilos específicos para el ícono de LinkedIn */
#contacto img.linkedin-icon {
    width: 22.5px; /* Cambia el tamaño del ícono */
    height: auto; /* Ajusta la altura automáticamente */
    margin-right: 10px; /* Agrega un margen a la derecha del ícono */
    filter: brightness(90%) contrast(84%); /* Cambia el color del ícono */
}

@media (max-width: 768px) {

    header h1 {
        margin: 0;
        padding-left: 1.25%;
    }

    .main-title {
        font-size: 0.9em;
    }

    .subtitle {
        font-size: 0.6em;
    }

    .main-title, .subtitle {
        display: block; /* Cambia el display a bloque para que se muestren en líneas separadas */
        text-align: center; /* Alinea los elementos al centro */
        text-align: left;
        padding-left: 0px;
    }

    nav ul{
        display: none;
    }

    .menu-toggle {
        display: block; /* Muestra el botón de menú en tamaños de pantalla pequeños */
        cursor: pointer;
        margin-right: 32.5px;
        font-size: 20px; /* Ajusta el tamaño de fuente según sea necesario */
    }

/* Estilo para el menú desplegable */
#menu-slideout {
    position: fixed;
    display: block;
    padding-top: 15px;
    top: 0;
    right: 0;
    height: 100%;
    width: 0; /* Cambiado a 0 inicialmente */
    background-color: #ffffff; /* Color de fondo del menú */
    overflow-x: hidden;
    transition: width 0.25s; /* Transición suave al abrir o cerrar el menú */
    z-index: 1001; /* Asegura que esté por encima del encabezado */
}

/* Añade estilo adicional para el contenido del menú si es necesario */
#menu-slideout ul {
    display: inline-block;
    padding: 20px;
    padding-top: 30px;
    text-align: left;
    /* Agrega aquí cualquier otro estilo necesario para el contenido del menú */
}

#menu-slideout ul li .menu-slideout1 {
    color: #000;
    font-size: 1.05em;
    padding-right: 70px;
    margin-bottom: 15px;
    /* Agrega aquí cualquier otro estilo necesario para el contenido del menú */
}

#menu-slideout ul li .contact-slideout1 {
    color: #000;
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 1em;
    font-family: 'Roboto-Regular', sans-serif;
}

#menu-slideout ul li .contact-slideout2 {
    color: #000;
    font-size: 1em;
    font-family: 'Roboto-Regular', sans-serif;
    padding-right: 70px;
}

/* Estilos para los enlaces que contienen los íconos */
#menu-slideout ul li .linkedin-icon {
    margin-right: -40px;
    width: 24px; /* Ancho deseado para los íconos */
    height: 24px; /* Alto deseado para los íconos */
}

/* Estilo para el botón de cierre */
.close-button {
    position: absolute;
    top: 20px;
    right: 25px;
    cursor: pointer;
    color: #000;
    font-size: 0.9em;
}

/* Estilo para la capa de fondo semitransparente */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.273); /* Color semitransparente */
    display: none; /* Ocultar inicialmente */
    z-index: 1000; /* Asegura que esté por encima del contenido */
}

    #section1 {
        height: 300px;
    }

    #section1 h2 {
        font-size: 1.1em;
    }
    
    #section1 h4 {
        font-size: 0.675em;
    }

    #section2 {
        height: auto;
    }

    .container {
        display: block;
    }

    .mission h2,
    .vision h2 {
    margin-top: 25px;
    }

    #section2 .section-container {
        margin: auto; /* Centra el contenido horizontalmente */
        margin-top: 5%;
        margin-bottom: 5%;
    }

    #section2 .column-center{
        margin: 25px;
    }

    #section3 {
        height: 375px;
    }

    .content-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .image-container {
        width: 320px;
        margin-right: 0;
        margin-bottom: 20px; /* Espacio entre la imagen y el formulario en dispositivos móviles */
    }

    #section3 .content-wrapper {
        transform: translateY(20px); /* Mueve la sección hacia la izquierda */
    }
    
    .image-container {
        transform: translateY(20px); /* Mueve la imagen hacia la izquierda */
    }
    
    .description-container {
        transform: translateY(100px); /* Mueve la descripción hacia la derecha */
    }

    #section4 {
        height: auto;
    }

    #section4 .container {
        display: block;
    }

    #section4 .mission,
    #section4 .vision {
        padding: 0;
    }

    #contacto {
        height: 400px;
        flex-direction: column;
        align-items: left;
    }

    #Ulpiano-footer {
        display: none;
    }

    #contacto .columna {
        margin-left: 0px;
    }

    .special2 {
        display: block;
        margin-top: 75px;
    }
}