/* ==========================================================================
   1. ROMPER EL CONTENEDOR (FORCE FULL WIDTH - TÉCNICA ATÓMICA)
   ========================================================================== */
.custom_glide_container {
    height: 420px !important; /* Altura compacta y elegante */
    background: #050a18 !important; /* Fondo sólido homogéneo */
    position: relative !important;
    
    /* TÉCNICA AGRESIVA DE CENTRADO PARA ROMPER EL LAYOUT */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Contenedor de contenido: Forzado a los extremos */
.main_content_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    
    /* EXPLICACIÓN DEL PADDING: Top(0) Right(0) Bottom(0) Left(8%) */
    /* Esto mantiene la imagen pegada a la derecha pero separa el texto */
    padding: 0 0 0 8% !important; 
    
    z-index: 10 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.custom_carousel_container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
}

/* Zona de información: Ancho limitado para dejar espacio a la imagen */
.custom_carousel_info {
    flex: 0 1 45%; /* Ocupa máximo el 45% del ancho total */
    z-index: 10;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
    /* Ajuste para que el texto no se vea apretado */
    justify-content: flex-start !important; /* Alineamos al tope para controlar el aire */
    padding-top: 20px !important;
}

/* ==========================================================================
   2. TIPOGRAFÍA Y TEXTOS (VERSIÓN EQUILIBRADA PARA LA ALTURA)
   ========================================================================== */
.custom_glide_container h1.custom_carousel_title,
.custom_carousel_item .custom_carousel_title,
.custom_carousel_info .custom_carousel_title {
    color: #ffffff !important;
}

.custom_carousel_item .custom_carousel_title,
.custom_carousel_info .custom_carousel_title {
    /* Bajamos de 4.2rem a 3.2rem para que no choque con los bordes */
    font-size: 3.2rem !important; 
    line-height: 1.05;
    font-weight: 800;
    text-align: left !important;
    margin-bottom: 0.8rem; /* Reducimos el margen para ganar espacio vertical */
    letter-spacing: -1px;
}

.custom_carousel_item .custom_carousel_subtitle,
.custom_carousel_info .custom_carousel_subtitle {
    /* Tamaño legible pero compacto */
    font-size: 1.2rem !important; 
    margin: 0 0 1.5rem 0 !important; /* Espacio moderado antes de los botones */
    max-width: 550px;
    text-align: left !important;
    font-weight: 400;
    line-height: 1.4;
    color: #cbd5e1 !important; /* Un gris claro para que no compita con el título */
}

/* ==========================================================================
   3. BOTONES Y ACCIONES
   ========================================================================== */
.custom_carousel_buttons {
    display: flex;
    gap: 1rem;
    margin-top: 0; /* Quitamos margen extra para que no queden muy abajo */
    flex-direction: row !important;
}

.btn_primary {
    background-color: #ffc107;
    color: #000 !important;
    padding: 0.9rem 1.8rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn_secondary {
    background-color: transparent;
    border: 2px solid #3b82f6;
    color: white !important;
    padding: 0.9rem 1.8rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    cursor: pointer;
}

.btn_primary:hover { transform: scale(1.05); }
.btn_secondary:hover { background: rgba(59, 130, 246, 0.1); }

/* ==========================================================================
   4. BARRA DE CONFIANZA (CRYSTAL EFFECT)
   ========================================================================== */
.trust_bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3rem !important;
    background: rgba(1, 4, 15, 0.95) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.8rem 0 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 120 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.trust_bar * {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

.trust_item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.google_reviews img {
    height: 28px;
    background: transparent; 
    width: auto;
    margin-left: 1rem;
}

/* ==========================================================================
   5. AJUSTE DE IMAGEN (POSICIÓN Y TAMAÑO)
   ========================================================================== */
.custom_carousel_image_side {
    flex: 0 1 50%; /* Ocupa el otro 50% del ancho */
    display: flex;
    justify-content: flex-end; /* Alinea la imagen a la derecha */
    align-items: center;
    height: 100%;
    margin: 0;
}

.custom_carousel_image_side img {
    height: 100% !important; /* Ajustado para un mejor balance visual */
    width: auto !important;
    max-width: 100%;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); 
    z-index: 5;
    transition: transform 0.3s ease;
}

/* ==========================================================================
   6. NUEVAS CARACTERÍSTICAS Y USPs (LLENADO DE ESPACIO)
   ========================================================================== */
/* Etiqueta superior (5-Star) */
.usp_badge_top {
    color: #ffc107;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.star_icon {
    margin-right: 5px;
}

/* Rejilla de beneficios debajo de los botones */
.custom_carousel_features_grid {
    display: flex;
    gap: 2rem;
    margin-top: 2.5rem; /* Espacio para llenar el vacío inferior */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
}

.feature_item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature_icon {
    color: #3b82f6; /* Azul brillante */
    font-size: 1.2rem;
}

.feature_text {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   7. RESPONSIVIDAD
   ========================================================================== */
@media (max-width: 767px) {
    .custom_glide_container { 
        height: auto !important; 
        min-height: 480px !important; 
        padding-bottom: 110px !important; 
    }
    .main_content_wrapper { 
        flex-direction: column !important; 
        text-align: center !important; 
        padding: 2rem 5% !important; 
        justify-content: center !important;
    }
    .custom_carousel_info {
        max-width: 100%;
        flex: none;
        background: transparent !important;
        padding: 1.5rem 0;
    }
    .custom_carousel_title { font-size: 2rem !important; text-align: center !important; }
    .custom_carousel_subtitle { text-align: center !important; margin: 1rem auto !important; }
    .custom_carousel_buttons { flex-direction: column !important; width: 100%; align-items: center; }
    .custom_carousel_image_side { order: -1; margin-bottom: 1rem; height: 160px; justify-content: center; flex: none; width: 100%; }
    .custom_carousel_image_side img { height: 100% !important; }
    .trust_bar { flex-wrap: wrap !important; gap: 0.8rem !important; padding: 1.2rem 1rem !important; position: relative !important; }
}

/* ==========================================================================
   8. GLIDE CORE & LIMPIEZA
   ========================================================================== */
.glide { position: relative; width: 100%; box-sizing: border-box; }
.glide__track { overflow: hidden; }
.glide__slides { position: relative; width: 100%; list-style: none; padding: 0; display: flex; will-change: transform; }
.glide__slide { width: 100%; height: 100%; flex-shrink: 0; }

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* ==========================================================================
   9. ELIMINAR NAVEGACIÓN (FLECHAS)
   ========================================================================== */
/* Oculta el contenedor de las flechas izquierda/derecha */
.glide__arrows {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}