/* ============================== */
/*        VARIABLES GLOBALES      */
/* ============================== */
:root {
    /* Fuentes */
    --fuenteHeading: 'Roboto', sans-serif;
    --fuenteParrafos: "Poppins", sans-serif;

    /* Colores */
    --grisOscuro: #4A4A4A;                          /* Fondo Contenido */
    --blanco: #FFFFFF;                              /* Letra */
    --negro: #000000;                               /* Fondo */
    --rojo: #EA0000;                                /* Botones y detalles */
    --rojoTransparente: rgba(255, 0, 0, 0.5);     /* Íconos */
    --grisPerfil: #808080;                          /* Fondo perfil reseñas */
}

/* ============================== */
/*        ESTILOS GLOBALES        */
/* ============================== */
html {
    box-sizing: border-box; /* Modelo de caja consistente */
}

*, *:before, *:after {
    box-sizing: inherit; /* Hereda border-box a todos los elementos */
}

body {
    font-family: var(--fuenteParrafos);
    margin: 0;
    padding: 0;
    font-size: 2vh;
    line-height: 1.4;
    color: var(--blanco);
}

/* ============================== */
/*        TIPOGRAFÍA              */
/* ============================== */
h1, h2, h3 {
    font-family: var(--fuenteHeading);
    color: var(--blanco);
}

h1 {
    margin: 0;
    font-size: 6vh;
    margin-bottom: 1vh;
}

h2 {
    margin: 0;
    font-size: 4vh;
    margin-bottom: 1vh;
    line-height: 6.8vh;
}

h3 {
    margin: 0;
    font-size: 3vh;
    margin-bottom: 1vh;
}

p {
    font-family: var(--fuenteParrafos);
    font-size: 2.2vh;
    margin: 0;
    color: var(--blanco);
    line-height: 3.8vh;
}

@media (max-width: 1024px) {
    h1 {
        font-size: 4.5vh;
    }
    
    h2 {
        font-size: 3.5vh;
    }
    
    h3 {
        font-size: 2.5vh;
    }
}

/* ============================== */
/*        BOTONES                 */
/* ============================== */
.boton2 {
    background-color: transparent;
    color: var(--blanco);
    border: 0.25vh solid var(--blanco);
    margin: 0;
    display: inline-block;
    padding: 2.5vh 3vw;
    border-radius: 50px;
    align-self: flex-start;
    transition: background-color 0.3s, color 0.3s;
}

@media screen and (max-width: 768px) {
    .boton2 {
        padding: 2.5vh 4.3vw;
    }
    
}

.botones {
    display: flex;
    flex-wrap: wrap;  /* Esto permite que los botones se ajusten automáticamente a la siguiente línea si es necesario */
    gap: 1.5vw;  /* Añadí un espacio entre los botones */
}

.boton {
    margin-top: 0;
    margin-right: 1.5vw;
    background-color: var(--rojo);
    color: var(--blanco);
    padding: 2vh 2vw;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2vh;
    border-radius: 50px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    width: fit-content;
}

/* Efecto hover en botones */
.boton:hover {
    background-color: var(--blanco);
    color: var(--rojo);
}

/* ============================== */
/*        NAVEGACIÓN              */
/* ============================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--blanco);
    z-index: 1000;
    box-shadow: 0 0.2vh 1vh rgba(0, 0, 0, 0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 5vw;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container img {
    height: 8vh;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 3vh;
    color: var(--negro);
    cursor: pointer;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 3vw;
}

nav ul li a {
    font-size: 2.2vh;
    color: var(--negro);
    text-decoration: none;
    padding: 1vh 0;
    transition: color 0.3s, border-bottom 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
    border-bottom: 0.2vh solid var(--rojo);
    color: var(--rojo);
}

/* ============================== */
/*        NAVEGACIÓN RESPONSIVA   */
/* ============================== */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav-container {
        width: 100%;
    }

    .menu-toggle {
        margin-left: auto;
    }

    nav ul {
        display: none; 
        flex-direction: column;
        position: fixed;
        top: 10vh;
        left: 0;
        width: 100%;
        background-color: var(--blanco);
        box-shadow: 0 0.4vh 0.6vh rgba(0, 0, 0, 0.1);
        gap: 0;
        z-index: 1001;
    }

    .nav-container img {
        height: 6vh;
    }

    nav ul.menu-open {
        display: flex;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        padding: 2vh 0;
        font-size: 2.5vh;
    }
}

