/*========== Fuente ==========*/
@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Delius+Swash+Caps&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/*========== Variables y Reset (sin cambios) ==========*/
:root {
    --blue-color: #013963;
    --orange-color: #E49C11;
    --white-color: #fff;
    --grey-color:#f0f0f0;
    --whatsapp-green: #25D366;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --normal-font-size: 1.1rem;
    --header-height: 6rem;

    --font-primary: 'Raleway', sans-serif; /* Fuente principal para la mayoría del texto */
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: 0.3s ease-in-out;
}

body {
    font-size: var(--normal-font-size);
    background-color: var(--white-color);
    line-height: 1.6;
    font-family: var(--font-primary);
}

/*========== CONTAINER (Opcional, para centrar contenido) ==========*/
.containerNav {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/*========== HEADER ==========*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--white-color);
    box-shadow: 0 6px 12px var(--shadow-color);
    z-index: 1000;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* El nav ocupa toda la altura del header */
}

/*========== LOGO Y BRAND ==========*/
#ContenedorLogo {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* Ajuste del espacio */
}

.logo {
    height: 7.2rem; /* Ajuste del tamaño del logo */
}

.brand {
    font-size: 1.70rem; /* Ajuste del tamaño de la marca */
    font-weight: 700;
}

.identi {
    color: var(--blue-color);
}

.web {
    color: var(--orange-color);
}

/*========== NAVBAR ==========*/
.nav__toggle {
    display: none; /* Oculto en pantallas grandes */
}

.nav__burger,
.nav__close {
    display: none; /* Ocultos en pantallas grandes */
}

.nav__menu {
    list-style: none;
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos del menú */
    gap: 2rem; /* Ajuste del espacio entre los enlaces */
}

.nav__link {
    text-decoration: none;
    color: var(--blue-color);
    font-size: 1.2rem; /* Ajuste del tamaño de los enlaces */
    font-weight: 600;
    padding: 0.5rem 1rem; /* Ajuste del padding */
    position: relative;
}

/* Efecto hover */
.nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.25rem; /* Ajuste de la posición */
    width: 0;
    height: 0.2rem; /* Ajuste del grosor */
    background-color: var(--orange-color);
    transition: width 0.3s ease;
    transform: translateX(-50%);
}

.nav__link:hover {
    color: var(--orange-color);
}

.nav__link:hover::after {
    width: 60%; /* Ajuste del ancho del hover */
}

/*========== MEDIA QUERIES NAV ==========*/
@media screen and (max-width: 1037px) {
    .nav__menu {
        position: fixed;
        top: var(--header-height);
        left: -100%; /* Oculta el menú fuera de la pantalla inicialmente (izquierda) */
        background-color: var(--white-color);
        box-shadow: 0 4px 8px var(--shadow-color);
        width: 70%; /* Ocupa un porcentaje del ancho */
        height: calc(100vh - var(--header-height)); /* Ocupa la altura restante */
        padding-top: 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        transition: left 0.3s ease-in-out; /* Cambiamos right a left */
    }

    .nav__menu.show-menu {
        left: 0; /* Muestra el menú al desplazarlo desde la izquierda */
    }

    .nav__toggle {
        display: flex; /* Muestra el toggle en pantallas pequeñas */
        flex-direction: column; /* Apila los iconos */
        justify-content: center; /* Centra los iconos verticalmente */
        gap: 0.25rem; /* Espacio entre los iconos */
        cursor: pointer; /* Indica que es interactivo */
        z-index: 1010; /* Asegura que esté por encima del menú */
    }

    .nav__burger {
        font-size: 1.8rem; /* Ajuste del tamaño del icono burger */
        display: block; /* **Asegúrate de que el burger se muestre** */
        color: var(--blue-color); /* Asegúrate de que tenga un color visible */
    }

    .nav__close {
        font-size: 1.8rem; /* Ajuste del tamaño del icono close */
        position: absolute;
        right: 1.5rem; /* Mantenemos el icono de cerrar a la derecha */
        display: none; /* Inicialmente oculto */
        color: var(--blue-color); /* Asegúrate de que tenga un color visible */
    }

    .nav__link {
        padding: 1rem 1.5rem;
    }
}





/*========== HERO SECTION (MODIFICADO PARA ANIMACIÓN) ==========*/
#herox {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 65vh;
    color: rgb(255, 255, 255);
    width: 100%;
    position: relative;
    padding-top: calc(var(--header-height) + 2rem);
    margin-bottom: 2rem;
    overflow: hidden; /* Importante para el clipping de las imágenes */
}

