/* Volante Propio — GAMA A: clara y sobria. La paleta del logo tal cual: blanco de fondo, carbón para el texto,
   el rojo solo en lo que hay que tocar. Se lee como concesionario serio y formal. */
:root {
  --bg: #FFFFFF; --surface: #F3F4F6; --surface-card: #FFFFFF; --surface-input: #F3F4F6;
  --text: #1F2933; --muted: #5B6572; --line: rgba(31, 41, 51, .14); --line-soft: rgba(31, 41, 51, .07);
  --brand: #D32027; --brand-hover: #A81820; --brand-soft: #FDE9EA; --brand-text: #A81820;
  --brand-shadow: rgba(211, 32, 39, .26); --brand-hl: transparent;
  /* --on-dark-accent: el rojo de marca sobre carbón da 2,81:1 y no se lee. Este tono da 5,60:1. */
  --dark: #1F2933; --on-dark: #FFFFFF; --on-dark-muted: rgba(255, 255, 255, .74); --on-dark-line: rgba(255, 255, 255, .16); --on-dark-accent: #FF7377;
  --wa: #25D366; --wa-hover: #1DB954; --star: #D32027;
  --wa-btn-bg: #C31C23; --wa-btn-hover: #A81820; --wa-btn-fg: #FFFFFF;
  --btn-primary-bg: #C31C23;
  --hero-veil: linear-gradient(to top, rgba(31, 41, 51, .55), transparent 48%), rgba(31, 41, 51, .42);
  --nav-bg: rgba(255, 255, 255, .94);
  --contact-bg: #1F2933; --sim-result-bg: #1F2933; --sim-amount-color: #FF7377;
  --footer-bg: #1F2933; --footer-text: rgba(255, 255, 255, .74); --footer-muted: rgba(255, 255, 255, .74); --footer-logo: #FFFFFF; --footer-line: rgba(255, 255, 255, .16); --brand-text-footer: #FFFFFF;

  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --display-transform: uppercase; --display-weight: 700; --display-tracking: .005em; --display-lh: .98; --hero-lh: .95;
  --font-logo: var(--font-display); --logo-size: 30px; --logo-tracking: .02em; --logo-transform: uppercase;
  --price-size: 46px; --sim-output-size: 26px; --sim-amount-size: clamp(64px, 7vw, 96px);

  --radius-btn: 999px; --radius-card: 24px; --radius-img: 24px; --radius-input: 14px;
  --shadow: 0 8px 30px rgba(31, 41, 51, .07); --shadow-hover: 0 18px 44px rgba(31, 41, 51, .14);
  --container: 1200px; --gutter: 24px; --nav-h: 76px; --section: clamp(64px, 8vw, 120px);
}
@media (max-width: 640px) { :root { --gutter: 16px; --nav-h: 64px; --logo-size: 26px; } }

