@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    color-scheme: light;
    --gold-primary: #D4AF37;
    --gold-glow: rgba(212, 175, 55, 0.2);
    --bg-base: #F8FAFC;
    --bg-surface: #FFFFFF;
    --border-glass: #E2E8F0;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --input-bg: #F1F5F9;
    --danger: #EF4444;
    --success: #10B981;
    --warning: #F59E0B;
    --info: #3B82F6; 
    --transfer: #8B5CF6;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-soft: 0 8px 30px rgba(0,0,0,0.04);
}

/* Estilos por defecto (Modo Claro) */
#driverGpsOverlay {
    background-color: #ffffff;
    color: #333333;
}

/* Modo Oscuro Automático */
@media (prefers-color-scheme: dark) {
    #driverGpsOverlay {
        background-color: #1a1a1a;
        color: #f3f4f6;
    }
    
    /* Si tienes más cajas o botones dentro del GPS, cámbiales el color aquí */
    .caja-info-gps {
        background-color: #2d3748;
        border-color: #4a5568;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark; 
        --bg-base: #050507; 
        --bg-surface: #0F1520; 
        --border-glass: rgba(255, 255, 255, 0.08);
        --text-main: #FFFFFF;
        --text-muted: #94A3B8;
        --input-bg: rgba(255,255,255,0.03);
        --shadow-soft: 0 15px 40px rgba(0,0,0,0.3);
    }
    ::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; cursor: pointer; }
}

html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
body { background-color: var(--bg-base); color: var(--text-main); line-height: 1.6; overflow-x: hidden; width: 100%; min-height: 100vh; -webkit-font-smoothing: antialiased; position: relative; }

/* Corrección Global para Desplegables (Nativos e iOS) */
select, input, textarea { color-scheme: light dark; }
select option { background-color: var(--bg-surface); color: var(--text-main); font-weight: 600; font-size: 1rem; }

/* --- PANTALLA DE CARGA --- */
#premiumSplashScreen {
    position: fixed; inset: 0; background: var(--bg-base); z-index: 9999999;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.splash-logo-container { position: relative; display: flex; justify-content: center; align-items: center; padding: 30px; }
.splash-loader { position: absolute; width: 180px; height: 180px; border: 3px solid transparent; border-top-color: var(--gold-primary); border-bottom-color: var(--gold-primary); border-radius: 50%; animation: spin 1.5s linear infinite; z-index: 1; opacity: 0.5; }
.splash-logo-container::before { content: ''; position: absolute; top: 50%; left: 50%; width: 70%; height: 70%; transform: translate(-50%, -50%); background: var(--gold-primary); border-radius: 50%; filter: blur(40px); opacity: 0.25; animation: pulseGlowSplash 2s infinite alternate; z-index: 0;}
#premiumSplashScreen img { width: 140px; max-width: 40vw; z-index: 2; position: relative; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulseGlowSplash { from { transform: translate(-50%, -50%) scale(0.9); opacity: 0.15; } to { transform: translate(-50%, -50%) scale(1.1); opacity: 0.35; } }
body.loaded #premiumSplashScreen { opacity: 0; visibility: hidden; pointer-events: none; }

/* FONDOS ANIMADOS (INDEX) */
body::before, body::after { content: ''; position: fixed; border-radius: 50%; filter: blur(120px); z-index: -1; pointer-events: none; animation: goldFloatHero1 15s infinite ease-in-out alternate; }
body::before { width: 400px; height: 400px; background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%); top: 10%; left: 5%; }
body::after { width: 600px; height: 600px; background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); bottom: -10%; right: -10%; animation: goldFloatHero2 20s infinite ease-in-out alternate-reverse; }
@media (prefers-color-scheme: dark) {
    body::before { background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%); filter: blur(120px);}
    body::after { background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); filter: blur(150px);}
}
@keyframes goldFloatHero1 { 0% { transform: translate(0, 0) scale(1); opacity: 0.8; } 50% { transform: translate(5vw, 10vh) scale(1.1); opacity: 1; } 100% { transform: translate(-5vw, 5vh) scale(1); opacity: 0.8; } }
@keyframes goldFloatHero2 { 0% { transform: translate(0, 0) scale(1); opacity: 0.7; } 50% { transform: translate(-10vw, -15vh) scale(1.2); opacity: 0.9; } 100% { transform: translate(5vw, -5vh) scale(1); opacity: 0.7; } }

/* ANIMACIONES DE APARICIÓN */
.reveal, .glass-card, .driver-card { transform: translateZ(0); backface-visibility: hidden; will-change: transform, opacity, box-shadow; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s var(--easing); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- DESTELLO (SHIMMER) Y BOTONES --- */
@keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } }
.btn-hero-primary, .btn-calc, .btn-auth { position: relative; overflow: hidden; transform: translateZ(0); will-change: transform, box-shadow; }
.btn-hero-primary::before, .btn-calc::before, .btn-auth::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-25deg); animation: shimmer 3.5s infinite; pointer-events: none; }

.btn-submit {
    background: linear-gradient(135deg, #DFB943 0%, #B8922C 100%);
    color: #000; border: none; padding: 20px; font-size: 1.05rem; font-weight: 800;
    border-radius: 16px; cursor: pointer; width: 100%; transition: all 0.3s var(--easing);
    text-transform: uppercase; letter-spacing: 1.5px; margin-top: 1rem;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    position: relative; overflow: hidden; transform: translateZ(0);
}
.btn-submit::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-25deg); animation: shimmer 3.5s infinite; pointer-events: none; }
.btn-submit:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 25px rgba(212, 175, 55, 0.4); }
.btn-submit:disabled { background: var(--input-bg); color: var(--text-muted); box-shadow: none; cursor: not-allowed; transform: none; border: 1px solid var(--border-glass); animation: none;}

.float-whatsapp { position: fixed; bottom: 30px; right: 30px; background: #25D366; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); z-index: 1000; transition: 0.3s var(--easing); }
.float-whatsapp:hover { transform: scale(1.1) translateY(-4px); box-shadow: 0 12px 25px rgba(37, 211, 102, 0.4); }

/* --- HEADER SUPERIOR --- */
.main-header { position: fixed; top: 0; left: 0; width: 100%; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(15, 21, 32, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); z-index: 9000; transition: 0.3s; }
@media (prefers-color-scheme: light) { .main-header { background: rgba(255, 255, 255, 0.9); } }
.header-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text-main); text-transform: uppercase; letter-spacing: 1px; text-decoration: none;}
.header-brand img { width: 30px; height: auto; object-fit: contain; }
.header-text-desktop { display: block; }
.header-auth { display: flex; align-items: center; gap: 15px; }
.btn-header-login { background: transparent; color: var(--gold-primary); border: 2px solid var(--gold-primary); padding: 8px 18px; border-radius: 50px; font-weight: 700; text-decoration: none; font-size: 0.9rem; transition: 0.3s; display: flex; align-items: center; gap: 8px; text-transform: uppercase; white-space: nowrap;}
.btn-header-login:hover { background: var(--gold-glow); transform: translateY(-2px); }
.btn-header-account { background: var(--gold-primary); color: #000; padding: 8px 18px; border-radius: 50px; font-weight: 700; text-decoration: none; font-size: 0.9rem; transition: 0.3s; display: flex; align-items: center; gap: 8px; text-transform: uppercase; display: none; white-space: nowrap;}
.btn-header-account:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--gold-glow); }

/* --- HERO SCREEN --- */
.hero-screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; padding-top: 100px; position: relative; overflow: hidden; }
.hero-content-wrapper { z-index: 2; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%;}
.hero-logo { position: relative; display: inline-flex; justify-content: center; align-items: center; margin: 0 auto 20px auto; }
.hero-logo::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; background: var(--gold-primary); border-radius: 50%; filter: blur(35px); opacity: 0.25; animation: pulseGlowSplash 3s infinite alternate; z-index: 0;}
.hero-logo-img { width: clamp(90px, 12vw, 150px); height: auto; display: block; padding: 10px; position: relative; z-index: 2;}

