.prague-logo a img {width:150px !important;}        h1,
        h1 a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
            h2,
        h2 a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
            h3,
        h3 a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
            h4,
        h4 a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
            h5,
        h5 a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
            h6,
        h6 a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
            p,
        p a {
            font-family: Roboto !important;                font-weight: 300 !important;
                    }
    
/* MENU */
    /* MENU */
    .prague-header .prague-navigation .main-menu > li > a {
                    font-family: "Roboto", sans-serif !important;
                                                                        }

/* SUBMENU */
    /* SUBMENU */
    .prague-header .prague-navigation .sub-menu li a {
                    font-family: "Roboto", sans-serif !important;
                                                                        }

/* BUTTON */
    /* BUTTON */
    .a-btn, .a-btn-arrow-2, .a-btn-2, .a-btn-arrow, .button.prev, .button.next {
                    font-family: "Roboto", sans-serif !important;
                                                                                }

/* Theme Options Custom CSS */
/* Logo más chico */
.elementor-6023 .elementor-element.elementor-element-03390ca .hfe-retina-image img {
    height: 112px !important;
    width: auto !important;
}
/* 1. Prohibir el salto de línea a la fuerza en todo el menú */
.menu-rebelde li a {
    white-space: nowrap !important;
}

/* 2. Rescatar el item activo invisible en el celular */
@media (max-width: 768px) {
    .menu-rebelde li.current-menu-item > a,
    .menu-rebelde li.current_page_item > a,
    .menu-rebelde a.active {
        color: #477ebb !important; /* Este es tu azul aproximado, podes cambiar el hex */
    }
}

/* Centrar perfectamente el botón y mandarlo al frente (Sobrescribiendo Elementor) */
.boton-centrado {
    aling: center !important;
}

/* Forzamos al contenedor de Elementor a ocupar toda la altura */
selector,
selector .elementor-widget-container {
    height: 100% !important;
}

selector .prague-services-wrapper {
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
}

/* Empujamos el botón exactamente al fondo de los 400px */
selector .prague-services-wrapper .prague-services-link {
    margin-top: auto !important;
}

/* carousel swiper height */
.carrusel-oscuro .swiper,
.carrusel-oscuro .swiper-container,
.carrusel-oscuro .swiper-wrapper,
.carrusel-oscuro .swiper-slide {
    height: calc(100vh - 120px) !important;
}
.carrusel-oscuro .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.carrusel-oscuro .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Fix overflow del overlay */
.elementor-element-4f9c511,
.carrusel-oscuro,
.carrusel-oscuro .elementor-widget-container,
.carrusel-oscuro .elementor-image-carousel-wrapper {
    overflow: hidden !important;
}

/* 2. Obligar a las fotos a rellenar el espacio sin deformarse (como un fondo) */
.carrusel-oscuro .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}

/* 3. Poner el overlay EXACTAMENTE adentro de cada diapositiva */
.carrusel-oscuro .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 0.4 es la oscuridad */
    z-index: 1;
    pointer-events: none;
}

/* Opcional: Si el texto del footer era blanco, ahora no se verá. Esto lo pone oscuro */
.prague-footer, 
.prague-footer p, 
.prague-footer a, 
.prague-footer h1, .prague-footer h2, .prague-footer h3, .prague-footer h4, .prague-footer h5, .prague-footer h6, .footer-info-block-title {
    color: #333333 !important; 
}

/* 1. Quitar altura mínima forzada del footer principal */
footer.prague-footer,
.prague-footer {
    padding-top: 40px !important; 
    padding-bottom: 40px !important;
    min-height: 0 !important; /* Obliga a ignorar alturas forzadas */
    height: auto !important;
}

