@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, 0.886); /* 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: 100vh;
    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::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 */
}

#section1 .content-wrapper h2 {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 2.5em;
}

#section1 .content-wrapper h4 {
    margin-top: 20px;
    font-size: 0.75em;
}

#section1 .buttons {
    margin-top: 20px;
}

#section1 .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent; /* Hacemos el fondo transparente */
    border: 2px solid rgba(51, 51, 51, 0.886); /* Añadimos un borde fino */
    color: #e5e0e0; /* Color del texto del botón */
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 0.425em;
    text-decoration: none;
    border-radius: 5px;
    margin-right: 10px; /* Espacio entre los botones */
}

#section1 .button:hover {
    background-color: rgba(51, 51, 51, 0.886); /* Cambio de color del fondo al pasar el mouse sobre el botón */
    color: #fff; /* Cambio de color del texto al pasar el mouse sobre el botón */
    transform: scale(1.01, 1.01);
    transition: transform 0.25s;
}

#section2 {
    height: 600px; /* Cambiar a altura automática */
    padding: 20px; /* Ajustar el espacio interno */
    padding-left: 10%;
    padding-right: 10%;
}

#anchor-section2 {
    position: relative; /* Cambia la posición del elemento */
    top: -387.5px; /* Mueve el elemento hacia arriba 385px */
}

#section2 .section-container {
    display: flex; /* Utilizar flexbox para diseño flexible */
    justify-content: space-between; /* Distribuir elementos uniformemente */
    align-items: center; /* Centrar verticalmente los elementos */
    gap: 30px; /* Aumentar el espacio entre las columnas */
}

#section2 .column-left, .column-center, .column-right {
    flex: 1; /* Que cada columna ocupe el mismo espacio */
}

#section2 .column-left h2{
    font-size: 1.2em; /* Reducir el tamaño de fuente del texto */
    text-align: left;
}

#section2 .column-left p{
    font-size: 0.5625em; /* Reducir el tamaño de fuente del texto */
    font-family: 'Roboto-Light', sans-serif;
    text-align: left;
}

.column-left {
    margin-right: 2.5%;
}



/*.column-left {
    opacity: 0; /* Inicialmente, oculta las columnas 
    transform: translateX(-100px); /* Mueve las columnas hacia la izquierda 
    transition: opacity 0.5s, transform 0.5s; /* Agrega una transición suave 
    margin-right: 2.5%;
}

.column-center {
    opacity: 0; /* Inicialmente, oculta las columnas 
    transform: translateX(100px); /* Mueve las columnas hacia la izquierda 
    transition: opacity 0.5s, transform 0.475s; /* Agrega una transición suave 
}

.column-right {
    opacity: 0; /* Inicialmente, oculta las columnas
    transform: translateX(100px); /* Mueve las columnas hacia la izquierda
    transition: opacity 0.5s, transform 0.5s; /* Agrega una transición suave
} */

.column-center p, .column-right p{
    font-size: 0.9em; /* Reducir el tamaño de fuente del texto */
    font-family: 'Roboto-Light', sans-serif;
}

.visible {
    opacity: 1; /* Muestra las columnas */
    transform: translateX(0); /* Restablece la posición original */
}

.hidden {
    opacity: 0; /* Oculta las columnas */
    transform: translateY(-100px); /* Mueve las columnas hacia arriba */
}

#section2 .button {
    display: block;
    width: 325px; /* Ancho fijo para los botones */
    height: 225px; /* Altura fija para los botones */
    margin: 25px 0px; /* Espacio entre los botones */
    padding-top: 2.5px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12.5px;
    background-color: #111625f2; /* Color de fondo del botón */
    color: #e5e0e0; /* Color del texto del botón */
    border: 0px solid #333; /* Borde del botón */
    border-radius: 3.75px; /* Borde redondeado */
    text-align: left; /* Centrar texto */
    font-size: 0.51em; /* Tamaño de fuente del texto */
    text-decoration: none;
    overflow: hidden; /* Ocultar el contenido que excede el ancho del botón */
}

#section2 .button h3 {
    margin-bottom: 5px; /* Espacio entre el título y el texto */
    font-size: 1.75em; /* Reducir el tamaño de fuente del título */
}

#section2 .button:hover {
    background-color: #111625; /* Cambio de color al pasar el mouse sobre el botón */
    transform: scale(1.0025, 1.0025);
    /*transition: transform 0.25s;*/
}

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

