/* === 1. VARIABLES Y GENERALES === */
        :root {
            --gps-blue-main: #891515;
            --gps-blue-action: #b70a0a;
            --gps-dark-bg: #0c1c2c;
            --gps-text-on-dark: #ffffff;
            --gps-text-muted: #1f1f1f;
        }
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: #333;
            background-color: #e3dede;
        }
        .navbar-header{background-color:transparent !important;}
        /* Navbar integrado (Transparente sobre el Hero) */
        .navbar-gps {
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparente */
            border: none;
            padding: 10px 0;
            position: absolute; /* Clave para que flote sobre el carrusel */
            width: 100%;
            z-index: 10;
            transition: background 0.5s;
        }

        .navbar-gps .nav-item a span{color:#fff !important;}

        /* Ajuste de altura del Hero */
        .gps-carousel .item {
            height: 85vh; /* 80% de la altura de la pantalla */
            min-height: 400px;
            background-size: cover;
            background-position: center top;
        }

        /* Capa oscura para legibilidad del texto */
        .carousel-overlay {
            background: rgba(15, 15, 15, 0.4);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .gps-hero-caption {
            color: white;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
        }

        .gps-hero-caption h1 {
            font-size: 56px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        /* Flechas del carrusel personalizadas */
        .carousel-control.left, .carousel-control.right {
            background-image: none !important; 
        }


        .gps-navbar {
            background: transparent;
            border: none;
            margin-bottom: 0;
            padding: 10px 0;
        }

        .gps-navbar .navbar-brand {
            font-size: 24px;
            font-weight: bold;
            color: #fff !important;
            padding-left: 0;
        }
        .gps-navbar .navbar-brand span { font-weight: 200; }

        .gps-navbar .nav > li > a {
            color: #fff !important;
            font-weight: 500;
            padding: 10px 15px;
        }

        .navbar-gps .toggle{padding: 0px !important;}

        /* Botón "Acceder a mi cuenta" con borde redondeado (imagen ref 3) */
        .btn-gps-account {
            border: 1px solid rgba(255,255,255,0.7);
            border-radius: 20px;
            background: transparent;
            color: #fff;
            transition: all 0.3s;
        }
        .btn-gps-account:hover {
            background: rgba(255,255,255,0.1);
            border-color: #fff;
        }


        /* Contenido del Hero (imagen ref 6) */
        .gps-hero-content {
            padding-top: 60px;
            text-align: center;
        }
        .gps-hero-content h1 {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .gps-hero-content .lead {
            font-size: 18px;
            opacity: 0.9;
        }
        /* === 3. SECCIÓN: ESPACIO BLANCO (Introducción, imagen ref 7) === */
        .gps-intro-section {
            padding: 40px 0;
            text-align: center;
            background-color: #ffffff;
        }
        .gps-intro-section h2 {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #1a1a1a;
        }
        .gps-intro-section p {
            max-width: 700px;
            margin: 0 auto;
            color: var(--gps-text-muted);
            font-size: 16px;
            line-height: 1.6;
        }

        /* === 4. SECCIÓN: PASOS (Icono-Titulo-Info, imagen ref 8) === */
        .gps-steps-section {
            padding: 60px 0;
            background: linear-gradient(#ffffff, #1f3245);
        }
        .gps-feature-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            transition: transform 0.3s;
        }
        .gps-feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }
        .gps-icon-container {
            font-size: 50px;
            color: var(--gps-blue-main);
            margin-bottom: 20px;
        }
        .gps-feature-card h3 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .gps-feature-card p {
            color: var(--gps-text-muted);
            font-size: 14px;
        }

        /* === 5. SECCIÓN: ALERTAS (Cuadros flotantes, imagen ref 9) === */
        .gps-alerts-section {
            padding: 80px 0;
            background: linear-gradient(#ffffff, #0c1c2c);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        .gps-alert-box {
            background: #fff;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            min-height: 170px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.03);
            border: 1px solid #f1f1f1;
        }
        .gps-alert-box .glyphicon {
            font-size: 22px;
            color: var(--gps-blue-main);
            margin-right: 10px;
        }
        .gps-alert-box h4 {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
        }
        .gps-alert-box p {
            color: var(--gps-text-muted);
            font-size: 13px;
            margin-top: 10px;
        }

        /* === 6. SECCIÓN: CIUDADES (Fondo Oscuro, imagen ref 10) === */
        .gps-cities-section {
            padding: 80px 0;
            background-color: #1d3146;
            color: var(--gps-text-on-dark);
            text-align: center;
        }
        .gps-city-tag {
            display: inline-block;
            background-color: rgba(255,255,255,0.08);
            color: var(--gps-text-on-dark);
            padding: 8px 18px;
            border-radius: 20px;
            margin: 8px;
            font-size: 13px;
            transition: all 0.3s;
        }
        .gps-city-tag:hover {
            background-color: rgba(255, 255, 255, 0.15);
            text-decoration: none;
            color: #ffffff;
        }

        .social{
            display: block; width: 40px; height: 40px; background-color: #b30000; color: #fff; border-radius: 50%; text-align: center; line-height: 40px; text-decoration: none; font-weight: bold; font-size: 16px;
        }

        .content-login{
            background-color: #050f1d; background-image: radial-gradient(circle at 50% 50%, #0a1a2f 0%, #050f1d 100%); min-height: 100vh; padding: 95px 20px; font-family: 'Segoe UI', Roboto, Arial, sans-serif;
        }
        .content-login .form{
            background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 45px rgba(0,0,0,0.2); overflow: hidden;
            color:#fff;
        }
        .content-login .form .title{
            background: rgba(255, 255, 255, 0.03); padding: 10px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .content-login .form .title h2{color: #ffffff; margin: 0; font-size: 24px; font-weight: bold; letter-spacing: 1px;}
        .content-login .form .title p{color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 5px;}
        .content-login .form .control-label{display: block; color: rgba(255,255,255,0.9); margin-bottom: 10px; font-size: 14px; font-weight: 500;}
        .content-login .form .form-control{height: 45px;width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #ffffff; font-size: 14px; outline: none;}
        .content-login .form .btn-search{background: #0a1a2f; border: none; padding: 0 20px; cursor: pointer; border-left: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 0px;margin-right: 0px;}
        .content-login .form .select2-container--krajee-bs3 .select2-selection{background-color:transparent !important;height: 45px;border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #ffffff; font-size: 14px; outline: none;}
        .content-login .form .select2-container--krajee-bs3 .select2-selection--single .select2-selection__rendered{color: rgba(255,255,255,0.9);font-size: 16px;}
        .content-login .form .select2-container--krajee-bs3 .select2-selection--single .select2-selection__arrow{border-left:0px;}
        .select2-dropdown{background-color: #050f1d !important;}
        .select2-container--krajee-bs3 .select2-dropdown{border:0px !important;}
        /*.select2-container--krajee-bs3 .select2-results__option[aria-selected]{background-color: #050f1d !important;color: rgba(255,255,255,0.9);}*/
        .select2-container--krajee-bs3 .select2-results__option {border-bottom: 0px !important;background-color: #050f1d !important;color: rgba(255,255,255,0.9);}


        .content-login .form .btn-info{background-color: #b30000; color: #ffffff; padding: 15px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(179, 0, 0, 0.4); text-transform: uppercase;}
}