/* ========================================= */
/* 1. RESET & ESTRUCTURA                     */
/* ========================================= */
html { scroll-behavior: smooth; }
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    font-family: 'Roboto', sans-serif;
}
section { scroll-margin-top: 80px; }

/* REDUCCIÓN GLOBAL DE ESPACIOS (PADDINGS) */
.py-10, .py-8, .py-9 { 
    padding-top: 50px !important; 
    padding-bottom: 50px !important; 
}
.mb-8, .mb-10 { margin-bottom: 30px !important; }

/* ========================================= */
/* 2. HEADER & NAVEGACIÓN                    */
/* ========================================= */
.header-nav-menu, .fixed-top, .header-nav-menu-inner {
    background-color: #20274d !important;
    border: none !important;
}

/* ========================================= */
/* 3. SLIDER (FLECHAS, PUNTOS Y MOUSE)       */
/* ========================================= */
.banner-item {
    height: 85vh; min-height: 500px;
    background-size: cover; background-position: center;
    display: flex !important; align-items: center; justify-content: center;
}

.custom-arrow {
    position: absolute; top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100; width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.custom-arrow:hover { background: #38994c !important; border-color: #38994c !important; }
.slick-prev { left: 30px !important; }
.slick-next { right: 30px !important; }

.slick-dots {
    display: flex !important; justify-content: center;
    position: absolute; bottom: 20px; width: 100%; list-style: none;
}
.slick-dots li button:before {
    font-size: 35px !important; color: #fff !important; opacity: 0.5; content: '•';
}
.slick-dots li.slick-active button:before { opacity: 1; color: #38994c !important; }

.scroll-down-content { display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
.mouse-icon { width: 22px; height: 35px; border: 2px solid #ffffff; border-radius: 12px; position: relative; }
.wheel-naranja { width: 3px; height: 6px; background-color: #FF6B58; border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scroll-ani 1.5s infinite; }
@keyframes scroll-ani { 0% { opacity: 1; top: 6px; } 100% { opacity: 0; top: 20px; } }

/* ========================================= */
/* 4. NOSOTROS (MEJORA DE LECTURA)           */
/* ========================================= */
#nosotros p {
    font-size: 18px !important; 
    line-height: 1.6;
    color: #444;
}

/* ========================================= */
/* 5. ESPECIALIDADES (BOTONES AZULES)        */
/* ========================================= */
.btn-tab {
    background: #fff; border: 1px solid #eee; padding: 10px 24px;
    border-radius: 50px; font-weight: 600; color: #20274d; transition: 0.3s;
}
.btn-tab.active, .btn-tab:hover {
    background: #20274d !important; color: #fff !important;
    border-color: #20274d !important; 
}

/* --- OPTIMIZACIÓN CARRUSEL ESPECIALIDADES --- */
.especialidad-slider {
    position: relative;
    overflow: hidden;
    min-height: 450px; /* Evita el salto visual */
}
.especialidad-slider:not(.slick-initialized) {
    display: flex;
}
.especialidad-slider:not(.slick-initialized) div {
    width: 100%;
    flex-shrink: 0;
}
.slider-img-fix {
    height: 450px; 
    object-fit: cover;
}
/* ------------------------------------------- */

/* ========================================= */
/* 6. CONTADORES (VERDES + TEXTURA)          */
/* ========================================= */
.counter { margin-top: 20px; }
.counter-inner { 
    background: linear-gradient(180deg, #12174E 0%, #2D3483 100%); 
    padding: 35px 15px !important; border-radius: 15px; position: relative; overflow: hidden;
}
.counter .overlay { 
    background-image: url('../images/background/1.jpg') !important; 
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
    background-size: cover; opacity: 0.15; z-index: 0; 
}
.counter-box-body .num, .counter-box-body .orange { 
    font-size: 30px !important; font-weight: 700; color: #38994c !important; 
}
.counter-png { width: 45px !important; height: 45px !important; object-fit: contain; position: relative; z-index: 1; }

/* ========================================= */
/* 7. CLIENTES & PROYECTOS (COMPACTO)        */
/* ========================================= */
.partner { padding: 40px 0 !important; margin: 0 !important; }
.custom-logos-img { 
    width: 100%; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; 
}
.custom-logos-img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.02); }

.blog { padding: 40px 0 !important; background: #fff !important; border: none !important; }

/* ========================================= */
/* 8. CONTACTO & FOOTER                      */
/* ========================================= */
section.message { 
    margin-top: 0 !important; padding: 50px 0 !important; background-color: #f8f9fa !important;
}

.message-right {
    background-color: #20274d !important;
    padding: 40px !important; 
    border-radius: 20px;
    width: 105%; 
    margin-left: -2.5%; 
}

.custom-select-contact { color: #4c9dd6 !important; }

.footer-socials ul li a i {
    display: flex !important; align-items: center; justify-content: center;
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important; background-color: #fff !important;
    color: #20274d !important; font-size: 16px !important; transition: 0.3s;
}
.footer-socials ul li a i:hover { background-color: #38994c !important; color: #fff !important; }

/* ========================================= */
/* 9. WHATSAPP & BACK TO TOP                 */
/* ========================================= */
.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 90px; right: 20px;
    background-color: #25d366; color: #FFF !important; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 30px; z-index: 9999; animation: pulse-green 2s infinite;
    border: 2px solid #fff; text-decoration: none; transition: 0.3s;
}
.whatsapp-float:hover { transform: scale(1.1); background-color: #128C7E; }

.whatsapp-float .tooltip-text {
    visibility: hidden; width: 120px; background-color: #20274d; color: #fff;
    text-align: center; border-radius: 6px; padding: 8px; position: absolute;
    right: 125%; font-size: 14px; opacity: 0; transition: 0.3s; white-space: nowrap;
}
.whatsapp-float:hover .tooltip-text { visibility: visible; opacity: 1; }

#back-to-top { position: fixed; bottom: 25px; right: 25px; z-index: 9998; }
#back-to-top a {
    width: 50px; height: 50px; background-color: #38994c; border-radius: 50%; border: 2px solid #fff;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: 0.3s; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#back-to-top a:after { content: '\f062'; font-family: "FontAwesome"; color: #fff; font-size: 18px; }

@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* ========================================= */
/* 10. MEDIA QUERIES & MÓVIL OPTIMIZADO      */
/* ========================================= */
@media (max-width: 991px) {
    .header-nav-menu-inner { padding: 0 !important; }
    .header-nav-menu-inner .row { 
        margin: 0 !important; 
        padding: 18px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .navbar-logo img { max-width: 140px !important; } 
    #slicknav-mobile { display: block !important; margin: 0 !important; }
    .slicknav_menu { background: transparent !important; padding: 0 !important; }
    .slicknav_btn {
        background-color: transparent !important;
        margin: 10px 0 0 0 !important;
        padding: 5px !important;
    }
    .slicknav_icon-bar {
        background-color: #38994c !important; 
        width: 24px !important; height: 3px !important; margin-bottom: 4px !important;
    }
    .slicknav_nav {
        background-color: #20274d !important;
        margin: 0 !important; padding: 2px 0 !important;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.5);
        border-top: 1px solid rgba(56, 153, 76, 0.4);
        position: absolute; left: 0; width: 100%; z-index: 100%;
    }
    .slicknav_nav li { margin: 0 !important; }
    .slicknav_nav a {
        padding: 4px 25px !important;
        font-size: 13px !important; font-weight: 600;
        color: #fff !important; text-transform: uppercase;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .banner-item { height: 60vh !important; min-height: 350px; }
    .banner-inner { width: 90% !important; margin: auto; }
    .banner-title h1 { font-size: 22px !important; line-height: 1.1 !important; margin-bottom: 10px !important; }
    .banner-body p { font-size: 14px !important; line-height: 1.3 !important; padding: 0 15px; }
}

@media (max-width: 767px) {
    .sucursales-tabs { flex-direction: column; }
    .btn-tab { width: 100%; margin-bottom: 5px; text-align: center; font-size: 14px; }
}

/* FLECHAS ESPECIALIDADES */
.especialidad-slider .custom-arrow {
    width: 40px; height: 40px;
    background: rgba(32, 39, 77, 0.7) !important;
    border: none !important; font-size: 14px;
}
.especialidad-slider .slick-prev { left: 15px !important; }
.especialidad-slider .slick-next { right: 15px !important; }
.especialidad-slider .slick-dots { bottom: 10px; }

/* BOTÓN VER MÁS PROYECTOS (ESTILO SUTIL) */
.btn-sutil-proyectos {
    display: inline-flex; align-items: center;
    color: #20274d; font-weight: 500; font-size: 14px;
    text-decoration: none; transition: all 0.3s ease;
    padding: 4px 0; position: relative; border: none; background: transparent;
}
.btn-sutil-proyectos i { font-size: 12px; margin-left: 8px; transition: transform 0.3s ease; }
.btn-sutil-proyectos:hover { color: #38994c; }
.btn-sutil-proyectos:hover i { transform: translateX(5px); }
.btn-sutil-proyectos::after {
    content: ''; position: absolute; width: 0; height: 1px;
    bottom: 0; left: 0; background-color: #38994c; transition: width 0.3s ease;
}
.btn-sutil-proyectos:hover::after { width: 100%; }

/* --- ESTILOS DE ARCHIVO DE PROYECTOS --- */
.blog-box-body h5 a, .blog-box-body h4 a {
    color: #20274d !important;
    transition: 0.3s ease;
}
.blog-box-body h5 a:hover, .blog-box-body h4 a:hover { color: #38994c !important; }

.badge-categoria {
    background-color: #38994c; color: white;
    padding: 4px 10px; border-radius: 4px; font-size: 11px;
    text-transform: uppercase; margin-bottom: 10px;
    display: inline-block; font-weight: 600;
}

.filter-btn { cursor: pointer; transition: 0.3s; }
.filter-btn:hover { color: #38994c !important; padding-left: 5px; }

.blue-corp { color: #20274d !important; }
.banner-title a.blue-corp { color: #20274d !important; text-decoration: none; font-weight: 600; }
.banner-title a.blue-corp:hover { color: #38994c !important; }

/* H2 pequeños para detalle de proyectos */
.page-proyectos h2 {
    font-size: 26px !important;
    color: #20274d !important;
    font-weight: 700;
}
/* ========================================= */
/* 11. AJUSTES SLIDER PRINCIPAL (MÓVIL)      */
/* ========================================= */
@media (max-width: 767px) {
    /* Hacemos las flechas más pequeñas */
    .banner-main-slider .custom-arrow {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
        top: auto !important; /* Quitamos el centrado vertical */
        bottom: 20px !important; /* Las bajamos cerca de los puntos */
        transform: none !important;
    }

    /* Posicionamos la flecha izquierda */
    .banner-main-slider .slick-prev {
        left: 20% !important; /* La movemos hacia el centro para que no estorbe */
    }

    /* Posicionamos la flecha derecha */
    .banner-main-slider .slick-next {
        right: 20% !important; /* La movemos hacia el centro para que no estorbe */
    }

    /* Ajustamos los puntos para que no choquen con las flechas */
    .banner-main-slider .slick-dots {
        bottom: 25px !important;
    }
}