:root {
  --ink: #0b0d12; --ink-2: #4d5666; --ink-3: #7b8494;
  --line: #e5e8ef; --line-2: #eff1f6; --papel: #fff; --papel-2: #f7f8fa;
  --noche: #0a0c11; --noche-2: #0f131b;
  --ok: #0f7a6c; --ok-soft: #e3f5f2;
  --wa: #25d366; --wa-2: #1aa25f;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --display: 'Inter Tight', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sombra: 0 1px 2px rgba(10,14,24,.05), 0 6px 20px rgba(10,14,24,.06);
  --barra: 68px;
}
@media (max-width: 780px) { :root { --barra: 60px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--papel); color: var(--ink);
  font: 400 15.5px/1.62 var(--texto);
  -webkit-font-smoothing: antialiased; letter-spacing: -.008em;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--tint); }

h1, h2, h3, .precio, .logo b {
  font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.032em;
}
h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.04em; }
h2 { font-size: clamp(23px, 3vw, 31px); letter-spacing: -.034em; }
h3 { font-size: 17px; letter-spacing: -.022em; }

.centro { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
/*
  El aire de arriba y abajo de una página suelta, sin tocar el de los costados.

  Estaba puesto en línea con la forma corta de padding —arriba, costados,
  abajo— y con el costado en cero: el texto quedaba pegado al borde y en el
  teléfono se leía como que la página se sale. Pasaba en Nosotros, Contacto y
  Vendé tu vehículo, que son justo las tres que lo usaban.
*/
.pagina { padding-top: 48px; padding-bottom: 60px; }
.pagina.angosta { max-width: 820px; }
.pagina.media { max-width: 780px; }
@media (max-width: 620px) { .pagina { padding-top: 34px; padding-bottom: 44px; } }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--ink-3); }

