/* === 0. COLOR DINAMICO DEL VEHICULO (!MODIFICAR SOLO AQUI!) === */
:root { 
    --vehiculo-color: #b3c4ba; /* Cambia este HEX por el color principal del auto */
} 

#wds-layout > div.wds-hero-body > section.text-content { 
    background: linear-gradient(0deg, var(--vehiculo-color), var(--vehiculo-color) 1%, rgba(0,0,0,.0001)) !important; 
}

.bottom-section { 
    background: var(--vehiculo-color) !important; 
}

/* === 1. HERO BANNER Y PRECIOS PRINCIPALES === */
.chevron-container { background: none !important; }

#wds-layout > section > div.wds-row.wds-align-center > div.wds-col-12.wds-col-md-6.wds-offset-lg-wide-1.pricing-info-wrapper > div > div.wds-col-12.pricing-info > div > p.total-price-value { 
    font-size: min(max(16px, 8vw), 32px); 
    text-shadow: 1px 1px 4px rgba(0,0,0,0.1); 
}

#wds-layout > section > div.wds-row.wds-align-center > div.wds-col-12.wds-col-md-6.wds-col-lg-wide-5.vehicle-description > p { 
    font-size: min(max(16px, 8vw), 28px) !important; 
    text-shadow: 1px 1px 4px rgba(0,0,0,0.1); 
}

/* === 2. IMAGENES DE COMPONENTE 402 === */
.wds-feature-container picture img { 
    max-width: 100%; 
    width: 100%; 
    border-radius: 20px; 
    overflow: hidden; 
}

/* === 2.1 IMAGENES DE COMPONENTE 400 (CARRUSEL VS HERO) === */
/* Redondear imagenes SOLO cuando es carrusel (.ns-story-gallery) */
.ns-story-gallery .gallery__images .ns-responsive-media,
.ns-story-gallery .gallery__images .ns-responsive-media img {
    border-radius: 20px !important;
}

/* Evitar que se corte la parte inferior de la imagen activa al desplazarse hacia arriba */
.ns-story-gallery .ns-common-section-media,
.ns-story-gallery .gallery, 
.ns-story-gallery .gallery__images {
    overflow: visible !important; 
}

/* === 3. CARRUSEL DE VERSIONES: ESTRUCTURA Y TEXTOS === */
/* --- Ocultar botones y saltos de linea basura generados por el CMS --- */
#container .gradeCarouselV2 .preferred-vehicle, 
.c_218_v2 .grade-features, 
.price-item p:not(.label) br, 
.price-item p.description:empty { 
    display: none !important; 
}

/* --- Contenedor principal de la Tarjeta --- */
.c_218_v2 .c_218_1_v2 { 
    border: 1px solid #e8e8e8 !important; 
    border-radius: 10px !important; 
    padding: 24px 20px 30px 20px !important; 
    margin: 5px 10px 20px 10px !important; 
    background-color: #ffffff; 
    height: 100%; 
    box-sizing: border-box; 
}

/* --- Tipografia base y especificaciones --- */
#container .gradeCarouselV2 .global-finance .price-item.primary-price strong { font-family: "Nissan Regular"; }
.global-finance .price-item.primary-price p:not(.label) { font-size: clamp(15px, 0.5vw, 18px) !important; line-height: 1.5 !important; margin: 10px 0 12px 0 !important; }
.global-finance .price-item.primary-price p:not(.label) b { font-size: inherit !important; }

/* === 4. CARRUSEL DE VERSIONES: FLECHAS Y PUNTOS (SLICK CONTROLS) === */
.c_218_v2 .slick-track { display: flex !important; }
.c_218_v2 .slick-slide { height: auto !important; }