.hero-screen h1 { font-size: clamp(2.2rem, 5vw, 4.8rem); font-weight: 800; letter-spacing: -0.5px; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text-main); }
.hero-screen h1 span { color: var(--gold-primary); }
.hero-subtitle { font-size: clamp(0.95rem, 2vw, 1.15rem); font-weight: 500; letter-spacing: 0.5px; max-width: 700px; margin: 0 auto 2rem auto; color: var(--text-muted); }

.hero-actions { display: flex; gap: 15px; z-index: 2; flex-wrap: wrap; justify-content: center; margin: 0 auto 2.5rem auto; align-items: center; width: 100%; max-width: 600px;}
.btn-hero-primary, .btn-hero-secondary, .btn-hero-outline { padding: 16px 35px; border-radius: 50px; font-weight: 800; font-size: 1.05rem; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s var(--easing); display: inline-flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden;}
.btn-hero-primary { background: var(--gold-primary); color: #000; box-shadow: 0 8px 25px var(--gold-glow); }
.btn-hero-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4); }
.btn-hero-secondary { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-glass); }
.btn-hero-secondary:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.btn-hero-outline { background: transparent; color: var(--gold-primary); border: 2px solid var(--gold-primary); }
.btn-hero-outline:hover { transform: translateY(-3px); background: var(--gold-glow); }

.trust-badges-inline { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 0; position: relative; z-index: 2; width: 100%; opacity: 0.9;}
.trust-badge-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.02); padding: 8px 16px; border-radius: 50px; border: 1px solid var(--border-glass); color: var(--text-main); cursor: default; backdrop-filter: blur(5px); }
@media (prefers-color-scheme: dark) { .trust-badge-item { border-color: rgba(255,255,255,0.08); color: var(--text-muted); }}
.trust-badge-item svg { width: 16px; height: 16px; fill: var(--gold-primary); transition: 0.3s; }
.trust-badge-item span { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;}

.container { width: 92%; max-width: 1000px; margin: 4rem auto; padding: 3.5rem; background: var(--bg-surface); border-radius: 28px; border: 1px solid var(--border-glass); box-shadow: var(--shadow-soft); position: relative;}
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--text-main); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2;}
.section-header p { color: var(--gold-primary); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 8px;}

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.glass-card { background: var(--input-bg); border: 1px solid var(--border-glass); padding: 35px; border-radius: 20px; transition: 0.4s var(--easing); text-align: left; position: relative; overflow: hidden;}
.glass-card:hover { transform: translateY(-5px); border-color: var(--gold-primary); box-shadow: var(--shadow-soft);}
.icon-box { background: var(--bg-surface); width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin-bottom: 18px; border: 1px solid var(--border-glass); color: var(--gold-primary); box-shadow: 0 5px 15px var(--gold-glow);}
.icon-box svg { width: 28px; height: 28px; fill: currentColor; }

.vip-highlight-box { background: linear-gradient(135deg, var(--input-bg) 0%, var(--bg-surface) 100%); padding: 40px; border-radius: 24px; border: 1px solid var(--gold-primary); box-shadow: 0 15px 35px var(--gold-glow); transition: all 0.4s ease; position: relative; overflow: hidden;}
.vip-highlight-box::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.1), transparent); transform: skewX(-25deg); transition: 0.4s; pointer-events: none; z-index: 1;}
.vip-highlight-box:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);}
.vip-highlight-box:hover::before { animation: shimmerVip 1.5s infinite;}
.vip-feature-card { background: var(--bg-surface); padding: 22px; border-radius: 16px; border: 1px solid var(--border-glass); position: relative; z-index: 2; margin-top: 15px;}
.vip-feature-title { color: var(--gold-primary); font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; display:flex; align-items:center; gap:8px; }
.vip-feature-title svg { width:22px; height:22px; fill:currentColor; }

.form-group { margin-bottom: 20px; width: 100%; position: relative; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; transition: 0.3s; }
.form-group:focus-within label { color: var(--gold-primary); transform: translateX(3px); }

input, select, textarea { 
    width: 100%; padding: 16px 20px; border: 2px solid var(--border-glass); border-radius: 14px; 
    font-size: 1rem; transition: all 0.3s var(--easing); background-color: var(--input-bg); 
    color: var(--text-main); font-weight: 600; outline: none; box-sizing: border-box; 
    -webkit-appearance: none; appearance: none; display: block; background-clip: padding-box;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold-primary); background-color: var(--bg-surface); box-shadow: 0 5px 20px var(--gold-glow); transform: translateY(-1px); }
input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { display: block; opacity: 0.8; }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.5); }

.input-icon-wrap { position: relative; width: 100%; }
.check-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%) scale(0); width: 20px; height: 20px; fill: var(--success); transition: 0.3s var(--easing); opacity: 0; pointer-events: none; }
input.is-valid { border-color: var(--success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); }
input.is-valid + .check-icon { transform: translateY(-50%) scale(1); opacity: 1; }

.vip-banner { background: rgba(212, 175, 55, 0.05); border: 1px solid var(--gold-primary); padding: 25px; border-radius: 20px; margin-bottom: 25px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; transition: all 0.4s ease;}
.vip-input-group { display: flex; gap: 10px; width: 100%; align-items: stretch; }
.vip-banner input { padding: 15px 20px; flex: 1; font-size: 1.1rem; text-transform: uppercase; text-align: center; letter-spacing: 2px; font-weight: 800; min-height: 55px;}
.btn-vip-apply { background: var(--gold-primary); color: #000; border: none; padding: 15px 30px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; min-height: 55px;}
.btn-vip-apply:hover { transform: scale(1.02); box-shadow: 0 5px 15px var(--gold-glow);}

/* --- ESTADO VIP ACTIVADO EN EL FORMULARIO (MODO INTELIGENTE) --- */
.vip-banner.vip-banner-activated {
    background: linear-gradient(135deg, var(--input-bg) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--gold-primary);
    box-shadow: 0 15px 35px var(--gold-glow), inset 0 0 20px rgba(212, 175, 55, 0.05);
    position: relative;
    overflow: hidden;
}
.vip-banner.vip-banner-activated::before {
    content: ''; 
    position: absolute; 
    top: 0; left: -100%; 
    width: 50%; height: 100%; 
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.15), transparent); 
    transform: skewX(-25deg); 
    animation: shimmer 3.5s infinite; 
    pointer-events: none; 
    z-index: 1;
}

/* ESTILOS OVERLAY CLIENTE (CLARO Y LIMPIO SIEMPRE) */
.gps-pro-overlay { position: fixed; inset: 0; background: #f8fafc; z-index: 9999999; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.gps-pro-overlay.active { transform: translateY(0); }
.gps-pro-header { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 10; padding: 15px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); }
.gps-pro-footer { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 10; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); box-shadow: 0 -10px 40px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); }
.btn-circular-danger { width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s; background: rgba(239,68,68,0.1) !important; border: 1px solid rgba(239,68,68,0.2) !important; color: #ef4444 !important; }
.gps-text-dynamic { color: #1e293b; font-weight: 800; font-size: 1.1rem; }

.phone-wrapper { display: flex; gap: 10px; position: relative; max-width: 100%; box-sizing: border-box;}
.prefix-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--input-bg); border: 2px solid var(--border-glass); border-radius: 14px; color: var(--text-main); font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.3s; flex-shrink: 0; min-width: 100px;}
.prefix-btn:hover { border-color: var(--gold-primary); background: var(--bg-surface); }
.prefix-dropdown { position: absolute; top: 100%; left: 0; width: 280px; background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: 14px; box-shadow: 0 15px 40px rgba(0,0,0,0.2); z-index: 50; display: none; flex-direction: column; overflow: hidden; margin-top: 8px; animation: popIn 0.2s var(--easing);}
.prefix-dropdown.active { display: flex; }
.prefix-search { padding: 15px; border-bottom: 1px solid var(--border-glass); }
.prefix-search input { padding: 12px; font-size: 0.95rem; }
.prefix-list { max-height: 200px; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--gold-primary) var(--input-bg);}
.prefix-list li { padding: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.2s;}
.prefix-list li:hover { background: var(--input-bg); color: var(--gold-primary); padding-left: 20px;}
.phone-warning { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--warning); font-weight: 600; animation: popIn 0.3s; }

