/* ============================================================
   AUTOMAS — sistema visual de la muestra
   ------------------------------------------------------------
   Dos superficies con funciones distintas:
     · casi negro  = la casa (cabecera, hero, marcas, cierre)
     · blanco/tono = el trabajo (buscador, listado, ficha, taller)
   Un solo color de acción (ámbar quemado), en dos valores porque
   un mismo tono no cumple contraste sobre las dos superficies.
   ============================================================ */

:root{
  /* --- superficies --- */
  --negro:        #111417;   /* base de marca */
  --negro-hondo:  #0A0D0F;   /* cierre y pie */
  --negro-alto:   #1B2024;   /* tarjetas sobre negro */
  --papel:        #FFFFFF;
  --papel-tono:   #F2F4F5;

  /* --- texto --- */
  --tinta:        #2E3439;   /* 12.6:1 sobre blanco */
  --tinta-suave:  #626C74;   /*  5.36:1 blanco · 4.86:1 sobre tono */
  --claro:        #FFFFFF;
  --claro-suave:  #A6B0B6;   /*  8.37:1 sobre --negro */

  /* --- acción --- */
  --senal:        #B34F16;   /*  5.19:1 sobre blanco, y con texto blanco encima */
  --senal-clara:  #F0A04B;   /*  8.66:1 sobre --negro */

  /* --- líneas --- */
  --linea:        #E1E5E7;
  --linea-fuerte: #C4CBCE;
  --linea-osc:    #262C31;

  /* --- tipografía --- */
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- métrica --- */
  --env:   1180px;
  --aire:  clamp(56px, 8vw, 96px);
  --radio: 3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--senal);outline-offset:3px;border-radius:2px}
.oscuro :focus-visible{outline-color:var(--senal-clara)}

/* saltar al contenido */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--papel);color:var(--tinta);
  padding:12px 18px;font-weight:600;
}
.saltar:focus{left:8px;top:8px}

/* ---------- layout ---------- */
.env{max-width:var(--env);margin:0 auto;padding-inline:22px}
.bloque{padding-block:var(--aire)}
.tono{background:var(--papel-tono)}
.oscuro{background:var(--negro);color:var(--claro)}
.oscuro-hondo{background:var(--negro-hondo);color:var(--claro)}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(30px,5.2vw,50px);font-stretch:112%;font-weight:800}
h2{font-size:clamp(24px,3.4vw,34px);font-stretch:108%}
h3{font-size:clamp(18px,2.2vw,21px)}
p{margin:0 0 16px;max-width:62ch}
p:last-child{margin-bottom:0}

