html {
  scroll-behavior: smooth;
}

/* 
    Establece la fuente principal de todo el sitio y elimina el margen por defecto del body 
    para que el contenido ocupe todo el ancho y alto de la ventana.
*/
body {
    font-family: 'Open Sans', Arial, sans-serif; /* Fuente principal */
    margin: 0; /* Elimina espacio exterior alrededor de la página */
    background: #200a2a; /* Fondo morado oscuro */
}

/* Loading screen: fondo oscuro cubre toda la pantalla */
#loading-screen {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: #200a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 5s, transform 3s cubic-bezier(.77,0,.18,1);
    will-change: transform;
}

/* Contenedor centrado */
.loader-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

/* Logo centrado */
.loader-logo {
    width: 120px;
    height: 120px;
    z-index: 2;
    position: relative;
    display: block;
    margin: 0 auto;
}

/* Spinner circular alrededor del logo */
.loader-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170px;
    height: 170px;
    transform: translate(-50%, -50%);
    border: 6px solid #b3aad6;
    border-top: 6px solid #fff;
    border-radius: 50%;
    animation: spin 1.1s linear infinite;
    z-index: 1;
    box-sizing: border-box;
}

@keyframes spin {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Oculta el loading screen cuando termina */
#loading-screen.hide {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100vh); /* Se desliza hacia arriba */
}



/* 
    Sección principal del encabezado (hero-header) 
    Aplica una imagen de fondo, ocupa toda la altura de la ventana y 
    organiza el contenido en columna.
*/
.hero-header {
    position: relative; /* Permite posicionar elementos hijos de forma absoluta si es necesario */
    min-height: 100vh; /* Ocupa al menos toda la altura de la ventana */
    background: url('images/fondo-principal.png') center/cover no-repeat; /* Imagen de fondo centrada y cubierta */
    display: flex; /* Usa flexbox para organizar el contenido */
    flex-direction: column; /* Organiza los hijos en columna */
    justify-content: flex-start; /* Alinea el contenido al inicio verticalmente */
}

/* 
    Menú principal (barra superior)
    Fondo semitransparente para dejar ver la imagen de fondo, 
    alinea el logo a la izquierda y el menú a la derecha.
*/
.menu-principal {
    display: flex; /* Flexbox para alinear logo y menú */
    justify-content: space-between; /* Espacio entre logo y menú */
    align-items: center; /* Centra verticalmente los elementos */
    background: rgba(32, 10, 42, 0.92); /* Color #200a2a con transparencia */
    padding: 0 60px; /* Espacio a los lados del menú */
    height: 90px; /* Altura fija de la barra */
    position: relative; /* Para controlar el stacking context */
    z-index: 2; /* Asegura que el menú esté sobre la imagen de fondo */
}

