/* ============================================================================
   CribAI Autos — Custom Cars
   Hoja de estilos compartida por todas las páginas.

   Referencia de layout: AutoScout24 (buscador arriba, fila de carrocerías,
   grid limpio, ficha con galería + contacto lateral). Paleta de Custom Cars
   (negro / rojo / blanco). Lo que NO se copia de las páginas locales: banners
   saturados, exceso de color y texto apretado en las tarjetas.

   El sitio público va sobre papel blanco; el negro se reserva para la barra,
   el hero y el pie. El panel interno usa los mismos tokens.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root{
  --ink:#0c0d10;          /* negro de marca */
  --ink-2:#17191f;
  --ink-3:#22252d;
  /* Rojo del logo, el de la palabra "CARS". */
  --red:#dd1e26;
  --red-hi:#f5323a;
  --paper:#fff;
  --paper-2:#f4f5f7;
  --paper-3:#eceef2;
  --line:#e0e3e9;
  --line-2:#d2d6de;
  --text:#14161b;
  --muted:#666d7a;
  --muted-2:#8e95a2;
  --green:#0f9d58;
  --amber:#c47f00;

  --f-display:'Archivo','Helvetica Neue',sans-serif;
  --f-body:'Inter','Helvetica Neue',sans-serif;

  --nav-h:72px;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(12,13,16,.06),0 8px 24px rgba(12,13,16,.06);
  --shadow-hi:0 2px 4px rgba(12,13,16,.08),0 18px 44px rgba(12,13,16,.14);
  --wrap:1280px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font-family:var(--f-body);
  font-size:16px;line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

/* `min-width:0` no es de adorno: en panel.html el `body` es una columna flex y
   este `main` es hijo suyo. Un hijo flex trae `min-width:auto`, o sea que se
   niega a encogerse por debajo de su contenido, y la tabla de inventario mide
   838 px de mínimo. Resultado en un teléfono de 375 px: el `main` se plantaba
   en 901 px y había que arrastrar la página de lado para leerla. */
.wrap{max-width:var(--wrap);margin:0 auto;min-width:0;
  padding:0 clamp(1rem,3.5vw,2.5rem)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 2. Tipografía ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.1;
  letter-spacing:-.015em;color:var(--ink)}
.eyebrow{font-family:var(--f-display);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.4rem,3vw,2.2rem);flex-wrap:wrap}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.35rem)}
.section-head p{color:var(--muted);font-size:.95rem;margin-top:.35rem}
.link-more{font-family:var(--f-display);font-weight:600;font-size:.9rem;
  color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:2px solid var(--red);padding-bottom:.15rem;transition:gap .2s}
.link-more:hover{gap:.7rem}

/* ── 3. Botones ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-display);font-weight:600;font-size:.92rem;
  padding:.72rem 1.35rem;border:1px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-3)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:var(--paper-2)}
.btn-wa{background:#25d366;color:#0b3d20}
.btn-wa:hover{background:#1fbe5a}
.btn-block{width:100%}
.btn-sm{padding:.45rem .85rem;font-size:.83rem}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ── 4. Barra superior ───────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:90;background:var(--ink);color:#fff;
  height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,3.5vw,2.5rem);
  width:100%;display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:baseline;gap:.55rem;font-family:var(--f-display);
  font-weight:800;font-size:1.22rem;letter-spacing:.02em;color:#fff}
.brand b{font-weight:800}
.brand em{font-style:normal;color:var(--red)}
.brand small{font-family:var(--f-body);font-weight:500;font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.brand-texto{display:flex;align-items:baseline;gap:.55rem}
/* El logo viene con el fondo negro incorporado, así que solo se usa sobre la
   barra y el pie, que ya son negros. `[hidden]` gana sobre el display de la
   regla, que es lo que lo mantiene oculto mientras el archivo no exista. */
.brand-logo{height:54px;width:auto;display:block}
.brand-logo[hidden],.brand-texto[hidden]{display:none}
.nav-links{display:flex;gap:1.7rem;list-style:none;margin-left:1rem}
.nav-links a{font-family:var(--f-display);font-weight:500;font-size:.9rem;
  color:rgba(255,255,255,.62);transition:color .18s;position:relative;padding:.3rem 0}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--red)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.nav-tel{font-family:var(--f-display);font-weight:600;font-size:.9rem;
  color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:.45rem}
.nav-tel:hover{color:#fff}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-sm);padding:.45rem;cursor:pointer;color:#fff}

.sheet-bg{position:fixed;inset:0;background:rgba(8,9,11,.6);backdrop-filter:blur(4px);
  z-index:120;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,330px);z-index:121;
  background:var(--ink);color:#fff;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;
  padding:0 1.5rem 1.5rem}