.btn { font-weight: 700; padding: 15px 26px; border-width: 2px; }
.btn--lg { padding: 18px 32px; }
.nav__cta { padding: 12px 20px; }
.section__title { font-size: clamp(38px, 5.2vw, 64px); }
.overline { font-size: 12px; letter-spacing: .16em; }
.overline::before { width: 28px; }
.car__title { font-size: 20px; }
.car__price { margin-top: 20px; }
.car .btn { margin-top: auto; }
.contact .section__title em { color: var(--on-dark-accent); }
.contact .overline::before { background: var(--on-dark-accent); }
.form { box-shadow: 0 24px 60px rgba(31, 41, 51, .24); }
.footer { border-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   CONTRASTE SOBRE FONDOS OSCUROS — corregido el 22/09/2026 después de MEDIRLO.
   El rojo de marca (#D32027) se usaba también encima del carbón y de la foto del hero, donde baja a
   2,8:1 y 1,9:1. Ahí va el tono claro. Ojo: marca.css se carga ANTES que styles.css, así que cada
   regla necesita pesar más que la original para ganarle.
   ───────────────────────────────────────────────────────────────────────────── */
.hero .hero__title em { color: var(--on-dark-accent); }                 /* medido 2,39:1 → 3,9:1 */
.hero .hero__kpis strong small { color: #FFFFFF; }                      /* medido 1,16:1; es diminuto y va sobre foto */
.stats.stats--dark .stat__num small { color: var(--on-dark-accent); }   /* el S/ y la h de la banda oscura */
.footer .footer__contact li .ico { color: var(--on-dark-accent); }      /* iconos de correo, teléfono y dirección */
/* Aquí había una regla `.footer .nav__logo span` que NO se aplicaba nunca: pesaba lo mismo (0,2,1) que la
   de styles.css:555 y esa se carga después, así que el punto salía en #D32027 (2,81:1 medido) y no en el
   #FF7377 que pretendía. Se quitó el 22/09 junto con el punto, que ya no existe: ahora el logotipo lleva
   el volante dibujado (ver el bloque del final de este archivo). */

/* Los campos de formulario casi no se distinguían de la tarjeta blanca (relleno 1,1:1): se les marca el borde. */
input[type], select, textarea { border-color: rgba(31, 41, 51, .30); }

/* ─────────────────────────────────────────────────────────────────────────────
   LOGOTIPO — el volante entra como dibujo; el nombre sigue siendo texto de verdad.
   Añadido el 22/09/2026, cuando llegaron los vectores del logo.

   POR QUÉ el símbolo y no el bloque horizontal completo: medido en Chrome, el horizontal deja de
   leerse por debajo de ~200 px de ancho, y a 200 px mide 55 px de alto dentro de un nav de 76: se come
   la barra. En el nav de móvil (64 px) tendría que bajar a ~160, donde ya está medido que el auto de
   dentro del volante se empasta con el aro. El símbolo es cuadrado y aguanta 29 px.

   POR QUÉ el volante SIN el auto: el empaste viene de un hueco de 5 unidades entre las ruedas del auto
   y la barra del volante — 0,84 px a tamaño de nav, o sea sub-píxel. La versión sin auto no lo tiene:
   su rasgo más fino son los rayos, 2,9 px a 33,6.

   POR QUÉ máscara y no una imagen a color: la máscara aporta solo la FORMA; el color lo pone
   `background-color: currentColor`, o sea el MISMO `color` que styles.css ya cambia solo en cada estado.
   El nav sobre el hero y el pie salen gratis: no hay una sola regla de color para ellos.

   POR QUÉ el nombre sigue siendo texto: el lector de pantalla y el buscador leen "Volante Propio" tal
   cual; y si la máscara no se soporta o no carga, se cae al logotipo tipográfico de hoy, no a un hueco.

   DÓNDE NO se aplica: admin.html y login.html, cuyo logotipo dice "Administración" y "Panel". Por eso el
   selector es POSITIVO ([href="#top"] es el índice, [data-marca="nombre"] las páginas compartidas) en vez
   de excluir por id: si mañana cambia el marcado, lo que se pierde es el dibujo, no al revés.

   ⚠️ Acoplamiento invisible: esto depende de que index.html siga usando href="#top" y de que las páginas
   compartidas sigan usando data-marca="nombre". Si alguien cambia eso, el volante desaparece sin avisar.
   Los dibujos están en img/marca-volante.svg e img/marca-volante-acento.svg (maestros en
   Documents\Volante Propio\01 Marca\Logo).
   ───────────────────────────────────────────────────────────────────────────── */

/* El acento por defecto es el rojo de marca. */
.nav__logo:is([href="#top"], [data-marca="nombre"]) { --logo-acento: var(--brand); }
/* Sobre la foto del hero y sobre el carbón del pie ese rojo da 1,9:1 y 2,8:1 y no se lee: ahí va el tono
   claro que este mismo archivo ya define para eso (--on-dark-accent, 5,60:1). */
.nav--over:not(.is-scrolled):not(.is-open) .nav__logo,
.footer .nav__logo { --logo-acento: var(--on-dark-accent); }

/* El `color` del enlace deja de ser el rojo y pasa a ser la TINTA del logotipo. Solo hay que arreglar el
   nav claro: sobre el hero styles.css ya pone #fff y en el pie ya pone var(--footer-logo).
   Va acotado a `.nav ` a propósito: (a) pesa (0,3,0) y le gana a `.nav__logo` de styles.css aunque
   marca.css se cargue ANTES; (b) pierde con `.nav--over:not()...` (0,4,0), que es lo que queremos; (c) al
   exigir el ancestro `.nav` no puede tocar nunca el logotipo del pie, pase lo que pase con el orden de
   los <link> — sin ese `.nav `, invertirlo dejaría el pie carbón sobre carbón, o sea invisible. */
.nav .nav__logo:is([href="#top"], [data-marca="nombre"]) { color: var(--text); }

/* El nombre no se parte en dos líneas. Esto arregla algo que ya pasaba ANTES del logo: medido, entre 961
   y 1120 px "Volante Propio" caía a dos renglones (60 px de alto en vez de 30). El volante ensancharía
   esa franja, así que se cierra aquí. */
.nav__logo:is([href="#top"], [data-marca="nombre"]) { white-space: nowrap; }

@supports ((-webkit-mask-image: url(#v)) or (mask-image: url(#v))) {
  .nav__logo:is([href="#top"], [data-marca="nombre"]) {
    display: inline-flex; align-items: center; gap: .34em; position: relative;
  }

  /* 1,12em = 33,6 px con --logo-size: 30px, y 29,1 px con los 26 px de ≤640: el 45 % del alto del nav en
     los dos casos. Se usan las propiedades largas y no el atajo `mask:` porque el atajo es lo único cuyo
     parseo en Safari no se pudo comprobar en esta máquina. */
  .nav__logo:is([href="#top"], [data-marca="nombre"])::before,
  .nav__logo:is([href="#top"], [data-marca="nombre"])::after {
    content: ""; width: 1.12em; height: 1.12em; flex: none;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    /* Los fondos no se imprimen si el usuario no marca "gráficos de fondo". Sin esta línea, al imprimir
       sale el nombre y un hueco donde iba el volante. Es una petición al navegador, no una garantía. */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* El trazo hereda el color del enlace, que es justo lo que ya cambia en cada estado. */
  .nav__logo:is([href="#top"], [data-marca="nombre"])::before {
    background-color: currentColor;
    -webkit-mask-image: url(../img/marca-volante.svg);
    mask-image: url(../img/marca-volante.svg);
  }

  /* El acento rojo: segunda capa encima, mismo viewBox, encaje al píxel. Una máscara da forma pero no
     color, así que el rojo necesita su propia caja; esa es la razón del ::after. */
  .nav__logo:is([href="#top"], [data-marca="nombre"])::after {
    position: absolute; left: 0; top: 50%; margin-top: -.56em;
    background-color: var(--logo-acento);
    -webkit-mask-image: url(../img/marca-volante-acento.svg);
    mask-image: url(../img/marca-volante-acento.svg);
  }
}

/* Alto contraste de Windows: ahí background-color se fuerza al color del sistema y el volante saldría
   como una mancha o no saldría. Mejor solo el nombre, que es lo que hay que leer. */
@media (forced-colors: active) {
  .nav__logo:is([href="#top"], [data-marca="nombre"])::before,
  .nav__logo:is([href="#top"], [data-marca="nombre"])::after { display: none; }
}

/* El volante hace el logotipo 44 px más ancho (198 → 234) y eso empujaba los enlaces del nav a una línea
   más entre 961 y 1160 px. Medido antes y después: a 961 pasaban de 2 a 3 líneas, y de 1120 a 1160 de 1 a 2.
   Se recupera el sitio apretando el espaciado del nav SOLO en esa franja, sin encoger la marca.
   (Que a 961-1080 los enlaces vayan en dos líneas ya pasaba antes del logo; eso no se toca aquí.)

   ⚠️ Los selectores llevan `.nav` delante a propósito: `.nav__links` a secas pesa lo mismo (0,1,0) que la
   regla de styles.css, y como styles.css se carga DESPUÉS, no pasaba nada. Con el ancestro pesa (0,2,0) y gana.
   Esto se descubrió midiendo: la primera versión de estas dos líneas no tuvo ningún efecto. */
@media (min-width: 961px) and (max-width: 1199px) {
  .nav .nav__links { gap: 18px; }
  .nav .nav__inner { gap: 20px; }
}

/* La píldora del hero lleva desde el 22/09 un texto más largo (la aclaración de que es empresa privada, no del
   Estado). Por debajo de ~1100 px ya no cabe en una línea, y como styles.css le pone `flex-wrap: wrap` y
   `justify-content: center`, el texto saltaba a otra fila y el punto rojo se quedaba SOLO, centrado ENCIMA del
   texto (medido a 1024 px). Sin wrap, el punto se queda a la izquierda y el texto se parte dentro de su caja.
   Va aquí y no en styles.css porque el disparador es el texto de esta marca, y Artucars (otra empresa, que
   comparte styles.css) ni siquiera usa la píldora. `.hero ` delante para ganarle a styles.css, que carga después. */
.hero .hero__pill { flex-wrap: nowrap; text-align: left; }
.hero .hero__pill .dot { flex: none; }
.hero .hero__pill > span:not(.dot) { min-width: 0; }

/* "Vende tu auto" (23/09): el título es un h2 (es el título de la sección; antes era un h3 sin h2 encima) y
   copia el aspecto que styles.css da a `.photo-card h3`. La foto de la carretera es clara arriba: a 360 px el
   título baja a dos o tres líneas y su primera línea caía sobre la parte casi transparente del degradado
   (contraste medido 2.69:1). Se oscurece la franja de arriba solo en esta tarjeta, y la etiqueta lleva fondo
   oscuro propio (sobre cielo claro el blanco translúcido de styles.css daba 2.1:1). */
.photo-card .photo-card__titulo { margin-top: 16px; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); font-size: clamp(28px, 3vw, 40px); line-height: 1; }
#vende-tu-auto .photo-card::after { background: linear-gradient(to top, rgba(10, 8, 6, .9) 0%, rgba(10, 8, 6, .62) 60%, rgba(10, 8, 6, .3) 100%); }
#vende-tu-auto .tag-light { background: rgba(10, 8, 6, .55); border-color: rgba(255, 255, 255, .35); }

/* Inicial fija (tramos cuya inicial mínima ya es el tope, S/ 1,500): la barra queda desactivada y tiene que
   PARECERLO; antes se veía igual que una barra que se puede mover y el cliente la arrastraba sin resultado. */
#sim-inicial:disabled { opacity: .45; cursor: not-allowed; }
#sim-inicial:disabled::-webkit-slider-thumb { cursor: not-allowed; box-shadow: none; }
#sim-inicial:disabled::-moz-range-thumb { cursor: not-allowed; box-shadow: none; }

/* Asistente con IA en el botón flotante (29/09/2026, js/config.js → asistente): el volante del logo en blanco con su
   acento en el rojo claro de las bandas oscuras (#FF7377: 5.6:1 sobre carbón; el rojo de marca daría 2.8:1). Mismas dos
   máscaras que el logo del menú. `.wa-float` delante porque este archivo carga ANTES que styles.css. */
@supports ((-webkit-mask-image: url(#v)) or (mask-image: url(#v))) {
  .wa-float .asistente__icono { position: relative; width: 58%; height: 58%; border: 0; border-radius: 0; }
  .wa-float .asistente__icono::before, .wa-float .asistente__icono::after {
    content: ""; position: absolute; inset: 0;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .wa-float .asistente__icono::before { background-color: #fff; -webkit-mask-image: url(../img/marca-volante.svg); mask-image: url(../img/marca-volante.svg); }
  .wa-float .asistente__icono::after { background-color: var(--on-dark-accent); -webkit-mask-image: url(../img/marca-volante-acento.svg); mask-image: url(../img/marca-volante-acento.svg); }
}
/* Alto contraste de Windows: el sistema pinta el fondo del botón y el del volante del mismo color y el volante
   desaparecía (quedaba un círculo vacío con "IA"). Se le da el color de texto del sistema. */
@media (forced-colors: active) {
  .wa-float .asistente__icono::before, .wa-float .asistente__icono::after { forced-color-adjust: none; background-color: ButtonText; }
}

/* Página "Créditos de fotos" (creditos.html, 29/09/2026): autor y licencia de las fotos del simulador */
.creditos { max-width: 820px; margin: 0 auto; padding: 36px; }
.creditos__lista { display: grid; gap: 14px; margin-top: 22px; }
.creditos__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 14px; color: var(--muted); }
.creditos__item img { width: 120px; height: 80px; object-fit: cover; border-radius: 10px; background: var(--surface); }
.creditos__item strong { color: var(--text); }
.creditos__item a { color: var(--brand-text); text-decoration: underline; overflow-wrap: anywhere; }
@media (max-width: 640px) { .creditos { padding: 24px 18px; } .creditos__item { grid-template-columns: 88px minmax(0, 1fr); } .creditos__item img { width: 88px; height: 60px; } }

/* Página "Descarga la app" (app.html, 25/09/2026). Los botones de las tiendas usan .tiendas/.tienda de styles.css */
.app-descarga { max-width: 640px; margin: 0 auto; padding: 40px 36px; }
.app-descarga .page__lead { margin-bottom: 26px; }
.app-descarga__tiendas .tienda { min-height: 66px; font-size: 19px; }
.app-descarga__soporte { margin-top: 18px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .app-descarga { padding: 28px 20px; } .app-descarga .btn--lg { width: 100%; } }