/* Menú fijo y sin espacio extra en páginas que no son index */
.no-bg .menu-principal {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    background: #200a2a !important;
    height: auto;
    min-height: 0;
    z-index: 10;
    box-shadow: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* 
    Elimina el fondo de la sección hero-header solo en proyectos.html 
*/
.no-bg .hero-header {
    background: url('images/proyectos-fondo.png') center/cover no-repeat !important;
    background-attachment: fixed;
}

/* Centra el contenido principal del hero en la página de proyectos (no-bg) */
.no-bg .hero-header {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* Centra verticalmente */
    align-items: center;       /* Centra horizontalmente */
    min-height: 70vh;          /* Ajusta la altura mínima según tu diseño */
    padding-top: 120px;        /* Espacio para el menú fijo */
    padding-bottom: 40px;
}

.no-bg .hero-content {
    margin: 0;                 /* Elimina márgenes laterales */
    max-width: 700px;
    text-align: center;        /* Centra el texto */
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Elimina el margen superior de la primera sección en páginas no index */
.no-bg .clientes-proyectos,
.no-bg section:first-of-type {
    margin-top: 0 !important;
    padding-top: 100px !important; /* Ajusta si quieres un poco de espacio */
}

.no-bg .hero-content {
    justify-content: center; /* Centra el contenido verticalmente */
}

.no-bg .hero-content h1 {
    background: linear-gradient(90deg, #a3f0fa 0%, #b3aad6 100%);
    margin: 85px 0 55px 0; /* Espacio arriba y abajo del título */
    justify-content: center !important; /* Centra el título horizontalmente */
    align-content: center !important; /* Centra el título verticalmente */
    background-clip: text;
    color: transparent; /* Hace que el texto sea transparente */
    margin: 85px 0 55px 0; /* Espacio arriba y abajo del título */
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
}

.no-bg .hero-content p {
    font-size: 1.5rem; /* Tamaño de fuente del párrafo */

    color: white; /* Color del texto */

}

/* 
    Logo de la empresa
    Define el alto de la imagen para mantener proporción y alineación.
*/
.logo img {
    height: 95px; /* Altura del logo */
}

/* 
    Lista del menú de navegación
    Elimina viñetas, muestra los elementos en línea y agrega espacio entre ellos.
*/
.menu-list {
    list-style: none; /* Elimina puntos de lista */
    display: flex; /* Muestra los elementos en fila */
    gap: 40px; /* Espacio horizontal entre cada enlace */
    margin: 0; /* Elimina margen exterior de la lista */
    padding: 0; /* Elimina padding interior de la lista */
}

/* 
    Enlaces del menú
    Color blanco, negrita, sin subrayado, transición suave al hacer hover,
    y padding para aumentar el área clickeable.
*/
.menu-list a {
    color: #fff; /* Color de texto del menú */
    font-weight: 700; /* Negrita */
    text-decoration: none; /* Sin subrayado */
    font-size: 1.1rem; /* Tamaño de fuente del menú */
    transition: color 0.2s; /* Transición suave de color al hacer hover */
    padding: 8px 0; /* Espacio vertical para facilitar el clic */
    border-bottom: 2px solid transparent; /* Línea inferior invisible por defecto */
}

/* 
    Efecto hover en los enlaces del menú
    Cambia el color y muestra una línea inferior morada (#b3aad6) al pasar el mouse.
*/
.menu-list a:hover {
    color: #b3aad6; /* Color morado al hacer hover */
    border-bottom: 2px solid #b3aad6; /* Línea inferior visible al hacer hover */
}

/* 
    Contenido principal del héroe (texto y botón)
    Color blanco, ancho máximo para mejor lectura y margen izquierdo para separarlo del borde.
    El margen superior separa el contenido del menú.
*/
.hero-content {
    color: #fff; /* Color de texto principal */
    max-width: 700px; /* Limita el ancho del contenido para mejor legibilidad */
    margin: 80px 0 0 60px; /* 80px arriba para separarlo del menú, 60px a la izquierda */
    z-index: 1; /* Asegura que el contenido esté sobre la imagen de fondo */
    position: relative; /* Permite posicionar elementos hijos si es necesario */
}

/* 
    Título principal del héroe
    Tamaño grande, negrita y espacio inferior para separar del texto.
*/
.hero-content h1 {
    font-size: 3rem; /* Tamaño grande para destacar */
    font-weight: 700; /* Negrita */
    margin-bottom: 24px; /* Espacio debajo del título */
    line-height: 1.1; /* Espaciado entre líneas ajustado */
}

/* 
    Texto destacado en morado para resaltar el nombre de la empresa
*/
.bold-purple {
    color: #b3aad6; /* Color morado */
    font-weight: 700; /* Negrita */
}

/* 
    Párrafo del héroe
    Tamaño de fuente más grande y espacio inferior para separar del botón.
*/
.hero-content p {
    font-size: 1.5rem; /* Fuente más grande para mejor lectura */
    margin-bottom: 32px; /* Espacio debajo del párrafo */
}

/* 
    Botón de llamada a la acción
    Gradiente de morado, texto oscuro, bordes redondeados, sombra y transición de color.
    Padding para hacerlo más grande y visible.
*/
.cta-btn {
    display: inline-block; /* Permite aplicar padding y margen */
    background: linear-gradient(90deg, #b3aad6 0%, #a3bffa 100%); /* Gradiente de fondo */
    color: #200a2a; /* Texto oscuro */
    font-weight: 700; /* Negrita */
    padding: 20px 36px; /* Espacio interno para agrandar el botón */
    border-radius: 30px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    font-size: 1.4rem; /* Tamaño de fuente */
    box-shadow: 0 4px 24px rgba(32,10,42,0.08); /* Sombra suave */
    transition: background 0.2s, color 0.2s; /* Transición suave en hover */
    margin-bottom: 50px; /* Espacio debajo del botón */
}

/* 
    Efecto hover para el botón de llamada a la acción
    Cambia el fondo a morado sólido y el texto a morado claro.
*/
.cta-btn:hover {
    background: #200a2a; /* Fondo morado oscuro */
    color: #b3aad6; /* Texto morado claro */
}

/* 
    Transiciones y animaciones para los elementos del héroe 
    Los elementos h1, p y el botón aparecerán con animaciones desde la derecha.
*/

/* Oculta inicialmente los elementos y los posiciona a la derecha */
.hero-content h1,
.hero-content p,
.cta-btn {
    opacity: 0; /* Oculta el elemento */
    transform: translateX(60px); /* Lo mueve 60px a la derecha */
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(.77,0,.18,1); /* Transición suave */
}

/* 
    Efecto parallax: hace que la imagen de fondo de la sección hero-header 
    permanezca estática al hacer scroll, dando la impresión de profundidad.
    Se aplica solo en escritorio para mejor rendimiento.
*/



/* Cuando el header tiene la clase .show, los elementos aparecen y se posicionan correctamente */
.hero-header.show .hero-content h1 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s; /* Aparece primero */
}
.hero-header.show .hero-content p {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s; /* Aparece después del h1 */
}
.hero-header.show .cta-btn {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.8s; /* Aparece al final */
}




/* 
    Menú hamburguesa oculto por defecto en escritorio 
    Solo se muestra en pantallas pequeñas (responsive)
*/
.hamburger {
    display: none; /* Oculto en escritorio */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10; /* Encima del menú */
    background: none;
    border: none;
}

/* Líneas del menú hamburguesa */
.hamburger span {
    display: block;
    width: 28px;
    height: 4px;
    margin: 4px 0;
    background: #fff;
    border-radius: 2px;
    transition: all 1s;
}

/* Contenedor de la sección servicios */
.services {
    margin: 64px auto 0 auto;
    max-width: 1200px;
    padding: 0 24px;
}
.services h3 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #b3aad6;
}
.services-desc {
    font-size: 1.3rem;
    margin-bottom: 40px;
    color: #fff;
}
.services-cards {
    display: flex;
    flex-direction: row;         /* Asegura fila horizontal */
    gap: 40px;
    justify-content: center;
    align-items: stretch;        /* Todas las tarjetas del mismo alto */
    flex-wrap: nowrap;           /* No permite que se apilen en escritorio */
}

/* Tarjeta de servicio */
.service-card {
    background: #251634;
    border-radius: 28px;
    box-shadow: 0 4px 24px rgba(32,10,42,0.08);
    padding: 36px 28px 32px 28px;
    width: 340px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    opacity: 0;
    transform: translateY(-60px) scale(1);
    transition:
        opacity 0.7s cubic-bezier(.77,0,.18,1),
        transform 0.7s cubic-bezier(.77,0,.18,1);
    /* Para el efecto de ola, el delay se agrega con clases JS */
}

/* Animación de entrada: visible y en posición */
.service-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Efecto hover: zoom y sombra */
.service-card:hover {
    transform: translateY(0) scale(1.045);
    box-shadow: 0 8px 32px 0 #b3aad6;
    z-index: 2;
}

/* Icono de la tarjeta */
.service-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}
.service-icon img {
    width: 88px;
    height: 88px;
}

/* Título y texto */
.service-card h4 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #fff;
}
.service-card p {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 32px;
    margin-top: 0;
}

