/* =================================================================
   1. CONFIGURACIÓN GLOBAL Y VARIABLES
   - Definimos colores y fuentes en un solo lugar para fácil mantenimiento.
   ================================================================== */

   :root {
    --toyota-red: #EB0A1E;
    --toyota-red-dark: #b80818;
    --text-dark: #000;
    --text-light: #fff;
    --text-muted: #555;
    --bg-light-gray: #f8f8f8;
    --bg-medium-gray: #f0f0f0;
    --border-color: #e0e0e0;
    --font-primary: 'ToyotaType', Arial, sans-serif;
    --header-height: 70px;
}

/* 
   NOTA SOBRE LA FUENTE: 
   Asegúrate de tener los archivos de la fuente 'ToyotaType' en una carpeta (ej. /fonts) 
   y de importarlos al inicio de tu CSS así:

   @font-face {
       font-family: 'ToyotaType';
       src: url('../fonts/ToyotaType-Regular.woff2') format('woff2');
       font-weight: normal;
   }
   @font-face {
       font-family: 'ToyotaType';
       src: url('../fonts/ToyotaType-Bold.woff2') format('woff2');
       font-weight: bold;
   }
   // ... y así para cada peso de la fuente.
*/

/* Reseteo y Estilos Base */
body {
    margin: 0;
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Creamos una clase .container reutilizable para centrar el contenido */
.container {
    width: 100%;
    max-width: 1600px; /* Ancho máximo para monitores grandes */
    margin: 0 auto;
    padding: 0 40px; /* Espaciado lateral por defecto */
    box-sizing: border-box;
}


/* =================================================================
   2. HEADER (REDiseñado para coincidir con la imagen de referencia)
   ================================================================== */
   .custom-header {
    background-color: var(--text-light);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    align-items: center; /* Alinear todo verticalmente */
    max-width: 1400px;
    margin: 0 auto;
    height: var(--header-height);
    padding: 0 20px;
}

/* Estilo del Logo */
.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    height: var(--header-height);
    margin-right: 40px; /* Espacio entre el logo y la navegación */
}
.logo-link img {
    height: 40px;
    display: block;
}

/* Navegación Principal */
.main-nav {
    margin-right: auto; /* Empuja las acciones a la derecha */
}
.main-nav .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px; /* Espacio entre los items del menú */
}
.main-nav .nav-item {
    position: relative;
}

.main-nav .nav-link {
    display: flex; /* Para alinear el texto y el cuadrito */
    align-items: center;
    padding: 0; /* Quitamos el padding viejo */
    text-decoration: none;
    color: #555; /* Color gris por defecto */
    font-weight: 500; /* Letra más delgada */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* El cuadrito indicador */
.main-nav .nav-link::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #555; /* Gris por defecto */
    margin-left: 8px;
    transition: background-color 0.3s ease;
}

/* Estado Hover y Activo */
.main-nav .nav-link:hover,
.nav-item.active > .nav-link {
    color: var(--toyota-red);
}
.main-nav .nav-link:hover::after,
.nav-item.active > .nav-link::after {
    background-color: var(--toyota-red);
}

/* Acciones a la derecha */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
}
.search-button svg {
    stroke: var(--text-dark);
}

.separator {
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
}

.action-button {
    background-color: var(--toyota-red);
    color: var(--text-light);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}
.action-button:hover {
    background-color: var(--toyota-red-dark);
}

.mobile-menu-toggle {
    display: none;
}


/* =================================================================
   3. HERO CAROUSEL
   - Optimizaciones menores y responsive.
   ================================================================== */
.carousel-container {
    height: calc(100vh - var(--header-height)); 
    width: 100%;
    position: relative;
    color: var(--text-light);
    overflow: hidden;
}

.carousel-container .glide,
.carousel-container .glide__track,
.carousel-container .glide__slides,
.glide__slide,
.banner-slide {
    height: 100%;
    margin: 0;
    padding: 0;
}

.banner-slide {
    position: relative;
    display: flex;
    align-items: center;
}

.banner-slide__media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
}

.banner-slide__media-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    z-index: 2;
}

.banner-slide__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-slide__content {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    width: 100%;
    box-sizing: border-box;
    
}

.banner-slide__pretitle {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
}

.banner-slide__title {
    font-size: 3.8rem;
    font-weight: 900;
    margin: 5px 0 15px 0;
    line-height: 1.1;
}

.banner-slide__description {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 500px;
}
.banner-slide__description p {
    margin: 0;
}

.banner-slide__action-link {
    display: inline-block;
    padding: 12px 35px;
    
    color: var(--text-dark);
    border: 2px solid var(--text-light);
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.banner-slide__action-link:hover {
    background-color: var(--toyota-red);
    color: var(--text-light);
    border-color: var(--toyota-red);
}

/* Controles Glide */
.glide__arrows {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 5;
    box-sizing: border-box;
}

.glide__arrow {
    background: rgba(0,0,0,0.3);
    border: none;
    box-shadow: none;
    color: var(--text-light);
    padding: 15px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.glide__arrow:hover {
    opacity: 1;
}

.glide__arrow::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--text-light);
    border-right: 2px solid var(--text-light);
}
.glide__arrow--left::before {
    transform: rotate(-135deg);
}
.glide__arrow--right::before {
    transform: rotate(45deg);
}

