@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: 600px;
    position: relative;
    overflow: hidden;
    padding: 0px 0; /* Agrega un espacio interno a la sección */
}

#section2 .content-wrapper {
    max-width: 1000px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Centra el contenido horizontalmente */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px;
}

/*.loader {
    display: none;  /*Por defecto, ocultamos el loader
    width: 35px;
    aspect-ratio: 1;
    border: 3px solid #fff;
    animation: l1 2s infinite;
  }
  
  @keyframes l1 {
    0%   {border-radius:50% 50% 0   0  }
    25%  {border-radius:0   50% 50% 0  }
    50%  {border-radius:0   0   50% 50%}
    75%  {border-radius:50% 0   0   50%}
    100% {border-radius:50% 50% 0   0  }
  }*/

#section2 .map-container {
    flex: 1;
    margin-right: 150px;
}

#section2 .contact-info {
    flex: 1;
    text-align: left;
}

#section2 .contact-row {
    margin-bottom: 45px;
}

#section2 .contact-row h3 {
    font-size: 0.75em;
    color: #333;
    margin-bottom: 0px;
}

#section2 .contact-row a {
    font-size: 0.5em; /* Tamaño del texto */
    color: #666;
    font-family: 'Roboto-Light', sans-serif;
    list-style: none; /* Elimina los puntos de la lista */
}

.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;
}

a{
    text-decoration: none;
}

#section3 {
    height: 150px;
    text-align: center;
    background-color: #e5e0e04e;
    border-top-left-radius: 32.5px;
    border-top-right-radius: 32.5px;
}

#section3 .section-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #f0f0f0;
    border-radius: 32.5px;
}

#section3 .text-container {
    font-family: 'Roboto-Light', sans-serif;
    font-size: 0.625em;
    margin-right: 2.5%; /* Ajusta el espacio entre el texto y el ícono */
    color: #111625f9;
}

#section3 .social-icons {
    list-style-type: none;
    padding: 0;
}

#section3 .social-icons li {
    display: inline-block;
    margin-left: 10px; /* Ajusta el espacio entre los íconos */
}

#section3 .linkedin-icon {
    width: 50px; /* Ajusta el tamaño según sea necesario */
    height: auto;
}

#section4 {
    height: 525px; /* Cambiar a altura automática */
    padding-top: 75px;
    padding-bottom: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5e0e04e;
}

#section4 .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

#section4 .image-container {
    flex: 1;
    margin-left: 10%; /* Mueve la imagen más a la derecha */
    margin-right: 0; /* Elimina el margen derecho */
    overflow: hidden; /* Oculta cualquier contenido que se salga del contenedor */
    z-index: -1;
    opacity: 0; /* Inicialmente, oculta la imagen */
    transform: translateX(20px); /* Inicialmente, mueve la imagen hacia la derecha */
    transition: opacity 0.5s, transform 1.25s; /* Agrega una transición suave */
}

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

#section4 .image-container img {
    max-width: 100%;
    height: 550px;
    width: 100%; /* Hacer que la imagen ocupe todo el ancho del contenedor */
    object-fit: cover; /* Ajustar la imagen para que cubra todo el contenedor */
    border-radius: 2.5px;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s, transform 1.25s;
    flex: 1;
}

.form-container h2{
    font-size: 1.15em; /* Reducir el tamaño de fuente del título */
    margin-bottom: 0px;
}

.form-container p{
    font-size: 0.55em;
    font-family: 'Roboto-Light', sans-serif;
    max-width: 425px;
}

.form-container.visible {
    opacity: 1;
    transform: translateY(0);
}

#section4 .form-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

#section4 .input-group {
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
}

#section4 label {
    display: block;
}

#section4 input,
#section4 textarea {
    width: 100%;
    padding: 8px;
    margin-top: 6px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 0.5em;
}

#section4 button {
    background-color: #111625f2;
    color: white;
    padding: 12px 0px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 19%;
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 0.45em;
}

/*#section4 button:hover {
    background-color: #111625;
}*/

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-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: 110px;
}

/* 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: 900px;
        display: flex; /* Utilizamos flexbox para el diseño */
        flex-direction: column; /* Alinea los elementos en columna */
    }

    .content-wrapper {
        flex-direction: column;
    }

    #section2 .contact-info {
        margin-left: -85px;
        order: 1; /* Cambia el orden, colocando los datos de contacto primero */
    }

    #section2 .map-container {
        margin: 0px;
        margin-left: -85px;
        order: 2; /* Coloca el mapa después de los datos de contacto */
    }

    #section2 .maps {
        width: 127.5%;
    }

    #section3 .text-container {
        font-size: 0.5em;
    }

    #section4 {
        height: 300px;
    }

    #section4 .image-container {
        display: none;
    }

    .form-container {
        transform: translateY(20px);
    }

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

    #Ulpiano-footer {
        display: none;
    }

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

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