/* ── la barra de arriba ──────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 30;
  height: var(--barra); display: flex; align-items: center;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.barra .centro { display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo img { height: 34px; width: auto; border-radius: 7px; }
/*
  El nombre entero, sin recortar.

  Tenía puntos suspensivos por si no entraba, y con el botón de WhatsApp al lado
  no entraba casi nunca: «Cars Motors Automotores» salía «Cars Motors Autom…».
  Sin ese botón hay lugar de sobra, y el nombre de la concesionaria es lo último
  que se debería recortar en su propia web.
*/
.logo b { font-size: 18px; line-height: 1.15; }
@media (max-width: 420px) { .logo b { font-size: 16px; } }
.barra nav { display: flex; gap: 20px; margin-left: auto; font-size: 14px; font-weight: 500; }
.barra nav a { color: var(--ink-2); }
.barra nav a:hover, .barra nav a[aria-current] { color: var(--acento); }
/*
  En el teléfono el menú no se esconde: se pasa abajo.

  Estaba escondido con display:none y era un error, porque el teléfono no es
  el caso raro acá —es el normal: la mayoría llega desde un enlace de WhatsApp o
  de Instagram—. Escondido, «Vendé tu auto» y «Nosotros» quedaban sin ninguna
  forma de llegar, que son justamente las dos páginas por las que se hizo el
  sitio. Va en una segunda línea que se desliza de costado si no entra, sin
  menú hamburguesa: eso pediría JavaScript y un botón más para tocar.
*/
@media (max-width: 720px) {
  .barra { height: auto; }
  .barra .centro { flex-wrap: wrap; padding-top: 10px; padding-bottom: 8px; gap: 10px 14px; }
  /*
    Se acomoda en dos líneas en vez de deslizarse.

    Con cuatro ítems no entran en el ancho de un teléfono, y deslizándose el
    último quedaba cortado por el borde: eso se lee como que la página se sale
    de la pantalla, no como que hay más para el costado. Envuelto, se ve entero.
  */
  .barra nav {
    order: 3; width: 100%; margin-left: 0;
    flex-wrap: wrap; gap: 6px 18px;
  }
  .barra nav a { padding-bottom: 2px; }
  .barra .btn { margin-left: auto; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.012em;
  transition: transform .14s, box-shadow .14s, background .14s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/*
  El ícono del botón, con medida propia.

  El SVG no trae ni alto ni ancho —viene con viewBox y nada más— así que sin
  esto el navegador le da los 300×150 de fábrica y lo achica con el ancho del
  botón. En un botón chico no se notaba; en el de la ficha, que ocupa toda la
  columna, el teléfono de WhatsApp salía del tamaño de una mano y se comía el
  texto.
*/
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-gr svg { width: 21px; height: 21px; }
.btn-wa { background: var(--wa); color: #06331a; }
.btn-wa:hover { background: var(--wa-2); color: #fff; }
.btn-pri { background: var(--acento); color: #fff; }
.btn-pri:hover { background: var(--acento-2); }
.btn-sec { border: 1px solid var(--line); background: var(--papel); color: var(--ink); }
.btn-sec:hover { border-color: var(--acento); color: var(--acento); }
.btn-gr { height: 50px; padding: 0 26px; font-size: 16px; }
.barra .btn { height: 38px; padding: 0 15px; font-size: 14px; }

/* ── la cabecera del catálogo ────────────────────────────────────────────── */
/*
  Sin foto de portada tampoco queda en blanco.

  El degradado se arma con el color de la concesionaria, que ya está cargado. Es
  la diferencia entre «todavía no lo configuré» y «así es mi marca», y como la
  mayoría no sube una portada el primer día, este es el caso que más se ve.
*/
.tapa {
  position: relative; overflow: hidden;
  padding: 60px 0 52px;
  background:
    radial-gradient(120% 140% at 12% 0%, var(--tint) 0%, transparent 62%),
    radial-gradient(90% 120% at 100% 0%, var(--tint) 0%, transparent 55%),
    var(--papel);
  border-bottom: 1px solid var(--line-2);
}
.tapa.con-foto {
  color: #fff; padding: 96px 0 76px; border-bottom: 0;
  background: var(--noche) center/cover no-repeat;
}
/*
  Dos velos y no uno.

  El de arriba a abajo apoya el texto sobre el fondo; el de izquierda a derecha
  oscurece la columna donde va el texto y deja la foto respirar del otro lado.
  Hace falta porque la portada la elige el concesionario de su propio stock: hay
  fotos oscuras y hay fotos de un auto blanco a pleno sol, y el título tiene que
  leerse con las dos.
*/
.tapa.con-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,10,16,.86) 0%, rgba(8,10,16,.62) 42%, rgba(8,10,16,.34) 72%),
    linear-gradient(180deg, rgba(8,10,16,.30) 0%, rgba(8,10,16,.15) 45%, rgba(8,10,16,.68) 100%);
}
.tapa .centro { position: relative; z-index: 1; }
.tapa-texto { max-width: 40ch; }
.tapa h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.03; letter-spacing: -.033em; }
.tapa p { margin-top: 14px; font-size: 17.5px; line-height: 1.5; color: var(--ink-2); }
.tapa.con-foto p { color: rgba(255,255,255,.85); }

/* Cuántas unidades hay, arriba de todo: es la primera pregunta del que entra. */
.sello {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 15px; padding: 6px 13px 6px 11px;
  border-radius: 999px; background: var(--tint); color: var(--acento);
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
}
.sello::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .85;
}
.tapa.con-foto .sello {
  background: rgba(255,255,255,.14); color: #fff;
  backdrop-filter: blur(6px);
}

.tapa-botones { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
@media (max-width: 560px) {
  .tapa { padding: 44px 0 40px; }
  .tapa.con-foto { padding: 62px 0 52px; }
  .tapa-botones .btn { flex: 1 1 100%; }
  /*
    En el teléfono el texto ocupa el ancho entero, así que el velo de costado no
    lo cubre: ahí tiene que oscurecer parejo. Se vio con una portada donde la
    bajada caía justo encima de un auto blanco y desaparecía.
  */
  .tapa.con-foto::after {
    background: linear-gradient(180deg, rgba(8,10,16,.62) 0%, rgba(8,10,16,.74) 50%, rgba(8,10,16,.88) 100%);
  }
}

/* ── las redes ───────────────────────────────────────────────────────────── */
.redes { display: flex; gap: 9px; margin-top: 26px; }
.redes a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--papel);
  transition: transform .14s, border-color .14s, color .14s, background .14s;
}
.redes a:hover { transform: translateY(-2px); border-color: var(--acento); color: var(--acento); }
.redes svg { width: 19px; height: 19px; }
/* Sobre foto y sobre el pie, que son fondos oscuros. */
.redes.claras a {
  border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
}
.redes.claras a:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.16); }