.glide__bullets {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.glide__bullet {
    background-color: rgba(255, 255, 255, 0.5);
    width: 10px;
    height: 10px;
    transition: background-color 0.3s;
}

.glide__bullet--active {
    background-color: var(--text-light);
}

/* RESPONSIVE: HERO CAROUSEL */
@media (max-width: 992px) {
    .banner-slide__title { 
        font-size: 3rem; 
    }
}

@media (max-width: 768px) {
    .carousel-container {
        /* Reducimos la altura en móvil para que no sea tan abrumador */
        height: 75vh;
    }
    .banner-slide__content {
        padding: 0 8%;
    }
    .banner-slide__title { 
        font-size: 2.5rem; 
    }
    .banner-slide__description { 
        font-size: 1rem; 
    }
    .glide__arrows {
        display: none;
    }
}


/* =================================================================
   4. SECCIONES DE MODELOS (CARRUSELES)
   - Unificamos estilos para .models-section y .featured-models-section.
   ================================================================== */
.models-section,
.featured-models-section {
    padding: 80px 0;
    background-color: var(--bg-light-gray);
    overflow: hidden; /* Importante para que las animaciones no creen scroll horizontal */
}

/* Encabezados de sección genéricos */
.section-header {
    text-align: left;
    margin-bottom: 40px;
    padding: 0 40px; /* Añadimos el padding aquí para consistencia */
}

.section-header .section-pretitle {
    color: var(--toyota-red);
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.section-header .section-title {
    color: var(--text-dark);
    font-size: 2.8rem;
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.section-header .section-description {
    color: var(--text-dark);
    font-size: 1.2rem;
    margin: 0;
    max-width: 600px;
}

/* Estilos unificados para las tarjetas de vehículos */
.vehicle-card {
    background-color: var(--text-light);
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color);
    min-height: 560px;
}
.vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.card-image-wrapper {
    background-color: var(--bg-medium-gray);
    aspect-ratio: 4 / 3;
    padding: 10px;
    box-sizing: border-box;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.card-image-wrapper img {
    width: 110%;
    height: 110%;
    object-fit: contain;
}

/* --- CAMBIO: Nuevo layout vertical para el contenido de la tarjeta --- */
.card-content {
    background-color: var(--bg-medium-gray);
    padding: 30px;
    
    display: flex;
    flex-direction: column; 
    
    /* CAMBIO CLAVE: 'flex-start' alinea todo arriba. 
       Si tenías 'space-between', bórralo. */
    justify-content: flex-start; 
    
    /* Esto hace que el gris llene la tarjeta, pero no estira el contenido interno */
    flex-grow: 1; 
    
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-bottom: 40px;
}

/* Agrupamos texto para que se quede arriba */
.card-text {
    width: 100%;
    /* Define la separación exacta entre la frase y la fila del precio/botón */
    margin-bottom: 25px; 
    
    /* IMPORTANTE: Evita que este bloque crezca y empuje lo demás abajo */
    flex-grow: 0; 
}


/* Alineación de la categoría */
.card-category-tag {
    display: inline-block;
    background-color: transparent; 
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem; /* Ajuste sutil */
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 15px; /* Espacio debajo de la categoría */
}

/* Título y descripción */
.card-text h3 {
    margin: 0 0 10px 0; /* Margen inferior para separar de descripción */
    font-size: 2.2rem;
    color: var(--text-dark);
    line-height: 1.1;
}
.card-description {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin: 0;
    opacity: 0.8;
}

/* --- NUEVA CLASE: Contenedor para poner Precio vs Botón --- */
.card-footer-row {
    display: flex;
    justify-content: space-between; /* Mantiene Precio Izq / Botón Der */
    align-items: center; 
    width: 100%;
    
    /* IMPORTANTE: Asegúrate de que esto sea 0. 
       Si dice 'auto', se irá al fondo. */
    margin-top: 0; 
}

/* Ajuste al Precio para que se alinee bien */
.card-price {
    font-weight: bold;
    font-size: 0.95rem; /* Ajuste para que quepa mejor */
    margin: 0; /* Quitamos el margen top que tenía antes */
    color: var(--text-dark);
}

/* Ajuste a card-actions para que funcione dentro de la fila */
.card-actions {
    display: flex;
    gap: 10px;
    /* Quitamos el align-self y justify-content antiguos, ya no se necesitan */
    flex-shrink: 0; 
}


.card-button {
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.card-button.btn-primary {
    background-color: var(--text-light);
    color: var(--text-dark);
    border-color: var(--text-dark);
}
.card-button.btn-primary:hover {
    background-color: var(--toyota-red);
    border-color: var(--toyota-red);
    color: var(--text-light);
}

/* El botón secundario ahora sí es "clickable" */
.card-button.btn-secondary {
    background-color: var(--text-dark);
    color: var(--text-light);
    border-color: var(--text-dark);
}
.card-button.btn-secondary:hover {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
}


/* RESPONSIVE: SECCIONES DE MODELOS */
@media (max-width: 992px) {
    .models-section, .featured-models-section {
        padding: 60px 0;
    }
    .section-header .section-title {
        font-size: 2.2rem;
    }
    .section-header .section-description {
        font-size: 1rem;
    }
    .card-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .card-actions {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .container, .section-header {
        padding: 0 20px;
    }
    .card-text h3 {
        font-size: 1.8rem;
    }
}


/* =================================================================
   5. SECCIÓN DE HÍBRIDOS (HIGHLIGHT)
   ================================================================== */
.highlight-section {
    padding: 80px 0;
}

.highlight-wrapper {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    min-height: 600px; 
    display: flex; /* Añadimos flex para el responsive */
}

.highlight-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.highlight-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight-carousel {
    position: absolute;
    z-index: 2;
    top: 80px;    
    right: 50px;  
    bottom: 80px; 
    width: 45%;
    max-width: 550px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.highlight-carousel .card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.highlight-carousel .card-title { font-size: 1.6rem; color: var(--text-dark); margin: 0; }
.highlight-carousel .card-icon { 
    width: 50px; 
    height: 50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: var(--text-dark);
    border-radius: 50%; 
    flex-shrink: 0;
}
.highlight-carousel .card-icon::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: var(--text-light);
}

.highlight-carousel .card-body { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.highlight-carousel .glide__arrows {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 5;
    display: flex;
    gap: 10px;
}
.highlight-carousel .glide__arrow {
    background: var(--bg-medium-gray); border: 1px solid #ddd; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-dark); cursor: pointer; transition: background-color 0.3s;
}
.highlight-carousel .glide__arrow:hover { background: #e0e0e0; }
.highlight-carousel .glide__arrow::before {
    content: ''; display: inline-block; width: 8px; height: 8px; border-top: 2px solid black; border-right: 2px solid black;
}
.highlight-carousel .glide__arrow--left::before { transform: rotate(-135deg); }
.highlight-carousel .glide__arrow--right::before { transform: rotate(45deg); }

.highlight-action { text-align: center; margin-top: 40px; }
.highlight-action .action-button { background-color: var(--toyota-red); color: var(--text-light); padding: 12px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 0.9rem; transition: background-color 0.3s ease, color 0.3s ease; display: inline-block; border: 2px solid var(--toyota-red); }
.highlight-action .action-button:hover { background-color: var(--text-light); color: var(--toyota-red); }

/* RESPONSIVE: SECCIÓN HÍBRIDOS */
@media (max-width: 992px) {
    .highlight-wrapper {
        min-height: auto;
        flex-direction: column;
    }
    .highlight-background {
        position: relative;
        height: 350px; /* Altura fija para la imagen */
    }
    .highlight-carousel {
        position: static;
        width: 100%;
        max-width: none;
        border-radius: 0;
        top: auto; right: auto; bottom: auto;
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .highlight-action { margin-top: 20px; }
    .highlight-section { padding-top: 60px; }
}


/* =================================================================
   6. SECCIÓN DE SERVICIO
   ================================================================== */
.service-grid-section {
    padding: 80px 180px; 
}

.theme-dark {
    background-color: var(--text-dark);
}
.theme-dark .section-header .section-pretitle,
.theme-dark .section-header .section-title,
.theme-dark .section-header .section-description {
    color: var(--text-light);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 550px);
    gap: 20px;
}

.service-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    color: var(--text-light);
    text-decoration: none;
}

.card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    transition: transform 0.8s ease;
}
.service-card:hover .card-background {
    transform: scale(1.05);
}

/* Definición de áreas del grid */
.service-card.large-left { grid-column: 1 / span 3; }
.service-card.large-right { grid-column: 3 / span 3; }
.service-card.small-right { grid-column: 4 / span 2; }
.service-card.small-left { grid-column: 1 / span 2; }

.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 60px 30px 30px 30px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

.service-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.service-card .card-title {
    font-size: 1.6rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.2;
}

.service-card .card-icon { 
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background-color: var(--text-light); border-radius: 50%; flex-shrink: 0;
    order: 2;
}
.service-card .card-icon::before {
    content: ''; width: 16px; height: 16px; background-color: var(--text-dark);
}

.service-card.highlight .card-content-overlay,
.service-card.small-right .card-content-overlay {
    background: none;
}
.service-card.highlight .card-title {
    color: var(--text-dark);
}
.service-card.highlight .card-icon {
    background-color: var(--toyota-red);
}
.service-card.highlight .card-icon::before {
    background-color: var(--text-light);
}

/* RESPONSIVE: SECCIÓN SERVICIO */
@media (max-width: 1400px) {
    .service-grid-section {
        padding: 80px 100px; 
    }
}
@media (max-width: 1200px) {
    .service-grid-section {
        padding: 60px 40px;
    }
    .service-grid {
        grid-template-rows: repeat(2, 450px);
    }
}
@media (max-width: 768px) {
    .service-grid-section {
        padding: 60px 20px;
    }
    .service-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 350px);
    }
    .service-card.large-left,
    .service-card.small-right,
    .service-card.small-left,
    .service-card.large-right {
        grid-column: auto; /* Resetea el span de las columnas */
    }
    .service-card .card-title {
        font-size: 1.4rem;
    }
}


/* =================================================================
   7. SECCIÓN DE FINANCIAMIENTO
   ================================================================== */
.financing-banner-section {
    padding: 80px 0;
}

.financing-banner {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    display: flex;
    align-items: center;
    color: var(--text-light);
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.banner-background::after { /* Sombra para legibilidad */
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%);
}
.banner-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.financing-banner .container {
    position: relative;
    z-index: 3;
}

.banner-content {
    max-width: 550px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.banner-content .pretitle {
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.banner-content .title {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.1;
}

.banner-content .description {
    font-size: 1.2rem;
    margin: 0 0 30px 0;
}

.banner-content .action-button {
    background-color: var(--text-light);
    color: var(--text-dark);
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.banner-content .action-button:hover {
    background-color: var(--toyota-red);
    color: var(--text-light);
    border-color: var(--toyota-red);
}

.button-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* RESPONSIVE: FINANCIAMIENTO */
@media (max-width: 768px) {
    .financing-banner {
        min-height: 550px;
    }
    .banner-content .title {
        font-size: 2.5rem;
    }
}


/* =================================================================
   8. SECCIÓN DE MOVILIDAD
   ================================================================== */
.mobility-section {
    padding: 80px 0;
    background-color: var(--text-light);
}

.split-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.split-column {
    flex: 1;
}

.image-column img {
    width: 100%;
    height: auto;
    display: block;
}

.text-column .pretitle {
    color: var(--toyota-red);
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 15px 0;
}

.text-column .title {
    color: var(--text-dark);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 25px 0;
}

.text-column .description {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 40px 0;
}

.text-column .action-button.btn-outline-red {
    background-color: transparent;
    color: var(--toyota-red);
    border: 1px solid var(--toyota-red);
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    display: inline-block;
    transition: all 0.3s ease;
}
.text-column .action-button.btn-outline-red:hover {
    background-color: var(--toyota-red);
    color: var(--text-light);
}

/* RESPONSIVE: MOVILIDAD */
@media (max-width: 992px) {
    .split-container {
        flex-direction: column-reverse; /* El texto va primero en móvil */
        gap: 40px;
        text-align: center;
    }
    .text-column .title {
        font-size: 2.2rem;
    }
}

/* =================================================================
   9. NUEVO MEGA MENÚ DE MODELOS (AJUSTES FINALES)
   ================================================================== */
.nav-item.has-megamenu {
    position: static; 
}

.mega-menu {
    display: flex;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--text-light);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    padding: 80px 5%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.nav-item.active .mega-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Columna de categorías (40%) */
.mega-menu-sidebar {
    flex-basis: 40%; 
    max-width: 450px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding-right: 40px;
    box-sizing: border-box;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-link {
    display: block;
    width: 100%;
    padding: 18px 20px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.4rem; 
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}
.category-link:hover,
.category-link.active {
    color: var(--toyota-red);
}
.category-item:last-child .category-link {
    border-bottom: none;
}

/* Contenedor principal del grid (60%) */
.mega-menu-main {
    flex-basis: 60%;
    padding-left: 60px; 
    padding-right: 20px;
    box-sizing: border-box;
}

/* Contenedor principal del grid (60%) */
.mega-menu-main {
    flex-basis: 60%;
    padding-left: 60px; 
    padding-right: 20px;
    box-sizing: border-box;
}

/* CASO 1: POCOS MODELOS (Ej. Gazoo Racing) - Usamos Flex para centrar */
.model-grid {
    display: none;
    /* Flexbox nos permite centrar los elementos si sobran espacios */
    flex-wrap: wrap;
    justify-content: center; /* Centra las tarjetas en el espacio disponible */
    gap: 20px;
    height: 100%;
    align-content: start;
}

.model-grid.active {
    display: flex; /* Activamos como Flex */
}

/* CASO 2: MUCHOS MODELOS (Ej. Sedanes) - Usamos Grid de 4 columnas */
.model-grid.grid-large {
    display: none; /* Se oculta si no está activo */
}

.model-grid.grid-large.active {
    display: grid; /* Se activa como Grid */
    grid-template-columns: repeat(4, 1fr); /* 4 Columnas estrictas */
    justify-content: start;
}

/* ESTILO DE LAS TARJETAS */
.model-card {
    background-color: var(--bg-light-gray);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    padding: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    border: 1px solid transparent;
    transition: all 0.3s ease;

    /* TRUCO: Ancho fijo relativo para que coincida en ambos modos (Flex y Grid) */
    /* En Grid ocupa el 1fr (aprox 25%), en Flex le decimos que ocupe el 23% aprox */
    width: 100%; /* Para el modo Grid */
    flex: 0 0 calc(25% - 20px); /* Para el modo Flex (1/4 del ancho menos el gap) */
    max-width: 280px; /* Evita que se estiren demasiado */
}

.model-card {
    background-color: var(--bg-light-gray); /* Fondo gris claro (f6f6f6 aprox) */
    border-radius: 8px; /* Radio de borde suave */
    text-decoration: none;
    color: var(--text-dark);
    padding: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px; /* Altura mínima para uniformidad */

    /* Borde transparente para la transición */
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.model-card:hover {
    border-color: var(--toyota-red); /* Borde rojo al pasar el mouse */
    background-color: #fff; /* Opcional: Fondo blanco al hover para resaltar */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.model-card .image-container {
    text-align: center;
    margin-bottom: 15px;
}

.model-card img {
    width: 100%;
    height: 100px; /* Altura controlada de la imagen */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* --- ESTILOS DE TEXTO (COMO EN LA IMAGEN) --- */

.model-card .text-container {
    margin-top: auto; /* Empuja el texto hacia abajo si sobra espacio */
}

.model-card .model-name {
    display: block;
    font-size: 1.1rem; /* Tamaño un poco más grande */
    font-weight: 800;  /* Extra Bold (Estilo Toyota) */
    color: #333;       /* Gris muy oscuro */
    margin-bottom: 8px;
    line-height: 1.2;
}

.model-card .model-price {
    display: block;
    font-size: 0.95rem;
    color: #666;       /* Gris medio para el precio */
    font-weight: 400;
    line-height: 1.4;
}

/* --- RESPONSIVE PARA EL NUEVO MEGA MENÚ --- */
@media (max-width: 1024px) {
    .mega-menu {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        flex-direction: column;
        padding: 10px 0;
        display: none;
    }
    
    .nav-item.active > .mega-menu {
        display: flex;
    }
    
    .mega-menu-sidebar {
        flex-basis: auto;
        border-right: none;
        padding-right: 0;
        max-width: none;
    }

    .mega-menu-main {
        display: none;
    }
    
    .category-link {
        padding-left: 40px;
    }
}

/* =================================================================
   10. SIMPLE DROPDOWN MENUS (CON FOOTER Y AJUSTES)
   ================================================================== */
   .nav-item.has-dropdown {
    position: static;
}

.simple-dropdown {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--text-light);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    padding-top: 50px; /* Solo padding arriba, el footer se encargará del de abajo */
    box-sizing: border-box;
    display: none;
}
.nav-item.active .simple-dropdown {
    display: block;
}

.simple-dropdown-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.simple-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 33.33%;
    max-width: 350px;
    border-top: 1px solid var(--border-color);
}

.simple-dropdown a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* --- CAMBIO: Más padding vertical --- */
    padding: 25px 0; 
    text-decoration: none;
    color: var(--text-muted);
    /* --- CAMBIO: Letra un poco más pequeña --- */
    font-size: 1.3rem; 
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
    transition: color 0.3s ease;
}
.simple-dropdown a:hover {
    color: var(--toyota-red);
}

.simple-dropdown a::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.simple-dropdown a:hover::after {
    background-color: var(--toyota-red);
}


/* =================================================================
   11. FOOTER DE LOS MENÚS (VERSIÓN FINAL Y SIMPLIFICADA)
   ================================================================== */
   .menu-footer {
    border-top: 1px solid var(--border-color);
    margin-top: 50px; 
    padding: 30px 0;
}

.menu-footer-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alinea verticalmente los items */
}

.footer-column {
    flex: 1;
}

.footer-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 0 15px 0;
}

.footer-buttons-wrapper {
    display: flex;
    gap: 15px;
}

/* --- ESTILO CORREGIDO PARA EL BOTÓN DE WHATSAPP --- */
.footer-button.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    
    background-color: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    
    transition: all 0.3s ease;
}
.footer-button.whatsapp-button:hover {
    background-color: var(--text-dark);
    color: var(--text-light);
}
.footer-button.whatsapp-button svg {
    width: 20px; /* Un poco más grande para que se vea bien */
    height: 20px;
    fill: currentColor;
}


/* --- Estilos para los iconos de redes sociales a color --- */
.footer-column:last-child {
    text-align: right;
}

.social-icons {
    display: inline-flex;
    gap: 15px;
}

/* --- CAMBIO: SIN FONDO, SOLO EL LOGO --- */
.social-icon {
    display: block;
    width: 28px;
    height: 28px;
    background-color: transparent; /* Sin fondo negro */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
}
.social-icon:hover {
    opacity: 0.7;
}

/* --- ESTILO CORREGIDO Y FINAL PARA EL BOTÓN DE WHATSAPP --- */

.footer-button.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    
    /* Estado por defecto */
    background-color: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    
    /* Transición para los cambios de color */
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* --- CAMBIO: Nuevo estado hover --- */
.footer-button.whatsapp-button:hover {
    background-color: transparent; /* Nos aseguramos de que el fondo NO cambie */
    color: var(--toyota-red);      /* El color del texto e icono cambia a rojo */
    border-color: var(--toyota-red); /* El color del borde cambia a rojo */
}

.footer-button.whatsapp-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor; 
    stroke-width: 2.5;
    fill: none;
}

/* 
   ¡IMPORTANTE! Necesitarás descargar los iconos oficiales a color.
   Guárdalos en 'images/redes_sociales/' con los nombres correspondientes.
*/
.social-icon.facebook { background-image: url('../images/redes_sociales/facebook.png'); }
.social-icon.youtube { background-image: url('../images/redes_sociales/youtube.png'); }
.social-icon.instagram { background-image: url('../images/redes_sociales/instagram.png'); }


/* =================================================================
   12. NUEVO FOOTER (VERSIÓN FINAL MINIMALISTA)
   ================================================================== */

   .main-footer {
    background-color: var(--bg-light-gray);
    padding: 80px 0 30px 0;
    color: var(--text-dark);
}

.main-footer {
    background-color: var(--bg-light-gray);
    padding: 80px 0 30px 0;
    color: var(--text-dark);
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    padding-bottom: 50px;
}

.footer-logo img {
    height: 60px;
    margin-bottom: 30px;
}
.footer-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 30px 0 15px 0;
}
.footer-buttons-wrapper {
    display: flex;
    margin-bottom: 30px;
}
.footer-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    background-color: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    transition: all 0.3s ease;
}
.footer-button:hover {
    background-color: var(--text-dark);
    color: var(--text-light);
}
.footer-button svg {
    width: 16px; height: 16px; fill: currentColor;
}