.route-card { background: var(--input-bg); border: 1px solid var(--border-glass); border-radius: 20px; padding: 30px; margin-bottom: 25px;}
.route-wrapper { position: relative; padding-left: 55px; }
.route-point { position: relative; z-index: 2; margin-bottom: 35px; display: flex; align-items: center; }
.route-point:last-child { margin-bottom: 0; }
.route-icon { position: absolute; left: -55px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface); border: 2px solid var(--border-glass); display: flex; align-items: center; justify-content: center; z-index: 3; transition: 0.3s; color: var(--text-main); font-weight: 800; box-shadow: var(--shadow-soft);}
.route-icon svg { width: 18px; height: 18px; fill: currentColor; }
.route-point:focus-within .route-icon { border-color: var(--gold-primary); color: var(--gold-primary); transform: translateY(-50%) scale(1.1); box-shadow: 0 0 15px var(--gold-glow);}
.icon-end { background: var(--text-main); color: var(--bg-surface); border-color: var(--text-main); }
.route-point:focus-within .icon-end { background: var(--gold-primary); color: #000; border-color: var(--gold-primary); }
.route-content { flex: 1; width: 100%; }
.route-track { position: absolute; left: 19px; top: 42px; bottom: 42px; width: 2px; background: rgba(212, 175, 55, 0.2); z-index: 1; border-radius: 2px;}
.route-beam { position: absolute; top: 0; left: -1px; width: 4px; height: 35px; background: linear-gradient(to bottom, transparent, var(--gold-primary), transparent); animation: beamTravel 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; z-index: 2; border-radius: 4px;}
@keyframes beamTravel { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 35px); opacity: 0; } }

.time-period-toggle { display: flex; gap: 10px; margin-bottom: 20px; background: var(--input-bg); padding: 5px; border-radius: 14px; border: 1px solid var(--border-glass); }
.period-btn { flex: 1; padding: 12px; border-radius: 10px; border: none; background: transparent; color: var(--text-muted); font-weight: 800; cursor: pointer; transition: 0.3s; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px;}
.period-btn.active { background: var(--bg-surface); color: var(--gold-primary); box-shadow: var(--shadow-soft); }