.rotulo{
  font-family:var(--mono);
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-suave);
  margin:0 0 14px;
}
.oscuro .rotulo,.oscuro-hondo .rotulo{color:var(--claro-suave)}
.bajada{font-size:17px;color:var(--tinta-suave);max-width:56ch;margin-top:14px}
.oscuro .bajada{color:var(--claro-suave)}
.cifra{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:600;
  padding:14px 24px;border:0;border-radius:var(--radio);
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.btn-accion{background:var(--senal);color:#fff}
.btn-accion:hover{background:#96410F}
.oscuro .btn-accion,.oscuro-hondo .btn-accion{background:var(--senal-clara);color:var(--negro-hondo)}
.oscuro .btn-accion:hover,.oscuro-hondo .btn-accion:hover{background:#F8B771}
.btn-linea{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
.btn-linea:hover{background:var(--papel-tono)}
.oscuro .btn-linea{color:var(--claro);box-shadow:inset 0 0 0 1px var(--linea-osc)}
.oscuro .btn-linea:hover{background:var(--negro-alto)}
.btn-bloque{width:100%}

/* ---------- cabecera ---------- */
.cabecera{background:var(--negro);color:var(--claro);position:relative;z-index:30}
.cabecera .env{display:flex;align-items:center;gap:24px;min-height:70px}
.marca{
  font-stretch:118%;font-weight:800;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--claro);white-space:nowrap;
}
.marca span{color:var(--senal-clara)}
.nav{display:none;gap:26px;margin-left:14px}
.nav a{
  font-size:14.5px;font-weight:500;text-decoration:none;color:var(--claro);
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--senal-clara)}
.nav a[aria-current="page"]{border-bottom-color:var(--senal-clara)}
.acciones-cab{display:none;gap:10px;margin-left:auto}
.acciones-cab .btn{padding:10px 16px;font-size:14px}
@media(min-width:900px){
  .nav{display:flex}
  .acciones-cab{display:flex}
}
/* menú móvil */
.hamburguesa{
  margin-left:auto;background:none;border:0;color:var(--claro);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 4px;cursor:pointer;
}
@media(min-width:900px){.hamburguesa{display:none}}
.nav-movil{
  display:none;background:var(--negro);border-top:1px solid var(--linea-osc);
}
.nav-movil.abierto{display:block}
@media(min-width:900px){.nav-movil{display:none!important}}
.nav-movil a{
  display:block;padding:15px 0;text-decoration:none;color:var(--claro);
  font-size:16px;font-weight:500;border-bottom:1px solid var(--linea-osc);
}
.nav-movil a:last-child{border-bottom:0}

/* ---------- hero + buscador ---------- */
.hero{background:var(--negro);color:var(--claro);padding-block:clamp(44px,7vw,76px)}
.hero h1{max-width:19ch}
.hero .bajada{margin-bottom:34px}

.buscador{
  background:var(--papel);color:var(--tinta);
  border-radius:var(--radio);
  padding:20px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.buscador .titulo{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-suave);
  margin:0 0 14px;
}
.campos{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.campos{grid-template-columns:1fr 1fr 1fr auto;align-items:end}}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{
  font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-suave);
}
.campo select,.campo input{
  font-family:var(--sans);font-size:15px;color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  padding:12px 12px;width:100%;height:46px;
}
.campo select:focus,.campo input:focus{border-color:var(--senal);outline:none;box-shadow:0 0 0 2px rgba(179,79,22,.18)}
.buscador .btn{height:46px}
.bajo-buscador{
  margin-top:14px;font-size:13.5px;color:var(--tinta-suave);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
}
.bajo-buscador a{color:var(--senal);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(179,79,22,.4)}
.bajo-buscador a:hover{border-bottom-color:var(--senal)}

/* ---------- encabezado de sección ---------- */
.enc{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-bottom:28px}
.enc .txt{flex:1 1 340px;min-width:0}
.enc .lnk{
  font-size:14.5px;font-weight:600;color:var(--senal);text-decoration:none;
  border-bottom:1px solid rgba(179,79,22,.4);padding-bottom:2px;white-space:nowrap;
}
.enc .lnk:hover{border-bottom-color:var(--senal)}
.oscuro .enc .lnk{color:var(--senal-clara);border-bottom-color:rgba(240,160,75,.4)}

/* ---------- grilla y tarjeta de vehículo ---------- */
.grilla{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:620px){.grilla{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grilla{grid-template-columns:1fr 1fr 1fr}}

.auto{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:border-color .16s ease,box-shadow .16s ease;
  overflow:hidden;
}
.auto:hover{border-color:var(--linea-fuerte);box-shadow:0 6px 20px rgba(17,20,23,.09)}

/* marco de foto — hasta que existan las fotos reales, el hueco
   comunica el protocolo: mismo encuadre, mismo fondo, misma altura */
.foto{
  position:relative;aspect-ratio:4/3;background:var(--papel-tono);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--linea);overflow:hidden;
}
.foto img{width:100%;height:100%;object-fit:cover}
.foto .pend{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave);text-align:center;padding:0 16px;
}
.foto .etiq{
  position:absolute;left:10px;top:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--negro);color:var(--claro);
  padding:5px 9px;border-radius:2px;
}
.foto .etiq.cert{background:var(--senal);color:#fff}

.auto .cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.auto .marca-l{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave);
}
.auto h3{margin:5px 0 3px;font-size:17.5px;letter-spacing:-.015em}
.auto .version{font-size:13.5px;color:var(--tinta-suave);margin-bottom:12px}
.auto .datos{
  display:flex;flex-wrap:wrap;gap:4px 12px;
  font-family:var(--mono);font-size:12px;color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;
  padding-bottom:12px;border-bottom:1px solid var(--linea);
}
.auto .precios{margin-top:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.auto .precio{
  font-family:var(--mono);font-size:20px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--tinta);
}
.auto .cuota{font-size:12.5px;color:var(--tinta-suave)}
.auto .cuota b{font-family:var(--mono);font-weight:600;color:var(--senal)}
.auto .final{
  margin-top:8px;font-size:12.5px;color:var(--tinta-suave);
  padding-top:8px;border-top:1px dotted var(--linea-fuerte);
}
.auto .final b{font-family:var(--mono);font-weight:600;color:var(--tinta)}