.image-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    transition: transform 0.8s ease-in-out; /* Transición suave para el desplazamiento */
}

.image {
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    width: 100%; /* Cada imagen ocupa el 100% del ancho del contenedor */
    height: 100%;
    background-size: cover;
    background-position: center;
}

#herox h1 {
    z-index: 10;
    margin: 0 auto;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/*========== RESPONSIVE FOR HERO SECTION (SIN CAMBIOS IMPORTANTES PARA LA ANIMACIÓN) ==========*/

/* Pantallas más grandes (desktops) */
@media screen and (min-width: 993px) {
    #herox h1 {
        font-size: 3rem;
    }
}

/* Pantallas medianas (tablets) */
@media screen and (max-width: 992px) and (min-width: 601px) {
    #herox h1 {
        font-size: 2.8rem;
    }
}

/* Pantallas pequeñas (móviles) */
@media screen and (max-width: 600px) {
    #herox h1 {
        font-size: 2.2rem;
    }
}

/* Pantallas aún más pequeñas (móviles angostos) */
@media screen and (max-width: 400px) {
    #herox h1 {
        font-size: 2rem;
    }
}








/*========== ¿QUÉ HACEMOS? SECTION ==========*/
#que-hacemos {
    padding: 6rem 1rem;
    background-color: var(--white-color);
    width: 100%; /* Ocupa el 100% del ancho */
}

.que-hacemos-grid {
    display: flex; /* Usamos flexbox para la separación */
    justify-content: space-between; /* Separa la imagen y el contenido */
    align-items: center;
    max-width: 1200px; /* Ancho máximo del contenido */
    margin-inline: auto; /* Centra el contenido */
    padding-inline: 1rem; /* Añade un poco de padding horizontal dentro del contenedor */
    gap: 4rem; /* Añadimos un gap entre los elementos flex (imagen y texto) */
}

.que-hacemos-image {
    flex: 0 1 auto; /* La imagen ocupa su ancho natural */
    max-width: 45%; /* Limita el ancho máximo de la imagen */
}

.que-hacemos-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 8px 16px var(--shadow-color);
}

.que-hacemos-content {
    flex: 0 1 auto; /* El texto ocupa su ancho natural */
    max-width: 50%; /* Limita el ancho máximo del texto */
}

.que-hacemos-content h2 {
    font-size: 2.5rem;
    color: var(--blue-color);
    margin-bottom: 1.5rem;
}

.que-hacemos-content p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.15rem;
}

