/* ===========================================================================
   Tema oscuro estilo audi.com.ar — SÓLO colores, misma estructura/layout.
   Se carga DESPUÉS de bootstrap.css para pisar la paleta clara.
   Paleta: fondo navy oscuro, texto blanco, superficies oscuras, rojo Audi (#f50537).
   =========================================================================== */
:root {
    --ad-bg:       #0f141b;
    --ad-surface:  #1a212a;
    --ad-surface2: #232b35;
    --ad-border:   #2c3540;
    --ad-text:     #ffffff;
    --ad-text2:    #b4bac1;
}

html, body { background-color: #0f141b !important; color: #fff; }

/* Texto por defecto claro */
h1, h2, h3, h4, h5, h6, p, li, span, label, dt, dd, strong, em, blockquote, figcaption { color: #fff; }
.text-muted, .text-secondary, small.text-muted { color: #b4bac1 !important; }
a { color: #fff; }
a:hover { color: #f50537; }
/* "Audi" del logo de texto queda rojo (ya es .text-primary) */
.text-primary { color: #f50537 !important; }

/* ---- Header / nav en negro ---- */
header { background-color: #000 !important; border-bottom: 1px solid #1c2229 !important; color: #fff; }
.header-nav ul.primary-nav li a.link-header { background-color: transparent !important; color: #fff; }
.header-nav ul.primary-nav li a, .header-nav ul.member-actions li a { color: #fff; }
.search-input, .navigation .search-form .form-control { background-color: #1a212a; color: #fff; border-color: #2c3540; }

/* ---- Secciones: dejan ver el fondo oscuro del body ---- */
section, .padding-section, .wrap-slider, #modelos, #versiones, #ficha, #form, .main-title,
.block-services-section-wrap { background-color: transparent; }

/* ---- Título grande del modelo (era #000 -> invisible en oscuro) ---- */
.content-models .title-version h2 { color: #fff !important; }
.main-title h1, .main-title h2 { color: #fff; }

/* ---- Tarjetas / paneles / dropdowns oscuros ---- */
.card, .panel, .modal-content, .audi-version, .audi-version-info,
.block-services-section, .dropdown-menu {
    background-color: #1a212a !important;
    border-color: #2c3540 !important;
    color: #fff;
}
.audi-version { border: 1px solid #2c3540; }
.audi-version-info h3, .audi-version-info p { color: #fff; }

/* ---- Botones: misma forma, contraste para oscuro ---- */
.btn { color: #fff; }
.btn-dark { background-color: #1a212a; border-color: #2c3540; color: #fff; }
.btn-dark:hover { background-color: #232b35; border-color: #39434f; color: #fff; }
.btn-outline-primary { color: #fff; border-color: #5a6470; }
.btn-outline-primary:hover { background-color: #f50537; border-color: #f50537; color: #fff; }
/* .btn-primary (rojo Audi) y .btn-success (verde WhatsApp) quedan como están */

/* ---- Formularios oscuros ---- */
.form-control, .custom-select, textarea, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"], select {
    background-color: #1a212a !important;
    border-color: #2c3540 !important;
    color: #fff !important;
}
.form-control::placeholder { color: #a9b0b8 !important; }
.form-control:focus { background-color: #1a212a !important; color: #fff !important; border-color: #f50537 !important; box-shadow: none !important; }

/* ---- Footer negro ---- */
footer { background-color: #000 !important; color: #b4bac1; }
footer a, .nav-footer a, .secondary-nav a { color: #fff; }
footer a:hover, .nav-footer a:hover, .secondary-nav a:hover { color: #f50537; }

/* ---- Bordes y separadores ---- */
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: #2c3540 !important; }
hr { border-color: #2c3540; background-color: #2c3540; }

/* ---- Velos negros de tablas -> velos blancos sobre oscuro ---- */
tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.04); }
tr:hover { background-color: rgba(255,255,255,0.07); color: #fff; }

/* =========================================================================
   Correcciones tras la revisión visual (rev. 1)
   ========================================================================= */

/* Grilla de modelos (home): el nombre es un SVG NEGRO -> invertir a blanco.
   Igual para cualquier otro uso del titulo-grafico. */
img.audi-model-title { filter: brightness(0) invert(1); }

/* Logo del header: SVG oscuro, casi invisible sobre el header negro -> blanco */
header .logo img { filter: brightness(0) invert(1); }

/* Form flotante "Mas info": la barra/boton estaba en BLANCO -> oscuro */
.form-flotante .btn-form-flotante,
.form-flotante-mobile .btn-form-flotante { background-color: #1a212a !important; color: #fff; }

/* Texto del hero/slide legible sobre la foto SIN oscurecer la foto (text-shadow
   en vez de overlay, respetando el brillo pleno que se pidio antes). */
.carousel-caption .text-slide h1,
.carousel-caption .text-slide h2,
.carousel-caption .text-slide h3,
.carousel-caption .text-slide p {
    text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.65);
}

/* Franjas con fondo gris claro (#f2f2f2) -> navy oscuro. Eran el unico parche claro. */
#features, #versiones, #servicios { background-color: #0f141b !important; }
#secondary-navigation { border-top-color: #2c3540 !important; }

/* Copyright: va en una <section class="fin"> fuera del footer; quedaba casi ilegible */
.fin { background-color: #000; }
.fin, .fin p, .fin small { color: #b4bac1; }
/* Razon social del footer un poco mas clara */
.logo-footer p { color: rgba(255,255,255,0.82) !important; }

/* =========================================================================
   Grilla de modelos (home) MUCHO mas compacta (tiles chicos tipo audi.com.ar).
   El nombre grande estaba al 80% del ancho; el auto al 100%. Se achican los dos
   y se reduce el padding de la tarjeta.
   ========================================================================= */
/* Tarjeta = foto (puntas redondeadas) + nombre del modelo abajo, en blanco y light.
   3 por fila (col-lg-4), grilla centrada. */
#modelos .row { justify-content: center; }
.wrap-card-home { padding: 12px; }
.model-card { display: block; text-decoration: none; }
.model-card .model-card-img {
    width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
    background: #1a212a; display: flex; align-items: center; justify-content: center;
}
.model-card .model-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.model-card .model-card-img.is-cutout img { object-fit: contain; padding: 8% 10%; }   /* recortes viejos: auto entero y centrado */
.model-card .model-card-name { color: #fff; font-weight: 300; font-size: 1.5rem; margin-top: 14px; letter-spacing: .3px; }
.model-card:hover .model-card-img img { transform: scale(1.04); }
.model-card:hover .model-card-name { color: #f50537; }

/* Header: barra completa en negro (al scrollear se veia blanco en los costados) */
.navigation { background-color: #000 !important; }