.duration-selector { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 8px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; max-width: 100%; box-sizing: border-box;}
.duration-selector::-webkit-scrollbar { display: none; }
.duration-chip { scroll-snap-align: start; flex: 0 0 auto; padding: 12px 20px; border-radius: 50px; background: var(--input-bg); border: 2px solid var(--border-glass); color: var(--text-main); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: 0.3s var(--easing); white-space: nowrap;}
.duration-chip:hover { border-color: var(--gold-primary); transform: translateY(-2px); }
.duration-chip.active { background: var(--gold-primary); color: #000; border-color: var(--gold-primary); box-shadow: 0 5px 15px var(--gold-glow); transform: scale(1.03); }

.calc-tabs-group { display: flex; gap: 10px; margin-bottom: 25px; background: var(--input-bg); padding: 8px; border-radius: 14px; border: 1px solid var(--border-glass);}
.calc-tab { flex: 1; padding: 14px; border: none; background: transparent; color: var(--text-muted); font-weight: 800; border-radius: 10px; cursor: pointer; transition: 0.3s; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; display:flex; align-items:center; justify-content:center; gap:8px;}
.calc-tab svg { width: 18px; height: 18px; fill: currentColor; }
.calc-tab.active { background: var(--bg-surface); color: var(--gold-primary); box-shadow: var(--shadow-soft); }
.calc-grid { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: end;}
.btn-calc { background: var(--text-main); color: var(--bg-base); border: none; padding: 18px 30px; border-radius: 14px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: 0.3s var(--easing); letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;}
.btn-calc:hover { background: var(--gold-primary); transform: translateY(-3px); box-shadow: 0 10px 25px var(--gold-glow); color: #000;}

.chart-area { margin-top: 30px; padding: 25px; background: var(--bg-surface); border-radius: 20px; border: 1px solid var(--border-glass); display: none; animation: popIn 0.5s var(--easing); }
.chart-row { display: flex; align-items: center; margin-bottom: 18px; gap: 15px;}
.chart-label { width: 130px; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 6px;}
.chart-bar-wrap { flex: 1; background: var(--input-bg); height: 12px; border-radius: 6px; overflow: hidden; position: relative;}
.chart-bar { height: 100%; width: 0%; border-radius: 6px; transition: width 1.2s var(--easing);}
.chart-price { min-width: 90px; text-align: right; font-weight: 800; font-size: 1rem; line-height: 1.2; } 

.vip-discount-container { display: flex; gap: 20px; margin: 25px 0; animation: popIn 0.5s var(--easing); flex-wrap: wrap;}
.discount-item { flex: 1; padding: 25px; border-radius: 20px; border: 1px solid var(--border-glass); background: var(--bg-surface); text-align: left; transition: 0.3s; position: relative; overflow: hidden; box-shadow: var(--shadow-soft);}
.discount-item.web { border-left: 4px solid var(--info); }
.discount-item.vip { 
    background: linear-gradient(135deg, #DFB943 0%, #B8922C 100%);
    border: 1px solid rgba(255,255,255,0.2); 
    color: #FFFFFF; 
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3); 
    transform: scale(1.02); 
    z-index: 2;
}
.discount-item.vip::after { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent); transform: skewX(-25deg); animation: shimmer 3s infinite; pointer-events: none; }
.discount-item.vip .vip-tag { color: #FFFFFF; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; opacity: 0.95; }
.discount-item.web strong { font-size: 2rem; font-weight: 800; line-height: 1; display: block; margin-top: 8px; color: var(--text-main); }
.discount-item.vip strong { font-size: 2.2rem; font-weight: 800; line-height: 1; display: block; margin-top: 8px; color: #FFF; text-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.discount-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.discount-item.vip .discount-label { color: rgba(255,255,255,0.9); }

.bar-taxi { background: linear-gradient(90deg, var(--gold-primary), #FFF); box-shadow: 0 0 15px var(--gold-glow); }
.bar-cabify { background: #7A3BDE; }
.bar-freenow { background: #E93330; }
.bar-uber { background: #111111; }
@media (prefers-color-scheme: dark) { .bar-uber { background: #333333; } }

.tariff-info { background: rgba(212,175,55,0.05); border-left: 3px solid var(--gold-primary); padding: 15px; border-radius: 0 10px 10px 0; margin-top: 20px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; transition: 0.4s var(--easing); }
.time-btn { padding: 12px; border: 2px solid var(--border-glass); background: var(--input-bg); border-radius: 14px; cursor: pointer; font-weight: 800; font-size: 1rem; color: var(--text-main); transition: 0.3s var(--easing); opacity: 0; animation: popInCard 0.3s var(--easing) forwards; transform: translateZ(0); }
.time-btn:not(:disabled):hover { border-color: var(--gold-primary); background: var(--bg-surface); transform: translateY(-2px); box-shadow: 0 8px 15px var(--gold-glow);}
.time-btn.selected { background: var(--gold-primary); border-color: var(--gold-primary); color: #000; transform: scale(1.05); z-index: 10; animation: none; opacity: 1; box-shadow: 0 10px 20px var(--gold-glow);}
.time-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; background: rgba(0,0,0,0.05) !important; color: var(--text-muted) !important; border-color: transparent !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); }

.flow-connector { width: 2px; height: 30px; background: var(--gold-primary); margin: 0 auto 15px auto; border-radius: 2px; opacity: 0.5;}
.driver-track { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 15px 10px; animation: popIn 0.5s var(--easing);}
.driver-card { width: 100%; max-width: 380px; background: var(--input-bg); border: 2px solid var(--gold-primary); border-radius: 20px; padding: 25px 20px; text-align: center; transition: 0.3s var(--easing); box-shadow: 0 15px 30px var(--gold-glow); }
@keyframes popInCard { to { opacity: 1; transform: translateY(0); } }
.driver-avatar { width: 75px; height: 75px; border-radius: 50%; background: var(--bg-surface); margin: 0 auto 15px auto; border: 2px solid var(--gold-primary); display: flex; align-items: center; justify-content: center; color: var(--gold-primary); transition: 0.3s; font-weight: 800; font-size: 1.3rem; box-shadow: 0 8px 15px var(--gold-glow);}
.driver-name { font-weight: 800; font-size: 1.3rem; margin-bottom: 5px; color: var(--text-main);}
.feature-icons { display: flex; justify-content: center; gap: 12px; margin: 15px 0; }
.feature-icons svg { width: 22px; height: 22px; fill: var(--gold-primary); transition: 0.3s; }

.no-time-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--border-glass); padding: 14px 22px; border-radius: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.3s; font-size: 0.9rem; width: 100%; text-transform: uppercase;}
.no-time-btn:hover { border-color: var(--transfer); color: var(--transfer); background: rgba(139, 92, 246, 0.05); transform: translateY(-2px); }

.driver-actions { display: flex; gap: 10px; margin-top: 15px; justify-content: center; }
.btn-inspect { background: var(--text-main); color: var(--gold-primary); border: none; border-radius: 50px; padding: 12px 24px; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: 0.3s var(--easing); display: flex; align-items: center; gap: 8px; }
.btn-inspect:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 20px var(--gold-glow); background: var(--gold-primary); color: #000; }

.terms-container { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; padding: 15px; background: var(--input-bg); border-radius: 14px; border: 1px solid var(--border-glass); transition: 0.3s; cursor: pointer; }
.terms-container:hover { border-color: var(--gold-primary); background: var(--bg-surface); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.custom-checkbox { width: 24px; height: 24px; border: 2px solid var(--text-muted); border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--easing); flex-shrink: 0; margin-top: 2px;}
.custom-checkbox svg { width: 12px; height: 12px; fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: 0.3s ease-in-out; }
input[type="checkbox"] { display: none; }
input[type="checkbox"]:checked + .custom-checkbox { background: var(--gold-primary); border-color: var(--gold-primary); transform: scale(1.1); box-shadow: 0 5px 15px var(--gold-glow); }
input[type="checkbox"]:checked + .custom-checkbox svg { stroke-dashoffset: 0; }
.terms-container label { margin: 0; font-size: 0.9rem; color: var(--text-main); font-weight: 500; cursor: pointer; text-transform: none; display: flex; align-items: center; gap: 8px; flex: 1; line-height: 1.4;}
.terms-container a { color: var(--gold-primary); font-weight: 700; text-decoration: none; transition: 0.3s;}
.terms-container a:hover { text-decoration: underline; color: var(--text-main); }

.vip-success-box { background: rgba(212, 175, 55, 0.05); border: 1px dashed var(--gold-primary); padding: 25px; border-radius: 16px; margin: 25px 0; display: none; animation: popIn 0.4s var(--easing); }
.vip-code-display { font-size: 2rem; font-weight: 800; color: var(--gold-primary); letter-spacing: 3px; display: block; margin: 15px 0; }
.btn-copy { background: var(--text-main); color: var(--gold-primary); border: none; padding: 14px 28px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px;}
.btn-copy:hover { transform: translateY(-2px); box-shadow: 0 8px 15px var(--shadow-soft); background: var(--gold-primary); color: #000;}

.captcha-container { display: flex; justify-content: center; margin-bottom: 25px; max-width: 100%; overflow: hidden; transform: scale(0.95); transform-origin: center; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 99999; opacity: 0; visibility: hidden; transition: 0.4s var(--easing); padding: 15px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background: var(--bg-surface); padding: 2.5rem 2rem; border-radius: 24px; width: 100%; max-width: 500px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform: scale(0.95) translateY(20px); transition: 0.4s var(--easing); border: 1px solid rgba(255,255,255,0.08); max-height: 90vh; overflow-y: auto; scrollbar-width: none;}
.modal-content::-webkit-scrollbar { display: none; }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }

.contact-links-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.btn-contact-action { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 12px; font-weight: 800; text-decoration: none; transition: 0.3s var(--easing); font-size: 0.95rem; border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-contact-call { background: var(--bg-surface); color: var(--text-main); border-color: var(--gold-primary); }
.btn-contact-call:hover { background: var(--gold-glow); transform: translateY(-2px); }
.btn-contact-wa { background: #25D366; color: #FFF; }
.btn-contact-wa:hover { background: #1EBE5C; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(37, 211, 102, 0.3); }
.btn-contact-mail { background: transparent; color: var(--text-muted); border-color: var(--border-glass); }
.btn-contact-mail:hover { background: var(--input-bg); color: var(--text-main); transform: translateY(-2px);}

.static-car-viewer { width: 100%; height: 260px; border-radius: 20px; margin-bottom: 20px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.05); background: radial-gradient(circle at center, #2A2D34 0%, #0F1115 100%); display: flex; align-items: center; justify-content: center;}
.static-car-viewer img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transform: scale(1.02); transition: 10s ease-out;}
.static-car-viewer:hover img { transform: scale(1.1); }
.specs-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;}
.specs-list li { background: var(--input-bg); padding: 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; border: 1px solid var(--border-glass); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;}
.specs-list li span { color: var(--text-main); font-size: 1rem; font-weight: 800;}

.site-footer { background: #020305; border-top: 1px solid rgba(255,255,255,0.05); padding: 4rem 1.5rem 2rem; margin-top: 4rem; }
.footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem;}
.footer-brand h3 { color: var(--gold-primary); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px;}
.footer-brand p { color: #94A3B8; font-size: 0.9rem; max-width: 300px; line-height: 1.6;}
.footer-col h4 { color: #FFFFFF; font-size: 1.05rem; margin-bottom: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: #94A3B8; text-decoration: none; transition: 0.3s; font-size: 0.9rem; font-weight: 500;}
.footer-col ul li a:hover { color: var(--gold-primary); padding-left: 5px; }
.legal-banner { max-width: 1200px; margin: 0 auto 3rem auto; padding: 20px; background: rgba(255,255,255,0.03); border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: flex-start; gap: 15px; font-size: 0.8rem; color: #94A3B8; line-height: 1.6;}
.legal-banner svg { width: 30px; height: 30px; fill: #94A3B8; flex-shrink: 0;}
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; color: #94A3B8; font-size: 0.85rem; align-items: center; flex-wrap: wrap; gap: 15px;}
.footer-bottom-links { display: flex; gap: 15px; font-weight: 500;}
.footer-bottom-links a { color: #94A3B8; text-decoration: none; transition: 0.3s; cursor: pointer;}
.footer-bottom-links a:hover { color: #FFFFFF; }

/* BANNERS PWA E iOS POPUP */
.pwa-banner, .ios-install-popup { 
    position: fixed; left: 50%; background: var(--bg-surface); border: 1px solid var(--gold-primary); padding: 15px 22px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); z-index: 99999; display: flex; align-items: center; gap: 15px; width: 92%; max-width: 400px; transform: translate(-50%, 150%); opacity: 0; visibility: hidden; transition: all 0.5s var(--easing); 
}
.pwa-banner { bottom: 20px; }
.ios-install-popup { bottom: 20px; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; text-align: center;}
.pwa-banner.show, .ios-install-popup.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.ios-instructions { background: var(--input-bg); padding: 18px; border-radius: 14px; font-size: 0.9rem; text-align: left; color: var(--text-main); font-weight: 500; line-height: 1.6; border: 1px solid var(--border-glass);}
.ios-instructions ol { padding-left: 20px; margin: 10px 0 0 0; }
.ios-instructions li { margin-bottom: 12px; }
.icon-inline { width: 18px; height: 18px; vertical-align: middle; margin: 0 4px; fill: var(--text-main); }

.textual-modal-body { padding-right: 10px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; text-align: left; }
.textual-modal-body h4 { color: var(--text-main); margin: 20px 0 10px 0; font-size: 1.1rem; font-weight: 800; text-transform: uppercase;}
.textual-modal-body p { margin-bottom: 15px; }
.textual-modal-body ul { padding-left: 20px; margin-bottom: 15px; }
.textual-modal-body li { margin-bottom: 8px; }

.cookie-banner { position: fixed; bottom: -100%; left: 0; width: 100%; background: var(--bg-surface); border-top: 2px solid var(--gold-primary); box-shadow: 0 -10px 40px rgba(0,0,0,0.2); z-index: 99998; padding: 20px 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: 0.5s var(--easing); flex-wrap: wrap;}
.cookie-banner.show { bottom: 0; }
.cookie-text { flex: 1; min-width: 250px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;}
.cookie-text strong { color: var(--text-main); font-size: 1rem; display: block; margin-bottom: 5px; font-weight: 800;}
.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-cookie-accept { background: var(--gold-primary); color: #000; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 800; cursor: pointer; transition: 0.3s; font-size: 0.9rem;}
.btn-cookie-accept:hover { transform: translateY(-2px); box-shadow: 0 5px 15px var(--gold-glow); }
.btn-cookie-config { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-glass); padding: 10px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 0.9rem;}
.btn-cookie-config:hover { background: var(--bg-surface); border-color: var(--gold-primary); transform: translateY(-2px); }

.cookie-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: var(--input-bg); border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--border-glass);}
.cookie-toggle-info strong { display: block; color: var(--text-main); font-size: 0.95rem; margin-bottom: 4px; font-weight: 700;}
.cookie-toggle-info p { font-size: 0.85rem; color: var(--text-muted); margin: 0; max-width: 250px;}

.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-muted); transition: .4s; border-radius: 34px; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s var(--easing); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
input:checked + .toggle-slider { background-color: var(--success); }
input:disabled + .toggle-slider { background-color: var(--border-glass); cursor: not-allowed; opacity: 0.5;}
input:checked + .toggle-slider:before { transform: translateX(22px); }

@keyframes popIn { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideUpFade { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* ======================================================== */
/* GOD TIER FINAL: ULTRA-GLASSMORPHISM & EQUILIBRIO VISUAL  */
/* ======================================================== */

.vip-body-ambient { background-color: var(--bg-base); position: relative; overflow-x: hidden; }

/* Orbes Flotantes (Suaves y Elegantes) */
.vip-ambient-orb { position: fixed; border-radius: 50%; filter: blur(120px); z-index: 0; pointer-events: none; animation: orbFloat 25s infinite ease-in-out alternate; opacity: 0.6; mix-blend-mode: screen;}
@media (prefers-color-scheme: light) { .vip-ambient-orb { mix-blend-mode: normal; opacity: 0.4; filter: blur(100px); } }
.orb-1 { width: 40vw; height: 40vw; background: rgba(212, 175, 55, 0.15); top: -10%; left: -10%; } 
.orb-2 { width: 45vw; height: 45vw; background: rgba(59, 130, 246, 0.12); bottom: -10%; right: -10%; animation-delay: -5s; } 
.orb-3 { width: 30vw; height: 30vw; background: rgba(139, 92, 246, 0.08); top: 30%; left: 40%; transform: translate(-50%, -50%); animation-delay: -10s; } 
@keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, 4vh) scale(1.05); } 100% { transform: translate(-4vw, -4vh) scale(0.95); } }

/* Paneles de Cristal Realistas y Ultra Redondeados */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.12); 
    border-left: 1px solid rgba(255, 255, 255, 0.12); 
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), inset 0 0 10px rgba(255,255,255,0.01);
    border-radius: 28px;
}
@media (prefers-color-scheme: light) {
    .glass-panel {
        background: rgba(255, 255, 255, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 20px 50px rgba(0,0,0,0.05), inset 0 0 15px rgba(255,255,255,0.4);
    }
}

.vip-top-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 75px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 5%;
    z-index: 9000; border-radius: 0; border-top: none; border-left: none; border-right: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.btn-back-web { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: 0.3s;}
.btn-back-web:hover { color: var(--gold-primary); text-shadow: 0 0 10px var(--gold-glow); }
.btn-back-web svg { width: 20px; height: 20px; fill: currentColor; }
.vip-top-brand { font-weight: 800; font-size: 1.1rem; letter-spacing: 1.5px; }

.vip-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 2rem 2rem 2rem; position: relative; z-index: 2; width: 100%; box-sizing: border-box; }

.vip-auth-panel, .vip-dash-panel { position: relative; width: 100%; overflow: hidden; transition: transform 0.4s var(--easing), box-shadow 0.4s var(--easing); }
.vip-auth-panel { max-width: 460px; padding: 3.5rem 3rem; }
.vip-dash-panel { max-width: 950px; padding: 3.5rem 3rem; }

.vip-auth-panel::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-primary), transparent); animation: vipScanner 3s infinite linear; opacity: 0.7;}
@keyframes vipScanner { 100% { left: 200%; } }

.vip-panel-header { text-align: center; margin-bottom: 2.5rem; }
.icon-glow-wrapper { width: 75px; height: 75px; border-radius: 50%; background: rgba(212, 175, 55, 0.05); border: 1px solid rgba(212, 175, 55, 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.1); animation: pulseFloat 4s ease-in-out infinite alternate;}
@keyframes pulseFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.15), 0 5px 15px rgba(212, 175, 55, 0.1); } }
.icon-glow-wrapper svg { width: 36px; height: 36px; fill: var(--gold-primary); filter: drop-shadow(0 0 3px var(--gold-primary)); }
.vip-panel-header h2 { color: var(--text-main); font-weight: 800; font-size: 2rem; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; margin-bottom: 5px;}
.vip-panel-header p { color: var(--text-muted); font-size: 1rem; margin: 0; font-weight: 500;}

.input-glass-vip { width: 100%; text-align: center; font-size: 1.4rem; letter-spacing: 3px; text-transform: uppercase; padding: 20px; background: rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.1); color: var(--text-main); font-weight: 800; border-radius: 16px; outline: none; transition: 0.3s; box-shadow: inset 0 2px 8px rgba(0,0,0,0.15); }
@media (prefers-color-scheme: light) { .input-glass-vip { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.05); box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); } }
.input-glass-vip:focus { border-color: var(--gold-primary); background: rgba(212, 175, 55, 0.05); box-shadow: 0 0 20px rgba(212, 175, 55, 0.15), inset 0 2px 5px rgba(0,0,0,0.1); transform: translateY(-1px);}