/* ── autos o motos ───────────────────────────────────────────────────────── */

/*
  La primera decisión, en botones y no en un desplegable.

  El que entra a una agencia que vende autos Y motos primero decide qué está
  buscando. Con dos opciones, un desplegable esconde detrás de un clic lo que se
  puede mostrar entero. Solo aparece si hay de las dos cosas.
*/
.clases {
  display: inline-flex; gap: 3px; margin-top: 22px;
  padding: 4px; border-radius: 999px;
  background: var(--papel-2); border: 1px solid var(--line-2);
}
.clases a {
  padding: 8px 20px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background .14s, color .14s;
}
.clases a:hover { color: var(--ink); }
.clases a[aria-current] { background: var(--acento); color: #fff; font-weight: 600; }

/* ── filtros ─────────────────────────────────────────────────────────────── */
.filtros {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 18px 0 6px;
}
/* El buscador y su botón son un formulario; los tres desplegables, hermanos
   suyos en la misma fila. Por eso el formulario NO ocupa el ancho entero. */
.filtros form {
  display: flex; gap: 9px; align-items: center; flex: 2 1 280px; min-width: 0;
  /* Una raya finita separa buscar de filtrar: son dos cosas distintas y en una
     fila corrida se leen como cinco controles sueltos. */
  padding-right: 15px; margin-right: 6px; border-right: 1px solid var(--line-2);
}
@media (max-width: 640px) { .filtros form { padding-right: 0; margin-right: 0; border-right: 0; } }
/*
  Que hereden la tipografía no es decoración.

  Los campos de un formulario NO heredan la tipografía de la página: el
  navegador les pone la suya, más chica y de otra familia. Con la del sitio, el
  buscador se ve igual que los desplegables de al lado.
*/
.filtros input[type=search] {
  height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--papel); outline: 0; min-width: 0; flex: 1;
  font: 400 14.5px/1 var(--texto); color: var(--ink);
  letter-spacing: -.008em;
}
.filtros input[type=search]:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--tint); }
/*
  El desplegable, dibujado por nosotros.

  La lista que abre un desplegable del navegador la pinta el sistema operativo:
  otra tipografía, otro celeste, otras esquinas. En Windows sale con letra de Times
  y un azul chillón, y era lo único de la página que se veía prestado. No hay
  CSS que lo arregle —esa lista no vive en el documento—, así que es un
  bloque desplegable con enlaces adentro: abre y cierra solo, sin una línea de
  JavaScript, y se ve como el resto del sitio.
*/
.desp { position: relative; flex: 1 1 auto; min-width: 172px; }
.desp > summary {
  list-style: none; cursor: pointer;
  height: 44px; padding: 0 13px 0 14px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--papel);
  font: 500 14.5px/1 var(--texto); letter-spacing: -.008em;
  transition: border-color .14s, box-shadow .14s;
}
.desp > summary::-webkit-details-marker { display: none; }
.desp > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desp > summary svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .16s; }
.desp > summary:hover { border-color: var(--ink-3); }
.desp[open] > summary { border-color: var(--acento); box-shadow: 0 0 0 3px var(--tint); }
.desp[open] > summary svg { transform: rotate(180deg); color: var(--acento); }

.desp-lista {
  position: absolute; z-index: 25; top: calc(100% + 6px); left: 0;
  min-width: 100%; max-width: 300px;
  max-height: 292px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: var(--papel); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sombra);
  animation: baja .13s ease-out;
}
@keyframes baja { from { opacity: 0; transform: translateY(-4px); } }
.desp-lista a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink); white-space: nowrap;
}
.desp-lista a:hover { background: var(--papel-2); }
.desp-lista a[aria-current] { color: var(--acento); font-weight: 600; }
.desp-lista a svg { width: 15px; height: 15px; margin-left: auto; flex: none; }

