@import url('https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css');
@import url('https://unpkg.com/aos@next/dist/aos.css');

#mi-bloque-corporativo,
#mi-bloque-corporativo * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

#mi-bloque-corporativo {
    width: 100% !important;
    background-color: #ffffff !important;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    display: block !important;
    overflow-x: hidden !important;
}

/* --- ESTILOS MEJORADOS DE BOTONES (Efecto Líquido/Desplazamiento) --- */
#mi-bloque-corporativo .btn-negro {
    display: inline-block !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 40px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    overflow: hidden !important;
}
#mi-bloque-corporativo .btn-negro::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100% !important;
    background-color: #ffffff !important;
    z-index: -1 !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#mi-bloque-corporativo .btn-negro:hover {
    color: #000000 !important;
}
#mi-bloque-corporativo .btn-negro:hover::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

/* --- SECCIÓN 1: HERO BANNER (Efecto Parallax Fijo) --- */
#mi-bloque-corporativo .corp-hero {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 650px !important;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.4) 100%),
                      url('/wp-content/maintenance/assets/images/fondo_hero.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
}

#mi-bloque-corporativo .hero-wrapper-exacto {
    max-width: 900px !important;
    padding: 0 20px !important;
    z-index: 2 !important;
}
#mi-bloque-corporativo .hero-logo-img-gigante {
    width: 500px !important;
    max-width: 85% !important;
    height: auto !important;
    margin-bottom: 15px !important;
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.4)) !important;
    transition: transform 0.5s ease !important;
}
#mi-bloque-corporativo .hero-logo-img-gigante:hover {
    transform: scale(1.03) !important;
}
#mi-bloque-corporativo .hero-titulo-exacto {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 20px 0 15px 0 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.5) !important;
}

#mi-bloque-corporativo .hero-bajada-exacta {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 20px 0 15px 0 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.5) !important;
}

/* --- SECCIÓN 2: SOLUCIONES (Efectos de Imagen Cinemática) --- */
#mi-bloque-corporativo .corp-soluciones {
    background-color: #ffffff !important;
    padding: 140px 20px !important;
}
#mi-bloque-corporativo .soluciones-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 80px !important;
}
#mi-bloque-corporativo .soluciones-col-text { flex: 1 !important; }
#mi-bloque-corporativo .soluciones-col-img  { flex: 1 !important; }

#mi-bloque-corporativo .soluciones-col-text h3 {
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}
#mi-bloque-corporativo .linea-decorativa {
    width: 80px !important;
    height: 3px !important;
    background-color: #000000 !important;
    margin: 30px 0 !important;
    transition: width 0.4s ease !important;
}
#mi-bloque-corporativo .soluciones-container:hover .linea-decorativa {
    width: 140px !important;
}
#mi-bloque-corporativo .img-wrapper-efecto {
    width: 100% !important;
    height: 480px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 55px rgba(0,0,0,0.12) !important;
}
#mi-bloque-corporativo .img-recuadro {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#mi-bloque-corporativo .img-wrapper-efecto:hover .img-recuadro {
    transform: scale(1.07) !important;
}

/* ===================================================
   --- SECCIÓN 3: PROYECTOS (DISEÑO SOLAPADO ANCHO) ---
   =================================================== */
#mi-bloque-corporativo .corp-proyectos {
    background-color: #ffffff !important;
    padding: 100px 20px 140px 20px !important;
    width: 100% !important;
    overflow: hidden !important; 
}

#mi-bloque-corporativo .proyectos-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
}

#mi-bloque-corporativo #carrusel-proyectos {
    width: 100% !important;
    margin: 0 auto 60px auto !important;
    position: relative !important;
    
    /* ¡ESTA ES LA TIJERA INVISIBLE NATIVA!
       Recorta de forma estricta el carrusel de izquierda a derecha (del 0% al 100%),
       pero le damos un margen extra arriba y abajo (-50% a 150%) para permitir 
       que el proyecto central sobresalga en vertical sin cortarse. 
       Esto hace imposible que se dibuje nada fuera de las flechas. */
    clip-path: inset(-50% 0% -50% 0%) !important;
    
    overflow: visible !important; 
}

#mi-bloque-corporativo .splide__track {
    /* Dejamos que respire para el solapamiento pero el clip-path de arriba se encargará del corte */
    overflow: visible !important; 
    padding: 35px 0 !important;   
}

/* Configuración de las tarjetas (más anchas y proporcionadas con la web) */
#mi-bloque-corporativo .proyecto-item {
    height: 520px !important; /* Altura estilizada que acompaña de manera elegante al ancho */
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Estado por defecto para las tarjetas laterales */
#mi-bloque-corporativo .splide__slide {
    opacity: 0.8 !important;
    transform: scale(0.88) !important; /* Reducción de escala para los laterales */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, z-index 0.5s !important;
    z-index: 1 !important;
}

/* Tarjeta central activa: crece en vertical y pasa al frente */
#mi-bloque-corporativo .splide__slide.is-active {
    opacity: 1 !important;
    transform: scale(1.08) !important; /* Sobresale verticalmente de forma equilibrada */
    z-index: 5 !important;
}