/* ============================== */
/*        FOOTER                  */
/* ============================== */
footer {
    text-align: center;
    padding: 5vh 0 5vh 0;
}

footer img {
    height: 10vh;
    cursor: pointer;
}

footer p {
    margin: 2.5vh 0 0 0;
    font-size: 1.8vh;
    color: var(--grisOscuro);
}

/* ============================== */
/*        ÍCONOS                  */
/* ============================== */
.icon-wrapper {
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    background-color: var(--rojoTransparente);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1vh;
}

.icon-wrapper svg {
    width: 3.5vh;
    height: 3.5vh;
    fill: var(--blanco);
}

/* ============================== */
/*        ENLACES GENERALES       */
/* ============================== */
a {
    color: var(--blanco);
    text-decoration: none;
}

/* ============================== */
/*        RESEÑAS                 */
/* ============================== */
.resenas {
    background-color: var(--negro);
    color: var(--blanco);
    padding: 10vh 5vw;
    text-align: center;
}

.resenas-content h2 {
    max-width: 80%;
    margin: 0 auto;
}

/* ============================== */
/*        CARRUSEL                */
/* ============================== */
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#resenas-container {
    display: flex;
    overflow: hidden;
    margin: 5vh 0;
    gap: 2vw;
}

/* ============================== */
/*        RESEÑA INDIVIDUAL       */
/* ============================== */
.resena {
    background-color: var(--grisOscuro);
    padding: 4vh;
    border-radius: 1vw;
    width: 40vw;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 40vh;
    justify-content: space-between;/
}

/* ============================== */
/*        ESTRELLAS Y PERFIL      */
/* ============================== */
.estrellas {
    color: var(--rojo);
    text-align: left;
    font-size: 3vh;
    flex-shrink: 0;
    margin: 0 0 1vh 0;
}

.imagen-perfil {
    width: 2.5vw;
    height: 2.5w;
    border-radius: 50%;
    background-color: var(--grisPerfil);
    margin-right: 1vw;
    vertical-align: middle;
}

/* ============================== */
/*        COMENTARIO Y AUTOR      */
/* ============================== */
.comentario {
    overflow-y: auto;
    text-align: left;
    flex-grow: 1; /* Ocupa el espacio disponible */
    margin: 0; /* Sin márgenes extras */
}

.nombre {
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

.autor {
    display: flex;
    align-items: center;
    text-align: left;
    flex-shrink: 0; /* Evita que se comprima */
    margin-top: 2.1vh; /* Espacio arriba */
}

/* ============================== */
/*        FLECHAS DEL CARRUSEL    */
/* ============================== */
.arrow {
    background: none;
    border: none;
    color: var(--blanco);
    cursor: pointer;
    padding: 1vh;
    font-size: 2vw;
    transition: color 0.3s;
}

.arrow:hover {
    color: var(--rojo);
}

/* ============================== */
/*        RESEÑAS RESPONSIVAS     */
/* ============================== */
@media (max-width: 1024px) {
    .carousel {
        margin-top: 8vh;
        flex-direction: row;
        width: 100%;
    }

    #resenas-container {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 2vw;
        margin: 0;
    }

    .resena {
        width: 48vw;
        height: 40vw;
        margin: 0;
    }

    .imagen-perfil {
        width: 5vw;
        height: 5vw;
    }
}

@media (max-width: 768px) {
    .arrow {
        display: none;
    }
}