/* --- ESTILOS DEL ACORDEÓN (CON ENLACES MEJORADOS) --- */
.accordion-item {
    border-bottom: 1px solid var(--border-color);
}
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: var(--font-primary);
    font-weight: 500;
}
.accordion-header::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-header::after {
    content: '−';
}
.accordion-item.has-nested-menu.active .accordion-header::after {
    content: '×';
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.accordion-item.active .accordion-panel {
    max-height: 500px;
    padding-bottom: 25px;
}
.accordion-panel ul {
    list-style: none; padding: 0; margin: 0; padding-left: 25px;
}
.accordion-panel a {
    display: block; padding: 8px 0; color: var(--text-muted); text-decoration: none;
}
.accordion-panel a:hover { color: var(--text-dark); }

/* --- NUEVOS ESTILOS PARA EL MENÚ DE MODELOS ANIDADO --- */
.nested-menu-wrapper {
    display: flex;
    padding-left: 15px; /* Sangría general */
}

.nested-category-list {
    flex-basis: 50%;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nested-link {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    font-family: var(--font-primary);
    position: relative;
    transition: color 0.3s ease;
}
.nested-link:hover {
    color: var(--text-dark);
}
.nested-link.active {
    color: var(--toyota-red);
}

.model-list-panel {
    flex-basis: 50%;
    border-left: 1px solid var(--border-color);
    padding-left: 25px;
    min-height: 200px;
}
.model-list {
    display: none;
}
.model-list.active {
    display: block;
}
.model-list ul {
    padding: 0;
}
.model-list a {
    font-size: 0.9rem;
}

/* --- SECCIÓN INFERIOR Y COPYRIGHT --- */
.footer-bottom {
    padding-top: 50px;
    border-top: 1px solid var(--border-color);
}
.footer-links-column h4 {
    margin: 0 0 20px 0;
    font-weight: 500;
}
.footer-links-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-column a {
    display: block;
    padding: 8px 0;
    color: var(--text-muted);
    text-decoration: none;
}
.footer-links-column a:hover {
    color: var(--text-dark);
}

.footer-copyright {
    margin-top: 60px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
/* =================================================================
   13. SECCIÓN DE COTIZACIÓN RÁPIDA (GRID PERFECTO)
   ================================================================== */

   .quick-quote-section {
    padding: 80px 0;
    background-color: var(--text-light);
}

/* --- REGLAS DE ANULACIÓN --- */
.quick-quote-style .zp-form-title,
.quick-quote-style .zp-label {
    display: none;
}

/* EL GRID: Aquí está la magia de la separación igual */
.quick-quote-style .zp-form-grid {
    display: grid;
    /* 3 Columnas exactamente iguales */
    grid-template-columns: repeat(3, 1fr); 
    
    /* UN SOLO VALOR PARA TODO: Mismo espacio a los lados y abajo */
    gap: 30px; 
    
    /* Alineación vertical al centro */
    align-items: center; 
    width: 100%;
}

/* --- POSICIONAMIENTO DE ELEMENTOS ESPECÍFICOS --- */

/* 1. Campos Normales (Nombre, Tel, Email, Modelo, Contacto) */
/* No necesitamos reglas especiales, ocuparán 1 celda cada uno en orden */
/* Nombre -> Celda 1, Tel -> Celda 2, Email -> Celda 3 */
/* Modelo -> Celda 4 (Fila 2, Izq), Contacto -> Celda 5 (Fila 2, Centro) */

.quick-quote-style .zp-form-field {
    padding-top: 0;
    margin: 0; /* Quitamos márgenes extraños */
    width: 100%;
}

/* 2. El ReCAPTCHA (Fila 3, Izquierda) */
.quick-quote-style .recaptcha-wrapper {
    grid-column: 1 / 2; /* Ocupa la primera columna */
    justify-self: start; /* Alineado a la izquierda */
}

/* 3. El Botón de Enviar (Fila 3, Derecha) */
.quick-quote-style .zp-form-action {
    grid-column: 3 / 4; /* Ocupa la última columna (la 3) */
    text-align: right;  /* Alinea el botón a la derecha dentro de su celda */
    margin: 0;
}

/* --- ESTILO VISUAL DE LOS CAMPOS --- */
.quick-quote-style .zp-input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: var(--font-primary);
    background-color: #f9f9f9;
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho */
}

/* Flecha del Select */
.quick-quote-style select.zp-input {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.quick-quote-style .zp-button {
    padding: 12px 40px;
    background-color: var(--toyota-red);
    color: #fff; /* Texto blanco (en tu captura se veia gris, mejor blanco) */
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    width: 100%; /* Opcional: si quieres que el botón llene su celda */
    max-width: 200px; /* Pero que no sea gigante */
}

.quick-quote-style .zp-button:hover {
    background-color: #cc0000;
}

/* --- RESPONSIVIDAD (MÓVIL) --- */
@media (max-width: 900px) {
    .quick-quote-style .zp-form-grid {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 20px;
    }
    /* En móvil, el botón y recaptcha ocupan todo el ancho */
    .quick-quote-style .recaptcha-wrapper,
    .quick-quote-style .zp-form-action {
        grid-column: 1 / -1;
        justify-self: center;
        text-align: center;
    }
}
/* =================================================================
   SECCIÓN DE OPCIONES RÁPIDAS (GRID)
   ================================================================== */

   .options-grid-section {
    padding: 0; /* Sin padding extra para pegar los bordes si quieres */
    background-color: #fff; /* Fondo BLANCO */
    width: 100%;
    margin-bottom: 80px; 
}

/* El Contenedor Grid */
.options-grid {
    display: flex; /* Usamos Flex para el efecto de acordeón suave */
    width: 100%;
    height: 70vh; /* Altura: 70% del alto de la pantalla (Verticales) */
    min-height: 500px;
    overflow: hidden;
}

/* --- LA TARJETA INDIVIDUAL --- */
.option-card {
    position: relative;
    flex: 1; /* Todas ocupan el mismo ancho inicialmente */
    overflow: hidden;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Transición muy suave */
    border-right: 1px solid rgba(255,255,255,0.2); /* Separador sutil */
    cursor: pointer;
}

/* --- IMAGEN DE FONDO --- */
.option-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
.option-bg img {
    width: 100%; height: 100%;
    object-fit: cover; /* Asegura que la imagen llene la tarjeta vertical */
    transition: transform 0.7s ease;
}

/* --- CAPA OSCURA (OVERLAY) --- */
.option-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
    transition: background 0.3s;
}

/* --- CONTENIDO TEXTO --- */
.option-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Texto abajo */
    padding: 40px;
    color: #fff;
    bottom: 0;
}

.option-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.option-content p {
    font-size: 1rem;
    color: #ddd;
    margin: 0 0 20px 0;
    opacity: 0.8;
    transform: translateY(10px);
    transition: all 0.3s;
}

.btn-arrow {
    font-size: 1.5rem;
    color: var(--toyota-red); /* Tu rojo */
    opacity: 0; /* Oculta flecha normalmente *//* =================================================================
    SECCIÓN DE OPCIONES RÁPIDAS (GRID)
    ================================================================== */
 
 .options-grid-section {
     padding: 80px 0; /* Espaciado vertical para separar de otras secciones */
     background-color: #fff; 
     width: 100%;
 }
 
 /* El Contenedor Grid */
 .options-grid {
     display: flex;
     width: 100%;
     height: 60vh; /* Altura un poco más controlada */
     min-height: 500px;
     
     /* ESTÉTICA DEL BLOQUE */
     border-radius: 20px; /* Bordes redondeados en las esquinas del bloque completo */
     overflow: hidden;    /* Para que las imágenes no se salgan de las esquinas redondeadas */
     box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Sombra elegante */
 }
 
 /* --- LA TARJETA INDIVIDUAL --- */
 .option-card {
     position: relative;
     flex: 1; 
     overflow: hidden;
     text-decoration: none;
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border-right: 1px solid rgba(255,255,255,0.3); /* Línea divisoria */
     cursor: pointer;
 }
 
 /* Quitamos el borde derecho de la última tarjeta */
 .option-card:last-child {
     border-right: none;
 }
 
 /* --- IMAGEN DE FONDO --- */
 .option-bg {
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     z-index: 1;
 }
 .option-bg img {
     width: 100%; height: 100%;
     object-fit: cover; 
     transition: transform 0.7s ease;
 }
 
 /* --- CAPA OSCURA (OVERLAY) --- */
 .option-overlay {
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
     z-index: 2;
     transition: background 0.3s;
 }
 
 /* --- CONTENIDO TEXTO --- */
 .option-content {
     position: relative;
     z-index: 3;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end; 
     padding: 30px;
     color: #fff;
     bottom: 0;
 }
 
 .option-content h3 {
     font-size: 1.5rem; /* Ajustado un poco para que quepan bien */
     font-weight: 800;
     text-transform: uppercase;
     margin: 0 0 5px 0;
     text-shadow: 0 2px 10px rgba(0,0,0,0.5);
     line-height: 1.1;
 }
 
 .option-content p {
     font-size: 0.95rem;
     color: #ddd;
     margin: 0 0 10px 0;
     opacity: 0.8;
     transform: translateY(10px);
     transition: all 0.3s;
 }
 
 .btn-arrow {
     font-size: 1.2rem;
     color: var(--toyota-red); 
     opacity: 0; 
     transform: translateX(-20px);
     transition: all 0.3s;
 }
 
 /* =================================================================
    EFECTOS DE INTERACCIÓN (HOVER)
    ================================================================== */
 
 .option-card:hover .option-bg img {
     transform: scale(1.1);
 }
 
 .option-card:hover {
     flex: 1.5; /* Efecto acordeón */
 }
 
 .option-card:hover .btn-arrow {
     opacity: 1;
     transform: translateX(0);
 }
 .option-card:hover .option-content p {
     opacity: 1;
     transform: translateY(0);
 }
 
 /* Focus effect: Oscurece las no seleccionadas */
 .options-grid:hover .option-card:not(:hover) {
     filter: brightness(0.6); 
 }
 
 /* =================================================================
    RESPONSIVE (MÓVIL)
    ================================================================== */
 @media (max-width: 992px) {
     .option-content h3 { font-size: 1.2rem; }
 }
 
 @media (max-width: 768px) {
     .options-grid {
         flex-direction: column; 
         height: auto;
         border-radius: 15px; /* Un poco menos radio en móvil */
     }
     .option-card {
         height: 200px; 
         width: 100%;
         border-right: none;
         border-bottom: 1px solid rgba(255,255,255,0.3);
     }
     .option-card:last-child {
         border-bottom: none;
     }
     .option-card:hover {
         flex: 1; /* Desactiva crecimiento en móvil */
     }
     .options-grid:hover .option-card:not(:hover) {
         filter: brightness(1); 
     }
     .btn-arrow {
         opacity: 1;
         transform: translateX(0);
     }
 }
    transform: translateX(-20px);
    transition: all 0.3s;
}


/* =================================================================
   EFECTOS DE INTERACCIÓN (HOVER)
   ================================================================== */

/* 1. Zoom a la imagen al pasar el mouse */
.option-card:hover .option-bg img {
    transform: scale(1.1);
}

/* 2. La tarjeta activa crece un poco (efecto acordeón) */
.option-card:hover {
    flex: 1.5; /* Crece para tomar más espacio */
}

/* 3. Muestra la flecha y mueve el texto */
.option-card:hover .btn-arrow {
    opacity: 1;
    transform: translateX(0);
}
.option-card:hover .option-content p {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Oscurecer las hermanas NO seleccionadas (Focus effect) */
/* Cuando el mouse está sobre el contenedor grid... */
.options-grid:hover .option-card:not(:hover) {
    filter: brightness(0.6); /* Oscurece las otras */
}


/* =================================================================
   RESPONSIVE (MÓVIL)
   ================================================================== */
@media (max-width: 768px) {
    .options-grid {
        flex-direction: column; /* En móvil se apilan una sobre otra */
        height: auto;
    }
    .option-card {
        height: 250px; /* Altura fija en móvil por tarjeta */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .option-card:hover {
        flex: 1; /* Desactiva el crecimiento en móvil */
    }
    .options-grid:hover .option-card:not(:hover) {
        filter: brightness(1); /* Desactiva el oscurecimiento en móvil */
    }
    .btn-arrow {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =================================================================
   SECCIÓN DE UBICACIÓN Y HORARIOS (ESTILO TOYOTA)
   ================================================================== */

   .location-section {
    width: 100%;
    background-color: #fff;
    padding: 0; /* Sin padding externo, queremos full width */
    overflow: hidden;
}

.location-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 600px; /* Altura mínima para que luzca imponente */
}

/* --- COLUMNA IZQUIERDA (ROJO) --- */
.location-info.red-bg {
    background-color: var(--toyota-red); /* #EB0A1E */
    color: #fff;
    flex: 1; /* Ocupa el espacio disponible */
    min-width: 300px; /* Para que no se aplaste mucho */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra horizontalmente */
    padding: 60px 40px;
    position: relative;
}

.info-content {
    max-width: 600px;
    width: 100%;
}

.location-info .pretitle {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.location-info .title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}

.location-info .description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* --- GRID DE HORARIOS --- */
.hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para los horarios */
    gap: 30px;
    margin-bottom: 40px;
    border-top: 1px solid rgba(255,255,255,0.3); /* Línea sutil superior */
    padding-top: 30px;
}

.hours-block h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(255,255,255,0.5); /* Subrayado corto */
    display: inline-block;
    padding-bottom: 3px;
}

.hours-block p {
    font-size: 0.9rem;
    margin: 5px 0;
    opacity: 0.9;
    line-height: 1.4;
}
.hours-block p span {
    font-weight: 600; /* Días en negrita */
    display: inline-block;
    width: 80px; /* Alineación de las horas */
}

/* --- BOTÓN BLANCO TOYOTA --- */
.btn-toyota-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    color: #000; /* Texto negro para contraste */
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-toyota-white:hover {
    background-color: #f2f2f2;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- COLUMNA DERECHA (MAPA) --- */
.location-map {
    flex: 1; /* Misma proporción que el texto (50/50 en desktop) */
    min-width: 300px;
    position: relative;
    height: auto; /* Se adapta a la altura del contenedor */
    min-height: 400px; /* Altura mínima en móvil */
}

.location-map iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(0%); /* Mapa a color normal */
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .location-info .title {
        font-size: 2.5rem;
    }
    .hours-grid {
        grid-template-columns: 1fr; /* Una sola columna de horarios en pantallas medianas */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .location-container {
        flex-direction: column; /* Apilar verticalmente en móvil */
    }
    .location-info.red-bg {
        padding: 50px 20px;
    }
    .location-map {
        height: 400px; /* Altura fija para el mapa en móvil */
    }
}

/* =========================================
   ESTILOS DEL BANNER HERO (ESTILO TOYOTA)
   ========================================= */

   .modelo-hero {
    position: relative;
    width: 100%;
    /* Altura dinámica: 75% del alto de la pantalla para verse moderno */
    height: 75vh; 
    min-height: 600px; /* Evita que se vea muy chico en pantallas bajas */
    
    background-size: cover;
    background-position: center center; /* Centra la imagen para que se vea el auto */
    
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    justify-content: flex-start; /* Alinea el texto a la izquierda */
    padding-left: 10%; /* Margen izquierdo del texto */
    color: #fff;

}

/* Capa oscura degradada para que el texto blanco se lea sobre cualquier imagen */
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

/* Contenedor del texto */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Marca pequeña arriba del título (TOYOTA) */
.hero-brand {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    opacity: 0.9;
}

/* Título del auto */
.hero-title {
    font-size: 4rem; /* Texto grande */
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1;
    text-transform: uppercase;
}

/* Frase / Slogan */
.hero-slogan {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 1;
}

/* Ajustes para celular/tablet */
@media (max-width: 768px) {
    .modelo-hero { 
        height: 400px; /* Altura fija en móvil */
        padding-left: 20px;
        margin-top: 120px; 
        background-position: center;
    }
    .hero-title { font-size: 2.5rem; }
    .hero-slogan { font-size: 1.2rem; }
}

/* Estilos Texto Info Auto */
.info-auto-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.toyota-modelo {
    font-family: 'Manrope', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a1a1a; /* Negro suave Toyota */
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}
.toyota-frase {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #EB0A1E; /* Rojo Toyota Oficial */
    margin: 5px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.toyota-precio {
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-top: 10px;
}
.toyota-precio small {
    font-size: 0.9rem;
    font-weight: 400;
    color: #666;
}

/* =================================================================
   ESTILOS DEL BUSCADOR Y GRILLA DE RESULTADOS
   ================================================================== */

/* Contenedor del buscador */
.search-container {
    max-width: 600px;
    margin: 0 auto 40px auto;
    position: relative;
    padding: 0 20px;
}

/* El input de búsqueda */
.search-input {
    width: 100%;
    padding: 15px 50px 15px 25px; /* Espacio a la derecha para el icono */
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 1.1rem;
    font-family: var(--font-primary);
    outline: none;
    transition: all 0.3s ease;
    background-color: #fff;
    color: var(--text-dark);
}

.search-input:focus {
    border-color: var(--toyota-red);
    box-shadow: 0 4px 12px rgba(235, 10, 30, 0.1);
}

/* Icono de lupa */
.search-icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none; /* Para que el click pase al input */
}
.search-input:focus + .search-icon {
    color: var(--toyota-red);
}

/* GRILLA DE RESULTADOS (Oculta por defecto) */
.search-results-grid {
    display: none; /* Se activa con JS */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-bottom: 40px;
}

.search-results-grid.active {
    display: grid;
}

/* Mensaje cuando no hay resultados */
.no-results-message {
    display: none;
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* RESPONSIVE PARA LA GRILLA DE BÚSQUEDA */
@media (max-width: 992px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}



/* --- ESTILOS DEL SUBNAV --- */
.subnav-bar {
    background-color: #fff; /* Fondo blanco limpio */
    border-bottom: 1px solid #e0e0e0;
    position: sticky; /* Se pega al hacer scroll */
    top: 70px; /* Altura de tu Header principal (ajusta si es necesario) */
    z-index: 990; /* Debajo del header principal (1000) pero sobre el contenido */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
    padding: 0 20px;
    transition: top 0.3s;
}

.subnav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
    overflow-x: auto; /* Permite scroll horizontal en celular */
    white-space: nowrap; /* Evita que los textos se rompan */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

/* Ocultar barra de scroll en el menú */
.subnav-list::-webkit-scrollbar { display: none; }

.subnav-list li {
    margin: 0;
}

.subnav-list a {
    display: block;
    padding: 15px 5px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-family: 'Manrope', sans-serif; /* Tu fuente */
}

.subnav-list a:hover,
.subnav-list a.active {
    color: #EB0A1E; /* Rojo Toyota */
    border-bottom: 3px solid #EB0A1E;
}

/* --- AJUSTE DE SCROLL (CRÍTICO) --- */
/* Esto hace que al dar clic, la sección baje un poco para no quedar tapada por el header */
section {
    scroll-margin-top: 140px; /* 70px Header + 50px Subnav + 20px aire */
}

/* Responsive */
@media (max-width: 768px) {
    .subnav-bar {
        justify-content: flex-start; /* Alinear a la izquierda en móvil */
        top: 60px; /* Ajuste para altura de header móvil */
    }
    .subnav-list {
        padding: 0 10px;
        width: 100%;
    }
}

/* --- MODIFICACIÓN AL HEADER PRINCIPAL --- */
.custom-header {
    /* Mantenemos lo que tenías */  
    transition: transform 0.3s ease-in-out, background-color 0.3s ease; 
    /* 'transform' es clave para ocultarlo suavemente */
}

/* Clase para ocultar el header moviéndolo hacia arriba */
.custom-header.header-hidden {
    transform: translateY(-100%);
}


/* --- SUBNAV BAR --- */
.subnav-bar {
    position: fixed;
    top: 0; /* Se coloca en el top, pero... */
    left: 0;
    width: 100%;
    z-index: 990;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    
    /* ...por defecto está OCULTO hacia arriba (-100%) */
    transform: translateY(-100%); 
    transition: transform 0.3s ease-in-out;
}

/* Clase para mostrar el Subnav (baja a su posición) */
.subnav-bar.subnav-visible {
    transform: translateY(0);
}