.filtros .btn { height: 44px; flex: none; }
@media (max-width: 640px) {
  .filtros form { flex: 1 1 100%; }
  .desp { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .desp-lista { max-width: none; right: 0; }
}
.cuantos { padding: 16px 0 0; font-size: 14px; color: var(--ink-3); }
.cuantos b { color: var(--ink); font-weight: 600; }

/* ── la grilla ───────────────────────────────────────────────────────────── */
.grilla {
  display: grid; gap: 20px; padding: 20px 0 60px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.auto {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--papel); transition: transform .16s, box-shadow .16s, border-color .16s;
}
.auto:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: #d8dde8; }
.auto .foto { position: relative; aspect-ratio: 4/3; background: var(--papel-2); }
.auto .foto img { width: 100%; height: 100%; object-fit: cover; }
.auto .foto .sin { display: grid; place-items: center; height: 100%; color: var(--ink-3); font-size: 13px; }
.auto .cuantas {
  position: absolute; left: 10px; bottom: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(10,14,24,.72); color: #fff; font-size: 11px; font-weight: 600;
}
.auto .sello {
  position: absolute; right: 10px; top: 10px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  background: var(--ok-soft); color: var(--ok);
}
.auto .sello.reservado { background: #fdf3e2; color: #a06a05; }
.auto .sello.vendido { background: #f1f3f7; color: var(--ink-3); }
.auto .cuerpo { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.auto h3 { margin-bottom: 3px; }
.auto .version {
  font-size: 13px; color: var(--ink-3); margin-bottom: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.precio { font-size: 22px; color: var(--acento); letter-spacing: -.03em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip {
  padding: 4px 10px; border-radius: 999px; background: var(--papel-2);
  border: 1px solid var(--line-2); font-size: 11.5px; color: var(--ink-2); font-weight: 500;
}
.auto .pie { margin-top: auto; padding-top: 14px; }
.auto .pie .btn { width: 100%; height: 38px; font-size: 13.5px; }

/* ── la ficha ────────────────────────────────────────────────────────────── */
.volver { display: inline-flex; align-items: center; gap: 6px; padding: 22px 0 0; font-size: 14px; color: var(--ink-3); }
.volver:hover { color: var(--acento); }
.ficha { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; padding: 18px 0 60px; align-items: start; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; gap: 24px; } }

.galeria { display: flex; flex-direction: column; gap: 10px; }
.galeria .grande { border-radius: var(--r-lg); overflow: hidden; background: var(--papel-2); aspect-ratio: 4/3; }
.galeria .grande img { width: 100%; height: 100%; object-fit: cover; }
.tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tiras a { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4/3; border: 2px solid transparent; }
.tiras a:hover, .tiras a[aria-current] { border-color: var(--acento); }
.tiras img { width: 100%; height: 100%; object-fit: cover; }

.lateral { position: sticky; top: calc(var(--barra) + 18px); }
/* En el teléfono la barra pasó a dos líneas y ya no mide lo que dice la
   variable: pegar la columna a una altura que dejó de ser cierta la tapaba. */
@media (max-width: 720px) { .lateral { position: static; } }
.lateral .precio { font-size: 34px; }
.lateral h1 { margin-bottom: 4px; }
.lateral .version { color: var(--ink-3); margin-bottom: 16px; }
.acciones { display: flex; flex-direction: column; gap: 9px; margin: 20px 0 8px; }
.acciones .btn { width: 100%; }

.datos { margin-top: 26px; border-top: 1px solid var(--line-2); }
.datos div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.datos dt { color: var(--ink-3); }
.datos dd { font-weight: 500; text-align: right; }
.bloque { margin-top: 30px; }
.bloque h2 { font-size: 21px; margin-bottom: 10px; }
.bloque p { color: var(--ink-2); white-space: pre-wrap; }

/* ── secciones de texto ──────────────────────────────────────────────────── */
.franja { background: var(--papel-2); border-top: 1px solid var(--line-2); padding: 56px 0; }
.franja h2 { margin-bottom: 12px; }
.franja p { color: var(--ink-2); max-width: 66ch; white-space: pre-wrap; }

/* ── tasación ────────────────────────────────────────────────────────────── */
.tasar { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .tasar { grid-template-columns: 1fr; gap: 22px; } }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.campos label { display: block; }
.campos .ancho { grid-column: 1 / -1; }
.campos span { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.campos input, .campos textarea, .campos select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--papel); outline: 0; font-size: 14.5px;
}
.campos textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.campos input:focus, .campos textarea:focus, .campos select:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--tint);
}
.aviso {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--ok-soft); color: var(--ok); font-size: 14px; line-height: 1.55;
}
.aviso.mal { background: #fdecec; color: #c8322f; }

/* Los tres pasos, numerados con el color de la concesionaria. */
.pasos { list-style: none; margin-top: 34px; display: grid; gap: 20px; counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative; padding-left: 46px; line-height: 1.5;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tint); color: var(--acento);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pasos b { display: block; font-size: 15px; }
.pasos span { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-3); }

/* ── la ficha técnica ────────────────────────────────────────────────────── */

/*
  Todo lo que se sabe del auto, agrupado.

  Es el dato que ya estaba guardado y no se mostraba: una unidad importada de
  MercadoLibre llega con treinta y tres atributos y la ficha mostraba seis. El
  que compara dos autos compara justamente eso —potencia, tracción, si tiene
  ABS— y si no está en la página se va a buscarlo a otro lado.

  En columnas y no en una lista larga: treinta filas corridas se saltean.
*/
.especificaciones { padding: 6px 0 56px; }
.especificaciones > h2 { margin-bottom: 20px; }
/*
  En columnas que fluyen y no en una grilla.

  Con grilla, la fila la marca la tarjeta más alta: «Principales» tiene once
  filas y «Interior» tiene una, así que al lado de la corta quedaba medio metro
  de blanco. En columnas cada tarjeta arranca donde termina la anterior y no
  sobra nada.
*/
.grupos-ficha { columns: 3 300px; column-gap: 16px; }
.grupo-ficha {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px 6px; background: var(--papel);
}
.grupo-ficha h3 {
  font-family: var(--texto); font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.grupo-ficha dl > div {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.grupo-ficha dl > div:last-child { border-bottom: 0; }
.grupo-ficha dt { color: var(--ink-2); font-size: 14px; flex: 1; }
.grupo-ficha dd { font-size: 14px; font-weight: 600; text-align: right; }
/* El tilde en vez de la palabra: una columna de treinta «Sí» no se lee, una de
   tildes se barre de un vistazo. */
.grupo-ficha .si { display: block; color: var(--ok); }
.grupo-ficha .si svg { width: 17px; height: 17px; }

/*
  El resto, detrás de un toque.

  Con treinta datos la tabla entera mide más que el auto, y el que solo quiere el
  precio y los kilómetros tiene que pasar por Válvulas por cilindro para llegar a
  las otras unidades. Arriba quedan los que se preguntan siempre.

  El contenido está en el HTML igual: Google lo lee todo aunque esté plegado.
*/
.mas-ficha > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--papel);
  font-size: 14.5px; font-weight: 600; color: var(--acento);
  transition: border-color .14s, background .14s;
}
.mas-ficha > summary::-webkit-details-marker { display: none; }
.mas-ficha > summary:hover { border-color: var(--acento); background: var(--tint); }
.mas-ficha > summary svg { width: 16px; height: 16px; transition: transform .16s; }
.mas-ficha[open] > summary svg { transform: rotate(180deg); }
.mas-ficha .ocultar { display: none; }
.mas-ficha[open] .ver { display: none; }
.mas-ficha[open] .ocultar { display: inline; }
.mas-ficha .grupos-ficha { margin-top: 16px; }


/* ── contacto ────────────────────────────────────────────────────────────── */

/*
  Cada dato en su tarjeta.

  Estaban los tres en una lista y quien entra a esta página viene con una sola
  pregunta —dónde queda, cuándo abre, por dónde escribo—: en una lista hay que
  leer las tres para encontrar la suya.
*/
/* Dos y dos: con tres por fila la cuarta queda sola y el hueco al lado se lee
   como que falta algo. */
.grilla-contacto {
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) { .grilla-contacto { grid-template-columns: 1fr; } }
.ficha-contacto {
  padding: 20px 22px 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--papel); box-shadow: var(--sombra);
}
.ficha-contacto h3 {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; font-family: var(--texto);
  margin-bottom: 12px;
}
.ficha-contacto .btn { width: 100%; }
.ficha-contacto .redes { margin-top: 0; }
.dato-suelto { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.55; }
.dato-suelto b { color: var(--ink); font-weight: 600; }

