.shape1_1 {
  top: 0 !important;
}

.banner-style1 {
    position: relative;
    padding: 30px 0 45px;
    max-width: 718px;
    z-index: 99999;
	}

/*  -----------------------------------------------------
    CSS para el slider Swiper
    -----------------------------------------------------*/

/* Contenedor principal del slider: Soluciona el problema de "overflow" */
.swiper.banner2-slider {
    position: relative;
    overflow: visible !important;
}

/* Contenedor para la paginación */
.swiper-navigation-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para la paginación */
.swiper-navigation-wrapper .pagination-class2 {
    position: static;
    z-index: 10;
    display: flex;
    flex-direction: row !important;
    white-space: nowrap !important;
    transform: none !important;
    text-align: center;
}

/* Estilo para los puntos (dots) de la paginación */
.swiper-pagination-bullet {
    margin: 0 5px !important;
    opacity: 0.6 !important;
    transform: none !important;
    
    /* Propiedades clave para ocultar los números y crear los puntos */
    background-color: #ffffff !important; /* Color de fondo del punto */
    color: transparent !important; /* Oculta el texto del número */
    font-size: 0 !important; /* Oculta el texto del número */
    width: 10px; /* Tamaño del punto */
    height: 10px; /* Tamaño del punto */
    border-radius: 50%; /* Hace que el punto sea un círculo */
}

/* Estilo para el punto activo de la paginación */
.swiper-pagination-bullet-active {
    background-color: #ffffff !important;
    opacity: 1 !important;
    transform: none !important;
    color: transparent !important; /* Asegura que el número del punto activo también se oculte */
    font-size: 0 !important; /* Asegura que el número del punto activo también se oculte */
}

/*
    -----------------------------------------------------
    CSS para la Ventana Modal (Lightbox)
    -----------------------------------------------------
*/

.lightbox {
    display: none !important; /* ¡FORZAR A ESTAR OCULTO POR DEFECTO! */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex !important; /* ¡FORZAR A MOSTRARSE CUANDO ESTÁ ACTIVO! */
}

.lightbox-content {
    position: relative;
    padding: 20px;
    background-color: transparent;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.close-btn {
    position: absolute;
    top: -30px;
    right: -30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border: 1px solid white;
}

.close-btn:hover,
.close-btn:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}

/* Media query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .close-btn {
        top: 10px;
        right: 10px;
        font-size: 30px;
        width: 30px;
        height: 30px;
    }
    .lightbox-content {
        max-width: 95%;
        max-height: 95%;
        padding: 10px;
    }
}

/*
    -----------------------------------------------------
    Mapa Contenedor
    -----------------------------------------------------
*/

.mapa-contenedor {
    /* 1. Aplica el redondeo al contenedor */
    border-radius: 12px;
    
    /* 2. MUY IMPORTANTE: Oculta cualquier parte del iframe que sobresalga
       de las esquinas redondeadas del div */
    overflow: hidden; 
    
    /* 3. La Sombra Brillante (¡El detalle bonito para fondo negro!) */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7), /* Un brillo MUY fuerte */
                0 0 10px rgba(255, 255, 255, 0.4);
    
    /* 4. Estilos de Layout para darle un poco de espacio */
    width: 100%;
    max-width: 100%; /* Por si acaso */
    margin: 30px auto; /* Centra el bloque y le da espacio arriba/abajo */
    display: block;
}

.mapa-contenedor iframe {
    /* Asegura que el iframe no tenga ningún borde propio */
    border: none !important; 
    /* El iframe debe llenar EXACTAMENTE el contenedor */
    width: 100%;
    height: 450px; /* Mantener la altura */
    display: block; /* Evita espacios no deseados */
}

/*
    -----------------------------------------------------
    Correciones Contact
    -----------------------------------------------------
*/

/* Opción más específica para apuntar al H2 */
.contact-form-section .contact-form-wrapper .contact-form h2.h2new {
    color: black !important;
}