.que-hacemos-content ul {
    list-style: disc;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.que-hacemos-content ul li {
    line-height: 1.8;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

/*========== RESPONSIVE PARA ¿QUÉ HACEMOS? SECTION ==========*/

/* Pantallas más pequeñas (móviles) - Apilar imagen y texto */
@media screen and (max-width: 768px) {
    .que-hacemos-grid {
        flex-direction: column; /* Apila los elementos verticalmente */
        gap: 4rem; /* Aumentamos el gap entre la imagen y el texto apilados */
    }

    .que-hacemos-image {
        width: 80%; /* Ancho de la imagen en móviles */
        margin: 0 auto; /* Centra la imagen en móviles */
        max-width: none; /* Elimina la limitación de ancho en móviles */
    }

    .que-hacemos-content {
        width: 100%; /* El texto ocupa todo el ancho en móviles */
        text-align: center; /* Centra el texto en móviles */
        max-width: none; /* Elimina la limitación de ancho en móviles */
    }

    .que-hacemos-content h2 {
        font-size: 2rem;
    }

    .que-hacemos-content p,
    .que-hacemos-content ul li {
        font-size: 1rem;
        text-align: left; /* Alinea el texto a la izquierda en móviles */
    }
}

/* ========== SECCIÓN NUESTRO OBJETIVO ========== */
.objetivo-section {
    position: relative;
    padding: 80px 0;
    color: #fff; /* Texto blanco para contrastar con el fondo oscuro del parallax */
    overflow: hidden; /* Para que el contenido no se salga si las imágenes 3D son grandes */
   }
  
   .parallax-fondo {
    background-image: url('https://nathanielkam.com/wp-content/uploads/2020/05/florian-olivo-4hbJ-eymZ1o-unsplash.jpg'); /* Reemplaza con tu imagen */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
   }
  
   .parallax-capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay oscuro para mejorar la legibilidad del texto */
    z-index: 2;
   }
  
   .objetivo-section .contenedor {
    position: relative;
    z-index: 3;
    width: 80%;
    margin: auto;
   }
  
   .objetivo-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
   }
  
   .objetivo-texto .titulo-seccion {
    color: var(--white-color); /* Asegúrate de tener definida esta variable */
    margin-bottom: 20px;
   }
  
   .objetivo-descripcion {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
   }
  
   .caracteristicas-lista {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
   }
  
   .caracteristicas-lista li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
   }
  
   .caracteristicas-lista i {
    margin-right: 10px;
    color: var(--comercial-accent); /* O el color de acento que prefieras */
    font-size: 1.2rem;
   }
  
   .caracteristicas-lista strong {
    font-weight: bold;
    color: var(--white-color);
    margin-right: 5px;
   }
  
   .objetivo-visuales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
   }
  
   .mockup-3d {
    max-width: 40%; /* Ajusta el tamaño según necesites */
    height: auto;
   }
  
   .mockup-3d img {
    width: 100%;
    height: auto;
   }

   .boton-conocer2 {
    display: inline-block;
    background-color: #013963; /* Fondo azul */
    color: #E49C11; /* Texto naranja */
    border: 2px solid #013963; /* Borde azul */
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    margin-top: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
   }

   .boton-conocer2:hover {
    background-color: #E49C11; /* Fondo naranja al pasar el ratón */
    color: #013963; /* Texto azul al pasar el ratón */
    border-color: #E49C11; /* Borde naranja al pasar el ratón */
   }
  
   /* ========== RESPONSIVE ========== */
   @media screen and (max-width: 992px) {
    .objetivo-contenido {
    grid-template-columns: 1fr;
    text-align: center;
    }
  
    .objetivo-texto {
    margin-bottom: 40px;
    }
  
    .objetivo-visuales {
    flex-direction: column;
    }
  
    .mockup-3d {
    max-width: 60%;
    }
   }
  
   @media screen and (max-width: 600px) {
    .mockup-3d {
    max-width: 80%;
    }
  
    .caracteristicas-lista li {
    flex-direction: column;
    align-items: flex-start;
    }
  
    .caracteristicas-lista i {
    margin-bottom: 5px;
    }
   }



