/* ═══════════════════════════════════════════════════════════════
   Comerciautos HG SAS — tokens de diseño
   Copiados tal cual de la maqueta ya verificada. NO cambiar un color
   sin volver a medir el contraste: todo el sitio pasa WCAG AA hoy.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fuentes, servidas desde el propio sitio (licencia OFL, gratis) ─
   Solo el juego latino: incluye tildes, ñ y ¿¡. swap = el texto se ve
   de una vez con la letra del sistema y cambia cuando llega la fuente. */
@font-face{font-family:'Archivo'; font-weight:600; font-style:normal; font-display:swap; src:url(../fuentes/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo'; font-weight:700; font-style:normal; font-display:swap; src:url(../fuentes/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo'; font-weight:800; font-style:normal; font-display:swap; src:url(../fuentes/archivo-800.woff2) format('woff2')}
@font-face{font-family:'Barlow';  font-weight:400; font-style:normal; font-display:swap; src:url(../fuentes/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';  font-weight:500; font-style:normal; font-display:swap; src:url(../fuentes/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';  font-weight:600; font-style:normal; font-display:swap; src:url(../fuentes/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';  font-weight:700; font-style:normal; font-display:swap; src:url(../fuentes/barlow-700.woff2) format('woff2')}

:root{
  --o:#f68122; --o-cta:#b05307; --o-tint:#fdeadb; --o-ink:#7b3a05; --o-ln:#f0c9a5;
  --i:#1c1712; --i-mut:#6b6259; --i-faint:#7d7367;
  --pp:#f7f4f0; --card:#fff; --ln:#e3dcd2; --ln-s:#cfc4b5;
  --ok:#297147; --ok-t:#e3f1e8; --ok-b:#bcdcc9;
  --no:#a2221b; --no-t:#f8e0de;
  --wa:#0f7a3d;
  --rad:10px; --rad-s:6px;
  --sh:0 1px 2px rgba(28,23,18,.06),0 4px 14px rgba(28,23,18,.07);
  --sh-h:0 2px 6px rgba(28,23,18,.09),0 14px 32px rgba(28,23,18,.13);
  --o-hero:#ffa551;   /* naranja del titular, solo sobre la foto oscurecida */

  --fuente-titulo:'Archivo',system-ui,sans-serif;
  --fuente-texto:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── LA REGLA QUE MÁS SE ROMPE ──────────────────────────────────
   #f68122 (--o) con texto blanco da 2,6:1 y NO pasa accesibilidad.
     · fondo --o       → texto --i (#1c1712)
     · fondo --o-cta   → texto #fff
   Sin excepciones.                                                 */

body{
  font-family:var(--fuente-texto); font-size:15px; line-height:1.55;
  color:var(--i); background:var(--pp);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:var(--fuente-titulo); color:var(--i);
  margin:0; font-weight:700; letter-spacing:-.018em; line-height:1.17;
}
a{color:var(--o-ink)}
:focus-visible{outline:3px solid var(--o-cta); outline-offset:2px; border-radius:4px}

/* ── Columnas del catálogo ───────────────────────────────────────
   Medido con los nombres de modelo más largos del mercado colombiano:
   dos columnas necesitan una tarjeta de 248 px = pantalla de 540 px.
   Por debajo, el título se va a 3 líneas y los botones se parten.
   Ningún celular llega (iPhone 15: 393 px · Galaxy S24: 384 px).    */
.grid-v{display:grid; gap:22px; grid-template-columns:1fr}
@media (min-width:540px) { .grid-v{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px) { .grid-v{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1200px){ .grid-v{grid-template-columns:repeat(4,1fr)} }
/* el catálogo lleva filtros al lado: una columna menos desde 900 */
@media (min-width:900px) { .cat .grid-v{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .cat .grid-v{grid-template-columns:repeat(3,1fr)} }

/* ── Solo para lectores de pantalla ──────────────────────────── */
.sr{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}