/* ---------- filtros del listado ---------- */
.filtros{
  background:var(--papel-tono);
  border-bottom:1px solid var(--linea-fuerte);
  padding-block:22px;
}
.filtros-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.filtros-grid{grid-template-columns:repeat(4,1fr)}}
.filtros .campo select,.filtros .campo input{background:var(--papel)}

/* En pantalla chica ocho filtros abiertos se comen la primera pantalla:
   se pliegan detrás de un botón y el contador queda siempre a la vista. */
.toggle-filtros{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  padding:13px 16px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--tinta);
}
.toggle-filtros::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--tinta-suave)}
.toggle-filtros[aria-expanded="true"]::after{content:"–"}
.filtros-cuerpo{display:none;margin-top:12px}
.filtros-cuerpo.abierto{display:block}
@media(min-width:700px){
  .toggle-filtros{display:none}
  .filtros-cuerpo{display:block;margin-top:0}
}

.barra-res{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--linea-fuerte);
}
.contador{
  font-family:var(--mono);font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--tinta);
}
.contador span{color:var(--senal)}
.limpiar{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--tinta-suave);
  text-decoration:underline;text-underline-offset:3px;padding:6px 0;
}
.limpiar:hover{color:var(--senal)}
.vacio{
  padding:56px 20px;text-align:center;color:var(--tinta-suave);
  border:1px dashed var(--linea-fuerte);border-radius:var(--radio);
}

/* ---------- marcas ---------- */
.marcas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea-osc)}
@media(min-width:700px){.marcas{grid-template-columns:repeat(5,1fr)}}
.marcas .m{
  background:var(--negro);padding:26px 20px;
  display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--claro);
  transition:background .16s ease;
}
.marcas .m:hover{background:var(--negro-alto)}
.marcas .m .n{font-stretch:110%;font-weight:700;font-size:18px;letter-spacing:-.01em}
.marcas .m .d{font-family:var(--mono);font-size:11.5px;color:var(--claro-suave);letter-spacing:.04em}
.marcas .m .desde{margin-top:auto;padding-top:14px;font-size:13px;color:var(--senal-clara);font-weight:600}

/* ---------- lista de verificación ---------- */
.chequeo{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--linea);margin-top:24px;
}
@media(min-width:700px){.chequeo{grid-template-columns:1fr 1fr;column-gap:34px}}
.chequeo div{
  padding:13px 0 13px 26px;border-bottom:1px solid var(--linea);
  font-size:15px;position:relative;
}
.chequeo div::before{
  content:"";position:absolute;left:2px;top:20px;
  width:9px;height:9px;background:var(--senal);border-radius:50%;
}

/* ---------- ficha ---------- */
.ficha{display:grid;grid-template-columns:1fr;gap:34px;padding-block:34px}
@media(min-width:960px){.ficha{grid-template-columns:1.35fr 1fr;gap:44px;padding-block:44px}}

/* En escritorio, equipamiento y revisión siguen bajo la galería, en la
   columna izquierda: si no, queda un hueco enorme al lado del panel.
   En mobile la columna se disuelve y el precio vuelve a subir, pegado
   a las fotos, que es donde tiene que estar. */
@media(max-width:959px){
  .col-izq{display:contents}
  .galeria{order:1}
  .panel{order:2}
  #detalle{order:3}
}
#detalle{margin-top:40px}
@media(max-width:959px){#detalle{margin-top:0}}

.galeria .principal{
  aspect-ratio:4/3;background:var(--papel-tono);
  border:1px solid var(--linea);border-radius:var(--radio);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.galeria .tiras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.galeria .tiras div{
  aspect-ratio:4/3;background:var(--papel-tono);
  border:1px solid var(--linea);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-suave);text-align:center;padding:4px;
}

.panel{position:sticky;top:20px;align-self:start}
@media(max-width:959px){.panel{position:static}}
.panel .marca-l{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);
}
.panel h1{font-size:clamp(26px,3.6vw,34px);margin:6px 0 4px;font-stretch:106%}
.panel .version{font-size:15px;color:var(--tinta-suave);margin-bottom:20px}