/*========== NUESTROS PLANES SECTION (MODIFIED FOR FULL-WIDTH, EQUAL HEIGHT, AND HOVER SPACE) ==========*/
#nuestros-planes {
    padding: 8rem 2rem;
    background-color: var(--white-color);
    text-align: center;
   }
  
   .subtitulo-planes {
    color: #6c757d;
    line-height: 2.2;
    margin: auto;
    font-size: 1.1rem;
    width: 60%;
   }
  
   .planes-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    height: 1200px; /* Increased height to accommodate hover */
   }
  
   .plan {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    border: 1px solid #013963;
    flex: 0 0 350px;
    margin: 0 1rem;
    scroll-snap-align: start;
    height: 75%;
   }
  
   .planes-grid .plan:first-child {
    margin-left: 0;
   }
  
   .planes-grid .plan:last-child {
    margin-right: 0;
   }
  
   .plan:hover {
    transform: scale(1.05) translateY(-0.5rem); /* Scale up on hover */
   }
  
   .plan h3 {
    font-size: 1.5rem;
    color: #013963;
    margin-bottom: 1rem;
    font-weight: 600;
   }
  
   .precio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
   }
  
   .precio span {
    font-size: 1rem;
    color: #6c757d;
    margin-right: 0;
    margin-bottom: 0.25rem;
   }
  
   .precio .cantidad {
    font-size: 2.5rem;
    font-weight: bold;
    color: #013963;
   }
  
   .precio span:last-child {
    font-size: 1rem;
   }
  
   .caracteristicas {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    max-height: 40%;
    /* Add this for smooth scrolling */
    transition: max-height 0.3s ease-out;
   }
  
   .caracteristicas.expanded {
    max-height: none;
    overflow-y: auto; /* Ensure scroll is enabled when expanded */
   }
  
   .caracteristicas::-webkit-scrollbar {
    width: 8px; /* Adjust width as needed */
   }
  
   .caracteristicas::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4); /* Dark grey, slightly transparent */
    border-radius: 4px; /* Rounded corners for the thumb */
   }
  
   /* Optional: Style on hover */
   .caracteristicas::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6);
   }
  
   .caracteristicas li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
   }
  
   .caracteristicas li:first-child {
    color: #E49C11;
    font-weight: bold;
   }
  
   .caracteristicas li:last-child {
    border-bottom: none;
   }
  
   .caracteristicas .fa-info-circle {
    color: #E49C11;
    font-size: 1rem;
    margin-right: 0.5rem;
   }
  
   .caracteristicas .fa-check-circle {
    color: green;
    font-size: 1rem;
    margin-right: 0.5rem;
   }
  
   .caracteristicas .fa-times-circle {
    color: red;
    font-size: 1rem;
    margin-right: 0.5rem;
   }
  
   .caracteristicas .separador {
    border-bottom: 2px solid #013963;
    margin: 1rem 0;
   }
  
   .boton-contratar,
   .boton-consultar {
    background-color: #E49C11;
    color: #013963;
    border: 2px solid #E49C11;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.2s ease-in-out;
    margin: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-self: flex-start;
   }
  
   .boton-contratar:hover,
   .boton-consultar:hover {
    background-color: #013963;
    color: #E49C11;
    border-color: #013963;
    transform: scale(1.05); /* Slightly scale up the button on hover */
   }
  
   .boton-consultar {
    background-color: transparent;
   }
  
   .nota-plan {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.5rem;
   }
  
   .nota-final {
    font-size: 1rem;
    color: #6c757d;
    margin-top: 2rem;
   }
  
   /* Plan Destacado */
   #nuestros-planes .plan-destacado {
    border: 3px solid #E49C11;
    position: relative;
   }
  
   #nuestros-planes .destacado-ribbon {
    position: absolute;
    top: 1rem;
    right: -1rem;
    background-color: #E49C11;
    color: #013963;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    font-weight: bold;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
    display: none;
   }
  
   #nuestros-planes .plan-destacado:hover .destacado-ribbon {
    display: block;
   }
  
   /*========== Estilos para el Plan Comercial (Especial) ==========*/
   .plan.plan-comercial-special {
    background-color: var(--blue-color); /* Fondo azul de IdentiWeb */
    color: var(--white-color);
    border-color: var(--blue-color);
    position: relative; /* Para la insignia */
    transition: transform 0.3s ease-in-out; /* Add transition for smooth hover */
   }
  
   .plan.plan-comercial-special:hover {
    transform: scale(1.05) translateY(-0.5rem); /* Scale up on hover */
   }
  
   .plan-comercial-special h3,
   .plan-comercial-special .precio span,
   .plan-comercial-special .precio .cantidad,
   .plan-comercial-special .caracteristicas li,
   .plan-comercial-special .caracteristicas .read-more,
   .plan-comercial-special button.boton-contratar {
    color: var(--white-color);
   }
  
   .plan-comercial-special .caracteristicas li i {
    color: var(--white-color);
   }
  
   /* Insignia de Tienda */
   .plan-comercial-special .store-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--orange-color); /* Color naranja para destacar */
    color: var(--white-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
   }
  
   /* Scrollbar Styling for PLAN COMERCIAL (Special) */
   .plan-comercial-special .caracteristicas::-webkit-scrollbar {
    width: 8px;
   }
  
   .plan-comercial-special .caracteristicas::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4); /* White, slightly transparent */
    border-radius: 4px;
   }
  
   .plan-comercial-special .caracteristicas::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
   }
  
   /* Specific styling for the "Leer más" link */
   .plan-comercial-special .read-more {
    color: var(--orange-color); /* Naranja para el "Leer más" */
   }
  
   .plan-comercial-special .read-more:hover {
    color: var(--white-color); /* Blanco al pasar el ratón */
   }
  
   /* Specific styling for the "Contratar" button */
   .plan-comercial-special button.boton-contratar {
    background-color: var(--orange-color); /* Naranja para el botón */
   }
  
   .plan-comercial-special button.boton-contratar:hover {
    background-color: var(--white-color);
    color: var(--blue-color); /* Texto azul al pasar el ratón */
   }
  
   /*========== RESPONSIVE DESIGN ==========*/
   @media screen and (max-width: 1200px) {
  
    .subtitulo-planes {
     color: #6c757d;
     line-height: 2.2;
     font-size: 1.1rem;
     width: 90%;
     margin-bottom: 10px;
    }
  
    #nuestros-planes .planes-grid {
     flex-direction: column;
     flex-wrap: wrap;
     gap: 2.5rem;
     padding: 0 1.5rem;
     overflow-x: hidden;
     width: 100%;
     height: auto; /* Allow auto height on smaller screens */
    }
  
    #nuestros-planes {
     margin: 0;
     margin-bottom: 2.5rem;
     flex-basis: auto;
     flex: 1;
     height: auto;
    }
    
    .plan {
     margin: 7vh 0;
     margin-bottom: 2.5rem;
     flex-basis: auto;
     flex: 1;
     height: auto;
    }
  
    #nuestros-planes .plan-destacado {
     border: 2px solid #E49C11;
     transform: scale(1) translateY(0);
    }
  
    #nuestros-planes{
     top: 0.75rem;
     right: -0.75rem;
     font-size: 0.8rem;
     padding: 0.5rem 1rem;
     display: block;
    }
    
    .destacado-ribbon {
     top: 1.75rem;
     right: -2.75rem;
     font-size: 0.8rem;
     padding: 0.5rem 1rem;
     display: block;
    }
    
   }
  
   /* Read More Functionality */
   .caracteristicas.expanded {
    max-height: none;
   }
  
   .read-more {
    color: #013963;
    cursor: pointer;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 0.5rem;
    display: block;
   }


