/**
 * MOBILE FIRST - Optimizaciones ÚNICAMENTE para Mobile (< 768px)
 * Dispositivos: iPhone 12 Pro (390x844), iPhone 15 Pro (393x852), Samsung Galaxy (360x800)
 * NO afecta tablet (768px-1023px) ni desktop (1024px+)
 * @author ZUMAC Development Team
 * @version 1.5 - FIX CRÍTICO: Eliminado width:100% genérico, agregado específico para step-1
 */

/* ==================== GLOBAL (TODAS LAS RESOLUCIONES) ==================== */

/* ===== FIX MOBILE: Body y HTML optimizados para scroll (iOS + Android) ===== */
@media (max-width: 767px) {
    html {
        /* ✅ Scroll suave en toda la página (iOS + Android) */
        scroll-behavior: smooth;
        /* ✅ iOS: Permitir scroll momentum */
        -webkit-overflow-scrolling: touch;
        /* ✅ Prevenir zoom en double-tap (iOS + Android) */
        touch-action: manipulation;
        /* ✅ Android: Optimizar rendering */
        will-change: scroll-position;
    }

    body {
        /* ✅ Touch action global (iOS + Android) */
        touch-action: pan-y pan-x;
        /* ✅ Overscroll behavior (iOS 16+ / Android Chrome 63+) */
        overscroll-behavior-y: none;
        overscroll-behavior-x: contain;
        /* ✅ iOS: Scroll momentum nativo */
        -webkit-overflow-scrolling: touch;
        /* ✅ Android: Smooth scrolling */
        scroll-behavior: smooth;
        /* NOTA: Removido transform: translateZ(0) porque rompe position:fixed */
    }
}

/* ===== SISTEMA DE Z-INDEX NORMALIZADO ===== */
/*
 * Jerarquía de capas (valores razonables):
 * 1. Base: z-index 1-10 (contenido normal)
 * 2. Dropdowns: z-index 50-60 (selectores)
 * 3. Language selector: z-index 70-75
 * 4. Modales vehículos: z-index 80-85
 * 5. Modales pago (Stripe): z-index 90-95
 */

/* ============================================================================
 * MÓDULO 5: Sistema Z-Index Global - ARQUITECTURA HÍBRIDA
 * ============================================================================
 * NOTA: body:has() NO puede tener prefijo .modzumac (debe ser global)
 * Los demás selectores SÍ están protegidos con .modzumac
 * ============================================================================ */

/* ⚪ GLOBAL (SIN PREFIJO): Ocultar selector cuando hay modal abierto
   JUSTIFICACIÓN: body:has() debe ser global para detectar modales insertados en body */
