html, body {
    width: 100%;
    overflow-x: hidden; /* ESTO ES LA CLAVE: Oculta lo que se sale por los lados */
    margin: 0;
    padding: 0;
    position: relative; /* Ayuda a contener elementos absolutos */
}





/* =========================================
   PÁGINA CONTACTO (Diseño Final)
   ========================================= */

.header-contacto {
    background-color: #183592;
    padding: 140px 5% 60px;
    text-align: center;
    color: white;
}

.header-contacto h1 { 
    font-size: 2.5rem; 
    margin-bottom: 10px; 
}

/* CONTENEDOR PRINCIPAL (GRID) */
.contenedor-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 50px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    align-items: start; /* IMPORTANTE: Alinea al inicio vertical */
}

/* COLUMNA IZQUIERDA (INFO) */
.info-columna {
    /* Truco visual: Añadimos padding arriba para que el título 
       quede alineado con el título de la caja derecha */
    padding-top: 40px; 
}

.info-columna h2 { 
    color: #183592; 
    margin-bottom: 20px; 
    margin-top: 0; /* Aseguramos que no haya margen extra */
}

.item-contacto { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 25px; 
}

.item-contacto i { 
    color: #D3AA52; 
    font-size: 1.5rem; 
    margin-right: 15px; 
    margin-top: 5px; 
}

.item-contacto h4 { margin: 0 0 5px; color: #333; }
.item-contacto p, .item-contacto a { margin: 0; color: #666; text-decoration: none; }

/* COLUMNA DERECHA (FORMULARIO) */
.form-columna {
    background: #f9f9f9; 
    padding: 40px;
    border-radius: 15px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-columna h2 {
    margin-top: 0;
    color: #183592;
    margin-bottom: 15px;
}

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }

.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px;
    border: 1px solid #ddd; border-radius: 5px;
    font-family: inherit; font-size: 1rem;
}

.btn-enviar {
    background: #183592; color: white; border: none;
    padding: 15px 30px; width: 100%;
    font-size: 1.1rem; font-weight: bold;
    border-radius: 5px; cursor: pointer; transition: background 0.3s;
}
.btn-enviar:hover { background: #D3AA52; }

/* TARJETA CALENDLY */
.card-calendly {
    background: #eef2ff; padding: 20px;
    border-radius: 10px; margin-top: 30px;
    text-align: center; border: 1px solid #183592;
}

/* RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
    .contenedor-contacto { 
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 30px;
    }
    .info-columna {
        padding-top: 0; /* En móvil quitamos el relleno extra */
    }
}


/* =========================================
   FINAL PÁGINA CONTACTO (Diseño Final)
   ========================================= */

/* =========================================
   ESTILOS ESPECÍFICOS SOBRE NOSOTROS (PREMIUM)
   ========================================= */

/* Sección Historia (Zig-Zag) */
.historia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.historia-texto h2 {
    color: #183592;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.historia-texto p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.historia-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 20px 20px 0px #eef2ff; /* Efecto de sombra decorativa */
}

/* Tarjeta del Fundador */
.founder-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 900px;
    margin: 60px auto;
    display: flex;
    align-items: center;
}

.founder-img {
    flex: 1;
    height: 400px;
}

.founder-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder-info {
    flex: 1.5;
    padding: 40px;
}

.founder-info h3 {
    color: #183592;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.founder-role {
    color: #D3AA52;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 20px;
}