/*========== SECCIÓN SOBRE NOSOTROS CON PARALLAX ==========*/
.sobre-nosotros-parallax {
    position: relative;
    padding: 8rem 2rem;
    overflow: hidden; /* Importante para el efecto parallax */
   }
  
   .parallax-sobre-nosotros-bg {
    background-image: url('https://admin.paxzu.com/uploads/images/noticias/hubspot/iStock-1334591614.jpg'); /* Reemplaza con tu imagen */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Colocar la imagen de fondo detrás del contenido */
   }
  
   .sobre-nosotros-parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Capa semitransparente para mejorar legibilidad */
    z-index: 0;
   }
  
   .sobre-nosotros-parallax .container {
    position: relative; /* Para que el contenido esté por encima del fondo */
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
   }
  
   .sobre-nosotros-parallax .sobre-nosotros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    align-items: center;
   }
  
   .sobre-nosotros-parallax .sobre-nosotros-imagen img {
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
  
   .sobre-nosotros-parallax .sobre-nosotros-texto h2 {
    color: #0672c4;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
   }
  
   .sobre-nosotros-parallax .sobre-nosotros-texto p {
    color: #c6d4e0;
    line-height: 1.8;
    margin-bottom: 1rem;
    font-size: 1.1rem;
   }
  
   .sobre-nosotros-parallax .boton-conocer {
    display: inline-block;
    background-color: #013963; /* Fondo azul */
    color: #E49C11; /* Texto naranja */
    border: 2px solid #013963; /* Borde azul */
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    margin-top: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
   }
  
   .sobre-nosotros-parallax .boton-conocer:hover {
    background-color: #E49C11; /* Fondo naranja al pasar el ratón */
    color: #013963; /* Texto azul al pasar el ratón */
    border-color: #E49C11; /* Borde naranja al pasar el ratón */
   }
  
   /*========== RESPONSIVE PARA SECCIÓN SOBRE NOSOTROS CON PARALLAX ==========*/
   @media screen and (max-width: 768px) {
    .sobre-nosotros-parallax .sobre-nosotros-grid {
    grid-template-columns: 1fr; /* Apilar imagen y texto en pantallas pequeñas */
    }
  
    .sobre-nosotros-parallax .sobre-nosotros-imagen {
    order: 1; /* Mostrar la imagen primero en pantallas pequeñas */
    }
  
    .sobre-nosotros-parallax .sobre-nosotros-texto {
    order: 2;
    }
   }








/*========== SECCIÓN OTROS SERVICIOS ==========*/
#otros-servicios {
    padding: 8rem 2rem;
    background-color: var(--grey-color); /* Fondo gris claro */
    text-align: center;
}

.subtitulo-otros-servicios {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 4rem;
    font-size: 1.1rem;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.servicio-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    text-align: center;
    padding-bottom: 2rem; /* Espacio para el botón */
}

.servicio-card:hover {
    transform: translateY(-0.5rem);
}

.servicio-card img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 1rem 1rem 0 0;
    aspect-ratio: 16 / 9; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Cubre el contenedor sin deformar */
}

.servicio-card h3 {
    color: #013963;
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    padding: 0 1rem;
}