@media (max-width: 425px) {
    .carousel {
        flex-direction: column;
        width: 100%;
    }

    #resenas-container {
        flex-direction: column;
        width: 100%;
        gap: 4vh;
        margin: 0;
    }

    .resena {
        width: 80vw;
        height: 80vw;
        margin: 0 auto;
    }

    .imagen-perfil {
        width: 8vw;
        height: 8vw;
    }
}

/* ============================== */
/*       CONTACT SECTION          */
/* ============================== */
.container-contacto {
    color: var(--blanco);
    background-color: var(--negro);
    padding: 10vh 15vh;
    display: flex;
}


/* Contenedor de la información de contacto */
#Contacto {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================== */
/*        TEXT STYLES             */
/* ============================== */
.container-contacto h2 {
    margin: 0;
    margin-bottom: 3vh;
}

#ContenidoDelContacto {
    margin-bottom: 3vh;
}

/* ============================== */
/*    CONTACT INFO ANIMATION      */
/* ============================== */
.contenido_contacto {
    display: flex;
    align-items: center;
    margin-bottom: 3vh;
    opacity: 0;
    transform: translateX(-2vw);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.contenido_contacto.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* ============================== */
/*       MAP STYLES               */
/* ============================== */
#mapa {
    flex: 1.5;
    height: 60vh;
}

#mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================== */
/*    RESPONSIVE DESIGN (TABLETS) */
/* ============================== */
@media (max-width: 1024px) {
    .container-contacto {
        flex-direction: column;
        padding: 5vw;
    }

    #Contacto {
        order: 1;
        margin-bottom: 1.5vh;
        width: 100%;
    }

    #mapa {
        order: 2;
        height: 50vh;
        flex: none;
    }
}

/* ============================== */
/*    RESPONSIVE DESIGN (MÓVILES) */
/* ============================== */
@media (max-width: 425px) {
    .container-contacto {
        padding: 5vh 5vw; /* Modificación 2: padding vertical en vh */
    }

    #mapa {
        height: 35vh;
    }
}

/* ============================== */
/*        INDEX PAGE STYLES       */
/* ============================== */

/* ============================== */
/*        HERO SECTION            */
/* ============================== */


