/* Definición de colores de marca */

 :root {
    --primary-blue: #002447;
    --secondary-orange: #FF7F00;
    --light-orange: #f88e24;
}

.orange {
    background-color: var(--secondary-orange) !important;
}

.blue {
    background-color: var(--primary-blue) !important;
}

.imagenkilometro {
    background-image: url('../images/imagen2-26.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* Efecto de elevación y borde al pasar el mouse */

.vehicle-card {
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border: 2px solid transparent !important;
}


/* Efecto de cristal y bordes suaves para el acordeón */

.custom-faq-section .accordion-button {
    background-color: transparent !important;
    color: white !important;
    box-shadow: none !important;
    padding: 1.25rem;
}

.custom-faq-section .accordion-button:not(.collapsed) {
    color: #FF7F00 !important;
}


/* Personalizar el icono del acordeón */

.custom-faq-section .accordion-button::after {
    filter: brightness(0) invert(1);
}

.custom-faq-section .accordion-button:not(.collapsed)::after {
    filter: none;
    /* Vuelve a color original si es necesario o puedes usar uno naranja */
}

.imagendeprueba {
    background-image: url('../images/kilometro.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 500px;
    width: 100%;
}


/* Botones con efecto de elevación */

.btn-cta {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
}

.btn-cta:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 127, 0, 0.3);
    filter: brightness(1.1);
}

.vehicle-card:hover {
    transform: translateY(-10px);
    border-color: var(--light-orange) !important;
    /* Cambia al azul de tu marca */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

.vehicle-card:hover .img-container {
    background-color: #fff !important;
}

.vehicle-card:hover span {
    color: var(--light-orange) !important;
    font-weight: 700 !important;
}


/* Animación suave para el botón */

.btn-hover-effect:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}


/* Clases de utilidad para los colores de marca */

.bg-primary-blue {
    background-color: var(--primary-blue) !important;
}

.text-primary-blue {
    color: var(--primary-blue) !important;
}

.bg-secondary-orange {
    background-color: var(--secondary-orange) !important;
}

.text-secondary-orange {
    color: var(--secondary-orange) !important;
}

.text-secondary-blue {
    color: var(--primary-blue) !important;
}

.bg-light-orange {
    background-color: var(--light-orange) !important;
}


/* Estilos personalizados para replicar el diseño */

.hero-background {
    background-color: var(--primary-blue);
    background-size: cover;
    background-position: center;
}

.hero-image {
    max-height: 400px;
    object-fit: cover;
    object-position: top;
}

.cta-background {
    background-image: url('../images/sinester.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    position: relative;
    opacity: 0.8;

    
    
}

.hero-fondo {
    background-image: url('../images/coche1.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    position: relative;
    height: 70vh;
    
    
}


/* Transición suave para los íconos */

.transition-all {
    transition: all 0.3s ease;
}


/* Rotar ícono cuando está expandido */

.accordion-button:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}


/* Estilo para los botones del acordeón */

.accordion-button {
    border-radius: 0.5rem !important;
    padding: 1rem 1.25rem;
    font-weight: 500;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.accordion-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

@media (max-width: 576px) {
    .fondo50grados {
        position: absolute;
        top: -10%;
        left: -15%;
        width: 100%;
        height: 1%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transform: rotate(50deg);
        z-index: 1;
        pointer-events: none;
    }
    .hero-fondo {
        min-height: 20vh !important;
        max-height: 50vh !important;
        height: auto !important;
    }
    .hero-rcv {
        font-size: 2rem !important;
    }
    .hero-title {
        font-size: 10px !important;
    }
    .hero-text {
        margin: 0 !important;
    }
}

.fondo50grados {
    position: absolute;
    top: -28%;
    left: -16%;
    width: 40%;
    height: 160%;
    background-image: url('../images/azulnaran.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: rotate(50deg);
    z-index: 1;
    pointer-events: none;
}


/* Estilos para la sección de Preguntas Frecuentes y Beneficios */

.benefits-icon {
    font-size: 2.5rem;
    color: white;
}

.faq-background {
    background-color: var(--primary-blue);
    padding-top: 5rem;
    padding-bottom: 5rem;
    /* Se elimina el margen inferior para mejor estética */
}


/* --- NUEVOS ESTILOS PARA EL ACORDEÓN (FAQ) --- */


/* 1. Eliminar el borde y el fondo del contenedor del item (para que solo se vea el botón) */

.accordion-item {
    background-color: transparent !important;
    border: none;
    margin-bottom: 1rem;
    /* Espaciado entre las pastillas */
}


/* 2. Estilizar el botón para que parezca una pastilla naranja y esté siempre en ese estado */

.accordion-button {
    background-color: var(--light-orange) !important;
    color: white !important;
    border-radius: 999px !important;
    /* Forma de pastilla */
    padding: 0.75rem 1.5rem !important;
    /* Padding ajustado para ser más pequeño */
    font-weight: 600 !important;
    box-shadow: none !important;
    /* Eliminar sombras por defecto */
}


/* 3. Estilo al pasar el mouse */

.accordion-button:hover {
    background-color: var(--light-orange) !important;
    color: white !important;
}


/* 4. Estilo cuando el botón está expandido (mantener el naranja) */

.accordion-button:not(.collapsed) {
    background-color: var(--secondary-orange) !important;
    color: white !important;
    border-radius: 999px !important;
    /* Mantener la forma */
}


/* 5. Estilo para el ícono de Chevron (colocado con ms-auto en HTML) */

.accordion-button i {
    transition: transform 0.2s ease-in-out;
    margin-left: 0.5rem;
}


/* 6. Rotar el ícono cuando está abierto */

.accordion-button:not(.collapsed) i {
    transform: rotate(180deg);
}


/* 7. Estilo para el contenido de la respuesta (accordion-body) */

.accordion-body {
    /* Fondo ligeramente más claro que el primary-blue para contraste */
    background-color: rgba(255, 255, 255, 0.199);
    color: white !important;
    border-radius: 1rem 1rem 1rem 1rem;
    margin-top: -0.5rem;
    /* Subir ligeramente para cubrir el borde del botón */
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-top: none;
    font-weight: 450;
    font-family: 'Arial', sans-serif;
}


/* 8. Remover la flecha por defecto de Bootstrap ya que usamos nuestro ícono bi-chevron-down */

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
    display: none !important;
}


/* --- FIN NUEVOS ESTILOS PARA EL ACORDEÓN (FAQ) --- */


/* Botón Flotante de WhatsApp */

.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
    background-color: #25D366;
    /* WhatsApp Green */
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128C7E;
}

.whatsapp-float i {
    margin: 0 5px 5px 5px;
    font-size: 1.4rem;
    color: white;
}


/* Nuevo estilo para enlace activo (pastilla azul y texto blanco) */

.nav-link.active {
    color: white !important;
    background-color: var(--primary-blue) !important;
    border-radius: 0.5rem;
    /* Borde redondeado */
    border-bottom: none !important;
    /* Quita el borde inferior anterior */
}


/* Nuevo estilo al pasar el mouse (pastilla azul y texto blanco) */

.nav-link:hover {
    color: white !important;
    background-color: var(--primary-blue) !important;
    border-radius: 0.5rem;
    /* Borde redondeado para forma ovalada */
    transition: background-color 0.3s ease;
    /* Transición suave */
}