.vip-link-bottom { text-align: center; margin-top: 1.8rem; }
.vip-link-bottom a { color: var(--gold-primary); font-size: 0.95rem; font-weight: 700; text-decoration: none; position: relative;}
.vip-link-bottom a::after { content:''; position:absolute; bottom:-3px; left:0; width:100%; height:1px; background:var(--gold-primary); transform:scaleX(0); transition:0.3s; }
.vip-link-bottom a:hover::after { transform:scaleX(1); }

.vip-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 25px;}
@media (prefers-color-scheme: light) { .vip-dash-header { border-bottom: 1px solid rgba(0,0,0,0.05); } }
.dash-welcome h2 { color: var(--text-main); font-weight: 800; font-size: 2.2rem; text-transform: uppercase; line-height: 1.1; margin-bottom: 8px;}
.dash-welcome h2 span { color: var(--gold-primary); }
.dash-welcome p { color: var(--text-muted); font-size: 1rem; margin: 0; display:flex; align-items:center; gap:10px; font-weight: 500;}
.glass-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 50px; color: var(--text-main); letter-spacing: 2px; font-weight: 700;}
@media (prefers-color-scheme: light) { .glass-tag { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.05); } }

/* BOTÓN DE SALIR CRISTAL ROJO */
.btn-glass-logout { background: rgba(239, 68, 68, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(239, 68, 68, 0.25); color: var(--danger); padding: 12px 22px; border-radius: 50px; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s var(--easing); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.08); outline: none;}
.btn-glass-logout svg { width: 18px; height: 18px; fill: currentColor; }
.btn-glass-logout:hover { background: rgba(239, 68, 68, 0.1); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); transform: translateY(-2px); color: var(--danger);}