#section25 {
    height: 400px; /* Altura automática */
    padding: 75px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5e0e04e;
}

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

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

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

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

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

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

.description-container25 h2 {
    font-size: 1.2em;
    margin-bottom: 0px;
}

.description-container25 p {
    font-size: 0.5625em;
    margin-bottom: 50px;
    font-family: 'Roboto-Light', sans-serif;
}

.iconU {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    width: 375px; /* Ajusta el ancho según el tamaño de tu icono */
    height: 375px; /* Ajusta la altura según el tamaño de tu icono */
    background-image: url('../img/logo-ulpiano.png'); /* Ruta a tu icono */
    background-size: cover;
    opacity: 0.025;
}

.section27 {
    height: 225px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f0f0f0;
    padding: 20px;
    padding-left: 10%;
    padding-right: 10%;
}

.item {
    position: relative;
    text-align: center;
}

.icon1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145px; /* Ajusta el ancho según el tamaño de tu icono */
    height: 120px; /* Ajusta la altura según el tamaño de tu icono */
    background-image: url('../img/section27-1.png'); /* Ruta a tu icono */
    background-size: cover;
    opacity: 0.0625;
}

.icon2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 127.5px; /* Ajusta el ancho según el tamaño de tu icono */
    height: 125px; /* Ajusta la altura según el tamaño de tu icono */
    background-image: url('../img/section27-2.png'); /* Ruta a tu icono */
    background-size: cover;
    opacity: 0.0625;
}

.icon3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px; /* Ajusta el ancho según el tamaño de tu icono */
    height: 90px; /* Ajusta la altura según el tamaño de tu icono */
    background-image: url('../img/section27-3.png'); /* Ruta a tu icono */
    background-size: cover;
    opacity: 0.0625;
}

.icon4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 125px; /* Ajusta el ancho según el tamaño de tu icono */
    height: 125px; /* Ajusta la altura según el tamaño de tu icono */
    background-image: url('../img/section27-4.png'); /* Ruta a tu icono */
    background-size: cover;
    opacity: 0.0625;
}

.number {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #111625f9;
}

.description {
    font-size: 0.9em;
    color: #111625f9;
    font-family: 'Roboto-Regular', sans-serif;
}

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

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

.image-container {
    flex: 1;
    margin-left: 10%; /* Aumentar el margen derecho para mover la imagen más a la izquierda */
    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 arriba */
    transition: opacity 0.5s, transform 1s; /* Agrega una transición suave */
}

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

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

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

#section3 p {
    max-width: 450px;
    font-size: 0.55em;
    font-family: 'Roboto-Light', sans-serif;
}

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

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

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

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

#section3 label {
    display: block;
}

#section3 input,
#section3 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;
}

#section3 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;
}


/*#section3 button:hover {
    background-color: #111625; /* Cambio de color al pasar el mouse sobre el botón 
}*/

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 y el de WhatsApp*/
#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 h2 {
        font-size: 1.1em;
    }
    
    #section1 .content-wrapper h4 {
        font-size: 0.675em;
    }

    #section2 {
        height: auto;
    }

    #anchor-section2 {
        position: relative; /* Cambia la posición del elemento */
        top: -730px; /* Mueve el elemento hacia arriba 385px */
    }

    #section2 .button {
        height: 225px; /* Altura fija para los botones */
    }

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

    .column-center {
        margin-bottom: -15px;
    }

    .column-right {
        margin-top: -37.5px;
    }
    
    .visible {
        opacity: 1; /* Muestra las columnas */
        transform: translateX(0); /* Restablece la posición original */
    }

    #section25 {
        height: auto; /* Altura automática */
        padding: 10%;
    }

    .image-container25{
        display: none;
    }

    #section25 .content-wrapper25 {
        transform: translateY(-20px); /* Mueve la sección hacia la izquierda */
    }

    .description-container25 {
        transform: translateY(100px); /* Mueve la descripción hacia la derecha */
    }

    .iconU {
        display: none;
    }

    .section27{
        height: auto;
        display: block;
        padding: 25px;
    }

    .item {
        padding: 17.5%;
    }

    #section3 {
        height: 375px;
    }

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

    .image-container {
        display: none;
    }

    #section3 .form-container {
        transform: translateY(50px);
    }

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

    #Ulpiano-footer {
        display: none;
    }

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

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