.sheet.open{transform:none}
.sheet-top{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1)}
.sheet-close{background:none;border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:var(--radius-sm);padding:.4rem;cursor:pointer;display:flex}
.sheet nav{display:flex;flex-direction:column;margin-top:1.2rem;flex:1}
.sheet nav a{font-family:var(--f-display);font-weight:600;font-size:1.15rem;
  padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.sheet nav a:hover{color:#fff}
.sheet-btns{display:flex;flex-direction:column;gap:.6rem;padding-top:1.2rem}

/* ── 5. Hero ─────────────────────────────────────────────────────────────── */
/* El video de marca va de fondo, a ancho completo y ENTERO: `height:auto` le da
   al elemento el 16/9 del archivo, así que no hay `object-fit` ni recorte de por
   medio y se ve exactamente el encuadre que entregó el cliente.

   Nota: acá NO va una regla de `prefers-reduced-motion`. Ocultar el video le
   dejaba la pantalla congelada en el póster a cualquiera que tenga apagados los
   efectos de animación de Windows, que es lo más común. El clip dura 10 s,
   corre una sola vez, va en silencio y no parpadea. */
.hero{position:relative;background:var(--ink);color:#fff}

/* El video se muestra a ancho completo y se le recortan las franjas de arriba y
   de abajo, que eran negro muerto y el reflejo del piso. Queda una banda ancha
   con el logo llenándola.

   Las dos medidas van en porcentaje del ANCHO —así funcionan los márgenes en
   porcentaje— y por eso el encuadre se mantiene igual en cualquier pantalla:
     · alto natural del video ... 56,25% del ancho (16/9)
     · recorte arriba .......... 15,16%  (194 px a 1280 de ancho, ~2 pulgadas)
     · recorte abajo ........... 15,16%
     · banda visible ........... 25,93%  ->  aspect-ratio 1280/332
   El margen negativo sube el video y `.hero-media` recorta lo que sobra por
   abajo. La imagen no se escala ni se deforma: solo se ve menos cuadro.
   Para ajustar el recorte hay que mover el margen y la proporción juntos. */
.hero-media{position:relative;overflow:hidden;aspect-ratio:1280/332}
.hero-video{display:block;width:100%;height:auto;margin-top:-15.16%}

/* Funde los bordes de la banda con el negro de la barra y del buscador. Sin
   esto el piso del video queda gris y choca de golpe contra el negro plano.
   Al llegar al borde el degradado es exactamente `--ink`, así que la costura
   desaparece en vez de disimularse.

   Dentro de la banda, el logo va del 16% al 86% del alto (el recorte ya se
   comió el aire de afuera). Los degradados se quedan justo fuera de ese rango
   —15% arriba, 14% abajo— para no ensuciarle el contraste al carro ni a las
   estrellas. Si se cambia el recorte, hay que recalcular estos dos topes. */
.hero-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--ink) 0%,rgba(12,13,16,0) 15%),
             linear-gradient(to top,var(--ink) 0%,rgba(12,13,16,0) 14%)}

/* El titular quedó fuera del video: en una banda de 332 px el logo ocupa el 70%
   del alto y cualquier texto encima le caía sobre las estrellas. */