.vault-box { text-align: center; padding: 50px 20px; margin-bottom: 3.5rem; position: relative; overflow: hidden; border-radius: 28px;}
.vault-inner-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; background: var(--gold-primary); filter: blur(70px); opacity: 0.15; border-radius: 50%; z-index: 0; animation: vaultBreath 4s ease-in-out infinite alternate;}
@keyframes vaultBreath { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.25; } }
.vault-label, .vault-balance, .vault-desc { position: relative; z-index: 1; }
.vault-label { color: var(--text-main); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; font-size: 1.05rem; opacity: 0.9;}
.vault-balance { font-size: clamp(4rem, 8vw, 5.5rem); font-weight: 800; color: var(--gold-primary); line-height: 1; text-shadow: 0 0 25px var(--gold-glow); font-variant-numeric: tabular-nums; letter-spacing: -2px;}
.vault-desc { color: var(--text-muted); font-size: 1rem; margin: 20px auto 0 auto; max-width: 550px; line-height: 1.6; font-weight: 400;}

.trips-section { position: relative; z-index: 2; }
.glass-title { color: var(--text-main); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.5px;}
.glass-title svg { width: 28px; height: 28px; fill: var(--gold-primary); opacity: 0.9;}
.trips-container-grid { display: flex; flex-direction: column; gap: 18px; }

/* Tarjetas de Viaje de Cristal EQUILIBRADAS */
.trip-card-glass { padding: 25px; border-radius: 24px !important; display: flex; flex-direction: column; gap: 15px; cursor: default; transition: 0.4s var(--easing); background: rgba(255,255,255,0.02) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;}
@media (prefers-color-scheme: light) { .trip-card-glass { background: rgba(255,255,255,0.8) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.03) !important;} }
.trip-card-glass:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; }
.trip-card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; margin-bottom: 5px; }
@media (prefers-color-scheme: light) { .trip-card-header { border-bottom: 1px solid rgba(0,0,0,0.05); } }
.trip-date { font-weight: 800; font-size: 1.05rem; color: var(--gold-primary); }
.trip-date span { color: var(--text-main); margin-left: 8px; font-weight: 600; opacity: 0.8;}
.trip-status { padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; border: 1px solid transparent; letter-spacing: 0.5px;}
.trip-card-body { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; }
.trip-point { display: flex; align-items: flex-start; gap: 15px; position: relative; z-index: 2;}
.trip-point-icon { width: 14px; height: 14px; border-radius: 50%; margin-top: 5px; position: relative; z-index: 2;}
.trip-point-icon.origin { border: 3px solid var(--text-muted); background: var(--bg-base); }
.trip-point-icon.dest { background: var(--gold-primary); box-shadow: 0 0 10px var(--gold-glow); }
.trip-point span { font-size: 1rem; color: var(--text-main); font-weight: 500; }
.trip-point strong { font-size: 1rem; color: var(--text-main); font-weight: 800; }
.trip-point.line::before { content: ''; position: absolute; left: 6px; top: -24px; bottom: 16px; width: 2px; background: linear-gradient(to bottom, rgba(255,255,255,0.08), var(--gold-primary)); z-index: 1;}
@media (prefers-color-scheme: light) { .trip-point.line::before { background: linear-gradient(to bottom, rgba(0,0,0,0.08), var(--gold-primary)); } }

/* Spinner VIP */
.loader-vip { text-align: center; padding: 40px 20px; }
.spinner-glass { width: 50px; height: 50px; margin: 0 auto 20px auto; border-radius: 50%; border: 3px solid rgba(212, 175, 55, 0.1); border-top-color: var(--gold-primary); animation: spin 1s infinite cubic-bezier(0.6, 0.2, 0.4, 0.8); }
.loader-vip p { color: var(--text-muted); font-weight: 600; font-size: 1rem; }

/* ========================================= */
/* OPTIMIZACIÓN EXTREMA MÓVIL (INMERSIVA)    */
/* ========================================= */
@media screen and (max-width: 768px) {
    /* Reglas generales index.html */
    .header-text-desktop { display: none; }
    .btn-header-login, .btn-header-account { padding: 10px 16px; font-size: 0.8rem; border-width: 1px;}
    .container { width: 95%; padding: 2.5rem 1.2rem; margin: 2rem auto; border-radius: 20px; }
    
    .hero-screen { padding-top: 110px; }
    .hero-screen h1 { font-size: 2.8rem; line-height: 1.1; margin-bottom: 10px;}
    .hero-actions { flex-direction: column; width: 100%; max-width: 100%; margin: 0 auto 2.5rem auto; align-items: stretch;}
    .btn-hero-primary, .btn-hero-secondary, .btn-hero-outline { width: 100%; font-size: 1rem; padding: 18px 20px; }
    .trust-badges-inline { flex-direction: column; align-items: stretch; gap: 10px; opacity: 0.85; }
    .trust-badge-item { justify-content: center; padding: 12px; font-size: 0.8rem; }

    .info-grid { grid-template-columns: 1fr; gap: 20px; }
    .calc-grid { grid-template-columns: 1fr; gap: 15px; }
    .route-card { padding: 25px 15px; border-radius: 16px;}
    .route-wrapper { padding-left: 45px; }
    .route-icon { left: -45px; width: 36px; height: 36px; }
    .route-icon svg { width: 16px; height: 16px; }
    .route-track { left: 17px; top: 42px; bottom: 42px;}
    .glass-card { padding: 25px 18px; border-radius: 16px;}
    .vip-highlight-box { padding: 30px 20px; border-radius: 20px;}
    
    .chart-area { padding: 20px 15px; }
    .chart-row { flex-wrap: wrap; gap: 8px; margin-bottom: 25px;}
    .chart-label { width: 100%; font-size: 0.95rem; }
    .chart-bar-wrap { height: 16px; width: 100%; }
    .chart-price { text-align: left; font-size: 1.1rem; width: 100%; margin-top: 5px; }
    
    .vip-discount-container { flex-direction: column; gap: 15px; }

    .vip-input-group { flex-direction: column; align-items: stretch; gap: 10px;}
    .vip-input-group input { width: 100%; padding: 20px; font-size: 1.3rem; margin: 0; min-height: 60px; border: 2px solid var(--gold-primary); background: var(--bg-surface);}
    .btn-vip-apply { width: 100%; padding: 20px; min-height: 60px; font-size: 1rem;}
    
    .footer-container { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
    .footer-brand h3 { justify-content: center; width: 100%; }
    .footer-brand p { margin: 0 auto; text-align: center; }
    .footer-bottom { flex-direction: column; text-align: center; justify-content: center; gap: 15px;}
    .footer-bottom-links { justify-content: center; flex-wrap: wrap;}
    .cookie-buttons { width: 100%; flex-direction: column; }
    .btn-cookie-accept, .btn-cookie-config { width: 100%; text-align: center; }

    /* Reglas Ultra-Glassmorphism Móvil */
    .vip-wrapper { padding: 90px 10px 20px 10px; display: block; box-sizing: border-box; }
    
    .vip-auth-panel { padding: 2.5rem 1.5rem; border-radius: 24px; margin: 2vh auto; border-width: 1px;}
    .input-glass-vip { font-size: 1.2rem; padding: 18px; }
    
    .vip-dash-panel { padding: 2.5rem 1.2rem; border-radius: 24px; margin: 0 auto; }
    .vip-dash-header { flex-direction: column; align-items: flex-start; padding-bottom: 20px;}
    
    .btn-glass-logout { width: 100%; justify-content: center; padding: 15px !important; font-size: 0.95rem !important;}

    .vault-box { padding: 35px 15px; border-radius: 20px; margin-bottom: 2rem; }
    .vault-balance { font-size: 3.5rem !important; }
    
    .trip-card-glass { padding: 20px 15px; border-radius: 20px !important; }
    
    /* Orbes adaptados para no saturar el móvil pero seguir siendo vivos */
    .orb-1 { width: 60vw; height: 60vw; top: -5%; left: -20%; filter: blur(60px); }
    .orb-2 { width: 70vw; height: 70vw; bottom: -5%; right: -20%; filter: blur(70px); }
    .orb-3 { width: 40vw; height: 40vw; top: 50%; left: 50%; filter: blur(50px); }
}

/* =========================================
   PANEL VIP MEJORADO Y LEGAL UNIFICADO
   ========================================= */

.vip-upgrade-box {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.01) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.05);
    transition: all 0.4s var(--easing);
    position: relative;
    overflow: hidden;
}