/* Botón */
.service-btn {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    border-radius: 22px;
    padding: 12px 32px;
    text-decoration: none;
    font-size: 1.1rem;
    margin-top: auto;
    box-shadow: 0 8px 0 #4e2e7a;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.service-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 12px 0 #b3aad6;
}





/* =========================
   FOOTER ESTILO FOOTER.PNG
   ========================= */
/* Footer principal: fondo, color y estructura general */
.main-footer {
    background: #200a2a;
    color: #fff;
    padding: 48px 0 0 0;
    font-size: 1rem;
    margin-top: 48px;
    width: 100%;
    border-top: 1px solid #fff; /* Línea blanca divisoria arriba del footer */
}

/* Distribución de columnas */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px; /* Ajusta el ancho máximo para evitar espacio blanco */
    margin: 0 auto;
    padding: 0 24px;
    gap: 32px;
    flex-wrap: wrap;
}

/* Columna izquierda: logo y descripción */
.footer-brand {
    flex: 1 1 320px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-logo {
    width: 110px;
    margin-bottom: 12px;
}
.footer-brand p {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
    max-width: 350px;
}

/* Columna central: menú */
.footer-menu {
    flex: 1 1 180px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li {
    margin-bottom: 12px;
}
.footer-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    transition: color 0.2s;
}
.footer-menu a:hover {
    color: #b3aad6;
}

/* Columna derecha: redes sociales y contacto */
.footer-social {
    flex: 1 1 220px;
    min-width: 180px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
}
.footer-social-icons {
    display: flex;
    gap: 18px;
}
.footer-icon img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #fff;
    padding: 4px;
    transition: border-color 0.2s, filter 0.2s;
    box-sizing: border-box;
}
.footer-icon:hover img {
    border-color: #b3aad6;
    filter: brightness(1.2);
}
.footer-contact {
    color: #fff;
    font-size: 1rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Línea inferior del footer */
.footer-bottom {
    color: #fff;
    font-size: 1rem;
    padding: 24px 24px 16px 24px;
    border-top: 1px solid #3a234a;
    margin-top: 32px;
    text-align: right;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


/* ===========================
   SECCIÓN: ¿Cómo Funciona?
   =========================== */

/* Contenedor principal: dos columnas */
.how-it-works {
    margin: 80px 0 0 0;
    padding: 0 24px;
}
.how-it-works-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 48px;
    align-items: flex-start;
}

/* Columna izquierda: título y subtítulo alineados a la izquierda */
.how-it-works-left {
    flex: 1 1 40%;
    min-width: 260px;
    text-align: left;
}
.how-it-works-left h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
}
.how-it-works-left p {
    color: #fff;
    font-size: 1.25rem;
    margin-top: 0;
}