.servicio-card p {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
}

.boton-info {
    display: inline-block;
    background-color: #E49C11; /* Fondo naranja */
    color: #013963; /* Texto azul */
    border: 2px solid #E49C11; /* Borde naranja */
    padding: 0.8rem 1.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.boton-info:hover {
    background-color: #013963; /* Fondo azul al pasar el ratón */
    color: #E49C11; /* Texto naranja al pasar el ratón */
    border-color: #013963; /* Borde azul al pasar el ratón */
}

.nota-otros-servicios {
    font-size: 1rem;
    color: #6c757d;
    margin-top: 3rem;
}

/*========== RESPONSIVE PARA SECCIÓN OTROS SERVICIOS ==========*/
@media screen and (max-width: 768px) {
    .servicios-grid {
        grid-template-columns: 1fr; /* Apilar las tarjetas en pantallas pequeñas */
    }
}






/*========== SECCIÓN NUESTROS TRABAJOS ==========*/
.seccion-nuestros-trabajos {
    padding: 8rem 2rem;
    background-color: #fff;
    text-align: center;
}

.titulo-seccion {
    color: #013963;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.subtitulo-seccion {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 4rem;
    font-size: 1.1rem;
}

.trabajos-grid {
    display: flex; /* Usamos flexbox para la disposición vertical */
    flex-direction: column; /* Apilar las tarjetas una debajo de la otra */
    gap: 2rem; /* Espacio entre las tarjetas */
    max-width: 90%; /* Ancho máximo del 90% del contenedor */
    margin: 0 auto; /* Centrar el grid */
    padding: 0 1rem; /* Ajustar el padding horizontal */
}

.trabajo-card {
    background-color: #f8f9fa;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex; /* Mantener flex para la disposición interna (iframe y texto) */
    align-items: stretch; /* Estirar los elementos internos verticalmente */
    flex-direction: row; /* Cambiar a fila para iframe y texto lado a lado */
}

.trabajo-preview {
    flex-basis: 60%; /* La previsualización ocupa el 60% del ancho */
    overflow: hidden;
    height: auto; /* Altura automática para adaptarse al iframe */
}

.trabajo-preview iframe {
    width: 100%;
    height: 400px; /* Altura deseada para la visualización del iframe */
    border: none;
}

.trabajo-info {
    flex-basis: 40%; /* La información ocupa el 40% del ancho */
    padding: 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar el contenido verticalmente */
}

.trabajo-info h3 {
    color: #013963;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.trabajo-info .descripcion-trabajo {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.trabajo-info .fecha-trabajo {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.boton-ver-sitio {
    display: inline-block;
    background-color: #013963;
    color: #E49C11;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-self: flex-start; /* Alinear el botón al inicio del contenedor info */
    margin: auto;
}

.boton-ver-sitio:hover {
    background-color: #E49C11;
    color: #013963;
}

/*========== RESPONSIVE PARA SECCIÓN NUESTROS TRABAJOS ==========*/
@media screen and (max-width: 768px) {
    .trabajos-grid {
        max-width: 95%; /* Ajustar ancho en móviles */
    }

    .trabajo-card {
        flex-direction: column; /* Apilar iframe y texto verticalmente en móviles */
        align-items: stretch;
    }

    .trabajo-preview {
        flex-basis: auto; /* Altura automática en móviles */
        height: 250px; /* Altura más controlada en móviles */
    }

    .trabajo-info {
        flex-basis: auto;
        padding: 1.5rem;
        text-align: center;
    }

    .boton-ver-sitio {
        align-self: center; /* Centrar botón en móviles */
    }
}


/*========== SECCIÓN NUESTRO EQUIPO ==========*/
#nuestro-equipo {
    padding: 8rem 2rem;
    background-color: #fff; /* Fondo blanco o el que prefieras */
    text-align: center;
}

.subtitulo-equipo {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 4rem;
    font-size: 1.1rem;
}

.equipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.miembro-card {
    background-color: var(--grey-color); /* Fondo gris claro para las tarjetas */
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

.miembro-info {
    padding: 2rem;
}

.miembro-info h3 {
    color: #013963;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.miembro-info .breve-info {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.miembro-info h4 {
    color: #013963;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: left;
}

.miembro-info .experiencia {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: left;
}

.miembro-info .cita {
    font-style: italic;
    color: #E49C11;
    font-size: 1.1rem;
    text-align: center;
    margin-top: 1rem;
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}

.boton-ver-mas {
    display: inline-block; /* Para que esté en línea con otros elementos de bloque */
    background-color: #013963; /* Un azul oscuro, similar al fondo del footer */
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    transition: background-color 0.3s ease-in-out;
    font-weight: 600;
    margin-top: 5rem; /* Espacio entre los botones */
 }
 
 .boton-ver-mas:hover {
    background-color: #E49C11; /* Naranja al pasar el ratón, similar a otros elementos */
 }

/*========== RESPONSIVE PARA SECCIÓN NUESTRO EQUIPO ==========*/
@media screen and (max-width: 768px) {
    .equipo-grid {
        grid-template-columns: 1fr; /* Apilar las tarjetas en pantallas pequeñas */
    }
}




/*========== SECCIÓN CONTACTO CON PARALLAX ==========*/
.contacto-parallax {
    position: relative;
    padding: 8rem 2rem;
    text-align: center;
    overflow: hidden; /* Para el efecto parallax */
   }
  
   .parallax-contacto-bg {
    background-image: url('https://media.istockphoto.com/id/2172494039/es/foto/servicio-de-asistencia-empresarial.jpg?s=612x612&w=0&k=20&c=9GoIERxzEqs7ehK0OxCqx5tzcvE1Ryg9504spDMKboQ='); /* Reemplaza con tu imagen */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Fondo detrás del contenido */
   }
  
   .contacto-parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.637); /* Fondo gris claro semitransparente */
    z-index: 0;
   }
  
   .contacto-parallax .container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
   }
  
   .contacto-parallax h2 {
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
   }
  
   .contacto-parallax .subtitulo-contacto {
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: 4rem;
    font-size: 1.1rem;
   }
  
   .contacto-parallax .contacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Aumenté el min-width para mejor espacio */
    gap: 4rem;
    align-items: start; /* Alineación superior para el logo */
   }
  
   .contacto-parallax .contacto-info {
    text-align: left;
   }
  
   .contacto-parallax .logo-contacto {
    text-align: center;
    margin-bottom: 2rem;
   }
  
   .contacto-parallax .logo-contacto img {
    max-width: 100%; /* Ajusta el tamaño del logo según necesites */
    height: auto;
   }
  
   .contacto-parallax .contacto-info h3 {
    color: #ffffff;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: center; /* Centrar el título en la info */
   }
  
   .contacto-parallax .contacto-info p {
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    text-align: center; /* Centrar la información */
   }
  
   .contacto-parallax .contacto-info a {
    color: #e7b95c;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
   }
  
   .contacto-parallax .contacto-info a:hover {
    color: #ffffff;
   }
  
   .contacto-parallax .contacto-info i {
    margin-right: 0.75rem;
    color: #ffffff;
   }
  
   .contacto-parallax .formulario-contacto {
    text-align: left;
    background-color: #fff; /* Fondo blanco para el formulario */
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
  
   .contacto-parallax .formulario-contacto h3 {
    color: #013963;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: center; /* Centrar el título del formulario */
   }
  
   .contacto-parallax .form-group {
    margin-bottom: 1.5rem;
   }
  
   .contacto-parallax .form-group label {
    display: block;
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 0.5rem;
   }
  
   .contacto-parallax .form-group input[type="text"],
   .contacto-parallax .form-group input[type="email"],
   .contacto-parallax .form-group input[type="tel"],
   .contacto-parallax .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
   }
  
   .contacto-parallax .form-group input[type="text"]:focus,
   .contacto-parallax .form-group input[type="email"]:focus,
   .contacto-parallax .form-group input[type="tel"]:focus,
   .contacto-parallax .form-group textarea:focus {
    border-color: #013963;
    outline: none;
   }
  
   .contacto-parallax .form-group textarea {
    resize: vertical;
   }
  
   .contacto-parallax .boton-enviar {
    background-color: #013963; /* Fondo azul */
    color: #E49C11; /* Texto naranja */
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
   }
  
   .contacto-parallax .boton-enviar:hover {
    background-color: #E49C11; /* Fondo naranja al pasar el ratón */
    color: #013963; /* Texto azul al pasar el ratón */
   }
  
   /*========== RESPONSIVE PARA SECCIÓN CONTACTO CON PARALLAX ==========*/
   @media screen and (max-width: 768px) {
    .contacto-parallax .contacto-grid {
    grid-template-columns: 1fr;
    }
  
    .contacto-parallax .contacto-info {
    text-align: center; /* Centrar la info en móviles */
    }
  
    .contacto-parallax .formulario-contacto h3 {
    text-align: left;
    }
  
    .contacto-parallax .boton-enviar {
    width: 100%;
    }
   }