/*
    -----------------------------------------------------
    Correciones Services
    -----------------------------------------------------
*/
/*
 * CLASES DE ARREGLOS PERSONALIZADOS CON MÁXIMA PRIORIDAD
 */

.mastercenter {
    /* Mueve el contenido hacia la derecha (despegar del margen izquierdo) */
    margin-left: 40px !important; /* Ajusta '20px' al espacio que desees */
	margin-bottom: 80px !important; /* Ajusta '20px' al espacio que desees */
	margin-top: 80px !important; /* Ajusta '20px' al espacio que desees */
    
    /* Configuración para centrar y asegurar el diseño */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Alinea los elementos al inicio (izquierda) */
    width: auto !important; /* Asegura que no se fuerce un ancho innecesario */
    padding: 0 !important; /* Elimina cualquier relleno que pueda afectar el margen */
}

.title1 {
    /* Cambia el color del texto a blanco, anulando cualquier otra regla */
    color: #ffffff !important; 
}

/*
    -----------------------------------------------------
    MEDIA QUERYs
    -----------------------------------------------------
*/

/* Sobreescribe estilos para pantallas de 768px o menos (Móviles) */
@media (max-width: 768px) {

    /* 1. Contenedor principal del menú (el <ul>) */
    .main-menu ul {
        display: flex !important; /* Habilita Flexbox para organizar los ítems */
        flex-wrap: wrap !important; /* Permite que los ítems salten a la siguiente línea */
        justify-content: center; /* Centra los elementos horizontalmente */
        
        /* Elimina el espaciado principal */
        margin: 0 !important; 
        padding: 0 !important;
        width: 100%;
    }
    
    /* 2. Los ítems individuales del menú (los <li>) - **Ajuste clave para las 2 columnas** */
    .main-menu ul li {
        /* Fuerza a cada ítem a ocupar la mitad del espacio (2 columnas) */
        width: 50% !important; 
        display: block !important;
        text-align: center; /* Centra el texto dentro de su columna */
        
        /* REDUCCIÓN DE ESPACIADO: Ajusta este padding para controlar la altura de cada fila */
        margin: 0 !important; 
        padding: 5px 0 !important; /* 5px arriba y abajo reduce la separación vertical */
        /* Si quieres menos separación, prueba con 2px o 0px */
    }
    
    /* 3. Los enlaces de texto dentro de los ítems (los <a>) */
    .main-menu ul li a {
        display: block !important; 
        
        /* Asegura un área de clic cómoda sin añadir más separación */
        padding: 8px 0 !important; /* Ajusta este padding si el texto sigue viéndose muy separado */
        
        /* Asegúrate de que el tamaño de la fuente sea apropiado */
        font-size: 16px; 
        line-height: 1.2;
    }
}



/* Sobreescribe estilos solo para pantallas pequeñas */
@media (max-width: 768px) {
    
    /* Ajuste para el encabezado <h6> con la clase específica */
    h6.sub-title {
        /*
         * 1. Elimina o reduce el margen externo (margin)
         * El margin es la causa más común del espaciado excesivo entre elementos.
         */
        margin-top: 5px !important;    /* Espacio reducido por encima */
        margin-bottom: 5px !important; /* Espacio reducido por debajo */
        
        /* * 2. Elimina el relleno interno (padding) si lo tiene
         * Aunque menos común, el padding también puede inflar el espacio.
         */
        padding: 0 !important;
        
        /* * 3. Ajusta el tamaño de la fuente para dispositivos móviles (opcional)
         * Una fuente grande puede contribuir a la sensación de separación.
         */
        font-size: 18px !important; /* Ejemplo: un tamaño más manejable para móvil */
        line-height: 1.2 !important; /* Reduce el espacio entre la línea de texto y la siguiente. */
    }
}


/* Oculta la sección  en pantallas pequeñas (Móviles) */
@media (max-width: 768px) {
    
    .offer-section {
        /* Esta propiedad oculta completamente el elemento y no deja ningún espacio vacío */
        display: none !important; 
    }
	 .cta-section {
        /* Esta propiedad oculta completamente el elemento y no deja ningún espacio vacío */
        display: none !important; 
    }
	 .post-featured-thumb {
        /* Esta propiedad oculta completamente el elemento y no deja ningún espacio vacío */
        display: none !important; 
    }
	.main-menu {
        /* Esta propiedad oculta completamente el elemento y no deja ningún espacio vacío */
        display: none !important; 
    }
	
}


