/* === 0. COLOR DINÁMICO DEL VEHÍCULO (¡MODIFICAR SOLO AQUÍ!) ========================== */
:root { --vehiculo-color: #f55141; } /* 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. IMÁGENES DE COMPONENTE 402 ============================================= */
.wds-feature-container picture img { max-width: 100%; width: 100%; border-radius: 20px; overflow: hidden; }

/* === 3. CARRUSEL DE VERSIONES: ESTRUCTURA Y TEXTOS =================================== */
/* --- Ocultar botones y saltos de línea 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; }

/* --- Tipografía 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) ===================== */
/* --- Fix alturas --- */
.c_218_v2 .slick-track { display: flex !important; }
.c_218_v2 .slick-slide { height: auto !important; }

/* --- Flechas --- */
.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; }

/* --- Puntos Indicadores --- */
.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. BOTÓN "EXPLORA MÁS VERSIONES" (PÍLDORA 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 ================================ */
/* --- Estructura y Tarjeta Base --- */
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; }

/* --- Textos de la tarjeta --- */
.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; }

/* --- Contenido Central e Imagen --- */
.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; }

/* --- Pie de tarjeta --- */
.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. MENÚ FLOTANTE INFERIOR (ESCRITORIO: PÍLDORA SÓLIDA 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 MÓVILES (APLICA A MENOS DE 959PX DE ANCHO) =================== */
/* --- Menú 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 screen and (max-width: 59.9375em) {
    /* --- Centrado absoluto del botón "Explora más 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 Imágenes de Atributos (Features) --- */
    .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, .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 picture img { width: 92% !important; margin: 0 auto !important; display: block !important; }

    /* --- Menú 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; }
    
    /* --- Configuración 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; }
}