.whatsapp-trigger {
    position: fixed;
    bottom: 2rem;
    left: 2rem; /* Default left position */
    display: none;
    align-items: center;
    background-color: var(--white-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    overflow: hidden; /* Hide the info initially */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0.8;
    z-index: 1000;
}

.whatsapp-trigger:hover {
    opacity: 1;
    transform: scale(1.02);
}

.whatsapp-icon {
    background-color: var(--whatsapp-green);
    color: var(--white-color);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.whatsapp-info {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    transform: translateX(-100%); /* Hide initially */
    transition: transform 0.3s ease-in-out;
}

.whatsapp-trigger.active .whatsapp-info {
    transform: translateX(0); /* Slide in */
}

.whatsapp-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--blue-color);
    background-color: var(--white-color);
}

.whatsapp-text {
    font-size: 0.9rem;
    color: #333;
}

/* Mobile Styles */
.whatsapp-trigger.mobile {
    left: 0.5rem; /* Adjust left position for mobile */
    bottom: 5rem; /* Move up a bit for mobile */
    width: 3rem; /* Smaller width */
    height: 3rem; /* Smaller height */
    border-radius: 50%; /* Make it circular */
    overflow: hidden; /* Hide info */
}

.whatsapp-trigger.mobile .whatsapp-icon {
    width: 100%;
    height: 100%;
    font-size: 1.2rem; /* Smaller icon */
}

.whatsapp-trigger.mobile .whatsapp-info {
    display: none !important; /* Hide info on mobile */
}

#return-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    z-index: 1000;
}

.planet-container {
    width: 3rem;
    height: 3rem;
    position: relative;
}

.planet {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--grey-color); /* Planet base color */
    position: relative;
    overflow: hidden;
    display: flex; /* Center the arrow */
    align-items: center;
    justify-content: center;
}

.planet__core {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--blue-color); /* Planet core color */
    border-radius: 50%;
    transition: height 0.1s linear; /* Faster fill */
    display: flex; /* Center the arrow within the core */
    align-items: center;
    justify-content: center;
    color: var(--white-color); /* Arrow color */
    font-size: 1.2rem; /* Adjust arrow size */
}

.planet__ring {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.25rem solid var(--orange-color); /* Ring color */
    animation: rotateRing 1.5s linear infinite;
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Dynamic filling based on scroll */
:root {
    --scroll-percentage: 0%;
}

.planet__core {
    height: var(--scroll-percentage);
}



/*========== FOOTER ==========*/
.footer {
    background-color: #013963; /* Fondo azul oscuro */
    color: #fff;
    padding: 6rem 2rem;
    text-align: left;
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer__title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.footer__description {
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.footer__links {
    list-style: none;
    padding: 0;
}

.footer__links li {
    margin-bottom: 0.75rem;
}

.footer__links a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    font-size: 1rem;
}

.footer__links a:hover {
    color: #E49C11; /* Naranja al pasar el ratón */
}

.footer__links i {
    margin-right: 0.5rem;
}

.footer__social {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}

.footer__social a {
    color: #ddd;
    font-size: 1.2rem;
    transition: color 0.3s ease-in-out;
}

.footer__social a:hover {
    color: #E49C11;
}

.footer__copyright {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #333;
    font-size: 0.9rem;
}

.footer__copyright p {
    margin-bottom: 0.5rem;
}

.footer-secure {
    display: flex;
    align-items: center;
    gap: 10px; /* Spacing between icon and text */
    font-size: 0.9rem; /* Adjust font size as needed */
    color: #6c757d; /* Grey text color */
}

.footer-secure i {
    color: #007bff; /* Blue lock icon color */
    font-size: 1.2rem; /* Adjust icon size */
}

.footer-secure strong {
    color: #000; /* Strong text color */
}

/*========== RESPONSIVE FOOTER ==========*/
@media screen and (max-width: 768px) {
    .footer {
        text-align: center;
    }

    .footer__grid {
        grid-template-columns: 1fr; /* Apilar los widgets en pantallas pequeñas */
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .footer__widget {
        text-align: center;
    }

    .footer__links {
        text-align: center;
    }

    .footer__social {
        justify-content: center;
    }
}