/* Solapamiento sutil en 3D para unir las tarjetas de los costados */
#mi-bloque-corporativo .splide__slide.is-active + .splide__slide {
    margin-left: -25px !important; /* Atrae ligeramente la tarjeta derecha */
}
#mi-bloque-corporativo .splide__slide:has(+ .splide__slide.is-active) {
    margin-right: -25px !important; /* Atrae ligeramente la tarjeta izquierda */
}

/* Estilos de textos y degradado de información */
#mi-bloque-corporativo .proyecto-info-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 60px 25px 30px 25px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%) !important;
    text-align: left !important;
}

#mi-bloque-corporativo .proyecto-info-overlay h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#mi-bloque-corporativo .proyecto-info-overlay p {
    font-size: 13px !important;
    opacity: 0;
    transform: translateY(15px) !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
    color: #e0e0e0 !important;
}

#mi-bloque-corporativo .splide__slide.is-active .proyecto-item:hover .proyecto-info-overlay p {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- DISEÑO DE LAS FLECHAS LATERALES --- */
#mi-bloque-corporativo .splide__arrow {
    background: #000000 !important;
    border-radius: 0 !important;
    width: 40px !important;
    height: 60px !important;
    opacity: 0.9 !important;
    transition: background 0.3s, opacity 0.3s !important;
    z-index: 10 !important;
}

#mi-bloque-corporativo .splide__arrow:hover {
    background: #111111 !important;
    opacity: 1 !important;
}

#mi-bloque-corporativo .splide__arrow svg {
    fill: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
}

/* Alineación exacta con los nuevos bordes anchos del carrusel */
#mi-bloque-corporativo .splide__arrow--prev {
    left: 0 !important; 
}

#mi-bloque-corporativo .splide__arrow--next {
    right: 0 !important; 
}

/* --- SECCIÓN 4: LOGOS DE CLIENTES --- */
#mi-bloque-corporativo .corp-logos {
    background-color: #ffffff !important;
    padding: 60px 20px !important;
    border-top: 1px solid #f5f5f5 !important;
    width: 100% !important;
}
#mi-bloque-corporativo #carrusel-logos {
    max-width: 1100px !important;
    margin: 0 auto !important;
}
#mi-bloque-corporativo .text-logo {
    color: #999999 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    filter: grayscale(1) !important;
    display: block !important;
    width: 100% !important;
}
#mi-bloque-corporativo .text-logo span {
    display: block !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    color: #777777 !important;
    margin-top: 3px !important;
}
#mi-bloque-corporativo .text-logo:hover {
    color: #000000 !important;
    transform: translateY(-2px) !important;
    filter: grayscale(0) !important;
}

/* --- SECCIÓN 5: FOOTER GLOBAL UNIFICADO --- */
#mi-footer-climarte {
    width: 100% !important;
    background-color: #000000 !important; /* Fondo negro absoluto */
    padding: 35px 0 !important;           /* Altura de relleno elegante */
    box-sizing: border-box;
}

.footer-container-exacto {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;           /* Margen respecto a los bordes de la pantalla */
    display: flex !important;
    justify-content: flex-end !important; /* Alinea todo estrictamente a la derecha */
    align-items: center !important;
}

.footer-derecha-contacto {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;                 /* Espacio de separación entre elementos */
}

.footer-etiqueta-contacto {
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important; 
    font-size: 17px !important;           /* Texto un poco más grande */
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    margin-right: 12px !important;        /* Distancia entre el texto y el primer icono */
}

.footer-link-icono {
    color: #ffffff !important;
    font-size: 26px !important;           /* Iconos un poco más grandes y visibles */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Efecto hover */
.footer-link-icono:hover {
    opacity: 0.8;
    transform: scale(1.12);               /* Ligero aumento al pasar el cursor */
}

/* --- SECCIÓN RESPONSIVA (MÓVILES) --- */
@media (max-width: 768px) {
    #mi-bloque-corporativo .corp-hero { background-attachment: scroll !important; }
    #mi-bloque-corporativo .hero-titulo-exacto { font-size: 25px !important; }
    
    /* Aseguramos que las columnas ocupen el 100% del ancho disponible en móvil */
    #mi-bloque-corporativo .soluciones-container { 
        flex-direction: column !important; 
        gap: 40px !important; 
    }
    #mi-bloque-corporativo .soluciones-col-text,
    #mi-bloque-corporativo .soluciones-col-img {
        width: 100% !important;
        flex: none !important;
    }

    /* CORRECCIÓN DE IMAGEN EN SOLUCIONES: Forzamos el ancho y visibilidad */
    #mi-bloque-corporativo .img-wrapper-efecto { 
        width: 100% !important;
        height: 320px !important; 
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #mi-bloque-corporativo .img-recuadro {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    #mi-bloque-corporativo .splide__slide { opacity: 1 !important; }
    
    /* UNIFICACIÓN DEL FOOTER EN MÓVIL */
    .footer-container-exacto { 
        flex-direction: column !important; 
        justify-content: center !important;
        text-align: center !important; 
        gap: 20px !important; 
        padding: 0 20px !important;
    }
}