/* Columna derecha: pasos alineados a la derecha */
.how-it-works-steps {
    flex: 1 1 60%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Cada paso: icono a la izquierda, texto a la derecha */
.how-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 0;
    padding: 24px 0;
}
.how-step-icon {
    min-width: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.how-step-icon img {
    width: 134px;
    height: 134px;
    display: block;
    margin-left: 10px;
}

/* Contenido del paso */
.how-step-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 15px 0 8px 0;
    
}
.how-step-content p {
    color: #fff;
    font-size: 1.15rem;
    margin: 0;
    text-align: left;
}

/* Línea divisoria entre pasos */
.how-it-works-steps hr {
    border: none;
    border-top: 2px solid #b3aad6;
    margin: 0 0 0 0;
    width: 100%;
    opacity: 0.3;
}

/* ===========================
   EFECTOS DE TRANSICIÓN: ¿Cómo Funciona?
   =========================== */

/* Oculta inicialmente los pasos y los posiciona a la derecha */
.how-step,
.how-step hr {
    opacity: 0;
    transform: translateX(60px);
    transition:
        opacity 0.7s cubic-bezier(.77,0,.18,1),
        transform 0.7s cubic-bezier(.77,0,.18,1);
}

/* Cuando el contenedor tiene la clase .show, los pasos aparecen */
.how-it-works-steps.show .how-step,
.how-it-works-steps.show hr {
    opacity: 1;
    transform: translateX(0);
}

/* Efecto tipo ola: cada paso aparece con un pequeño retraso */
.how-it-works-steps.show .how-step:nth-child(1),
.how-it-works-steps.show hr:nth-child(2) { transition-delay: 0.1s; }
.how-it-works-steps.show .how-step:nth-child(3),
.how-it-works-steps.show hr:nth-child(4) { transition-delay: 0.3s; }
.how-it-works-steps.show .how-step:nth-child(5),
.how-it-works-steps.show hr:nth-child(6) { transition-delay: 0.5s; }

/* ===========================
   SECCIÓN: Nuestros Proyectos Destacados
   =========================== */

/* Contenedor principal: tres columnas (imagen, contenido, imagen) */
.featured-projects {
    margin: 80px 0 0 0;
    padding: 0 24px;
}
.featured-projects-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 32px;
    position: relative;
}