/* Destello superior */
.vip-upgrade-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.vip-upgrade-box:hover {
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-3px);
}

.vip-upgrade-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.vip-icon-glow {
    width: 45px;
    height: 45px;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.2);
}

.vip-crown-icon {
    width: 26px;
    height: 26px;
    fill: var(--gold-primary);
    filter: drop-shadow(0 0 5px var(--gold-primary));
    animation: floatCrown 3s ease-in-out infinite;
}

@keyframes floatCrown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.vip-upgrade-texts h4 {
    margin: 0 0 4px 0;
    color: var(--gold-primary);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.vip-upgrade-texts p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 500;
}

.vip-upgrade-body {
    border-top: 1px dashed rgba(212, 175, 55, 0.3);
    padding-top: 18px;
}

/* Diseño Unificado Checkbox Legal */
.legal-unified-container {
    background: var(--bg-surface);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-glass);
    margin-bottom: 25px;
    box-shadow: var(--shadow-soft);
    transition: 0.3s;
}

.legal-unified-container:hover {
    border-color: var(--gold-primary);
}

.legal-unified-container a {
    color: var(--gold-primary);
    font-weight: 800;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
}

.legal-unified-container a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; width: 100%; height: 1px;
    background: var(--gold-primary);
    opacity: 0.5;
}

.legal-unified-container a:hover {
    color: var(--text-main);
}

/* =========================================
   SPINNER Y ANIMACIONES DE CARGA CHAT VIP
   ========================================= */

.waiting-driver-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: popIn 0.5s var(--easing);
    padding: 20px;
}

.spinner-glass {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    border: 4px solid rgba(212, 175, 55, 0.1);
    border-top-color: var(--gold-primary);
    animation: spin 1s infinite cubic-bezier(0.6, 0.2, 0.4, 0.8);
}

/* Blindaje CSS para que las horas ocupadas no desaparezcan */
.time-grid .occupied-selectable {
    padding: 12px 5px !important;
    border-radius: 10px !important;
    border: 2px solid var(--warning) !important;
    color: var(--warning) !important;
    background: transparent !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    width: 100% !important;
    font-family: 'Outfit', sans-serif !important;
    animation: popIn 0.3s ease-out !important;
    opacity: 1 !important;
    display: block !important;
}

.time-grid .occupied-selectable.selected {
    background: var(--warning) !important;
    color: #000000 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3) !important;
}

/* =========================================
   MAPA Y COTIZADOR ULTRA-PREMIUM (Desktop & Móvil)
   ========================================= */

/* Contenedor del Mapa */
.map-premium-wrapper {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    margin: 25px 0;
    border: 2px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), inset 0 0 20px rgba(212,175,55,0.05);
    transition: all 0.4s var(--easing);
    background: var(--input-bg);
}
.map-premium-wrapper:hover {
    border-color: var(--gold-primary);
    box-shadow: 0 25px 50px rgba(212, 175, 55, 0.2);
}

/* El mapa en sí */
#map {
    width: 100%;
    height: 450px; /* Tamaño mucho más cómodo en ordenador */
    display: block;
    border: none;
    box-shadow: none;
    margin: 0;
}

/* Tarjeta de Precio Rediseñada */
.price-card {
    background: linear-gradient(145deg, var(--bg-surface) 0%, var(--input-bg) 100%);
    border: 1px solid var(--gold-primary);
    border-radius: 24px;
    padding: 25px 30px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.15);
    transition: 0.4s var(--easing);
    position: relative;
    overflow: hidden;
}

/* Destello en la tarjeta de precio */
.price-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    animation: vipScanner 4s infinite linear;
}

.price-details-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 1px dashed var(--border-glass);
    padding-bottom: 20px;
}

.route-stats {
    display: flex;
    gap: 25px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.stat-badge {
    background: rgba(212, 175, 55, 0.05);
    color: var(--text-main);
    padding: 15px 25px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    flex: 1;
    max-width: 160px;
}
.stat-badge svg { width: 26px; height: 26px; fill: var(--gold-primary); margin: 0; }

.price-total-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: popIn 0.5s var(--easing);
}

.tariff-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-total-premium .amount {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--gold-primary);
    line-height: 1;
    text-shadow: 0 0 25px var(--gold-glow);
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
}

.time-warning-msg {
    background: rgba(212, 175, 55, 0.1);
    border-left: 4px solid var(--gold-primary);
    padding: 16px 20px;
    border-radius: 12px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: popIn 0.4s var(--easing);
    line-height: 1.5;
}
.time-warning-msg svg { width: 28px; height: 28px; fill: var(--gold-primary); flex-shrink: 0; }

/* Optimización Extrema Móvil para el Mapa */
@media screen and (max-width: 768px) {
    #map { height: 350px; } /* Tamaño perfecto para interactuar con los dedos */
    .price-card { padding: 25px 20px; }
    .price-total-premium { flex-direction: column; align-items: flex-start; gap: 10px; }
    .price-total-premium .amount { font-size: 3.5rem; align-self: flex-end; }
    .stat-badge { flex: 1; justify-content: center; font-size: 0.95rem; }
}

/* ==========================================================================
   INTERFAZ DE AUTOCOMPLETADO GOOGLE PLACES (DISEÑO CORPORATIVO ULTRA-VIP)
   ========================================================================== */

/* Contenedor flotante del dropdown */
.pac-container {
    background: rgba(15, 21, 32, 0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(212, 175, 55, 0.05) !important;
    font-family: 'Outfit', sans-serif !important;
    margin-top: 8px !important;
    z-index: 999999 !important;
    padding: 8px 0 !important;
}

/* Forzar modo claro si la app se visualiza en entorno claro */
@media (prefers-color-scheme: light) {
    :root:not(.dark) .pac-container {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
    }
}

/* Cada una de las filas/tarjetas de dirección */
.pac-item {
    padding: 14px 22px !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.08) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s var(--easing) !important;
    background: transparent !important;
}

.pac-item:first-child {
    border-top: none !important;
}

/* Efecto hover interactivo VIP */
.pac-item:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, transparent 100%) !important;
    padding-left: 28px !important; /* Desplazamiento fluido premium */
}

/* Eliminar el icono de mapa gris genérico de Google */
.pac-icon {
    display: none !important;
}

/* Texto principal de la calle */
.pac-item-query {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    padding-right: 6px !important;
}

/* Texto que coincide con lo que el usuario está escribiendo (Resaltado Dorado) */
.pac-matched {
    color: var(--gold-primary) !important;
    font-weight: 800 !important;
}