body:has(.modzumac .stripe-modal-overlay) .modzumac .step4-title-with-language .language-selector,
body:has(.modzumac .vehicle-modal-overlay) .modzumac .step4-title-with-language .language-selector {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* ✅ PROTEGIDO: Base - Step 4 title */
.modzumac .step4-title-with-language {
    z-index: 1 !important;
    position: relative !important;
}

.modzumac .step4-title-with-language .language-selector {
    z-index: 1 !important;
}

/* ✅ PROTEGIDO: Todos los modales - Centrados y sobre todo */
.modzumac .vehicle-modal-overlay,
.modzumac .vehicle-info-modal-overlay,
.modzumac .category-info-modal-overlay,
.modzumac.category-info-modal-overlay {
    z-index: 2147483647 !important; /* ✅ FIX: Z-index MÁXIMO */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.modzumac .vehicle-modal,
.modzumac .vehicle-info-modal,
.modzumac .category-info-modal,
.modzumac.category-info-modal-overlay .category-info-modal {
    z-index: 10005 !important;
    max-height: 85vh !important;
    width: 92% !important;
    max-width: 480px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ✅ PROTEGIDO: Modal de Pago Seguro (Stripe) - Capa superior */
.modzumac .stripe-modal-overlay {
    z-index: 10006 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.modzumac .stripe-modal {
    z-index: 10007 !important;
    max-height: 85vh !important;
    width: 92% !important;
    max-width: 480px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.modzumac .stripe-modal-header {
    z-index: 10008 !important;
    position: relative !important;
}

.modzumac .stripe-language-selector-wrapper {
    z-index: 10009 !important;
    position: relative !important;
}

.modzumac .stripe-language-selector-wrapper .language-selector {
    z-index: 10009 !important;
}

.modzumac .stripe-language-selector-wrapper .language-dropdown {
    z-index: 10010 !important;
    position: absolute !important;
}

/* ===== NO HAY REGLAS GLOBALES - Dejar que hero-search.css controle desktop ===== */

/* ===== DESKTOP (>= 768px) - Ocultar SOLO botón toggle (mobile-only) ===== */
@media (min-width: 768px) {
    .modzumac .btn-toggle-map {
        display: none !important; /* ✅ Ocultar botón toggle en desktop */
    }

    /* ✅ STRIPE MODAL - Restaurar ancho correcto en desktop */
    .modzumac .stripe-modal {
        max-width: 920px !important; /* ✅ Ancho completo en desktop */
        width: 90% !important;
    }

    /* ✅ route-info-compact VISIBLE en desktop (hero-search.css controla su estilo) */
    /* ✅ Dejar que hero-search.css controle el resto del layout */
}

/* ✅ PROTEGIDO: Clase para ocultar elementos vía JavaScript */
.modzumac .hidden-by-js {
    display: none !important;
}

/* ==================== MOBILE ONLY (< 768px) ==================== */
@media (max-width: 767px) {

    /* ✅ MÓDULO A: Hero Container y Step 1 - PROTEGIDOS */

    /* ===== PREVENIR SCROLL HORIZONTAL EN MÓDULO ===== */
    .modzumac,
    .modzumac * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ===== HERO CONTAINER ===== */
    .modzumac .hero-container {
        padding: clamp(4px, 1vw, 8px); /* Adaptativo: 4-8px según viewport */
        /* min-height removido - módulo embebido en landing page */
        overflow-x: hidden; /* Forzar sin scroll horizontal */
        overflow-y: visible; /* ✅ Permitir contenido fluido */
        max-width: 100vw;
        box-sizing: border-box;
        /* ✅ iOS: Scroll momentum en el container principal */
        -webkit-overflow-scrolling: touch;
        /* ✅ iOS + Android: Touch action en container */
        touch-action: pan-y;
    }

    /* ✅ CRÍTICO: Liberar .hero-container cuando dropdown está activo */
    .modzumac .hero-container:has(.searchable-select-wrapper.active) {
        overflow: visible !important; /* Permitir dropdown escape */
        overflow-y: visible !important;
        transform: none !important; /* Remover stacking context */
        will-change: auto !important;
        contain: none !important; /* Remover containment */
    }

    /* ===== MODAL PRINCIPAL ===== */
    .modzumac .hero-search-card {
        /* ✅ ELIMINADO width: 100% - Causaba que steps 2, 3, 4 ocuparan todo el ancho */
        max-width: 540px !important; /* ✅ CAMBIADO: Consistente con Step 1 */
        min-width: auto !important;
        padding: clamp(10px, 3vw, 14px) clamp(12px, 3.5vw, 16px); /* Adaptativo vertical y horizontal */
        border-radius: 10px;
        box-shadow: none !important; /* ✅ Sin sombra en móvil */
        max-height: calc(100vh - clamp(8px, 2vw, 16px));
        max-height: calc(100dvh - clamp(8px, 2vw, 16px));
        overflow-y: auto;
        overflow-x: hidden; /* Prevenir scroll horizontal */
        /* ✅ iOS: Scroll momentum natural */
        -webkit-overflow-scrolling: touch;
        /* ✅ iOS + Android CRÍTICO: Permitir scroll chaining automático */
        overscroll-behavior-y: none; /* Vertical: permitir chaining al body */
        overscroll-behavior-x: contain; /* Horizontal: contener dentro del modal */
        /* Crear contexto de apilamiento pero sin restringir z-index de hijos */
        position: relative;
        z-index: auto;
        /* Permitir que el modal crezca según contenido */
        height: auto;
        min-height: auto;
        /* Asegurar que no exceda el viewport */
        box-sizing: border-box;
        /* Prevenir desbordamiento de hijos */
        contain: layout style;
        /* ✅ iOS + Android: Touch action fluido */
        touch-action: pan-y; /* Solo scroll vertical, sin interferir con gestos del navegador */
        /* ✅ iOS + Android: Scroll behavior suave */
        scroll-behavior: smooth;
        /* ✅ iOS + Android: Prevenir scroll bouncing cuando está al final */
        overscroll-behavior: none;
        /* ✅ Android: GPU acceleration para scroll suave */
        transform: translate3d(0, 0, 0);
        /* ✅ Android: Optimizar rendering durante scroll */
        will-change: scroll-position;
        /* ✅ Android: Backface visibility para mejor performance */
        backface-visibility: hidden;
        /* ✅ Android: Prevenir flickering */
        -webkit-backface-visibility: hidden;
    }

    /* ✅ ESPECÍFICO PARA STEP-1: Necesita width: 100% */
    .modzumac .hero-search-card.step-1 {
        width: 100% !important;
    }

    /* CONTENEDORES DE VIAJE */
    .modzumac #sencillo-fields,
    .modzumac #redondo-fields {
        position: relative;
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }

    /* IMPORTANTE: En Step 1, asegurar que los contenedores NO floten */
    .modzumac .step-1 #sencillo-fields,
    .modzumac .step-1 #redondo-fields {
        position: relative !important;
        transform: none !important;
        overflow: visible !important; /* Para dropdowns */
        contain: none !important; /* Permitir que dropdown escape */
    }

    /* CRÍTICO: Cuando dropdown está activo, asegurar que todos los padres permitan escape */
    .modzumac .step-1:has(.searchable-select-wrapper.active) #sencillo-fields,
    .modzumac .step-1:has(.searchable-select-wrapper.active) #redondo-fields {
        overflow: visible !important;
        contain: none !important;
        transform: none !important;
    }

    /* Scrollbar más delgado para mobile */
    .modzumac .hero-search-card::-webkit-scrollbar {
        width: 3px;
    }

    .modzumac .hero-search-card::-webkit-scrollbar-thumb {
        background: rgba(14, 165, 233, 0.3);
        border-radius: 3px;
    }

    /* ✅ MÓDULO B: Language Selector - PROTEGIDOS */

    /* ===== SELECTOR DE IDIOMA - ESQUINA SUPERIOR ===== */
    /* IMPORTANTE: Posicionamiento consistente en mobile */
    .modzumac .language-selector {
        position: absolute !important;
        z-index: 70 !important; /* Normalizado: por encima de dropdowns */
        left: auto !important; /* Anular reglas conflictivas */
        right: 8px !important; /* SIEMPRE a la derecha en mobile */
    }

    /* Step 1: Control de overflow para selector y mapa */
    .modzumac .hero-search-card.step-1,
    .modzumac .step-1.hero-search-card {
        overflow-y: auto !important; /* Scroll vertical si es necesario */
        overflow-x: hidden !important; /* Sin scroll horizontal */
    }

    /* ✅ CRÍTICO: Cuando dropdown está activo, DESTRUIR todas las optimizaciones que crean contextos */
    .modzumac .hero-search-card.step-1:has(.searchable-select-wrapper.active),
    .modzumac .step-1.hero-search-card:has(.searchable-select-wrapper.active) {
        overflow: visible !important; /* Permitir que dropdown escape verticalmente */
        overflow-y: visible !important; /* Forzar visible en Y también */
        transform: none !important; /* ❌ Remover GPU acceleration - crea stacking context */
        will-change: auto !important; /* ❌ Remover will-change - puede crear stacking context */
        contain: none !important; /* ❌ Remover CSS containment - bloquea escape del dropdown */
        backface-visibility: unset !important; /* ❌ Remover optimización backface */
        -webkit-backface-visibility: unset !important; /* ❌ Safari/iOS */
    }

    /* Permitir que SOLO el selector sea visible arriba del modal */
    .modzumac .hero-search-card.step-1 > .language-selector,
    .modzumac .step-1.hero-search-card > .language-selector {
        position: absolute !important;
        z-index: 70 !important; /* Normalizado */
    }

    /* Step 1: Selector DENTRO del modal, arriba del texto */
    .modzumac .step-1 .language-selector,
    .modzumac .hero-search-card.step-1 .language-selector,
    body .modzumac .step-1 .language-selector {
        top: 4px !important;
        left: auto !important;
        right: 4px !important;
    }

    /* Step 4: Selector FUERA del modal */
    .modzumac .step-4 .language-selector {
        top: -18px !important; /* Fuera del modal - flotando arriba */
    }

    .modzumac .language-btn {
        padding: 4px 7px !important; /* Muy compacto */
        gap: 4px !important;
        border-radius: 16px; /* Más redondeado */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra para destacar */
        background: white;
        border: 1px solid #e5e7eb; /* Border más delgado */
    }

    .modzumac .language-btn-flag {
        width: 14px !important; /* Muy pequeño */
        height: 14px !important;
    }

    .modzumac .language-btn-text {
        font-size: 9px !important; /* Muy compacto */
        letter-spacing: 0.3px;
    }

    .modzumac .language-btn-icon {
        font-size: 8px !important;
    }

    /* Dropdown alineado a la derecha */
    .modzumac .language-dropdown {
        left: auto !important;
        right: 0 !important;
        min-width: 150px !important; /* Más compacto */
        top: calc(100% + 4px) !important; /* Más cerca del botón */
        z-index: 71 !important; /* Por encima del selector */
    }

    .modzumac .language-option {
        padding: 6px 8px !important; /* Más compacto */
        font-size: 11px !important;
    }

    .modzumac .language-flag {
        width: 18px !important;
        height: 18px !important;
    }

    /* ===== SELECTOR DE IDIOMA EN STEP 2 Y STEP 3 ===== */

    /* Step 2: Al lado de "RESUMEN DE TU VIAJE" */
    .modzumac .step-2 .language-selector {
        position: relative !important; /* Relative para que el dropdown funcione */
        display: inline-flex !important;
        float: right;
        margin: 0 !important;
        top: auto !important;
        right: auto !important;
        vertical-align: middle;
        align-self: center !important; /* ✅ Alinear verticalmente en el centro */
        margin-top: -4px !important; /* ✅ Subir un poco más */
    }

    /* Hacer que el summary-header tenga espacio para el selector */
    .modzumac .step-2 .summary-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: relative;
        overflow: visible !important; /* Permitir que el dropdown sea visible */
    }

    .modzumac .step-2 .summary-header-title {
        flex: 1;
        margin-right: 8px; /* Espacio entre título y selector */
    }

    /* Asegurar que el summary card no corte el dropdown */
    .modzumac .step-2 .step2-summary-card {
        overflow: visible !important;
    }

    /* Dropdown en Step 2 - alineado a la derecha */
    .modzumac .step-2 .language-dropdown {
        position: absolute !important;
        z-index: 71 !important; /* Normalizado */
        left: auto !important; /* Anular left */
        right: 0 !important; /* Alineado a la derecha del selector */
    }

    /* Step 3: Al lado de "ZUMAC" (boarding pass header) */
    .modzumac .step-3 .language-selector {
        position: relative !important; /* Relative para que el dropdown funcione */
        display: inline-flex !important;
        float: right;
        margin: 0 !important;
        top: auto !important;
        right: auto !important;
        vertical-align: middle;
        align-self: center !important; /* ✅ Alinear verticalmente en el centro */
        margin-top: -4px !important; /* ✅ Subir un poco más */
    }

    /* Boarding pass header con espacio para selector */
    .modzumac .step-3 .bp-header-compact {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: relative;
        overflow: visible !important; /* Permitir que el dropdown sea visible */
    }

    .modzumac .step-3 .bp-header-logo {
        flex: 1;
        margin-right: 8px; /* Espacio entre logo y selector */
    }

    /* Asegurar que el boarding pass no corte el dropdown */
    .modzumac .step-3 .boarding-pass-compact {
        overflow: visible !important;
    }

    /* Dropdown en Step 3 - alineado a la derecha */
    .modzumac .step-3 .language-dropdown {
        position: absolute !important;
        z-index: 71 !important; /* Normalizado */
        left: auto !important; /* Anular left */
        right: 0 !important; /* Alineado a la derecha del selector */
    }

    /* ✅ MÓDULO C: Formularios, Subtítulos y Campos - PROTEGIDOS */

    /* ===== SUBTÍTULO ===== */
    .modzumac .search-card-subtitle {
        font-size: 0.75rem; /* Aumentado para mejor legibilidad en mobile */
        margin: 4px 0 10px 0;
        padding: 0 4px;
        padding-top: 4px;
        text-align: center;
        word-break: break-word;
        font-weight: 500; /* Semi-bold para destacar */
    }

    /* ===== SELECTOR TIPO DE VIAJE ===== */
    .modzumac .trip-type-selector {
        margin-bottom: 12px; /* Reducido de 16px a 12px */
        padding: 2px; /* Reducido de 3px a 2px */
        gap: 4px; /* Reducido de 6px a 4px */
        box-sizing: border-box;
    }

    .modzumac .trip-type-btn {
        padding: 9px 10px; /* Reducido de 10px 12px a 9px 10px */
        font-size: 12px; /* Reducido de 13px a 12px */
        min-height: 42px; /* Reducido de 44px a 42px pero touch-friendly */
        flex: 1; /* Distribuir espacio equitativamente */
        box-sizing: border-box;
        border-width: 1.5px; /* Reducir border si existe */
    }

    /* ===== CAMPOS DE FORMULARIO - STACK VERTICAL ===== */

    /* Fila de 3 campos → Stack vertical */
    .modzumac .search-form-row,
    .modzumac .search-form-row-three {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .modzumac .search-form-group-small,
    .modzumac .search-form-group-medium,
    .modzumac .search-form-group-large,
    .modzumac .search-form-group-xlarge {
        flex: none;
        width: 100%;
        min-width: auto;
    }

    /* Fila de 4 campos (viaje redondo) → Stack vertical */
    .modzumac .search-form-row-four-compact {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ===== LABELS E INPUTS ===== */
    .modzumac .search-label {
        font-size: 11px; /* Reducido de 12px a 11px */
        margin-bottom: 3px; /* Reducido de 4px a 3px */
        font-weight: 600;
    }

    .modzumac .search-input {
        padding: 9px 10px; /* Reducido de 10px 12px a 9px 10px */
        font-size: 16px; /* Mínimo 16px para evitar zoom en iOS */
        min-height: 44px; /* Touch-friendly */
        border-width: 1.5px; /* Reducido de 2px a 1.5px */
        box-sizing: border-box; /* Asegurar que padding no cause overflow */
    }

    /* ===== SELECTOR DE MODO (Lista/Personalizar) ===== */
    .modzumac .location-mode-selector {
        margin-bottom: 12px;
        padding: 3px;
        gap: 6px;
    }

    .modzumac .mode-button {
        padding: 9px 12px;
        font-size: 12px;
        min-height: 40px;
    }

    /* ===== LAYOUT UBICACIONES Y MAPA ===== */
    .modzumac .locations-map-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        position: relative !important;
        transform: none !important;
        overflow: visible !important;
        min-height: auto !important;
    }

    .modzumac .locations-column {
        width: 100%;
        position: relative !important;
        transform: none !important;
        z-index: auto;
        overflow: visible !important;
        margin-bottom: 0;
    }

    .modzumac .map-info-column {
        width: 100%;
        position: relative;
    }

    /* ===== DROPDOWNS SEARCHABLE SELECT ===== */
    /* Asegurar que dropdowns estén por encima del contenido pero debajo de modales */
    .modzumac .searchable-select-wrapper {
        position: relative !important;
        z-index: 10 !important; /* Base: por encima del contenido normal */
    }

    .modzumac .searchable-select-wrapper.active {
        z-index: 9999 !important; /* Mayor prioridad cuando está abierto */
    }

    .modzumac .searchable-select-dropdown {
        /* ✅ CRÍTICO: position fixed para salir del contexto del módulo */
        position: fixed !important;
        z-index: 999999 !important; /* Z-index MUY ALTO - por encima de TODO */
        max-height: 60vh !important; /* 60% del viewport height */
        overflow-y: scroll !important; /* ✅ FIX: scroll en vez de auto para forzar scrollbar */
        -webkit-overflow-scrolling: touch !important;
        /* Forzar nueva capa de composición independiente */
        transform: translateZ(0);
        will-change: opacity, transform;
        /* El dropdown se posicionará automáticamente debajo del input gracias a JS */
        /* pero al ser 'fixed' no será afectado por la sombra o altura del módulo */

        /* ✅ FIX: Scrollbar siempre visible en móvil */
        scrollbar-width: thin !important; /* Firefox */
        scrollbar-color: #9ca3af #e5e7eb !important; /* Firefox */
    }

    /* ✅ FIX: Scrollbar siempre visible - WebKit (iOS/Android) */
    .modzumac .searchable-select-dropdown::-webkit-scrollbar {
        width: 10px !important;
        display: block !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .modzumac .searchable-select-dropdown::-webkit-scrollbar-track {
        background: #e5e7eb !important;
        border-radius: 5px !important;
    }

    .modzumac .searchable-select-dropdown::-webkit-scrollbar-thumb {
        background: #4b5563 !important;
        border-radius: 5px !important;
        min-height: 50px !important;
    }

    /* ===== MAPA COMPACTO ===== */
    .modzumac .hero-map-container-compact {
        /* ✅ OCULTAR MAPA EN MOBILE - SIEMPRE */
        display: none !important;
    }

    /* ✅ ASEGURAR que el mapa permanezca oculto incluso en Step 1 */
    .modzumac .step-1 .hero-map-container-compact {
        display: none !important;
    }

    /* ✅ ASEGURAR que el mapa permanezca oculto con clase .visible */
    .modzumac .hero-map-container-compact.visible {
        display: none !important;
    }

    /* ✅ ASEGURAR que el mapa permanezca oculto sin clase .visible */
    .modzumac .hero-map-container-compact:not(.visible) {
        display: none !important;
    }

    /* Forzar z-index bajo en Leaflet y posicionamiento estable */
    .modzumac .hero-map-container-compact .leaflet-container {
        z-index: 1 !important;
        position: relative !important; /* Mantener en flujo */
        transform: none !important; /* Sin transformaciones */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important; /* ✅ CORREGIDO: Permitir marcadores fuera del contenedor */
    }

    .modzumac .hero-map-container-compact .leaflet-pane {
        z-index: 1 !important;
        transform: none !important; /* Sin transformaciones */
        overflow: visible !important; /* ✅ Permitir marcadores fuera del pane */
    }

    .modzumac .hero-map-container-compact .leaflet-control-container {
        z-index: 2 !important;
        position: absolute !important; /* Controles pueden ser absolute */
    }

    /* Asegurar que el mapa no salga del flujo en ninguna situación */
    .modzumac .hero-map-container-compact .leaflet-map-pane {
        position: relative !important;
        transform: none !important;
        overflow: visible !important; /* ✅ CRÍTICO: Permitir marcadores fuera del map-pane */
    }

    /* Marker pane debe permitir overflow para labels */
    .modzumac .hero-map-container-compact .leaflet-marker-pane {
        overflow: visible !important;
        z-index: 15 !important; /* Por encima de otros panes */
    }

    /* ===== BOTÓN VER MAPA ===== */
    .modzumac .btn-toggle-map {
        /* ✅ OCULTAR BOTÓN VER MAPA EN MOBILE (ya que el mapa está oculto) */
        display: none !important;
    }

    .modzumac .btn-toggle-map:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #94a3b8;
    }

    .modzumac .btn-toggle-map:not(:disabled):hover {
        background: #f0f9ff;
        border-color: #0284c7;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
    }

    .modzumac .btn-toggle-map:not(:disabled):active {
        transform: scale(0.98);
    }

    /* Icono del botón */
    .modzumac .btn-toggle-map-icon {
        font-size: 18px;
        display: inline-flex;
        transition: transform 0.3s ease;
    }

    /* Rotar icono cuando mapa está visible */
    .modzumac .btn-toggle-map.active .btn-toggle-map-icon {
        transform: rotate(180deg);
    }

    /* Texto del botón */
    .modzumac .btn-toggle-map-text {
        font-size: 14px;
        letter-spacing: 0.3px;
    }

    /* ===== INFO DE RUTA ===== */
    .modzumac .route-info-compact {
        /* ✅ MOSTRAR INFO DE RUTA (KM/MIN) EN MOBILE - Usuario debe ver distancia y tiempo */
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        margin-top: 12px !important;
        border: 1px solid #e5e7eb !important;
        justify-content: space-around !important;
        width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 6px rgba(14, 165, 233, 0.08) !important;
    }

    /* Asegurar visibilidad para ambos modos */
    .modzumac #hero-route-info-step1,
    .modzumac #hero-route-info-roundtrip {
        display: flex !important;
    }

    /* Separador visual entre items */
    .modzumac .route-info-item {
        flex: 1;
        text-align: center;
        position: relative;
    }

    .modzumac .route-info-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 24px;
        background: rgba(14, 165, 233, 0.2);
    }

    .modzumac .route-info-label {
        font-size: 10px;
        color: #1f2937; /* ✅ NEGRO - Distancia, Tiempo */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: 2px;
    }

    .modzumac .route-info-value {
        font-size: 16px; /* Aumentado de 13px a 16px para mejor legibilidad */
        font-weight: 700;
        color: #1f2937; /* ✅ NEGRO - -- km, -- min */
        display: block;
    }

    /* ===== HELP TEXT ===== */
    .modzumac .search-help-text {
        font-size: 11px;
        padding: 6px 8px;
    }

    /* ===== BOTÓN PRINCIPAL ===== */
    .modzumac .btn-search-hero {
        width: 100%;
        padding: clamp(12px, 3vw, 14px) clamp(16px, 4vw, 20px); /* Adaptativo */
        font-size: clamp(13px, 3.5vw, 15px); /* Adaptativo */
        min-height: 48px; /* Touch-friendly: 48px estándar */
        margin-top: clamp(20px, 5vw, 28px) !important; /* Separación adaptativa */
        margin-bottom: clamp(6px, 2vw, 10px);
        position: static !important; /* Mantener en flujo del documento */
        z-index: auto !important; /* No crear contexto de apilamiento */
        background: var(--zumac-accent); /* Usar color de marca consistente */
        box-shadow: 0 4px 12px rgba(255, 0, 34, 0.3);
        clear: both !important;
        border-radius: clamp(8px, 2vw, 10px);
        box-sizing: border-box;
        display: block !important; /* Asegurar que es block */
        float: none !important; /* Sin float */
        order: 9999 !important; /* Forzar al final del flex container */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* ===== BOTONES DE NAVEGACIÓN (Pasos 2, 3, 4) ===== */
    .modzumac .step-nav-buttons {
        display: flex;
        gap: 8px;
        flex-direction: column; /* Stack vertical en mobile */
    }

    .modzumac .btn-step-nav {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
        min-height: 48px;
    }

    .modzumac .btn-step-nav.btn-back,
    .modzumac .btn-step-nav.btn-continue {
        flex: none;
    }

    /* ===== STEPS INDICATOR - ULTRA COMPACTO PARA iPHONE 15 PRO (393px) ===== */
    .modzumac .steps-indicator {
        gap: 0px; /* Eliminado gap para maximizar espacio */
        margin-bottom: 10px;
        padding: 0;
        overflow-x: hidden;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%; /* Forzar uso completo del ancho */
        box-sizing: border-box;
    }

    .modzumac .step-circle {
        width: 20px; /* Reducido de 24px a 20px - más compacto */
        height: 20px;
        font-size: 9px; /* Reducido de 10px a 9px */
        font-weight: 700;
        flex-shrink: 0;
        border-width: 1.5px;
    }

    .modzumac .step-label {
        display: block !important;
        font-size: 6px !important;
        font-weight: 600;
        color: #1f2937 !important; /* ✅ NEGRO por defecto */
        text-transform: uppercase;
        letter-spacing: 0.05px;
        white-space: nowrap;
        max-width: 42px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1px;
        text-align: center;
        line-height: 1.1;
    }

    .modzumac .step-item.completed .step-label {
        color: #10b981 !important; /* ✅ Verde para completados */
    }

    .modzumac .step-item.active .step-label {
        color: #1f2937 !important; /* ✅ NEGRO para paso activo (NO blanco) */
    }

    /* Asegurar compatibilidad con clase .step-text si existe */
    .modzumac .step-text {
        font-size: 6px !important;
        max-width: 42px;
        letter-spacing: 0.05px;
    }

    .modzumac .step-line {
        width: 10px; /* Reducido de 12px a 10px - más compacto */
        height: 2px;
        flex-shrink: 0;
        margin: 0; /* Eliminar margen */
    }

    /* Step-item más compacto */
    .modzumac .step-item {
        gap: 2px; /* Reducir gap vertical entre círculo y label */
    }

    /* ✅ MÓDULO D: Step 2, 3, 4 y Vehículos - PROTEGIDOS */

    /* ===== PASO 2: LAYOUT DE VEHÍCULOS ===== */
    .modzumac .step2-layout {
        display: flex;
        flex-direction: column;
        gap: 12px; /* Reducido de 14px a 12px */
    }

    /* Summary card (resumen del viaje) */
    .modzumac .step2-summary-card {
        padding: 10px; /* Reducido de 12px a 10px */
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box; /* Prevenir overflow */
    }

    .modzumac .summary-header {
        padding: 8px; /* Reducido de 10px a 8px */
        border-radius: 6px 6px 0 0;
    }

    /* ✅ ASEGURAR colores correctos en mobile */
    .modzumac .summary-title {
        color: var(--zumac-white) !important; /* ✅ BLANCO - RESUMEN DE TU VIAJE */
    }

    .modzumac .summary-icon {
        color: var(--zumac-white) !important; /* ✅ BLANCO - Icono avión ✈ */
    }

    .modzumac .summary-section-title {
        color: #1f2937 !important; /* ✅ NEGRO - DETALLES DEL VIAJE */
    }

    .modzumac .summary-header-title {
        font-size: 13px; /* Reducido de 14px a 13px */
        font-weight: 700;
    }

    .modzumac .summary-body {
        padding: 10px; /* Reducido de 12px a 10px */
    }

    .modzumac .summary-item {
        padding: 8px 0; /* Reducido de 10px a 8px */
        flex-direction: column;
        align-items: flex-start;
        gap: 3px; /* Reducido de 4px a 3px */
    }

    .modzumac .summary-label {
        font-size: 10px; /* Reducido de 11px a 10px */
        margin-bottom: 1px; /* Reducido de 2px a 1px */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .modzumac .summary-value {
        font-size: 12px; /* Reducido de 13px a 12px */
        max-width: 100%;
        word-break: break-word;
        font-weight: 500;
    }

    .modzumac .step2-section-title {
        font-size: 14px; /* Reducido de 15px a 14px */
        margin-bottom: 2px; /* Reducido para subir las cards */
        font-weight: 700;
    }

    /* Grid de vehículos */
    .modzumac .vehicles-grid {
        display: flex;
        flex-direction: column;
        gap: 6px; /* Reducido para compactar cards */
        max-height: none; /* Sin restricción de altura en mobile */
        padding: 0; /* Sin padding extra */
        overflow-y: visible; /* Sin scroll interno */
    }

    /* Tarjetas de vehículos */
    .modzumac .vehicle-card {
        width: 100%;
        min-height: auto;
        padding: 8px; /* Reducido de 10px a 8px */
        border-radius: 8px;
        gap: 6px; /* Reducido de 8px a 6px */
        box-sizing: border-box; /* Prevenir overflow */
    }

    .modzumac .vehicle-card-content {
        flex-direction: column;
        gap: 8px; /* Reducido de 10px a 8px */
        padding: 0;
        margin-bottom: 6px; /* Reducido de 8px a 6px */
    }

    /* Imagen del vehículo - optimizada para mobile */
    .modzumac .vehicle-card-image {
        flex: none;
        width: 100%;
        height: 130px; /* Reducido de 150px a 130px */
        border-radius: 6px; /* Reducido de 8px a 6px */
        padding: 6px; /* Reducido de 8px a 6px */
    }

    .modzumac .vehicle-card-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Información del vehículo */
    .modzumac .vehicle-card-info {
        flex: 1;
        padding-right: 0; /* Sin padding para el badge */
        gap: 4px; /* Reducido de 6px a 4px */
    }

    .modzumac .vehicle-card-name {
        font-size: 14px; /* Reducido de 15px a 14px */
        font-weight: 800;
        margin-bottom: 3px; /* Reducido de 4px a 3px */
        line-height: 1.3;
    }

    .modzumac .vehicle-card-features {
        gap: 3px; /* Reducido de 4px a 3px */
        margin-bottom: 6px; /* Reducido de 8px a 6px */
    }

    .modzumac .vehicle-card-features li {
        font-size: 11px; /* Reducido de 12px a 11px */
        padding-left: 14px; /* Reducido de 16px a 14px */
        line-height: 1.4; /* Reducido de 1.5 a 1.4 */
    }

    .modzumac .vehicle-card-features li::before {
        font-size: 12px; /* Reducido de 13px a 12px */
    }

    /* Badge de precio - reposicionado y compacto */
    .modzumac .vehicle-card-price-badge {
        position: static; /* Quitar absolute positioning */
        align-self: flex-start;
        margin-bottom: 6px; /* Reducido de 8px a 6px */
        padding: 6px 12px; /* Reducido de 8px 14px a 6px 12px */
        border-radius: 6px; /* Reducido de 8px a 6px */
    }

    .modzumac .vehicle-card-price-badge .price-label {
        font-size: 9px; /* Reducido de 10px a 9px */
        letter-spacing: 0.3px;
    }

    .modzumac .vehicle-card-price-badge .price-amount {
        font-size: 18px; /* Reducido de 20px a 18px */
        letter-spacing: -0.3px;
    }

    .modzumac .vehicle-card-price-badge .price-currency {
        font-size: 11px; /* Reducido de 13px a 11px */
    }

    /* Botones de acción */
    .modzumac .vehicle-action-buttons {
        display: flex;
        flex-direction: column;
        gap: 6px; /* Reducido de 8px a 6px */
        width: 100%;
    }

    .modzumac .vehicle-select-btn,
    .modzumac .vehicle-details-btn {
        width: 100%;
        padding: 10px 12px; /* Reducido de 11px 14px a 10px 12px */
        font-size: 13px;
        min-height: 44px;
        border-radius: 6px;
        font-weight: 600;
        box-sizing: border-box; /* Prevenir overflow */
    }

    /* Botón continuar del Step 2 */
    .modzumac .btn-step-nav {
        width: 100%;
        min-height: 46px; /* Reducido de 48px a 46px */
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 8px;
    }

    /* ===== PASO 3: INFORMACIÓN DEL PASAJERO ===== */
    .modzumac .step3-two-columns {
        display: flex;
        flex-direction: column;
        gap: 12px; /* Reducido de 14px a 12px */
    }

    .modzumac .boarding-pass-compact {
        padding: 10px; /* Reducido de 14px a 10px */
        box-sizing: border-box;
    }

    .modzumac .bp-vehicle-img-compact {
        height: 90px; /* Reducido de 100px a 90px */
    }

    .modzumac .step3-right-column {
        padding: 10px; /* Reducido de 14px a 10px */
        box-sizing: border-box;
    }

    .modzumac .step3-form {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Reducido de 12px a 10px */
    }

    .modzumac .step3-field,
    .modzumac .step3-field-full,
    .modzumac .step3-field-half {
        width: 100%;
        grid-column: unset;
    }

    .modzumac .step3-field-row {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Reducido de 12px a 10px */
    }

    .modzumac .step3-label {
        font-size: 11px; /* Reducido de 12px a 11px */
        font-weight: 600;
    }

    .modzumac .step3-input,
    .modzumac .step3-textarea {
        padding: 9px 10px; /* Reducido de 10px 12px a 9px 10px */
        font-size: 15px;
        min-height: 44px;
        box-sizing: border-box; /* Prevenir overflow */
    }

    /* ===== PASO 4: MÉTODO DE PAGO ===== */
    .modzumac .step4-two-columns {
        display: flex;
        flex-direction: column;
        gap: 12px; /* Reducido de 14px a 12px */
    }

    .modzumac .reservation-ticket {
        padding: 10px; /* Reducido de 14px a 10px */
        box-sizing: border-box;
    }

    .modzumac .step4-right-column {
        padding: 10px; /* Reducido de 14px a 10px */
        box-sizing: border-box;
    }

    .modzumac .step4-payment-method {
        padding: 10px; /* Reducido de 12px a 10px */
        box-sizing: border-box;
    }

    .modzumac .step4-pay-button {
        width: 100%;
        padding: 12px 16px; /* Reducido de 14px 20px a 12px 16px */
        font-size: 14px; /* Reducido de 15px a 14px */
        min-height: 48px; /* Reducido de 52px a 48px */
        box-sizing: border-box;
    }

    /* ===== MODAL DE VEHÍCULO ===== */
    .modzumac .vehicle-modal-overlay {
        padding: 12px;
    }

    .modzumac .vehicle-modal {
        max-width: 100%;
        max-height: 85vh;
    }

    .modzumac .vehicle-modal-header {
        padding: 14px;
    }

    .modzumac .vehicle-modal-body {
        padding: 14px;
    }

    .modzumac .vehicle-modal-image {
        height: 180px;
    }

    .modzumac .vehicle-modal-specs {
        grid-template-columns: 1fr;
    }

    .modzumac .vehicle-modal-footer {
        padding: 14px;
    }

    /* ===== PASOS 2, 3, 4 - MISMO ANCHO QUE STEP 1 EN MOBILE (540px) ===== */
    .modzumac .hero-search-card.step-2,
    .modzumac .hero-search-card.step-3,
    .modzumac .hero-search-card.step-4 {
        width: 100% !important; /* ✅ FIX: Ocupa 100% igual que step-1 */
        max-width: 540px !important; /* ✅ Máximo 540px consistente con Step 1 */
        overflow-y: auto;
        overflow-x: hidden; /* Forzar sin scroll horizontal */
        padding: 10px 12px; /* Reducido de 14px 16px a 10px 12px */
        box-sizing: border-box; /* Prevenir overflow */
    }

    /* Step 2 específico - modal más compacto */
    .modzumac .hero-search-card.step-2 {
        max-height: calc(100vh - 8px); /* Ajustado */
        max-height: calc(100dvh - 8px);
    }

    /* ✅ MÓDULO E: Safe Area, Alertas, Stripe Modal - PROTEGIDOS */

    /* ===== SAFE AREA INSETS (iPhone X+) ===== */
    @supports (padding: max(0px)) {
        .modzumac .hero-container {
            padding-left: max(clamp(4px, 1vw, 8px), env(safe-area-inset-left));
            padding-right: max(clamp(4px, 1vw, 8px), env(safe-area-inset-right));
        }

        .modzumac .hero-search-card {
            padding-left: max(clamp(12px, 3.5vw, 16px), env(safe-area-inset-left));
            padding-right: max(clamp(12px, 3.5vw, 16px), env(safe-area-inset-right));
            padding-top: max(clamp(10px, 3vw, 14px), env(safe-area-inset-top));
            padding-bottom: max(clamp(10px, 3vw, 14px), env(safe-area-inset-bottom));
        }
    }

    /* ===== ALERTAS OPTIMIZADAS PARA MOBILE ===== */

    /* Alerta personalizada (.hero-custom-alert) */
    .modzumac .hero-custom-alert {
        top: 12px !important; /* Reducido de 20px a 12px */
        left: 8px !important; /* Margen lateral reducido */
        right: 8px !important; /* Ocupar ancho completo con márgenes pequeños */
        transform: translateX(0) !important; /* Sin centrado para evitar overflow */
        max-width: none !important; /* Ocupar todo el ancho disponible */
        width: calc(100% - 16px) !important; /* Ancho completo menos márgenes */
        padding: 12px 14px !important; /* Reducido de 16px 24px */
        gap: 10px !important; /* Reducido de 12px */
        border-radius: 10px !important; /* Reducido de 12px */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
        font-size: 12px !important;
    }

    /* Icono de alerta personalizada */
    .modzumac .hero-custom-alert > div:first-child {
        width: 36px !important; /* Reducido de 40px */
        height: 36px !important;
        flex-shrink: 0;
    }

    .modzumac .hero-custom-alert > div:first-child svg {
        width: 20px !important; /* Reducido de 24px */
        height: 20px !important;
    }

    /* Texto de alerta personalizada */
    .modzumac .hero-custom-alert > div:nth-child(2) > div:first-child {
        font-size: 13px !important; /* Título "Atención" */
        margin-bottom: 2px !important;
    }

    .modzumac .hero-custom-alert > div:nth-child(2) > div:last-child {
        font-size: 12px !important; /* Mensaje */
        line-height: 1.4 !important;
    }

    /* Botón cerrar de alerta personalizada */
    .modzumac .hero-custom-alert > button {
        width: 22px !important;
        height: 22px !important;
        font-size: 20px !important;
    }

    /* Alerta de vehículo seleccionado */
    .modzumac .vehicle-selection-alert-floating {
        top: 60px !important; /* Reducido para no obstruir selector de idiomas */
        right: 8px !important;
        left: 8px !important;
        max-width: none !important;
        min-width: 0 !important;
        width: calc(100% - 16px) !important;
        padding: 12px 14px !important; /* Reducido de 16px 20px */
        gap: 10px !important; /* Reducido de 14px */
        border-radius: 10px !important;
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25) !important;
    }

    .modzumac .vehicle-alert-icon-floating {
        width: 36px !important; /* Reducido de 44px */
        height: 36px !important;
        font-size: 20px !important; /* Reducido de 24px */
    }

    .modzumac .vehicle-alert-title-floating {
        font-size: 12px !important; /* Reducido de 15px */
        letter-spacing: 0.3px !important;
    }

    .modzumac .vehicle-alert-text-floating {
        font-size: 11px !important; /* Reducido de 13px */
        line-height: 1.4 !important;
    }

    .modzumac .vehicle-alert-close {
        width: 24px !important; /* Reducido de 28px */
        height: 24px !important;
        font-size: 18px !important; /* Reducido de 22px */
        margin-left: 4px !important;
    }

    /* ===== STEP 4: MÉTODO DE PAGO - FIX MOBILE ===== */

    /* Fix: Mantener título y selector en la misma línea (inline) */
    .modzumac .step4-title-with-language {
        display: flex !important;
        flex-direction: row !important; /* ✅ Forzar horizontal, NO column */
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important; /* Reducido de 16px */
        margin-bottom: 14px !important;
        flex-wrap: nowrap !important; /* No permitir wrap */
        overflow: visible !important;
    }

    /* Título compacto */
    .modzumac .step4-title {
        font-size: 0.8rem !important; /* Reducido de 0.95rem */
        margin: 0 !important;
        flex-shrink: 1; /* Permitir que se encoja si es necesario */
        min-width: 0; /* Permitir que el texto se ajuste */
        white-space: nowrap; /* Evitar que el texto se rompa en múltiples líneas */
        overflow: hidden;
        text-overflow: ellipsis; /* Mostrar ... si es muy largo */
    }

    /* Selector inline con el título */
    .modzumac .step4-title-with-language .language-selector {
        position: relative !important;
        flex-shrink: 0; /* No permitir que se encoja */
        margin: 0 !important;
    }

    /* Botón de idioma compacto */
    .modzumac .step4-title-with-language .language-btn {
        padding: 4px 8px !important; /* Reducido de 5px 9px */
        gap: 4px !important;
        min-height: 28px !important; /* Touch-friendly mínimo */
    }

    .modzumac .step4-title-with-language .language-btn-flag {
        width: 14px !important;
        height: 14px !important;
    }

    .modzumac .step4-title-with-language .language-btn-text {
        font-size: 9px !important;
    }

    .modzumac .step4-title-with-language .language-btn-icon {
        font-size: 8px !important;
    }

    /* Dropdown alineado a la derecha */
    .modzumac .step4-title-with-language .language-dropdown {
        left: auto !important;
        right: 0 !important;
        z-index: 71 !important; /* Normalizado */
    }

    /* ===== FIX Z-INDEX: Cuando modal de pago está abierto ===== */

    /* ⚪ GLOBAL (SIN PREFIJO): Ocultar selector del Step 4 cuando hay modal abierto
       JUSTIFICACIÓN: body:has() debe ser global para detectar modales */
    body:has(.modzumac .stripe-modal-overlay) .modzumac .step4-title-with-language .language-selector,
    body:has(.modzumac .vehicle-modal-overlay) .modzumac .step4-title-with-language .language-selector {
        opacity: 0 !important;
        pointer-events: none !important; /* No clickeable */
        visibility: hidden !important;
    }

    /* Asegurar que el selector del Step 4 esté DEBAJO de modales */
    .modzumac .step4-title-with-language {
        z-index: 1 !important; /* Bajo, debajo de modales */
    }

    .modzumac .step4-title-with-language .language-selector {
        z-index: 1 !important; /* Bajo, debajo de modales */
    }

    /* ===== MODAL DE PAGO SEGURO (STRIPE) - FIX MOBILE ===== */

    /* Overlay del modal */
    .modzumac .stripe-modal-overlay {
        z-index: 90 !important; /* Normalizado: capa superior */
    }

    /* Modal más compacto */
    .modzumac .stripe-modal {
        width: 92% !important; /* ✅ REDUCIDO: De 95% a 92% para evitar scroll horizontal */
        max-width: 92% !important; /* ✅ REDUCIDO: De 95% a 92% */
        border-radius: 16px !important;
        max-height: 92vh !important;
        z-index: 91 !important; /* Normalizado */
        position: relative !important;
        box-sizing: border-box !important; /* ✅ AGREGADO: Incluir padding/border en el width */
    }

    .modzumac .stripe-modal-header {
        padding: 20px 16px 18px !important;
        border-radius: 16px 16px 0 0 !important;
        flex-wrap: wrap !important; /* Permitir wrap si es necesario */
        gap: 12px !important;
        position: relative !important;
        z-index: 92 !important; /* Normalizado */
    }

    .modzumac .header-content {
        gap: 10px !important;
        flex: 1;
        min-width: 0; /* Permitir que se ajuste */
    }

    .modzumac .header-content h2 {
        font-size: 1.1rem !important; /* Reducido */
        margin: 0 !important;
    }

    .modzumac .header-subtitle {
        font-size: 0.75rem !important;
    }

    /* Selector de idiomas en modal Stripe - Compacto */
    .modzumac .stripe-language-selector-wrapper {
        margin: 0 !important;
        order: 3; /* Mover después del contenido y antes del botón cerrar */
        flex-shrink: 0;
        z-index: 93 !important; /* Normalizado */
        position: relative !important;
    }

    .modzumac .stripe-language-selector-wrapper .language-selector {
        position: relative !important;
        transform: none !important;
        z-index: 93 !important; /* Normalizado */
    }

    .modzumac .stripe-language-selector-wrapper .language-btn {
        padding: 5px 8px !important;
        gap: 4px !important;
        min-height: 32px !important; /* Touch-friendly */
    }

    .modzumac .stripe-language-selector-wrapper .language-btn-flag {
        width: 14px !important;
        height: 14px !important;
    }

    .modzumac .stripe-language-selector-wrapper .language-btn-text {
        font-size: 10px !important;
    }

    .modzumac .stripe-language-selector-wrapper .language-btn-icon {
        font-size: 9px !important;
    }

    /* Dropdown del selector en modal Stripe */
    .modzumac .stripe-language-selector-wrapper .language-dropdown {
        left: auto !important;
        right: 0 !important;
        z-index: 94 !important; /* Normalizado */
        min-width: 140px !important;
        position: absolute !important;
    }

    /* Botón cerrar del modal */
    .modzumac .stripe-modal-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 22px !important;
        flex-shrink: 0;
        order: 4; /* Último elemento */
    }

    /* Cuerpo del modal */
    .modzumac .stripe-modal-body {
        padding: 18px 16px !important;
    }

    /* Grid de pago en mobile - una columna */
    .modzumac .payment-content-grid {
        grid-template-columns: 1fr !important; /* Una columna en mobile */
        gap: 16px !important;
    }

}

