/* ---------------------------------- */
        /* Variables y Colores */
        /* ---------------------------------- */
        :root {
            --morado: #5B2D90;
            --naranja: #FF7A18;
            --turquesa: #1ABCAB; /* Uso mínimo */
            --blanco: #FFFFFF;
            --sombra-suave: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }

        /* ---------------------------------- */
        /* Estilos Generales y Fondo */
        /* ---------------------------------- */
        body {
            background-color: var(--morado); /* Fondo principal morado */
            padding-top: 72px; /* Espacio para el header fijo */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
        
        .content-container {
            /* Contenedores de contenido blanco sobre el fondo morado */
            background-color: var(--blanco);
            box-shadow: var(--sombra-suave);
            border-radius: 0.5rem;
            margin-bottom: 2rem;
            padding: 2rem;
        }

        /* ---------------------------------- */
        /* Header Fijo y Transparente */
        /* ---------------------------------- */
        .navbar-custom {
            transition: background-color 0.3s ease-in-out;
            background-color: rgba(255, 255, 255, 0.9); /* Blanco semitransparente por defecto */
        }
        .navbar-scrolled {
            background-color: var(--blanco) !important; /* Blanco sólido al hacer scroll */
            box-shadow: var(--sombra-suave);
        }
        .navbar-brand, .nav-link {
            font-weight: 600;
            color: var(--morado) !important;
        }

        /* ---------------------------------- */
        /* Hero Banner */
        /* ---------------------------------- */
        .hero-banner {
            background-image: linear-gradient(rgba(91, 45, 144, 0.75), rgba(91, 45, 144, 0.75)), url('../img/hero.jpg');
            background-size: cover;
            background-position: center;
            height: 90vh;
            display: flex;
            align-items: center;
            color: var(--blanco);
            text-align: center;
            padding: 0;
        }
        .hero-content-box {
            background-color: rgba(255, 255, 255, 0.9); /* Contenedor blanco semitransparente */
            padding: 3rem;
            border-radius: 1rem;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
            color: var(--morado);
        }
        .hero-content-box h1 {
            font-weight: 800;
        }
        .hero-content-box .lead {
            font-weight: 500;
        }

        /* ---------------------------------- */
        /* Botones Naranja (CTA) y Acentos */
        /* ---------------------------------- */
        .btn-naranja {
            background-color: var(--naranja);
            border-color: var(--naranja);
            color: var(--blanco);
            font-weight: 600;
            transition: background-color 0.3s, transform 0.2s;
        }
        .btn-naranja:hover {
            background-color: #e56d15;
            border-color: #e56d15;
            color: var(--blanco);
            transform: translateY(-2px);
        }
        .text-turquesa {
            color: var(--turquesa) !important;
        }
        .bg-turquesa {
            background-color: var(--turquesa) !important;
        }

        /* ---------------------------------- */
        /* Sección Parallax */
        /* ---------------------------------- */
        .parallax-section {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/parallax.jpg');
            min-height: 400px;
            background-attachment: fixed; /* Clave del efecto Parallax */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--blanco);
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }
        /* Ajuste Parallax en móvil */
        @media (max-width: 768px) {
            .parallax-section {
                background-attachment: scroll;
            }
        }

        /* ---------------------------------- */
        /* FAQ - Acordeón */
        /* ---------------------------------- */
        .accordion-button:not(.collapsed) {
            color: var(--morado);
            background-color: #e6e0f2;
            border-bottom: 2px solid var(--naranja);
            box-shadow: none;
        }
        .accordion-button:focus {
            box-shadow: 0 0 0 0.25rem rgba(91, 45, 144, 0.25);
        }

        /* ---------------------------------- */
        /* Footer */
        /* ---------------------------------- */
        footer {
            background-color: #3f1f63; /* Morado más oscuro */
            color: rgba(255, 255, 255, 0.85);
        }

        /* === Definición de Colores (Asumiendo que tienes variables CSS) === */
:root {
    /* Agrega estas si no las tienes, usando códigos de ejemplo */
    --morado: #5e35b1;
    --naranja: #ff7a18;
    --turquesa: #00bcd4; 
    --blanco: #ffffff;
}

/* === FIX para el Botón Activo de Rastreo === */

/* Estilo por defecto del botón turquesa */
.btn-turquesa {
    background-color: var(--turquesa);
    color: var(--blanco);
    border: 1px solid var(--turquesa);
}

/* Estilo para el botón activo, con focus y hover. */
/* Usamos el color Naranja para un contraste total dentro de la sección Morada */
#trackingTabs .btn-turquesa.active, 
#trackingTabs .btn-turquesa:focus,
#trackingTabs .btn-turquesa:hover {
    /* ¡IMPORTANTE!: Usar !important para asegurar que sobrescribe Bootstrap */
    background-color: var(--naranja) !important; 
    border-color: var(--naranja) !important;
    color: var(--blanco) !important; /* Texto blanco sobre naranja */
    box-shadow: 0 0 0 0.25rem rgba(255, 122, 24, 0.5) !important; /* Sombra de foco naranja */
}


@media (max-width: 768px) {
    
    body, .container, .row {
        overflow-x: hidden !important;
    }
    
}