/*
  La dirección se toca y abre el mapa.

  Nadie copia una dirección para pegarla en Google Maps: o es un enlace o no se
  usa. Y en el teléfono lo levanta la aplicación de mapas que ya tenga puesta.
*/
.con-mapa {
  display: inline-flex; align-items: flex-start; gap: 7px;
  font-size: 15px; font-weight: 500; color: var(--acento); line-height: 1.5;
}
.con-mapa:hover { text-decoration: underline; text-underline-offset: 3px; }
.con-mapa svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pie-sitio .con-mapa { color: rgba(255,255,255,.82); font-weight: 400; font-size: 14px; }
.pie-sitio .con-mapa:hover { color: #fff; }

/* ── vacío ───────────────────────────────────────────────────────────────── */
.vacio { padding: 70px 22px; text-align: center; color: var(--ink-3); }
.vacio b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 6px; font-family: var(--display); }

/* ── pie ─────────────────────────────────────────────────────────────────── */
.pie-sitio { background: var(--noche); color: rgba(255,255,255,.72); padding: 50px 0 26px; margin-top: auto; }
.pie-sitio .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 780px) { .pie-sitio .cols { grid-template-columns: 1fr; gap: 24px; } }
.pie-sitio h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: 10px; font-weight: 600; }
.pie-sitio .redes { margin-top: 18px; }
.pie-sitio p, .pie-sitio a { font-size: 14px; line-height: 1.7; }
.pie-sitio a:hover { color: #fff; }
.pie-sitio .logo b { color: #fff; }
/* Los dos lados con ancho mínimo cero: sin eso la línea larga no baja de
   renglón y se corta contra el borde derecho. Se vio en el teléfono. */
.firma {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between;
  font-size: 12.5px; color: rgba(255,255,255,.4);
}
.firma > span { min-width: 0; }
/* En el teléfono una debajo de la otra: en una fila, la línea larga no llega a
   bajar de renglón y se corta contra el borde derecho. */
@media (max-width: 620px) {
  .firma { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.firma a { color: rgba(255,255,255,.6); }

/* ── el botón flotante de WhatsApp ───────────────────────────────────────── */
/*
  La sombra es una sombra, no un neón.

  Estaba tintada de verde y con mucho radio, y sobre fondo claro eso no se lee
  como que el botón está levantado: se lee como que brilla. Una sombra neutra y
  corta —la misma familia que la de las tarjetas— lo despega del fondo sin
  llamar la atención más que el precio de un auto.
*/
.flota {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa); color: #06331a;
  box-shadow: 0 2px 6px rgba(10,14,24,.14), 0 8px 22px rgba(10,14,24,.16);
  transition: transform .16s, background .16s;
}
.flota:hover { transform: translateY(-2px); background: var(--wa-2); color: #fff; }
.flota svg { width: 28px; height: 28px; }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* Lo que entra, sube un poco. Una sola idea de movimiento en todo el sitio. */
@media (prefers-reduced-motion: no-preference) {
  .sube { animation: sube .5s cubic-bezier(.16,.84,.44,1) both; }
  @keyframes sube { from { opacity: 0; transform: translateY(12px); } }
}