/* Barra de Estadísticas */
.stats-bar {
    background: #183592;
    color: white;
    padding: 60px 0;
    margin-top: 60px;
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #D3AA52;
    display: block;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .historia-grid, .founder-card {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .founder-img {
        width: 100%;
        height: 300px;
    }
    .historia-img {
        order: -1; /* Pone la foto arriba en móvil */
        margin-bottom: 30px;
    }
}





/* =========================================
   ESTILOS CABECERA MÓVIL (DEPURADO)
   ========================================= */

/* =========================================
   ESTILOS CABECERA MÓVIL (CORRECCIÓN FINAL)
   ========================================= */

/* 1. Por defecto OCULTO en PC */
.header-movil-container {
    display: none; 
}

/* 2. SOLO VISIBLE EN MÓVIL (menos de 992px) */
@media (max-width: 992px) {
    
    /* Ocultamos la cortina de escritorio */
    .cortina-fija-wrapper { display: none !important; }

    /* Mostramos la barra móvil */
    .header-movil-container {
        display: block;
        position: fixed;
        top: 0; left: 0; width: 100%;
        z-index: 1000;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .header-movil {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        height: 60px;
        background: #fff;
        position: relative;
        z-index: 1001; /* Z-Index bajo */
    }

    .logo-movil {
        font-weight: 800; color: #183592;
        text-decoration: none; font-size: 1.2rem;
        text-transform: uppercase; font-family: 'Montserrat', sans-serif;
    }

    .btn-hamburguesa {
        background: none; border: none;
        font-size: 1.5rem; color: #183592; cursor: pointer;
        padding: 10px; /* Más área para el dedo */
    }

    /* EL FONDO SEMITRANSPARENTE (Overlay) */
    .menu-movil-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 3000; /* ¡CAMBIO CLAVE! Más alto que todo (header es 1001) */
        
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    /* EL PANEL AZUL LATERAL */
    .menu-movil-content {
        position: absolute;
        top: 0; right: -320px;
        width: 300px; /* Ancho cómodo */
        height: 100%;
        background-color: #183592;
        padding: 40px 30px; /* Espacio interior */
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Movimiento suave */
        
        /* CENTRADO VERTICAL DE LOS ENLACES (Para que no queden arriba del todo) */
        display: flex; 
        flex-direction: column;
        justify-content: center; /* Esto los pone en el medio de la pantalla */
        align-items: center;
        
        box-shadow: -5px 0 20px rgba(0,0,0,0.3);
    }

    /* ESTADO ACTIVO */
    .menu-movil-overlay.activo {
        opacity: 1; visibility: visible;
    }

    .menu-movil-overlay.activo .menu-movil-content {
        right: 0;
    }

    /* Botón cerrar (Aspa) - Ahora se verá porque el Z-index es 3000 */
    .btn-cerrar-movil {
        position: absolute; 
        top: 25px; /* Separado del techo */
        right: 25px; /* Separado de la derecha */
        background: none; border: none;
        color: #fff; font-size: 2rem; cursor: pointer;
        opacity: 0.8; transition: opacity 0.3s;
    }
    .btn-cerrar-movil:hover { opacity: 1; transform: rotate(90deg); }

    /* Estilos de los enlaces */
    .links-movil { 
        text-align: center; 
        display: flex; flex-direction: column; 
        gap: 30px; /* Más espacio entre enlaces */
        width: 100%; 
    }
    
    .links-movil a {
        color: #fff; text-decoration: none; 
        font-size: 1.3rem; /* Letra un poco más grande */
        font-weight: 500; font-family: 'Montserrat', sans-serif;
        display: block; width: 100%;
        transition: color 0.3s;
    }

    .link-destacado-movil {
        color: #D3AA52 !important; 
        font-weight: 800 !important;
        font-size: 1.4rem !important; /* Destacar Servicios */
        letter-spacing: 1px;
    }
    
    .cta-movil {
        background: #D3AA52; color: #000 !important;
        padding: 15px 30px; border-radius: 50px; 
        font-weight: bold !important;
        margin-top: 30px; /* Separar el botón del resto */
        box-shadow: 0 5px 15px rgba(211, 170, 82, 0.4);
    }

    body { padding-top: 60px; } 
}

/* =========================================
   FIN ESTILOS CABECERA MÓVIL (DEPURADO)
   ========================================= */






/* =========================================
   ESTILOS CORTINA FIJA (STICKY HEADER)
   ========================================= */

/* Contenedor general que flota sobre todo */
.cortina-fija-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Por encima de todo, incluso del vídeo */
    font-family: 'Montserrat', sans-serif; /* Tu fuente */
}

/* --- 1. BARRA AZUL SUPERIOR --- */
.barra-superior-azul {
    background-color: #183592; /* Azul Iberik */
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    padding: 20px 0;
    letter-spacing: 1.3px;
}

.link-reserva {
    color: #D3AA52; /* Dorado para el link */
    font-weight: bold;
    text-decoration: none;
    margin-left: 10px;
    text-transform: uppercase;
}
.link-reserva:hover { color: #fff; text-decoration: underline; }


/* --- 2. BARRA BLANCA INFO --- */
.barra-principal-info {
    background-color: rgba(255, 255, 255, 0.95); /* Blanco casi sólido */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    height: 100px; /* Altura de la barra */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3%;
    color: #183592; /* Texto azul */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* BLOQUE IZQUIERDO (Contacto + Redes) */
.bloque-izq {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.8rem;
}

.info-telefono {
    font-weight: 500;
    margin-bottom: 5px;
    color: #333; /* Aseguramos un gris oscuro legible pero no negro puro */
    
}
.horario-mini { font-weight: normal; font-size: 0.75rem; color: #555; }

/* Redes Sociales Pequeñas */
/* =======================================================
   ADAPTACIÓN ICONOS SOCIALES (Estilo Footer para Cabecera)
   ======================================================= */

/* Contenedor en la barra superior */
.redes-mini {
    display: flex;
    align-items: center;
    gap: 20px; /* Separación entre bolitas */
    margin-top: 10px;
    

}

/* Adaptamos los enlaces (<a>) que has copiado del footer */
.redes-mini a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    /* 1. Hacemos las bolitas más pequeñas que en el footer */
    width: 30px !important;  
    height: 30px !important;
    border-radius: 50%;
    
    /* 2. Color de fondo: Azul Iberik suave (en vez de transparente) */
   background-color: #183592 !important; /* Azul Corporativo Fuerte */
    color: #ffffff !important;            /* Icono BLANCO Puro */
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* 3. El dibujo SVG de dentro: Lo pintamos de AZUL (porque el fondo es blanco) */
.redes-mini a svg {
    width: 14px !important; 
    height: 14px !important;
    fill: #183592 !important; /* Forzamos color azul */
}

/* --- EFECTO HOVER (Al pasar el ratón) --- */
.redes-mini a:hover {
    background-color: #183592; /* Fondo se pone azul fuerte */
    transform: translateY(-2px); /* Se eleva un poquito */
    box-shadow: 0 3px 8px rgba(24, 53, 146, 0.3);
}

.redes-mini a:hover svg {
    fill: #D3AA52 !important; /* El icono se pone DORADO */
}








/* BLOQUE CENTRO (Menú + Cita) */
.bloque-centro {
    display: flex;
    align-items: center;
    gap: 100px; /* Separación entre menú y botón cita */
}


/* -- EL MEGA MENÚ DESPLEGABLE -- */
.dropdown-servicios {
    position: relative;
    display: inline-block;
}

.btn-servicios-toggle {
    background: none;
    border: none;
    color: #183592;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px 0;
}

/* El contenido oculto del menú */
.dropdown-content {
    display: none; /* ESTO ES LO QUE MANDA AHORA (OCULTO) */
    position: absolute;
    top: 200%; /* Ajustado a 100% para que pegue mejor, antes tenías 200% */
    left: 50%;
    transform: translateX(-30%) !important;
    background-color: #fff;
    min-width: 1400px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 100; /* Subido el z-index por seguridad */
    padding: 20px;
    border-top: 3px solid #D3AA52;
    margin-top: 0;
    padding-top: 20px;
    
    /* Configuración de columnas (pero NO el display) */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px;
}

/* El puente invisible para que no se cierre al bajar el ratón */
.dropdown-content::before {
    content: "";
    display: block;
    position: absolute;
    top: -80px; /* Ajuste para cubrir huecos */
    left: 0;
    width: 100%;
    height: 80px;
    background: transparent;
}

/* AQUÍ ESTÁ LA CLAVE: SOLO SE PONE GRID AL PASAR EL RATÓN */
.dropdown-servicios:hover .dropdown-content {
    display: grid !important; 
}

/* Estilos de las columnas */
.columna-servicios h4 {
    color: #D3AA52;
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.columna-servicios a {
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 5px 0;
    transition: color 0.2s;
}
.columna-servicios a:hover { color: #183592; font-weight: bold; }

/* 4ª COLUMNA (EXPLORA) */
.columna-nav-extra {
    border-left: 1px solid #eee;
    padding-left: 20px;
}

.columna-nav-extra h4 {
    color: #D3AA52 !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
}

.columna-nav-extra a {
    color: #777 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 6px 0 !important;
    transition: all 0.3s ease;
}

.columna-nav-extra a:hover {
    color: #183592 !important;
    transform: translateX(5px);
}

/* AJUSTE PARA MÓVIL */
@media (max-width: 1024px) {
    .dropdown-content {
        display: none; /* Aseguramos que empiece oculto también en móvil */
        flex-direction: column !important;
        min-width: 100% !important;
        width: 100% !important;
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        grid-template-columns: 1fr !important; /* Anulamos el grid de 4 */
    }
    
    /* En móvil usamos JS para ponerle display: flex/block, no el hover */
    .dropdown-servicios:hover .dropdown-content {
        display: none !important; /* Desactivamos el hover en móvil para evitar líos */
    }
    
    /* Esta clase la añade el JS cuando tocas el botón */
    .dropdown-content.activo {
        display: flex !important;
    }

    .columna-nav-extra {
        border-left: none !important;
        border-top: 1px solid #eee !important;
        padding-left: 0 !important;
        padding-top: 20px !important;
        margin-top: 10px !important;
    }
}








/* -- BOTÓN CITA PREVIA -- */
.zona-cita {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grupo-cita-texto {
    display: flex;
    align-items: center; /* Alineación vertical perfecta */
    gap: 10px; /* Espacio entre elementos */
}

.texto-dudas, .texto-asesoramos {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

.btn-cita-previa {
    border: 1px solid #183592;
    color: #183592;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap; /* Que no se rompa el texto en dos líneas */
}
.btn-cita-previa:hover {
    background-color: #183592;
    color: #fff;
}


/* BLOQUE DERECHA (Logo) */
.bloque-der .logo-top {
    font-weight: 800;
    font-size: 1.5rem;
    color: #183592;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste del Logo en la barra superior */
.logo-imagen-top {
    max-height: 100px; /* Ajusta este número según la forma de tu logo */
    width: auto;      /* Mantiene la proporción */
    display: block;
    border-radius: 50px;
}

/* --- RESPONSIVE: AJUSTE PARA MÓVILES --- 
   Esta barra es muy grande para móviles. 
   La ocultamos o simplificamos en pantallas pequeñas */
@media (max-width: 992px) {
    .cortina-fija-wrapper {
        display: none; /* Ocultamos la barra PRO en móvil para usar tu menú hamburguesa normal */
    }
}





/* =========================================
   ESTILOS SECCIÓN RESEÑAS INFINITAS
   ========================================= */

.seccion-resenas-infinite {
    background-color: #f4f4f4;
    padding: 60px 0;
    overflow: hidden; /* Vital: oculta lo que se sale por los lados */
}

/* Cabecera centrada */
.cabecera-resenas-simple {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
}
.cabecera-resenas-simple h2 { color: #183592; margin-bottom: 10px; font-weight: 800; }
.cabecera-resenas-simple p { color: #555; margin-bottom: 15px; font-size: 1.1rem; }

/* Badge de Google */
.google-badge { 
    display: inline-block; 
    background: #fff; 
    padding: 8px 20px; 
    border-radius: 30px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    font-weight: bold; color: #555; border: 1px solid #eee;
}
.g-icon { color: #4285F4; font-weight: 900; margin-right: 5px; font-size: 1.2rem; }
.g-rating { color: #fbbc05; margin-right: 5px; }


/* --- LÓGICA DEL CARRUSEL INFINITO --- */

/* Ventana visible */
.marquee-wrapper {
    
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Un pequeño degradado a los lados para suavizar la entrada/salida (Opcional) */
    mask-image: linear-gradient(to right, transparent, black 5%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 94%, transparent);
}

/* Pista que se mueve */
.marquee-track {
    display: flex;
    width: max-content; /* Se adapta al contenido */
    /* La animación mueve todo el bloque hacia la izquierda */
    animation: scrollInfinite 60s linear infinite; 
}

/* Grupo de tarjetas (para organizarlas mejor) */
.grupo-resenas {
    display: flex;
    gap: 30px; /* Espacio entre tarjetas */
    padding-right: 30px; /* Espacio al final del grupo */
}

/* LA ANIMACIÓN CLAVE */
@keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
    /* Se mueve el 50% porque tenemos 2 grupos idénticos. 
       Al llegar a la mitad, el Grupo 2 está exactamente donde empezó el Grupo 1. */
}

/* Pausar al pasar el ratón */
.marquee-track:hover {
    animation-play-state: paused;
}


/* --- ESTILO DE LAS TARJETAS --- */
.resena-card {
    background: #fff;
    width: 320px; /* Un pelín más anchas */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    flex-shrink: 0; /* Evita que se aplasten */
    border-left: 5px solid #fbbc05; /* Borde Google */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para alinear el autor abajo */
}

/* Info Cards (Azules) */
.info-card {
    background: #183592;
    color: #fff;
    border-left: 5px solid #D3AA52; /* Dorado */
    align-items: center; text-align: center; justify-content: center;
}
.info-card .top-card { color: #D3AA52 !important; width: 100%; justify-content: center; margin-bottom: 5px;}
.info-card p { color: #eee !important; font-style: normal; text-align: center;}
.icono-card { font-size: 2.5rem; margin-bottom: 15px; }


/* Detalles internos */
.top-card {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stars { color: #fbbc05; font-size: 1rem; }

.resena-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #444;
    font-style: italic;
    font-family: 'Georgia', serif; /* Toque elegante para la cita */
}

/* Autor */
.autor-con-foto {
    display: flex;
    align-items: center;
    margin-top: auto; /* Empuja esto al fondo */
    padding-top: 15px;
    border-top: 1px solid #f9f9f9;
}

.foto-mini {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nombre-autor {
    font-weight: bold;
    font-size: 0.9rem;
    color: #183592;
}


/* =========================================
   ESTILOS SECCIÓN RESEÑAS INFINITAS
   ========================================= */









/* =========================================
   ESTILOS SECCIÓN LOGOS CLIENTES
   ========================================= */

.seccion-logos-clientes {
    background-color: #ffffff; /* Fondo blanco puro para contraste */
    padding: 50px 20px;
    border-top: 1px solid #eee; /* Línea sutil de separación */
}

.contenedor-logos {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.cabecera-logos h2 {
    color: #183592; /* Azul Corporativo */
    font-size: 1.8rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.subtitulo-logos {
    color: #666;
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: 300;
}

.linea-dorada-corta {
    width: 60px;
    height: 3px;
    background-color: #D3AA52; /* Dorado */
    border: none;
    margin: 0 auto 40px auto; /* Centrada */
}

/* La rejilla flexible */
.grid-logos {
    display: flex;
    flex-wrap: wrap; /* Si no caben, bajan de línea */
    justify-content: center; /* Centrados */
    align-items: center; /* Centrados verticalmente */
    gap: 50px; /* Espacio entre logos */
}

/* Estilo de las imágenes */
.item-logo img {
    max-width: 150px; /* Ancho máximo del logo */
    height: auto;
    max-height: 80px; /* Altura máxima para que no se desmadren */
    
    /* EL TRUCO DE BLANCO Y NEGRO */
    filter: grayscale(100%); 
    opacity: 0.6; /* Un poco transparentes para no llamar la atención */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el ratón: COLORES VIVOS */
.item-logo img:hover {
    filter: grayscale(0%); /* Vuelven al color original */
    opacity: 1; /* Opacidad total */
    transform: scale(1.1); /* Crecen un poquito */
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .grid-logos {
        gap: 30px;
    }
    .item-logo img {
        max-width: 100px; /* Más pequeños en móvil */
    }
}


/* =========================================
   ESTILOS SECCIÓN LOGOS CLIENTES
   ========================================= */


/* =========================================
   ESTILOS MOSAICO SERVICIOS PRO
   ========================================= */

.seccion-servicios-visual {
    padding: 80px 20px;
    background-color: #fff;
}

.contenedor-servicios-pro {
    max-width: 1200px;
    margin: 0 auto;
}

.cabecera-servicios-pro {
    text-align: center;
    margin-bottom: 50px;
}
.cabecera-servicios-pro h2 {
    font-size: 2.5rem;
    color: #183592;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.cabecera-servicios-pro p {
    color: #666;
    font-size: 1.1rem;
}

/* GRID DE 3 COLUMNAS */
.grid-servicios-pro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* LA TARJETA (El contenedor mágico) */
.tarjeta-servicio-pro {
    position: relative;
    height: 400px; /* Altura fija para que sean iguales */
    border-radius: 12px; /* Bordes redondeados modernos */
    overflow: hidden; /* Para que la imagen no se salga al hacer zoom */
    display: block;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* LA IMAGEN DE FONDO */
.imagen-servicio-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.imagen-servicio-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Llena la tarjeta sin deformarse */
    transition: transform 0.6s ease; /* Zoom suave */
}

/* CAPA OSCURA (Para que se lea el texto) */
.overlay-servicio {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
    transition: background 0.3s;
}

/* EL TEXTO QUE FLOTA */
.info-servicio-pro {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    color: #fff;
    transform: translateY(0);
    transition: transform 0.3s;
    z-index: 2;
}

.icono-servicio-pro {
    font-size: 2rem;
    color: #D3AA52; /* Dorado */
    margin-bottom: 15px;
}

.info-servicio-pro h3 {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.info-servicio-pro p {
    font-size: 0.95rem;
    margin: 0 0 20px 0;
    opacity: 0.9;
    font-weight: 300;
}

.btn-ver-servicio {
    color: #D3AA52;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* --- EFECTOS HOVER (ANIMACIÓN) --- */

/* 1. Zoom en la foto */
.tarjeta-servicio-pro:hover .imagen-servicio-wrapper img {
    transform: scale(1.1);
}

/* 2. Oscurecer un poco más el fondo */
.tarjeta-servicio-pro:hover .overlay-servicio {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(24, 53, 146, 0.4) 100%); /* Toque azulado */
}

/* 3. El texto sube un poquito */
.tarjeta-servicio-pro:hover .info-servicio-pro {
    transform: translateY(-5px);
}




/* =========================================
   FIN ESTILOS MOSAICO SERVICIOS PRO
   ========================================= */








/*ESTILOS FUERA DE LA ORGANIZACIÓN ÚLTIMA*/


nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  background-color: #1e3992;
  border-top:1px solid #d3aa52;
  border-bottom: 1px solid #d3aa52;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #C5952D;
}




#menu {
    display: flex; /* Para que los enlaces estén en línea */
    align-items: center; /* Centra verticalmente los enlaces en el nav */
    padding-right: 20px; /* Espacio extra a la derecha del menú */
}

#menu a {
    color: #f7f7f7; /* Color del texto de los enlaces */
    text-decoration: none;
    padding: 8px 15px; /* Espacio alrededor de cada enlace */
    margin-left: 5px; /* Espacio entre los enlaces */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

#menu a:hover,
#menu a.active-link { /* 'active-link' si tienes una clase para la página actual */
    background-color: #1a3b3b; /* Un tono más oscuro o un azul diferente para el hover/activo */
    color: #e4b85c; /* Ocre para el texto en hover/activo */
}





/*ESTILOS FUERA DE LA ORGANIZACIÓN ÚLTIMA*/



/* ========================================================= */
/* 1. ESTILOS BASE Y GENERALES (
, HTML) */
/* ========================================================= */

header {
  background: linear-gradient(to bottom, 
    rgba(24, 53, 146, 0.85),  /* #183592 - Azul Oscuro */
    rgba(24, 53, 146, 0.35),  /* #183592 - Repetido */
    rgba(57, 78, 150, 0.35),  /* #394e96 - Azul Medio */
    rgba(196, 184, 157, 0.35), /* #c4b89d - Ocre */
    rgba(24, 53, 146, 0.85)   /* #183592 - Final */
);
  color: white;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  border-bottom: 8px solid #c4b89d;
  z-index: 3;
}


body {
    
    margin: 0; /* Elimina el margen por defecto del body */
    font-family: 'Segoe UI', sans-serif; /* Fuente base para el texto */
    background-color: #efefef; /* Color de fondo general de la página */
    color: #1a1a1a; /* Color de texto principal */
    line-height: 1.6; /* Espaciado entre líneas para mejor lectura */

    
}

/* Estilos de enlaces globales */
a {
    color: #1e3992; /* Color de enlace por defecto */
    text-decoration: none; /* Elimina el subrayado por defecto */
}

a:hover {
    text-decoration: underline; /* Subraya al pasar el ratón */
}

/* Estilos para secciones de contenido general */
section {
    padding: 60px 20px; /* Relleno interior de las secciones */
    max-width: 1000px; /* Ancho máximo para el contenido de las secciones */
    margin: auto; /* Centra la sección horizontalmente */
    background-color: white; /* Fondo blanco para el contenido */
    margin-bottom: 40px; /* Margen inferior para separar secciones */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Sombra suave */
}

/* Estilos para títulos h2 */
h2 {
    color: #3c414d; /* Color gris oscuro */
    border-bottom: 2px solid #C5952D; /* Línea ocre debajo del título */
    padding-bottom: 10px; /* Espacio entre el texto y la línea */
    margin-bottom: 30px; /* Margen inferior del título */
}

/* Línea ocre decorativa */
.linea-ocre {
    border: none; /* Elimina el borde por defecto */
    border-top: 3px solid #D3AA52; /* Borde superior ocre */
    width: 60px; /* Ancho de la línea */
    margin: 10px auto 30px auto; /* Centra la línea y ajusta márgenes */
}

.enlace-enaire {
    color: #1A3B3B;
    font-weight: bold;
}

.parrafo-enaire-info {
    margin-top: 40px;
}



/* ========================================================= */
/* 2. ESTILOS DE CABECERAS Y NAVEGACIÓN ---HAY QUE QUITAR LOS DUPLICADOS.--- */
/* ========================================================= */

/* 2.1. CABECERA PRINCIPAL (INDEX.HTML con Carrusel de fondo) */

/* =========================================
   NUEVA CABECERA DE VÍDEO (HERO)
   ========================================= */

.cabecera {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    overflow: hidden; /* Corta lo que sobre del vídeo */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

/* El Vídeo de Fondo */
.video-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE: Hace que el vídeo llene todo sin deformarse */
    z-index: -2; /* Se va al fondo del todo */
}

/* Capa oscura semitransparente (Para leer bien el texto) */
.overlay-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 40% de opacidad negra. Sube a 0.5 o 0.6 si el texto no se lee */
    z-index: -1;
}



/* El contenedor del texto y menú para que esté encima */
.contenido-cabecera {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilo del Slogan mejorado */
.slogan h1 {
    font-size: 6rem; /* Más grande e impactante */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7); /* Sombra para resaltar */
    margin: 0;
    color: #fff;
    /* Animación: Nombre | Duración | Tipo | Retraso | Modo */
    animation: entrarDerecha 1s ease-out backwards;
}

/* 1. Entra desde la derecha */
@keyframes entrarDerecha {
    from {
        opacity: 0;
        transform: translateX(1000px); /* Empieza 100px a la derecha */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Termina en su sitio */
    }
}




.slogan h2 {
    font-size: 3rem;
    color: #D3AA52; /* Dorado corporativo */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
    margin-top: 15px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 8px;
    /* Animación: entra con un pequeño retraso de 0.3s */
    animation: entrarIzquierda 3s ease-out 0.3s backwards;
}

/* 2. Entra desde la izquierda */
@keyframes entrarIzquierda {
    from {
        opacity: 0;
        transform: translateX(-1000px); /* Empieza 100px a la izquierda */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}







/* =========================================
   CORRECCIONES EXCLUSIVAS PARA 
    INDEX
   ========================================= */

/* 1. Atacamos al menú SOLO cuando está dentro de la .cabecera (Index) */
.cabecera nav#menu {
    margin-top: 200px; /* Más separación del título */
    /* Animación de entrada desde abajo */
    animation: entrarAbajo 3s ease-out 0.6s backwards;
}

/* 3. Entra desde abajo */
@keyframes entrarAbajo {
    from {
        opacity: 0;
        transform: translateY(200px); /* Empieza 50px abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* 2. Arreglamos los enlaces y la raya amarilla SOLO en el Index */
.cabecera nav#menu a {
    /* Le damos aire por abajo para que la raya (borde) baje */
    padding-bottom: 15px; 
    
    /* Si la raya es un borde, esto la separa del texto */
    border-bottom: 2px solid transparent; /* O el color que tengas, pero con padding baja */
    
    /* Hacemos la letra un pelín más grande para compensar el video gigante */
    font-size: 1.1rem; 
    margin: 0 20px; /* Más espacio entre palabras */
}

/* 3. Efecto Hover (al pasar el ratón) en el Index */

.cabecera nav#menu a:hover {
    color: #183592;
    border-bottom: 2px solid #D3AA52; /* Aquí aparece la raya dorada */
}




/* 2.2. CABECERA INTERNA (Para páginas como Sobre Nosotros, Contacto, etc.) */
.cabecera-interna {
    background-color: #0d1b2a; /* Fondo oscuro */
    color: #f7f7f7; /* Texto claro */
    padding: 15px 40px; /* Relleno lateral aumentado */
    display: flex; /* Utiliza flexbox para alinear contenido */
    justify-content: space-between; /* Espacia el slogan y el menú */
    align-items: center; /* Centra verticalmente los elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil */
    position: sticky; /* La cabecera se queda fija al hacer scroll */
    top: 0; /* Se pega a la parte superior de la ventana */
    z-index: 1000; /* Asegura que la cabecera esté por encima de otros elementos */
    min-height: 70px; /* Altura mínima de la cabecera */
}

/* Estilos para el slogan en la cabecera interna */
.slogan-interno {
    flex-shrink: 0; /* Evita que el slogan se encoja */
    margin-right: 20px; /* Margen a la derecha para separar del menú */
}

/* Enlace del logo dentro de la cabecera interna */
.slogan-interno .logo-link {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Hereda el color del padre */
    display: block; /* Ocupa su propio bloque */
    position: relative; /* Necesario para la línea ocre */
    padding-bottom: 5px; /* Espacio para la línea ocre */
}

.slogan-interno h1 {
    font-family: 'Montserrat', sans-serif; /* Fuente del título */
    font-size: 1.8em; /* Tamaño del título */
    margin: 0; /* Sin margen */
    color: #e4b85c; /* Color ocre */
}

.slogan-interno h2 {
    font-family: 'Open Sans', sans-serif; /* Fuente del subtítulo */
    font-size: 0.9em; /* Tamaño del subtítulo */
    margin: 0; /* Sin margen */
    font-weight: normal; /* Peso de la fuente */
    color: #f7f7f7; /* Color blanco */
}

/* Línea ocre debajo del slogan en la cabecera interna */
.slogan-interno .logo-link::after {
    content: ''; /* Propiedad necesaria para pseudo-elementos */
    position: absolute; /* Posicionamiento absoluto */
    left: 0; /* Desde el inicio del enlace */
    bottom: 0; /* En la parte inferior */
    width: 100%; /* Cubre todo el ancho del enlace */
    height: 2px; /* Grosor de la línea */
    background-color: #e4b85c; /* Color ocre */
    border-radius: 1px; /* Bordes ligeramente redondeados */
}

/* ------------------------------------------------------------------- */
/* ESTILOS DEL MENÚ DE NAVEGACIÓN (APLICAN A AMBOS TIPOS DE HEADER EN DESKTOP) */
/* ------------------------------------------------------------------- */


/* MENÚ DE NAVEGACIÓN (Estilos comunes para desktop en ambos tipos de header) */
nav#menu {
    display: flex; /* Muestra los enlaces en línea (desktop) */
    justify-content: center; /* Centra los enlaces horizontalmente */
    align-items: center; /* Centra los enlaces verticalmente */
    gap: 15px; /* Espacio entre los elementos del menú */
    padding: 0; /* Sin relleno directo en el nav */
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin bordes */
    position: relative; /* Posicionamiento relativo en el flujo normal */
    z-index: 10; /* Índice Z */
}

nav#menu a {
    color: #f7f7f7; /* Color del texto de los enlaces */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Texto en negrita */
    padding: 8px 15px; /* Relleno alrededor de cada enlace */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave al pasar el ratón */
    font-family: 'Open Sans', sans-serif; /* Fuente */
}

nav#menu a:hover,
nav#menu a.active-link { /* Estilos al pasar el ratón o si es el enlace activo */
    color: #e4b85c; /* Color ocre */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
}

/* 2.4. BOTÓN DE MENÚ MÓVIL (HAMBURGUESA) */
.menu-toggle {
    display: none; /* Por defecto, oculto en pantallas grandes (desktop) */
    font-size: 2em; /* Tamaño del icono */
    color: #e4b85c; /* Color ocre */
    padding: 0 10px; /* Relleno para el área de clic */
    cursor: pointer; /* Cambia el cursor a una mano */
    z-index: 1001; /* Asegura que esté por encima de todo */
}


/* FIN ESTILOS DE CABECERA Y NAVEGACIÓN quitados los duplicados. */



/* ========================================================= */
/* 3. ESTILOS DE FORMULARIOS */
/* ========================================================= */
form {
    display: flex; /* Utiliza flexbox para organizar los campos */
    flex-direction: column; /* Organiza los campos en columna */
    gap: 15px; /* Espacio entre los campos */
    max-width: 600px; /* Ancho máximo del formulario */
    margin: 30px auto; /* Centra el formulario y añade margen */
}

form input,
form select,
form textarea {
    padding: 10px; /* Relleno interno */
    font-size: 1em; /* Tamaño de fuente */
    border: 1px solid #ccc; /* Borde suave */
    border-radius: 5px; /* Bordes redondeados */
}

form button {
    background-color: #3c414d; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    border: none; /* Sin borde */
    padding: 12px; /* Relleno interno */
    font-size: 1em; /* Tamaño de fuente */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

form button:hover {
    background-color: #C5952D; /* Color ocre al pasar el ratón */
    color: black; /* Texto negro al pasar el ratón */
}

/* Ocultar mensaje de error del Captcha por defecto */
#error-captcha {
    display: none;       /* Oculto */
    color: red;          /* Rojo */
    font-weight: bold;   /* Negrita */
    font-size: 0.9rem;   /* Tamaño */
    margin-top: 5px;
}




/* fin de estilos de formularios */


/* ========================================================= */
/* 4. ESTILOS DE FOOTER */
/* ========================================================= */
footer {
    background: #1e3992; /* Fondo azul oscuro */
    color: #aaa; /* Color de texto gris claro */
    text-align: center; /* Texto centrado */
    padding: 30px; /* Relleno interno */
    font-size: 0.9em; /* Tamaño de fuente más pequeño */
    border-top: 8px solid #c4b89d; /* Borde superior ocre */
}


/* ========================================================= */
/* 5. ESTILOS DE CARRUSELES (SLIDER DE IMÁGENES) */
/* ========================================================= */

/* 5.1. Estilos generales para cualquier .slider */
.slider {
    position: relative; /* Necesario para posicionar las imágenes dentro */
    width: 100%; /* Ancho completo */
    height: 500px; /* Altura por defecto para desktop */
    overflow: hidden; /* Oculta el contenido que se sale de los límites */
    background-color: #f0f0f0; /* Fondo claro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Sombra suave */
}

.slider img {
    position: absolute; /* Posiciona las imágenes de forma absoluta */
    width: 100%; /* Cubre todo el ancho del slider */
    height: 100%; /* Cubre toda la altura del slider */
    object-fit: cover; /* Recorta la imagen para cubrir el área sin distorsión */
    top: 0; /* Alineado arriba */
    left: 0; /* Alineado a la izquierda */
    opacity: 0; /* Por defecto, las imágenes están invisibles */
    transition: opacity 1s ease-in-out; /* Transición suave al cambiar la opacidad */
}

.slider img.active {
    opacity: 1; /* La imagen con la clase 'active' es visible */
}

/* 5.2. Estilos específicos para el carrusel de parajes (si tiene un ID distinto) */
#carrusel-parajes {
    height: 350px; /* Altura específica para este carrusel */
}

/*fin estilos de carrruseles quitados los duplicados. */


/* ========================================================= */
/* 6. ESTILOS DE MODAL (VENTANA EMERGENTE) */
/* ========================================================= */

/* 6.1. Fondo oscuro flotante (overlay) del modal */
#promoModal {
    display: none; /* Oculto por defecto, JavaScript lo hará visible */
    position: fixed; /* Fijo en la pantalla, no se desplaza con el scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro semitransparente */
    z-index: 10000; /* Asegura que esté por encima de todo */
    justify-content: center; /* Centra el contenido horizontalmente (cuando es flex) */
    align-items: center; /* Centra el contenido verticalmente (cuando es flex) */
}

/* 6.2. Contenido central del modal (la caja de la oferta) */
.modal-contenido {
    background-color: rgba(252, 253, 254, 0.80) ; /* Fondo blanco   #FFFFFF */
    color: #1a1a1a; /* Color de texto */
    padding: 30px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra pronunciada */
    max-width: 80%; /* Ancho máximo en móvil */
    width: 400px; /* Ancho fijo en escritorio */
    position: relative; /* Necesario para posicionar el botón de cerrar */
    text-align: center; /* Texto centrado */
}

/* 6.3. Botón para cerrar el modal */
.modal-cerrar {
    position: absolute; /* Posicionamiento absoluto dentro del modal-contenido */
    top: 10px; /* Arriba */
    right: 15px; /* A la derecha */
    font-size: 24px; /* Tamaño del icono */
    font-weight: bold; /* Negrita */
    cursor: pointer; /* Cursor de mano */
    color: #3C414D; /* Color gris carbón */
}

/* 6.4. Botón de llamada a la acción del modal */
.modal-cta {
    display: inline-block; /* Se comporta como un bloque pero permite texto al lado */
    background-color: #1E3992; /* Fondo azul profundo */
    color: white; /* Texto blanco */
    padding: 10px 20px; /* Relleno */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Bordes redondeados */
    font-weight: bold; /* Negrita */
    margin-top: 20px; /* Margen superior */
    transition: background-color 0.3s; /* Transición suave */
}

.modal-cta:hover {
    background-color: #D3AA52; /* Fondo ocre al pasar el ratón */
}


/*--------------------------------------------------------------------*/
/* FIN ESTILOS DE MODAL VENTANA EMERGENTE */
/*---------------------------------------------------------------------*/


/* ========================================================= */
/* 7. ESTILOS DE SECCIONES DE CONFIANZA (bloque de iconos y tarjetas) */
/* ========================================================= */

/* esta parte no la puso la ia en la última revisión */

/* ESTILO GENERAL DE LAS SECCIONES */
.seccion-confianza {
    padding: 60px 20px;
    background-color: #FFFFFF; /* Fondo blanco o muy claro */
    text-align: center;
}

/*esta parte anterior en principio se puede quitar*/


/* Contenedor flexible y responsive */
.bloque-iconos {
    display: flex; /* Utiliza flexbox para las tarjetas */
    flex-wrap: wrap; /* Permite que las tarjetas salten de línea */
    justify-content: space-around; /* Distribuye el espacio entre las tarjetas */
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top: 40px; /* Margen superior */
}

/* Estilo de cada tarjeta de confianza */
.tarjeta-confianza {
    flex: 1 1 22%; /* 4 tarjetas por línea en desktop, cada una ocupa 22% del espacio */
    min-width: 250px; /* Ancho mínimo para móvil */
    padding: 20px; /* Relleno interno */
    border: 1px solid #EFEFEF; /* Borde muy sutil */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra ligera */
    text-align: center; /* Texto centrado */
    padding-top: 25px; /* Relleno superior */
}

.tarjeta-confianza h3 {
    margin-top: 0; /* Sin margen superior */
    margin-bottom: 10px; /* Margen inferior */
}

/* Estilo de los iconos y logos dentro de las tarjetas */
.logo-legal,
.icono-servicio {
    max-height: 80px; /* Altura máxima */
    width: auto; /* Ancho automático */
    margin-bottom: 15px; /* Margen inferior */
}

.logo-legal {
    max-width: 100%; /* Ancho máximo del logo */
    height: auto; /* Altura automática */

    /* --- AÑADIR ESTAS LÍNEAS PARA CENTRAR --- */
    display: block; /* Convertir en bloque para que margin: auto funcione */
    margin-left: auto; /* Margen izquierdo automático */
    margin-right: auto; /* Margen derecho automático */
    margin-bottom: 15px; /* Margen inferior que ya tenías */
}

.icono-servicio {
    font-size: 3em; /* Emojis grandes */
    color: #1E3992; /* Azul profundo */
    display: block; /* Ocupa su propio bloque */
    margin-bottom: 10px; /* Margen inferior */
}

/* Estilo para iconos SVG */
.icono-servicio-svg {
    width: 80px; /* Ancho fijo */
    height: 80px; /* Altura fija */
    display: block; /* Ocupa su propio bloque */
    margin: 0 auto 15px auto; /* Centra y añade margen inferior */
}

/* ========================================================= */
/* FIN  7. ESTILOS DE SECCIONES DE ZA (bloque de iconos y tarjetas) */
/* ========================================================= */

/* ========================================================= */
/* 8. ESTILOS ESPECÍFICOS PARA LA PÁGINA DE PROYECTOS */
/* ========================================================= */

/* Animación de fondo (nubes) */
@keyframes mover-nubes {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; } /* Mueve la imagen de fondo hacia la derecha */
}

/*contenedor 1*/


.contenedor-cielo {
    background-image: url('imagenes/fondo-nubes.jpg'); /* Imagen de fondo de nubes */
    background-size: cover; /* Cubre todo el área */
    background-repeat: repeat-x; /* Repite la imagen horizontalmente */
    animation: mover-nubes 60s linear infinite; /* Animación de 60s, lineal, infinita */
    padding: 40px 20px; /* Relleno */
    margin-top: 0px; /* Margen superior */
    border-radius: 0px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el contenido que se sale de los límites */
}

.contenedor-cielo-abajo {
    background-image: url('imagenes/fondo-nubes2.jpg'); /* Imagen de fondo de nubes */
    background-size: cover; /* Cubre todo el área */
    background-repeat: repeat-x; /* Repite la imagen horizontalmente */
    animation: mover-nubes 60s linear infinite; /* Animación de 60s, lineal, infinita */
    padding: 40px 20px; /* Relleno */
    margin-top: 0px; /* Margen superior */
    border-radius: 0px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el contenido que se sale de los límites */
}



/* Para el menú de navegación interno de proyectos */
.indice-proyectos {
    background-color: rgba(255, 255, 255, 0.2); /* Blanco con 70% de opacidad */
    padding: 30px 20px;
    text-align: center;
    margin: 5px auto;
    max-width: 1000px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Asegúrate de que los enlaces dentro tengan color suficiente para verse */
}

/* Para la cabecera de la sección "Potencia tu negocio..." */
/* Para la cabecera de la sección "Potencia tu negocio..." */
.seccion-proyecto .header-seccion { /* Apuntamos al div dentro de la sección */
    background-color: rgba(255, 255, 255, 0.6); /* Blanco con 60% de opacidad */
    padding: 10px 10px; /* Mismo padding para mantener el diseño */
    margin: -30px -20px 30px -20px; /* Ajustamos márgenes para que la opacidad "extienda" */
    border-radius: 8px; /* todas las esquinas redondeadas */
    /* No box-shadow aquí para que la sombra venga de la sección padre */
    position: relative; /* Para asegurar que el z-index funcione si es necesario */
    z-index: 2; /* Para que quede por encima del contenido que le sigue */
}

/* Ajustes para el subtítulo dentro del header-seccion */
.seccion-proyecto .header-seccion .subtitulo-potente {
    color: #3c414d; /* Asegura un buen contraste con el fondo semi-transparente */
}






img {
    max-width: 100%; /* <-- BIEN */
    height: auto; /* <-- BIEN */
    display: block; /* <-- BIEN */
}

.galeria-simple {
    display: flex; /* <-- BIEN */
    flex-wrap: wrap; /* <-- BIEN */
    gap: 15px; /* <-- BIEN */
    margin-top: 20px;
    justify-content: center;
}

.galeria-simple img {
    flex: 1 1 calc(50% - 15px); /* <-- BIEN para escritorio/tablet */
    min-width: 280px; /* <-- ¡ESTE ES EL PROBLEMA EN MÓVILES! */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo general de las secciones de proyectos */
.seccion-proyecto {
    padding: 60px 20px; /* Relleno */
    text-align: center;
    max-width: 1000px; /* Ancho máximo */
    margin: 40px auto; /* Margen y centrado */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Sombra */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transiciones suaves */
}

/* Efecto hover en las secciones de proyectos */
.seccion-proyecto:hover {
    box-shadow: 0 8px 25px rgba(211, 170, 82, 0.4); /* Sombra ocre brillante */
    transform: translateY(-5px); /* Pequeño levantamiento */
}

/* Estilo del menú de anclas (navegación interna) */
.menu-anclas {
    display: flex; /* Utiliza flexbox */
    justify-content: center; /* Centra los elementos */
    gap: 20px; /* Espacio entre los enlaces */
    margin-bottom: 30px; /* Margen inferior */
    flex-wrap: wrap; /* Para que se adapte bien en móviles */
}

.menu-anclas a {
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Negrita */
    color: #FFFFFF; /* Color de texto */
    padding: 12px 25px; /* Relleno */
    border-radius: 30px;
    background-color: rgba(30, 57, 146, 0.8); /* Fondo azul semitransparente */
    border: 2px solid transparent; /* Borde transparente inicial */
    
    border-bottom: 3px solid transparent; /* Borde inferior transparente */
    transition: color 0.3s, border-bottom 0.3s; /* Transición suave */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave */
}

.menu-anclas a:hover {
    background-color: #1e3992; /* Azul sólido al pasar el ratón */
    color: #D3AA52; /* Color ocre al pasar el ratón */
    border-bottom: 3px solid #D3AA52; /* Borde inferior ocre al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación */

}

/* Estilo del encabezado de sección */
.header-seccion h1 {
    font-size: 2.5rem; /* Tamaño del título */
    color: #1E3992; /* Azul profundo */
}

/* Subtítulo potente */
.subtitulo-potente {
    font-size: 1.2rem; /* Tamaño de fuente */
    color: #3c414d; /* Color gris oscuro */
    font-style: italic; /* Texto en cursiva */
    margin-bottom: 40px; /* Margen inferior */
}

/* Detalles legales en lista */
.detalles-legales ul {
    list-style: none; /* Sin viñetas */
    padding: 0; /* Sin relleno */
    text-align: left; /* Texto alineado a la izquierda */
}

.detalles-legales li {
    background: #f4f4f4; /* Fondo gris claro */
    padding: 10px; /* Relleno */
    margin-bottom: 5px; /* Margen inferior */
    border-left: 5px solid #D3AA52; /* Borde izquierdo ocre */
}

/* ========================================================= */
/* FIN 8. ESTILOS ESPECÍFICOS PARA LA PÁGINA DE PROYECTOS QUITAR DUPLICADOS. */
/* ========================================================= */


/* ========================================================= */
/* 9. RUEDA INTERACTIVA DE PROYECTOS (GALERÍA DE VIDEOS) */
/* ========================================================= */

.seccion-proyectos-videos {
    padding: 20px 0; /* Relleno */
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.2);/* Texto centrado */
}

.rueda-proyectos-wrapper {
    position: relative !important; /* Posicionamiento relativo */
    width: 90%; /* Ancho del 90% */
    max-width: 1200px; /* Ancho máximo */
    margin: 40px auto; /* Centra y añade margen */
    overflow: hidden; /* Oculta las tarjetas fuera de vista */
    padding: 20px 0; /* Relleno */
}

.rueda-proyectos-track {
    display: flex; /* Utiliza flexbox para las tarjetas */
    gap: 20px; /* Espacio entre las tarjetas */

    /* --- CAMBIO CLAVE AQUÍ --- */
    /* Esto añade un espacio invisible a los lados para que la 1ª y última tarjeta lleguen al centro */
    padding: 0 calc(50% - 140px); 
    /* 140px es la mitad del ancho de tu tarjeta (280px / 2) */

    transition: transform 0.3s ease-in-out; /* Transición suave */
    justify-content: flex-start; /* Alinea las tarjetas al inicio */
    align-items: center; /* Centra verticalmente */
    height: auto; /* Altura automática */
    min-height: 340px; /* Altura mínima */
    position: relative; /* Posicionamiento relativo */
    overflow-x: scroll; /* Permite el scroll horizontal */
    scroll-behavior: smooth; /* Scroll suave */
    scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
    -ms-overflow-style: none; /* Oculta la barra de scroll en IE/Edge */
    -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
}


.rueda-proyectos-track::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en Chrome/Safari */
}



.tarjeta-proyecto {
    /* Estilos base de la tarjeta */
    flex: 0 0 280px; /* Ancho base de la tarjeta */
    height: 300px; /* Altura base */
    min-width: 250px; /* Ancho mínimo */
    background-color: #fff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra */
    overflow: hidden; /* Oculta el contenido que se sale */
    text-decoration: none; /* Sin subrayado */
    color: #333; /* Color de texto */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transiciones suaves */
    scroll-snap-align: center; /* Centra la tarjeta al hacer swipe */

    /* Estilos del efecto "cover flow" para tarjetas no activas */
    transform: scale(0.85); /* Más pequeñas por defecto */
    opacity: 0.6; /* Menos visibles */
    filter: brightness(0.7); /* Oscurecidas */
    pointer-events: none; /* Desactiva clics en tarjetas no activas */
    z-index: 1; /* Fondo */

    /* Estilos FLEXBOX para la estructura interna */
    display: flex; /* ASEGÚRATE DE QUE ESTÉ EN FLEX */
    flex-direction: column; /* PARA QUE LA IMAGEN Y EL INFO-PROYECTO SE APILEN */
}

.tarjeta-proyecto:hover {
    transform: translateY(-5px) scale(1.02); /* Efecto al pasar el ratón */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.tarjeta-proyecto img {
    width: 100%; /* Ancho completo */
    height: 180px; /* Altura de la imagen */
    object-fit: cover; /* Recorta la imagen */
    border-bottom: 2px solid #D3AA52; /* Borde inferior ocre */
}

.info-proyecto {
    padding: 15px; /* Relleno */
    text-align: center;
    flex-grow: 1; /* Esto es clave para que ocupe el espacio restante */
    display: flex; /* También en flex para organizar el h3 y el botón */
    flex-direction: column; /* Apila el h3 y el botón */
    justify-content: space-between; /* Espacia el título y el botón */
    background-color: #fff; /* Fondo blanco para el área de texto */
    color: #333; /* Asegura el color del texto */
}

.info-proyecto h2 {
    margin-top: 0; /* Sin margen superior */
    margin-bottom: 10px; /* Margen inferior */
    font-size: 1rem; /* Tamaño de fuente */
    color: #1e3992; /* Azul profundo */
}

.icono-youtube {
    display: inline-flex; /* Icono en línea con flex */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    font-size: 0.9rem; /* Tamaño de fuente */
    color: #fff; /* Texto blanco */
    background-color: #ff0000; /* Rojo de YouTube */
    padding: 6px 12px; /* Relleno */
    border-radius: 20px; /* Bordes muy redondeados */
    margin-top: 15px; /* Margen superior */
    transition: background-color 0.3s ease; /* Transición suave */
    text-decoration: none; /* Asegura que no tenga subrayado */
}

.icono-youtube:hover {
    background-color: #cc0000; /* Rojo más oscuro al pasar el ratón */
}



/* Botones de Navegación */
.rueda-nav-btn {
    position: absolute; /* Posicionamiento absoluto */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%); /* Ajuste de centrado */
    background-color: rgba(30, 57, 146, 0.85); /* Fondo azul semitransparente */
    color: #fff; /* Texto blanco */
    border: none; /* Sin borde */
    padding: 15px 10px; /* Relleno */
    cursor: pointer; /* Cursor de mano */
    font-size: 2rem; /* Tamaño del icono */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave */
    z-index: 15;
    display: block;
}

.rueda-nav-btn:hover {
    background-color: #1e3992;
}

.rueda-nav-prev {
    left: 10px;
}

.rueda-nav-next {
    right: 10px;
}




.tarjeta-proyecto img {
    width: 100%;
    height: 160px; /* Ajusta si es necesario */
    object-fit: cover;
    border-bottom: 2px solid #D3AA52;
}

.tarjeta-proyecto h3 {
    font-size: 1.1rem; /* Título más pequeño por defecto */
}

.tarjeta-proyecto .icono-youtube {
    padding: 6px 12px;
    font-size: 0.9rem;
}


/* ESTILO PARA LA TARJETA CENTRAL / ACTIVA */
.tarjeta-proyecto.active {
    transform: scale(1); /* Tamaño normal */
    opacity: 1; /* Completamente visible */
    filter: brightness(1); /* Brillo normal */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
    pointer-events: auto; /* Permite clics */
    z-index: 5; /* Por encima de las demás */
    flex: 0 0 320px; /* Un poco más ancha */
    height: 340px; /* Un poco más alta */
}

.tarjeta-proyecto.active img {
    height: 190px; /*AJUSTE DE LA ALTURA DE LA IMAGEN*/
}

.tarjeta-proyecto.active h3 {
    font-size: 1.4rem; /*titulo mas grande*/
}

.tarjeta-proyecto.active .icono-youtube {
    padding: 8px 15px; /*relleno*/
    font-size: 1.1rem; /*tamaño fuente*/
}

/* Ajustes para los botones de navegación para que no tapen la tarjeta activa */
.rueda-nav-btn {
    z-index: 6; /* Asegurarse de que estén por encima de las tarjetas laterales pero no tapen demasiado */
    background-color: rgba(30, 57, 146, 0.85); /* Un poco más opacos */
}



/* ========================================================= */
/* 9. FIN ESTILOS DE RUEDA INTERACTIVA DE PROYECTOS (GALERÍA DE VIDEOS) */
/* ========================================================= */

/* ========================================================= */
/* ESTILOS PARA VÍDEOS RESPONSIVOS (EMBEBIDOS) */
/* ========================================================= */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura / ancho = 9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Fondo negro mientras carga o si no se ve */
    margin: 20px auto; /* Centra el vídeo y le da un margen */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Asegura que no tenga borde */
}

/* Opcional: Estilo para el botón de tu canal de YouTube */
.btn-youtube-canal {
    display: inline-block;
    background-color: #ff0000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-youtube-canal:hover {
    background-color: #cc0000;
}


/* ========================================================= */
/* FIN ESTILOS PARA VÍDEOS RESPONSIVOS (EMBEBIDOS) */
/* ========================================================= */


/* --- ESTILOS COOKIES Y MODAL --- */

/* 1. El Banner Azul de abajo */
#cookie-banner {
    position: fixed;
    bottom: -100%; /* Oculto abajo */
    left: 0;
    width: 100%;
    background-color: #183592;
    color: #fff;
    padding: 20px;
    z-index: 99999; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    transition: bottom 0.5s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

#cookie-banner.mostrar {
    bottom: 0; /* Aparece */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    flex: 1;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.btn-cookie-aceptar {
    background-color: #D3AA52;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.btn-cookie-rechazar {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* 2. La Ventana Modal (Fondo Oscuro) */
.modal-legal-oculto {
    display: none; /* Oculto */
    position: fixed;
    z-index: 100000; /* Encima del banner */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

.modal-legal-contenido {
    background-color: #fff;
    margin: 5% auto; /* Un poco más arriba */
    padding: 30px;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

.cerrar-legal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.texto-legal-scroll {
    max-height: 50vh;
    overflow-y: auto;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
}

.btn-entendido-legal {
    background-color: #183592;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
}

/* Móvil */
@media (max-width: 768px) {
    .cookie-content { flex-direction: column; text-align: center; }
}




/*---------------------------------------------------
/* 4. MEDIAS QUERIES para Móviles (Ajuste responsive) 
-----------------------------------------------------*/

/* AJUSTE MOVIL: Aseguramos que el botón hamburguesa se vea bien */
@media (max-width: 768px) {
    .cabecera .menu-toggle {
        color: #fff; /* Asegura que las tres rayitas sean blancas sobre el video */
        font-size: 2rem;
        margin-top: 20px;
    }
}

/*ajuste para menu de index*/

@media screen and (max-width: 768px) {
    .tarjeta-confianza {
        /* En móvil, cada tarjeta ocupa todo el ancho */
        flex-basis: 100%; 
    }
}

.galeria-simple img {
        flex: 1 1 100%; /* <-- BIEN, esto debería hacer que ocupen todo el ancho */
        max-width: 100%;
        min-width: unset; /* Anulamos el min-width en móviles */
    }

.cabecera {
  position: relative;
}

.slogan {
 
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.slogan h1, .slogan h2 {
  margin: 0;
  color:  rgba(255, 255, 255); /* Blanco con opacidad */
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
}


/* =========================================
   FOOTER Y REDES SOCIALES
   ========================================= */

footer {

    background-color: #171140; /* Gris muy oscuro casi negro /cambiado a azul oscuro */
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    margin-top: auto; /* Si usas flex en el body, esto empuja el footer abajo */
    border-top: 3px solid #D3AA52; /* Línea dorada decorativa arriba */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.redes-sociales {
    display: flex;
    gap: 25px; /* Espacio entre iconos */
    margin-bottom: 10px;
}

.redes-sociales a {
    color: #ffffff; /* Color inicial blanco */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Círculo alrededor si quisieras fondo, o para el hover */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil */
}

.redes-sociales a svg {
    width: 24px;
    height: 24px;
}

/* Efecto HOVER: Se ponen dorados y suben un poquito */
.redes-sociales a:hover {
    color: #1a1a1a; /* Icono oscuro */
    background-color: #D3AA52; /* Fondo dorado */
    transform: translateY(-3px); /* Levita */
    box-shadow: 0 10px 15px rgba(211, 170, 82, 0.4); /* Resplandor dorado */
}

.copyright {
    font-size: 0.9rem;
    color: #bbbbbb; /* Un gris más suave para el texto legal */
    font-weight: 300;
}



.footer-titulo {
    color: #D3AA52; /* Dorado corporativo */
    font-size: 0.85rem; /* Pequeño, no queremos que grite */
    text-transform: uppercase; /* Mayúsculas elegantes */
    letter-spacing: 2px; /* Letras separadas (tracking) para aire premium */
    margin-bottom: 15px; /* Separación con los iconos */
    font-weight: 600;
}






/* ========================================================= */
/* 10. MEDIA QUERIES (RESPONSIVE) */
/* ========================================================= */

@media screen and (max-width: 768px) {
    /* ========================================================= */
    /* 10.1. Ajustes Generales para Móviles */
    /* ========================================================= */
    section {
        padding: 30px 15px; /* Reducir padding de secciones */
        margin-bottom: 20px;
    }

    h2 {
        font-size: 1.8em; /* Ajuste del tamaño de los títulos */
        margin-bottom: 20px;
    }

    form {
        margin: 20px auto; /* Ajuste de margen del formulario */
        padding: 0 10px; /* Pequeño padding para el formulario */
    }

    /* Ocultar el carrusel en index.html si es necesario en móvil */
    .slider {
        height: 250px; /* Ajuste para el slider principal en móvil */
    }
    #carrusel-parajes {
        height: 200px; /* Ajuste para slider específico */
    }

    /* Tarjetas de Confianza */
    .tarjeta-confianza {
        flex-basis: 100%; /* En móvil, cada tarjeta ocupa todo el ancho */
        max-width: 350px; /* Ancho máximo para que no sean demasiado grandes */
        margin: 0 auto; /* Centrar las tarjetas */
    }

    /* Detalles legales */
    .detalles-legales li {
        font-size: 0.9em;
        padding: 8px;
    }

    /* ========================================================= */
    /* 10.2. Ajustes de Cabeceras y Navegación en Móviles */
    /* ========================================================= */

    /* ------ Cabecera Principal (INDEX.HTML) en móvil ------ */
    .cabecera {
        padding: 20px 10px; /* Reducir padding */
        min-height: 100px; /* Ajustar altura mínima si es necesario */
        justify-content: flex-start; /* Alinear arriba */
        flex-direction: row; /* Para que el slogan y el toggle estén en fila */
        align-items: center; /* Centrado vertical */
        flex-wrap: wrap; /* Permite que los elementos se envuelvan si es necesario */
    }

    .cabecera .slogan {
        position: static; /* Volver a flujo normal en móvil */
        transform: none;
        width: auto; /* Ancho automático para ajustarse */
        flex-grow: 1; /* Permite que crezca para ocupar espacio */
        text-align: left; /* Alinear el eslogan a la izquierda */
        padding-left: 10px; /* Padding para el slogan */
        margin-right: 10px; /* Margen para separar del toggle */
    }

    .cabecera .slogan h1 {
        font-size: 2.5rem; /* Tamaño más pequeño para móvil */
        line-height: 1.1;
        margin-bottom: 5px;
    }

    .cabecera .slogan h2 {
        font-size: 1.2rem; /* Subtítulo más pequeño */
        margin-top: 0;
    }
    
    .cabecera .slogan::after {
        content: ''; /* Asegura que la pseudo-clase exista */
        position: static; /* No absoluto para que fluya con el contenido */
        transform: none;
        width: 80px; /* Más pequeña en móvil */
        height: 2px;
        margin: 5px 0 0 0; /* Ajuste de margen para que quede debajo del slogan */
        display: block; /* Para que la línea ocupe su propio espacio */
        background-color: #e4b85c;
        border-radius: 1px;
    }


    /* ------ Cabecera INTERNA en móvil ------ */
    .cabecera-interna {
        padding: 15px 20px; /* Ajustar padding lateral */
        flex-wrap: wrap; /* Permite que el menú se envuelva si es muy largo */
        justify-content: space-between; /* Eslogan a un lado, hamburguesa al otro */
        align-items: center; /* Centrado vertical */
        min-height: auto; /* Altura auto para adaptarse al contenido */
    }

    .slogan-interno {
        margin-right: 0; /* No necesitamos margin-right aquí si el menu-toggle está a la derecha */
        width: 60%; /* Ocupa una parte del ancho para el eslogan */
        text-align: left;
    }

    .slogan-interno .logo-link {
        padding-bottom: 3px;
    }

    .slogan-interno .logo-link::after {
        width: 80%; /* Línea ocre más corta en móvil */
    }

    /* ------ Botón de menú móvil (HAMBURGUESA) en móvil ------ */
    .menu-toggle {
        display: block; /* HACER VISIBLE EN MÓVIL */
        margin-left: auto; /* Empuja el botón a la derecha */
        margin-right: 10px; /* Pequeño margen a la derecha */
        order: 2; /* Para que aparezca a la derecha del slogan en flex */
    }

    /* ------ Menú de navegación (lista de enlaces) en móvil ------ */
    nav#menu {
        display: none; /* OCULTO POR DEFECTO EN MÓVIL */
        flex-direction: column; /* Apila los enlaces verticalmente */
        align-items: center; /* Centra los enlaces */
        width: 60%; /* Ocupa todo el ancho */
        position: absolute; /* MUY IMPORTANTE: Se posiciona absolutamente */
        /* La siguiente línea define dónde aparece el menú. 
           Si tu cabecera es de 70px de alto, esto lo pone justo debajo. */
        top: 70px; /* Ajusta según la altura de tu .cabecera o .cabecera-interna en móvil */
        left: 10;
        background-color: rgba(48, 98, 150, 0.7); /* Fondo para el menú desplegado con 90% de opacidad */
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        z-index: 999; /* Por debajo de la hamburguesa pero encima del contenido */
        overflow: hidden; /* Oculta el contenido si se sobrepasa el tamaño */
        height: 0; /* Oculto por altura cero para animación */
        transition: height 0.3s ease-out; /* Animación de altura */
    }

    /* Clase que JavaScript añadirá para mostrar el menú */
    nav#menu.active { 
        display: flex; /* Muestra el menú */
        height: auto; /* Permite que el contenido determine la altura */
        max-height: 300px; /* Altura máxima para evitar que sea demasiado grande */
        /* Considera que 'max-height' con 'auto' no siempre anima bien. 
           Si quieres una animación suave, podrías calcular la altura exacta con JS. */
    }

    nav#menu a {
        width: 90%; /* Los enlaces ocupan todo el ancho del menú desplegable */
        padding: 12px 20px; /* Padding más generoso para cada elemento */
        text-align: center; /* Centra el texto de cada enlace */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador entre enlaces */
        margin: 0; /* Quitar margen entre elementos para que ocupen todo el ancho */
        border-radius: 0;
    }
    nav#menu a:last-child {
        border-bottom: none; /* No hay borde en el último elemento */
    }

    /* Estilos del botón "Volver" si existe */
    .volver img {
        height: 30px;
    }


/* ========================================= */
/* AJUSTE DEL SLOGAN SOLO PARA MÓVILES       */
/* ========================================= */
@media (max-width: 768px) {
    .slogan {
        margin-top: 140px; /* <--- Este es el empujón hacia abajo */
    }
    
    /* Opcional: Si en móvil las letras se ven gigantes y se salen por los lados, 
       puedes aprovechar para achicarlas un poco aquí mismo */
    .slogan h1 {
        font-size: 3.5rem; 
    }
    .slogan h2 {
        font-size: 1.5rem;
    }
}








    /* ========================================================= */
    /* 10.3. Ajustes de la Rueda de Proyectos (Cover Flow) en Móviles */
    /* ========================================================= */
    .rueda-proyectos-wrapper {
        width: 100%; 
        padding: 0;
    }

    .rueda-proyectos-track {
        height: auto; 
        min-height: 280px; 
        gap: 10px;
        padding: 0 10%; /* Añade padding a los lados para que las tarjetas se asomen */
        justify-content: flex-start; 
        scroll-snap-type: x mandatory; /* Habilita el snap en móvil */
        -webkit-scroll-snap-type: x mandatory;
    }

    .tarjeta-proyecto {
        flex: 0 0 75%; /* Cada tarjeta ocupa el 75% del ancho del track */
        height: 250px; /* Altura ajustada para móvil */
        display: flex; /* ASEGÚRATE DE QUE ESTÉ EN FLEX EN MÓVIL TAMBIÉN */
        flex-direction: column; /* Y EN COLUMNA */
    }

    .tarjeta-proyecto img {
        height: 140px;
    }
.info-proyecto {
        padding: 10px; /* Quizás reducir el padding en móvil */
        flex-grow: 1;
        display: flex; /* Asegura flex para el contenido de texto */
        flex-direction: column;
        justify-content: space-between;
    }

    .info-proyecto h3 {
        font-size: 1em; /* Ajustar el tamaño del título en móvil */
        margin-bottom: 5px;
    }

    .icono-youtube {
        padding: 5px 10px; /* Ajustar padding del botón en móvil */
        font-size: 0.8em;
        margin-top: 10px;
    }

    .tarjeta-proyecto.active {
        flex: 0 0 90%; /* La tarjeta activa es más grande */
        height: 270px; /* Altura para activa en móvil */
    }
    .tarjeta-proyecto.active img {
        height: 155px; /* Altura de imagen activa en móvil */
    }

    .rueda-nav-btn {
        display: none !important; /* Oculta los botones de navegación en móvil */
    }
}