.hero-texto{margin-bottom:clamp(1.2rem,2.6vw,1.8rem)}
.hero-texto .eyebrow{display:block;margin-bottom:.35rem}
.hero-texto h1{color:#fff;font-size:clamp(1.5rem,3vw,2.5rem);max-width:20ch}
.hero-texto h1 em{font-style:normal;color:var(--red-hi)}
.hero-texto p{color:rgba(255,255,255,.72);margin-top:.4rem;max-width:60ch;
  font-size:clamp(.88rem,1.25vw,1.05rem)}

/* El buscador sale del hero para no comerle pantalla al video. */
.hero-buscador{background:var(--ink);position:relative;
  padding:clamp(1.4rem,3vw,2rem) 0 clamp(2.6rem,5vw,3.6rem)}
.hero-buscador::after{content:'';position:absolute;inset:auto 0 0 0;height:90px;
  background:linear-gradient(to bottom,transparent,var(--paper-2))}
.hero-buscador .wrap{position:relative;z-index:2}
.hero-buscador .search-card{margin-top:clamp(1rem,2.4vw,1.5rem);transform:none}
.hero-stats{display:flex;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap}
.hero-stats div{border-left:2px solid var(--red);padding-left:.85rem}
.hero-stats b{display:block;font-family:var(--f-display);font-size:1.5rem;color:#fff}
.hero-stats span{font-size:.8rem;color:rgba(255,255,255,.55)}

/* Buscador que monta sobre el hero */
.search-card{position:relative;z-index:3;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-hi);
  padding:clamp(1.1rem,2.4vw,1.6rem);margin-top:clamp(2.2rem,5vw,3.4rem);
  transform:translateY(clamp(1.5rem,4vw,2.6rem))}
.search-grid{display:grid;gap:.85rem;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label{font-family:var(--f-display);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.input,.select,.textarea{width:100%;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:.62rem .75rem;font-size:.95rem;
  transition:border-color .18s,box-shadow .18s;min-width:0}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666d7a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}
.textarea{min-height:110px;resize:vertical;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(12,13,16,.08)}
.search-card .btn{height:42px}

/* ── 6. Carrocerías ──────────────────────────────────────────────────────── */
/* Fila de carrocerías al estilo AutoScout24: un solo panel blanco con los autos
   en línea, sin cajas separadas que compitan entre sí. El label va centrado
   debajo de cada uno. */
/* `auto-fit` en vez de un número fijo de columnas: la lista de carrocerías se
   maneja desde db.CARROCERIAS y puede crecer, así que la fila se acomoda sola. */
.body-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:clamp(.3rem,1vw,.8rem);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(.9rem,2vw,1.5rem)}
.body-tile{background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;
  padding:.7rem .5rem .8rem;display:flex;flex-direction:column;align-items:center;
  gap:.1rem;text-align:center;transition:background .18s,transform .18s}
.body-tile:hover{background:var(--paper-2);transform:translateY(-2px)}
/* Las fotos son PNG recortados con fondo transparente. Se ajustan por alto para
   que el pickup salga más largo que el hatchback, como en la vida real, en vez
   de forzarlos todos al mismo largo. */
.body-tile img{display:block;width:100%;height:72px;object-fit:contain;
  margin-bottom:.5rem}
.body-tile b{font-family:var(--f-display);font-size:.98rem;color:var(--ink)}
.body-tile span{font-size:.8rem;color:var(--muted)}
/* Sin unidades no se apaga la tarjeta —eso dejaría el hueco visual que la lista
   fija vino a resolver—: el pie pasa a ser una invitación a preguntar. */
.body-tile.sin-stock span{color:var(--red)}

/* ── 7. Tarjeta de vehículo ──────────────────────────────────────────────── */
.grid-autos{display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.auto-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.auto-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-hi);transform:translateY(-3px)}
.auto-foto{position:relative;aspect-ratio:16/10;background:var(--paper-3);overflow:hidden}
.auto-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
/* La silueta de respaldo no es una foto: recortarla a pantalla completa la
   dejaría cortada por los lados. Va entera y centrada sobre el gris. */
.auto-foto img.sin-foto,.galeria-main img.sin-foto{object-fit:contain;padding:9%}
.auto-card:hover .auto-foto img{transform:scale(1.035)}
.auto-badges{position:absolute;top:.65rem;left:.65rem;display:flex;gap:.4rem;flex-wrap:wrap}
.badge{font-family:var(--f-display);font-weight:600;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.24rem .55rem;border-radius:3px;background:var(--ink);color:#fff}
.badge-red{background:var(--red)}
.badge-amber{background:var(--amber)}
.badge-ghost{background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.14)}
.auto-fotos-n{position:absolute;right:.65rem;bottom:.65rem;background:rgba(12,13,16,.72);
  color:#fff;font-size:.72rem;padding:.2rem .5rem;border-radius:3px;
  display:inline-flex;align-items:center;gap:.3rem}