.index-page .hero {
    background-color: #000000;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./img/inicio01.jpg');
    background-repeat: no-repeat;
    background-size: 120% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 0% 28%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste para pantallas medianas */
@media (max-width: 1024px) {
    .index-page .hero {
        height: 90vh;
        background-size: cover;
        background-position: center center;
    }
}

/* Ajuste para tabletas */
@media (max-width: 768px) {
    .index-page .hero {
        background-size: cover;
        background-position: center top; /* Prioriza la parte superior */
    }
}

/* Ajuste para móviles pequeños */
@media (max-width: 425px) {
    .index-page .hero {
        background-size: cover;
        background-position: center top; /* Asegura que la parte superior esté visible */
    }
}

/* Contenido dentro del hero */
.contenido-hero {
    position: absolute;
    top: 45vh;
    left: 5vw;
    text-align: left;
    color: var(--blanco);
}

.hero .contenido-hero h1 {
    margin-bottom: 2vh;
}

.hero .contenido-hero p {
    margin-bottom: 6.5vh;
}

@media (min-width: 769px) {
    .contenido-hero {
        max-width: 50vw;
    }
}

/* ============================== */
/*       WHY CHOOSE US SECTION    */
/* ============================== */
.index-page .elegirnos {
    background-color: var(--negro);
    color: var(--blanco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5.25vh 0 6.25vh 6.25vw;
    overflow: hidden;
}

/* Contenedor de texto */
.index-page .text-content {
    padding-right: 7vw;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    flex: 1;
}

.index-page .text-content p {
    margin-bottom: 5.5vh;
}

/* Imagen dentro de la sección */
/* Contenedor de la imagen */
.index-page .elegirnos .image-content {
    flex: 0 0 55vw;
    overflow: hidden;
    background-image: url('img/nosotros01.jpg');
    background-size: 120% auto; /* Zoom: Ancho, Alto */
    background-position: 37% 70%; /* Posición: Izquierda, Arriba */
    background-repeat: no-repeat;
    height: 60vh;
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Estado final cuando está animado */
.index-page .elegirnos .image-content.animated {
    transform: translateX(0);
    opacity: 1;
}

/* Ajustes para pantallas menores o iguales a 1024px */
@media (max-width: 1024px) {
    .contenido-hero {
        position: absolute;
        top: 30vh;
        left: 5vw;
        text-align: left;
        color: var(--blanco);
    }

    .contenido-hero {
        text-align: left;
    }
    
    .index-page .elegirnos {
        flex-direction: column;
        padding: 0 0 5.25vh 0;
    }

    .index-page .text-content {
        text-align: left;
        padding: 5.25vh 6.25vh 5.25vh 6.25vh;
    }

    .index-page .text-content p {
        width: 70%;
    }

    .index-page .elegirnos h2{
        margin: 0;
    }

    .index-page .elegirnos .image-content {
        text-align: center;
        flex: 0 0 auto;
        width: 100%;
        transform: translateY(50px);
        background-size: 120% auto;
        background-position: 37% 70%;
        height: 60vh;
        opacity: 0;
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .index-page .elegirnos .image-content.animated {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .contenido-hero {
        position: absolute;
        top: 35vh;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--blanco);
        width: 85%;
    }

    .contenido-hero h1,
    .contenido-hero p {
        margin: 0 auto;
    }

    .botones {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}

@media (max-width: 425px) {
    .contenido-hero {
        position: absolute;
        top: 30vh;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--blanco);
        width: 90%;
    }

    .contenido-hero h1,
    .contenido-hero p {
        margin: 0 auto;
    }

    .botones {
        display: flex;
        flex-direction: column; 
        align-items: center;
        gap: 10px;
    }
}

/* ============================== */
/*      FEATURED SERVICES SECTION */
/* ============================== */
.index-page .servicios {
    text-align: center;
    padding: 4vh 0;
}

/* Sección destacada de servicios con efecto hero */
.index-page .servicios.index-hero {
    position: relative;
}

/* Imagen de fondo de la sección de servicios */
.index-page .servicios.index-hero::before {
    content: '';
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./img/servicios01.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto; /* Zoom: Ancho, Alto */
    background-position: 37% 10%; /* Posición: Izquierda, Arriba */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Contenido de la sección de servicios */
.index-page .servicios-content {
    max-width: 95vw;
    margin: 0 auto;
    color: var(--blanco);
    padding: 2vh 5vw;
}

/* Estilo del título */
.index-page .servicios h3 {
    margin-bottom: 3.5vh;
}

/* Párrafo en la sección de servicios */
.index-page .servicios-content p {
    max-width: 70%;
    margin: 0 auto;
    margin-bottom: 8.5vh;
}

/* Contenedor de logos */
.index-page .logos-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1vh;
}

/* Elemento individual de logo */
.index-page .logo-item {
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Círculo contenedor de los logos */
.index-page .circle-logo {
    width: 14vw;
    height: 14vw;
    border-radius: 50%;
    background-color: var(--rojoTransparente);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5vh;
}

/* Ajuste del tamaño de las imágenes dentro del círculo */
.index-page .circle-logo img {
    max-width: 60%;
    max-height: 60%;
}

/* Responsive para servicios */
@media (max-width: 1024px) {
    .index-page .servicios {
        padding: 0;
    }
    .index-page .servicios.index-hero {
        min-height: 80vh;
    }

    .index-page .servicios-content {
        padding: 0;
    }

    .index-page .servicios-content p {
        max-width: 85%;
    }
    
    .index-page .servicios.index-hero::before {
        background-size: cover; /* Mantengo cover */
        background-position: center; /* Centrado para mejor visibilidad */
    }

    .index-page .logos-container p{
        margin: 0;
    }
    
    .index-page .logo-item{
        margin-bottom: 5vh;;
    }

    .index-page .circle-logo {
        width: 18vw;
        height: 18vw;
        margin-bottom: 2vh;
    }
}

@media (max-width: 425px) {
    .index-page .circle-logo {
        width: 60vw;
        height: 60vw;
    }

    .index-page .logo-item {
        flex: 1 1 100%;
    }
}

/* ============================== */
/*        SERVICIOS PAGE STYLES   */
/* ============================== */

/* ============================== */
/*        HERO SECTION            */
/* ============================== */
.servicios-page .hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./img/servicios01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste para pantallas medianas */
@media (max-width: 1024px) {
    .servicios-page .hero {
        height: 90vh;
        background-size: cover;
        background-position: center center;
    }
}

/* Ajuste para tabletas */
@media (max-width: 768px) {
    .servicios-page .hero {
        background-size: cover;
        background-position: center top;
    }
}

/* Ajuste para móviles pequeños */
@media (max-width: 425px) {
    .servicios-page .hero {
        background-size: cover;
        background-position: center top;
    }
}

/* ============================== */
/*        SERVICIOS SECTION       */
/* ============================== */
.servicios-page .servicios {
    text-align: center;
    padding: 10vh 4vw;
    background-color: var(--negro); /* Usando variable */
}

/* Contenido de la sección de servicios */
.servicios-page .servicios-content {
    color: var(--blanco); /* Usando variable */
}

/* Estilo del título */
.servicios-page .servicios h3 {
    margin-bottom: 3.5vh;
}

/* Párrafo en la sección de servicios */
.servicios-page .servicios-content p {
    margin-bottom: 8.5vh;
}

/* Contenedor de logos */
.servicios-page .logos-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1vh;
}

/* Elemento individual de logo */
.servicios-page .logo-item {
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Texto debajo de cada logo */
.servicios-page .logo-item p {
    margin-bottom: 0;
}

/* Círculo contenedor de los logos */
.servicios-page .circle-logo {
    width: 14vw;
    height: 14vw;
    border-radius: 50%;
    background-color: var(--rojoTransparente);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5vh;
}

/* Ajuste del tamaño de las imágenes dentro del círculo */
.servicios-page .circle-logo img {
    max-width: 60%;
    max-height: 60%;
}

/* Responsive para servicios */
@media (max-width: 1024px) {
    .servicios-page .circle-logo {
        width: 30vw;
        height: 30vw;
    }

    .servicios-page .logos-container {
        flex-wrap: wrap;
    }

    .servicios-page .logo-item {
        flex: 1 1 calc(50% - 1vh);
    }
}

@media (max-width: 425px) {
    .servicios-page .circle-logo {
        width: 60vw;
        height: 60vw;
    }

    .servicios-page .logo-item {
        flex: 1 1 100%;
    }
}

/* ============================== */
/*      SERVICIOS DESTACADOS      */
/* ============================== */
.servicios-page .servicios-featured {
    position: relative;
    overflow: hidden;
}

.servicios-page .featured-image-div {
    width: 100%;
    height: 115vh;
    background-repeat: no-repeat;
    display: block;
}

/* Asignamos las imágenes específicas */
.servicios-page .featured-image-div1 {
    background-image: url('img/servicios02.jpg');
    background-size: 100% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 0% 70%; /* Empieza desde la esquina superior izquierda */
}

.servicios-page .featured-image-div2 {
    background-image: url('img/servicios03.jpg');
    background-size: 100% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 0% 90%; /* Empieza desde la esquina superior izquierda */
}

.servicios-page .featured-image-div3 {
    background-image: url('img/servicios04.jpg');
    background-size: 100% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 0% 0%; /* Empieza desde la esquina superior izquierda */
}

.servicios-page .featured-image-div4 {
    background-image: url('img/servicios06.jpg');
    background-size: 100% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 70% 30%; /* Empieza desde la esquina superior izquierda */
}

.servicios-page .info-box {
    background-color: var(--negro);
    color: var(--blanco);
    position: absolute;
    padding: 5vh 5vw;
    box-sizing: border-box;
    z-index: 1;
    width: calc(100% - 50vw);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

.info-box h2 {
    margin: 0;
}

.servicios-page .info-box.left-aligned {
    left: 5vw;
    transform: translateX(-100%);
}

.servicios-page .info-box.right-aligned {
    right: 5vw;
    transform: translateX(100%);
}

/* Posiciones específicas de las cajas de información */
.servicios-page .info-box1 { top: 17.6%; }
.servicios-page .info-box2 { top: 25.7%; }
.servicios-page .info-box3 { top: 68%; }
.servicios-page .info-box4 { top: 77.25%; }

/* Espacios en blanco entre secciones */
.servicios-page .white-space1 {
    height: 50vh;
    background-color: var(--blanco);
}

.servicios-page .white-space2 {
    height: 13.5vh;
    background-color: var(--blanco);
}

.servicios-page .white-space3 {
    height: 50vh;
    background-color: var(--blanco);
}

@media (max-width: 1440px) {
    .servicios-page .info-box {
        width: calc(100% - 45vw);
    }
    .servicios-page .info-box1 { top: 18%; }
    .servicios-page .info-box2 { top: 25.7%; }
    
    .servicios-page .white-space1,
    .servicios-page .white-space3{
        height: 30vh;
    }
    .servicios-page .info-box3 { top: 67.5%; }
    .servicios-page .info-box4 { top: 75.5%; }
}

@media (max-width: 1024px) {
    .servicios-page .info-box {
        width: calc(100% - 45vw);
    }
    .servicios-page .info-box1 { top: 16.5%; }
    .servicios-page .info-box2 { top: 29%; }
    
    .servicios-page .white-space1,
    .servicios-page .white-space3{
        height: 30vh;
    }
    .servicios-page .info-box3 { top: 62%; }
    .servicios-page .info-box4 { top: 75%; }
}

@media (max-width: 768px) {
    .servicios-page .servicios-featured {
        display: flex;
        flex-direction: column;
    }

    .servicios-page .featured-image-div {
        height: 50vh;
    }

    .servicios-page .info-box {
        position: static;
        width: 66.66%;
        margin: 3vh auto 0;
        opacity: 0;
        transform: translateY(50px);
    }

    .servicios-page .info-box.left-aligned,
    .servicios-page .info-box.right-aligned {
        left: auto;
        right: auto;
    }

    .servicios-page .featured-image-div1 { order: 1; }
    .servicios-page .info-box1 { order: 2; }
    .servicios-page .white-space1 { order: 3; }
    .servicios-page .featured-image-div2 { order: 4; }
    .servicios-page .info-box2 { order: 5; }
    .servicios-page .white-space2 { order: 6; }
    .servicios-page .featured-image-div3 { order: 7; }
    .servicios-page .info-box3 { order: 8; }
    .servicios-page .white-space3 { order: 9; }
    .servicios-page .featured-image-div4 { order: 10; }
    .servicios-page .info-box4 { order: 11; }
    .servicios-page .white-space4 { order: 12; }

    .servicios-page .white-space1,
    .servicios-page .white-space3,
    .servicios-page .white-space4 {
        height: 20vh;
        background-color: var(--blanco);
    }

    .servicios-page .info-box {
        margin-top: -15vh;
    }
}

@media (max-width: 425px) {
    .servicios-page .featured-image-div {
        height: 40vh; /* Más pequeña en móviles */
    }

    .servicios-page .info-box {
        width: 90%;
        margin-top: -10vh;
    }
}

/* ============================== */
/*     SOBRE NOSOTROS PAGE        */
/* ============================== */

/* ============================== */
/*          HERO SECTION          */
/* ============================== */
.sobre-nosotros-page .hero {
    background-color: #000000;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./img/nosotros01.jpg');
    background-repeat: no-repeat;
    background-size: 120% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 50% 40%; /* Empieza desde la esquina superior izquierda */
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste para pantallas medianas */
@media (max-width: 1024px) {
    .sobre-nosotros-page .hero {
        height: 90vh;
        background-size: cover;
        background-position: center center;
    }
}

/* Ajuste para tabletas */
@media (max-width: 768px) {
    .sobre-nosotros-page .hero {
        background-size: cover;
        background-position: center top; /* Prioriza la parte superior */
    }
}

/* Ajuste para móviles pequeños */
@media (max-width: 425px) {
    .sobre-nosotros-page .hero {
        background-size: cover;
        background-position: center top; /* Asegura que la parte superior esté visible */
    }
}

/* ============================== */
/*        ESTADÍSTICAS            */
/* ============================== */
.sobre-nosotros-page .estadisticas {
    background-color: var(--negro);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10vh 15vw;
}

.sobre-nosotros-page .circulo {
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    background-color: var(--rojoTransparente); 
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blanco);
    text-align: center;
}

.sobre-nosotros-page .circulo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.circulo-content h1{
    margin: 0;
}

.circulo-content p{
    margin: 0;
}

/* Responsive para estadísticas */
@media (max-width: 1024px) {
    .sobre-nosotros-page .estadisticas {
        height: 60vh;
    }

    .sobre-nosotros-page .circulo {
        width: 22vw;
        height: 22vw;
    }
}

@media (max-width: 768px) {
    .sobre-nosotros-page .estadisticas {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 5vh 5vw;
    }

    .sobre-nosotros-page .circulo {
        width: 25vw;
        height: 25vw;
        margin: 2vh 1vw;
    }
}

@media (max-width: 425px) {
    .sobre-nosotros-page .estadisticas {
        flex-direction: column;
        padding: 5vh 5vw;
        height: auto; 
    }

    .sobre-nosotros-page .circulo {
        width: 50vw;
        height: 50vw;
        margin: 3vh 0;
    }
}

/* ============================== */
/*      SOBRE NOSOTROS FEATURED   */
/* ============================== */
.sobre-nosotros-page .sobre-nosotros-featured {
    position: relative;
    overflow: hidden;
}

.sobre-nosotros-page .featured-image-div {
    height: 115vh;
    background-image: url('img/nosotros02.jpg');
    background-size: 100% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 50% 30%; /* Empieza desde la esquina superior izquierda */
    background-repeat: no-repeat;
    display: block;
}

.sobre-nosotros-page .sobre-nosotros-featured .info-box {
    background-color: var(--negro);
    color: var(--blanco);
    position: absolute;
    padding: 5vh 5vw;
    box-sizing: border-box;
    z-index: 1;
    width: calc(100% - 55vw);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

.sobre-nosotros-page .sobre-nosotros-featured .info-box.right-aligned {
    right: 5.5vw;
    bottom: 12vh;
}

.sobre-nosotros-page .sobre-nosotros-featured .white-space {
    height: 35vh;
    background-color: var(--blanco);
}

/* Responsive para pantallas ≤ 1024px */
@media (max-width: 1024px) {
    .sobre-nosotros-page .sobre-nosotros-featured .info-box {
        width: calc(100% - 45vw);
    }

    .sobre-nosotros-page .sobre-nosotros-featured .info-box.right-aligned {
        bottom: 25vh;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .white-space {
        height: 30vh;
    }
}

/* Responsive para pantallas ≤ 768px */
@media (max-width: 768px) {
    .sobre-nosotros-page .sobre-nosotros-featured {
        display: flex;
        flex-direction: column;
    }

    .sobre-nosotros-page .featured-image-div {
        height: 50vh;
        width: 100%;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .info-box {
        position: static;
        width: 66.66%;
        margin: 3vh auto 0;
        order: 2;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .info-box.right-aligned {
        right: auto;
        bottom: auto;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .white-space {
        height: 25vh;
        order: 3;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .info-box {
        margin-top: -20vh;
    }
}

/* Responsive para pantallas ≤ 425px */
@media (max-width: 425px) {
    .sobre-nosotros-page .featured-image-div {
        height: 50vh; /* Más pequeña en móviles */
        width: 100%;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .info-box {
        width: 90%;
        margin-top: -20vh;
        transform: translateY(50px);
        opacity: 0;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .info-box.animated {
        transform: translateY(0);
        opacity: 1;
    }

    .sobre-nosotros-page .sobre-nosotros-featured .white-space {
        height: 10vh;
    }
}

/* ============================== */
/*      NOSOTROS CONTAINER        */
/* ============================== */
.sobre-nosotros-page .nosotros-container {
    background-color: var(--negro);
    color: var(--blanco);
    padding: 10vh 15vh;
}

.sobre-nosotros-page .nosotros-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: flex-start;
    gap: 4vw;
}

.sobre-nosotros-page .nosotros-content h2{
    margin: 0;
    line-height: 1;
}

.sobre-nosotros-page .text-box {
    flex-basis: calc(33.333% - 3vw);
    display: flex;
    align-items: flex-start;
}

.sobre-nosotros-page .icon-wrapper {
    width: 4.5vh;
    height: 4.5vh;
    margin-right: 1vw;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.sobre-nosotros-page .icon-wrapper svg {
    width: 75%;
    height: 75%;
    fill: var(--blanco);
}

.sobre-nosotros-page .text-content {
    flex: 1;
    margin: 0;
}

/* Responsive para nosotros-container */
@media (max-width: 1024px) {
    .sobre-nosotros-page .nosotros-content {
        justify-content: space-around;
    }

    .sobre-nosotros-page .text-box {
        flex-basis: calc(50% - 2vw);
        margin-bottom: 4vh;
    }

    .sobre-nosotros-page .icon-wrapper {
        margin-top: 3.5vw;
    }
}

@media (max-width: 768px) {
    .sobre-nosotros-page .nosotros-content {
        justify-content: center;
    }

    .sobre-nosotros-page .text-box {
        flex-basis: 100%;
        margin-bottom: 3vh;
    }

    .sobre-nosotros-page .icon-wrapper {
        margin-top: 7.5vw;
    }
}

@media (max-width: 425px) {
    .sobre-nosotros-page .nosotros-container {
        padding: 5vh 5vw;
    }

    .sobre-nosotros-page .nosotros-content {
        flex-direction: column;
        gap: 3vh;
        align-items: center;
    }

    .sobre-nosotros-page .text-box {
        flex-basis: 100%;
        max-width: 90%;
        align-items: flex-start;
    }

    .sobre-nosotros-page .icon-wrapper {
        width: 3.5vh;
        height: 3.5vh;
        margin-right: 2vw;
        margin-top: 1vh;
    }

    .sobre-nosotros-page .icon-wrapper svg {
        width: 70%;
        height: 70%;
    }
}

.sobre-nosotros-page .nosotros3 {
    width: 100%;
    height: 115vh;
    background-image: url('img/nosotros03.jpg');
    background-size: 100% auto;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    display: block;
}

@media (max-width: 1024px) {
    .sobre-nosotros-page .nosotros3 {
        height: 80vh;
    }
    
}
@media (max-width: 768px) {
    .sobre-nosotros-page .nosotros3 {
        height: 60vh;
    }
}

@media (max-width: 425px) {
    .sobre-nosotros-page .nosotros3 {
        height: 35vh;
    }
}


/* ============================== */
/*       CONTACT PAGE STYLES      */
/* ============================== */

/* ============================== */
/*        HERO SECTION            */
/* ============================== */
.contacto-page .hero {
    background-color: #000000;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./img/contacto01.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto; /* Usa el 100% del ancho y alto de la imagen */
    background-position: 50% 36%; /* Empieza desde la esquina superior izquierda */
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste para pantallas medianas */
@media (max-width: 1024px) {
    .contacto-page.hero {
        height: 90vh;
        background-size: cover;
        background-position: center center;
    }
}

/* Ajuste para tabletas */
@media (max-width: 768px) {
    .contacto-page .hero {
        background-size: cover;
        background-position: center top; /* Prioriza la parte superior */
    }
}

/* Ajuste para móviles pequeños */
@media (max-width: 425px) {
    .contacto-page .hero {
        background-size: cover;
        background-position: center top; /* Asegura que la parte superior esté visible */
    }
}