@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: rgb(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 {
    position: relative;
    height: 1175px;
}

.image-container {
    position: absolute;
    top: 175px;
    right: 15%;
    width: 50%; /* O ajusta el tamaño de la imagen según lo desees */
    height: 425px;
    /* Aquí puedes agregar estilos para tu imagen de fondo */
    background-image: url('../img/fondo-areas.png');
    background-size: cover;
    background-position: center;
    border-radius: 2.5px;
}

.text-container {
    position: absolute;
    top: 400px;
    left: 15%;
    width: 50%; /* O ajusta el tamaño del cuadro de texto según lo desees */
    padding: 35px;
    transform: translateY(-50%);
    background-color: #e5e0e0f9;
    border-radius: 2.5px;
}

.text-container h2 {
    font-size: 1.7em;
    margin-top: 0; /* Elimina el margen superior del título */
}

.text-container p {
    font-family: 'Roboto-Light', sans-serif;
    font-size: 1em;
}


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

.form-container {
    position: absolute;
    bottom: 125px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    background-color: #111625f9;
    padding: 35px;
    border-radius: 7.5px;
    display: flex;
    flex-direction: column;
}

.form-container h2 {
    font-size: 175%;
    margin: 1px 7.5px;
    color: #eee;
}

.form-row {
    display: flex;
}

.form-group {
    position: relative;
    margin: 1px 7.5px;
    flex: 1;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: transparent;
    color: #eee;
    transition: 0.15s all ease;
    font-family: 'Roboto-Regular', sans-serif;
}

/*.form-group input:focus,
.form-group textarea:focus {
    border-color: #111625f9;
}*/

.form-group input:focus + label,
.form-group textarea:focus + label {
    transform: translate(5px, -15px) scale(1.2);
    background-color: #111625f9;
    padding: 0 5px;
    font-size: 0.7em;
}

.form-group label {
    position: absolute;
    top: 8px;
    left: 10px;
    color: #acacac;
    pointer-events: none;
    transition: 0.15s all ease;
}

button {
    padding: 12px 0px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 0.9em;
    font-family: 'Roboto-Regular', sans-serif;
}

/* Estilos para el pie de página */
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;
    }

    .image-container {
        top: 0;
        left: 0;
        width: 100%; /* O ajusta el tamaño de la imagen según lo desees */
        height: 100%;
        border-radius: 0px;
    }
    
    .text-container {
        top: 300px;
        left: 5%;
        width: 80%; /* O ajusta el tamaño del cuadro de texto según lo desees */
        padding: 5%;
        background-color: #e5e0e0f9;
    }    

    .text-container h2 {
        font-size: 1.4em;
    }
    
    .text-container p {
        font-size: 0.95em;
    }     

    .form-container {
        padding: 25px;
        bottom: 50px;
    }

    .form-row {
        display: block;
    }

    .form-container h2 {
        margin: 0px 0px;
        margin-bottom: 25px;
    }

    .form-group {
        margin: 2.5px 0px;
    }

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

    #Ulpiano-footer {
        display: none;
    }

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

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