/* Imágenes laterales */
.featured-img {
    flex: 1 1 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(.77,0,.18,1),
        transform 0.8s cubic-bezier(.77,0,.18,1);
}
.featured-img img {
    width: 220px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Imagen izquierda: animación desde la izquierda */
.featured-img-left {
    transform: translateX(-80px);
}

/* Imagen derecha: animación desde la derecha */
.featured-img-right {
    transform: translateX(80px);
}

/* Contenido central: título, descripción y botón */
.featured-content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(-60px);
    transition:
        opacity 0.8s cubic-bezier(.77,0,.18,1),
        transform 0.8s cubic-bezier(.77,0,.18,1);
}
.featured-content h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 135px;
    line-height: 1.1;
}
.gradient-text {
    background: linear-gradient(90deg, #7ec0ee 0%, #b3aad6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.featured-content p {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 40px;
    margin-top: 0;
}
.featured-btn {
    display: inline-block;
    background: linear-gradient(90deg, #a3f0fa 0%, #b3aad6 100%);
    color: #200a2a;
    font-weight: 700;
    font-size: 2rem;
    padding: 18px 48px;
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(32,10,42,0.08);
    transition: background 0.2s, color 0.2s, transform 0.3s;
    opacity: 0;
    transform: translateY(40px);
}
.featured-btn:hover {
    background: #200a2a;
    color: #b3aad6;
    transform: scale(1.05);
    filter: brightness(1.15); /* Hace el gradiente más brillante */
    transform: scale(1.06);   /* Efecto de "pop" */
    box-shadow: 0 8px 32px 0 #b3aad6;
    color: #200a2a;           /* Mantiene el texto oscuro para contraste */
    background: linear-gradient(90deg, #b3aad6 0%, #a3f0fa 100%);
    /* Mantiene el gradiente, pero puedes invertir los colores si prefieres */
}

/* Animación: cuando la sección entra en pantalla */
.featured-projects.show .featured-img-left {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}
.featured-projects.show .featured-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}
.featured-projects.show .featured-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}
.featured-projects.show .featured-img-right {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s;
}

/* 
    Ajuste: Alinea las imágenes laterales de la sección "Nuestros Proyectos Destacados"
    para que estén más abajo, a la altura del subtítulo y el botón.
    Se logra con margin-top en escritorio y se ajusta en responsive.
*/
.featured-img-left,
.featured-img-right {
    /* Empuja las imágenes hacia abajo para alinear las visualmente con el subtítulo y botón */
    margin-top: 130px; /* Puedes ajustar este valor según el diseño final */
}


/* Responsive: apila los elementos en columna en móvil */
@media (max-width: 900px) {
    .featured-projects-container {
        flex-direction: column;
        gap: 24px;
    }
    .featured-img {
        order: 1;
        margin-bottom: 16px;
    }
    .featured-content {
        order: 2;
        margin-bottom: 16px;
    }
    .featured-img img {
        width: 140px;
    }
    .featured-content h2 {
        font-size: 2.1rem;
        margin-bottom: 25px;
    }
    .featured-btn {
        font-size: 1.2rem;
        padding: 14px 30px;
    }

    .menu-principal {
        padding: 0 16px;
        height: 64px; /* Menú más bajo, suficiente para el logo */
        display: flex;
        align-items: center;
        position: relative;
    }
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        height: 48px;
        display: flex;
        align-items: center;
    }
    .logo img {
        height: 48px; /* El logo cabe perfectamente en el menú */
        width: auto;
        display: block;
    }
    .hamburger {
        display: flex;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    .menu-list {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 70vw;
        max-width: 320px;
        height: 100vh;
        background: rgba(32, 10, 42, 0.98);
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 80px 24px 0 24px;
        margin: 0;
        transition: right 0.4s cubic-bezier(.77,0,.18,1);
        z-index: 9;
    }
    .menu-list.open {
        right: 0;
    }
    .menu-list a {
        font-size: 1.3rem;
        padding: 12px 0;
        width: 100%;
        display: block;
    }

    }


@media (min-width: 1025px) {
    .hero-header {
        background-attachment: fixed;

    }

}


@media (max-width: 900px) {

    .loader-logo {
        width: 80px;
        height: 80px;
    }
    .loader-spinner {
        width: 110px;
        height: 110px;
        border-width: 4px;
    }

    /* Ajusta el menú principal para móvil */
    .menu-principal {
        padding: 0 ; /* Menos espacio lateral */
        height: 124px; /* Menú más bajo */
    }

    /* Logo centrado en el menú */
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
    }
    .logo img {
        height: 128px; /* Logo más pequeño */
    }

    /* Muestra el botón hamburguesa */
    .hamburger {
        display: flex;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Oculta la lista del menú por defecto */
    .menu-list {
        position: fixed;
        top: 0;
        right: -100vw; /* Oculta fuera de pantalla */
        width: 70vw;
        max-width: 320px;
        height: 100vh;
        background: rgba(32, 10, 42, 0.98);
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 80px 24px 0 24px;
        margin: 0;
        transition: right 0.4s cubic-bezier(.77,0,.18,1);
        z-index: 9;
    }

    /* Cuando el menú está abierto, muéstralo */
    .menu-list.open {
        right: 0;
    }

    /* Ajusta los enlaces del menú para móvil */
    .menu-list a {
        font-size: 1.3rem;
        padding: 12px 0;
        width: 100%;
        display: block;
    }

  
    .hero-header {
        background-attachment: fixed; /* Fondo se mueve normalmente en móvil */
    }


    /* Ajusta el contenido del héroe para móvil */
    .hero-content {
        margin: 48px 16px 0px 16px; /* Menos margen lateral y superior */
        max-width: 100%;
        text-align: center; /* Centra el texto */
    }
    .hero-content h1 {
        font-size: 2.7rem;
        margin-bottom: 65px;
    }
    .hero-content p {
        font-size: 1.5rem;
        margin-bottom: 75px;
    }
    .cta-btn {
        font-size: 1.5rem;
        padding: 34px 44px;

    }
    /* 
        Elimina la transparencia del menú y el fondo del héroe en proyectos.html 
        para mantener un diseño sólido en móvil.
    */
    .no-bg .menu-principal {
        padding: 0 16px;
        height: 125px;
        display: flex;
        align-items: center;
        position: relative;
        background: #200a2a !important; /* Mantiene fondo sólido en móvil */
    }
     .no-bg .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        height: 68px;
        display: flex;
        align-items: center;
    }
    .no-bg .logo img {
        height: 125px;
        width: auto;
        display: block;
    }
    .no-bg .hamburger {
        display: flex;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    .no-bg .menu-list {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 70vw;
        max-width: 320px;
        height: 100vh;
        background: rgba(32, 10, 42, 0.98);
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 80px 24px 0 24px;
        margin: 0;
        transition: right 0.4s cubic-bezier(.77,0,.18,1);
        z-index: 9;
    }
    .no-bg .menu-list.open {
        right: 0;
    }
    .no-bg .menu-list a {
        font-size: 1.3rem;
        padding: 12px 0;
        width: 100%;
        display: block;
    }

    .no-bg .hero-header {
        background: url('images/proyectos-fondo.png') center/cover no-repeat !important;
        background-attachment: scroll !important;
    }

  .no-bg .hero-content h1 {
        padding-top: 28px;
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 28px;
        letter-spacing: 1px;
    }

    .no-bg .hero-content p {
        padding-top: 18px;
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: 1px;
        margin: 38px 5px 68px 5px; /* Espacio lateral para centrar */
    }

    .services {
        padding: 0 8px;
        align-items: center; /* Centra las tarjetas */
    }
    .services h3 {
        font-size: 3rem;
        text-align: center;
        padding-bottom: 15px; /* Espacio debajo del título */
    }
    .services-desc {
        font-size: 1.3rem;
        text-align: center;
    }
    .services-cards {
        flex-direction: column;      /* Apila verticalmente */
        align-items: center;         /* Centra horizontalmente */
        gap: 32px;                   /* Espacio entre tarjetas */
        flex-wrap: nowrap;           /* No permite que se apilen en varias columnas */
    }

    .service-card {
        width: 100%;
        max-width: 250px;  /* Limita el ancho para que no sean demasiado grandes */
    }
    .service-card h4 {
        font-size: 2rem;      /* Título más grande */
    }

    .service-card p {
    font-size: 1.3rem;    /* Texto descriptivo más grande */
    }

    .service-btn {
        font-size: 1.2rem;    /* Botón más grande */
        padding: 16px 36px;   /* Botón más alto y ancho */
    }
    .how-it-works-container {
        flex-direction: column;
        gap: 32px;
    }
    .how-it-works-left, .how-it-works-steps {
        min-width: 0;
        width: 100%;
    }
    .how-step {
        gap: 18px;
        padding: 18px 0;
    }
    .how-step-icon {
        min-width: 48px;
    }
    .how-step-icon img {
        width: 64px;
        height: 64px;
    }
    .how-step-content h3 {
        font-size: 2.5rem;
    }
    .how-step-content p {
        font-size: 1.1rem;
    }

    /* 
    Footer principal: fondo, color y estructura general
    */
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 16px;
        gap: 32px;
        text-align: center;
    }   
    .footer-col {
        align-items: center !important;
        text-align: center;
        width: 100%;
   
    }

    .footer-col p {
        font-size: 20px;    /* Tamaño de fuente grande para mejor legibilidad */
    }

 

    .footer-brand,
    .footer-menu,
    .footer-social {
        align-items: center !important;
        text-align: center;
        width: 100%;
    }

    .footer-social {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100%;
        text-align: center !important;
    }

    .footer-social-icons {
        justify-content: center !important;
        width: 100%;
        margin-bottom: 8px;
    }
    .footer-contact {
        margin-top: 0;
        width: 100%;
        justify-content: center;
        display: flex;
    }
    .footer-bottom {
        text-align: center;
        padding: 24px 16px 16px 16px;
    }

    #loading-screen,
    .loader-container {
        width: 100vw !important;
        height: 100vh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .loader-logo,
    .loader-spinner {
        display: block;
        margin: 0 auto;
    }
    .how-it-works-container {
        flex-direction: column;
        gap: 32px;
    }
    .how-it-works-left, .how-it-works-steps {
        min-width: 0;
    }
    .how-step {
        gap: 18px;
        padding: 18px 0;
    }
    .how-step-number {
        font-size: 3.2rem;
        min-width: 48px;
    }
    .how-step-content h3 {
        font-size: 1.3rem;
    }

    .how-step,
    .how-step hr {
        transform: translateX(30px);
    }

        .featured-projects-container {
        flex-direction: column;
        gap: 24px;
    }
    .featured-img {
        order: 1;
        margin-bottom: 16px;
    }
    .featured-content {
        order: 2;
        margin-bottom: 16px;
    }
    .featured-img img {
        width: 140px;
    }
    .featured-content h2 {
        font-size: 2.1rem;
    }
    .featured-btn {
        font-size: 1.2rem;
        padding: 14px 30px;
    }

/* Responsive: reduce el margen en pantallas pequeñas para mantener proporción */
    .featured-img-left,
    .featured-img-right {
        margin-top: 32px;
    }

    
}


/* 
    Opcional: animación para el icono hamburguesa cuando el menú está abierto 
    (agrega la clase .open al botón)
*/
.hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===========================
   SECCIÓN: Call To Action WhatsApp
   =========================== */

/* Contenedor principal: dos columnas */
.cta-whatsapp {
    margin: 80px 0 0 0;
    padding: 0 24px;
}
.cta-whatsapp-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 48px;
    min-height: 520px;
}