/* 2. Aplastar los márgenes y rellenos de las cajas internas que empujan hacia afuera */
.prague-footer .container,
.prague-footer .row,
.prague-footer .footer-content,
.prague-footer > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Eliminar imagen de fondo y forzar el footer a blanco absoluto */
footer.prague-footer,
.prague-footer,
.prague-footer.s-back-switch {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Apagar el overlay (filtro) que le habíamos puesto antes para que no estorbe */
.prague-footer::before,
.prague-footer::after {
    display: none !important;
}
/* Enjaular las imágenes de fondo absolutas en los contenedores de Elementor */
.contenedor-limite {
    position: relative !important;
    overflow: hidden !important;
}

/* Esfumar la imagen solo hacia abajo (hacia el blanco) */
.imagen-esfumada-abajo {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* 1. Bajar el menú en celular SIN correrlo de costado */
@media (max-width: 768px) {
    .menu-rebelde ul {
        margin-top: 80px !important; 
    }
}

/* 2. Bajar SOLO la flecha de la barra principal (sin afectar submenús) */
@media (min-width: 769px) {
    .menu-rebelde > div > ul > li > a svg, 
    .menu-rebelde > nav > ul > li > a svg,
    .menu-rebelde > div > ul > li > a i {
        position: relative !important;
        top: 5px !important; 
    }
}

/* 3. Agrandar la caja del submenú en PC para que entre el texto largo */
.menu-rebelde ul.sub-menu {
    width: max-content !important; /* Se estira hasta donde necesite la palabra */
    min-width: 260px !important;
}

/* 4. Permitir que el texto del submenú respire y no rompa la caja */
.menu-rebelde ul.sub-menu li a {
    white-space: normal !important; 
}

@media (min-width: 1025px) {
    img.hfe-retina-img {
        max-height: 180px !important;
        width: auto !important;
        object-fit: contain;
    }
}

/* Custom Preloader */
#custom-preloader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
#custom-preloader img {
    width: 160px;
    height: auto;
}

/* Fix carousel: slide-inner debe llenar el slide */
.carrusel-oscuro .swiper-slide-inner {
    height: 100% !important;
    overflow: hidden !important;
}
.carrusel-oscuro .swiper-slide img.swiper-slide-image {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Project item: separación entre foto hero y título */
.padd-only-xs > h1.p1 {
    margin-top: 78px;
}

/* Fix dropdown Services: z-index + fondo sólido */
.menu-item-has-children .sub-menu {
    z-index: 99999 !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mantener visible al hacer hover sobre los items hijos */
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Eliminar cualquier gap entre el padre y el submenu */
.menu-item-has-children > .sub-menu {
    margin-top: 0 !important;
    top: 100% !important;
}
/*
 * Fix: Mobile menu — hover text, submenu centrado, fondo y altura del panel
 * REEMPLAZA el CSS anterior en Apariencia → Personalizar → CSS adicional
 *
 * El panel del menú es ul.eael-simple-menu (position:absolute, top:50px)
 * Tiene background celeste rgb(27,193,255) y height insuficiente → se asoma el slider
 */

/* ══════════════════════════════════════════════════
   1. PANEL PRINCIPAL: fondo blanco, tapa el slider y los botones del hero
   - top:0 sube el ul al nivel del widget (el header blanco cubre el gap)
   - padding-top:50px mantiene los ítems en la misma posición visual
   - min-height:100vh tapa el slider hasta el fondo del viewport
   - z-index:99999 garantiza que tape cualquier sección con z-index 999
══════════════════════════════════════════════════ */
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
.eael-simple-menu.eael-simple-menu-horizontal {
    background-color: #FFFFFF !important;
    min-height: 100vh !important;
    top: 0 !important;
    padding-top: 50px !important;
    z-index: 99999 !important;
}

/* ══════════════════════════════════════════════════
   2. HOVER: texto celeste (revertir el color:#fff del plugin)
══════════════════════════════════════════════════ */
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container.preset-2
.eael-simple-menu li:hover > a,
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container.preset-2
.eael-simple-menu li.current-menu-item > a,
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container.preset-2
.eael-simple-menu li.current-menu-ancestor > a {
    color: #4B82C1 !important;
    background-color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════
   3. INDICADOR DE SUBMENU: ícono celeste sobre fondo blanco
══════════════════════════════════════════════════ */
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
span.eael-simple-menu-indicator {
    background-color: transparent !important;
    border-color: rgba(75, 130, 193, 0.3) !important;
}

.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
span.eael-simple-menu-indicator svg {
    fill: #4B82C1 !important;
    color: #4B82C1 !important;
}

.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
span.eael-simple-menu-indicator.eael-simple-menu-indicator-open {
    background-color: transparent !important;
    border-color: #4B82C1 !important;
}

/* ══════════════════════════════════════════════════
   4. ANIMACIÓN DEL SUBMENU: slide down suave al abrirse
   El JS usa style="display:block" para mostrarlo → animamos con keyframes
══════════════════════════════════════════════════ */
@keyframes eaelSubMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
.eael-simple-menu li ul.sub-menu[style*="display: block"] {
    animation: eaelSubMenuOpen 0.25s ease forwards !important;
}

/* ══════════════════════════════════════════════════
   5. SUBMENU: accordion estático + centrado
══════════════════════════════════════════════════ */
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
.eael-simple-menu li ul {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #FFFFFF !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
}

.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
.eael-simple-menu li ul li,
.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive
.eael-simple-menu-container
.eael-simple-menu li ul li a {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════
   6. BOTÓN SOBRE HERO SLIDER (#boton-centrado)
   El swiper del slider tiene z-index:1 — con z-index:3 el botón ya aparece encima
   sin necesitar 801 ni 999 que compiten con el menú mobile.
   :has() targetea el wrapper de Elementor sin necesitar saber su ID específico,
   funciona en todas las páginas donde exista #boton-centrado.
══════════════════════════════════════════════════ */
.elementor-widget:has(#boton-centrado) {
    z-index: 3 !important;
}

/* Asegura que el botón en sí sea clickeable sobre el contenido del slide */
#boton-centrado {
    position: relative !important;
    z-index: 3 !important;
}