.auto-body{padding:.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.auto-titulo{font-family:var(--f-display);font-weight:700;font-size:1.06rem;
  line-height:1.25;color:var(--ink)}
.auto-titulo span{color:var(--muted);font-weight:500}
.auto-precio{font-family:var(--f-display);font-weight:800;font-size:1.45rem;
  color:var(--ink);letter-spacing:-.02em;line-height:1}
.auto-precio small{font-family:var(--f-body);font-weight:500;font-size:.74rem;
  color:var(--muted);display:block;margin-top:.2rem;letter-spacing:0}
.auto-specs{display:flex;flex-wrap:wrap;gap:.35rem .55rem;margin-top:auto;padding-top:.5rem;
  border-top:1px solid var(--line)}
.auto-specs li{list-style:none;font-size:.82rem;color:var(--muted);
  display:inline-flex;align-items:center;gap:.3rem}
.auto-specs li+li::before{content:'·';margin-right:.25rem;color:var(--line-2)}

/* ── 8. Filtros del catálogo ─────────────────────────────────────────────── */
.cat-layout{display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:clamp(1.2rem,2.6vw,2rem);align-items:start;
  padding:clamp(1.5rem,3.5vw,2.5rem) 0 clamp(3rem,6vw,5rem)}
.filtros{position:sticky;top:calc(var(--nav-h) + 1rem);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem}
.filtros h3{font-size:1rem;margin-bottom:.9rem;display:flex;justify-content:space-between;
  align-items:center}
.filtro-grupo{display:flex;flex-direction:column;gap:.35rem;padding:.85rem 0;
  border-top:1px solid var(--line)}
.filtro-grupo>label{font-family:var(--f-display);font-weight:600;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.filtro-par{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-size:.83rem;padding:.34rem .7rem;border:1px solid var(--line-2);
  border-radius:99px;background:var(--paper);cursor:pointer;transition:all .16s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.1rem}
.cat-top b{font-family:var(--f-display);font-size:1.15rem}
.cat-top .muted{color:var(--muted);font-weight:400;font-size:.95rem}
.orden-wrap{display:flex;align-items:center;gap:.5rem}
.orden-wrap label{font-size:.85rem;color:var(--muted)}
.btn-filtros-movil{display:none}
.vacio{text-align:center;padding:clamp(3rem,7vw,5rem) 1rem;color:var(--muted)}
.vacio b{display:block;font-family:var(--f-display);font-size:1.25rem;color:var(--ink);
  margin-bottom:.4rem}

/* ── 9. Ficha del vehículo ───────────────────────────────────────────────── */
.crumbs{font-size:.85rem;color:var(--muted);padding:1rem 0 .2rem}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(1.4rem,3vw,2.4rem);align-items:start;padding:1rem 0 clamp(3rem,6vw,5rem)}
.galeria-main{position:relative;aspect-ratio:16/10;background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.galeria-main img{width:100%;height:100%;object-fit:cover}
.galeria-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.14);transition:background .18s}
.galeria-nav:hover{background:#fff}
.galeria-nav.prev{left:.7rem}.galeria-nav.next{right:.7rem}
.galeria-thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.3rem}
.galeria-thumbs img{width:96px;height:64px;object-fit:cover;border-radius:var(--radius-sm);
  border:2px solid transparent;cursor:pointer;flex:0 0 auto;opacity:.7;transition:all .18s}
.galeria-thumbs img:hover{opacity:1}
.galeria-thumbs img.on{border-color:var(--red);opacity:1}