/* Media query para dispositivos móviles y tabletas pequeñas */
@media (max-width: 768px) {
    
    /* 1. Apunta al Contenedor Principal */
    /* Elimina cualquier margen o padding superior innecesario en el div que contiene todo. */
    .single-service-post {
        margin-top: 0 !important;
        padding-top: 0 !important;
        /* Puedes añadir un margen superior muy pequeño si lo necesitas, ej: margin-top: 20px; */
    }

    /* 2. Apunta a la Imagen/Fondo Destacado */
    /* Este es el contenedor de la imagen de fondo. Si tiene margen o padding excesivo, lo eliminamos. */
    .post-featured-thumb.background-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
        /* Mantenemos una altura razonable para que el fondo se vea, pero la reducimos */
        height: 180px; /* Puedes ajustar este valor, pero 180-250px es común para móviles */
    }
    
    /* 3. Apunta al Contenido Inmediato (títulos) */
    /* A veces, el primer título (h1/h3) tiene un margin-top grande que empuja el contenido hacia abajo */
    .single-service-post .post-content h1:first-child,
    .single-service-post .post-content h3:first-child {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* También revisa el post-content en general */
    .post-content {
        padding-top: 0;
    }
    
    }


/* Columnas services */	
	
	/* Media query para dispositivos móviles y tabletas pequeñas */
@media (max-width: 768px) {
    
    /* 1. Contenedor de Servicios: Prevenir scroll horizontal */
    .single-service-post {
        /* Evita el desbordamiento de contenido hacia los lados */
        overflow-x: hidden; 
        /* Asegura un margen lateral para que el contenido no pegue a los bordes */
        padding-left: 15px;
        padding-right: 15px; 
    }

    /* 2. Ajuste de Imágenes dentro del contenido */
    /* Garantiza que la imagen dentro del div de la columna sea totalmente responsiva */
    .single-service-post img {
        max-width: 100%;
        height: auto; /* Mantiene la proporción */
        display: block;
    }

    /* 3. Ajuste de las Filas de Columnas (row gx-30 gy-5) */
    /* Si Bootstrap usa márgenes negativos para las filas, esto puede causar scroll horizontal. */
    .single-service-post .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    /* 4. Columnas: Asegura que cada columna ocupe todo el ancho disponible en móvil */
    .single-service-post .row .col-xl-6 {
        width: 100%; /* La clave es que ocupe el 100% de la fila */
        margin-bottom: 20px; /* Añade espacio entre las dos columnas apiladas */
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }
    
    /* 5. Contenido de Texto: Evitar desbordamiento de palabras largas o títulos */
    .post-content h1, 
    .post-content h3, 
    .post-content p {
        word-wrap: break-word; /* Permite que las palabras largas se rompan en la línea */
        min-width: 0; /* Asegura que se encojan si están en un flexbox/grid */
    }
    
    /* 6. Listas de Verificación (Checklists) */
    .checklist {
        padding-left: 0; /* Elimina el padding por defecto de la lista en móvil */
    }
}




/* Esto anula el padding inferior sin afectar el superior */
.no-bottom-space {
    padding-bottom: 30px !important; /* Puedes ajustar este valor, 0px para eliminarlo completamente */
}

/* Opcional: Si quieres reducir el padding en todos los lados, usa algo como esto */
.services-section {
    padding-top: 50px;    /* Valor reducido */
    padding-bottom: 50px; /* Valor reducido */
}


/* 1. Estilo por defecto (para escritorio y tabletas grandes) */
.services-card_text {
    /* Asume que el tamaño normal (ej. 16px) ya está definido en tu CSS principal */
    font-size: 1em; 
    /* ... otros estilos ... */
}