.c_218_v2 .slick-prev, .c_218_v2 .slick-next { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 50 !important; width: 40px !important; height: 40px !important; background: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; }
.c_218_v2 .slick-prev { left: 0px !important; }
.c_218_v2 .slick-next { right: 0px !important; }
.c_218_v2 .slick-prev:before, .c_218_v2 .slick-next:before { color: #000000 !important; font-size: 28px !important; opacity: 1 !important; }
.c_218_v2 .slick-prev.slick-disabled, .c_218_v2 .slick-next.slick-disabled { opacity: 0.2 !important; pointer-events: none !important; }

.c_218_v2 .slick-dots { position: absolute !important; bottom: -40px !important; left: 0 !important; right: 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; }
.c_218_v2 .slick-dots li { margin: 0 6px !important; width: auto !important; height: auto !important; }
.c_218_v2 .slick-dots li button { font-size: 0 !important; line-height: 0 !important; display: block; width: 10px !important; height: 10px !important; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background-color: #cccccc !important; border-radius: 50% !important; transition: all 0.3s ease; }
.c_218_v2 .slick-dots li button:before { display: none !important; }
.c_218_v2 .slick-dots li.slick-active button { background-color: #000000 !important; width: 24px !important; border-radius: 10px !important; }

/* === 5. BOTON "EXPLORA MAS VERSIONES" (PILDORA NEGRA) === */
.link-group ul li a { display: inline-block !important; background-color: #000000 !important; color: #ffffff !important; text-decoration: none !important; padding: 14px 40px !important; border-radius: 50px !important; font-size: 16px !important; font-weight: 600 !important; text-align: center !important; white-space: nowrap !important; width: auto !important; transition: all 0.3s ease !important; }
.link-group ul li a:hover { background-color: #333333 !important; transform: translateY(-2px) !important; }

/* === 6. PROMOCIONES: TARJETAS REDONDEADAS Y CONTENIDO === */
ul.offers { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 30px !important; list-style: none !important; padding: 0 !important; margin: 50px auto !important; max-width: 1050px !important; }
ul.offers li { flex: 1 1 350px !important; max-width: 480px !important; display: flex !important; margin: 0 !important; }
ul.offers .c_018-1 { width: 100% !important; border: 1px solid #e8e8e8 !important; border-radius: 16px !important; padding: 35px 30px !important; display: flex !important; flex-direction: column !important; background-color: #ffffff !important; position: relative !important; box-shadow: none !important; transition: border-color 0.3s ease !important; }
ul.offers .c_018-1:hover { border-color: #cccccc !important; }

.c_018-1 .offer-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; padding-bottom: 20px !important; background-color: transparent !important; height: auto !important; }
.c_018-1 .offer-header::after { display: none !important; }
.c_018-1 h2.headline.double-offer { color: #C3002f !important; font-family: "Nissan Bold", Verdana, Arial, sans-serif !important; letter-spacing: 0.05em !important; font-size: 24px !important; text-align: center !important; text-transform: uppercase !important; margin: 0 0 12px 0 !important; line-height: 1.2 !important; }
.c_018-1 h3.header-strapline { font-size: 16px !important; font-family: "Nissan Regular", Verdana, Arial, sans-serif !important; color: #000000 !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; text-align: center !important; }
.c_018-1 h2.headline.second-offer { font-size: 14px !important; font-family: "Nissan Light", Verdana, Arial, sans-serif !important; color: #666666 !important; text-transform: uppercase !important; margin: 0 !important; text-align: center !important; }

.c_018-1 .offer-content { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.c_018-1 .offer-info { height: auto !important; margin: 15px 0 20px 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; text-align: center !important; }
.c_018-1 .offer-info h3.offer-model, .c_018-1 .offer-info h4.offer-applicability { font-family: "Nissan Bold", Verdana, Arial, sans-serif !important; font-size: 18px !important; color: #000000 !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1.2 !important; display: block !important; }
.c_018-1 .vehicle-image, .c_018-1 .vehicle-image .c_029-1, .c_018-1 .vehicle-image picture { display: block !important; width: 100% !important; text-align: center !important; }
.c_018-1 .vehicle-image img { display: inline-block !important; width: 100% !important; max-width: 320px !important; height: auto !important; margin: 0 auto !important; transform: scale(1.5) !important; padding: 20px 0 !important; }

.c_018-1 .offer-bottom { display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: 20px !important; width: 100% !important; }
.c_018-1 .cta-view-more { background-color: transparent !important; color: #000000 !important; font-family: "Nissan Bold", Verdana, Arial, sans-serif !important; font-size: 14px !important; text-transform: uppercase !important; border: none !important; border-bottom: 2px solid #000000 !important; padding: 0 0 4px 0 !important; cursor: pointer !important; transition: all 0.2s ease !important; text-decoration: none !important; }
.c_018-1 .cta-view-more:hover { color: #C3002f !important; border-bottom: 2px solid #C3002f !important; }
.c_018-1 .legal-information { font-size: 11px !important; color: #999999 !important; height: auto !important; margin-top: 15px !important; text-align: center !important; }

/* === 7. PROMOCIONES: VENTANA MODAL FLOTANTE === */
.modal-dialog-container .modal-content .c_193-0 .overview .image-and-ctas .actions ul.ctas a.cta1 { background-color: #eeeeee !important; color: #000 !important; border: none !important; }
.modal-dialog-container .modal-content .c_193-0 .overview .image-and-ctas .actions ul.ctas a.cta1::after { color: #000 !important; }
.modal-dialog-container .modal-content .c_193-0 .image-and-ctas .actions .ctas a::after { color: #fff !important; }
.modal-dialog-container .c_193-0 .heading-group h2 span { color: #343434 !important; display: block !important; word-wrap: break-word !important; font-size: 28px !important; font-family: "Nissan Light", "Nissan Regular", Verdana, Arial, sans-serif !important; line-height: 1 !important; }
.modal-dialog-container .c_193-0 .overview h1 em { color: #C3002f !important; font-family: "Nissan Regular", Verdana, Arial, sans-serif !important; letter-spacing: .1em !important; font-size: 1.2em !important; }
.modal-dialog-container .c_193-0 p.overview-apr-term { font-family: "Nissan Light", Verdana, Arial, sans-serif !important; color: #343434 !important; font-size: 1.5em !important; margin-bottom: 0em !important; }
.modal-dialog-container .c_193-0 .overview h1:last-of-type { margin-top: -10px !important; }
.modal-dialog-container .c_193-0 .overview h1:last-of-type em { font-size: 0.4em !important; letter-spacing: 0.15em !important; color: #000 !important; font-family: "Nissan Light", "Nissan Regular", Verdana, Arial, sans-serif !important; line-height: 1.2 !important; }
.modal-dialog-container .c_193-0 .overview h2 em { color: #343434 !important; font-family: "Nissan Light", "Nissan Regular", Verdana, Arial, sans-serif !important; line-height: 1 !important; font-size: 15px !important; }
.modal-dialog-container .c_193-0 .overview h2 span { font-size: 13px !important; }
.modal-dialog-container .c_193-0 .overview p.overview-ends span { font-family: "Nissan Light", Verdana, Arial, sans-serif !important; color: #252525 !important; font-size: 14px !important; line-height: 1.2 !important; }
.modal-dialog-container .c_193-0 .smallprint h2 span { font-size: 9.8px !important; color: #343434 !important; font-family: "Nissan Light", "Nissan Regular", Verdana, Arial, sans-serif !important; line-height: 1 !important; }
.modal-dialog-container .c_193-0 .smallprint { font-size: 9.8px !important; color: #666 !important; font-family: "Nissan Light" !important; }
.modal-dialog-container .c_193-0 .overview .overview-editorial pre { color: #666 !important; font-family: "Nissan Light", "Nissan Regular", Verdana, Arial, sans-serif !important; }

/* === 8. MENU FLOTANTE INFERIOR (ESCRITORIO: PILDORA SOLIDA NEGRA) === */
.c_255.floating-nav { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; border-radius: 50px !important; overflow: hidden !important; }
.c_255 .nav-link { background-color: #000000 !important; transition: color 0.3s ease !important; }
.c_255 .nav-link:hover { color: #C3002f !important; }
.c_255 .nav-item:last-child { border-right: none !important; }

/* === 9. FIXES GENERALES MOVILES === */
/* --- Menu Superior y Chevron --- */
#vlp-plus .ns-sticky-nav .ns-sticky-nav-inner nav.navbar.navbar-expand-md.bg-dark.fixed-top { background: transparent !important; box-shadow: none !important; border: none !important; }
#vlp-plus .ns-sticky-nav .ns-sticky-nav-inner a.navbar-brand.ns-arrow-down { background-color: #000000 !important; color: #ffffff !important; border: none !important; border-radius: 50px !important; }
#vlp-plus .ns-sticky-nav .ns-sticky-nav-inner a.navbar-brand.ns-arrow-down::before, #vlp-plus .ns-sticky-nav .ns-sticky-nav-inner a.navbar-brand.ns-arrow-down::after { color: #ffffff !important; background-color: transparent !important; }


/* ========================================================================= */
/* MEDIA QUERIES MOVILES (TABLETS Y SMARTPHONES)                             */
/* ========================================================================= */

@media screen and (max-width: 59.9375em) {
    /* --- Centrado absoluto del boton "Explora mas versiones" --- */
    .c_012 .container-inner, .c_012 .link-group, .c_012 .link-group ul { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .c_012 .link-group ul li { display: flex !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; }

    /* --- Centrado de Imagenes y Pie de Foto de Atributos (Componente 402) --- */
    .wds-feature-container .wds-col-12:not(.feature-body-text) { padding: 0 !important; }
    .wds-feature-container .custom-slider-container, .wds-feature-container .slider-list, .wds-feature-container .slider-media-content, .wds-feature-container picture { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; }
    
    .wds-feature-container .slider-media { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }
    .wds-feature-container picture img { width: 92% !important; margin: 0 auto !important; display: block !important; }
    .wds-feature-container .feature-text { width: 92% !important; margin: 15px auto 0 auto !important; text-align: left !important; display: block !important; }
    .wds-feature-container .feature-slide-label { margin-bottom: 5px !important; padding: 0 !important; }

    /* --- Menu Flotante Inferior (Formato App Nativa - 3 Botones) --- */
    .c_255 .nav-list .nav-item:nth-child(n+4) { display: none !important; }
    .c_255 .nav-list .nav-item { display: flex !important; flex: 1 1 33.33% !important; width: 33.33% !important; background-color: transparent !important; border: none !important; padding: 0 !important; }
    .c_255.floating-nav-bottom { background-color: #000000 !important; border-radius: 30px !important; width: 96% !important; left: 2% !important; bottom: 15px !important; padding: 10px 0 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; height: auto !important; overflow: hidden !important; }
    .c_255 .nav-list { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; background: transparent !important; }
    
    /* --- Configuracion de iconos sobre texto --- */
    .c_255 .nav-item a.nav-link { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background-color: transparent !important; white-space: normal !important; text-align: center !important; padding: 0 4px !important; font-size: 8px !important; line-height: 1.1 !important; font-family: "Nissan Regular", Arial, sans-serif !important; width: 100% !important; gap: 0 !important; }
    .c_255 .nav-item a.nav-link::before { font-size: 18px !important; margin: 0 0 4px 0 !important; display: block !important; position: relative !important; }

    /* --- Centrado de Imagen y Numeros en Carrusel 400 --- */
    .ns-story-gallery .ns-right-column { padding: 0 !important; width: 100% !important; }
    .ns-story-gallery .gallery { width: 92% !important; margin: 0 auto !important; }
    .ns-story-gallery .gallery__images, .ns-story-gallery .gallery__images .ns-responsive-media, .ns-story-gallery .gallery__images .ns-responsive-media img { width: 100% !important; display: block !important; margin: 0 auto !important; }
    
    .ns-story-gallery .gallery__pagination { transform: translateY(-25px) !important; position: relative !important; z-index: 10 !important; }
    #vlp-plus .ns-story-gallery .gallery__pagination li { font-size: 16px !important; color: #ffffff !important; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) !important; cursor: pointer !important; transition: color 0.3s ease !important; }
    #vlp-plus .ns-story-gallery .gallery__pagination li.active { color: #ffffff !important; border-bottom: 2px solid #C3002f !important; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9) !important; }
}

/* --- Centrar la card unica en el carrusel de versiones (Resoluciones menores) --- */
@media (max-width: 768px) {
    .gradeCarouselV2 .slick-track { display: flex !important; justify-content: center !important; width: 100% !important; transform: none !important; }
    .gradeCarouselV2 .slick-slide { float: none !important; margin: 0 auto !important; }
    .heading-group { margin-top: -50px; margin-bottom: -30px; display: flex !important; justify-content: center !important; width: 100% !important; transform: none !important; }
    #container > div.dummy-parent-class > div.root.responsivegrid > div > div.simplehero.aem-GridColumn.aem-GridColumn--default--12 > div.column.columns12.columns.aem-GridColumn.aem-GridColumn--default--12 > div > div > div > div.gradeCarouselV2.parbase.section > div > div.slick-carousel.slick-initialized.slick-slider > div > div > div > div > div.c_184B.global-finance > div.price-item.primary-price > div > div > strong { font-size: min(max(16px, 8vw), 28px) !important; }
}