/* ✅ MÓDULO F: Small Mobile, Landscape y Accesibilidad - PROTEGIDOS */

/* ==================== SMALL MOBILE (< 380px) ==================== */
@media (max-width: 379px) {

    .modzumac .hero-container {
        padding: 4px; /* Reducido de 8px a 4px */
    }

    .modzumac .hero-search-card {
        padding: 14px 16px; /* Aumentado de 12px 14px a 14px 16px */
        border-radius: 10px;
    }

    .modzumac .search-card-subtitle {
        font-size: 0.65rem;
    }

    .modzumac .trip-type-btn {
        font-size: 12px;
        padding: 8px 10px;
    }

    .modzumac .search-label {
        font-size: 11px;
    }

    .modzumac .search-input {
        font-size: 14px;
        padding: 9px 11px;
        min-height: 42px;
    }

    .modzumac .hero-map-container-compact {
        /* ✅ OCULTAR también en pantallas muy pequeñas */
        display: none !important;
    }

    .modzumac .btn-search-hero {
        font-size: 14px;
        padding: 12px 18px;
    }

    /* ===== ALERTAS PARA PANTALLAS MUY PEQUEÑAS ===== */

    /* Alerta personalizada más compacta */
    .modzumac .hero-custom-alert {
        top: 8px !important;
        left: 6px !important;
        right: 6px !important;
        width: calc(100% - 12px) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .modzumac .hero-custom-alert > div:first-child {
        width: 32px !important;
        height: 32px !important;
    }

    .modzumac .hero-custom-alert > div:first-child svg {
        width: 18px !important;
        height: 18px !important;
    }

    .modzumac .hero-custom-alert > div:nth-child(2) > div:first-child {
        font-size: 12px !important;
    }

    .modzumac .hero-custom-alert > div:nth-child(2) > div:last-child {
        font-size: 11px !important;
    }

    .modzumac .hero-custom-alert > button {
        width: 20px !important;
        height: 20px !important;
        font-size: 18px !important;
    }

    /* Alerta de vehículo más compacta */
    .modzumac .vehicle-selection-alert-floating {
        top: 50px !important;
        left: 6px !important;
        right: 6px !important;
        width: calc(100% - 12px) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .modzumac .vehicle-alert-icon-floating {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }

    .modzumac .vehicle-alert-title-floating {
        font-size: 11px !important;
    }

    .modzumac .vehicle-alert-text-floating {
        font-size: 10px !important;
    }

    .modzumac .vehicle-alert-close {
        width: 22px !important;
        height: 22px !important;
        font-size: 16px !important;
    }

}

/* ==================== LANDSCAPE MODE MOBILE ==================== */
@media (max-width: 767px) and (orientation: landscape) {

    .modzumac .hero-container {
        min-height: auto;
        padding: 4px; /* Reducido de 8px a 4px para más ancho */
    }

    .modzumac .hero-search-card {
        max-height: calc(100vh - 8px); /* Reducido de 16px a 8px */
    }

    .modzumac .hero-map-container-compact {
        /* ✅ OCULTAR también en landscape mobile */
        display: none !important;
    }

    .modzumac .btn-search-hero,
    .modzumac .btn-step-nav {
        padding: 10px 16px;
        min-height: 44px;
    }

}

/* ==================== ACCESIBILIDAD ==================== */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .modzumac .hero-search-card,
    .modzumac .trip-type-btn,
    .modzumac .mode-button,
    .modzumac .search-input,
    .modzumac .btn-search-hero,
    .modzumac .btn-step-nav {
        transition: none !important;
    }
}

/* ==================== TOUCH OPTIMIZATIONS ==================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {

    /* Asegurar touch targets mínimos */
    .modzumac .trip-type-btn,
    .modzumac .mode-button,
    .modzumac .btn-search-hero,
    .modzumac .btn-step-nav {
        min-height: 48px;
    }

    .modzumac .search-input {
        min-height: 44px;
    }

    /* Prevenir zoom en inputs iOS */
    .modzumac .search-input,
    .modzumac .step3-input,
    .modzumac .step3-textarea {
        font-size: 16px !important;
    }

    /* Feedback táctil */
    .modzumac .trip-type-btn:active,
    .modzumac .mode-button:active,
    .modzumac .btn-search-hero:active,
    .modzumac .btn-step-nav:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

}