.precio-caja{border-top:2px solid var(--negro);padding-top:18px}
.precio-grande{
  font-family:var(--mono);font-size:34px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em;
}
.precio-et{font-size:13px;color:var(--tinta-suave);margin-top:6px}

.final-caja{
  margin-top:16px;background:var(--papel-tono);
  border-left:3px solid var(--senal);
  padding:14px 16px;
}
.final-caja .t{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--senal);margin-bottom:6px;
}
.final-caja .v{font-family:var(--mono);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.final-caja .n{font-size:12.5px;color:var(--tinta-suave);margin-top:5px}

.cuota-caja{margin-top:16px;border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px}
.cuota-caja .fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cuota-caja .et{font-size:13.5px;color:var(--tinta-suave)}
.cuota-caja .v{font-family:var(--mono);font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--senal)}
.cuota-caja .sup{
  margin-top:10px;padding-top:10px;border-top:1px dotted var(--linea-fuerte);
  font-family:var(--mono);font-size:11.5px;color:var(--tinta-suave);line-height:1.7;
}

.acciones-ficha{display:flex;flex-direction:column;gap:10px;margin-top:20px}
@media(min-width:520px) and (max-width:959px){.acciones-ficha{flex-direction:row}.acciones-ficha .btn{flex:1}}

.datos-tabla{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.datos-tabla th,.datos-tabla td{
  text-align:left;padding:11px 0;border-bottom:1px solid var(--linea);vertical-align:top;
}
.datos-tabla th{font-weight:500;color:var(--tinta-suave);width:46%}
.datos-tabla td{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}

details.equipo{border-top:1px solid var(--linea-fuerte);margin-top:26px}
details.equipo summary{
  cursor:pointer;padding:16px 26px 16px 0;font-weight:600;font-size:16px;
  list-style:none;position:relative;
}
details.equipo summary::-webkit-details-marker{display:none}
details.equipo summary::after{
  content:"+";position:absolute;right:2px;top:14px;
  font-family:var(--mono);font-size:19px;color:var(--tinta-suave);
}
details.equipo[open] summary::after{content:"–"}
.equipo ul{margin:0 0 20px;padding-left:20px;columns:2;column-gap:30px;font-size:14.5px}
@media(max-width:600px){.equipo ul{columns:1}}
.equipo li{margin-bottom:6px;break-inside:avoid}

/* ---------- taller ---------- */
.dos{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:820px){.dos{grid-template-columns:1fr 1fr;gap:44px}}
.lista-precio{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--linea)}
.lista-precio li{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--linea);font-size:15px;
}
.lista-precio .p{font-family:var(--mono);font-size:13.5px;color:var(--tinta-suave);white-space:nowrap}

/* ---------- pie ---------- */
.pie{background:var(--negro-hondo);color:var(--claro-suave);padding-block:44px 34px;font-size:14px}
.pie-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:720px){.pie-grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{color:var(--claro);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono);font-weight:600;margin-bottom:12px}
.pie a{color:var(--claro-suave);text-decoration:none;display:block;padding:4px 0}
.pie a:hover{color:var(--claro)}
.pie .legal{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--linea-osc);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#7A848A;
}

/* ---------- aviso de muestra ---------- */
.aviso{
  background:var(--senal);color:#fff;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  padding:9px 0;text-align:center;
}
.aviso strong{font-weight:600}
@media(max-width:620px){.aviso{font-size:10.5px;letter-spacing:.04em;padding:7px 12px;line-height:1.5}}

/* ---------- barra fija móvil ---------- */
/* El disparador necesita área real: un elemento de tamaño cero
   puede no volver a notificar al IntersectionObserver. */
#disparo{display:block;width:100%;height:1px}
/* Sólo donde la barra no se retira sola (el listado no tiene cierre) */
.con-barra{padding-bottom:82px}
@media(min-width:900px){.con-barra{padding-bottom:0}}
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--papel);border-top:1px solid var(--linea-fuerte);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:10px;
  transform:translateY(105%);visibility:hidden;
  transition:transform .26s ease,visibility 0s linear .26s;
}
.barra.visible{transform:translateY(0);visibility:visible;transition:transform .26s ease,visibility 0s}
.barra .btn{flex:1;padding:13px 10px;font-size:14.5px}
@media(min-width:900px){.barra{display:none}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}