/* Añadir un indicador flecha VIP al hacer hover en la sugerencia */
.pac-item::after {
    content: '→';
    margin-left: auto;
    color: var(--gold-primary);
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s var(--easing);
    font-weight: 700;
}
.pac-item:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================================
   RE-ARQUITECTURA DE MÁRGENES, ESPACIOS Y RENDER DE DINERO 
   ========================================================================== */

/* Corrección de márgenes: Separación limpia desde el bloque superior */
.price-card {
    margin-top: 45px !important; /* Genera el espacio perfecto que faltaba */
    margin-bottom: 35px !important;
    padding: 35px 40px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255,255,255,0.05) !important;
}

/* Cuadro de aviso cuando falta seleccionar la hora (Más Premium) */
.time-warning-msg {
    margin-top: 10px !important;
    padding: 22px 26px !important;
    border-radius: 18px !important;
    background: rgba(212, 175, 55, 0.05) !important;
    border: 1px dashed rgba(212, 175, 55, 0.35) !important;
    border-left: 5px solid var(--gold-primary) !important;
    gap: 18px !important;
}

.warning-icon-wrapper {
    background: rgba(212, 175, 55, 0.12);
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.warning-icon-wrapper svg { width: 24px; height: 24px; fill: var(--gold-primary); }

/* Contenedor del Dinero */
.price-total-premium {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0) 100%) !important;
    padding: 24px 30px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(212, 175, 55, 0.18) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.tariff-info-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tariff-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.tariff-name {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
}

/* El render del precio en pantalla gigante y nítido */
.amount-display-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.currency-symbol {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--gold-primary) !important;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

#precio-final {
    font-size: 4.2rem !important; /* Espectacular tamaño de impacto visual */
    font-weight: 900 !important;
    color: var(--gold-primary) !important;
    line-height: 1 !important;
    text-shadow: 0 0 35px rgba(212, 175, 55, 0.45), 0 0 70px rgba(212, 175, 55, 0.2) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -2px !important;
}

/* ==========================================================================
   OPTIMIZACIÓN EXTREMA MÓVIL (REDISEÑO CENTRADO, LIMPIO Y SIMÉTRICO)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Mapa más adaptable y estilizado */
    .map-premium-wrapper {
        margin: 15px 0 !important;
        border-radius: 18px !important;
    }
    #map { 
        height: 280px !important; /* Tamaño ideal para dejar ver el cotizador sin hacer scroll infinito */
    }

    /* Tarjeta de Precio: Más aire interno y bordes suaves */
    .price-card {
        margin-top: 20px !important;
        margin-bottom: 25px !important;
        padding: 25px 15px !important; 
        border-radius: 20px !important;
        gap: 15px !important;
    }

    /* Stats de ruta (Km y Min): Simetría perfecta 50/50 */
    .price-details-premium {
        padding-bottom: 15px !important;
    }
    .route-stats {
        gap: 10px !important;
        width: 100% !important;
    }
    .stat-badge {
        flex: 1 !important; /* Ocupan la mitad exacta cada uno */
        justify-content: center !important;
        padding: 12px !important;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }

    /* Aviso de Fecha y Hora: Centrado y más limpio */
    .time-warning-msg {
        padding: 20px 15px !important;
        gap: 12px !important;
        flex-direction: column !important; /* Icono arriba, texto abajo */
        text-align: center !important;
        border: none !important;
        background: rgba(212, 175, 55, 0.08) !important;
        border-bottom: 3px solid var(--gold-primary) !important; 
        border-radius: 16px !important;
    }

    /* Contenedor Final de Dinero: Alineación 100% Centrada */
    .price-total-premium {
        flex-direction: column !important;
        align-items: center !important; /* Centrado horizontal */
        text-align: center !important;
        padding: 20px 15px !important;
        gap: 8px !important;
    }

    .tariff-info-group {
        align-items: center !important; /* Texto de tarifa centrado */
    }

    .tariff-label {
        font-size: 0.75rem !important;
    }
    
    .tariff-name {
        font-size: 1rem !important;
    }

    .amount-display-wrapper {
        align-self: center !important; /* Dinero centrado, no a la derecha */
        margin-top: 5px !important;
    }

    /* Ajuste del tamaño de fuente del dinero para una legibilidad premium */
    #precio-final {
        font-size: 3.2rem !important; 
    }
    .currency-symbol {
        font-size: 1.5rem !important;
    }
    
    /* Buscador Predictivo (Google Places) abrazando el teclado en móvil */
    .pac-container {
        width: calc(100% - 40px) !important;
        left: 20px !important;
        border-radius: 16px !important; 
    }
}

/* =========================================
   UI DEL PRECIO FINAL Y DESCUENTOS
   ========================================= */
.price-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.price-original {
    font-size: 1.2rem;
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.6;
    font-weight: 500;
}

.price-final {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}

.discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--bg-surface);
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-soft);
}

.discount-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* =========================================
   SISTEMA DE ITINERARIO IRROMPIBLE
   ========================================= */
.route-wrapper-unbreakable {
    display: flex;
    gap: 15px;
    position: relative;
}
.route-timeline-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 33px; /* Centra el primer icono con el primer input */
    padding-bottom: 25px; /* Centra el segundo icono con el segundo input */
}
.route-icon-new {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
    z-index: 2;
}
.route-icon-new svg { width: 18px; height: 18px; fill: currentColor; }
.route-icon-new.end {
    background: var(--text-main);
    color: var(--gold-primary);
    border-color: var(--text-main);
}
.route-line-new {
    width: 2px;
    flex: 1; /* MAGIA: Se estira matemáticamente entre los dos círculos */
    background: rgba(212, 175, 55, 0.2);
    margin: 4px 0;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    z-index: 1;
}
.route-beam-new {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 35px;
    background: linear-gradient(to bottom, transparent, var(--gold-primary), transparent);
    animation: beamTravelNew 2s infinite ease-in-out;
}
@keyframes beamTravelNew {
    0% { top: -35px; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.route-inputs-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.btn-map-picker {
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold-primary);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.btn-map-picker:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-primary);
    transform: translateY(-2px);
}
.btn-map-picker:disabled {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border-color: var(--border-glass);
    cursor: not-allowed;
}
.btn-map-picker svg { width: 22px; height: 22px; fill: currentColor; }

@media screen and (max-width: 768px) {
    .route-timeline-col {
        padding-top: 30px;
        padding-bottom: 22px;
    }
    .btn-map-picker { width: 50px; height: 50px; border-radius: 12px; }
    .btn-map-picker svg { width: 18px; height: 18px; }
    .route-icon-new { width: 36px; height: 36px; }
    .route-icon-new svg { width: 16px; height: 16px; }
}

/* =========================================
   AJUSTE DE CARTERA VIP (CLARO / OSCURO)
   ========================================= */
/* Modo Claro: Dorado oscuro para máxima legibilidad sobre fondo blanco */
#walletBalanceDisplay {
    color: #B8860B !important; 
    text-shadow: 0 2px 10px rgba(184, 134, 11, 0.15) !important;
}

@media (prefers-color-scheme: dark) {
    /* Modo Oscuro: Dorado brillante original sobre fondo negro */
    #walletBalanceDisplay {
        color: var(--gold-primary) !important; 
        text-shadow: 0 0 25px var(--gold-glow) !important;
    }
}

/* =========================================
   ESTILOS RADIO BUTTONS - MODAL CANCELACIÓN
   ========================================= */
.cancel-radio-label { display: flex; align-items: center; padding: 16px 20px; border: 2px solid var(--border-glass); border-radius: 14px; margin-bottom: 12px; cursor: pointer; background: var(--input-bg); color: var(--text-main); font-weight: 700; transition: all 0.3s ease; }
.cancel-radio-label:hover { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.05); }
.cancel-radio-label input[type="radio"] { margin-right: 15px; width: 20px; height: 20px; accent-color: var(--danger); cursor: pointer; flex-shrink: 0;}
.cancel-radio-label:has(input:checked) { border-color: var(--danger); background: rgba(239, 68, 68, 0.08); }