/* 2. Media Query para Móviles (se aplica a pantallas de hasta 767px, que es típico de Bootstrap) */
@media (max-width: 767px) {
    /* Aquí reducimos el tamaño de fuente para móviles */
    .services-card_text {
        /* Reducido al 70% del tamaño base (si el base es 16px, esto es ~11.2px) */
        font-size: 0.7em !important; 
        /* Usamos !important solo si el estilo base es muy difícil de sobrescribir, 
           pero lo ideal es asegurar que este selector sea más específico. */
    }
}

/* Nota: Si el texto está muy apretado en dos líneas, quizás necesites reducir un poco el 'line-height' también: */
@media (max-width: 767px) {
    .services-card_text {
        font-size: 0.7em !important;
        line-height: 1.3 !important; /* Ajustar el interlineado si es necesario */
    }
}

/* Media Query para dispositivos móviles (ancho de pantalla hasta 768px) */
@media (max-width: 768px) {
    
    /* 1. La COLUMNA principal del formulario */
    .contact-section .col-xl-5 {
        width: 100% !important; /* Fuerza la columna a tomar el 100% del espacio disponible */
        flex: 0 0 100% !important; /* Propiedad de Flexbox que asegura el ancho */
        max-width: 100% !important; /* Previene que el ancho exceda el 100% */
        padding-left: 15px !important; /* Relleno mínimo para que el texto no toque el borde */
        padding-right: 15px !important;
    }

    /* 2. El CONTENEDOR interno que envuelve el formulario */
    .testimonial-card-wrap {
        width: 100% !important; 
        padding: 0 15px !important; /* Elimina cualquier padding lateral excesivo interno */
        box-sizing: border-box; /* Fundamental: asegura que el padding se incluya en el ancho total */
    }

    /* 3. La FILA contenedora (si el problema persiste en la fila) */
    .contact-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Añade esto a tu archivo CSS */
.birdeye-integration {
    /* Agrega 40 píxeles de espacio debajo del widget. */
    margin-bottom: 40px; 
}

/* O si solo quieres el espacio en pantallas grandes y medianas */
@media (min-width: 768px) {
    .birdeye-integration {
        margin-bottom: 50px; 
    }
}

.cta-wrapper.style3 {
    /* Mover las reglas de fondo a este elemento, que está fuera del .container */
    background-image: url(../../assets/img/bg/ctaBG3_1.jpg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* ¡Añadir esta regla para asegurar que ocupe todo el viewport! */
    width: 100vw; 
}


@media (max-width: 600px) {
  .contenedor-formulario {
    padding-left: 10px; /* O a 0, si es necesario */
    margin-left: 0;
  }
}



/* Estilos por defecto (para Escritorio y tabletas grandes) */
.contact-wrapper .shape .img-mobile {
    display: none; /* Oculta la imagen de móvil por defecto */
}
.contact-wrapper .shape .img-desktop {
    display: block; /* Muestra la imagen de escritorio por defecto */
    /* Asegúrate de que los estilos de posicionamiento (absolute, top, left, etc.)
       que tenías para la imagen original ahora se apliquen a .img-desktop
       Si ya estaban en .shape, se aplicarán a ambas, pero puedes sobreescribirlos aquí si es necesario. */
}

/* ⬇️ Media Query: Estilos que solo se aplican en pantallas pequeñas (Móvil) ⬇️ */
@media (max-width: 991px) { /* El punto de quiebre de Bootstrap para 'col-xl' */
    .contact-wrapper .shape .img-desktop {
        display: none; /* Oculta la imagen de escritorio en móvil */
    }
    .contact-wrapper .shape .img-mobile {
        display: block; /* Muestra la nueva imagen de móvil */
        /* Si la imagen original tenía posicionamiento absoluto,
           asegúrate de que esta nueva imagen .img-mobile
           tenga el posicionamiento adecuado para móvil.
           Por ejemplo: */
        /* position: absolute; */
        /* top: XXpx; */
        /* left: YYpx; */
        /* max-width: 100%; */
        /* height: auto; */
    }
}