/* ============================================================
   NASTRAC — Capa de rediseño premium (dark / racing / cromo)
   Carga DESPUÉS de nissan-theme.css y lo transforma.
   Paleta oficial NASTRAC completa.
   ============================================================ */

:root {
    --nas-carbon:   #030406;
    --nas-graphite: #111820;
    --nas-graphite-hi: #18212b;
    --nas-chrome:   #E8EDF2;
    --nas-steel:    #8B969F;
    --nas-red:      #F20F16;
    --nas-blue:     #006DFF;
    --nas-neon:     #00A6FF;
    --nas-white:    #F7F8FA;

    --nas-border:   rgba(232,237,242,.10);
    --nas-border-hi:rgba(232,237,242,.22);
    --nas-glass:    rgba(255,255,255,.045);
    --nas-glass-2:  rgba(255,255,255,.07);

    --nas-red-grad:   linear-gradient(135deg,#ff2f35 0%,#F20F16 55%,#b00a0e 100%);
    --nas-blue-grad:  linear-gradient(135deg,#00A6FF 0%,#006DFF 100%);
    --nas-metal:      linear-gradient(180deg,#232c35 0%,#131b23 48%,#05080c 100%);
    --nas-chrome-txt: linear-gradient(180deg,#ffffff 0%,#e8edf2 42%,#9aa6 af 60%,#e8edf2 100%);

    --nas-glow-red:  0 0 0 1px rgba(242,15,22,.5), 0 10px 34px -8px rgba(242,15,22,.55);
    --nas-glow-blue: 0 0 0 1px rgba(0,109,255,.5), 0 10px 34px -8px rgba(0,166,255,.5);
    --nas-shadow:    0 18px 50px -18px rgba(0,0,0,.75);
    --nas-ease:      cubic-bezier(.22,.61,.36,1);
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- BASE OSCURO ---------- */
body {
    background: var(--nas-carbon) !important;
    color: var(--nas-chrome) !important;
}
main { background:
    radial-gradient(1200px 600px at 80% -5%, rgba(0,109,255,.10), transparent 60%),
    radial-gradient(1000px 500px at -10% 20%, rgba(242,15,22,.08), transparent 55%),
    var(--nas-carbon);
}
h1,h2,h3,h4,h5,h6,
.section-title, .banner-content h1, .card-title, .model-card h3, .vehicle-title,
.full-banner-stat .num, .cta-banner h2 {
    font-family: 'Oswald','Arial Narrow',sans-serif !important;
    letter-spacing: .5px;
    color: var(--nas-chrome) !important;
}
::selection { background: var(--nas-red); color:#fff; }

/* ---------- TOP BAR + HEADER ---------- */
.top-bar { background: #05080c !important; color: var(--nas-steel) !important; border-bottom:1px solid var(--nas-border); }
.top-bar a, .top-bar span { color: var(--nas-steel) !important; }
.top-bar .social-icon { color: var(--nas-chrome) !important; }

.header {
    background: rgba(6,9,13,.82) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--nas-border) !important;
    box-shadow: 0 6px 30px -12px #000 !important;
}
.header-logo-text .brand {
    font-family:'Oswald',sans-serif !important; font-weight:700 !important;
    letter-spacing:2px; color: var(--nas-chrome) !important;
}
.header-logo-text .dealer { color: var(--nas-steel) !important; letter-spacing:3px; font-size:.62rem !important; }
.header nav a { color: var(--nas-chrome) !important; font-weight:600; position:relative; transition:color .2s var(--nas-ease); }
.header nav a::after {
    content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
    background: var(--nas-red-grad); transition:width .25s var(--nas-ease);
}
.header nav a:hover { color:#fff !important; }
.header nav a:hover::after { width:100%; }
.header nav a.nav-cta { color:#fff !important; background: var(--nas-red-grad); box-shadow: var(--nas-glow-red); border:none; }
.header nav a.nav-cta::after { display:none; }
.header nav a.nav-cta:hover { transform: translateY(-1px); }

/* ---------- BOTONES ---------- */
.btn { font-weight:700 !important; letter-spacing:.4px; border-radius:10px !important; transition: all .22s var(--nas-ease) !important; }
.btn-primary {
    background: var(--nas-red-grad) !important; border:none !important; color:#fff !important;
    box-shadow: 0 8px 26px -10px rgba(242,15,22,.7) !important;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--nas-glow-red) !important; }
.btn-outline-white, .btn-outline, .btn-outline-primary {
    background: rgba(255,255,255,.03) !important; color: var(--nas-chrome) !important;
    border:1px solid var(--nas-border-hi) !important; backdrop-filter: blur(6px);
}
.btn-outline-white:hover, .btn-outline:hover, .btn-outline-primary:hover {
    border-color: var(--nas-neon) !important; color:#fff !important; box-shadow: var(--nas-glow-blue) !important; transform: translateY(-2px);
}
.btn-white { background: var(--nas-chrome) !important; color: var(--nas-carbon) !important; border:none !important; }
.btn-dark { background: var(--nas-graphite) !important; color: var(--nas-chrome) !important; border:1px solid var(--nas-border) !important; }

/* ---------- HERO ---------- */
.hero-banner { border-bottom: 1px solid var(--nas-border); }
.banner-overlay {
    background:
      linear-gradient(115deg, rgba(3,4,6,.94) 0%, rgba(3,4,6,.72) 42%, rgba(3,4,6,.30) 70%, rgba(3,4,6,.15) 100%),
      radial-gradient(60% 90% at 12% 50%, rgba(0,109,255,.18), transparent 60%) !important;
}
.banner-tag {
    display:inline-block; background: var(--nas-red-grad); color:#fff !important;
    padding:.4rem 1rem; border-radius:999px; font-weight:700; letter-spacing:1.5px;
    font-size:.72rem; text-transform:uppercase; box-shadow: var(--nas-glow-red);
}
.banner-content h1 {
    font-size: clamp(2.6rem, 6vw, 5rem) !important; line-height:.98 !important;
    text-transform: uppercase; letter-spacing:1px; color:#fff !important;
    text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.banner-content h1 span { color: var(--nas-red) !important; }
.banner-content p { color: var(--nas-steel) !important; font-size:1.05rem; max-width:44ch; }
.banner-arrow { background: rgba(6,9,13,.55) !important; border:1px solid var(--nas-border-hi) !important; color: var(--nas-chrome) !important; backdrop-filter: blur(6px); }
.banner-arrow:hover { background: var(--nas-red) !important; border-color: var(--nas-red) !important; }
.banner-dot { background: rgba(232,237,242,.35) !important; }
.banner-dot.active { background: var(--nas-red) !important; box-shadow: 0 0 10px var(--nas-red); width:26px !important; border-radius:999px; }

/* ---------- SECCIONES ---------- */
.promo-banners, .service-section, .testimonials, .calculator-section,
.calculator-and-lead-section, .map-section, .models-section, section {
    background: transparent;
}
section:nth-of-type(even) { background: var(--nas-graphite); }
.section-header { text-align:center; }
.section-tag {
    color: var(--nas-red) !important; font-weight:700; letter-spacing:3px; text-transform:uppercase; font-size:.75rem;
    display:inline-flex; align-items:center; gap:.5rem;
}
.section-tag::before, .section-tag::after { content:''; width:26px; height:2px; background: var(--nas-red-grad); display:inline-block; }
.section-title { font-size: clamp(1.9rem,4vw,3rem) !important; text-transform:uppercase; color:#fff !important; }
.section-title span { color: var(--nas-neon) !important; }
.section-subtitle { color: var(--nas-steel) !important; }
.section-divider { background: var(--nas-border) !important; }

/* ---------- CARDS (unidades / modelos / promos / catálogo) ---------- */
.card, .model-card, .promo-card, .service-card, .vehicle-card, .calc-card, .testimonial-card {
    background-color: var(--nas-glass) !important;   /* -color: no borra el background-image de las promo-card */
    border: 1px solid var(--nas-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--nas-shadow) !important;
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: transform .28s var(--nas-ease), box-shadow .28s var(--nas-ease), border-color .28s var(--nas-ease) !important;
}
.card:hover, .model-card:hover, .vehicle-card:hover, .promo-card:hover, .service-card:hover {
    transform: translateY(-6px);
    border-color: var(--nas-border-hi) !important;
    box-shadow: var(--nas-glow-red) !important;
}
.card-img, .model-card-img, .vehicle-card img, .card img, .promo-card img {
    transition: transform .5s var(--nas-ease) !important;
}
.card:hover .card-img, .model-card:hover .model-card-img, .vehicle-card:hover img, .promo-card:hover img {
    transform: scale(1.06);
}
.card-title, .model-card h3, .vehicle-title { color:#fff !important; text-transform:uppercase; }
.card-body, .card-details, .card-detail, .model-card p { color: var(--nas-steel) !important; }
.card-badge, .card-price-badge, .promo-card-tag {
    background: var(--nas-blue-grad) !important; color:#fff !important; border:none !important;
    letter-spacing:1px; text-transform:uppercase; box-shadow: 0 6px 18px -8px rgba(0,166,255,.7);
}
.price-value, .card-price, .price { color:#fff !important; font-family:'Oswald',sans-serif !important; }
.price-value { color: var(--nas-red) !important; }
.price-label { color: var(--nas-steel) !important; }

/* promo cards: overlay que deja ver la foto arriba y oscurece abajo para el texto */
.promo-card { background-size: cover !important; background-position: center !important; }
.promo-card-overlay {
    background: linear-gradient(180deg, rgba(3,4,6,.12) 0%, rgba(3,4,6,.35) 45%, rgba(3,4,6,.88) 100%) !important;
    display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
}

/* chip/hairline cromada arriba de cada card */
.card::before, .model-card::before, .vehicle-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, transparent, var(--nas-neon), var(--nas-red), transparent);
    opacity:.0; transition:opacity .3s var(--nas-ease); z-index:2;
}
.card:hover::before, .model-card:hover::before, .vehicle-card:hover::before { opacity:.9; }

/* ---------- STATS / FULL BANNER ---------- */
.full-banner, .cta-banner {
    background: var(--nas-metal) !important;
    border-top:1px solid var(--nas-border); border-bottom:1px solid var(--nas-border);
}
.full-banner-overlay { background: radial-gradient(80% 120% at 50% 0%, rgba(0,109,255,.14), transparent 60%) !important; }
.full-banner-stat .num, .full-banner-stat strong, .full-banner-stat b {
    color: var(--nas-neon) !important; font-family:'Oswald',sans-serif !important;
    text-shadow: 0 0 22px rgba(0,166,255,.45);
}
.full-banner-stat, .full-banner-stats { color: var(--nas-chrome) !important; }

/* ---------- CALCULADORA ---------- */
.calc-card, .calculator-section .card { background: var(--nas-glass-2) !important; border:1px solid var(--nas-border) !important; }
.calc-card label, .calculator-section label { color: var(--nas-steel) !important; }
.calc-card input, .calc-card select, .calculator-section input, .calculator-section select {
    background: rgba(0,0,0,.35) !important; border:1px solid var(--nas-border) !important; color:#fff !important;
}
.calc-card input:focus, .calculator-section input:focus { border-color: var(--nas-neon) !important; box-shadow:0 0 0 3px rgba(0,166,255,.2) !important; }
input[type=range]{ accent-color: var(--nas-red); }

/* ---------- TESTIMONIOS ---------- */
.testimonial-quote { color: var(--nas-red) !important; opacity:.5; }
.testimonial-stars { color: var(--nas-red) !important; }
.testimonial-text { color: var(--nas-chrome) !important; }
.testimonial-name { color:#fff !important; }
.testimonial-vehicle { color: var(--nas-neon) !important; }
.testimonial-avatar { background: var(--nas-red-grad) !important; color:#fff !important; }

/* ---------- CTA BANNER ---------- */
.cta-banner h2 { color:#fff !important; text-transform:uppercase; }
.cta-banner p { color: var(--nas-steel) !important; }

/* ---------- MAPA ---------- */
.map-section iframe { filter: grayscale(.25) invert(.9) hue-rotate(180deg) contrast(.95); border-radius:14px; border:1px solid var(--nas-border); }

/* ---------- FOOTER ---------- */
.footer { background: #05080c !important; color: var(--nas-steel) !important; border-top:1px solid var(--nas-border); }
.footer h4 { color:#fff !important; font-family:'Oswald',sans-serif !important; letter-spacing:1px; text-transform:uppercase; }
.footer a, .footer li a, .footer-contact-item a, .footer p { color: var(--nas-steel) !important; transition:color .2s; }
.footer a:hover { color: var(--nas-neon) !important; }
.footer-social a { border:1px solid var(--nas-border); color: var(--nas-chrome) !important; border-radius:10px; transition:all .2s; }
.footer-social a:hover { background: var(--nas-red); border-color: var(--nas-red); color:#fff !important; }
.footer-bottom { border-top:1px solid var(--nas-border) !important; color: var(--nas-steel) !important; }

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float { box-shadow: 0 10px 30px -8px rgba(37,211,102,.6) !important; }

/* ---------- MISC ---------- */
.announcement-bar { background: var(--nas-red-grad) !important; }
a { color: var(--nas-neon); }

/* ---------- CATÁLOGO (/vehiculos) ---------- */
.inventory-showcase, .empty-inventory, .catalog-page { background: transparent !important; }
.page-header { background: var(--nas-graphite) !important; border-bottom:1px solid var(--nas-border) !important; }
.filters-bar {
    background: var(--nas-glass-2) !important;
    border: 1px solid var(--nas-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--nas-shadow) !important;
}
.filters-form input, .filters-form select, .filters-bar input, .filters-bar select {
    background: rgba(0,0,0,.35) !important; border:1px solid var(--nas-border) !important; color:#fff !important;
}
.filters-form input::placeholder { color: var(--nas-steel) !important; }
.filters-form select option { background:#0b1016; color:#fff; }
.vehicle-card-content, .vehicle-card-header, .vehicle-card-specs,
.vehicle-card-pricing, .vehicle-card-actions { background: transparent !important; color: var(--nas-chrome) !important; }
.vehicle-title { color:#fff !important; text-transform:uppercase; }
.vehicle-year { color: var(--nas-red) !important; font-weight:700 !important; }
.vehicle-version { color: var(--nas-steel) !important; }
.vehicle-spec { color: var(--nas-steel) !important; }
.vehicle-spec svg, .vehicle-spec i { color: var(--nas-red) !important; }
.vehicle-price, .price-value, .vehicle-price .price-value, .monthly-value {
    color: var(--nas-red) !important; font-family:'Oswald',sans-serif !important;
}
.price-label, .monthly-label, .vehicle-monthly { color: var(--nas-steel) !important; }

/* ---------- FICHA DE UNIDAD (vehicle detail) ---------- */
.vehicle-detail-header { background: var(--nas-graphite) !important; border-bottom: 1px solid var(--nas-border) !important; }
.breadcrumb, .breadcrumb a { color: var(--nas-steel) !important; }
.breadcrumb a:hover { color: var(--nas-neon) !important; }
.vehicle-title { color:#fff !important; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.vehicle-subtitle { color: var(--nas-steel) !important; }
.vehicle-price-box, .vehicle-info-panel, .tech-specs, .lead-form-box, .calculator-and-lead-wrapper > * {
    background: var(--nas-glass-2) !important;
    border: 1px solid var(--nas-border) !important;
    color: var(--nas-chrome) !important;
    box-shadow: var(--nas-shadow) !important;
}
.vehicle-price-box .price, .price, .calc-result-amount, .monthly-payment strong {
    color: var(--nas-red) !important; font-family:'Oswald',sans-serif !important;
}
.monthly-payment, .price-label, .calc-result-label, .calc-result-detail { color: var(--nas-steel) !important; }
.tech-specs h2, .tech-specs h3, .lead-form-box h2, .lead-form-box h3, .vehicle-info-panel h2, .vehicle-info-panel h3 {
    color:#fff !important; font-family:'Oswald',sans-serif !important; text-transform:uppercase;
}
.spec-item { background: rgba(255,255,255,.03) !important; border: 1px solid var(--nas-border) !important; border-radius:10px !important; }
.spec-item .label { color: var(--nas-steel) !important; }
.spec-item .value { color:#fff !important; font-weight:700 !important; }
.gallery-thumbnails img { border:1px solid var(--nas-border) !important; border-radius:8px; }
.gallery-main-image, .gallery-main-image img { border-radius:14px !important; }
.lead-form-box input, .lead-form-box select, .lead-form-box textarea {
    background: rgba(0,0,0,.35) !important; border:1px solid var(--nas-border) !important; color:#fff !important;
}

/* ---------- MODALES (dark premium + overlay fijo; nissan-modals.css no se carga) ---------- */
.modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 10000 !important;
    display: flex;            /* sin !important: x-show pone display:none al cerrar */
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    overflow-y: auto !important;
    background: rgba(3,4,6,.80) !important;
    backdrop-filter: blur(6px);
}
.modal-container {
    background: linear-gradient(180deg,#141b23 0%,#0b1016 100%) !important;
    border: 1px solid var(--nas-border-hi) !important;
    border-radius: 18px !important;
    box-shadow: var(--nas-shadow), var(--nas-glow-red) !important;
    color: var(--nas-chrome) !important;
    width: 100% !important;
    max-width: 560px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    margin: auto !important;
}
.modal-container h2 { color:#fff !important; font-family:'Oswald',sans-serif !important; text-transform:uppercase; letter-spacing:.5px; }
.modal-container p, .modal-container label { color: var(--nas-steel) !important; }
.modal-container label { font-weight:600 !important; }
.modal-container input,
.modal-container select,
.modal-container textarea,
.modal-container .form-control {
    background: rgba(0,0,0,.35) !important;
    border: 1px solid var(--nas-border) !important;
    color: #fff !important;
}
.modal-container input::placeholder, .modal-container textarea::placeholder { color: var(--nas-steel) !important; opacity:.7; }
.modal-container input:focus,
.modal-container select:focus,
.modal-container textarea:focus,
.modal-container .form-control:focus {
    border-color: var(--nas-neon) !important;
    box-shadow: 0 0 0 3px rgba(0,166,255,.18) !important;
    outline: none !important;
}
.modal-container select option { background: #0b1016; color:#fff; }
.modal-close { color: var(--nas-chrome) !important; opacity:.8; transition:opacity .2s; }
.modal-close:hover { opacity:1; color: var(--nas-red) !important; }
/* confirmación de éxito */
.modal-container [style*="d4edda"], .modal-container [style*="#d4edda"] {
    background: rgba(0,166,255,.10) !important;
}
.modal-container [style*="155724"] { color: var(--nas-neon) !important; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .card:hover, .vehicle-card:hover, .model-card:hover { transform:none; }
}