/* Columna izquierda: texto y botón */
.cta-whatsapp-content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.cta-whatsapp-content h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 36px;
    line-height: 1.1;
}
.cta-gradient {
    background: linear-gradient(90deg, #b3aad6 0%, #7ec0ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cta-whatsapp-content p {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 48px;
    margin-top: 0;
    max-width: 600px;
}
.cta-whatsapp-btn {
    display: inline-block;
    background: linear-gradient(90deg, #00e676 0%, #a3f0fa 100%);
    color: #200a2a;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 22px 54px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 32px 0 #00e67644;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: 1px;
}
.cta-whatsapp-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.04);
    box-shadow: 0 8px 40px 0 #00e67688;
}

/* Columna derecha: video */
.cta-whatsapp-video-wrapper {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-whatsapp-video {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16/9;
    border-radius: 40px;
    box-shadow: 0 0 80px 0 #b3aad6cc, 0 8px 32px 0 #0008;
    background: #1a0d23;
    object-fit: cover;
    transition: box-shadow 0.4s;
}

/* Responsive: apila en columna en móvil */
@media (max-width: 900px) {
    .cta-whatsapp-container {
        flex-direction: column;
        gap: 32px;
        min-height: unset;
        justify-content: center;
        align-items: center;
    }

    .cta-whatsapp-content {
        align-items: center !important;
        text-align: center !important;
    }
    .cta-whatsapp-content h2,
    .cta-whatsapp-content p {
        text-align: center !important;
    }
    .cta-whatsapp-content, .cta-whatsapp-video-wrapper {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
    }
    .cta-whatsapp-content h2 {
        font-size: 2.1rem;
        margin-bottom: 24px;
        justify-content: center;
        align-content: center;
    }
    .cta-whatsapp-content p {
        font-size: 1.1rem;
        margin-bottom: 32px;
    }
    .cta-whatsapp-btn {
        font-size: 1.1rem;
        padding: 16px 32px;
    }
    .cta-whatsapp-video {
        max-width: 100%;
        border-radius: 24px;
    }
}

/* ===========================
   TRANSICIONES RESPONSIVE: "Conoce nuestros proyectos" y CTA WhatsApp
   =========================== */

/* --- Sección: Conoce nuestros proyectos --- */

/* Oculta y desplaza los elementos en móvil para animación de entrada */
@media (max-width: 900px) {
    .featured-content,
    .featured-content h2,
    .featured-content p,
    .featured-btn,
    .featured-img,
    .featured-icons-row,
    .featured-icon {
        opacity: 0;
        transform: translateY(40px);
        transition:
            opacity 0.7s cubic-bezier(.77,0,.18,1),
            transform 0.7s cubic-bezier(.77,0,.18,1);
    }

    /* Cuando el contenedor tiene la clase .show, los elementos aparecen */
    .featured-projects.show .featured-content,
    .featured-projects.show .featured-content h2,
    .featured-projects.show .featured-content p,
    .featured-projects.show .featured-btn,
    .featured-projects.show .featured-img,
    .featured-projects.show .featured-icons-row,
    .featured-projects.show .featured-icon {
        opacity: 1;
        transform: translateY(0);
    }

    /* Efecto tipo ola: delay para cada elemento */
    .featured-projects.show .featured-content h2 { transition-delay: 0.1s; }
    .featured-projects.show .featured-icons-row { transition-delay: 0.25s; }
    .featured-projects.show .featured-content p { transition-delay: 0.4s; }
    .featured-projects.show .featured-btn { transition-delay: 0.6s; }
    .featured-projects.show .featured-icon:nth-child(1) { transition-delay: 0.28s; }
    .featured-projects.show .featured-icon:nth-child(2) { transition-delay: 0.32s; }
}

/* --- Sección: Call To Action WhatsApp --- */

/* Oculta y desplaza los elementos en móvil para animación de entrada */
@media (max-width: 900px) {
    .cta-whatsapp-content,
    .cta-whatsapp-content h2,
    .cta-whatsapp-content p,
    .cta-whatsapp-btn,
    .cta-whatsapp-video-wrapper {
        opacity: 0;
        transform: translateY(40px);
        transition:
            opacity 0.7s cubic-bezier(.77,0,.18,1),
            transform 0.7s cubic-bezier(.77,0,.18,1);
    }

    /* Cuando el contenedor tiene la clase .show, los elementos aparecen */
    .cta-whatsapp.show .cta-whatsapp-content,
    .cta-whatsapp.show .cta-whatsapp-content h2,
    .cta-whatsapp.show .cta-whatsapp-content p,
    .cta-whatsapp.show .cta-whatsapp-btn,
    .cta-whatsapp.show .cta-whatsapp-video-wrapper {
        opacity: 1;
        transform: translateY(0);
    }

    /* Efecto tipo ola: delay para cada elemento */
    .cta-whatsapp.show .cta-whatsapp-content h2 { transition-delay: 0.1s; }
    .cta-whatsapp.show .cta-whatsapp-content p { transition-delay: 0.3s; }
    .cta-whatsapp.show .cta-whatsapp-btn { transition-delay: 0.5s; }
    .cta-whatsapp.show .cta-whatsapp-video-wrapper { transition-delay: 0.7s; }
}

/* ===========================//////////////////////////////////////////////////////////////////////////////////////
                                            PAGINA DE NUESTROS PROYETOS
   ==========================/////////////////////////////////////////////////////////////////////////////////// *
/* ===========================
   SECCIÓN: Proyectos de Clientes
   =========================== */

.clientes-proyectos {
    padding: 80px 0 40px 0;
    background: #200a2a;
    text-align: center;
}

.clientes-titulo {
    color: #fff;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #a3f0fa 0%, #b3aad6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 88px;
    letter-spacing: 1px;
    margin-top: -15px;

}



.clientes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.cliente-card {
    background: linear-gradient(135deg, #251634 60%, #b3aad6 100%);
    border-radius: 28px;
    box-shadow: 0 4px 24px rgba(32,10,42,0.12);
    padding: 38px 24px 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    min-height: 420px;
}

.cliente-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 32px 0 #b3aad6;
    z-index: 2;
}

.cliente-logo img {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    background: #fff;
    object-fit: contain;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px #b3aad655;
}

.cliente2-logo 
    img {
        width: 80px;
        height: 80px;
        border-radius: 18px;
        background: black;
        object-fit: contain;
        margin-bottom: 18px;
        box-shadow: 0 2px 12px #b3aad655;
    }

.cliente3-logo 
    img {
        width: 80px;
        height: 80px;
        border-radius: 18px;
        background: #f2dde2;
        object-fit: contain;
        margin-bottom: 18px;
        box-shadow: 0 2px 12px #b3aad655;
    }

.cliente4-logo 
    img {
        width: 80px;
        height: 80px;
        border-radius: 18px;
        background: #fff;
        object-fit: contain;
        margin-bottom: 18px;
        box-shadow: 0 2px 12px #b3aad655;
        align-items: center;
    }



.cliente-nombre {
    font-size: 1.5rem;
    font-weight: 700;
    color: #b3aad6;
    margin: 0 0 12px 0;
}

.cliente-desc {
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 22px;
    margin-top: 0;
    min-height: 60px;
}

.cliente-social {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.cliente-social img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #b3aad6;
    padding: 4px;
    transition: border-color 0.2s, filter 0.2s;
}
.cliente-social a:hover img {
    border-color: #7ec0ee;
    filter: brightness(1.2);
}

.cliente-btn {
    display: inline-block;
    background: linear-gradient(90deg, #a3f0fa 0%, #b3aad6 100%);
    color: #200a2a;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 14px 36px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(32,10,42,0.08);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    margin-top: auto;
}
.cliente-btn:hover {
    background: #200a2a;
    color: #b3aad6;
    transform: scale(1.06);
}

/* Transiciones para la sección de proyectos de clientes (clientes-proyectos) */
/* Oculta y desplaza las tarjetas al cargar */
.cliente-card {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s cubic-bezier(.77,0,.18,1),
        transform 0.7s cubic-bezier(.77,0,.18,1);
}

/* Cuando la sección tiene la clase .show, las tarjetas aparecen con animación */
.clientes-proyectos.show .cliente-card {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto tipo ola: delay para cada tarjeta */
.clientes-proyectos.show .cliente-card:nth-child(1) { transition-delay: 0.1s; }
.clientes-proyectos.show .cliente-card:nth-child(2) { transition-delay: 0.25s; }
.clientes-proyectos.show .cliente-card:nth-child(3) { transition-delay: 0.4s; }
.clientes-proyectos.show .cliente-card:nth-child(4) { transition-delay: 0.55s; }


/* Responsive: 2 columnas en tablet, 1 columna en móvil */
@media (max-width: 1100px) {
    .clientes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}
@media (max-width: 700px) {
    .clientes-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cliente-card {
        min-height: 0;
        padding: 30px 10px 24px 10px;
    }
    .clientes-titulo {
        font-size: 2rem;
        margin-bottom: 32px;
    }
}