.ficha-titulo{margin:1.6rem 0 .3rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.ficha-sub{color:var(--muted);font-size:.95rem;margin-bottom:1.4rem}
.specs-bloque{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1rem;
  overflow:hidden}
.specs-bloque h3{font-size:.95rem;padding:.8rem 1.1rem;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.specs-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.specs-lista div{display:flex;justify-content:space-between;gap:1rem;padding:.68rem 1.1rem;
  border-bottom:1px solid var(--line);font-size:.9rem}
.specs-lista dt{color:var(--muted)}
.specs-lista dd{font-weight:600;text-align:right}
.extras-lista{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 1.1rem}
.extras-lista span{font-size:.85rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:99px;padding:.3rem .75rem}
.descripcion{padding:1rem 1.1rem;font-size:.97rem;color:#2c3038;line-height:1.7;
  white-space:pre-line}

.contacto{position:sticky;top:calc(var(--nav-h) + 1rem);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.contacto-precio{background:var(--ink);color:#fff;padding:1.2rem 1.25rem}
.contacto-precio b{display:block;font-family:var(--f-display);font-weight:800;
  font-size:2.1rem;letter-spacing:-.02em;line-height:1}
.contacto-precio span{font-size:.82rem;color:rgba(255,255,255,.6)}
.contacto-body{padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}
.contacto-body .dato{display:flex;gap:.6rem;font-size:.88rem;color:var(--muted);
  align-items:flex-start}
.contacto-body .dato b{color:var(--text);font-weight:600}
.contacto-hr{height:1px;background:var(--line);margin:.35rem 0}

/* ── 10. Pie ─────────────────────────────────────────────────────────────── */
.footer{background:var(--ink);color:rgba(255,255,255,.62);
  padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;
  padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.8rem}
.footer-logo{height:64px;margin-bottom:.9rem}
.footer a{color:rgba(255,255,255,.62);display:block;padding:.22rem 0;font-size:.92rem}
.footer a:hover{color:#fff}
.footer p{font-size:.92rem;max-width:38ch}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.3rem;font-size:.82rem;color:rgba(255,255,255,.4)}
.footer-bottom a{display:inline;color:rgba(255,255,255,.4)}

.wa-fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;width:54px;height:54px;
  border-radius:50%;background:#25d366;color:#0b3d20;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 22px rgba(37,211,102,.4);transition:transform .2s}
.wa-fab:hover{transform:scale(1.07)}

/* ── 11. Panel interno ───────────────────────────────────────────────────── */
.panel-top{background:var(--ink);color:#fff;padding:1.4rem 0}
.panel-top h1{color:#fff;font-size:1.5rem}
.panel-top p{color:rgba(255,255,255,.55);font-size:.9rem;margin-top:.2rem}
.panel-top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;margin:1.4rem 0}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem}
.kpi b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.75rem;
  line-height:1.1;color:var(--ink)}
.kpi span{font-size:.8rem;color:var(--muted)}
.kpi.acento b{color:var(--red)}

.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem;
  overflow-x:auto}
.tab{font-family:var(--f-display);font-weight:600;font-size:.92rem;padding:.7rem 1rem;
  border:none;background:none;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;
  white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--red)}

.tabla{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.9rem}
.tabla th{background:var(--paper-2);text-align:left;font-family:var(--f-display);
  font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:.7rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tabla td{padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr:hover{background:var(--paper-2)}
.tabla .miniatura{width:64px;height:44px;object-fit:cover;border-radius:4px;
  background:var(--paper-3)}
.tabla .acciones{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.select-estado{width:auto;padding:.3rem .5rem;font-size:.85rem}
.fila-baja{opacity:.5}
.pill{font-size:.75rem;font-weight:600;padding:.2rem .55rem;border-radius:99px;
  display:inline-block;white-space:nowrap}
.pill-verde{background:#e6f6ed;color:var(--green)}
.pill-ambar{background:#fdf3e0;color:var(--amber)}
.pill-gris{background:var(--paper-3);color:var(--muted)}
.pill-rojo{background:#fde9ea;color:var(--red)}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.85rem}
.form-grid .ancho{grid-column:1/-1}
.bloque{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;margin-bottom:1rem}
.bloque>h3{font-size:1.02rem;margin-bottom:.9rem;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.hint{font-size:.82rem;color:var(--muted);font-weight:400}
.aviso{border-left:3px solid var(--amber);background:#fdf8ee;padding:.7rem .9rem;
  font-size:.87rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:.8rem}
.aviso-ok{border-left-color:var(--green);background:#eef8f2}

/* Dos botones lado a lado: cámara y galería. En celular se apilan, que es donde
   más importa que el área de toque sea grande. */
.fotos-botones{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.fotos-drop{border:1.5px dashed var(--line-2);border-radius:var(--radius);
  padding:1rem;text-align:center;color:var(--muted);font-size:.9rem;cursor:pointer;
  transition:border-color .18s,background .18s;display:block;min-height:76px}
.fotos-drop:hover{border-color:var(--ink);background:var(--paper-2)}
.fotos-drop b{display:block;color:var(--ink);font-family:var(--f-display);font-size:.95rem}
.fotos-drop small{display:block;margin-top:.15rem;font-size:.78rem}
.fotos-prev{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.fotos-prev figure{position:relative;width:104px}
.fotos-prev img{width:104px;height:70px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--line)}
.fotos-prev button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;
  border-radius:50%;border:none;background:var(--ink);color:#fff;cursor:pointer;
  font-size:.75rem;line-height:1}
.fotos-prev figcaption{font-size:.7rem;color:var(--muted);text-align:center;margin-top:.2rem}

.actividad{list-style:none;display:flex;flex-direction:column}
.actividad li{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line);
  font-size:.87rem;align-items:baseline}
.actividad li:last-child{border-bottom:none}
.actividad time{color:var(--muted-2);font-size:.78rem;flex:0 0 auto;min-width:88px}
.actividad .quien{color:var(--muted);font-size:.78rem}

/* Casillas de equipamiento del panel.
   Van como fichas y no como casilla+texto en fila: el vendedor las toca con el
   dedo parado al lado del carro, y una casilla de 13 px es imposible de acertar
   así. La ficha entera es el área tocable. */
.extras-grupo + .extras-grupo{margin-top:.9rem}
.extras-grupo > b{display:block;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:.45rem}
.extras-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.extra-check{position:absolute;opacity:0;pointer-events:none}
.extra-chip{display:inline-block;font-size:.85rem;line-height:1.2;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);border-radius:99px;
  padding:.5rem .8rem;user-select:none;transition:background .12s,border-color .12s,color .12s}
.extra-chip:hover{border-color:var(--muted)}
.extra-check:checked + .extra-chip{background:var(--ink);border-color:var(--ink);
  color:#fff;font-weight:600}
.extra-check:checked + .extra-chip::before{content:"✓ ";}
.extra-check:focus-visible + .extra-chip{outline:2px solid var(--red);outline-offset:2px}

.login-page{min-height:100dvh;display:grid;place-items:center;background:var(--ink);padding:1.5rem}
.login-card{background:var(--paper);border-radius:var(--radius);padding:2rem;
  width:min(100%,400px);box-shadow:var(--shadow-hi)}
.login-card h1{font-size:1.4rem;margin-bottom:.3rem}
.login-card p{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}
.login-card .field{margin-bottom:.85rem}

.error{color:var(--red);font-size:.87rem;min-height:1.2em}

/* Aviso flotante de acción hecha */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);z-index:200;
  background:var(--ink);color:#fff;padding:.75rem 1.15rem;border-radius:var(--radius-sm);
  font-size:.9rem;box-shadow:var(--shadow-hi);transition:transform .3s cubic-bezier(.22,1,.36,1);
  max-width:min(92vw,440px)}
.toast.show{transform:translate(-50%,0)}
.toast.err{background:var(--red)}

/* Modal del panel */
.modal-bg{position:fixed;inset:0;background:rgba(8,9,11,.55);z-index:150;
  display:flex;align-items:flex-start;justify-content:center;padding:1.2rem;
  overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-bg.open{opacity:1;pointer-events:auto}
/* `min-width:0` no es decorativo: como elemento flexible, el modal se negaba a
   bajar del ancho mínimo de su contenido y quedaba en 860 px dentro de una
   pantalla de 375, sacando la página de cuadro. Es justo el caso de uso que
   importa — cargar el vehículo desde el celular, parado en el lote. */
.modal{background:var(--paper-2);border-radius:var(--radius);width:min(100%,860px);
  min-width:0;margin:auto;box-shadow:var(--shadow-hi);transform:translateY(12px);
  transition:transform .25s}
.modal-bg.open .modal{transform:none}
.modal-top{position:sticky;top:0;z-index:2;background:var(--paper);
  border-bottom:1px solid var(--line);padding:1rem 1.2rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;
  border-radius:var(--radius) var(--radius) 0 0}
.modal-top h2{font-size:1.15rem}
.modal-body{padding:1.2rem}
.modal-pie{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);
  padding:.9rem 1.2rem;display:flex;justify-content:flex-end;gap:.6rem;
  border-radius:0 0 var(--radius) var(--radius)}

.skeleton{background:linear-gradient(90deg,var(--paper-3) 25%,var(--paper-2) 50%,var(--paper-3) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius)}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── 12. Adaptación a pantallas chicas ───────────────────────────────────── */
/* -- Buscador en lenguaje natural ---------------------------------------- */
.buscador-ia{display:flex;gap:.5rem;margin-bottom:.7rem}
.buscador-ia .input{flex:1;min-width:0;font-size:1rem;padding:.8rem 1rem}
.buscador-ia .btn{flex:0 0 auto}

.ejemplos{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:.9rem}
.ejemplos span{font-size:.8rem;color:var(--muted-2)}
.ejemplos button{background:var(--paper-2);border:1px solid var(--line);cursor:pointer;
  border-radius:99px;padding:.28rem .7rem;font-size:.8rem;color:var(--muted);
  transition:border-color .18s,color .18s}
.ejemplos button:hover{border-color:var(--ink);color:var(--ink)}

/* Lo que el buscador entendió, en fichas. Es la parte que hace que se pueda
   confiar en él: sin esto, el catálogo se filtra y nadie sabe por qué. */
.lectura{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:.6rem;
  font-size:.85rem}
.lectura b{font-family:var(--f-display);color:var(--ink)}
.lectura span{background:var(--ink);color:#fff;border-radius:99px;padding:.24rem .7rem;
  font-size:.8rem}

/* -- Comparador ---------------------------------------------------------- */
/* La tabla se desplaza dentro de su caja y no arrastra la página: la primera
   columna queda fija para que al correrse de lado siempre se sepa qué fila se
   está mirando. */
.tabla-comp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper)}
.tabla-comp{width:100%;border-collapse:collapse;min-width:520px}
.tabla-comp th,.tabla-comp td{padding:.7rem .9rem;border-bottom:1px solid var(--line);
  text-align:left;font-size:.9rem;vertical-align:top}
.tabla-comp thead td{vertical-align:bottom}
.tabla-comp th{font-family:var(--f-display);font-weight:600;color:var(--muted);
  font-size:.82rem;width:170px;position:sticky;left:0;background:var(--paper);z-index:1}
.tabla-comp tbody tr:hover th,.tabla-comp tbody tr:hover td{background:var(--paper-2)}
.tabla-comp tr.separador th{background:var(--ink);color:#fff;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;width:auto;position:static}
/* El valor que conviene. Solo se marca donde "más bajo" es de verdad mejor
   (precio, kilometraje); en carrocería o tracción no hay ganador. */
.tabla-comp td.gana{font-weight:700;color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.col-auto{min-width:150px}
.col-auto img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);
  margin-bottom:.5rem;background:var(--paper-3)}
.col-auto img.sin-foto{object-fit:contain;padding:8%}
.col-auto b{display:block;font-family:var(--f-display);font-size:.95rem;color:var(--ink)}
.col-auto span{font-size:.78rem;color:var(--muted)}
.col-auto .btn{margin-top:.5rem;padding:.3rem .6rem}

.obs{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.obs h3{font-size:1rem;margin-bottom:.7rem}
.obs ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.obs li{padding-left:1.1rem;position:relative;font-size:.94rem;line-height:1.5}
.obs li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--red)}
.obs .hint{margin-top:.8rem;display:block}

.comp-pie{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.vacio{text-align:center;padding:3rem 1rem;color:var(--muted)}
.vacio p{margin-bottom:1rem}

/* Botón de comparar sobre la tarjeta del catálogo. */
.auto-comp{position:absolute;left:.65rem;bottom:.65rem;z-index:2;
  background:rgba(12,13,16,.72);color:#fff;border:0;border-radius:3px;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:.72rem;padding:.28rem .6rem}
.auto-comp:hover{background:var(--ink)}
.auto-comp.on{background:var(--red)}

/* Barra flotante con lo que se lleva elegido. */
.comp-barra{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,150%);z-index:150;
  background:var(--ink);color:#fff;border-radius:var(--radius);padding:.7rem .9rem;
  display:flex;align-items:center;gap:.8rem;box-shadow:var(--shadow-hi);
  transition:transform .28s cubic-bezier(.22,1,.36,1);max-width:calc(100vw - 2rem)}
.comp-barra.show{transform:translate(-50%,0)}
.comp-barra span{font-size:.86rem;color:rgba(255,255,255,.75);white-space:nowrap}
.comp-barra .btn{padding:.45rem .9rem;font-size:.85rem}

.lead-mail{display:block;font-size:.84rem;color:var(--red);font-weight:600;
  word-break:break-all;margin-top:.1rem}
.lead-mail:hover{text-decoration:underline}

/* -- Descarga del comparativo -------------------------------------------- */
.descarga{background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:1.2rem 1.3rem;margin-top:1.2rem;display:grid;gap:.9rem}
.descarga-txt b{display:block;font-family:var(--f-display);font-size:1.05rem;
  margin-bottom:.25rem}
.descarga-txt span{font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.5}
.descarga-campos{display:grid;grid-template-columns:1fr 1.2fr auto;gap:.5rem}
.descarga-campos .input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
  color:#fff;min-width:0}
.descarga-campos .input::placeholder{color:rgba(255,255,255,.4)}
.descarga-campos .input:focus{border-color:#fff;background:rgba(255,255,255,.12)}
.descarga .hint{color:rgba(255,255,255,.45);font-size:.78rem}
/* Ya descargado: el bloque deja de gritar, pero sigue disponible por si
   quiere mandárselo a otra dirección. */
.descarga.listo{background:var(--ink-2)}
@media (max-width:640px){
  .descarga-campos{grid-template-columns:1fr}
}

/* -- Visor a pantalla completa ------------------------------------------- */
/* Se arma desde JS al tocar la foto de la ficha (`abrirVisor`). Es el único
   lugar del sitio que usa la variante de 1600 px. */
.visor{position:fixed;inset:0;z-index:200;background:rgba(8,9,11,.95);
  display:flex;align-items:center;justify-content:center;padding:clamp(.5rem,3vw,2.5rem)}
.visor img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-sm)}
.visor-x{position:absolute;top:.8rem;right:1rem;width:44px;height:44px;font-size:1.9rem;
  line-height:1;background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer}
.visor-x:hover{color:#fff}
.visor-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;border:0;cursor:pointer;font-size:1.9rem;line-height:1;
  background:rgba(255,255,255,.14);color:#fff}
.visor-nav:hover{background:rgba(255,255,255,.26)}
.visor-nav.prev{left:clamp(.4rem,2vw,1.5rem)}
.visor-nav.next{right:clamp(.4rem,2vw,1.5rem)}
.visor-n{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:.85rem;letter-spacing:.04em}
@media (max-width:640px){
  /* En un teléfono los botones laterales tapan la foto: se desliza con el dedo
     o se usa la tira de miniaturas de atrás. */
  .visor-nav{display:none}
}

@media (max-width:1080px){
  .search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search-grid .btn{grid-column:1/-1}
  .ficha{grid-template-columns:1fr}
  .contacto{position:static}
}
@media (max-width:900px){
  .nav-links,.nav-tel{display:none}
  .burger{display:flex}
  /* Con el gap de escritorio, la marca más el botón de WhatsApp y la hamburguesa
     no caben en 375 px y empujaban la barra fuera de la pantalla. */
  .nav-in{gap:.75rem}
  .nav-right .btn{padding:.55rem .9rem;font-size:.85rem}
  .brand{font-size:1.08rem;gap:.4rem}
  .brand small{display:none}
  .brand-logo{height:36px}
  .footer-logo{height:56px}
  .cat-layout{grid-template-columns:1fr}
  .filtros{position:fixed;inset:auto 0 0 0;z-index:130;max-height:82dvh;overflow-y:auto;
    border-radius:var(--radius) var(--radius) 0 0;transform:translateY(101%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:var(--shadow-hi)}
  .filtros.open{transform:none}
  .btn-filtros-movil{display:inline-flex}
  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:640px){
  /* Apilados: en el lote se toca con una mano y con guantes de sol encima. */
  .fotos-botones{grid-template-columns:1fr}
  .modal-bg{padding:.6rem}
  .modal-body,.modal-top,.modal-pie{padding-left:.8rem;padding-right:.8rem}
  .bloque{padding:.85rem}
  .body-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-autos{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .search-grid{grid-template-columns:1fr}
  /* La tabla de inventario deja de ser tabla y pasa a ser tarjetas.
     Antes era `overflow-x:auto` con `white-space:nowrap`: entraba entera pero
     había que arrastrarla de lado para llegar a «Editar», que es justo lo que
     el vendedor va a tocar todo el día. Apilada se recorre hacia abajo, que es
     como se usa un teléfono. */
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block}
  .tabla{background:none;border:0;border-radius:0;overflow:visible;white-space:normal}
  .tabla thead{display:none}
  .tabla tr{background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius);padding:.85rem;margin-bottom:.7rem;
    display:grid;grid-template-columns:76px minmax(0,1fr);gap:.2rem .85rem;
    align-items:start}
  .tabla td{border:0;padding:0;min-width:0}
  .tabla td:nth-child(1){grid-row:1/span 3}   /* la foto, a la izquierda de los tres datos */
  .tabla .miniatura{width:76px;height:58px}
  /* Estado, vitrina y acciones abajo, a lo ancho: son los que se tocan. */
  .tabla td:nth-child(n+5){grid-column:1/-1}
  .tabla td:nth-child(5){margin-top:.6rem}
  .tabla .select-estado{width:100%}
  .tabla td:nth-child(6) .btn{width:100%}
  .tabla .acciones{justify-content:stretch}
  .tabla .acciones .btn{flex:1}
  .tabla .fila-vacia{grid-column:1/-1;grid-row:auto}
  .tabla tr:has(.fila-vacia){display:block;background:none;border:0}

  /* Misma historia que el `main`, un piso más abajo: cada `.kpi` es hijo de un
     grid y por lo tanto trae `min-width:auto`, así que la cifra grande —28 px y
     peso 800— le ponía un piso de 207 px de ancho y las dos columnas sumaban
     427. Con `min-width:0` y la cifra más chica, entran dos por fila. */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:1rem 0}
  .kpi{min-width:0;padding:.7rem .8rem}
  .kpi b{font-size:1.35rem;overflow-wrap:anywhere}

  /* «Actividad y consultas» no entra en 375 px. Como tira flexible con
     desplazamiento lateral tampoco servía: el `overflow-x:auto` no impedía que
     el ancho mínimo de las tres pestañas empujara al `main`, y además dejaba
     una pestaña escondida fuera de pantalla. En grid de tres columnas
     `minmax(0,1fr)` el texto se parte en dos líneas y las tres se ven. */
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;gap:0}
  /* `white-space:normal` es lo que deja que «Actividad y consultas» se parta en
     dos líneas; con el `nowrap` de escritorio el texto se salía del botón. */
  .tab{min-width:0;padding:.6rem .35rem;font-size:.82rem;line-height:1.25;
    text-align:center;white-space:normal;hyphens:auto}

  .hero-stats{gap:1.2rem}
}