:root{
    --paper:#f2eee6;--card:#fbf9f4;--ink:#211c16;--soft:#6d665c;--line:#e4dccf;--line-2:#ede7db;
    --brown:#7a5230;--brown-2:#a9865c;--brown-soft:#f0e7d9;
    --green:#2f8a5b;--green-ink:#1f6b45;--wa:#15864a;--amber:#b57a2e;--amber-deep:#8a5a20;--gold:#c8912f;--gold-bright:#d4af37;--brown-deep:#63421f;--badge-ink:#6b5b45;--car-body:#e7cd9e;
    --hd:64px;--r:14px;--r-pill:999px;--maxw:1180px;
    --ease-out:cubic-bezier(.22,.61,.24,1);--ease-in-out:cubic-bezier(.4,0,.2,1);
    --fs-1:9px;--fs-2:10px;--fs-3:11px;--fs-4:12px;--fs-5:13px;--fs-6:14px;--fs-7:15px;--fs-8:16px;--fs-9:18px;--fs-10:20px;--fs-11:22px;--fs-12:24px;--fs-13:26px;--fs-14:30px;--fs-15:32px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Manrope",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(122,82,48,.018) 0 1px,transparent 1px 46px),radial-gradient(130% 92% at 50% -8%,#f7f3eb 0%,var(--paper) 44%,#ebe3d4 100%)}
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  :focus-visible{outline:2px solid var(--brown);outline-offset:2px}
  a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,image-slot:focus-visible{outline:2px solid var(--brown);outline-offset:2px;border-radius:6px}
  input,select,textarea{font-family:inherit;font-size:var(--fs-7);color:var(--ink)}
  .display,.serif{font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.015em}
  h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.015em}
  /* Números prolijos en toda la ficha y el catálogo */
  .cprice,.fprice,.dcprice,.ccuota,.dccuota,.frow-s .sv,.ffin div b,.fbar .fbarp b{font-variant-numeric:tabular-nums}
  .eyebrow{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--brown)}
  /* Etiquetas / micro-títulos en mayúscula: misma familia y tracking que la portada */
  .menulabel,.msub,.mainbadge,.cbadge,.fbadge,.dcest,.gcount,.festadoTag,.ffin div span,.encprevlbl,.enczoom,.menuhead span,.counter,.hmeta,.ressort span,.field label,.lfield label,.rvfield label,.frow-s .sk,.vdato span,.glabel,.ctastep .csnum,.feqcat h3,.feqcat h4,.eqgroup .eqh{font-family:"Archivo",system-ui,sans-serif}
  .frow-s .sk{letter-spacing:.01em}
  .field label,.lfield label,.rvfield label{letter-spacing:.13em}
  .eyebrow .tick{display:inline-block;width:6px;height:6px;background:var(--brown);border-radius:50%;margin-right:9px;vertical-align:middle}
  .eyebrow .ey-ic{width:15px;height:15px;margin-right:8px;vertical-align:-3px;color:var(--brown)}
  /* El logotipo se queda en Jost a propósito: acá la fuente ES la marca, no tipografía de interfaz. Es el único lugar del sitio que sigue usando Jost. */
  .logolock{font-family:"Jost",system-ui,sans-serif;display:inline-flex;flex-direction:column;line-height:.84;color:var(--ink)}
  .logolock .l1{font-weight:500;letter-spacing:-.005em}
  .logolock .l2{font-weight:400;letter-spacing:.2em;opacity:.9}
  .lk-head{font-size:var(--fs-11)}
  .lk-head .l2{font-size:.4em;letter-spacing:.26em;margin-top:.22em}
  .lk-hero{font-size:clamp(50px,10vw,118px)}
  .lk-hero .l2{font-size:.38em;letter-spacing:.34em;margin-top:.14em}
  .lk-foot{font-size:var(--fs-14)}
  .lk-foot .l2{font-size:.4em;letter-spacing:.28em;margin-top:.2em}
  /* REVELADO AL SCROLLEAR — SIN OPACIDAD, a propósito. Antes era un fade+slide: el estado de reposo era
     opacity:0 y la transición duraba .9s. Eso hacía que TODO el #hub fuera no auditable: un motor de
     contraste que mide durante esa ventana lee ratios falsos (se midieron 1,23 a 3,33 donde los reales son
     4,70 a 14,61), y esa clase de falso positivo no era sólo ruido — la de cardIn en el catálogo tapó el
     caso real de .car.sold en 2,86 hasta que se buscó a mano.
     Dejando SÓLO transform el efecto se conserva (slide-up), el texto está siempre en opacity:1 y por lo
     tanto es medible siempre, y si el IntersectionObserver no llegara a disparar el contenido queda
     visible —apenas 30px corrido— en vez de invisible. NO volver a poner opacity acá. */
  .reveal{transform:translateY(30px);transition:transform .9s cubic-bezier(.22,.61,.24,1)}
  .reveal.in{transform:none}
  .r{transform:translateY(26px);transition:transform .85s cubic-bezier(.22,.61,.24,1);will-change:transform}
  .r.in{transform:none}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes drawroad{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
  @keyframes cardIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
  @keyframes lbpop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
  .car.anim{animation:cardIn .6s both cubic-bezier(.2,.7,.2,1)}
  #lightbox.on .lbstage img{animation:lbpop .38s ease}
  header.solid{box-shadow:0 1px 0 color-mix(in srgb,var(--brown) 12%,transparent),0 14px 32px -26px rgba(33,28,22,.5)}
  .car{box-shadow:0 18px 42px -36px rgba(33,28,22,.42)}
  .car .ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,12,.12),transparent 24%,transparent 66%,rgba(20,16,12,.18))}
  .heroart{will-change:transform}
  .svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
  .svc{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px;text-align:left;cursor:pointer;overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .25s ease}
  .svc:hover{transform:translateY(-4px);border-color:var(--brown-2);box-shadow:0 26px 52px -40px rgba(33,28,22,.5)}
  .svc .sic{width:44px;height:44px;border-radius:11px;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;flex:none}
  .svc .sic svg{width:23px;height:23px}
  /* overflow-wrap acá porque .svc tiene overflow:hidden y las tarjetas son 2 columnas en celular:
     a 360px con el texto al 150% la columna útil es 129px y "Financiación"/"personalizada" piden ~158,
     así que la palabra se cortaba a la mitad y sin "…". Sólo actúa cuando la palabra NO entra. */
  .svc h3,.svc h4{font-family:"Archivo";font-weight:700;font-size:var(--fs-10);letter-spacing:-.01em;line-height:1.1;overflow-wrap:anywhere}
  .svc p{font-size:var(--fs-6);color:var(--soft);line-height:1.5;flex:1}
  .svc .more{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-5);font-weight:700;letter-spacing:.03em;color:var(--brown);margin-top:2px}
  .svc .more svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
  .svc:hover .more svg{transform:translateX(3px)}
  .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
  .tcard{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
  .tcard .tic{width:44px;height:44px;border-radius:11px;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;flex:none}
  .tcard .tic svg{width:23px;height:23px}
  .tcard h3,.tcard h4{font-family:"Archivo";font-weight:700;font-size:var(--fs-9);letter-spacing:-.01em;line-height:1.14;overflow-wrap:anywhere}
  .tcard p{font-size:var(--fs-6);color:var(--soft);line-height:1.5}
  .gbtn{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-7);font-weight:700;padding:13px 22px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--card);color:var(--ink);transition:.15s;margin-top:clamp(22px,3vw,30px)}
  .gbtn:hover{border-color:var(--brown);transform:translateY(-2px)}
  .gbtn svg{flex:none}
  @media(max-width:860px){.trust{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.trust{grid-template-columns:1fr}}
  .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
  #catBand{background:radial-gradient(120% 90% at 50% 0%,#f1e6d3 0%,#f4efe4 46%,var(--paper) 100%)}
  #catBand .bandhead h2,#catBand .bandhead h3{font-size:clamp(30px,4.4vw,48px)}
  .catprev{padding-bottom:0;margin-bottom:clamp(22px,3vw,30px)}
  .catmore{display:flex;justify-content:center;margin:clamp(24px,3vw,34px) 0 0}
  .catmore .btn.solid{background:var(--brown);border-color:var(--brown);color:#fff;padding:16px 32px;font-size:var(--fs-8);box-shadow:var(--sh-md)}
  .catmore .btn.solid:hover{background:var(--brown-2);border-color:var(--brown-2);transform:translateY(-2px);box-shadow:var(--sh-lg)}
  .catways{border-top:1px solid var(--line);padding-top:clamp(20px,3vw,28px)}
  .catwayslabel{display:block;font-size:var(--fs-3);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:700;margin-bottom:14px}
  .catgrid-mini .cat{aspect-ratio:16/7}
  #destBand{padding-top:clamp(30px,4vw,50px);padding-bottom:clamp(30px,4vw,50px);
    background-image:radial-gradient(rgba(52,38,24,.038) .5px,transparent .6px),
      radial-gradient(120% 80% at 18% 0%,rgba(255,253,248,.55),rgba(255,253,248,0) 70%),
      radial-gradient(110% 90% at 100% 100%,rgba(150,112,68,.09),rgba(150,112,68,0) 72%),
      radial-gradient(130% 95% at 50% 0%,#efe4d0 0%,#f3ede2 54%,var(--paper) 100%);
    background-size:3px 3px,auto,auto,auto;background-repeat:repeat,no-repeat,no-repeat,no-repeat}
  #catBand.nolead::before,#catBand.nolead::after{display:none!important}
  /* Destacados: la tarjeta siempre mide lo que mediría en una fila de 4; si hay menos, el grupo se centra */
  .destgrid{--dgap:clamp(10px,1.4vw,16px);--dtrack:calc((100% - 3*var(--dgap))/4);display:grid;grid-template-columns:repeat(var(--dcols,4),minmax(0,var(--dtrack)));gap:var(--dgap);align-items:stretch;justify-content:start}
  .destgrid .dcard{flex:none;width:auto;min-width:0;height:100%}
  .destgrid .dcname{font-size:var(--fs-6)}
  .destgrid .dcprice{font-size:17px}
  /* Sin nowrap: en pantallas de 360 px "Consultar por WhatsApp" no entra y se salía 33 px del botón verde. */
  .destgrid .dcwa{font-size:var(--fs-4);padding:8px;margin-top:8px;line-height:1.25}
  .destgrid .dcbna{font-size:var(--fs-2);padding:3px 7px}
  .destgrid .dccuota{font-size:var(--fs-3)}
  .destgrid .dcbody{padding:11px 12px 12px;gap:2px}
  .destgrid .dcph{aspect-ratio:16/10}
  @media(max-width:820px){.destgrid{--dcols:2!important;--dtrack:calc((100% - var(--dgap))/2)}}
  @media(max-width:520px){.destgrid{--dcols:1!important;--dtrack:min(100%,330px)}}
  .dcskel{cursor:default}
  .dcskel .dcph{background:var(--line)}
  .dcskel .skl{background:var(--line);border-radius:6px;animation:skPulse 1.4s ease-in-out infinite}
  @keyframes skPulse{0%,100%{opacity:1}50%{opacity:.45}}
  .dcarousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--brown-2) transparent}
  .dcarousel::-webkit-scrollbar{height:7px}
  .dcarousel::-webkit-scrollbar-thumb{background:var(--brown-2);border-radius:var(--r-pill)}
  .dcarousel::-webkit-scrollbar-track{background:transparent}
  .dcard{flex:0 0 clamp(214px,70%,240px);scroll-snap-align:start;background:var(--ink);border:1px solid color-mix(in srgb,var(--brown-2) 42%,transparent);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;box-shadow:0 20px 44px -30px rgba(33,28,22,.7);transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .25s ease}
  .dcard:hover{transform:translateY(-5px);box-shadow:0 36px 62px -34px rgba(33,28,22,.85);border-color:var(--brown-2)}
  /* El badge "DESTACADO" sobre la foto se sacó: la señal es la misma estrella del catálogo, a la derecha del
     nombre (ver .cdest). Todas las tarjetas de esta sección son destacadas —para eso existe la sección—, así
     que una etiqueta grande encima de la foto repetía lo que ya dice el encabezado y competía con la foto,
     que es lo que vende. */
  .dcph{position:relative;aspect-ratio:4/3;height:auto;background:#231a10;overflow:hidden}
  .dcph img,.dcph .ph-svg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(var(--z,1));transition:transform .5s var(--ease-out)}
  .dcard:hover .dcph img{transform:scale(calc(var(--z,1) * 1.03))}
  .dcph .dcest{position:absolute;top:10px;right:10px;z-index:2;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);background:var(--amber-deep);color:#fff}
  /* Chips de arriba a la derecha en Oportunidades: condición (0 km / Usado) y, si corresponde, Reservado. */
  .dctags{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .dctags .dcest{position:static;top:auto;right:auto}
  .dccond{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
  .dccond.km0{background:var(--brown);color:#fff}
  .dccond.usado{background:rgba(242,238,230,.92);color:#3a2f22}
  .dcbody{padding:13px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
  .dcname{font-family:"Archivo";font-weight:700;font-size:var(--fs-7);line-height:1.15;letter-spacing:-.01em;color:var(--paper)}
  .dcprice{font-family:"Archivo";font-weight:700;font-size:18px;letter-spacing:-.01em;margin-top:2px;color:#fff}
  .dccuota{font-size:var(--fs-4);font-weight:600;color:#8fd6ad}
  /* EL IMPORTE ES INDIVISIBLE, igual que .cfseg en el catálogo. Sin esto la línea podía cortar en el
     espacio que money() deja entre el "$" y la cifra: medido, "$ 12.260.000" se partía en dos renglones a
     320 y 340px. Es la misma clase que se barrió en el catálogo y que acá había quedado viva. */
  .dccuota b{white-space:nowrap}
  .dcbna{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:5px;font-size:var(--fs-2);font-weight:700;letter-spacing:0;color:var(--paper);background:rgba(242,238,230,.1);border:1px solid rgba(242,238,230,.26);opacity:.9;padding:3px 8px;border-radius:var(--r-pill);margin-top:3px}
  .dcwa{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:var(--fs-5);font-weight:700;color:#fff;background:var(--wa);padding:9px;border-radius:9px;transition:filter .15s ease}
  .dcwa:hover{filter:brightness(.94)}
  /* ENLACE DE LA TARJETA DE OPORTUNIDADES. Mismo patrón que .car (9ad872e): el título es el enlace real y se estira con un ::after sobre toda la tarjeta, así el área clickeable sigue siendo la tarjeta completa pero sin el role="link" que volvía presentacional al .dcwa de adentro.
     .dcard NO estaba en la regla ".car,.seller{position:relative}", así que necesita el anclaje propio para el ::after. */
  .dcard{position:relative}
  .dcname .dcnlink{color:inherit;text-decoration:none}
  .dcname .dcnlink::after{content:"";position:absolute;inset:0;z-index:1}
  /* Etiquetas decorativas en z-index:2, o sea POR ENCIMA del overlay: sin esto dejan zonas muertas donde el click no abre el vehículo. Igual que .cbadge/.gcount en las tarjetas del catálogo. */
  .dctags,.dcph .dcest{pointer-events:none}
  /* El único control real de la tarjeta tiene que quedar sobre el overlay. No estaba posicionado, así que el z-index no le aplicaba. */
  .dcwa{position:relative;z-index:5}
  .dcwa svg{width:14px;height:14px}
  .cat{position:relative;display:block;aspect-ratio:1/1.12;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--brown-soft);cursor:pointer;transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .3s ease}
  .cat:hover{transform:translateY(-6px);box-shadow:0 34px 62px -42px rgba(33,28,22,.6);border-color:var(--brown-2)}
  .cat .catmedia{position:absolute;inset:0}
  .cat .catfall{position:absolute;inset:0;z-index:0;opacity:0;background:linear-gradient(158deg,#3a2b1d,#241a11)}
  .cat .catfall .ph-svg{filter:none;transform:none}
  /* --z lo pone catImg() cuando la foto tiene encuadre manual guardado en el panel (mismo mecanismo que las fotos de los autos). */
  .cat .catmedia>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--z,1));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .cat:hover .catmedia>img{transform:scale(calc(var(--z,1) * 1.06))}
  .cat .catmedia>img.broke{display:none}
  /* Scrim localizado: solo el 40% inferior (texto) + un velo mínimo arriba (badge) */
  .cat::after{content:"";position:absolute;left:0;right:0;bottom:0;top:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(18,13,8,.34) 0%,rgba(18,13,8,.06) 16%,transparent 40%,rgba(18,13,8,.5) 78%,rgba(14,10,6,.86) 100%)}
  .cat .sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);transform:translateX(-130%);transition:transform .85s var(--ease-in-out)}
  .cat:hover .sheen{transform:translateX(130%)}
  .cat .cattag{position:absolute;top:15px;left:15px;z-index:4;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--card);background:var(--brown);padding:6px 12px;border-radius:var(--r-pill);box-shadow:0 8px 18px -10px rgba(20,14,8,.75)}
  .cat .cattxt{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:24px;color:#fff}
  .cat .catrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .cat .catlabel{font-family:"Archivo";font-weight:800;font-size:clamp(30px,3.1vw,42px);line-height:1.02;letter-spacing:-.015em;color:#fff;text-shadow:0 2px 10px rgba(14,10,6,.55),0 1px 2px rgba(14,10,6,.4)}
  .cat .catcount{font-size:var(--fs-5);font-weight:700;letter-spacing:.02em;color:#fff;opacity:.92;margin-top:9px;text-shadow:0 1px 8px rgba(14,10,6,.6)}
  .cat .catgo{width:44px;height:44px;border-radius:50%;background:#f7f3ea;border:none;display:grid;place-items:center;color:var(--brown);flex:none;box-shadow:0 10px 22px -10px rgba(14,10,6,.7);transition:background .3s ease,color .3s ease}
  .cat:hover .catgo{background:var(--brown);color:var(--card)}
  .cat .catgo svg{width:19px;height:19px;transition:transform .3s var(--ease-out)}
  .cat:hover .catgo svg{transform:translateX(3px)}
  .cat,.cat *,.dcard,.dcard *,.car .cph,.car .cinfo,.car .cname,.car .cmeta,.car .cprice,.seller,.seller .stop,.seller .srate{cursor:pointer}
  .cat:focus-visible,.car:focus-visible,.dcard:focus-visible,.seller:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
  .ctaband{padding:clamp(30px,4vw,52px) 0}
  .ctapanel{display:flex;flex-direction:column;background:var(--ink);color:var(--paper);border-radius:20px;padding:clamp(28px,4.2vw,50px);background-image:radial-gradient(120% 140% at 100% 0%,rgba(169,134,92,.28) 0%,transparent 46%)}
  .ctatop{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,60px)}
  .ctasteps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(26px,3.4vw,36px);padding-top:clamp(24px,3vw,32px);border-top:1px solid rgba(242,238,230,.16)}
  .ctastep{display:flex;align-items:flex-start;gap:13px}
  .ctastep .csic{width:44px;height:44px;border-radius:12px;background:rgba(242,238,230,.10);color:var(--brown-2);display:grid;place-items:center;flex:none}
  .ctastep .csic svg{width:23px;height:23px}
  .ctastep .cstx{display:flex;flex-direction:column;gap:4px}
  .ctastep .csnum{font-family:"Archivo";font-weight:700;font-size:var(--fs-3);letter-spacing:.16em;text-transform:uppercase;color:var(--brown-2)}
  .ctastep p{color:color-mix(in srgb,var(--paper) 80%,transparent);font-size:var(--fs-6);line-height:1.45}
  .ctatext{min-width:0}
  .ctatext .eyebrow{color:var(--brown-2)}
  .ctatext h2,.ctatext h3{font-family:"Archivo";font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.02em;margin-top:14px;color:var(--paper)}
  .ctatext p{color:color-mix(in srgb,var(--paper) 74%,transparent);font-size:var(--fs-8);margin-top:14px;max-width:48ch}
  .ctachips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
  .ctachips span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-5);font-weight:600;color:var(--paper);border:1px solid rgba(242,238,230,.22);border-radius:var(--r-pill);padding:7px 14px}
  .ctachips span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brown-2)}
  .ctaaction{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
  .ctaaction .btn.solid{background:var(--brown);border-color:var(--brown);color:#fff;padding:17px 32px;font-size:var(--fs-8);box-shadow:var(--sh-md)}
  .ctaaction .btn.solid:hover{background:var(--brown-2);border-color:var(--brown-2);transform:translateY(-2px);box-shadow:var(--sh-lg)}
  .ctago .ctaarrow{width:19px;height:19px;flex:none;transition:transform .2s var(--ease-out)}
  .ctago:hover .ctaarrow{transform:translateX(4px)}
  .ctahint svg{opacity:.7;flex:none}
  .ctahint{font-size:var(--fs-5);color:color-mix(in srgb,var(--paper) 60%,transparent);text-align:center;display:inline-flex;align-items:center;gap:5px;justify-content:center}
  @media(max-width:760px){.ctatop{flex-direction:column;align-items:flex-start}.ctaaction{width:100%}.ctaaction .btn.solid{width:100%}.ctasteps{grid-template-columns:1fr;gap:16px}}
  @media(max-width:760px){.catgrid{grid-template-columns:1fr}}
  @media(max-width:860px){.svcs{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.svcs{grid-template-columns:repeat(2,1fr);gap:10px}}
  /* UNA columna de servicios cuando el TEXTO POR DEFECTO del navegador está agrandado, no cuando la
     pantalla es angosta. El breakpoint va en em porque un media query en em se mide contra el tamaño
     de fuente por defecto (el ajuste "Tamaño de fuente" del navegador), así que sube con él: a 16px
     19em son 304px y ningún teléfono real baja de ahí —320/360/375 siguen en 2 columnas, que es un
     pedido explícito de antes: con una sola, los servicios ocupaban demasiado en mobile—, y con la
     fuente por defecto en 24px pasan a 456px, así que un teléfono de 375px cae a 1 columna.
     Por qué 19 y no 25: a 16px, 25em son 400px y los tres anchos de teléfono caen abajo, o sea que
     revertiría el pedido de las 2 columnas en el caso normal. El techo es 19*16 = 304 < 320 (el
     teléfono más chico) y el piso 19*24 = 456 > 375.
     LÍMITE MEDIDO, y es el que importa: el ajuste de "Escala de texto" de Chrome en Android NO mueve
     esto. Ese ajuste es inflación de texto, que se aplica DESPUÉS de los valores computados, así que
     agranda el texto en px pero no el em de un media query (Firefox Android sí lo mueve; Chrome no).
     Verificado con los tokens --fs-* al 150%: (max-width:19em) sigue en false y la grilla queda en 2.
     O sea: esta regla cubre a quien agranda la fuente por defecto del navegador, y el caso Android lo
     cubre el overflow-wrap:anywhere de .svc h3, que parte la palabra antes que cortarla. */
  @media(max-width:19em){.svcs{grid-template-columns:1fr}}
  header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hd);background:transparent;border-bottom:1px solid transparent;transition:border-color .3s}
  /* El fondo con blur va en un ::before y NO en el header: backdrop-filter (igual que transform) hace que el header sea el containing block de sus hijos position:fixed. En WebKit eso dejaba al .menupanel confinado a los 64px del header, así que al abrirlo scrolleado no se veía. */
  header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:transparent;transition:background .3s}
  header.solid::before{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  header.solid{border-bottom-color:var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:var(--hd)}
  .brand{display:flex;align-items:center;gap:11px;cursor:pointer}
  .brand .hd-logo{height:44px;width:auto;display:block}
  .bar{gap:14px}
  .brand{flex:0 0 auto}
  .bar{justify-content:space-between}
  .hdcenter{display:flex;align-items:center;gap:2px;min-width:0;flex:0 0 auto}
  .hdlink{position:relative;height:44px;padding:0 12px;border-radius:0;font-size:var(--fs-6);font-weight:600;color:var(--ink);white-space:nowrap;flex:0 0 auto;border:none;background:transparent;cursor:pointer;transition:color .18s ease;font-family:inherit}
  .hdlink::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.2,1);border-radius:2px;opacity:.85}
  .hdlink:hover{color:var(--brown)}
  .hdlink:hover::after{transform:scaleX(1)}
  .hddiv{width:1px;height:22px;background:var(--line);flex:0 0 auto;margin:0 8px}
  header:not(.solid) .hddiv{background:rgba(242,238,230,.28)}
  .hdcom{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-pill);white-space:nowrap;flex:0 0 auto;font-family:inherit;font-size:var(--fs-6);font-weight:700;color:var(--brown);background:color-mix(in srgb,var(--card) 82%,transparent);border:1.5px solid var(--brown);cursor:pointer;box-shadow:var(--sh-sm);transition:transform .18s var(--ease-out),background .18s ease,color .18s ease,box-shadow .2s ease}
  .hdcom:hover{background:var(--brown);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-md)}
  .hdcom svg{width:17px;height:17px;flex:none}
  .hdcom:focus-visible,.hdlink:focus-visible,.menubtn:focus-visible,.brand:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:12px}
  header:not(.solid) .hdcom{color:var(--paper);border-color:rgba(242,238,230,.5);background:rgba(242,238,230,.1)}
  header:not(.solid) .hdcom:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  header:not(.solid) .hdcom:focus-visible,header:not(.solid) .hdlink:focus-visible,header:not(.solid) .menubtn:focus-visible,header:not(.solid) .brand:focus-visible{outline-color:var(--paper)}
  .menubtn{height:40px!important;padding:0 13px!important;border:1px solid transparent!important;background:transparent;color:var(--soft);transition:transform .18s var(--ease-out),background .18s ease,color .18s ease}
  .menubtn:hover{background:var(--paper);color:var(--brown);transform:translateY(-1px)}
  .menubtn span{font-size:var(--fs-5);font-weight:600}
  header:not(.solid) .menubtn{color:rgba(242,238,230,.85)}
  header:not(.solid) .menubtn:hover{background:rgba(242,238,230,.12);color:#fff}
  @media(max-width:1180px){.hdcom .hdp-t{display:none}.hdcom .hdp-s{display:inline}}
  @media(max-width:880px){.hdcom .hdp-t,.hdcom .hdp-s{display:none}.hdcom{width:44px;padding:0;gap:0}}
  @media(max-width:600px){.hdcom{display:none}}
  .hdlink:focus-visible,.hdwaBtn:focus-visible,.menubtn:focus-visible,.menupanel a:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
  header:not(.solid) .hdlink{color:var(--paper)}
  header:not(.solid) .hdlink:hover{background:rgba(242,238,230,.12);border-color:rgba(242,238,230,.24);color:#fff}
  .hdwaBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--wa);color:#fff;font-size:var(--fs-6);font-weight:700;white-space:nowrap;flex:0 0 auto;border:none;cursor:pointer;box-shadow:var(--sh-sm);transition:filter .16s ease,box-shadow .2s ease;font-family:inherit}
  .hdwaBtn:hover{filter:brightness(.94);box-shadow:var(--sh-md)}
  .hdwaBtn svg{width:16px;height:16px;flex:none}
  @media(max-width:1180px){.hdlink{padding:0 11px;font-size:var(--fs-5)}}
  @media(max-width:1040px){.hdlink-eq{display:none}}
  @media(max-width:900px){.hdcenter,.hddiv{display:none}}
  @media(max-width:420px){.hdwaBtn span{display:none}.hdwaBtn{width:44px;padding:0}}
  .headbtns{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;flex:0 0 auto}
  .hdright{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
  .hastip{position:relative}
  #tipBubble{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;max-width:min(280px,86vw);padding:8px 12px;border-radius:10px;background:var(--ink);color:var(--paper);font-family:"Manrope",system-ui,sans-serif;font-size:var(--fs-4);font-weight:600;letter-spacing:.01em;line-height:1.35;text-align:center;box-shadow:0 14px 30px -16px rgba(33,28,22,.75),0 2px 6px rgba(33,28,22,.14);opacity:0;transform:translateY(-4px);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
  #tipBubble.on{opacity:1;transform:translateY(0)}
  @media(prefers-reduced-motion:reduce){#tipBubble{transition:none}}
  .ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:var(--fs-5);font-weight:600;color:var(--ink);height:44px;padding:0 15px;border-radius:var(--r-pill);border:1px solid transparent;transition:.15s;white-space:nowrap;flex:0 0 auto;box-sizing:border-box;line-height:1}
  .ghost:hover{border-color:var(--line);background:var(--card)}
  .hdwa{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:var(--fs-5);font-weight:600;color:var(--brown);background:transparent;border:1px solid var(--brown);height:44px;padding:0 15px;border-radius:var(--r-pill);white-space:nowrap;flex:0 0 auto;box-sizing:border-box;line-height:1;transition:.15s}
  .hdwa:hover{background:var(--brown);color:#fff}
  .hdwa svg{width:15px;height:15px}
  .headbtns button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
  .hdp-s{display:none}
  @media(max-width:1180px){.hdprofile .hdp-t{display:none}.hdprofile .hdp-s{display:inline}}
  @media(max-width:1024px){.hdnav{display:none}}
  @media(max-width:999px){.menubtn{width:44px;padding:0;gap:0}.menubtn span{display:none}.hdprofile .hdp-t,.hdprofile .hdp-s{display:none}.hdprofile{width:44px;padding:0;gap:0}
    .hdwa .hdwa-t{display:none}.hdwa{width:44px;padding:0;gap:0}}
  @media(max-width:768px){.hdprofile{display:none}}
  @media(max-width:560px){.hdwa{display:none}}
  @media(max-width:430px){.hdpanel{display:none}}
  .hdprofile{border-color:var(--brown);color:var(--brown)}
  .hdprofile:hover{background:var(--brown);color:#fff}
  .hdprofile svg{width:15px;height:15px}
  @media(max-width:520px){.hdprofile .hdp-t{display:none}.hdprofile{padding:9px 11px}}
  .perfilmodal{position:relative}
  .perfilmodal .pmsub{color:var(--soft);font-size:var(--fs-6);margin:-6px 0 16px}
  .pmhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-right:34px}
  .pmhead .pmic{width:44px;height:44px;border-radius:12px;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;flex:none}
  .pmhead .pmic svg{width:22px;height:22px}
  .pmsuccess{text-align:center;padding:8px 4px 4px}
  .pmsuccess .pmscheck{width:66px;height:66px;border-radius:50%;background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green-ink);display:grid;place-items:center;margin:4px auto 16px}
  .pmsuccess .pmscheck svg{width:32px;height:32px}
  .pmsuccess h3{margin-bottom:8px}
  .pfopt{text-transform:none;letter-spacing:0;color:var(--soft);font-weight:500;font-size:var(--fs-3);margin-left:6px}
  .pfcheck{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-5);color:var(--soft);line-height:1.4;margin:4px 0 16px;cursor:pointer}
  .pfcheck input{width:17px;height:17px;flex:none;accent-color:var(--brown);margin-top:1px}
  .perks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:20px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
  .perks li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-6);color:var(--ink);line-height:1.42}
  .perks li b{font-weight:700}
  .perks svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px}
  .pdata{display:flex;flex-direction:column;gap:0}
  .pdata div{display:flex;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-6)}
  .pdata div span{color:var(--soft)}
  .pdata div b{font-weight:700;text-align:right;word-break:break-word}
  .back{display:none}
  body.view-detail .back,body.view-cotizador .back,body.view-admin .back,body.view-vendedor .back,body.view-ficha .back,body.view-pagina .back,body.view-comparar .back{display:inline-flex}
  /* ===== VISIBILIDAD DE LAS VISTAS — PATRÓN INVERTIDO =====
     Antes esto era una LISTA DE IDS a ocultar (`#hub,#detail,…{display:none}`) más una regla por vista para
     mostrarla. Ese patrón tiene una dependencia implícita fatal: si alguien agrega una sección y se olvida
     de sumarla a la lista, queda VISIBLE en todas las vistas. Es exactamente lo que pasó con `#comparar`,
     que vivió así en producción dejando 144px de hueco al final de cada vista sin que nadie lo notara —
     porque el síntoma ("hay un espacio raro abajo") no se lee como "falta un id en un selector".
     Ahora la regla no enumera nada: **toda sección hija directa de `<main>` arranca oculta**, y la única
     forma de que se vea es que `mostrarSeccion()` le ponga `.view-on`. Así la omisión produce "no se ve"
     —que se nota apenas se prueba— en vez de "se ve siempre", que no se notó nunca.
     `#hub` lleva `view-on` en el HTML estático para que la portada pinte antes de que corra el JS. */
  #contenido > section{display:none}
  #contenido > section.view-on{display:block}
  .pagedoc{max-width:760px;padding-bottom:100px}
  /* El texto de las páginas institucionales lo escribe el Panel y trae emails y URLs, que son tokens
     sin espacios: el "ventas@leloirautomotores.com" de la política de privacidad pedía 347px sobre 320
     y se salía del renglón. */
  .pagedoc p{font-size:var(--fs-8);color:var(--ink);line-height:1.7;margin-bottom:16px;text-wrap:pretty;overflow-wrap:anywhere}
  .pagedoc ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:4px 0 22px}
  .pagedoc ul li{position:relative;padding-left:26px;font-size:var(--fs-7);color:var(--ink);line-height:1.55;overflow-wrap:anywhere}
  .pagedoc ul li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--brown)}
  .pagedoc h2,.pagedoc h3{font-size:var(--fs-9);margin:26px 0 8px}
  .pagenote{display:flex;gap:12px;align-items:flex-start;background:var(--brown-soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:26px;font-size:var(--fs-6);color:var(--soft);line-height:1.55;overflow-wrap:anywhere}
  /* Saltar al contenido: invisible hasta recibir foco con Tab (WCAG 2.4.1). */
  .skip{position:fixed;top:-120px;left:12px;z-index:300;background:var(--brown);color:#fff;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-6);padding:13px 20px;border-radius:0 0 12px 12px;box-shadow:0 10px 26px -12px rgba(33,28,22,.6);transition:top .18s var(--ease-out)}
  .skip:focus{top:0}
  @media(prefers-reduced-motion:reduce){.skip{transition:none}}
  /* ---- Carga de vehículos desde el celular ---- */
  /* El formulario completo mide ~6120px (8,7 pantallas en un celular) y el botón de guardar quedaba en el píxel 6055: había que cruzarlo entero para publicar. Acá la barra queda fija abajo. En computadora no cambia nada. */
  .msec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .msec>summary::-webkit-details-marker{display:none}
  .msec>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--brown-2);border-bottom:2px solid var(--brown-2);transform:rotate(45deg);flex:none;margin-bottom:4px;transition:transform .18s var(--ease-out)}
  .msec[open]>summary::after{transform:rotate(-135deg);margin-bottom:0}
  /* ---- Cada testimonio de reseña, colapsado ---- */
  /* Con 15 cargadas había que scrollear las 15 para llegar a la última. Van con <details> nativo —el mismo
     patrón de la ficha y del formulario mobile— y SIN atributo `name`, así se pueden abrir varias a la vez.
     Hereda de .msec el chevron y la supresión del marcador nativo. */
  .rvitem{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;background:var(--paper)}
  .rvitem>summary{min-height:44px}
  .rvsum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
  .rvsum-n{font-weight:700;font-size:var(--fs-6);color:var(--ink)}
  .rvsum-e{color:var(--gold-bright);letter-spacing:1px;font-size:var(--fs-6)}
  .rvsum-x{font-size:var(--fs-5);color:var(--soft)}
  /* El texto del comentario es lo último y lo primero que se encoge: identifica sin competir con el nombre. */
  .rvsum-t{font-size:var(--fs-5);color:var(--soft);flex:1 1 100%;overflow-wrap:anywhere}
  /* EL AVISO DE "SIN NOMBRE" SE VE CERRADO, que es todo el punto: si hubiera que abrir el item para enterarse,
     el aviso serviría justo cuando ya no hace falta. Sin opacidad y en marrón, como el aviso de arriba. */
  .rvsum-w{font-size:var(--fs-4);font-weight:700;color:var(--brown);background:var(--brown-soft);border-radius:var(--r-pill);padding:3px 9px}
  .rvitem[open]>summary{margin-bottom:12px}
  /* .abtn/.abtn.primary se definen más abajo en la hoja, así que estos selectores necesitan más especificidad para ganarles. */
  .abtn.vsolomovil{display:none}
  @media(max-width:600px){
    .modal .vsave{position:sticky;bottom:-20px;z-index:6;background:var(--card);border-top:1px solid var(--line);margin:18px -20px -20px;padding:12px 20px 20px}
    .abtn.vsolomovil{display:inline-flex}
    .abtn.primary.vbtnfull{background:transparent;color:var(--brown);border:1.5px solid var(--brown)}
  }
  .footnav{display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px 0;border-top:1px solid var(--line)}
  .footnav a{font-size:var(--fs-5);color:var(--soft);font-weight:600;cursor:pointer;transition:color .15s}
  .footnav a:hover{color:var(--brown)}
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--hd) + 40px) 24px 202px;position:relative;overflow:hidden;background:radial-gradient(ellipse 115% 85% at 50% 32%,#372c20 0%,#221c15 52%,#151109 100%);color:var(--paper)}
  .heroart{position:absolute;left:0;right:0;bottom:70px;display:flex;justify-content:center;pointer-events:none;opacity:.09;z-index:0}
  .heroart svg{width:100%;height:auto;stroke:var(--brown);fill:none}
  .carart{position:relative;width:min(110px,15%);animation:heroDrive 15s linear infinite;will-change:transform,opacity}
  .carsvg .cbody{fill:var(--car-body);stroke:none}
  .carsvg .cwin{fill:rgba(20,15,10,.5);stroke:none}
  .carsvg .ctire{fill:#1c1712;stroke:none}
  .carsvg .chub{fill:var(--car-body);stroke:none}
  .carsvg .cspoke{stroke:#1c1712;stroke-width:1.1;stroke-linecap:round}
  .carbody{width:100%;display:block;transform-box:fill-box;transform-origin:center bottom;animation:carPitch 15s linear infinite}
  .cwheel{transform-box:fill-box;transform-origin:center;animation:wheelSpin 15s linear infinite}
  @keyframes carPitch{0%{transform:rotate(0) translateY(0)}16%{transform:rotate(0) translateY(0)}20%{transform:rotate(2.4deg) translateY(0)}23%{transform:rotate(0) translateY(0)}29%{transform:rotate(0) translateY(-.35px)}33%{transform:rotate(0) translateY(.35px)}37%{transform:rotate(0) translateY(-.35px)}41%{transform:rotate(0) translateY(.35px)}45%{transform:rotate(0) translateY(0)}49%{transform:rotate(-2.4deg) translateY(0)}54%{transform:rotate(0) translateY(0)}100%{transform:rotate(0) translateY(0)}}
  @keyframes wheelSpin{0%{transform:rotate(0)}6%{transform:rotate(0)}22%{transform:rotate(900deg)}46%{transform:rotate(900deg)}59%{transform:rotate(1800deg)}100%{transform:rotate(1800deg)}}
  .wsmoke{position:absolute;bottom:-4%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(236,229,215,.85),rgba(236,229,215,0) 70%);filter:blur(3px);opacity:0;animation:brakeSmoke 15s linear infinite}
  .wsmoke.w1{left:28%}
  .wsmoke.w2{left:77%}
  .wsmoke.w1b{left:33%;width:12px;animation-delay:.28s}
  .wsmoke.w2b{left:81%;width:12px;animation-delay:.28s}
  @keyframes brakeSmoke{0%,17%{opacity:0;transform:translateY(0) scale(.3)}21%{opacity:.9;transform:translateY(0) scale(.7)}34%{opacity:0;transform:translateY(-10px) scale(1.6)}100%{opacity:0}}
  @keyframes heroDrive{0%{transform:translateX(-140vw);opacity:1}6%{transform:translateX(-140vw);opacity:1}10%{transform:translateX(-70vw);opacity:1}15%{transform:translateX(-26vw);opacity:1}19%{transform:translateX(-7vw);opacity:1}22%{transform:translateX(0);opacity:1}46%{transform:translateX(0);opacity:1}50%{transform:translateX(14vw);opacity:1}55%{transform:translateX(70vw);opacity:1}59%{transform:translateX(140vw);opacity:0}61%{transform:translateX(-140vw);opacity:0}100%{transform:translateX(-140vw);opacity:1}}
  .heroroad{position:absolute;left:0;right:0;bottom:64px;height:44px;z-index:0;overflow:hidden;background:linear-gradient(180deg,#2b2119 0%,#1c150d 78%,#120d08 100%);border-top:2px solid rgba(202,164,108,.5);box-shadow:0 -1px 0 rgba(0,0,0,.35) inset;transform-origin:center;animation:drawroad 1.1s .35s both cubic-bezier(.2,.7,.2,1)}
  .heroroad::after{content:"";position:absolute;left:0;right:0;top:17px;height:3px;background:repeating-linear-gradient(90deg,rgba(202,164,108,.82) 0 30px,transparent 30px 56px)}
  .heroroad::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(180deg,rgba(246,241,231,.16),transparent)}
  .hero .heroscene{position:absolute;left:0;right:0;bottom:88px;z-index:1;display:flex;justify-content:center;pointer-events:none}
  .hsSvg{width:100%;height:auto;display:block}
  #hsCar,#hsBuyers,#hsSeller{transition:transform 1s linear,opacity .45s linear}
  #hsDoorL,#hsDoorR{transform-box:fill-box;transition:transform .52s cubic-bezier(.4,0,.2,1)}
  #hsDoorL{transform-origin:0% 50%}
  #hsDoorR{transform-origin:100% 50%}
  #hsScene.dopen #hsDoorL,#hsScene.dopen #hsDoorR{transform:scaleX(.12)}
  #hsGate{transition:transform .85s cubic-bezier(.35,0,.25,1)}
  #hsScene.gopen #hsGate{transform:translateY(-70px)}
  #hsCar .scw{transform-box:fill-box;transform-origin:center}
  #hsCar.driving .scw{animation:hsSpin .5s linear infinite}
  @keyframes hsSpin{to{transform:rotate(360deg)}}
  .hero>*{position:relative;z-index:1}
  .hero::before{content:"";position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);width:min(960px,130%);height:min(640px,82%);background:radial-gradient(ellipse at center,rgba(178,140,94,.6),rgba(178,140,94,.18) 44%,transparent 68%);z-index:0;pointer-events:none;filter:blur(4px)}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:190px;background:linear-gradient(to bottom,transparent,var(--paper) 92%);z-index:0;pointer-events:none}
  .hero .heroart{opacity:.9;position:absolute;left:0;right:0;bottom:96px;z-index:1}
  .hero .heroroad{position:absolute;left:0;right:0;bottom:64px;z-index:0;opacity:1}
  .hero .heroart svg{stroke:#caa46c}

  .hero .eyebrow{color:var(--brown-2)}
  .hero .eyebrow .tick{background:var(--brown-2)}
  .hero .logolock{color:var(--paper);text-shadow:0 8px 48px rgba(178,140,94,.42)}
  .hero .tag{color:var(--card);font-weight:500;text-shadow:0 2px 22px rgba(20,14,8,.5)}
  .hero .hmeta{color:color-mix(in srgb,var(--paper) 80%,transparent);font-size:var(--fs-4);letter-spacing:.13em}
  .hero .hmeta .hm-pin{width:14px;height:14px;color:var(--brown-2);flex:none;margin-right:-4px}
  .hero .cue{color:var(--brown);font-weight:700}
  .hero .cue svg{color:var(--brown)}
  .heroctas .btn.solid{background:var(--brown);border-color:var(--brown);color:#fff}
  .heroctas .btn.solid:hover{background:var(--brown-2);border-color:var(--brown-2)}
  .heroctas .btn:not(.solid){color:var(--paper);border-color:rgba(242,238,230,.55);background:rgba(242,238,230,.04)}
  .heroctas .btn:not(.solid):hover{background:rgba(242,238,230,.1);border-color:var(--paper)}
  header:not(.solid) .logolock{color:var(--paper)}
  header:not(.solid) .ghost{color:var(--paper)}
  header:not(.solid) .ghost:hover{background:rgba(242,238,230,.12);border-color:rgba(242,238,230,.22)}
  header:not(.solid) .hdprofile{border-color:rgba(242,238,230,.42);color:var(--paper)}
  header:not(.solid) .hdprofile:hover{background:var(--paper);color:var(--ink)}
  header:not(.solid) .hdwa{border-color:rgba(242,238,230,.42);color:var(--paper)}
  header:not(.solid) .hdwa:hover{background:var(--paper);color:var(--ink)}
  .menuwrap{position:relative}
  .menubtn{flex:0 0 auto}
  .menubtn svg{width:16px;height:16px}
  .menupanel{position:absolute;top:calc(100% + 14px);right:0;left:auto;z-index:70;width:min(320px,calc(100vw - 32px));max-height:min(74vh,620px);overflow-y:auto;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(20px) saturate(1.1);border:1px solid color-mix(in srgb,var(--brown) 16%,var(--line));border-radius:20px;box-shadow:0 34px 70px -30px rgba(58,42,26,.45),0 4px 14px -8px rgba(58,42,26,.24);padding:10px;display:none;flex-direction:column;transform-origin:top right;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .menuhead{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px}
  .menuhead span{font-size:var(--fs-2);letter-spacing:.2em;text-transform:uppercase;color:var(--brown-2);font-weight:700}
  .menuclose{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-5);color:var(--soft);background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:.15s;font-family:inherit}
  .menuclose:hover{color:var(--brown);border-color:var(--brown)}
  .menupanel .mic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line-2);color:var(--brown-2);flex:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
  .menupanel .mic svg{width:16px;height:16px}
  .menupanel a:hover .mic{background:var(--brown-soft);border-color:color-mix(in srgb,var(--brown) 28%,transparent);color:var(--brown)}
  .menufeat{border-top:none!important;order:-1}
  .menupanel .menufeat a{background:var(--brown-soft);border:1px solid color-mix(in srgb,var(--brown) 26%,transparent);color:var(--brown);font-weight:700;margin-bottom:4px}
  .menupanel .menufeat a:hover{background:var(--brown);color:#fff}
  .menupanel .menufeat a:hover .mic{background:rgba(255,255,255,.18);border-color:transparent;color:#fff}
  /* `hidden` SOLO NO ALCANZA ACÁ: `.menupanel a{display:flex}` (0-1-1) le gana al `[hidden]` del navegador,
     así que las entradas ocultas se seguirían viendo. Con `.menupanel a[hidden]` (0-2-1) sí gana. Es la misma
     familia que .abtn: una regla previa más específica que la nueva. */
  .menupanel a[hidden]{display:none}
  .menuadmin{margin-top:2px;border-top:1px solid var(--line)!important;padding-top:6px}
  .menuadmin .mic{width:24px;height:24px;border-radius:7px}
  .menuadmin .mic svg{width:13px;height:13px}
  .menupanel{scrollbar-gutter:stable;scrollbar-color:var(--brown-2) color-mix(in srgb,var(--brown) 10%,transparent)}
  .menupanel::-webkit-scrollbar{width:9px}
  .menupanel::-webkit-scrollbar-track{background:color-mix(in srgb,var(--brown) 9%,transparent);border-radius:var(--r-pill);margin:8px 0}
  .menupanel::-webkit-scrollbar-thumb{background:var(--brown-2);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box;min-height:40px}
  .menupanel::-webkit-scrollbar-thumb:hover{background:var(--brown);background-clip:content-box}
  .menupanel.on{display:flex;animation:mpop .22s cubic-bezier(.2,.7,.2,1)}
  /* Con el menú abierto en celular se bloquea el scroll del fondo. position:fixed en el body (en vez de overflow:hidden) es lo único que Safari en iOS respeta de forma consistente. */
  body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  @keyframes mpop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
  .menulabel{padding:6px 10px 6px}
  @media(max-width:600px){.menupanel{position:fixed;top:calc(var(--hd) + 8px);right:12px;left:12px;bottom:14px;width:auto;max-height:none;border-radius:22px;padding:12px;overscroll-behavior:contain}.menupanel a{padding:13px 12px;font-size:var(--fs-8)}.menupanel .menuadmin a{font-size:var(--fs-5);padding:11px 12px}.menupanel .mic{width:34px;height:34px}.menupanel .mic svg{width:18px;height:18px}}
  .menugrp{display:flex;flex-direction:column;gap:1px;padding:4px 0}
  .menulabel{font-size:var(--fs-2);letter-spacing:.2em;text-transform:uppercase;color:var(--brown-2);font-weight:700;padding:6px 13px 8px}
  .menupanel a{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;font-size:var(--fs-6);font-weight:600;color:var(--ink);cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s var(--ease-out)}
  .menupanel a:hover{background:var(--paper);color:var(--brown);transform:translateX(2px)}
  .menupanel .menuadmin a{font-size:var(--fs-4);color:var(--soft);font-weight:600}
  .menupanel .menuadmin a:hover{color:var(--brown)}
  .menugrp+.menugrp{border-top:1px solid var(--line-2)}
  @media(prefers-reduced-motion:reduce){.menupanel.on{animation:none}}
  .hero .eyebrow{margin-bottom:26px}
  .hero .brandblock{margin-bottom:6px}
  .hero .logo-lg{max-height:clamp(70px,11vw,124px);width:auto;display:block;margin:0 auto}
  .hero .tag{font-family:"Manrope";font-weight:500;letter-spacing:normal;font-size:clamp(17px,2.4vw,27px);color:var(--card);margin-top:22px;max-width:22ch;line-height:1.28;text-shadow:0 2px 22px rgba(20,14,8,.5)}
  .hmeta{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:var(--fs-4);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);flex-wrap:wrap;justify-content:center}
  .hmeta .dot{width:5px;height:5px;border-radius:50%;background:var(--brown-2);flex:none}
  .heroctas{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;justify-content:center}
  /* ===== Red de seguridad: el texto nunca se sale del botón =====
     En Android el tamaño de fuente del sistema agranda el texto de la web (en iOS no), así que un
     botón que entra justo en un iPhone se desborda en un Samsung. Con esto, si el texto no entra,
     el botón envuelve y crece en alto en vez de dejar el texto colgando afuera.
     No se fija el tamaño de la letra a la fuerza a propósito: eso le rompería el sitio a quien
     necesita el texto más grande. Los que truncan con "…" (.cver, .lbtop .t) quedan como están.
     Ojo: acá NO va min-width:0. Se probó y es contraproducente — deja que el botón se encoja por
     debajo de su texto (el "Consultar" de la barra fija de la ficha pasaba de 172 a 129 px y el
     texto se salía 21 px). Lo que mantiene el texto adentro es que pueda envolver, no que encoja. */
  .btn,.cbtn,.dcwa,.fbtn,.fminibtn,.vpwa,.abtn,.dcbna,.dccuota,.ccuota{max-width:100%;overflow-wrap:break-word}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:var(--fs-7);font-weight:700;padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid var(--ink);transition:.18s}
  .btn svg{width:18px;height:18px}
  .btn:hover{transform:translateY(-2px)}
  .btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn.solid:hover{background:var(--brown)}
  .cue{position:absolute;bottom:18px;left:0;right:0;font-size:var(--fs-5);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;z-index:1;text-align:center}
  .cue svg{width:24px;height:24px;color:var(--brown);animation:bob 2.2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  .band{position:relative;padding:clamp(42px,7vw,80px) 0}
  .band + .band::before{content:"";position:absolute;top:0;left:50%;width:min(1080px,calc(100% - 80px));height:2px;background:linear-gradient(90deg,transparent,var(--brown-2) 16%,var(--brown) 50%,var(--brown-2) 84%,transparent);opacity:.85;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform 1s cubic-bezier(.22,.61,.24,1)}
  .band + .band::after{content:"";position:absolute;top:0;left:50%;width:10px;height:10px;background:var(--brown);transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform .45s var(--ease-out) .3s}
  .band.dvin::before{transform:translateX(-50%) scaleX(1)}
  .band.dvin::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
  @media(prefers-reduced-motion:reduce){.band + .band::before{transform:translateX(-50%) scaleX(1)}.band + .band::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}}
  .band.tint{background:linear-gradient(180deg,#f4ebda 0%,#faf5ec 55%,#f5eee0 100%)}
  .bandin{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,5vw,64px)}
  .bandhead .eyebrow{display:block;margin-bottom:16px}
  .bandhead h2,.bandhead h3{font-family:"Archivo";font-weight:700;font-size:clamp(28px,4vw,43px);line-height:1.02;letter-spacing:-.02em}
  .bandhead p{color:var(--soft);font-size:var(--fs-7);margin-top:14px;max-width:34ch}
  .bandbody{padding-top:4px}
  .minstats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
  .minstats .chip{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--fs-5);color:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;background:var(--card)}
  .minstats .chip b{font-family:"Archivo";font-weight:700;color:var(--ink);font-size:var(--fs-6)}
  .entrybtns{display:flex;flex-wrap:wrap;gap:10px}
  .ebtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-7);font-weight:700;padding:13px 24px;border-radius:var(--r-pill);border:1.5px solid var(--line);transition:.15s;background:var(--card)}
  .ebtn:hover{border-color:var(--brown);color:var(--brown);transform:translateY(-2px)}
  .ebtn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .ebtn.primary:hover{background:var(--brown);border-color:var(--brown);color:#fff}
  .locrow{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,3.4vw,48px);align-items:stretch}
  .locinfo{display:flex;flex-direction:column;justify-content:center}
  .locinfo p{font-size:var(--fs-7);color:var(--ink);margin-bottom:6px}
  .locinfo .locaddr{font-family:"Archivo";font-weight:700;font-size:clamp(19px,2vw,24px);line-height:1.24;letter-spacing:-.01em;color:var(--ink);margin-bottom:0}
  .locinfo .hours{margin-top:14px;font-size:var(--fs-6);color:var(--soft);display:flex;gap:9px}
  .locinfo .hours svg{width:16px;height:16px;color:var(--brown);flex:none;margin-top:3px}
  .locinfo .locdesc{color:var(--soft);font-size:var(--fs-7);line-height:1.62;margin-top:18px;max-width:46ch}
  .maplink{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:26px;align-self:flex-end;font-size:var(--fs-6);font-weight:700;color:var(--brown);border-bottom:1.5px solid var(--brown);padding-bottom:2px}
  .mapwrap{border-radius:14px;overflow:hidden;border:1px solid var(--line);min-height:340px;background:#e7e0d3;box-shadow:0 26px 52px -42px rgba(33,28,22,.5)}
  .mapwrap iframe{width:100%;height:100%;border:0;display:block}
  .contactlist{display:flex;flex-direction:column;gap:2px}
  /* flex-wrap acá NO es cosmético: es lo que evita que el dato de contacto quede cortado.
     El valor de la derecha (@usuario, teléfono, email) es un token SIN ESPACIOS, así que el ancho
     mínimo de la fila es el del token entero: a 360px con el texto del sistema al 150% el email pedía
     288px y la fila 401 sobre 320 disponibles, y como body está en overflow-x:clip el email y el
     teléfono quedaban ILEGIBLES y sin forma de scrollear. Con wrap el valor baja a su propio renglón
     y entra completo; el overflow-wrap:anywhere del .sub es el último recurso (200% o un email más
     largo) y es "anywhere" y no "break-word" a propósito: sólo anywhere baja el ancho mínimo de un
     ítem flex, que es lo que fuerza el desborde. */
  .contactlist a{display:flex;align-items:center;gap:14px;padding:18px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-9);font-weight:600;transition:.15s;flex-wrap:wrap}
  .contactlist a:first-child{border-top:1px solid var(--line)}
  .contactlist a svg{width:20px;height:20px;color:var(--brown);flex:none}
  .contactlist a .sub{margin-left:auto;font-size:var(--fs-5);font-weight:500;color:var(--soft);overflow-wrap:anywhere}
  .contactlist a:hover{padding-left:12px;color:var(--brown)}
  .dhead{padding:calc(var(--hd) + 40px) 0 26px}
  .dhead .eyebrow{display:block;margin-bottom:14px}
  .dhead h1,.dhead h2{font-family:"Archivo";font-weight:700;font-size:clamp(34px,6vw,60px);line-height:.98;letter-spacing:-.02em}
  .dhead .zona{margin-top:12px;color:var(--soft);font-size:var(--fs-7)}
  .dhead .dsub{margin-top:14px;max-width:60ch;color:var(--soft);font-size:clamp(15px,1.5vw,17px);line-height:1.6;text-wrap:pretty}
  body.view-detail .wrap{padding-left:clamp(24px,6vw,64px);padding-right:clamp(24px,6vw,64px)}
  .seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
  .seg button{padding:8px 18px;border-radius:var(--r-pill);font-size:var(--fs-6);font-weight:700;color:var(--soft);transition:.15s}
  .seg button.sel{background:var(--brown);color:#fff}
  .seg button{transition:background .15s ease,color .15s ease}
  .seg button:hover:not(.sel){color:var(--ink);background:var(--brown-soft)}
  .ratepick button{transition:color .12s ease,transform .12s var(--ease-out)}
  .ratepick button:hover{color:var(--gold);transform:scale(1.14)}
  .abtn.danger:hover{background:color-mix(in srgb,#b4482f 12%,transparent)}
  .lbclose{transition:background .15s ease,border-color .15s ease}
  .lbclose:hover{background:rgba(242,238,230,.14);border-color:rgba(242,238,230,.5)}
  .thumbs .rm{transition:transform .15s var(--ease-out),filter .15s ease}
  .thumbs .rm:hover{transform:scale(1.14)}
  .lbthumbs img{transition:opacity .15s var(--ease-out),border-color .15s ease}
  .lbthumbs img:hover{opacity:.85}
  .clearf:hover{color:var(--brown-deep)}
  .cue:hover{color:var(--brown)}
  .filters{position:sticky;top:var(--hd);z-index:30;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
  .filters .segrow{margin-bottom:12px}
  .filterbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .filtoggle{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 16px;font-size:var(--fs-6);font-weight:700;color:var(--ink);cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
  .filtoggle svg{width:16px;height:16px}
  .filtoggle:hover{border-color:var(--brown-2)}
  .filtoggle.active{border-color:var(--brown);color:var(--brown)}
  .filtoggle .filcount{display:none;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--brown);color:#fff;font-size:var(--fs-3);font-weight:700}
  .filtoggle.active .filcount{display:inline-grid}
  .filtoggle .fchev{color:var(--soft);transition:transform .2s var(--ease-out)}
  .filtoggle[aria-expanded="true"] .fchev{transform:rotate(180deg)}
  .filterpanel{display:none;padding-top:14px}
  .filterpanel.open{display:block;animation:filIn .18s ease}
  @keyframes filIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .frow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .search{flex:1 1 220px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 16px}
  .search svg{width:17px;height:17px;color:var(--soft);flex:none}
  .search input{border:none;outline:none;background:none;width:100%}
  .fsel{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 14px}
  .fsel label{font-size:var(--fs-3);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
  .fsel select,.fsel input{border:none;outline:none;background:none;font-size:var(--fs-6);font-weight:600}
  .fsel input{width:92px}
  .clearf{font-size:var(--fs-5);color:var(--brown);font-weight:700;padding:8px 6px}
  .clearf:hover{text-decoration:underline}
  .fdrops{display:flex;flex-wrap:wrap;gap:10px}
  .drop{position:relative}
  .dropbtn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 15px;font-size:var(--fs-6);font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap}
  .dropbtn:hover{border-color:var(--brown-2)}
  .drop.open .dropbtn,.dropbtn.has{border-color:var(--brown);color:var(--brown)}
  .dropbtn .cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--brown);color:#fff;font-size:var(--fs-3);font-weight:700}
  .dropbtn .chev{width:14px;height:14px;color:var(--soft);transition:transform .2s var(--ease-out)}
  .drop.open .dropbtn .chev{transform:rotate(180deg)}
  .droppanel{position:absolute;z-index:50;top:calc(100% + 8px);left:0;min-width:210px;max-width:280px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -30px rgba(33,28,22,.55);padding:8px;display:none;max-height:min(52vh,360px);overflow:auto}
  .drop.open .droppanel{display:block;animation:dropIn .16s ease}
  @keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .dropopt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:var(--fs-6);color:var(--ink);cursor:pointer;transition:background .12s}
  .dropopt:hover{background:var(--brown-soft)}
  .dropopt.sel{color:var(--brown);font-weight:700}
  .droppanel{max-height:min(62vh,430px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .droppanel::-webkit-scrollbar{width:7px}
  .droppanel::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
  .dropsearch{position:sticky;top:0;z-index:2;background:var(--card);padding:0 0 8px}
  .dropsearch input{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:var(--fs-6);background:var(--paper);color:var(--ink);font-family:inherit}
  .dropsearch input:focus-visible{outline:none;border-color:var(--brown)}
  .dropopt .dropn{margin-left:auto;font-size:var(--fs-4);color:var(--soft);font-weight:600}
  .dropopt.sel .dropn{color:var(--brown-2)}
  .dropempty{display:none;font-size:var(--fs-5);color:var(--soft);padding:8px 11px;margin:0}
  .dropopt input{width:16px;height:16px;flex:none;accent-color:var(--brown);cursor:pointer}
  .dropscrim{position:fixed;inset:0;z-index:40;display:none}
  .dropscrim.on{display:block}
  .fchipsrow{display:flex;flex-wrap:wrap;gap:8px}
  .fchipsrow:not(:empty){margin-top:12px}
  .fchip{display:inline-flex;align-items:center;gap:8px;background:var(--brown-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 8px 6px 14px;font-size:var(--fs-5);font-weight:600;color:var(--brown)}
  .fchip button{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:rgba(122,82,48,.16);color:var(--brown);font-size:var(--fs-5);line-height:1;cursor:pointer;transition:.15s}
  .fchip button:hover{background:var(--brown);color:#fff}
  .fchipclear{font-size:var(--fs-5);font-weight:700;color:var(--brown);padding:6px 10px;text-decoration:underline;cursor:pointer}
  @media(max-width:600px){.droppanel{position:fixed;left:12px;right:12px;bottom:12px;top:auto;min-width:0;max-width:none;max-height:64vh}.drop.open .droppanel{animation:sheetIn .2s ease}}
  .rangepanel{min-width:252px}
  .rangeinputs{display:flex;gap:10px;margin-bottom:10px}
  .rangein{flex:1;display:flex;flex-direction:column;gap:5px;font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
  .rinwrap{display:flex;align-items:center;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
  .rinwrap:focus-within{border-color:var(--brown)}
  .rinwrap input{border:none;outline:none;background:none;width:100%;font-size:var(--fs-6);font-weight:600;color:var(--ink)}
  .rpfx,.rsfx{color:var(--soft);font-size:var(--fs-5);font-weight:700;flex:none}
  .rangeopts{display:flex;flex-direction:column;gap:4px}
  .rangeopt{text-align:left;padding:9px 11px;border-radius:9px;font-size:var(--fs-6);color:var(--ink);cursor:pointer;transition:background .12s;background:none;border:none;width:100%}
  .rangeopt:hover{background:var(--brown-soft);color:var(--brown)}
  @keyframes sheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .counter{padding:26px 0 16px;font-size:var(--fs-4);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
  .stock{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);padding-bottom:110px}
  .stock.g2{grid-template-columns:repeat(2,1fr)}
  .stock.g3{grid-template-columns:repeat(3,1fr)}
  .stock.g4{grid-template-columns:repeat(4,1fr)}
  .stock.g6{grid-template-columns:repeat(6,1fr)}
  /* JERARQUÍA POR DENSIDAD. El modelo y el precio son lo que se lee primero en un listado, así que suben en
     cada densidad; el resto queda igual y más junto, así el salto se nota sin que la tarjeta crezca.
     Va acá y no sólo en la regla base porque cada densidad define su propia escala y le gana por
     especificidad: subir sólo .cname/.cprice no cambiaba nada en el catálogo (medido). */
  .stock.g4 .cname{font-size:var(--fs-10)}.stock.g4 .cprice{--cprice-max:31px}
  .stock.g3 .cname{font-size:var(--fs-10)}.stock.g3 .cprice{--cprice-max:31px}
  /* Vista de 6 columnas: se muestran nombre, precio y anticipo/cuota (en verde). Se ocultan la versión, la ficha corta, los botones y el sello de BNA, que no entran en una tarjeta tan angosta. */
  /* En g6 el tilde se oculta junto con la versión y los metadatos: en una tarjeta de ~150px le robaba ancho
     al precio y lo partía en dos líneas, que es justo lo que no puede pasar. Medido: la tarjeta pasaba de
     223 a 243px. g6 es la vista de ver muchos autos, y ahí el detalle ya se suelta. */
  .stock.g6 .cver,.stock.g6 .cmeta,.stock.g6 .cbtns,.stock.g6 .ctrustic{display:none}
  .stock.g6 .cinfo{padding:12px 12px 14px;gap:6px}
  .stock.g6 .cname{font-size:var(--fs-7);line-height:1.15}.stock.g6 .cprice{--cprice-max:20px;--cprice-res:30px}
  .stock.g6 .ccuota{font-size:var(--fs-3);line-height:1.35}
  .stock.g6 .ccuota .lb-f{display:none}.stock.g6 .ccuota .lb-a{display:inline}
  .stock.g6 .cpricerow{gap:5px}
  .resright{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .viewsel{display:inline-flex;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
  .viewsel button{width:40px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--soft);cursor:pointer;transition:background .15s ease,color .15s ease}
  .viewsel button:hover{color:var(--brown)}
  .viewsel button.active{background:var(--brown);color:#fff}
  .viewsel button svg{width:19px;height:16px}
  @media(max-width:1100px){.stock.g6{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:900px){.stock.g6,.stock.g4{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:600px){.viewsel{display:none}}
  .resbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0 8px}
  .resbar .counter{padding:0}
  .ressort{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px}
  .ressort span{font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
  .ressort select{border:none;outline:none;background:none;font-size:var(--fs-6);font-weight:600;color:var(--ink);cursor:pointer}
  .cph{position:relative;aspect-ratio:4/3;background:linear-gradient(110deg,var(--line-2),#e2d9c8);overflow:hidden}
  .cph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:0;transform:scale(var(--z,1));transition:opacity .4s var(--ease-out),transform .6s cubic-bezier(.2,.7,.2,1)}
  .cph.ld img{opacity:1}
  .car:hover .cph img{transform:scale(calc(var(--z,1) * 1.03))}
  .cph .ph-svg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
  /* El badge de condición vive ARRIBA A LA DERECHA desde que la esquina izquierda es la del destacado. Es la
     misma disposición que ya tenía Oportunidades con .dctags, así que las dos vistas coinciden. */
  .cbadge{position:absolute;top:12px;right:12px;z-index:2;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
  .cbadge.km0{background:var(--brown);color:#fff}
  .cbadge.usado{background:rgba(251,249,244,.92);color:var(--soft)}
  .cbadge.resv{background:var(--amber-deep);color:#fff}
  .cbadge.sold{background:rgba(33,28,22,.86);color:var(--paper)}
  /* EL TILDE DE "REVISADO + GARANTÍA", ahora un ítem más de la línea de metadatos y no un renglón propio.
     Hereda el tamaño y el color de .cmeta, así que no agrega ni un píxel de alto a la tarjeta. */
  /* El precio y el tilde en una fila. min-width:0 en el precio para que un importe largo encoja antes que
     empujar el tilde fuera de la tarjeta. */
  /* El tilde va al EXTREMO OPUESTO de la fila (space-between), así que cuando sobra lugar queda lo más lejos
     posible del número. flex:none para que nunca se encoja, y el precio SIN min-width:0: con nowrap, dejar
     que la caja baje del ancho del texto es exactamente lo que hacía que el número se derramara por debajo
     del tilde. Lo que evita el desborde ahora es que la fuente escale, no que la caja encoja. */
  .cpriceline{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .cpriceline .ctrustic{flex:none}
  .ctrustic{display:inline-flex;align-items:center;vertical-align:-1px;color:var(--brown)}
  .ctrustic svg{width:12px;height:12px;flex:none}
  .gcount{position:absolute;bottom:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-3);font-weight:600;background:rgba(20,16,12,.6);color:#fff;padding:5px 10px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
  .gcount svg{width:12px;height:12px}
  /* COMPARTIR SE MUDÓ A ABAJO-IZQUIERDA. Arriba-derecha pasó a ser del badge de condición, y arriba-izquierda
     del destacado, así que ésta era la única esquina libre. No choca en ningún ancho: abajo de 760px .cshare
     está en display:none y ahí abajo-izquierda la ocupa .gcount; entre 761 y 820 .gcount sigue abajo-derecha.
     Las dos reglas de .cshare (ésta y la de .car .cshare más abajo) tienen que moverse juntas. */
  .cshare{position:absolute;bottom:12px;left:12px;top:auto;right:auto;z-index:4;width:34px;height:34px;border-radius:50%;background:rgba(251,249,244,.92);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(4px);transition:.15s;opacity:0}
  .car:hover .cshare{opacity:1}
  .cshare:hover{background:#fff;color:var(--brown)}
  .cshare svg{width:16px;height:16px}
  .cinfo{padding:12px 14px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
  /* Aire de la tarjeta del catálogo: gap 7 → 5 y padding 12/13 → 10/11. Va acotado a partir de 761px y
     excluyendo g6, porque celular y la vista de 6 columnas ya tienen los suyos, más apretados. Medido: la
     tarjeta pasa de 450 a 410 en 1280 con este cambio y la fusión de anticipo y cuota. */
  @media(min-width:761px){#detail .stock:not(.g6) .cinfo{gap:4px;padding:10px 14px 11px}}
  /* JERARQUÍA DE LA TARJETA: el modelo y el precio son lo que se lee primero en un listado, así que suben
     (--fs-8 → --fs-10, o sea 16 → 20) y el resto se junta. Line-height 1.15 en vez de 1.2 para que el salto
     de tamaño no coma el alto que ganamos comprimiendo. */
  /* El recorte a dos líneas vuelve a vivir acá. Estuvo un rato en el <a> de adentro, con .cname como fila
     flex, porque la estrella del destacado iba a la derecha del nombre y el clamp se la comía; con la estrella
     mudada a la foto ese motivo desapareció y la estructura vuelve a la simple. */
  .cname{font-family:"Archivo";font-weight:700;font-size:var(--fs-10);line-height:1.15;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cver{font-size:var(--fs-4);color:var(--soft);margin-top:-4px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmeta{font-size:var(--fs-4);line-height:1.25;color:var(--soft)}
  .cmeta i{font-style:normal;color:var(--brown-2);padding:0 2px}
  .cpricerow{display:flex;flex-direction:column;gap:7px}
  /* ===== VEHÍCULO DESTACADO =====
     UNA SOLA SEÑAL, IDÉNTICA EN LAS DOS VISTAS: una estrella dorada dentro de un chip circular oscuro, en la
     ESQUINA SUPERIOR IZQUIERDA de la foto. Misma clase, mismo color, mismo tamaño y misma posición en el
     catálogo (.cph) y en Oportunidades (.dcph). Un destacado se reconoce igual esté donde esté.

     ESTO NO CONTRADICE "NADA SOBRE LA FOTO". Lo que se prohibió (dc0b6f4) fue un CONTROL compitiendo con la
     imagen, y lo que se sacó de Oportunidades fue una etiqueta grande que tapaba el auto. Un indicador chico
     en una esquina es otra cosa, y de hecho es donde ya viven .cbadge, .gcount, .cshare y .cwafab.

     EL CÍRCULO OSCURO ES LO QUE PERMITE UN DORADO DE VERDAD. Sobre el fondo crema no había dorado posible
     (SC 1.4.11 pide 3:1 y --gold da 2,64, #d4af37 da 2,00, #e0b84a 1,79: cuanto más dorado, menos contraste),
     y por eso la versión anterior usaba un dorado apagado. Con el chip detrás, el fondo de la estrella lo
     controlamos nosotros y no la foto, así que se pasa a --gold-bright (#d4af37, el dorado clásico).

     LA OPACIDAD DEL CHIP ES EL NÚMERO QUE MANDA, y el peor caso es una foto BLANCA: ahí el negro translúcido
     se aclara y la estrella pierde contraste contra su propio chip. Medido con #d4af37 sobre negro al X%
     encima de blanco: .35 → 1,16 · .55 → 2,25 · .65 → 3,33 · .75 → 4,93. El piso es .65. Acá va .78 sobre el
     oscuro cálido de la casa (rgba(20,16,12)) y no sobre negro puro, que es 3 puntos más claro: medido sobre
     el compuesto real da 4,55 sobre foto blanca y 9,99 sobre foto negra. Si se baja la opacidad, remedir.

     Círculo con blur y sombra, del mismo lenguaje que .cshare y .cwafab, pero MÁS CHICO que ellos: 26px
     contra 34. Nació igualado a esos dos y pesaba demasiado sobre la foto — son controles y éste es un
     indicador, así que no tiene por qué reclamar la misma presencia. El tamaño no toca el contraste, que lo
     fija la opacidad del chip. Y pointer-events:none porque no es un control: sin eso dejaría una zona muerta
     donde el click no abre el vehículo, igual que .cbadge y .gcount. */
  .cdest{position:absolute;top:12px;left:12px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(20,16,12,.78);color:var(--gold-bright);font-size:13px;line-height:1;letter-spacing:0;backdrop-filter:blur(4px);box-shadow:0 5px 13px -7px rgba(0,0,0,.45);pointer-events:none}
  /* EL PRECIO ES DOMINANTE JUNTO CON EL NOMBRE. Con los dos badges de línea completa fuera de la tarjeta hay
     aire para subirlo. Ojo dónde: igual que con .cname, cada densidad define su propia escala y le gana a esta
     regla base, así que subir sólo acá no cambia nada en g3/g4/g6 ni en celular. **g6 NO se toca**: es la vista
     ultra densa y ahí el número no entra más grande — es la restricción de que el precio no puede desbordar ni
     partirse en las tarjetas angostas. */
  .cprice{font-family:"Archivo";font-weight:700;line-height:1.02;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
    white-space:nowrap;--cprice-max:33px;--cprice-res:50px;
    font-size:min(var(--cprice-max),calc((100cqi - var(--cprice-res)) / 6.04))}
  /* gap 2 y no 3: con anticipo y cuota en un solo renglón, .cfin ya sólo apila el badge y esa línea. */
  .cfin{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
  /* CADA IMPORTE, INDIVISIBLE. El segmento va en nowrap para que la línea no pueda cortar ni en el espacio
     que money() deja entre el "$" y la cifra: el único corte posible es el " · " que los separa. El
     overflow-wrap:break-word que .ccuota hereda de la red de seguridad queda como último recurso —verificado
     que no se activa en 320, 360 ni 375, con el texto del sistema al 100% y al 150%—, porque perder dígitos
     recortados sería peor que partirlos. */
  .cfseg{white-space:nowrap}
  /* SIN opacity: el .88 que tenía hundía --badge-ink de 5,86 a 4,46 y no llegaba al 4,5 de AA. Mismo patrón que .gdis (ver PROJECT_STATE): nunca atenuar texto con opacidad. La jerarquía de "dato secundario" ya la da el tamaño (--fs-3) y el fondo propio de la pastilla. */
  /* Sin white-space:nowrap: es la lección de ce3b8ea, que ya se aplicó a .dcbna y acá había quedado.
     El "…" que había NO funcionaba —text-overflow no ellipsiza un inline-flex—, así que a 360px con el
     texto al 150% el badge medía 175px en una tarjeta de 133 y "Financiación 100% con BNA" se cortaba
     seco, con el borde de la pastilla incluido. Envolviendo crece en alto, que es lo correcto. */
  .ccuota{font-size:var(--fs-4);line-height:1.4;color:var(--green-ink);font-weight:600;max-width:100%}
  .ccuota b{font-weight:700}
  /* ENLACE DE LA TARJETA. El título es el enlace real (href="#auto=ID") y se estira con un ::after sobre toda la tarjeta, así el área clickeable sigue siendo la tarjeta completa pero sin el role="link" en el contenedor, que volvía presentacionales a los 4 controles de adentro.
     El ancla del ::after es .car, que ya es position:relative (línea ~1374). El overlay va en z-index:1 y TODOS los controles reales tienen que quedar por encima, o el overlay se los come. */
  .cname .cnlink{color:inherit;text-decoration:none}
  .cname .cnlink::after{content:"";position:absolute;inset:0;z-index:1}
  /* .cbadge ("USADO"/"VENDIDO") y .gcount (el contador de fotos) son etiquetas decorativas en z-index:2, o sea POR ENCIMA del overlay: sin esto dejaban zonas muertas donde el click no abría el vehículo. Como no son interactivas, se les deja pasar el click. */
  .cbadge,.gcount{pointer-events:none}
  /* .cbtns no estaba posicionado, así que z-index no le aplicaba y sus dos botones quedaban debajo del overlay. .cshare y .cwafab NO necesitan cambio: ya venían en z-index:4, por encima del overlay. No se les agrega una regla "explícita" acá porque quedaría muerta: las originales (líneas ~708 y ~1265) tienen igual o mayor especificidad y van después. */
  /* PREEXISTENTE Y CERRADO ACÁ: el hueco de 7px entre los dos botones era una zona muerta. .cbtns está en
     z-index:5, o sea por encima del ::after que estira el enlace de la tarjeta, así que un click en el hueco
     no abría el vehículo. El contenedor no necesita recibir clicks —sólo sus botones—, y con pointer-events
     en none el hueco cae al enlace de la tarjeta. Misma solución que .cbadge y .gcount. */
  .cbtns{display:flex;gap:7px;margin-top:auto;padding-top:4px;position:relative;z-index:5;pointer-events:none}
  .cbtns>*{pointer-events:auto}
  .cbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-5);font-weight:700;border-radius:10px;padding:9px 12px;transition:filter .15s ease,background .15s ease,color .15s ease}
  .cbtn.primary{flex:1;background:var(--brown);color:#fff}
  .cbtn.primary:hover{background:var(--brown-2)}
  .cbtn.wa{background:var(--wa);color:#fff;flex:none;width:38px;padding:9px}
  .cbtn.wa:hover{filter:brightness(.94)}
  .cbtn.wa svg{width:16px;height:16px}
  /* Las reglas de .car.sold estaban partidas en dos bloques y el opacity:.92 de acá quedaba muerto por el .68 de más abajo. Todo consolidado en un solo lugar; ver el bloque ".car.sold" después de .car .estado. */
  .empty{grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--soft)}
  .empty .serif{font-size:var(--fs-14);color:var(--ink);display:block;margin-bottom:8px}
  .car{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .25s ease}
  .car:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(33,28,22,.55);border-color:var(--brown-2)}
  .car .ph{aspect-ratio:4/3;position:relative;background:var(--brown-soft);overflow:hidden;cursor:pointer}
  .car .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
  .car:hover .ph img{transform:scale(1.05)}
  .car .ph .ph-svg{width:100%;height:100%;display:block}
  .car .tipo{position:absolute;top:12px;left:12px;z-index:2;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:rgba(251,249,244,.92);color:var(--ink);padding:6px 11px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
  .car .cond{position:absolute;top:12px;right:12px;z-index:2;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:var(--r-pill)}
  .car .cond.km0{background:var(--brown);color:#fff}
  .car .cond.usado{background:rgba(251,249,244,.92);color:var(--soft)}
  .car .gcount{position:absolute;bottom:12px;right:12px;z-index:2;font-size:var(--fs-3);font-weight:600;background:rgba(33,28,22,.72);color:#fff;padding:5px 10px;border-radius:var(--r-pill);display:inline-flex;gap:5px;align-items:center;backdrop-filter:blur(4px)}
  .car .gcount svg{width:12px;height:12px}
  .car .cshare{position:absolute;bottom:12px;left:12px;top:auto;right:auto;z-index:4;width:34px;height:34px;border-radius:50%;background:rgba(251,249,244,.92);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(4px);box-shadow:0 6px 16px -8px rgba(0,0,0,.4);transition:.15s}
  .car .cshare:hover{background:#fff;color:var(--brown);transform:translateY(-1px)}
  .car .cshare svg{width:16px;height:16px}
  /* Va apilado debajo de .cbadge, así que acompaña al badge a la derecha o quedaría solo del lado del destacado. */
  .car .estado{position:absolute;top:44px;right:12px;z-index:3;font-size:var(--fs-2);letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:6px 13px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
  .car .estado.resv{background:var(--amber-deep);color:#fff}
  .car .estado.sold-b{background:rgba(33,28,22,.86);color:var(--paper)}
  /* VEHÍCULO VENDIDO — señal visual SIN tocar la legibilidad del texto.
     Antes esto era .car.sold{opacity:.68} sobre el contenedor, y como la opacidad se multiplica sobre todo lo que hay adentro, dejaba 10 elementos de texto entre 2,12 y 4,00 (mínimo AA 4,5). Es el mismo antipatrón de .gdis y .cbna pero peor, porque va sobre el contenedor. Y las tarjetas de vendidos SIGUEN SIENDO INTERACTIVAS (role="link" + onclick + botones adentro), así que no aplica la excepción de controles deshabilitados de SC 1.4.3.
     El texto queda en opacity:1. Lo apagado se comunica con tres señales que no son texto: la foto en grises y atenuada, el fondo de la tarjeta un tono más hundido, y el badge "VENDIDO" que ya existía (.cbadge.sold).
     OJO: background-COLOR, no el atajo "background". La regla de la línea ~1341 (.car,.svc,.tcard,…{background-image:…}) pinta el degradado de las tarjetas; el atajo lo borraría en silencio. */
  .car.sold{background-color:var(--paper)}
  .car.sold .cph img,.car.sold .cph .ph-svg{filter:grayscale(1) opacity(.55)}
  .car.sold .cprice{color:var(--soft)}
  /* El separador "·" es --brown-2, que sobre --card ya venía en 3,19 (puntuación decorativa, preexistente). Sobre el fondo más hundido de las vendidas bajaba a 2,90, o sea que este cambio lo empeoraba. Se lo sube a --soft SOLO en las vendidas: 4,90, y las disponibles quedan intactas en su 3,19 de siempre. */
  .car.sold .cmeta i{color:var(--soft)}
  .car .info{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
  .car .name{font-family:"Archivo";font-weight:700;font-size:var(--fs-9);line-height:1.16;letter-spacing:-.01em}
  .car .meta{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-5);color:var(--soft)}
  .car .meta span{display:inline-flex;align-items:center;gap:5px}
  .car .meta svg{width:14px;height:14px}
  .pricerow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px}
  .car .price{font-family:"Archivo";font-weight:700;font-size:25px;line-height:1;letter-spacing:-.01em}
  .car .fin{font-size:var(--fs-4);line-height:1.4;color:var(--green-ink);font-weight:600;text-align:right}
  .car .fin b{font-weight:700}
  /* ⚠ NO SE RENDERIZA en ninguna vista pública hoy. Si se conecta a alguna, ENTRA VIOLANDO CONTRASTE: el opacity:.85 baja --soft sobre --card de 5,39 a 3,92, contra el mínimo 4,5 de AA. Antes de usarla, quitarle el opacity (nunca atenuar texto con opacidad: jerarquía por tamaño o peso). */
  .finnote{font-size:var(--fs-3);line-height:1.35;color:var(--soft);opacity:.85;margin-top:4px}
  .car .ask{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-6);font-weight:700;color:#fff;background:var(--wa);padding:13px;border-radius:10px;transition:.18s}
  .car .ask:hover{filter:brightness(.94)}
  .car .ask svg{width:16px;height:16px}
  .cotwrap{padding-bottom:110px}
  .cotgrid{display:grid;grid-template-columns:1.55fr .9fr;gap:clamp(18px,2.4vw,30px);align-items:start}
  .cotside{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--hd) + 22px)}
  .cotcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 26px}
  .cotcard h2,.cotcard h4{font-family:"Archivo";font-weight:700;font-size:var(--fs-9);letter-spacing:-.01em;margin-bottom:18px}
  .cotsteps{list-style:none;display:flex;flex-direction:column;gap:16px}
  .cotsteps li{display:flex;gap:13px;font-size:var(--fs-6);line-height:1.45;color:var(--ink)}
  .cotsteps .num{width:28px;height:28px;border-radius:50%;background:var(--brown);color:#fff;font-family:"Archivo";font-weight:700;font-size:var(--fs-5);display:grid;place-items:center;flex:none}
  .cotben{list-style:none;display:flex;flex-direction:column;gap:13px}
  .cotben li{display:flex;align-items:center;gap:11px;font-size:var(--fs-6);color:var(--soft)}
  .cotben svg{width:18px;height:18px;color:var(--green);flex:none}
  .cotwa{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:18px 20px;transition:background .18s ease}
  .cotwa:hover{background:var(--brown)}
  .cotwa .cotwa-ic{width:42px;height:42px;border-radius:50%;background:rgba(242,238,230,.16);display:grid;place-items:center;flex:none}
  .cotwa .cotwa-ic svg{width:22px;height:22px;color:var(--paper)}
  .cotwa .cotwa-tx{display:flex;flex-direction:column;gap:2px}
  .cotwa .cotwa-tx b{font-family:"Archivo";font-weight:700;font-size:var(--fs-7)}
  .cotwa .cotwa-tx small{font-size:var(--fs-5);opacity:.82}
  .venpasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);margin-bottom:clamp(22px,3vw,32px)}
  .venstep{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px}
  .venstep .venic{width:46px;height:46px;border-radius:12px;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;flex:none}
  .venstep .venic svg{width:24px;height:24px}
  .venstep .vennum{position:absolute;top:14px;right:16px;font-family:"Archivo";font-weight:700;font-size:var(--fs-7);color:var(--brown-2)}
  .venstep h2,.venstep h4{font-family:"Archivo";font-weight:700;font-size:var(--fs-8);letter-spacing:-.01em;margin-bottom:5px}
  .venstep p{font-size:var(--fs-6);color:var(--soft);line-height:1.5}
  .cotwa2{margin-top:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:var(--fs-7);font-weight:700;color:var(--brown);background:var(--card);border:1.5px solid var(--brown);padding:14px;border-radius:12px;transition:background .15s,color .15s}
  .cotwa2:hover{background:var(--brown);color:#fff}
  .cotwa2 svg{width:18px;height:18px;flex:none}
  @media(max-width:760px){.venpasos{grid-template-columns:1fr}}
  @media(max-width:860px){.cotgrid{grid-template-columns:1fr}.cotside{position:static}}
  .howcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)}
  .howcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column}
  .howcard .eyebrow{display:block;margin-bottom:18px}
  .howcard .cotsteps{margin-bottom:26px}
  .howcard .btn{align-self:flex-start;margin-top:auto}
  @media(max-width:760px){.howcols{grid-template-columns:1fr}}
  .faqlist{display:flex;flex-direction:column;gap:12px;max-width:840px}
  .faqitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .faqitem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-family:"Archivo";font-weight:700;font-size:var(--fs-8);color:var(--ink);letter-spacing:-.01em;transition:color .15s ease}
  .faqitem summary::-webkit-details-marker{display:none}
  .faqitem summary:hover{color:var(--brown)}
  .faqitem .fqi{width:22px;height:22px;flex:none;color:var(--brown);transition:transform .25s var(--ease-out)}
  .faqitem[open] .fqi{transform:rotate(45deg)}
  .faqitem .fqa{padding:0 22px 20px;color:var(--soft);font-size:var(--fs-7);line-height:1.62;max-width:70ch}
  .lform{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
  .lgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .lgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
  .lfield{margin-bottom:16px}
  .lfield label{display:block;font-size:var(--fs-4);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
  .lfield input,.lfield select,.lfield textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--ink)}
  .lfield input:focus-visible,.lfield select:focus-visible,.lfield textarea:focus-visible{outline:none;border-color:var(--brown)}
  .lfield textarea{resize:vertical;min-height:76px}
  .ldropzone{border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--soft);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-6);font-weight:600}
  .ldropzone svg{width:18px;height:18px}
  .ldropzone:hover{border-color:var(--brown);color:var(--brown)}
  .cotsend{margin-top:8px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:var(--fs-7);font-weight:700;color:#fff;background:var(--wa);padding:16px;border-radius:12px;transition:.15s}
  .cotsend:hover{filter:brightness(.95)}
  .cotnote{font-size:var(--fs-5);color:var(--soft);margin-top:14px;text-align:center}
  .cothint{font-size:var(--fs-5);color:var(--soft);margin:9px 0 0;line-height:1.5}
  .lreq{color:#b4482f}
  .lopt{color:var(--soft);font-weight:500;text-transform:none;letter-spacing:0;font-size:var(--fs-3);margin-left:5px}
  .thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  .thumbs .tw{position:relative;width:90px;height:68px}
  .thumbs img{width:100%;height:100%;object-fit:cover;border-radius:8px}
  .thumbs .rm{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#c4503a;color:#fff;font-weight:700;display:grid;place-items:center;font-size:var(--fs-5)}
  #lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,16,12,.96);display:none;flex-direction:column;padding:20px}
  #lightbox.on{display:flex}
  .lbtop{display:flex;justify-content:space-between;align-items:center;color:var(--paper)}
  .lbtop .t{font-family:"Archivo";font-weight:700;font-size:var(--fs-11);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lbclose{color:var(--paper);font-size:var(--fs-6);font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(242,238,230,.3);border-radius:var(--r-pill)}
  .lbstage{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;min-height:0;position:relative;overflow:hidden}
  .lbstage img{position:relative;z-index:1}
  .lbnav{position:relative;z-index:2}
  .lbstage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
  .lbnav{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(242,238,230,.1);color:var(--paper);display:grid;place-items:center;transition:.15s}
  .lbnav:hover{background:rgba(242,238,230,.22)}
  .lbnav svg{width:22px;height:22px}
  .lbcount{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);font-weight:700;letter-spacing:.1em;color:color-mix(in srgb,var(--paper) 62%,transparent);font-variant-numeric:tabular-nums;flex:none;margin-left:12px}
  /* En celular la imagen ocupa el 100% del ancho y empujaba las flechas fuera de la pantalla (quedaban en x=-46 y x=384 de 390px), dejando al visor sin ninguna forma de cambiar de foto porque las miniaturas están ocultas. Acá van superpuestas sobre la imagen. */
  @media(max-width:600px){
    .lbstage{gap:0}
    .lbnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;background:rgba(20,16,12,.6);border:1px solid rgba(242,238,230,.22)}
    .lbstage>.lbnav:first-child{left:2px}
    .lbstage>.lbnav:last-child{right:2px}
  }
  .lbthumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding-top:14px}
  .lbthumbs img{width:62px;height:47px;object-fit:cover;border-radius:6px;opacity:.45;cursor:pointer;border:2px solid transparent}
  .lbthumbs img.sel{opacity:1;border-color:var(--brown-2)}
  #admin{background:var(--line-2);min-height:100vh}
  #admin .wrap{padding-top:calc(var(--hd) + 28px);padding-bottom:100px}
  #admin h2{font-family:"Archivo";font-weight:700;font-size:clamp(34px,5vw,50px)}
  #admin .sub{color:var(--soft);font-size:var(--fs-7);margin-top:6px;max-width:64ch}
  .apanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,30px);margin-top:22px}
  .apanel h3{font-family:"Archivo";font-weight:700;font-size:var(--fs-12);margin-bottom:4px}
  .apanel .hint{color:var(--soft);font-size:var(--fs-5);margin-bottom:20px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:var(--fs-4);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
  .field input,.field select{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink)}
  .field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--brown)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
  .abtn{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-6);font-weight:700;padding:12px 20px;border-radius:10px;transition:.15s;border:1px solid transparent}
  .abtn.primary{background:var(--brown);color:#fff}.abtn.primary:hover{background:var(--brown-deep)}
  .abtn.line{border-color:var(--line);color:var(--ink);background:var(--card)}.abtn.line:hover{border-color:var(--brown)}
  .abtn.danger{color:#b4482f}
  /* ---- Zona de borrado del modal de vehículo ---- */
  /* APARTE de la barra de Guardar y con marco propio: borrar es irreversible y no puede leerse como una acción
     más de la fila de acciones. Va al final del formulario, así hay que llegar hasta abajo a propósito.
     El fondo es --paper y NO un tinte rojo: el marco, el título y el botón ya dicen "destructivo", y un tinte
     bajaría el contraste del #b4482f sin ganar nada. */
  .vdanger{margin-top:22px;border:1px solid color-mix(in srgb,#b4482f 34%,var(--line));border-radius:12px;padding:14px 16px;background:var(--paper)}
  .vdangerh{font-family:"Archivo";font-weight:700;font-size:var(--fs-7);color:#b4482f;margin-bottom:4px}
  /* ---- Avisos flotantes ---- */
  /* El contenedor apila los avisos en columna; antes cada uno se posicionaba solo en el mismo punto y se
     encimaban. `pointer-events:none` en la columna para no comerse los clicks de lo que haya debajo, y `auto`
     en cada aviso para que el propio texto se pueda seleccionar. El `max-width` es lo que evita que un mensaje
     largo —los de error traen el texto de Firestore— se salga de la pantalla en celular. */
  #flashwrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
  .flashmsg{background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:var(--r-pill);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);pointer-events:auto;max-width:min(92vw,420px);text-align:center}
  .abar{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .arow{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--paper)}
  .arow img{width:66px;height:50px;object-fit:cover;border-radius:6px;flex:none;background:#e0d8ca}
  .arow .rt{flex:1;min-width:0}
  .arow .rt b{font-family:"Archivo";font-weight:700;font-size:var(--fs-8)}
  .arow .rt span{display:block;color:var(--soft);font-size:var(--fs-5)}
  /* Panel · listado de vehículos: estado rápido, estrella, filtros */
  .admtools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:10px 0 12px}
  .admfilters{display:flex;flex-wrap:wrap;gap:6px}
  /* Dos grupos de chips (estado y condición). Lo que los hace leer como dos filtros distintos, sin agregar etiquetas visibles, es que el gap ENTRE grupos (14px) sea mayor que el de adentro (6px, en .admfilters).
     El gap va parejo en las dos direcciones a propósito: en celular los grupos se apilan, y ahí el que separa es el row-gap. Con un row-gap de 8px contra los 6px internos los dos grupos se leían como un solo bloque de 7 chips con dos "Todos" — verificado en pantalla a 360px. */
  .admfgroups{display:flex;flex-wrap:wrap;align-items:center;gap:14px;min-width:0}
  /* min-height 44px por el mínimo táctil: los chips medían 35px. Con inline-flex + centrado, los 8px de padding vertical quedan inertes y no hace falta compensarlos. El padding horizontal se mantiene en 12px a propósito: con 7 chips, cada píxel de ancho empeora el wrap en celular.
     La transición se acotó a las 3 propiedades que la necesitan. Antes era "transition:.15s", o sea TODAS, e incluía outline-width y outline-color: el anillo de foco se animaba, y medirlo con getComputedStyle apenas después de enfocar devolvía 1.5px currentColor en vez de 2px var(--brown) — parecía que la regla global button:focus-visible no aplicaba, y sí aplica. No volver a poner "transition:.15s" a secas acá. */
  .admf{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 12px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex;align-items:center;min-height:44px}
  .admf:hover{border-color:var(--brown-2);color:var(--brown)}
  .admf.on{background:var(--brown);border-color:var(--brown);color:#fff}
  .admright{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .admdest{font-size:var(--fs-4);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--brown);background:var(--brown-soft);border-radius:var(--r-pill);padding:8px 12px;white-space:nowrap}
  .admdest.full{color:var(--amber-deep);background:rgba(181,122,46,.16)}
  .admord{display:flex;align-items:center;gap:7px;font-size:var(--fs-4);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--soft)}
  .admord select{font:inherit;font-size:var(--fs-5);letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 9px;cursor:pointer}
  #sec-vehiculos .arow{flex-wrap:wrap}
  #sec-vehiculos .arow .rt{flex:1 1 230px;min-width:200px}
  #sec-vehiculos .arow .seg{margin-left:auto}
  .arow .rmeta{display:block;color:var(--soft);font-size:var(--fs-5)}
  .arow .rt b,.arow .rprice{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arow .rprice{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-6);color:var(--ink)}
  .seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px;flex:none}
  .segb{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-3);letter-spacing:.03em;text-transform:uppercase;font-weight:700;color:var(--soft);background:transparent;border:0;border-radius:var(--r-pill);padding:6px 9px;cursor:pointer;white-space:nowrap;transition:.15s}
  .segb:hover{color:var(--ink)}
  .segb.on.disponible{background:rgba(47,138,91,.14);color:var(--green)}
  .segb.on.reservado{background:rgba(181,122,46,.18);color:var(--amber-deep)}
  .segb.on.vendido{background:rgba(122,110,96,.18);color:#6b6255}
  /* ===== PANEL · GRILLA DE VEHÍCULOS =====
     Reemplaza las filas apiladas. .arow se mantiene para el resto del Panel (vendedores, leads, opiniones).
     auto-fill + minmax hace que la cantidad de columnas la decida el ancho disponible, sin media queries. */
  /* minmax(150px) y no 190: con 190 un celular de 375 daba UNA sola columna y una tarjeta de 401px, o sea
     peor que la fila que viene a reemplazar. Con 150 entran 2 en celular y hasta 5 en 1280. */
  .agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:4px}
  .acard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;transition:border-color .15s,box-shadow .15s}
  .acard:hover{border-color:var(--brown-2);box-shadow:var(--sh-sm)}
  /* El cuerpo es el control: toda la tarjeta menos el pie abre la edición. text-align:left porque un boton
     centra por defecto y acá el contenido es una ficha, no una etiqueta. */
  .acgo{display:grid;gap:2px;width:100%;padding:0 0 8px;background:transparent;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
  .acph{position:relative;display:block;aspect-ratio:4/3;background:#e0d8ca;overflow:hidden;margin-bottom:8px}
  .acph img{width:100%;height:100%;object-fit:cover;display:block}
  .acsin{position:absolute;inset:0;display:grid;place-items:center;color:#9a9081;font-size:var(--fs-3)}
  .acest{position:absolute;top:8px;left:8px;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:var(--r-pill);color:#fff}
  .acest.reservado{background:var(--amber-deep)}
  .acest.vendido{background:rgba(33,28,22,.86)}
  .acname{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-6);line-height:1.2;padding:0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .acmeta{font-size:var(--fs-4);color:var(--soft);padding:0 10px}
  /* El precio, indivisible: es la misma clase de bug que el invariante del catálogo. */
  .acprice{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-8);color:var(--ink);padding:0 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .acfoot{display:flex;padding:0 10px 10px;margin-top:auto}
  /* El estado, a ancho completo del pie y con los 44px táctiles. */
  .acsel{width:100%;min-height:44px;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-3);letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 10px;cursor:pointer}
  .acsel.disponible{color:var(--green)}
  .acsel.reservado{color:var(--amber-deep)}
  .acsel.vendido{color:#6b6255}
  /* La estrella se va a la esquina superior derecha de la FOTO: en el pie obligaba a una tarjeta de 360px.
     Arriba a la izquierda está el badge de estado, así que la derecha estaba libre. */
  .acard{position:relative}
  /* .acard .acstar y no .acstar a secas: la regla base .starb{width:40px} va DESPUÉS en la hoja y con
     igual especificidad le gana por orden — la estrella quedaba en 40px en vez de 44. */
  .acard .acstar{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;background:rgba(20,16,12,.72);border-color:transparent;color:#fff;backdrop-filter:blur(4px)}
  .acard .acstar:hover{background:rgba(20,16,12,.85);border-color:transparent;color:#fff}
  .acard .acstar.on{background:rgba(20,16,12,.72);border-color:transparent;color:var(--gold-bright)}
  .acard.sold .acph img{filter:grayscale(1) opacity(.55)}
  .starb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:transparent;border:1px solid var(--line);color:#b1a795;cursor:pointer;flex:none;transition:.15s}
  .starb:hover{border-color:var(--brown-2);color:var(--brown-2)}
  .starb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
  .starb.on{color:var(--amber);border-color:rgba(181,122,46,.5);background:rgba(181,122,46,.12)}
  .starb.on svg{fill:currentColor}
  .starb[disabled]{opacity:.35;cursor:not-allowed}
  .arow.sold{opacity:.72}
  @media(max-width:1040px){#sec-vehiculos .arow .rt{flex:1 1 100%;order:2}#sec-vehiculos .arow .seg{order:3;margin-left:0}#sec-vehiculos .arow .starb{order:1;margin-left:auto}}
  @media(max-width:520px){#sec-vehiculos .arow .seg{flex:1 1 100%;justify-content:space-between}}
  .logoprev{width:150px;height:64px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;overflow:hidden;flex:none;text-align:center;padding:6px}
  .logoprev img{max-width:100%;max-height:100%;object-fit:contain}
  .logoprev span{color:var(--soft);font-size:var(--fs-3)}
  .dropzone{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--soft);cursor:pointer;transition:.15s}
  .dropzone:hover{border-color:var(--brown);color:var(--brown)}
  .savebar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--line-2) 34%);padding:22px 0 6px;margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .savenote{color:var(--soft);font-size:var(--fs-5);flex:1;min-width:200px}
  .modalbg{position:fixed;inset:0;z-index:150;background:rgba(20,16,12,.42);display:none;align-items:flex-start;justify-content:center;padding:24px;overflow:auto;backdrop-filter:blur(3px)}
  .modalbg.on{display:flex}
  .modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;width:100%;max-width:560px;margin:auto;box-shadow:var(--sh-lg)}
  .modal h3{font-family:"Archivo";font-weight:700;font-size:var(--fs-12);margin-bottom:16px;padding-right:40px}
  /* ===== Importador masivo de vehículos (panel) ===== */
  /* Acción secundaria: un enlace dentro del texto, no un botón que se pueda apretar sin querer. */
  .linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--brown);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .linkbtn:hover{color:var(--brown-deep)}
  .imptxt{width:100%;min-height:200px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);resize:vertical}
  .imptabwrap{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:12px}
  .imptab{width:100%;border-collapse:collapse;font-size:var(--fs-5)}
  .imptab th,.imptab td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
  .imptab th{font-size:var(--fs-2);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700;background:var(--paper)}
  .imptab tr:last-child td{border-bottom:none}
  .imptab td.n{text-align:right;font-variant-numeric:tabular-nums}
  .impb{display:inline-block;font-size:var(--fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}
  .impb.ok{background:rgba(31,107,69,.13);color:#1b5c3b}
  .impb.wr{background:rgba(122,82,48,.15);color:var(--brown)}
  /* Diff de una modificación del importador. El encabezado dice a QUÉ vehículo se resolvió el id, que es lo
     único que deja revisar a ojo que no se va a pisar el auto equivocado. */
  .impupd{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
  .impupdh{padding:8px 10px;background:var(--paper);border-bottom:1px solid var(--line);font-size:var(--fs-5);color:var(--ink)}
  .impupdh code{font-size:var(--fs-4);background:var(--brown-soft);color:var(--brown-deep);padding:1px 6px;border-radius:5px}
  /* El "después" en marrón y negrita: es la columna que hay que leer. NO se usa color solo para
     distinguirla —el encabezado de la columna ya lo dice— así que no depende de percibir el color. */
  .imptab td.impdesp{font-weight:700;color:var(--brown-deep)}
  /* "Inactivo" en la fila del asesor. Va como TEXTO propio y la fila NO se atenúa: `.arow.sold` es
     `opacity:.72`, o sea el antipatrón de atenuar texto con opacidad, así que no se reusa acá. El estado lo
     dicen este rótulo y el botón que pasa a decir "Reactivar" — dos señales y ninguna cromática.
     Contraste medido: --brown sobre --paper da 5,90. */
  .vendoff{display:block;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-4);
    letter-spacing:.04em;text-transform:uppercase;color:var(--brown)}
  .impb.er{background:rgba(180,72,47,.15);color:#9d3d28}
  .impmsg{font-size:var(--fs-5);line-height:1.5;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);margin-top:8px}
  .impmsg.er{border-color:rgba(180,72,47,.45)}
  .impmsg.wr{border-color:rgba(122,82,48,.4)}
  .impmsg b{font-weight:700}
  .impsum{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--brown-soft);font-size:var(--fs-6);line-height:1.55;font-weight:600;color:var(--ink)}
  .impfmt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:8px;overflow-x:auto}
  .mclose{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:transparent;border:none;color:var(--soft);cursor:pointer;transition:background .15s ease,color .15s ease;z-index:3}
  .mclose:hover{background:var(--paper);color:var(--ink)}
  .mclose svg{width:18px;height:18px}
  .gate{max-width:390px;margin:14vh auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px;text-align:center;box-shadow:var(--sh-lg)}
  .gate h3{font-family:"Archivo";font-weight:700;font-size:var(--fs-13);margin-bottom:6px}
  .gate p{color:var(--soft);font-size:var(--fs-6);margin-bottom:20px}
  .gate input{width:100%;text-align:left;letter-spacing:normal}
  .gate .err{color:#b4482f;font-size:var(--fs-5);height:18px;margin-top:8px}
  .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,18px);align-items:stretch}
  @media(max-width:1100px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:820px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:520px){.team{grid-template-columns:minmax(0,1fr)}}
  .seller{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 20px 22px;height:100%;cursor:pointer;transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .25s ease}
  .seller:hover{transform:translateY(-4px);box-shadow:0 26px 52px -40px rgba(33,28,22,.5);border-color:var(--brown-2)}
  .seller .stop{display:flex;flex-direction:column;align-items:center;gap:12px}
  .team .avatar{width:78px;height:78px;font-size:27px}
  .avatar{width:56px;height:56px;border-radius:50%;flex:none;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;font-family:"Archivo";font-weight:700;font-size:20px;overflow:hidden}
  .avatar img{width:100%;height:100%;object-fit:cover}
  .seller .sname{font-family:"Archivo";font-weight:700;font-size:var(--fs-9);line-height:1.12;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .seller .srol{font-size:var(--fs-5);color:var(--soft);margin-top:3px}
  .seller .sid{min-height:44px;display:flex;flex-direction:column;justify-content:flex-start}
  .seller .srate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:var(--fs-5);color:var(--soft);min-height:44px}
  .seller .srate b{font-family:"Archivo";color:var(--ink)}
  /* ENLACE DE LA TARJETA DE VENDEDOR — mismo patrón que .cname .cnlink de las tarjetas de vehículo.
     El botón del nombre se estira con un ::after sobre TODA la tarjeta, así el área clickeable sigue siendo
     la tarjeta completa sin necesidad de role="link" en el contenedor. El ancla del ::after es .seller, que
     ya venía con position:relative; .sname NO debe posicionarse o el overlay se le encogería adentro. */
  .seller .snlink{display:block;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;padding:0;border:0;background:none;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .seller .snlink::after{content:"";position:absolute;inset:0;z-index:1}
  .seller .sview{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-5);font-weight:700;color:var(--brown);height:20px}
  .seller .sview svg{width:15px;height:15px;transition:transform .25s var(--ease-out)}
  .seller:hover .sview svg{transform:translateX(3px)}
  /* position+z-index: sin esto el overlay del nombre se come el click del WhatsApp. Y min-height 44 en vez
     de height 40, que estaba por debajo del mínimo táctil del proyecto. */
  .seller .swa{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;width:100%;max-width:100%;min-width:0;min-height:44px;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-5);font-weight:700;color:#fff;background:var(--wa);border-radius:var(--r-pill);transition:filter .15s ease}
  .seller .swa:hover{filter:brightness(.93)}
  .seller .swa svg{width:13px;height:13px}
  .stars{position:relative;display:inline-block;font-size:var(--fs-8);line-height:1;letter-spacing:2px;font-family:Arial,sans-serif}
  .stars .s-empty{color:var(--line)}
  .stars .s-fill{position:absolute;left:0;top:0;color:var(--gold);overflow:hidden;white-space:nowrap;width:var(--pct,0%)}
  #vendedor{padding-top:calc(var(--hd) + 40px);padding-bottom:0}
  .vprofile{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
  .vprofile .avatar{width:96px;height:96px;font-size:34px}
  .vdatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px}
  .vdato{display:flex;flex-direction:column;gap:3px}
  .vdato span{font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
  .vdato b{font-size:var(--fs-6);font-weight:600;color:var(--ink)}
  .vpmeta{min-width:0;flex:1}
  .vpmeta h1,.vpmeta h2{font-family:"Archivo";font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1;letter-spacing:-.02em}
  .vpmeta .vrol{color:var(--brown);font-weight:700;font-size:var(--fs-6);letter-spacing:.04em;margin-top:9px}
  .vpmeta .vbio{color:var(--soft);font-size:var(--fs-7);margin-top:12px;max-width:56ch}
  /* LÍNEAS DE CADA RECORTE — el número lo decide el CONTEXTO y por eso son distintos.
     La bio compite con el formulario de opinión, que es la acción de esta página: se recorta CORTO.
     (El valor definitivo sale de la medición de más abajo; ver PROJECT_STATE.) */
  .vbiowrap{--rec:3}
  /* EN CELULAR "Compartir" SE REDUCE AL ÍCONO. Con los tres textos en fila a 375 px cada botón quedaba por
     debajo de su propio contenido y el texto se derramaba. Sin texto visible SC 2.5.3 no aplica, y su
     aria-label ("Compartir este perfil: <nombre>") sigue nombrando al vendedor. Los 44px no se tocan. */
  .vpacts .vpshare{width:auto}
  @media(max-width:600px){
    .vpacts .vpsharet{display:none}
    .vpacts .vpshare{width:44px;padding:0}
    .vpacts{gap:6px}
    .vpacts .vpopinar,.vpacts .vpwa{padding-left:10px;padding-right:10px;font-size:var(--fs-5)}
    /* "Hablar por WhatsApp" -> "WhatsApp": el ícono verde ya dice de qué se trata, y son 70px que deciden si
       los tres entran en una fila o no. El nombre accesible es el texto visible (no hay aria-label que pueda
       divergir), así que acortar la etiqueta no rompe SC 2.5.3. */
    .vpacts .vpwat{display:none}
  }
  /* Igual que .contactlist: la fila es puntaje + estrellas + "N opiniones" y con el texto al 150%
     no entra en 320px, así que el conteo quedaba cortado contra el borde. Envuelve en vez de cortarse. */
  .vpmeta .vavg{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
  .vpmeta .vavg .big{font-family:"Archivo";font-weight:700;font-size:var(--fs-13);line-height:1}
  .vpmeta .vavg .vcount{font-size:var(--fs-5);color:var(--soft)}
  .vcols{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(28px,4vw,46px);padding-bottom:110px}
  .vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
  .vleft{display:flex;flex-direction:column;gap:clamp(18px,2vw,24px)}
  .vvideo video{width:100%;border-radius:10px;display:block;background:#000;max-height:440px}
  .vpwa{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:var(--fs-6);font-weight:700;color:#fff;background:var(--wa);padding:12px 20px;border-radius:var(--r-pill);transition:filter .15s ease}
  .vpwa:hover{filter:brightness(.94)}
  /* El salto al formulario. Marrón y no verde: el verde de este sitio es WhatsApp, y esto no abre una
     conversación. Va con el mismo alto y radio que .vpwa para que se lean como dos acciones del mismo rango. */
  .vpopinar{display:inline-flex;align-items:center;gap:9px;margin:16px 10px 0 0;font-size:var(--fs-6);font-weight:700;font-family:"Archivo";color:#fff;background:var(--brown);padding:12px 20px;border:0;border-radius:var(--r-pill);cursor:pointer;min-height:44px;transition:background .15s ease}
  .vpopinar:hover{background:var(--brown-deep)}
  /* SECUNDARIO A PROPÓSITO: contorneado y sin relleno, contra el sólido de .vpopinar. La acción principal de
     esta página es dejar la opinión; compartir es la que usa el vendedor, que ya sabe a qué vino. Mismo alto
     (44) y mismo radio para que se lean como un par, distinto peso visual para que no compitan. */
  .vpshare{display:inline-flex;align-items:center;gap:8px;margin:16px 10px 0 0;font-size:var(--fs-6);font-weight:700;font-family:"Archivo";color:var(--brown);background:transparent;padding:11px 18px;border:1px solid var(--brown-2);border-radius:var(--r-pill);cursor:pointer;min-height:44px;transition:background .15s ease,border-color .15s ease}
  .vpshare:hover{background:var(--brown-soft);border-color:var(--brown)}
  .vpshare svg{width:16px;height:16px;flex:none}
  /* LOS TRES BOTONES EN UNA FILA. `flex:1` reparte el ancho entre la acción de la página y la conversión; el de
     compartir queda `flex:none` porque es secundario y no tiene por qué crecer. `min-width:0` en los que crecen
     es lo que permite que se encojan sin desbordar — sin eso el mínimo de contenido los empuja fuera. */
  /* .vpacts Y .vpnav SON HIJOS DE .vprofile, NO DE .vpmeta, y eso es lo que hace posible la fila. Dentro de la
     columna de texto —que a 375 px mide 217 porque el avatar se lleva el resto— tres botones con texto no
     entran de ninguna manera: piden 438. Como hijos de .vprofile, que ya es flex con wrap, toman el ancho
     entero (343 a 375 px) con `flex:1 0 100%`. */
  .vprofile>.vpacts,.vprofile>.vpnav{flex:1 0 100%}
  .vpacts{display:flex;align-items:stretch;gap:8px;margin-top:16px;flex-wrap:wrap}
  .vpacts .vpopinar,.vpacts .vpwa{flex:1 1 auto;min-width:0;margin:0;justify-content:center;text-align:center}
  .vpacts .vpshare{flex:0 0 auto;margin:0;justify-content:center}
  /* NAVEGACIÓN ENTRE PERFILES. .carnav es display:none salvo dentro del @media de 600px —porque los carruseles
     del sitio son grillas en escritorio—, pero acá el control hace falta en TODOS los anchos: son cuatro páginas
     distintas, no un riel que se vuelve grilla. */
  /* DOBLE CLASE (.carnav.vpnav) Y NO .vpnav A SECAS: la regla `.carnav{display:none}` vive MÁS ABAJO en la hoja
     —los carruseles del sitio son grillas en escritorio y sólo muestran flechas en celular— y con un selector de
     una sola clase le gana por orden, así que el control quedaba en display:none en escritorio. El síntoma es
     traicionero: querySelectorAll lo cuenta igual (existe en el DOM) y sólo el árbol de accesibilidad lo delata,
     que es la misma distinción "existe" vs "se ve" del tilde de garantía. Mismo caso que .abtn.vsolomovil. */
  .carnav.vpnav{display:flex;justify-content:flex-start;margin-top:14px}
  .vpdot{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .vpdot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brown-2);transition:background .15s ease,transform .15s ease}
  .vpdot.on::after{background:var(--brown);transform:scale(1.35)}
  .vpdot:hover::after{background:var(--brown)}
  .vpwa svg{width:17px;height:17px}
  .vrevh{font-size:var(--fs-8)}
  .vcard h2,.vcard h4{font-family:"Archivo";font-weight:700;font-size:var(--fs-9);margin-bottom:16px}
  /* Las 5 estrellas son --fs-15, el token más grande: con el texto del sistema al 200% la fila pide
     364px sobre 320 y empujaba la grilla .vcols 74px afuera (el track 1fr no baja del mínimo de su
     contenido). Envuelve en vez de salirse; a 150% sigue entrando en una sola fila. */
  .ratepick{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
  /* 44x44 de área táctil sin agrandar la estrella: la caja crece y el glifo queda centrado. Antes el botón
     medía lo que el glifo —unos 32px— y esta es la pantalla que van a usar clientes reales desde el celular. */
  .ratepick button{font-size:var(--fs-15);line-height:1;color:var(--line);transition:color .12s ease;font-family:Arial,sans-serif;padding:0;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .ratepick button.on{color:var(--gold)}
  .rvfield{margin-bottom:14px}
  .rvfield label{display:block;font-size:var(--fs-4);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
  .rvfield input,.rvfield textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink)}
  .rvfield input:focus-visible,.rvfield textarea:focus-visible{outline:none;border-color:var(--brown)}
  .rvfield textarea{min-height:90px;resize:vertical}
  .rvsend{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-7);font-weight:700;color:var(--paper);background:var(--ink);padding:14px;border-radius:10px;transition:background .18s ease}
  .rvsend:hover{background:var(--brown)}
  .vreviews{display:flex;flex-direction:column;gap:14px}
  .vrev{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
  .vrev .vrtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .vrev .vrname{font-weight:700;font-size:var(--fs-7)}
  .vrev .vrdate{font-size:var(--fs-4);color:var(--soft)}
  .vrev .vrtext{font-size:var(--fs-7);color:var(--ink);line-height:1.5;margin-top:8px}
  /* CUATRO RENGLONES: menos que la reseña de Google (5) porque acá van varias apiladas en columna y no en una
     tira horizontal, así que cada línea de más multiplica por la cantidad de opiniones. */
  .vrev{--rec:4}
  .vempty{color:var(--soft);font-size:var(--fs-6);padding:22px;text-align:center;border:1px dashed var(--line);border-radius:12px}
  .field textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);font-family:inherit;font-size:var(--fs-7);resize:vertical;min-height:72px}
  .field textarea:focus-visible{outline:none;border-color:var(--brown)}
  .adminnav{position:sticky;top:var(--hd);z-index:20;display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;background:color-mix(in srgb,var(--line-2) 92%,transparent);backdrop-filter:blur(10px);margin-bottom:6px}
  .adminnav button{font-size:var(--fs-5);font-weight:700;color:var(--soft);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
  .adminnav button:hover{border-color:var(--brown);color:var(--brown)}
  [id^="sec-"]{scroll-margin-top:calc(var(--hd) + 74px)}
  .admsearch{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 16px;margin:6px 0 14px}
  .admsearch svg{width:17px;height:17px;color:var(--soft);flex:none}
  .admsearch input{border:none;outline:none;background:none;width:100%;font-size:var(--fs-6)}
  .search input:focus-visible,.fsel select:focus-visible,.fsel input:focus-visible,.rinwrap input:focus-visible,.ressort select:focus-visible,.admsearch input:focus-visible{outline:2px solid var(--brown);outline-offset:2px}
  .msub{font-family:"Archivo";font-weight:700;font-size:var(--fs-4);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);margin:22px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .unitwrap{position:relative;display:block}
  .unitwrap input{padding-right:54px}
  .unitwrap .unitsfx{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:var(--fs-5);font-weight:600;color:var(--soft);pointer-events:none;user-select:none}
  .field label .req{color:#b4482f;margin-left:1px}
  .field label .opt{color:var(--soft);font-weight:500;text-transform:none;letter-spacing:0;font-size:var(--fs-3);margin-left:6px}
  .tw.main{outline:2px solid var(--brown);outline-offset:1px;border-radius:8px}
  .tw.encsel{outline:2px solid var(--green-ink);outline-offset:1px;border-radius:8px}
  .tw .mainbadge{position:absolute;top:4px;left:4px;font-size:var(--fs-1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--brown);color:#fff;padding:2px 6px;border-radius:var(--r-pill);z-index:2}
  .tw .twbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:3px;justify-content:center;padding:3px;background:rgba(20,16,12,.55);opacity:0;transition:opacity .15s var(--ease-out);border-radius:0 0 8px 8px}
  .tw:hover .twbar{opacity:1}
  @media(hover:none){.tw .twbar{opacity:1}}
  .tw .twbar button{width:21px;height:21px;border-radius:5px;background:rgba(255,255,255,.92);color:var(--ink);font-size:var(--fs-3);font-weight:700;display:grid;place-items:center;cursor:pointer;line-height:1}
  .tw .twbar button:hover{background:#fff;color:var(--brown)}
  .tw .twbar .rm{position:static;top:auto;right:auto;width:21px;height:21px}
  .abtn svg{width:18px;height:18px;flex:none}
  .thumbs .tw{cursor:grab}
  .thumbs .tw.dragging{opacity:.35}
  .thumbs .tw.dragover{outline:2px dashed var(--brown);outline-offset:3px;border-radius:8px}
  .upstatus{font-size:var(--fs-5);color:var(--brown);margin-top:10px;min-height:17px;font-weight:600}
  .encwrap{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--paper)}
  .encgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
  .encstage{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--line);border:1px solid var(--line);cursor:grab;touch-action:none}
  .encstage.drag{cursor:grabbing}
  .encstage img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
  .encframe{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 3.5px rgba(122,82,48,.5)}
  .enczoom{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
  .enczoom input{flex:1;accent-color:var(--brown)}
  .enchint{font-size:var(--fs-5);color:var(--soft);line-height:1.5;margin-bottom:10px}
  .encprevlbl{font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:700;margin-bottom:6px}
  .encprevs{display:flex;flex-direction:column;gap:12px}
  .encprev{aspect-ratio:4/3;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--line)}
  .encprev img{width:100%;height:100%;object-fit:cover;display:block}
  .encbtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  /* Variantes para las tarjetas de "Vehículos disponibles": no son 4/3 como las fotos de los autos.
     La misma foto se recorta distinto en computadora (1/1.12) y en celular (1/0.82), así que el
     editor muestra los dos recortes para poder elegir un encuadre que sirva en ambos. */
  .encstage.enccat{aspect-ratio:1/1.12}
  .encprev.encpc{aspect-ratio:1/1.12}
  .encprev.encmob{aspect-ratio:1/0.82}
  .encprevs.enccat{flex-direction:row;gap:12px}
  .encprevs.enccat>div{flex:1;min-width:0}
  @media(max-width:640px){.encgrid{grid-template-columns:1fr}}
  .upbar{display:none;height:7px;border-radius:var(--r-pill);background:rgba(122,82,48,.14);overflow:hidden;margin-top:12px}
  .upbar.on{display:block}
  .upbar span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--brown);border-radius:var(--r-pill);transition:transform .25s ease;will-change:transform}
  .upwarn{margin-top:12px;border:1px solid #d8a99a;background:#fdf1ec;color:#8d3b26;border-radius:12px;padding:12px 14px;font-size:var(--fs-5);line-height:1.5}
  .upwarn b{display:block;margin-bottom:3px;font-size:var(--fs-6)}
  .upstatus.err{color:#b4482f}
  .field code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-4);background:rgba(122,82,48,.1);padding:1px 5px;border-radius:4px}
  /* ── Equipamiento (Panel): chips clickeables, buscador, plantillas, copiar de otro auto ── */
  .eqgroup{margin-bottom:12px}
  .eqgroup.eqhide,.eqchip.eqhide{display:none}
  .eqgroup .eqh{font-size:var(--fs-3);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:700;margin:10px 0 7px;display:flex;align-items:center;gap:6px}
  .eqgroup .eqn{color:var(--brown-2);font-weight:600;letter-spacing:.06em}
  .eqchips{display:flex;flex-wrap:wrap;gap:7px}
  .eqchip{position:relative;display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:var(--fs-5);line-height:1.1;color:var(--ink);cursor:pointer;user-select:none;transition:background .15s,border-color .15s,color .15s}
  .eqchip:hover{border-color:var(--brown-2);background:#fffdf8}
  .eqchip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
  .eqchip .tk{width:0;height:13px;flex:none;opacity:0;color:var(--brown);transition:width .15s,opacity .15s}
  .eqchip:has(input:checked){background:var(--brown-soft);border-color:var(--brown-2);color:var(--brown);font-weight:600;box-shadow:inset 0 0 0 1px rgba(169,134,92,.3)}
  .eqchip:has(input:checked) .tk{width:13px;opacity:1}
  .eqchip.juston{animation:eqpop .4s ease}
  @keyframes eqpop{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
  .eqchip .eqx{margin-left:3px;font-weight:400;font-size:var(--fs-7);line-height:1;color:var(--soft)}
  .eqchip .eqx:hover{color:#b4482f}
  .eqbar{position:sticky;top:-2px;z-index:4;display:flex;gap:8px;align-items:center;background:var(--card);padding:6px 0 4px}
  .eqbar input,.eqnew input,.eqnew select{font:inherit;font-size:var(--fs-6);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);outline:none}
  .eqbar input:focus,.eqnew input:focus{border-color:var(--brown-2);box-shadow:0 0 0 3px rgba(169,134,92,.16)}
  .eqbar input{flex:1;min-width:0}
  .eqtot{flex:none;font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase;color:var(--brown);font-weight:700;background:var(--brown-soft);border-radius:var(--r-pill);padding:7px 11px;white-space:nowrap}
  .eqacts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
  .eqtool{display:inline-flex;align-items:center;gap:5px;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--brown);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 13px;cursor:pointer;transition:.15s}
  .eqtool:hover{border-color:var(--brown-2);background:var(--brown-soft)}
  .eqtool.prim{background:var(--brown);border-color:var(--brown);color:#fff}
  .eqtool.prim:hover{background:#8d5f38}
  .eqcopy{border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px;margin-bottom:12px;max-height:240px;overflow:auto}
  .eqcopyh{font-size:var(--fs-4);color:var(--soft);padding:4px 6px 8px}
  .eqcopyrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:10px 8px;cursor:pointer;font-size:var(--fs-6);color:var(--ink)}
  .eqcopyrow:hover{background:var(--brown-soft)}
  .eqcopyrow i{font-style:normal;color:var(--soft)}
  .eqcopyrow em{font-style:normal;font-size:var(--fs-3);letter-spacing:.06em;text-transform:uppercase;color:var(--brown);font-weight:700;white-space:nowrap}
  .eqcopyempty{font-size:var(--fs-5);color:var(--soft);padding:8px}
  .eqnote{font-size:var(--fs-5);color:var(--green-ink);background:rgba(47,138,91,.09);border-radius:9px;padding:8px 11px;margin:0 0 10px}
  .eqempty{font-size:var(--fs-5);color:var(--soft);padding:4px 2px 8px}
  .eqnew{display:flex;gap:7px;flex-wrap:wrap;align-items:center;border-top:1px dashed var(--line);padding-top:11px;margin-top:12px}
  .eqnew input{flex:1;min-width:170px}
  @media(max-width:600px){.eqchip{padding:11px 15px;font-size:var(--fs-6)}.eqbar{flex-wrap:wrap}.eqtot{order:-1}.eqnew input,.eqnew select,.eqnew .eqtool{width:100%;flex:none;justify-content:center}}
  #ficha{padding-top:calc(var(--hd) + 28px);padding-bottom:0}
  .fichatop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
  .fback{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-6);font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;transition:border-color .18s ease,color .18s ease}
  .fback:hover{border-color:var(--brown);color:var(--brown)}
  .fback svg{width:15px;height:15px}
  .fcrumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-5);color:var(--soft);flex-wrap:wrap}
  .fcrumb button{color:var(--soft);font-weight:600}
  .fcrumb button:hover{color:var(--brown)}
  .fcrumb em{font-style:normal;color:var(--ink);font-weight:600}
  .fichawrap{display:grid;grid-template-columns:1.3fr .92fr;gap:clamp(24px,3.2vw,44px);align-items:start;padding-bottom:8px}
  .fgallery{display:flex;flex-direction:column;gap:12px;min-width:0;grid-column:1;grid-row:1}
  .fbelow{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-width:0}
  .fmain{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--brown-soft);box-shadow:var(--sh-md)}
  .fmain img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(var(--z,1));cursor:zoom-in;animation:lbpop .4s ease;transition:opacity .28s var(--ease-out)}
  .fmain .ph-svg{position:relative;z-index:1;width:100%;height:100%;display:block}
  .fbadge{position:absolute;top:14px;left:14px;z-index:2;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
  .fbadge.km0{background:var(--brown);color:#fff}
  .fbadge.usado{background:rgba(251,249,244,.92);color:var(--soft)}
  .fbadge.resv{background:var(--amber-deep);color:#fff}
  .fbadge.sold{background:rgba(33,28,22,.86);color:var(--paper)}
  .fcount{position:absolute;bottom:14px;right:14px;z-index:2;font-size:var(--fs-4);font-weight:700;color:#fff;background:rgba(20,16,12,.6);padding:5px 11px;border-radius:var(--r-pill);backdrop-filter:blur(4px);font-variant-numeric:tabular-nums}
  .fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(20,16,12,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .15s ease}
  .fnav:hover{background:rgba(20,16,12,.82)}
  .fnav.prev{left:12px}.fnav.next{right:12px}
  .fnav svg{width:22px;height:22px}
  .fthumbs{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--brown-2) transparent}
  .fthumbs::-webkit-scrollbar{height:6px}
  .fthumbs::-webkit-scrollbar-thumb{background:var(--brown-2);border-radius:var(--r-pill)}
  .fthumbs::-webkit-scrollbar-track{background:transparent}
  .fthumbs img{width:76px;height:57px;flex:none;object-fit:cover;transform:scale(var(--z,1));border-radius:10px;cursor:pointer;border:2px solid transparent;opacity:.55;transition:opacity .15s var(--ease-out),border-color .15s ease}
  .fthumbs img.sel{opacity:1;border-color:var(--brown)}
  .fthumbs img:hover{opacity:1}
  .finfo{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--hd) + 20px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-sm);background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%)}
  .festado{margin-bottom:12px}
  .festadoTag{display:inline-flex;font-size:var(--fs-3);letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:6px 13px;border-radius:var(--r-pill)}
  .festadoTag.resv{background:var(--amber-deep);color:#fff}
  .festadoTag.sold{background:rgba(33,28,22,.86);color:var(--paper)}
  .finfo h1,.finfo h2{font-family:"Archivo";font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.06;letter-spacing:-.02em}
  .finfo .fsub{color:var(--soft);font-size:var(--fs-7);margin-top:5px;font-weight:500}
  .fquick{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .fquick .fq{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:var(--fs-5);font-weight:600;color:var(--ink)}
  .fquick .fq svg{width:15px;height:15px;color:var(--brown);flex:none}
  .fpricewrap{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
  .fprice{font-family:"Archivo";font-weight:700;font-size:clamp(30px,3.6vw,40px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
  .ffin{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .ffin div{display:inline-flex;flex-direction:column;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 14px}
  .ffin div span{font-size:var(--fs-3);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
  .ffin div b{font-family:"Archivo";font-weight:700;font-size:var(--fs-7);color:var(--green-ink);font-variant-numeric:tabular-nums}
  .factions{margin-top:22px;display:flex;flex-direction:column;gap:11px}
  .fbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:var(--fs-7);font-weight:700;padding:15px 22px;border-radius:12px;transition:filter .16s ease,background .16s ease,color .16s ease,box-shadow .2s ease;box-shadow:var(--sh-sm)}
  .fbtn svg{width:18px;height:18px;flex:none}
  .fbtn.wa{background:var(--wa);color:#fff}
  .fbtn.wa:hover{filter:brightness(.94);box-shadow:var(--sh-md)}
  .fbtn.line{border:1.5px solid var(--brown);color:var(--brown);background:transparent;box-shadow:none}
  .fbtn.line:hover{background:var(--brown);color:#fff}
  .fmini{display:flex;gap:11px;margin-top:2px}
  .fminibtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:var(--fs-5);font-weight:700;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
  .fminibtn:hover{border-color:var(--brown);color:var(--brown)}
  .fminibtn svg{width:15px;height:15px;flex:none}
  .ffinnote{font-size:var(--fs-3);line-height:1.45;color:var(--soft);margin-top:14px}
  .fdesc{margin-top:16px;font-size:var(--fs-5);line-height:1.6;color:var(--soft);max-width:54ch}
  .fdesctxt{font-size:var(--fs-8);line-height:1.68;color:var(--soft);max-width:68ch;text-wrap:pretty}
  /* La descripción del auto ES el argumento de venta: se recorta LARGO, lo suficiente para engancharse. */
  .fdescwrap{--rec:7}
  .fusdnote{font-size:var(--fs-4);line-height:1.45;color:var(--soft);margin-top:12px}
  /* SIN opacity, igual que .cbna: el opacity:.9 que tenía lo dejaba en 4,66 contra el mínimo 4,5 de AA, o sea al filo (0,16 de margen). Sin él queda en 5,85. */
  .fbna{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:var(--fs-5);font-weight:700;letter-spacing:.01em;color:var(--badge-ink);background:rgba(244,239,228,.72);border:1px solid rgba(196,180,155,.5);padding:9px 14px;border-radius:var(--r-pill)}
  .fbna svg{width:14px;height:14px;color:#a08b72;flex:none}
  /* ⚠ NO SE RENDERIZA en ninguna vista pública hoy. Si se conecta a alguna, ENTRA VIOLANDO CONTRASTE: el opacity:.75 baja --soft sobre --card de 5,39 a 3,22, contra el mínimo 4,5 de AA. Antes de usarla, quitarle el opacity (nunca atenuar texto con opacidad: jerarquía por tamaño o peso). */
  .fdesc .fdesch{display:block;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);opacity:.75;font-weight:700;margin-bottom:6px}
  .fspecs{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);margin-top:clamp(20px,2.6vw,30px);box-shadow:var(--sh-sm);background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%)}
  .fspecs h2,.fspecs h3{font-family:"Archivo";font-weight:700;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.01em;margin-bottom:16px}
  /* Ficha técnica y Equipamiento son <details> cerrados por defecto: entre las dos la ficha se iba a 3-4 pantallas. La descripción NO es desplegable, es la que vende el auto. Nativos, sin JS: teclado y anuncio de abierto/cerrado salen de fábrica. Sin atributo "name", así que los dos pueden estar abiertos a la vez. El foco visible ya lo cubre summary:focus-visible de más arriba; las transiciones ya las apaga el bloque de prefers-reduced-motion del final. */
  /* El summary es un grid de 2 columnas x 2 filas: título arriba-izquierda, subtítulo abajo-izquierda, chevron a la derecha centrado sobre las dos filas. Se hace con grid y NO con un <div> envolvente para que el <h2> siga siendo hijo directo del <summary>, que es lo que mantiene la cascada de encabezados de e32a6ed. */
  .fdrop>summary{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 12px;min-height:44px;list-style:none;cursor:pointer}
  .fdrop>summary::-webkit-details-marker{display:none}
  .fdrop>summary>h2{grid-area:1/1;margin-bottom:0}
  /* Subtítulo de ayuda. La jerarquía se logra SIN opacidad y sin aclarar el color: --soft puro, cuerpo mucho más chico, peso 400 contra el 700 del título, letter-spacing normal y la fuente de párrafo en vez de Archivo. Con opacity:.9 caería a 4,34 y no llegaría al 4,5 de AA; sobre este crema no hay margen para atenuar. Mismo criterio que .gdis del pie.
     Va con aria-hidden: es una ayuda visual, y la semántica nativa de <summary> ya anuncia "botón, contraído". Sin esto el nombre accesible sumaba 8 palabras redundantes en cada desplegable. */
  .fdrophint{grid-area:2/1;font-family:"Manrope",system-ui,sans-serif;font-size:var(--fs-5);font-weight:400;letter-spacing:normal;text-transform:none;color:var(--soft)}
  /* Abierto, el subtítulo ya no aporta: el contenido está a la vista. */
  .fdrop[open]>summary .fdrophint{display:none}
  .fdrop>summary::after{content:"";grid-row:1/span 2;grid-column:2;align-self:center;width:9px;height:9px;border-right:2px solid var(--brown-2);border-bottom:2px solid var(--brown-2);transform:translateY(-2px) rotate(45deg);transition:transform .18s var(--ease-out),border-color .18s var(--ease-out)}
  .fdrop[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
  .fdrop[open]>summary{margin-bottom:16px}
  /* Hover y toque. Se animan SOLO transform, box-shadow y border-color: ninguna recalcula layout. El fondo NO cambia en ningún estado, así que el contraste del texto es idéntico en todos.
     CLAVE: el lift va sólo en CERRADO (:not([open])). Estando abierto, :hover se dispararía al pasar el mouse por cualquier parte del contenido desplegado —que en Equipamiento puede ser una lista larga— y el bloque entero se levantaría mientras la persona está leyendo, no buscando saber si es clickeable; y si el cursor cruza el borde, tiembla. Abierto queda con la sombra fija de --sh-md y sin transform. El chevron sí cambia de color en los dos estados: es chico y no molesta. */
  .fdrop{transition:transform .17s var(--ease-out),box-shadow .17s var(--ease-out),border-color .17s var(--ease-out)}
  .fdrop:not([open]):hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--brown-2)}
  .fdrop[open]{box-shadow:var(--sh-md)}
  /* En celular no hay hover: el :active da el feedback al toque, también sólo en cerrado. */
  .fdrop:not([open]):active{transform:translateY(-1px);box-shadow:var(--sh-md);border-color:var(--brown-2)}
  .fdrop:hover>summary::after,.fdrop:active>summary::after{border-color:var(--brown)}
  .fspecgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
  .frow-s{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-2)}
  .frow-s .sk{font-size:var(--fs-6);color:var(--soft)}
  .frow-s .sv{font-size:var(--fs-7);font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
  .feqcat{margin-bottom:18px}
  .feqcat h3,.feqcat h4{font-size:var(--fs-3);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:700;margin-bottom:9px}
  .feqgrid{display:flex;flex-direction:column;gap:7px}
  .feqcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px 28px;align-items:start}
  .feqcat{margin-bottom:0}
  .feqcat:last-child{margin-bottom:0}
  .feq{display:flex;align-items:center;gap:8px;font-size:var(--fs-6);color:var(--ink);line-height:1.3}
  .feq svg{width:14px;height:14px;color:var(--green);flex:none}
  .frelated{border-top:1px solid var(--line);padding-top:clamp(26px,3vw,38px);margin-top:clamp(26px,3vw,38px);padding-bottom:clamp(60px,10vw,96px)}
  .frelgrid{padding-bottom:0}
  .frelated h2,.frelated h3{font-family:"Archivo";font-weight:700;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.01em;margin-bottom:18px}
  .fbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:space-between;gap:14px;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:12px clamp(16px,5vw,24px);box-shadow:0 -12px 30px -20px rgba(58,42,26,.35)}
  .fbar .fbarp{display:flex;flex-direction:column;line-height:1.1}
  .fbar .fbarp span{font-size:var(--fs-3);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
  .fbar .fbarp b{font-family:"Archivo";font-weight:700;font-size:var(--fs-10);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .fbar .fbarwa{flex:1;max-width:58%;padding:13px 18px;box-shadow:none}
  @media(max-width:820px){.fichawrap{grid-template-columns:1fr}.fgallery,.finfo,.fbelow{grid-column:1;grid-row:auto}.finfo{position:static}.fspecgrid{grid-template-columns:1fr}.feqgrid{grid-template-columns:1fr 1fr}body.view-ficha .fbar{display:flex}body.view-ficha .mobar{display:none}body.view-ficha .fabwa{display:none}}
  @media(max-width:820px){.car .cshare,.cshare{opacity:1;width:40px;height:40px}}
  /* .fmini queda en FILA también en celular: antes se apilaba porque tenía tres botones, y ahora tiene
     dos (Compartir y Cómo llegar), que entran cómodos en 375px. El de comparar subió al bloque de acciones. */
  @media(max-width:480px){.feqgrid{grid-template-columns:1fr}.fbar .fbarwa{max-width:none}}
  @media(max-width:760px){.vcols{grid-template-columns:1fr}}
  @media(max-width:760px){input,select,textarea,.field textarea,.fsel select,.fsel input,.dropsearch input,.rinwrap input,.ressort select,#detail .ressort select,.admsearch input,.admord select,.eqbar input,.eqnew input,.eqnew select{font-size:var(--fs-8)}}
  .infobody{color:var(--soft);font-size:var(--fs-7);line-height:1.62;margin-top:18px}
  .infobody p{margin-bottom:12px}
  .infobody ol{margin:4px 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
  .infobody b{color:var(--ink)}
  footer{border-top:1px solid var(--line);background:var(--paper)}
  .footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px;padding-top:clamp(44px,6vw,70px);padding-bottom:30px}
  .footgrid h2,.footgrid h5{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:var(--fs-3);letter-spacing:.2em;text-transform:uppercase;color:var(--brown);margin-bottom:14px}
  /* "anywhere" y no "break-word": las columnas del pie son tracks 1fr, y un track 1fr nunca baja del
     ancho mínimo de su contenido. break-word deja envolver pero NO reduce ese mínimo, así que el
     "ventas@leloirautomotores.com" seguía empujando toda la grilla 65px afuera con el texto al 200%. */
  .footgrid p,.footgrid a{color:var(--soft);font-size:var(--fs-6);line-height:1.8;display:block;overflow-wrap:anywhere}
  .footgrid a:hover{color:var(--brown)}
  .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
  .fbrand img{height:52px;width:auto}
  .fbottom{border-top:1px solid var(--line);padding:18px 0 42px;font-size:var(--fs-5);color:var(--soft);text-align:center}
  .grupo{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
  /* Vacío no deja hueco. Sin esto, con renderGrupo() apagado el contenedor conservaba su border-top y sus
     22px de padding arriba y abajo: 45px de aire con una línea horizontal suelta en el medio del pie.
     Medido, el pie pasaba de 570 a 548 en vez de a 503. :empty y no display:none a secas, para que el
     bloque vuelva solo si se carga una URL en el Panel. */
  .grupo:empty{display:none}
  .grupo .glabel{font-size:var(--fs-3);letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-weight:700;margin-right:6px}
  .grupo a{font-size:var(--fs-6);font-weight:600;color:var(--soft);display:inline-flex;align-items:center;gap:7px;transition:color .15s ease}
  .grupo a:hover{color:var(--brown)}
  .grupo a.current{color:var(--ink)}
  .grupo a.current::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brown);flex:none}
  .grupo .gdis{color:var(--soft);font-size:var(--fs-6);font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:default}
  .revhead{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,3vw,28px);margin-bottom:clamp(20px,3vw,28px)}
  .revscore{display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:clamp(16px,3vw,32px);border-right:1px solid var(--line)}
  .revscore .num{font-family:"Archivo";font-weight:700;font-size:clamp(44px,6vw,60px);line-height:1;color:var(--ink)}
  .revscore .stars{font-size:var(--fs-10);margin-top:8px}
  .revmeta{display:flex;flex-direction:column;gap:6px}
  .revmeta .glogo{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:var(--fs-8);color:var(--ink)}
  .revmeta .rcount{color:var(--soft);font-size:var(--fs-6)}
  .revmeta .rsmall{font-size:var(--fs-3);letter-spacing:.16em;text-transform:uppercase;color:var(--brown);font-weight:700}
  /* `align-items:flex-start` ES OBLIGATORIO ACÁ, no es cosmético. Con el `stretch` por defecto todas las
     tarjetas miden lo que la más alta, así que al expandir UNA crecían las SIETE y la sección saltaba dejando
     200-300px de hueco en las otras seis — el mismo hueco que este cambio viene a sacar. Con flex-start cada
     tarjeta mide lo suyo: recortadas quedan parejas solas (mismo clamp, mismo encabezado) y la que se expande
     crece sola. */
  /* EL GAP VA EN 10px Y NO ES UNA ELECCIÓN ESTÉTICA: `carScroll()` avanza `ancho del primer hijo + 10`, con el
     10 hardcodeado, así que con cualquier otro gap el paso no cae exacto y el riel se va corriendo tarjeta a
     tarjeta hasta desencuadrar el snap. Es la misma razón por la que el riel de fotos del comparador va con
     gap:10px, y los tres carruseles de ≤600px también. */
  .revcarousel{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--brown-2) transparent}
  /* LAS FLECHAS Y LOS PUNTITOS DE RESEÑAS SE VEN EN TODOS LOS ANCHOS, y ahí esta sección se aparta de las otras
     tres a propósito: `.carnav` es `display:none` salvo dentro del @media de 600px, porque #hDest, #hCats y
     #hTeam son GRILLAS en escritorio y sólo se vuelven carrusel en celular. El riel de reseñas, en cambio, es
     carrusel en todos los anchos —siempre tuvo overflow y snap—, así que esconder su control en escritorio
     dejaría 2416px de contenido con scroll y sin ninguna señal de que hay más. Se reusan los mismos
     componentes y la misma maquinaria; lo único distinto es dónde se muestran. */
  #revNav{display:flex}
  /* Los .carbtn del sitio miden 30px, por debajo del mínimo táctil de 44. Acá se conserva el MISMO tamaño visual
     —para que el control se lea igual que en las otras secciones— y se agranda sólo el área sensible con un
     pseudo de inset negativo: 30 + 7 + 7 = 44. No cambia un píxel de lo que se ve. */
  #revNav .carbtn{position:relative}
  #revNav .carbtn::before{content:"";position:absolute;inset:-7px;border-radius:50%}
  .revcarousel::-webkit-scrollbar{height:7px}
  .revcarousel::-webkit-scrollbar-thumb{background:var(--brown-2);border-radius:var(--r-pill)}
  .revcarousel::-webkit-scrollbar-track{background:transparent}
  .revcard{flex:0 0 clamp(272px,78%,336px);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}
  .revcard .rvtop{display:flex;align-items:center;gap:12px}
  .revavatar{width:44px;height:44px;border-radius:50%;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;font-weight:700;font-size:var(--fs-7);flex:none}
  .revcard .rvname{font-weight:700;color:var(--ink);font-size:var(--fs-7)}
  .revcard .rvdate{font-size:var(--fs-5);color:var(--soft)}
  .revcard .stars{font-size:var(--fs-8)}
  /* EL RECORTE ES VISUAL Y EL TEXTO COMPLETO SIEMPRE ESTÁ EN EL HTML. Los términos de Google piden el texto
     textual y completo, así que se recorta con `line-clamp` —que no toca el string y deja el texto entero en el
     árbol de accesibilidad— y NUNCA truncando en el JS. Cinco líneas y no cuatro porque con cinco las reseñas
     cortas del stock real (Norita y Ethel, 5 líneas justas en escritorio) NO se recortan y por lo tanto no
     muestran el botón, que era el comportamiento pedido. Ojo al verificar: `getComputedStyle` reporta
     `flow-root` y no `-webkit-box` cuando el elemento clampeado es ítem de flex —y acá lo es—, así que el valor
     computado hace creer que el clamp no aplica. Se comprueba con `scrollHeight` contra `clientHeight`. */
  .revcard .rvtext{font-size:var(--fs-7);color:var(--ink);line-height:1.6;text-wrap:pretty}
  .revcard{--rec:5}
  /* ===== RECORTE REUSABLE "VER MÁS" =========================================================
     UN SOLO MECANISMO PARA LOS TRES CASOS —reseña de Google, bio del vendedor y descripción del vehículo—
     en vez de tres copias. La cantidad de líneas la fija cada contenedor con `--rec`, porque no es la misma
     decisión en una tarjeta que en el texto que vende un auto.
     EL RECORTE ES VISUAL Y EL TEXTO COMPLETO SIEMPRE QUEDA EN EL HTML: nunca se trunca el string. En las
     reseñas eso es un REQUISITO LEGAL de los términos de Google (texto textual y completo); en la bio y en la
     descripción es lo correcto igual, porque el texto entero es lo que leen Google y un lector de pantalla.
     Ojo al verificar: `getComputedStyle` reporta `flow-root` y no `-webkit-box` cuando el elemento clampeado
     es ítem de flex, así que el valor computado hace creer que el clamp no aplica. Se comprueba con
     `scrollHeight` contra `clientHeight`. */
  .rec{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rec,5);overflow:hidden}
  .rec-on .rec{display:block;-webkit-line-clamp:none;overflow:visible}
  /* El botón vive en el flujo (nada superpuesto sobre nada) y llega a los 44px de área táctil con
     `min-height` + `inline-flex`, sin robarle ancho al texto. El anillo de foco lo da la regla global de
     `button:focus-visible`, así que no hace falta una propia. */
  .recmas{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font-family:"Archivo";font-weight:700;font-size:var(--fs-6);color:var(--brown);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .recmas:hover{color:var(--brown-deep)}
  .recmas[hidden]{display:none}

  .revcard .gmark{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-5);/* 13px y no 12: es la aclaración de que la reseña viene de Google —requisito de sus términos— y era el texto más chico de la tarjeta. --soft sobre --card sigue en 5,39, así que el contraste no se movió. */color:var(--soft);padding-top:4px}
  .revempty{background:var(--card);border:1px dashed var(--line-2);border-radius:14px;padding:36px 24px;text-align:center;color:var(--soft);font-size:var(--fs-7)}
  .revactions{margin-top:clamp(18px,3vw,26px);display:flex;justify-content:center}
  .aviso{display:flex;gap:14px;align-items:flex-start;background:var(--brown-soft);border:1px solid color-mix(in srgb,var(--brown) 26%,transparent);border-radius:12px;padding:15px 18px;max-width:820px}
  .aviso .avic{width:34px;height:34px;border-radius:9px;background:rgba(122,82,48,.14);color:var(--brown);display:grid;place-items:center;flex:none}
  .aviso .avic svg{width:19px;height:19px}
  .aviso .avtx{font-size:var(--fs-5);color:var(--soft);line-height:1.55}
  .aviso .avtx b{color:var(--ink);font-weight:700}
  .aviso .avwa{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-weight:700;color:var(--brown)}
  .aviso .avwa:hover{text-decoration:underline}
  .aviso .avwa svg{width:14px;height:14px;flex:none}
  @media(max-width:600px){.revhead{flex-direction:column;align-items:stretch;text-align:center}.revscore{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:16px}.revmeta{align-items:center}}
  @keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
  .fabwa{position:fixed;right:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px);z-index:120;display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;font-family:"Manrope",sans-serif;font-weight:700;font-size:var(--fs-7);padding:14px 21px;border-radius:var(--r-pill);box-shadow:0 14px 30px -12px rgba(0,0,0,.4);animation:fabIn .55s .45s both cubic-bezier(.2,.7,.2,1);transition:transform .18s var(--ease-out),filter .18s ease,opacity .2s ease}
  .fabwa:hover{transform:translateY(-2px);filter:brightness(1.04)}
  .fabwa svg{width:23px;height:23px;flex:none}
  /* Al ser position:fixed, este botón queda siempre en el mismo punto de la pantalla sin importar qué contenido haya scrolleado hasta ahí abajo — en un Samsung real tapaba la última letra de "Vehículos disponibles" justo cuando ese título quedaba en su franja. Se oculta mientras se scrollea y reaparece apenas el scroll se detiene (mismo patrón que usan los widgets de chat de WhatsApp/Intercom), para que nunca quede pisando texto fijo. */
  /* !important porque la animación de entrada fabIn (con fill-mode "both") sigue sosteniendo opacity:1 en reposo, y en la cascada CSS eso gana por sobre una regla normal para la misma propiedad. */
  .fabwa.fab-hide{opacity:0!important;pointer-events:none;transform:translateY(6px)}
  /* EN EL PERFIL DEL VENDEDOR EL FAB NO VA. Ahí ya hay un "Hablar por WhatsApp" que escribe AL ASESOR, con su
     número y su mensaje; el flotante escribe al número general de la concesionaria. Dos botones verdes de
     WhatsApp a centímetros uno del otro no son redundancia, son dos destinos distintos que parecen el mismo —
     y encima el flotante se superponía con el del perfil en celular. Gana el del asesor, que es el que
     corresponde a la página. */
  body.view-vendedor .fabwa{display:none}
  @media(max-width:600px){.fabwa{padding:0;width:58px;height:58px;justify-content:center;gap:0}.fabwa .fab-t{display:none}}
  @media(prefers-reduced-motion:reduce){.fabwa{animation:none;transition:opacity .2s ease}.fabwa.fab-hide{transform:none}}

  /* ===== COMPARADOR DE VEHÍCULOS (etapa 1) ===== */
  /* Texto solo para lectores de pantalla. NO usa display:none ni visibility:hidden, que lo sacarían también del árbol de accesibilidad. */
  .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  /* Control de la tarjeta. Va en el área de INFORMACIÓN, debajo de la foto, NO superpuesto sobre ella: en
     un sitio de vehículos la foto es lo que vende y ningún control debe competir con ella. Antes estaba
     absoluto abajo-izquierda de la imagen y la tapaba.
     Al estar en el flujo ya no necesita z-index ni backdrop-filter, y se posiciona con align-self para
     que ocupe sólo su ancho y no toda la columna. */
  /* El chip y el enlace "Ver ficha" comparten una fila propia: puestos como hermanos directos de .cinfo
     (que es flex en columna) se apilarían, y en celular eso son 38px extra por tarjeta. */
  .cmpslot{align-self:flex-start;position:relative;z-index:5;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  /* ===== EL CHIP DE COMPARAR NO VA EN EL CATÁLOGO NORMAL =====
     El chip suelto "Comparar / Comparando" alargaba cada tarjeta 34px en escritorio y 40 en celular, y el
     comparador ya tiene cuatro puertas de entrada mejores: la banda de la home, el botón de la fila de
     filtros, el menú y la ficha del vehículo.
     VA CON body:not(.cmp-sel) Y NO A SECAS, y esta es la distinción que importa: en modo selección el MISMO
     .cmpbtn cambia de piel y pasa a ser el tilde "Elegir / Elegido", que es el control accesible del modo.
     Ocultarlo sin la condición dejaría al modo selección sin forma de elegir con teclado o lector.
     Se oculta el .cmpslot entero y no sólo el chip: afuera del modo el ojo (.cverf) ya está en display:none,
     así que el contenedor quedaría vacío ocupando su alto y su gap. En el "También te puede interesar" de la
     ficha pasa lo mismo, y es coherente: ahí tampoco hay nada que elegir si no estás en el modo. */
  body:not(.cmp-sel) .cmpslot{display:none}
  .cmpbtn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--soft);font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-2);letter-spacing:.06em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
  .cmpbtn svg{width:13px;height:13px;flex:none}
  .cmpbtn-i{display:inline-flex;flex:none}
  .cmpbtn:hover{border-color:var(--brown-2);color:var(--brown)}
  .cmpbtn.on{background:var(--brown);border-color:var(--brown);color:#fff}
  @media(max-width:820px){.cmpbtn{min-height:40px}}
  .stock.g6 .cmpbtn .cmpbtn-t{display:none}
  /* ===== MODO SELECCIÓN DEL CATÁLOGO =====
     Tocar una tarjeta la elige en vez de abrir la ficha. El tilde y el control accesible son EL MISMO
     elemento: el .cmpbtn que ya vivía en la franja de información cambia de piel (círculo vacío + "Elegir"
     / tilde + "Elegido"). Un badge aparte sería un segundo indicador del mismo estado, y además no hay
     dónde ponerlo: los cuatro rincones de la foto ya están ocupados (.cbadge, .cshare, .gcount, .cwafab) y
     sobre la foto no va NADA — es lo que vende el auto. */
  body.cmp-sel #detail .stock .cmpbtn{min-height:40px;font-size:var(--fs-3);letter-spacing:.04em}
  /* La tarjeta elegida se distingue por DOS señales, no sólo por color: el anillo de acento y el tilde.
     box-shadow y no border (3px correrían el layout 2px) ni outline (se confundiría con el anillo de foco,
     que es 2px con offset 3px). Se repite la sombra de cada estado, o el anillo la borraría. */
  /* Antes esta regla tenía que repetirse para .dest.cmpon, porque el borde ámbar del destacado pintaba debajo
     del anillo marrón. Al sacarse ese borde, el anillo vuelve a ser el ÚNICO estado que usa el borde de la
     tarjeta y la duplicación sobra: el destacado ahora se dice sólo con la estrella y no compite con nada. */
  body.cmp-sel #detail .stock .car.cmpon{border-color:var(--brown);box-shadow:0 0 0 3px var(--brown),var(--sh-md)}
  body.cmp-sel #detail .stock .car.cmpon:hover{border-color:var(--brown);box-shadow:0 0 0 3px var(--brown),0 30px 60px -40px rgba(33,28,22,.55)}
  /* EL OJO — la segunda acción de la tarjeta. Oculto fuera del modo selección; adentro, visible en TODOS los
     anchos y pegado al control de elegir, en los dos estados. Antes era un "Ver ficha" con texto que sólo
     aparecía donde .cbtns está oculto, y eso dejaba la acción difícil de encontrar justo donde más se
     necesita: "Ver vehículo" vive en otro bloque de la tarjeta, más abajo.
     Es icónico a propósito: dos pastillas con texto no entran en los ~146px útiles de la grilla de 2
     columnas. 44px de lado, el mínimo táctil del proyecto, que acá importa porque son dos objetivos pegados. */
  .cverf{display:none}
  body.cmp-sel #detail .stock .cverf{display:inline-flex;flex:none;width:44px;min-height:44px;padding:0;justify-content:center}
  body.cmp-sel #detail .stock .cverf svg{width:18px;height:18px}
  body.cmp-sel #detail .stock .cverf:hover{background:#fff;border-color:var(--brown);color:var(--brown)}
  /* El control de elegir sube también a 44 para que los dos objetivos midan igual. */
  body.cmp-sel #detail .stock .cmpbtn:not(.cverf){min-height:44px}
  @media(max-width:600px){
    /* En una tarjeta de 162px hay ~146px útiles: "✓ ELEGIDO" con texto pide 89px y el ojo otros 44, y con el
       gap no entran. Acá el chip de elegir queda SÓLO con el tilde —que es justo la metáfora del carrete del
       celular, y su nombre accesible sigue diciendo "Elegir <auto>"—. Mismo criterio que la vista de 6
       columnas, que ya oculta el .cmpbtn-t.
       OJO con el :not(.cverf): el ojo también lleva la clase .cmpbtn porque comparte el aspecto de pastilla,
       y sin el :not estas reglas lo pisarían. */
    body.cmp-sel #detail .stock .cmpslot{width:100%;gap:8px;justify-content:center}
    body.cmp-sel #detail .stock .cmpbtn:not(.cverf){flex:none;width:44px;padding:0;justify-content:center}
    body.cmp-sel #detail .stock .cmpbtn:not(.cverf) .cmpbtn-t{display:none}
    body.cmp-sel #detail .stock .cmpbtn:not(.cverf) svg{width:18px;height:18px}
  }
  /* ===== TARJETA COMPACTA DEL MODO SELECCIÓN =====
     El objetivo del modo es ver MUCHOS autos de una para elegir, no leer el detalle de cada uno. Así que la
     tarjeta se queda con lo mínimo para decidir —foto, nombre y precio— y debajo los dos botones.
     Se oculta todo lo demás, que acá es ruido: la versión, la línea de metadatos (año · km · combustible),
     el badge de "Revisado + Garantía", la financiación (badge BNA, anticipo y cuota), el botón de WhatsApp y
     el de compartir. En el catálogo normal NADA de esto cambia: todas las reglas van bajo body.cmp-sel.
     El bloque .cbtns entero se oculta y "Ver vehículo" pasa a ser el segundo botón de .cmpslot, así los dos
     quedan lado a lado como una sola fila de acciones. De paso eso saca el botón de WhatsApp, que también
     vivía ahí. */
  body.cmp-sel #detail .stock .cver,
  body.cmp-sel #detail .stock .cmeta,
  body.cmp-sel #detail .stock .cfin,
  body.cmp-sel #detail .stock .cshare,
  body.cmp-sel #detail .stock .cwafab,
  body.cmp-sel #detail .stock .cbtns{display:none}
  body.cmp-sel #detail .stock .cinfo{padding:9px 10px 10px;gap:5px}
  body.cmp-sel #detail .stock .cpricerow{padding-top:0;gap:0}
  /* Los dos botones ocupan la fila completa y se reparten el ancho; el de elegir no baja de 44px. */
  body.cmp-sel #detail .stock .cmpslot{width:100%;gap:6px;flex-wrap:nowrap}
  body.cmp-sel #detail .stock .cverf{flex:1 1 auto;width:auto;min-width:44px;padding:0 8px}
  /* MÁS COLUMNAS: la tarjeta compacta ocupa menos, así que se ven más autos por pantalla, que es el punto
     del modo. Se pisan las cuatro variantes de densidad (g2/g3/g4/g6) porque el modo fija la suya —y por eso
     también se esconde el selector de columnas, que si no mostraría un número que no es el que se ve. */
  body.cmp-sel #detail .stock,
  body.cmp-sel #detail .stock.g2,
  body.cmp-sel #detail .stock.g3,
  body.cmp-sel #detail .stock.g4,
  body.cmp-sel #detail .stock.g6{grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,14px)}
  body.cmp-sel #detail .viewsel{display:none}
  /* La regla `.stock.g6 .cmpbtn .cmpbtn-t{display:none}` es del catálogo normal y acá sobra: el modo fija su
     propia densidad, así que el chip tiene que verse igual con cualquier valor guardado. Sin esto el chip
     quedaba en 31px de ancho —por debajo del mínimo táctil— sólo para quien tenía elegida la vista de 6. */
  /* Va dentro de un min-width y NO a secas: al llevar la clase `.g6` tiene MÁS especificidad que la regla de
     ≤600px que oculta ese mismo texto, así que suelta le ganaba incluso adentro del media query y en celular
     reaparecía la etiqueta, desbordando 36px. Acotarlo por ancho es lo que evita la pelea. */
  @media(min-width:601px){body.cmp-sel #detail .stock.g6 .cmpbtn:not(.cverf) .cmpbtn-t{display:inline}}
  /* padding 8 y no 10: en 6 columnas la tarjeta queda en 164px y con 10 el chip "ELEGIDO" desbordaba 3px. */
  body.cmp-sel #detail .stock .cmpbtn:not(.cverf){min-width:44px;padding:0 8px}
  @media(max-width:1180px){body.cmp-sel #detail .stock,body.cmp-sel #detail .stock.g2,body.cmp-sel #detail .stock.g3,body.cmp-sel #detail .stock.g4,body.cmp-sel #detail .stock.g6{grid-template-columns:repeat(5,1fr)}}
  @media(max-width:1000px){body.cmp-sel #detail .stock,body.cmp-sel #detail .stock.g2,body.cmp-sel #detail .stock.g3,body.cmp-sel #detail .stock.g4,body.cmp-sel #detail .stock.g6{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:820px){body.cmp-sel #detail .stock,body.cmp-sel #detail .stock.g2,body.cmp-sel #detail .stock.g3,body.cmp-sel #detail .stock.g4,body.cmp-sel #detail .stock.g6{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:700px){body.cmp-sel #detail .stock,body.cmp-sel #detail .stock.g2,body.cmp-sel #detail .stock.g3,body.cmp-sel #detail .stock.g4,body.cmp-sel #detail .stock.g6{grid-template-columns:repeat(2,1fr);gap:10px}}
  @media(max-width:600px){body.cmp-sel #detail .stock .cinfo{padding:8px 8px 9px}}

  /* ===== ENCABEZADO DEL MODO SELECCIÓN =====
     En modo selección el catálogo se presenta como SECCIÓN PROPIA y no como "el catálogo con un aviso
     encima": este bloque reemplaza al .dhead de "Stock / Vehículos". Se intercambian por CSS y no por JS para
     que entrar y salir del modo siga siendo un toggle de clase, sin re-render.
     IMPORTANTE: los dos bloques tienen un <h1>, así que se muestra UNO Y SÓLO UNO — es la regla de un <h1>
     por vista que fijó e32a6ed, y por eso el .dhead se oculta en vez de convivir. */
  .cmpselhead{display:none;padding:calc(var(--hd) + 40px) 0 26px}
  body.cmp-sel #detail .dhead{display:none}
  body.cmp-sel #detail .cmpselhead{display:block}
  .cmpselhead h1{margin-top:14px}
  .cmpselhead .dsub{max-width:62ch}
  @media(max-width:700px){.cmpselhead{padding-top:calc(var(--hd) + 22px)}}
  /* En celular la fila de filtros deja de ser pegajosa mientras se elige. Sumada al panel y al header eran
     387px de 812 —casi la mitad de la pantalla— para mirar tarjetas, que es justo lo que hay que hacer en
     este modo. Los filtros siguen estando, a un scroll hacia arriba. */
  @media(max-width:700px){body.cmp-sel .filters{position:static}}
  /* Acceso al comparador en la fila de filtros del catálogo. Va del OTRO LADO de la fila, agrupado con el
     botón de filtros, para que no se lea como un cuarto chip de condición: no filtra nada. */
  .filbaract{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .cmpfil{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--brown-2);border-radius:var(--r-pill);padding:10px 16px;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-6);font-weight:700;color:var(--brown);cursor:pointer;transition:background-color .18s ease,color .18s ease}
  /* COMPARTIR EL CATÁLOGO reusa .cmpfil —el mismo contorneado que "Comparar"— porque son dos acciones del
     mismo rango: ninguna es la tarea de la página, que es mirar autos. Sólo se le achica el ícono, que en el
     original de compartir viene más grande. En celular pierde el texto y queda el ícono: la fila ya lleva el
     selector de condición, Comparar y Filtros, y ahí el ancho es el recurso escaso. Sin texto visible SC 2.5.3
     no aplica y el aria-label sigue diciendo QUÉ se comparte. */
  .catshare svg{width:15px;height:15px;flex:none}
  /* En el cotizador el botón vive en el encabezado y no en una fila de acciones, así que se separa del
     subtítulo. `align-self:flex-start` para que no se estire al ancho del bloque. */
  /* MÍNIMO TÁCTIL DE 44 px, Y ACÁ SÍ SE PUEDE PORQUE EL BOTÓN ESTÁ SOLO. Los otros dos botones de 38 px del
     sitio —`.catshare` y `.cmpfil` en la fila de filtros del catálogo— se dejaron en 38 para COINCIDIR con su
     vecino inmediato: subir uno solo lo dejaría visiblemente más alto que el de al lado, que es peor que la
     deuda. En el encabezado del cotizador no hay vecino, así que los 38 eran puramente heredados de reusar
     `.cmpfil` y subirlos no desalinea nada.
     VA EN `.cotshare` Y NO EN `.cmpfil` NI EN `.catshare`: tocar cualquiera de esas dos arrastra los tres
     casos de la fila de filtros, que son los que necesitan su propia tanda (cambia el alto de la fila y
     empuja la grilla). El `min-width` es por el estado de celular, donde el texto se oculta y el botón queda
     cuadrado: sin él el área táctil sería 42 de ancho, que es justo donde se toca con el dedo. */
  .cotshare{margin-top:16px;align-self:flex-start;min-height:44px;min-width:44px}
  @media(max-width:600px){
    .catshare .catsharet{display:none}
    .catshare{padding-left:12px;padding-right:12px}
  }
  .cmpfil svg{width:16px;height:16px;flex:none}
  .cmpfil:hover{background:var(--brown);border-color:var(--brown);color:#fff}
  .catmore{flex-wrap:wrap;gap:12px}
  /* ===== BANDA "COMPARAR VEHÍCULOS" DE LA HOME =====
     Sección propia porque es una función que nadie espera encontrar en el sitio de una concesionaria: como
     botón suelto al pie del catálogo pasaba desapercibida. Tiene peso —panel con borde de acento, título
     grande y un esquema que muestra de un vistazo qué es "lado a lado"— pero deliberadamente MENOS que los
     dos caminos principales: el catálogo son tarjetas con foto y la cotización es un panel oscuro a sangre;
     acá el panel es claro y el botón un escalón más chico que los CTA de esas dos.
     El esquema NO lleva números: un precio de ejemplo se leería como una oferta real.

     COMPRIMIDO, NO REDISEÑADO. La composición es la original —panel claro con borde de acento, título,
     descripción, botón, y el esquema al costado— porque estaba bien; el único problema era que medía casi lo
     mismo que el panel del cotizador (554 contra 559 en desktop). Se bajó el alto tocando sólo medidas:
     padding vertical, dos pasos de la escala --fs-N en título y descripción, el esquema achicado, y el botón
     al tamaño que corresponde a un bloque más bajo. Hubo un intento de rehacerlo como "franja" con otro
     layout y se revirtió: el pedido era comprimir.
     EL ESQUEMA ES LO QUE MANDA EN EL ALTO de desktop: medía 308px contra los ~237 de la columna de texto, así
     que el panel valía lo que valía el esquema. Bajarlo es lo que mueve la aguja; achicar sólo la tipografía
     no habría cambiado casi nada. */
  /* La banda usa un padding propio, más chico que el clamp(42px,7vw,80px) de .band: eran 160px de aire
     vertical sólo del contenedor. */
  #cmpBand{padding:clamp(24px,3.4vw,40px) 0}
  .cmppanel{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"tx demo" "ac demo";gap:clamp(14px,1.8vw,20px) clamp(20px,3vw,40px);align-items:start;background:var(--card);border:1px solid var(--brown-2);border-radius:20px;padding:clamp(18px,2vw,24px);box-shadow:var(--sh-md);background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 38%)}
  .cmppanel-tx{grid-area:tx;min-width:0}
  .cmppanel-tx h2,.cmppanel-tx h3{font-family:"Archivo";font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.06;letter-spacing:-.02em;margin-top:8px}
  .cmppanel-tx p{font-size:var(--fs-6);color:var(--soft);margin-top:8px;max-width:52ch}
  .cmppanel-ac{grid-area:ac;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
  /* Doble clase a propósito: .btn.solid pinta --ink y le gana a un selector de una sola clase. El marrón es
     el color de los CTA del sitio (catálogo y cotizador); dejarlo negro habría inventado un tercer estilo. */
  .btn.solid.cmpbandgo{background:var(--brown);border-color:var(--brown);color:#fff}
  .btn.solid.cmpbandgo:hover{background:var(--brown-2);border-color:var(--brown-2);transform:translateY(-2px)}
  .btn.solid.cmpbandgo{padding:11px 20px;font-size:var(--fs-6)}
  .cmpbandgo svg{width:16px;height:16px;flex:none}
  .cmppanel-h{font-size:var(--fs-4);color:var(--soft)}
  /* Esquema: dos columnas con una silueta y tres filas de etiqueta + barra, con una barra destacada por
     fila. Es exactamente lo que se ve al comparar, sin inventar datos. */
  /* Se conserva completo —dos siluetas y las tres filas de etiqueta + barra— sólo más chico: topeado en
     ancho, siluetas en 16/9 en vez de 4/3, y menos aire entre filas. */
  .cmpdemo{grid-area:demo;align-self:center;justify-self:end;width:100%;max-width:320px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:clamp(10px,1.1vw,12px)}
  .cmpdemo-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cmpdemo-ph{aspect-ratio:16/9;border-radius:9px;background:var(--brown-soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--brown-2)}
  .cmpdemo-ph svg{width:62%;height:auto}
  .cmpdemo-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
  .cmpdemo-lbl{grid-column:1/-1;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brown)}
  .cmpdemo-bar{height:7px;border-radius:var(--r-pill);background:var(--line)}
  .cmpdemo-bar.best{background:var(--brown)}
  @media(max-width:820px){
    .cmppanel{grid-template-columns:1fr;grid-template-areas:"tx" "demo" "ac";gap:14px}
    .cmpdemo{max-width:340px;justify-self:start}
    .cmppanel-ac{width:100%}
    .cmpbandgo{width:100%}
  }
  /* ===== PANEL DE SELECCIÓN, ARRIBA =====
     Estaba abajo, y ahí el indicador queda fuera del campo visual de quien recorre la grilla. Ahora es un
     panel fijo justo debajo del header, con presencia de "carrito": miniaturas, nombre corto, una X por
     vehículo y el botón Comparar cuando hay 2.
     El mismo panel es el aviso del modo selección (texto + botón para salir): dos barras apiladas se
     comerían media pantalla en 375px, y las dos hablan de la misma tarea.
     z-index 130 lo deja sobre la fila de filtros (30) y sobre el header (60), que es lo correcto: es
     temporal y no debe quedar por debajo de nada.
     --cmph lo MIDE el JS y de él dependen dos corrimientos, así no hay número mágico que se desincronice:
     el tope de la fila de filtros pegajosa y el aire superior del contenido. */
  .cmpbar{position:fixed;left:0;right:0;top:var(--hd);z-index:130;display:none;align-items:center;gap:clamp(8px,1.4vw,14px);padding:10px clamp(12px,3vw,22px);background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--brown-2);box-shadow:0 14px 32px -22px rgba(33,28,22,.55)}
  body.cmp-on .cmpbar,body.cmp-sel .cmpbar{display:flex}
  /* En la comparación el panel sería redundante (las dos columnas ya tienen su "Cambiar este vehículo") y
     encima competiría con el selector compacto y con el encabezado pegajoso, que viven en el mismo lugar. */
  body.view-comparar .cmpbar{display:none}
  /* Nada de contenido tapado: el panel es fijo, así que el contenido baja lo que mide el panel. El #hub
     queda afuera a propósito: ahí arriba está el cielo del hero y correrlo partiría la ilustración. */
  body.cmp-on:not(.view-hub) #contenido,body.cmp-sel:not(.view-hub) #contenido{padding-top:var(--cmph,0px)}
  body.cmp-on .filters,body.cmp-sel .filters{top:calc(var(--hd) + var(--cmph,0px))}
  .cmpselmsg{display:flex;flex-direction:column;min-width:0;flex:none}
  .cmpselmsg b{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-6);font-weight:700;line-height:1.15;color:var(--ink)}
  .cmpselmsg span{font-size:var(--fs-4);color:var(--soft);line-height:1.3}
  .cmpsels{display:flex;align-items:center;gap:clamp(8px,1.4vw,14px);min-width:0;overflow:hidden}
  .cmpsel{display:flex;align-items:center;gap:8px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 6px 4px 4px}
  .cmpsel img{width:44px;height:33px;object-fit:cover;border-radius:var(--r-pill);border:1px solid var(--line);flex:none}
  .cmpsel .cmpnm{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-4);line-height:1.15;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmpx{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--soft);display:grid;place-items:center;cursor:pointer;font-size:16px;line-height:1;transition:border-color .15s ease,color .15s ease}
  .cmpx:hover{border-color:var(--brown-2);color:var(--brown)}
  /* Marrón y no el verde de .fbtn.wa que traía de la barra de abajo: en todo el sitio el verde es WhatsApp
     (FAB, botón de la tarjeta, CTA de la ficha) y acá, arriba y con presencia, se leía como "escribinos". */
  .cmpgo{margin-left:auto;flex:none;padding:11px 20px;background:var(--brown);color:#fff}
  .cmpgo:hover{background:var(--brown-2)}
  /* Salir del modo. Va pegado al borde derecho, después del botón Comparar: el orden visual es
     "qué elegiste → comparar → salir", que es el orden de importancia. */
  .cmpsalir{flex:none;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brown);border:1px solid var(--line);background:var(--paper);border-radius:var(--r-pill);min-height:40px;padding:0 14px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
  .cmpsalir:hover{border-color:var(--brown);background:var(--brown);color:#fff}
  .cmpgo+.cmpsalir{margin-left:0}
  /* En 375px el panel es una barra de ancho completo en dos filas: mensaje arriba, miniaturas y acciones
     abajo. Las miniaturas scrollean en horizontal antes que empujar el botón Comparar fuera de la pantalla. */
  @media(max-width:700px){
    .cmpbar{flex-wrap:wrap;gap:8px;padding:8px clamp(12px,3vw,22px)}
    .cmpselmsg{flex:1 1 100%}
    .cmpselmsg b{font-size:var(--fs-5)}
    .cmpsels{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
    .cmpsels::-webkit-scrollbar{display:none}
    .cmpsel .cmpnm{max-width:88px}
    .cmpgo{margin-left:auto;padding:10px 16px;font-size:var(--fs-6)}
    .cmpsalir{min-height:38px;padding:0 11px;font-size:var(--fs-3)}
  }
  /* Vista de comparación. Tabla real de 2 columnas iguales; table-layout fijo para que un texto largo no las desbalancee. */
  /* ===== EL COMPARADOR EN FORMATO TARJETAS =====
     Antes los datos flotaban sueltos sobre el fondo de la página. Ahora hay contención en dos niveles: un
     panel que envuelve todo el bloque (centrado y con ancho máximo) y, arriba, cada vehículo en su tarjeta.
     LA DECISIÓN QUE IMPORTA: sigue siendo UNA SOLA <table> con `table-layout:fixed` y
     `border-collapse:collapse`. Si cada vehículo pasara a ser una tarjeta con su propia lista, se perdería la
     comparación — el ojo ya no podría cruzar horizontalmente valor contra valor, que es exactamente para lo
     que sirve esto. Las "tarjetas" de los encabezados son un <div> ADENTRO del <th>; el <th> sólo aporta la
     calle entre columnas con su padding. Así la alineación la sigue garantizando la tabla y no una
     coincidencia de anchos, y los <th scope="col"> siguen asociados a sus celdas para un lector de pantalla. */
  /* 1000px y no un número redondo menor: los 6 chips de categoría del selector piden 938px y con 940 de
     panel quedaban 908 disponibles, así que envolvían en dos filas y empujaban la primera fila de datos
     50px hacia abajo. Con 1000 quedan 970 y entran en una sola fila en desktop. */
  .cmptabpanel{max-width:1000px;margin:clamp(14px,2vw,20px) auto 0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(12px,1.8vw,22px);box-shadow:var(--sh-sm);background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 26%)}
  /* El resto del bloque comparte el mismo ancho y centro, para que se lea como una sola columna. */
  #cmpInner .bandhead,#cmpInner #cmpSelector{max-width:1000px;margin-left:auto;margin-right:auto}
  .cmptab{width:100%;border-collapse:collapse;table-layout:fixed}
  /* height:1px es el truco conocido para que un hijo con height:100% resuelva contra el alto REAL de la
     fila: sin esto el porcentaje no resuelve y las dos tarjetas quedan desparejas. El 1px no se aplica,
     porque en una celda `height` es un mínimo y el contenido la estira. */
  .cmphead{width:50%;height:1px;vertical-align:top;padding:0 clamp(4px,.7vw,8px);text-align:left}
  /* Tarjeta recesada sobre el panel claro: --paper es un tono por debajo de --card, así los dos vehículos se
     leen como dos objetos y no como parte del panel. */
  /* height:100% para que las dos tarjetas terminen a la misma altura: si un nombre envuelve en dos líneas y
     el otro no, quedaban desparejas. En una celda de tabla el alto lo fija la fila, así que el 100% del
     hijo resuelve contra eso. */
  /* Nota al pie de la tabla, sólo con anticipo o cuota activos. --soft sobre --card da 5,39 y pasa AA sin
     opacidad; la jerarquía la da el tamaño, como manda la convención del proyecto. */
  .cmpnota{margin-top:clamp(12px,1.6vw,18px);padding-top:clamp(10px,1.2vw,14px);border-top:1px solid var(--line-2);font-size:var(--fs-5);line-height:1.5;color:var(--soft);text-wrap:pretty}
  /* La tarjeta es una columna centrada: nombre, versión, foto y el botón. Centrada porque el nombre es el
     rótulo de la columna y leerlo centrado sobre la foto es lo que hace obvio de quién es cada lado. */
  .cmpheadcard{height:100%;box-sizing:border-box;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(9px,1vw,12px);display:flex;flex-direction:column;align-items:center;text-align:center}
  /* Marco de la galería. El recorte lo hace ESTE contenedor y no el riel: así el riel puede scrollear
     adentro sin que se vea el borde de las fotos vecinas. */
  .cmpgal{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--brown-soft);box-shadow:var(--sh-sm);margin-top:8px}
  /* Riel de fotos: una foto por pantalla, con snap. gap:10px porque el paso de carScroll() es
     `ancho del primer hijo + 10`. overscroll-behavior-x para que el gesto no arrastre la página. */
  .cmpfotos{display:flex;gap:10px;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cmpfotos::-webkit-scrollbar{display:none}
  .cmpslide{flex:0 0 100%;scroll-snap-align:start;height:100%}
  .cmpslide img,.cmpslide svg{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--z,1))}
  /* Se topea el ANCHO y no el alto: en una columna de 580px la foto en 4/3 medía 435px de alto y, sumada al
     título y al selector, dejaba la primera fila de datos recién en y≈1000 — justo lo que se venía a
     arreglar. Topear el alto en cambio recortaría el auto por el medio con object-fit:cover, y acá la foto es
     lo que vende. Con 4/3 intacto y 320px de ancho la comparación empieza dentro de la primera pantalla. */
  @media(min-width:821px){.cmphead .cmpgal{max-width:320px}}
  /* Las flechas y el contador son los del visor de la ficha (.fnav, .gcount), sin reinventar nada. En celular
     la flecha baja a 38px: el riel igual se desliza con el dedo, así que no es el único acceso. */
  .cmpgal .fnav{width:38px;height:38px}
  .cmpgal .fnav.prev{left:8px}.cmpgal .fnav.next{right:8px}
  .cmpgal .fnav svg{width:19px;height:19px}
  .cmpgal .gcount{bottom:8px;right:8px}
  @media(min-width:821px){.cmpgal .fnav{width:44px;height:44px}}
  /* Abajo de 700px la foto de la tarjeta mide ~127px y dos flechas de 38 la tapaban casi entera, encima
     pisándose con el badge de la cantidad. Ahí se ocultan: el riel se pasa con el dedo (scroll-snap) y el
     badge sigue avisando que hay más de una foto. Arriba de 700 se quedan, porque con mouse no hay deslizar.
     No se pierde el teclado: el riel es enfocable y se recorre con las flechas del teclado. */
  @media(max-width:699px){.cmpgal .fnav{display:none}}
  /* ===== EN REPOSO LAS FLECHAS NO TAPAN EL AUTO =====
     Con puntero fino aparecen al pasar el mouse por la foto o cuando alguna recibe el foco, y en reposo la
     imagen queda limpia. Es el mismo principio por el que ningún control va sobre la foto de la tarjeta del
     catálogo: la foto es lo que vende. El badge con la cantidad de fotos NO se oculta nunca, así que se
     sigue sabiendo que hay más de una — que es el riesgo de esconder un control.
     Va con opacity y no con display porque un display:none no puede recibir foco, y entonces :focus-within
     nunca las traería de vuelta para quien navega con teclado. Son botones de icono, sin texto, así que no
     entran en la trampa del contraste con opacity (esa es para elementos con texto).
     La consulta de hover:hover + pointer:fine deja las tablets de 700-899px con las flechas siempre visibles:
     ahí no hay mouse que hacer hover. */
  @media(hover:hover) and (pointer:fine){
    .cmpgal .fnav{opacity:0;transition:opacity .15s ease,background-color .15s ease}
    .cmpgal:hover .fnav,.cmpgal:focus-within .fnav{opacity:1}
  }
  /* Nombre y versión ARRIBA de la foto y más grandes: el nombre es lo primero que se lee. */
  .cmptit{display:block;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:clamp(17px,2.4vw,24px);line-height:1.18;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
  .cmpsub{display:block;font-size:var(--fs-5);font-weight:500;letter-spacing:normal;color:var(--soft);margin-top:3px}
  /* flex:none porque .fminibtn trae flex:1 —está pensado para la fila de dos botones de la ficha— y en esta
     tarjeta, que es una columna flex, eso lo estiraba a lo alto hasta llenar el sobrante: 82px de alto para
     una palabra. Medido antes y después: 82 → 40. */
  .cmpquitar{margin-top:9px;align-self:center;flex:none}
  /* La etiqueta del dato es un <th scope="rowgroup"> con colspan, en su propia fila arriba de los dos valores. Así las dos columnas de valores quedan IGUALES: una tercera columna de etiquetas se comería ~85px de los ~343px útiles en 375px y dejaría las fotos en ~130px; de este modo quedan en ~165px. */
  /* SIN BANDA DE FONDO, y esto lo decidió la captura: con "Comparar todo" son 27 encabezados y, como la banda
     y la fila de valores miden casi lo mismo (35 contra 39), la tabla se leía como un patrón de RAYAS en vez
     de como información agrupada. Se probó --brown-soft (5,57) y el tinte más leve de --paper (5,90): las dos
     rayan igual, porque el problema es el ritmo banda-valor-banda y no la saturación.
     Lo que queda marcando el grupo es el borde izquierdo en --brown-2 y la etiqueta en --brown sobre el fondo
     del panel (6,49), que es color pero no bloque. */
  .cmpgrp{border-left:3px solid var(--brown-2);padding:clamp(10px,1.4vw,14px) clamp(5px,1vw,10px) 4px;text-align:left;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brown);border-bottom:1px solid var(--line-2)}
  /* Padding vertical 7 y no 11: con "Comparar todo" son ~50 filas y cada píxel se multiplica por eso. Lo que
     mantiene los renglones distinguibles NO es el aire sino el borde inferior de 1px, que se conserva: el
     valor de una tabla comparativa es poder recorrerla sin perder el renglón. */
  .cmpv{padding:7px clamp(5px,1vw,10px);vertical-align:top;font-size:var(--fs-7);color:var(--soft);border-bottom:1px solid var(--line-2)}
  /* El mejor se destaca SUBIENDO intensidad. El otro queda en --soft, que pasa AA: nunca se lo atenúa con opacidad ni con un color más claro. */
  .cmpv.best{color:var(--ink);font-weight:700}
  .cmpempty{text-align:center;padding:40px 20px;color:var(--soft)}
  /* Mismo espaciado superior que #vendedor: sin esto el <h1> queda tapado por el header fijo. */
  #comparar{padding-top:calc(var(--hd) + 40px);padding-bottom:40px}
  /* En celular se recorta el encabezado: con el aire de 40px y el h1 en dos líneas, la primera fila de datos
     caía en y=802 de 812 —o sea, al togglear un chip la fila nueva aparecía justo abajo del borde—. Con esto
     queda dentro de la pantalla, que es la razón de haber subido el selector. */
  @media(max-width:700px){
    #comparar{padding-top:calc(var(--hd) + 10px)}
    #cmpInner h1{font-size:clamp(25px,6.6vw,34px)}
  }
  /* Con el panel arriba desaparecieron la barra compacta de la ficha (.cmpbar.mini, .cmpmini, .cmpminiv,
     .cmpcerrar) y el estado cmpExp que la gobernaba. Existían porque abajo la barra competía con el CTA de
     WhatsApp y con la barra de precio, que también viven abajo; arriba no compite con nada. */
  /* ===== COMPARADOR, ETAPA 2 ===== */
  .cmpshare{margin-top:12px;width:auto;flex:none}
  /* En desktop "Compartir" va en la misma línea que el título: apilado se comía ~70px arriba del selector, y
     todo lo que se ahorra acá es tabla que entra en la primera pantalla. */
  @media(min-width:821px){
    #cmpInner .bandhead{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:20px}
    #cmpInner .bandhead .eyebrow{grid-column:1;grid-row:1}
    #cmpInner .bandhead h1{grid-column:1;grid-row:2}
    #cmpInner .cmpshare{grid-column:2;grid-row:2;margin-top:0}
  }
  /* Va como <td> dentro de la tabla, en el lugar exacto donde van a aparecer las filas. */
  .cmpvacio{padding:26px clamp(5px,1vw,10px);font-size:var(--fs-7);color:var(--soft);text-align:center;text-wrap:pretty}
  .cmpatajos{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
  .cmpchips{display:flex;flex-wrap:wrap;gap:8px}
  /* Mismo gesto que los chips del Panel, con los tokens del sitio público. 44px por el mínimo táctil. */
  .cmpchip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--soft);font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);letter-spacing:.05em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
  .cmpchip:hover{border-color:var(--brown-2);color:var(--brown)}
  .cmpchip.on{background:var(--brown);border-color:var(--brown);color:#fff}
  /* ===== SELECTOR COMPACTO, ARRIBA DE TODO =====
     Antes eran <details> grandes DEBAJO de la tabla, y ese orden trabajaba en contra: cada dato que elegías
     aparecía arriba de donde estabas mirando y había que scrollear para atrás. Con el selector primero, la
     fila nueva crece hacia abajo, en el sentido de lectura.
     El gesto es el de los filtros del catálogo, no un acordeón: una fila de chips de categoría con su
     contador y, al tocar una, sus atributos debajo en un área compacta. */
  .cmpselector{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:clamp(11px,1.4vw,15px);margin-top:clamp(12px,1.6vw,18px)}
  /* La lista de categorías es vertical en los dos layouts, porque cada una abre sus atributos DEBAJO de sí
     misma: una fila horizontal no puede contener un panel propio por categoría. */
  .cmpcats{display:flex;flex-direction:column;gap:5px}
  .cmpcatrow{display:flex;flex-direction:column}
  .cmpcatb{width:100%;justify-content:space-between;text-align:left;white-space:normal}
  /* El chip de categoría es un DISCLOSURE (aria-expanded + aria-controls), no un tab. Los roles de tablist
     traen expectativas de teclado propias —un solo tab stop por grupo y navegación con flechas— y ponerlos
     sin implementarlas queda PEOR que no ponerlos: es la misma razón por la que los chips del Panel usan
     aria-pressed y no radiogroup. */
  .cmpcatb{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--brown);font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);letter-spacing:.05em;text-transform:uppercase;font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
  .cmpcatb:hover{border-color:var(--brown-2);color:var(--brown)}
  /* "Abierta" y "tiene atributos elegidos" son dos cosas distintas y llevan dos señales distintas: el
     fondo de acento dice cuál está abierta, el contador dice qué elegiste. */
  /* La categoría ABIERTA va rellena de marrón con texto blanco (6,82): es el MISMO lenguaje de "activo" que
     ya usa el chip de atributo, así que en el panel hay una sola forma de decirlo y no dos. Antes era
     --brown-soft con texto marrón y se distinguía poco de las cerradas. */
  .cmpcatb[aria-expanded="true"]{background:var(--brown);border-color:var(--brown);color:#fff}
  .cmpcatb[aria-expanded="true"]:hover{background:var(--brown-deep);border-color:var(--brown-deep)}
  .cmpcatn{font-size:var(--fs-3);letter-spacing:.02em;font-weight:700;color:var(--brown);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}
  /* Sobre el relleno marrón el contador se invierte: blanco sobre marrón da 6,82 y el borde sale de sobra. */
  .cmpcatb[aria-expanded="true"] .cmpcatn{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
  .cmpcatn.hay{background:var(--brown);border-color:var(--brown);color:#fff}
  /* El panel de atributos cuelga de SU categoría: sangría y una guía a la izquierda para que se lea como
     contenido de la fila de arriba y no como un bloque suelto. Sin borde superior, que era lo que lo hacía
     parecer una sección aparte al final de la lista. */
  .cmpattrs{margin:7px 0 3px 12px;padding-left:12px;border-left:2px solid var(--brown-2)}
  .cmpselector .cmpchip{min-height:44px;padding:0 12px;font-size:var(--fs-3);background:var(--paper)}
  .cmpselector .cmpchip.on{background:var(--brown);color:#fff}
  .cmpselector .cmpatajos{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-2);gap:7px}
  .cmpselector .cmpatajos .cmpchip{min-height:40px;font-size:var(--fs-2);background:#fff;color:var(--brown);border-color:var(--brown-2)}
  .cmpselector .cmpatajos .cmpchip:hover{background:var(--brown);color:#fff}
  /* ===== ESCRITORIO: EL SELECTOR VA EN UNA BARRA LATERAL PEGAJOSA =====
     Dos columnas: 280px de barra + el área de comparación. El tope es --maxw (1180px) y NO se ensanchó para
     esta vista: medido a 1280, 280 + 24 de gap + 796 de área entran cómodos y la foto sigue topeada en 320.
     Ensanchar el tope sólo acá habría desalineado esta vista del resto del sitio a cambio de nada.
     La barra es sticky y por eso se puede agregar o quitar un dato sin volver arriba, que es el problema que
     esto viene a resolver. `align-items:start` es lo que le da al sticky su recorrido: la barra viaja dentro
     de su celda de grilla, que mide lo que mide la tabla.
     A partir de 900px, que es donde la barra deja de apretar el área de datos (medido a 900: área 536, foto
     218, columnas alineadas). Abajo de eso manda el apilado de celular. */
  /* ===== EL ENCABEZADO DEL SELECTOR ES SU CONTROL DE PLEGAR =====
     Una sola pieza: la tira de arriba del panel es el botón. Cerrado queda esa misma tira con la flecha, así
     se entiende que ahí adentro está el selector y no que la función desapareció. En celular no hay plegado
     —el selector vive dentro de la tabla, pegado a las filas— así que ahí el encabezado no se muestra y no
     queda un botón que no hace nada. */
  .cmpselhead{display:none}
  .cmpselchev{width:16px;height:16px;flex:none;color:var(--brown);transition:transform .18s var(--ease-out)}
  @media(min-width:900px){
    #cmpInner .cmpgrid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;max-width:var(--maxw);margin:clamp(12px,1.6vw,18px) auto 0}
    #cmpInner .bandhead{max-width:var(--maxw)}
    #cmpInner .cmpgrid > #cmpSelector{position:sticky;top:calc(var(--hd) + 12px);max-width:none;margin:0}
    #cmpInner .cmpgrid > .cmptabpanel{max-width:none;margin:0}
    /* Va al ancho del panel, con el título a la izquierda y la flecha a la derecha, y SIN borde ni fondo
       propios: el borde y el fondo son los del selector, que es de lo que forma parte. */
    /* TIRA DE COLOR: el encabezado se estira hasta los bordes del panel con márgenes negativos del mismo
       tamaño que su padding, así se lee como la cabecera del bloque y no como un botón suelto adentro.
       --brown-deep sobre --brown-soft da 7,36. */
    #cmpInner .cmpselhead{display:flex;align-items:center;justify-content:space-between;gap:10px;width:auto;min-height:44px;
      margin:calc(-1 * clamp(11px,1.4vw,15px)) calc(-1 * clamp(11px,1.4vw,15px)) 0;
      padding:0 clamp(11px,1.4vw,15px);border:0;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
      background:var(--brown-soft);cursor:pointer;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-4);letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--brown-deep);text-align:left}
    #cmpInner .cmpselhead:hover{background:var(--brown-2);color:#fff}
    #cmpInner .cmpselhead:hover .cmpselchev{color:#fff}
    #cmpInner .cmpselbody{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
    /* ===== BARRA CERRADA =====
       Una sola columna: los dos vehículos y las filas se quedan con todo el ancho. Lo que se oculta es el
       CUERPO del selector y no el selector entero, así el encabezado sigue en pantalla; y va con display:none
       porque es lo que saca sus controles del orden de tabulación de verdad.
       La flecha rota 180° para pasar de "cerrar" a "abrir", como el chevron de los desplegables de la ficha.
       SIN TRANSICIÓN sobre el ancho a propósito: ver la nota de por qué en PROJECT_STATE. */
    body.cmp-barra-off #cmpInner .cmpgrid{grid-template-columns:minmax(0,1fr);gap:12px}
    body.cmp-barra-off #cmpInner .cmpgrid > #cmpSelector{position:static;width:fit-content;max-width:100%}
    body.cmp-barra-off #cmpInner .cmpselhead{min-width:250px}
    body.cmp-barra-off #cmpInner .cmpselbody{display:none}
    body.cmp-barra-off .cmpselchev{transform:rotate(180deg)}
    /* Con la barra cerrada sobran ~300px, así que la foto crece: de 320 a 400 de ancho (400×300 contra
       320×240). Se sube el TOPE DE ANCHO y NUNCA se topea el alto: topear el alto la recortaría por el medio
       con object-fit:cover, y acá la foto es lo que vende — es el mismo criterio con el que se eligió el 320.
       El `min(...,44vh)` es lo que evita el efecto secundario: con la foto fija en 400 la primera fila de
       datos caía en y=766, que entra en una pantalla de 900 pero NO en una de 720 (un portátil de 13"), o sea
       que cerrar la barra para ver más terminaba escondiendo justo lo que se quiere ver. Atándolo al alto del
       viewport la foto crece en pantallas altas y se modera en las bajas, y la proporción 4/3 queda intacta
       porque el tope sigue siendo de ancho: el alto lo deduce el aspect-ratio, no un recorte. */
    body.cmp-barra-off .cmphead .cmpgal{max-width:min(400px,44vh)}
    /* En la barra hay lugar vertical, así que las categorías se despliegan en columna con el contador a la
       derecha, y los atajos también: se lee como una lista de opciones y no como una fila que envuelve. */
    .cmpgrid .cmpcatb{min-height:44px;padding:0 12px}
    .cmpgrid .cmpatajos{flex-direction:column;gap:5px}
    .cmpgrid .cmpatajos .cmpchip{justify-content:center}
    /* El hueco de celular no existe en escritorio: el selector vive en la barra. */
    .cmpselrow{display:none}
  }
  @media(min-width:900px) and (max-width:1023px){
    #cmpInner .cmpgrid{grid-template-columns:260px minmax(0,1fr);gap:20px}
  }
  /* ===== CELULAR: el selector es una fila de la tabla, entre las tarjetas y los datos =====
     Va abajo de 900px, o sea el complemento exacto del breakpoint de la barra lateral.
     La fila de atajos scrollea en horizontal en vez de envolverse: son 3 chips largos que envolvían en dos o
     tres líneas —85px medidos, un tercio del selector— y el degradado del borde derecho avisa que hay más.
     Las categorías, en cambio, son una LISTA vertical: cada una abre sus atributos debajo de sí misma. */
  @media(max-width:899px){
    /* "Compartir" ocupaba una FILA propia de 42px + 12 de margen arriba del panel. Pasa a la misma línea
       del <h1>, como icono: el texto se oculta y el nombre accesible lo da el aria-label, que es el mismo
       texto (no hay dos etiquetas compitiendo, que es la trampa de SC 2.5.3 ya anotada). Para que entren los
       dos en 335px el <h1> baja un punto: su texto medía 296 y con el botón al lado pedían 350. */
    #cmpInner .bandhead{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
    #cmpInner .bandhead h1{grid-column:1;font-size:clamp(21px,5.6vw,26px)}
    #cmpInner .cmpshare{grid-column:2;margin-top:0;width:44px;min-width:44px;height:44px;padding:0;justify-content:center}
    .cmpsharet{display:none}
    .cmpselrow > tr > td{padding:6px 0 0}
    .cmpselrow #cmpSelector{max-width:none;margin:0}
    .cmpselector{padding:8px;border-radius:14px;margin:0}
    /* Sólo los atajos scrollean en horizontal. Las categorías ya NO: son un acordeón vertical, porque cada
       una abre sus atributos debajo de sí misma. Cuesta alto —medido en PROJECT_STATE— y se paga a cambio de
       que se vea de qué categoría son los chips. */
    .cmpselector .cmpatajos{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
    .cmpselector .cmpatajos::-webkit-scrollbar{display:none}
    /* Las 6 categorías van en DOS COLUMNAS en celular. Apiladas en una sola columna el selector se iba de
       220 a 436px y la primera fila de datos a y=956, o sea afuera de la pantalla — justo lo que se había
       arreglado. Con dos columnas la lista mide la mitad y el acordeón se conserva: `display:contents` en la
       fila hace que el botón y su panel sean ítems directos de la grilla, y el panel abarca todo el ancho
       (grid-column:1/-1), así aparece inmediatamente debajo de la fila de su categoría, que además queda
       resaltada por estar abierta. */
    /* minmax(0,1fr) y no 1fr: con `1fr` el mínimo automático de cada pista es el ancho MÍNIMO del botón
       —la palabra más larga ("Equipamiento") más el chip del contador—, y entre las dos pistas se pasaban
       11px del ancho de la pantalla. Con el mínimo en 0 las pistas se encogen y la etiqueta envuelve. */
    /* `dense` porque el panel abarca las dos columnas y deja VACÍA la celda de al lado de la categoría
       abierta: con el empaquetado denso esa celda la ocupa la categoría siguiente y se recupera una fila
       entera (~55px medidos). La guía del panel sigue naciendo bajo la columna izquierda, que es donde queda
       la categoría abierta, así que no se pierde de quién cuelga. */
    .cmpcats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;grid-auto-flow:row dense}
    .cmpcatrow{display:contents}
    .cmpcatrow .cmpattrs{grid-column:1/-1}
    /* La pastilla de una categoría pide hasta 186px (etiqueta 124 + contador 33 + gap + padding) y la pista
       de dos columnas mide 143: no hay padding que ajustar que cierre 43px, así que "DATOS PRINCIPALES" se
       montaba sobre "MOTOR". La salida es que el contador entre al FLUJO del texto y envuelva con él: con
       flex-wrap y line-height 1.15 las dos líneas entran dentro de los mismos 40px de alto, así que se arregla
       el solapamiento sin costar ni un píxel de alto. El contador pierde su pastilla propia acá (queda el
       color de .hay, que es lo que informa) porque un fondo redondeado a mitad de renglón se lee peor. */
    .cmpcatb{min-height:40px;padding:5px 10px;font-size:var(--fs-3);flex-wrap:wrap;justify-content:flex-start;align-content:center;gap:0 6px;line-height:1.15}
    .cmpcatn{background:none;border:0;padding:0}
    .cmpcatn.hay{background:none;color:var(--brown)}
    .cmpselector .cmpchip{min-height:40px;font-size:var(--fs-2);padding:0 10px}
    .cmpattrs{margin:6px 0 2px 10px;padding-left:10px}
    /* Los atajos son acciones secundarias, no controles de comparación: 38px de alto y en una sola fila. */
    .cmpselector .cmpatajos{margin-top:6px;padding-top:6px;gap:6px}
    .cmpselector .cmpatajos .cmpchip{min-height:38px;flex:none}
    /* El eyebrow "COMPARADOR" dice lo mismo que el <h1> que tiene debajo ("Comparación de vehículos"), y en
       celular esos 19px + su gap salen del presupuesto que necesita la primera fila de datos para entrar en
       la pantalla. En escritorio queda: ahí el alto no compite con nada. */
    #cmpInner .bandhead .eyebrow{display:none}
    /* El subtítulo (versión + año) envolvía en TRES líneas —42px— en la tarjeta de 129px. Con el interlineado
       ajustado entra en dos sin perder ni una palabra: la versión es dato de comparación, no adorno. */
    .cmpsub{line-height:1.25}
  }
  /* ===== ENCABEZADO PEGAJOSO DE LA COMPARACIÓN =====
     Con muchos atributos activos la tabla se hace larga y al scrollear se pierde de vista cuál columna es
     cada auto. Aparece sólo cuando el encabezado real (foto + nombre) ya salió de la pantalla, y es la
     versión compacta: los dos nombres, sin fotos.
     Se muestra y se oculta con display y NO con opacity: un elemento con texto cuyo estado de reposo sea
     opacity:0 deja de ser medible y un motor de contraste devuelve ratios falsos (la trampa de .reveal y de
     cardIn). Con display:none el motor lo saltea, que es lo honesto: no está renderizado.
     aria-hidden porque duplica los <th scope="col"> de la tabla, que un lector ya anuncia por columna. */
  .cmpstick{position:fixed;left:0;right:0;top:var(--hd);z-index:40;display:none;background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--brown-2);box-shadow:0 12px 28px -22px rgba(33,28,22,.5)}
  .cmpstick.on{display:block}
  /* Los paddings replican la cadena del contenido para que el nombre caiga sobre la columna de datos: el
     `1px` es el borde del panel, el clamp del medio es su padding, y el de .cmpstickn es el mismo de .cmpv.
     Medido: el texto del pegajoso y el de los valores arrancan en la misma x. */
  .cmpstickin{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;padding:0 calc(1px + clamp(12px,1.8vw,22px))}
  .cmpstickn{padding:10px clamp(5px,1vw,10px);font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:var(--fs-6);line-height:1.2;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmpstickn+.cmpstickn{border-left:1px solid var(--line-2)}
  /* Con la barra lateral las columnas de la tabla arrancan más a la derecha, así que el pegajoso descuenta
     barra + gap además del borde y el padding del panel. Sin esto los nombres quedaban 254px corridos y el
     primero caía DEBAJO de la barra lateral (medido: nombres en x=163/640 contra columnas en 417/792).
     VA ACÁ Y NO ARRIBA CON EL RESTO DEL LAYOUT: la regla base de .cmpstickin está en esta línea, y un
     @media con la misma especificidad puesto ANTES pierde por orden. Ya pasó en este mismo cambio. */
  @media(min-width:900px){.cmpstickin{max-width:var(--maxw);padding-left:calc(280px + 24px + 1px + clamp(12px,1.8vw,22px))}}
  @media(min-width:900px) and (max-width:1023px){.cmpstickin{padding-left:calc(260px + 20px + 1px + clamp(12px,1.8vw,22px))}}
  /* Con la barra cerrada las columnas arrancan al borde del panel, así que el pegajoso deja de descontarla.
     Si esto se olvida, los nombres quedan 304px corridos a la derecha de sus columnas. */
  @media(min-width:900px){body.cmp-barra-off .cmpstickin{padding-left:calc(1px + clamp(12px,1.8vw,22px))}}
  /* Separador de categoría del equipamiento y su conteo informativo. */
  .cmpcat{border-left:3px solid var(--brown-2);padding:clamp(10px,1.4vw,14px) clamp(5px,1vw,10px) 4px;font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brown);border-bottom:1px solid var(--line-2)}
  .cmpcnt{font-size:var(--fs-2);letter-spacing:.08em;color:var(--soft);font-weight:700}
  .cmpeqi{padding:6px clamp(5px,1vw,10px) 2px;text-align:left;font-size:var(--fs-5);font-weight:600;color:var(--ink)}
  .cmpeqv{font-size:var(--fs-7)}
  .cmpeqv svg{width:17px;height:17px;color:var(--green-ink)}
  /* Los ítems que tienen AMBOS bajan a --soft para que el ojo vaya a las DIFERENCIAS, que es para lo que
     sirve comparar. Con el color de texto secundario alcanza: --soft pasa AA y no se usa opacidad. */
  .cmpeqi.ambos{color:var(--soft);font-weight:400}
  .cmpeqv.ambos svg{color:var(--soft)}
  .cmpuno{max-width:420px;margin:0 auto;text-align:center}
  .cmpuno .fbtn{margin-top:14px}
  /* Lista del selector de vehículo: <button> nativos con foto miniatura. */
  .cmppicks{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;margin-top:12px}
  .cmppick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--paper);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
  .cmppick:hover{border-color:var(--brown-2);background:#fff}
  .cmppick img,.cmppickph{width:72px;height:54px;flex:none;border-radius:8px;object-fit:cover;background:var(--brown-soft)}
  .cmppickt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .cmppickt b{font-family:"Archivo",system-ui,sans-serif;font-size:var(--fs-6);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmppickt small{font-size:var(--fs-4);color:var(--soft)}
  /* Animación de filas: entrada 180ms con opacity + translateY y escalonado de 30ms (el delay lo pone el
     JS por bloque); salida 120ms sólo opacity. El bloque global de prefers-reduced-motion las apaga. */
  @keyframes cmpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* La animación de entrada va SOLO con la clase .cmpanim, que el JS agrega únicamente cuando el cambio
     lo pidió el usuario (tocar un chip o un atajo). En el primer render —incluida la carga de un link
     compartido— las filas aparecen sin animar.
     Dos razones: el link compartido no debe hacer esperar una cascada de 240ms antes de mostrar nada, y
     sobre todo, una animación con fill-mode:both que arranca en opacity:0 deja la vista NO AUDITABLE:
     AccessLint mide el estado intermedio y reporta contrastes falsos (acá dieron 1,69 a 3,89 donde los
     reales son 4,90 o más). Es exactamente la trampa que ya causa cardIn en el catálogo. */
  .cmprow.cmpanim{animation:cmpIn .18s var(--ease-out) both}
  .cmprow.cmpout{animation:none;transition:opacity .12s linear;opacity:0}
  .colist{display:flex;flex-direction:column;gap:10px}
  .corow{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;transition:border-color .16s ease,transform .16s var(--ease-out),box-shadow .16s ease}
  .corow:hover{border-color:var(--brown-2);transform:translateY(-1px);box-shadow:0 12px 26px -20px rgba(33,28,22,.5)}
  .coic{width:44px;height:44px;border-radius:11px;background:var(--brown-soft);color:var(--brown);display:grid;place-items:center;flex:none}
  .coic svg{width:22px;height:22px}
  .cotx{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
  .cotx b{font-size:var(--fs-7);font-weight:700;color:var(--ink)}
  .cotx span{font-size:var(--fs-5);color:var(--soft)}
  .cochev{width:18px;height:18px;color:var(--brown-2);flex:none}
  @media(max-width:760px){.stock,.stock.g2,.stock.g3,.stock.g4,.stock.g6{grid-template-columns:repeat(2,1fr);align-items:start}.stock .car{align-self:start}.stock.g6 .cver,.stock.g6 .cmeta,.stock.g6 .cbtns,.stock.g6 .ctrustic{display:revert}.stock.g6 .ccuota .lb-f{display:inline}.stock.g6 .ccuota .lb-a{display:none}.grid3{grid-template-columns:1fr}.bandin{grid-template-columns:1fr;gap:22px}.locrow{grid-template-columns:1fr}.footgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.grid2,.lgrid2,.lgrid3{grid-template-columns:1fr}.lbthumbs{display:none}.footgrid{grid-template-columns:1fr}}
  /* Catálogo en celular: grilla compacta de 2 columnas (foto + nombre con año + precio + financiación abreviada) */
  .cwafab{display:none}
  .cname .cy-m{display:none}
  .ccuota .lb-a{display:none}
  @media(max-width:600px){
    #detail .stock,#detail .stock.g2,#detail .stock.g3,#detail .stock.g4,#detail .stock.g6{grid-template-columns:repeat(2,1fr);gap:10px;align-items:stretch}
    #detail .stock .car{border-radius:14px}
    #detail .stock .cbtns,#detail .stock .cver,#detail .stock .cmeta,#detail .stock .cshare{display:none!important}
    #detail .stock .cname .cy-m{display:inline}
    #detail .stock .cbadge{top:7px;right:7px;left:auto;font-size:var(--fs-1);letter-spacing:.08em;padding:4px 7px}
    /* El chip se arrima al borde igual que el badge. El tamaño NO cambia: las dos vistas y todos los anchos
       muestran la misma estrella. */
    #detail .stock .cdest{top:7px;left:7px}
    #detail .stock .car .estado{top:36px;right:7px;left:auto}
    #detail .stock .gcount{bottom:8px;left:8px;right:auto;font-size:var(--fs-2);padding:4px 7px;gap:4px}
    #detail .stock .gcount svg{width:10px;height:10px}
    #detail .stock .cwafab{display:grid;place-items:center;position:absolute;right:8px;bottom:8px;z-index:4;width:34px;height:34px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
    #detail .stock .cwafab svg{width:17px;height:17px}
    #detail .stock{align-items:start}
    #detail .stock .car{align-self:start}
    #detail .stock .cinfo{padding:8px 8px 10px;gap:3px;align-items:center;text-align:center}
    #detail .stock .cname{font-size:var(--fs-7);line-height:1.15}
    #detail .stock .cpricerow{padding-top:4px;gap:3px;align-items:center;width:100%}
    #detail .stock .cprice{--cprice-max:22px;--cprice-res:38px}
    #detail .stock .cfin{align-items:center;gap:2px;width:100%}
    #detail .stock .cfin .ccuota{order:1}
    /* SIN white-space:nowrap desde que anticipo y cuota comparten renglón: con nowrap la línea fusionada no
       envolvía, se derramaba afuera de la tarjeta (la clase de bug de ce3b8ea). Lo que no corta es cada
       importe, por el nowrap de .cfseg, así que la línea parte en el separador y nunca dentro de un número. */
    #detail .stock .ccuota{font-size:var(--fs-2);line-height:1.32;overflow:visible;text-overflow:clip;letter-spacing:-.012em}
    #detail .stock .ccuota .lb-f{display:none}
    #detail .stock .ccuota .lb-a{display:inline}
    #detail .resbar{padding:14px 0 6px;gap:8px}
    #detail .resbar .counter{font-size:var(--fs-3);letter-spacing:.1em}
    #detail .ressort{padding:6px 12px}
    #detail .ressort span{font-size:var(--fs-2)}
    #detail .ressort select{font-size:var(--fs-5)}
    #detail .filterpanel{display:block;padding-top:10px;animation:none}
    #detail .filterpanel:not(.open) .fdrops,#detail .filterpanel:not(.open) .clearf{display:none}
    #detail .filterpanel .search{flex:1 1 100%;padding:9px 14px}
  }
  @media(max-width:400px){
    #detail .stock .ccuota{font-size:var(--fs-1)}
    #detail .stock .cname{font-size:var(--fs-6)}
    #detail .stock .cprice{--cprice-max:20px;--cprice-res:38px}
  }
  body{overflow-x:clip}
  img,iframe,video{max-width:100%}
  @media(max-width:768px){
    .hero{padding:calc(var(--hd) + 18px) 20px 196px;justify-content:space-evenly}
    .lk-hero{font-size:clamp(52px,15vw,76px)}
    .lk-hero .l2{letter-spacing:.28em}
    .hero .brandblock{margin-top:10px}
    .hero .eyebrow{font-size:var(--fs-3);letter-spacing:.16em}
    .hero .tag{font-size:clamp(16px,4.4vw,21px);margin-top:0;max-width:24ch}
    .hero .eyebrow{margin-bottom:0}
    .hmeta{margin-top:-10px;gap:6px 10px}
    .heroctas{margin-top:0;gap:10px;width:100%;max-width:420px}
    .heroctas .btn{flex:1 1 46%}
    .heroscene{bottom:64px}
    .dhead h1,.dhead h2{font-size:clamp(30px,7.5vw,46px)}
    .contactlist a{font-size:var(--fs-7);padding:15px 4px}
    .mapwrap{min-height:260px}
  }
  @media(max-width:480px){
    .hero{padding-left:16px;padding-right:16px;padding-bottom:186px}
    .lk-hero{font-size:clamp(52px,19vw,70px)}
    .hero .tag{font-size:clamp(15px,4.2vw,19px);max-width:24ch}
    .heroctas .btn{flex:1 1 100%}
    .brand .lk-head{font-size:var(--fs-9)}
    .menubtn span{display:none}
    .headbtns{gap:2px}
    .ghost{padding:0 11px}
    .band{padding:clamp(30px,8vw,80px) 0}
    .modalbg{padding:12px}
    .modal{padding:20px}
    .stock,.stock.g2,.stock.g3,.stock.g4,.stock.g6{grid-template-columns:1fr}
    .catgrid{grid-template-columns:1fr}
    .venstep,.ctastep{gap:11px}
    .revcard{flex-basis:86%}
    .footnav{gap:6px 18px}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
  /* Sistema de sombras cálidas (chica / media / grande) */
  :root{--sh-sm:0 2px 6px -2px rgba(74,54,32,.14),0 1px 2px rgba(74,54,32,.07);--sh-md:0 16px 36px -20px rgba(74,54,32,.30),0 5px 12px -8px rgba(74,54,32,.13);--sh-lg:0 44px 84px -44px rgba(58,42,26,.42),0 14px 32px -20px rgba(58,42,26,.18);--r-sm:11px;--r-lg:18px;--ease:cubic-bezier(.2,.7,.2,1);--dur:.22s}
  .svc,.tcard,.seller,.venstep,.howcard,.cotcard,.revcard,.revhead,.aviso,.faqitem{box-shadow:var(--sh-sm)}
  .car,.fmain,.mapwrap{box-shadow:var(--sh-md)}
  .ctapanel,.modal,.gate,.menupanel{box-shadow:var(--sh-lg)}
  .car,.svc,.seller,.cat,.dcard{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
  .car:hover,.dcard:hover,.cat:hover,.seller:hover{box-shadow:var(--sh-lg)}
  .svc:hover{box-shadow:var(--sh-md)}
  .btn.solid,.abtn.primary,.cotsend,.gbtn{box-shadow:var(--sh-sm);transition:transform .18s var(--ease-out),box-shadow .2s ease,background .18s ease,filter .18s ease,border-color .18s ease,color .18s ease}
  .btn.solid:hover,.abtn.primary:hover,.cotsend:hover,.gbtn:hover{box-shadow:var(--sh-md)}
  /* Transiciones de botones unificadas */
  .abtn,.cotwa2,.car .ask,.dcwa,.hdwa,.hdprofile,.clearf,.dropbtn,.rangeopt,.ghost,.seg button{transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .18s var(--ease-out),filter .18s ease}
  /* Ritmo de fondos: alterna un tono apenas más cálido en secciones pares */
  /* ===== FONDO CREMA DE LAS BANDAS — CLASE EXPLÍCITA, NO POSICIÓN =====
     Antes era `.band:nth-of-type(2n):not(.tint):not(.ctaband)`, o sea que el color de una sección dependía de
     CUÁNTAS secciones había antes. Insertar #cmpBand en el medio corrió la paridad de todas las siguientes y
     cambió el fondo de tres secciones que nadie pidió tocar; se resolvió re-anclando la alternancia desde
     #cmpBand, pero eso arreglaba ese caso y dejaba la próxima inserción rota igual.
     Ahora la banda que va en crema lo dice ella misma con `.bandcrema`. Es más verboso —hay que ponerlo a
     mano— pero deja de depender del orden: mover, insertar o borrar una sección no cambia el color de
     ninguna otra. Si se agrega una banda y se quiere alternada, se le agrega la clase.
     Ojo: NO confundir con `.band.tint`, que es otra cosa (un degradado, no este crema plano). */
  .band.bandcrema{background-color:#f1e9db}
  /* Luz de arriba en las tarjetas + sombra cálida apenas perceptible abajo (muy sutil, da volumen) */
  .car,.svc,.tcard,.seller,.venstep,.howcard,.cotcard,.revcard,.revhead,.aviso,.faqitem{background-image:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 42%,rgba(74,54,32,.06) 100%)}
  /* ===== Profundidad y textura ===== Todo lo de acá busca un matiz que se sienta, no que se vea.
     OJO: el degradado de las tarjetas claras va en la regla de arriba y NO en .car{background:...}.
     Esa regla es posterior en la hoja y sobrescribe background-image, así que un degradado puesto
     en la regla base de .car / .svc / .seller se descarta en silencio. */
  :root{--edge-lt:inset 0 1px 0 rgba(255,255,255,.9);--edge-dk:inset 0 1px 0 rgba(255,255,255,.3)}
  /* Las tarjetas de Oportunidades son oscuras (--ink): el mismo gesto, en su propio tono. Los alfas
     son mucho más bajos que en las claras porque sobre un fondo oscuro la misma opacidad se percibe
     mucho más. Los saltos de luminosidad están calibrados a mano en ~5,5% (L*) para las claras y
     para estas: si se cambia un alfa, conviene medir el delta en vez de estimarlo a ojo. */
  .dcard{background-image:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 55%,rgba(0,0,0,.08) 100%)}
  /* Filo de luz de 1px. Se SUMA a las sombras que ya existen, no las reemplaza: por eso cada regla
     repite el token --sh-* de su estado. Van después de las originales para ganarles por orden.
     No se le pone a .car / .cat / .dcard: ahí el borde de arriba es la foto, un inset se pinta
     debajo de los hijos y el filo quedaría invisible o sería una línea blanca sobre la imagen. */
  .svc,.tcard,.seller,.venstep,.howcard,.cotcard,.revcard,.revhead,.aviso,.faqitem{box-shadow:var(--sh-sm),var(--edge-lt)}
  .svc:hover{box-shadow:var(--sh-md),var(--edge-lt)}
  .seller:hover{box-shadow:var(--sh-lg),var(--edge-lt)}
  .btn.solid,.abtn.primary{box-shadow:var(--sh-sm),var(--edge-dk)}
  .btn.solid:hover,.abtn.primary:hover{box-shadow:var(--sh-md),var(--edge-dk)}
  .catmore .btn.solid,.ctaaction .btn.solid{box-shadow:var(--sh-md),var(--edge-dk)}
  .catmore .btn.solid:hover,.ctaaction .btn.solid:hover{box-shadow:var(--sh-lg),var(--edge-dk)}
  /* Marco fino sobre las fotos. Va en un pseudo-elemento y no en el box-shadow del contenedor
     porque un inset se pinta debajo del contenido y la imagen, que lo cubre todo, lo taparía. */
  .cph::after,.fmain::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
  /* Grano de las tarjetas: el mismo ruido de body::after pero más suave, porque se suma al de abajo.
     border-radius:inherit para que respete el redondeo también donde el padre no recorta (.seller). */
  /* LA TARJETA ES EL CONTENEDOR DE CONSULTA del precio: su ancho es lo que decide hasta qué tamaño puede
     crecer el número sin partirse ni desbordar (ver .cprice). Va en .car y NO en .cinfo ni en .cpricerow, y
     eso importa: container-type:inline-size aplica contain:layout, que convierte al elemento en containing
     block de sus descendientes absolutos — puesto en .cinfo, el ::after estirado de .cnlink dejaría de cubrir
     la foto y la tarjeta perdería la mitad de su área clickeable. .car ya era el containing block por su
     position:relative, así que ahí el contain no cambia nada. Verificado con la rejilla de hit-testing. */
  .car,.seller{position:relative}
  .car{container-type:inline-size}
  .svc::before,.seller::before,.car::before,.cat::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* Resplandor detrás de los íconos de servicios */
  .svc .sic{background:radial-gradient(circle at 50% 35%,#f8f1e5 0%,#eee4d4 70%)}
  /* Destacados: fondo con degradado suave + grano mínimo (se integra con las bandas vecinas) */
  #destBand{position:relative;box-shadow:none;border:none}
  #destBand .dcard{box-shadow:0 26px 52px -34px rgba(84,60,34,.5)}
  #destBand .dcard:hover{box-shadow:0 30px 58px -30px rgba(84,60,34,.6)}
  /* Números prolijos y alineados (precios, años, km) */
  /* Carruseles horizontales (controles) */
  .carnav{display:none;align-items:center;justify-content:center;gap:12px;margin-top:10px}
  .carbtn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);color:var(--brown);flex:none}
  .carbtn:active{background:var(--brown-soft)}
  .carbtn svg{width:15px;height:15px}
  .cardots{display:flex;align-items:center;gap:5px}
  .cardots i{width:5px;height:5px;border-radius:50%;background:var(--brown-2);opacity:.3;transition:opacity .2s var(--ease-out),width .2s ease}
  .cardots i.on{opacity:1;width:14px;border-radius:var(--r-pill)}
  /* ===== Celular: header como desktop, escena grande y carruseles compactos ===== */
  @media(max-width:600px){
    .hdcom{display:inline-flex}
    .hero .heroscene{left:-9%;right:-9%;bottom:120px}
    #hDest,#hCats,#hTeam{display:flex;flex-wrap:nowrap;align-items:stretch;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
    #hDest::-webkit-scrollbar,#hCats::-webkit-scrollbar,#hTeam::-webkit-scrollbar{display:none}
    #hDest>*,#hCats>*,#hTeam>*{scroll-snap-align:start;min-width:0;flex:0 0 44%;height:auto}
    .carnav{display:flex}
    #hDest .dcph{aspect-ratio:4/3}
    #hDest .dcbody{padding:9px 10px 10px;gap:2px}
    #hDest .dcname{font-size:var(--fs-5);line-height:1.16}
    #hDest .dcprice{font-size:15px}
    #hDest .dccuota{font-size:var(--fs-2)}
    #hDest .dcbna{font-size:var(--fs-1);padding:2px 6px}
    #hDest .dcwa{font-size:var(--fs-3);padding:7px;margin-top:6px;gap:5px}
    #hDest .dcwa svg{width:12px;height:12px}
    #hCats .cat{flex:0 0 clamp(214px,70%,240px);aspect-ratio:1/0.82;border-radius:13px}
    #hCats .cat .cattxt{padding:12px}
    #hCats .cat .catrow{gap:8px}
    #hCats .cat .catlabel{font-size:var(--fs-10);line-height:1.15}
    #hCats .cat .catcount{font-size:var(--fs-3);margin-top:4px}
    #hCats .cat .catgo{width:30px;height:30px;flex:none}
    #hCats .cat .catgo svg{width:14px;height:14px}
    #hCats .cat .cattag{top:10px;left:10px;font-size:var(--fs-1);padding:4px 8px;letter-spacing:.06em;line-height:1.2;max-width:calc(100% - 20px);white-space:normal}
    .hero .hmeta{font-size:clamp(5.5px,1.85vw,7.5px);letter-spacing:0;font-weight:600;opacity:.8;max-width:100%;white-space:nowrap;line-height:1.5}
    .hero .cue{font-size:clamp(6.5px,2.15vw,9.5px);letter-spacing:.05em}
    .hero .hmeta .hm-pin{width:11px;height:11px}
    #hTeam>*{flex:0 0 46%}
    #hTeam .seller{padding:12px 10px 10px;gap:6px;border-radius:14px}
    #hTeam .avatar{width:44px;height:44px;font-size:16px}
    #hTeam .sname{font-size:var(--fs-6)}
    #hTeam .srol{font-size:var(--fs-3)}
    #hTeam .stop{gap:8px}
    #hTeam .srate{font-size:var(--fs-2);gap:4px}
    #hTeam .srate svg{width:11px;height:11px}
    #hTeam .sview{display:none}
    #hTeam .swa{font-size:var(--fs-2);padding:8px 6px;gap:4px;white-space:nowrap}
    #hTeam .swa svg{width:12px;height:12px;flex:none}
    .svc,.tcard,.venstep,.cotcard{padding:18px 16px}
    .svc{padding:14px 12px;gap:9px}
    .svc .sic{width:36px;height:36px;border-radius:9px}
    .svc .sic svg{width:19px;height:19px}
    .svc h3,.svc h4{font-size:var(--fs-8)}
    .svc p{font-size:var(--fs-5);line-height:1.45}
    .svc .more{font-size:var(--fs-4);gap:5px;margin-top:4px}
    .svc .more svg{width:12px;height:12px;flex:none}
    .catmore .btn.solid{padding:14px 24px;font-size:var(--fs-7)}
  }
  @media(max-width:380px){
    #hTeam>*{flex:0 0 54%}
    #hTeam .seller{padding:11px 8px 9px}
    #hTeam .swa{padding:8px 4px}
  }
  .car .price,.fprice,.dcprice,.dccuota,.fchip .v,.car .meta,.hmeta,.revscore .num,.counter,.pdata div b{font-variant-numeric:tabular-nums}

  /* ===== LEADS EN EL PANEL: el origen y las fotos ======================================================
     Un lead de cotizador trae el vehículo, sus datos y hasta 5 fotos; uno de comunidad, un mail y qué busca.
     La fila los distingue con una pastilla de origen para poder barrerlos con la vista. */
  .leadrow .rt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
  /* TODOS ESTOS SELECTORES LLEVAN `.arow .rt` ADELANTE Y NO ES DECORATIVO: existe una regla previa
     `.arow .rt span{display:block;color:var(--soft);font-size:var(--fs-5)}` con especificidad 0-2-1, que le
     gana a `.leadorig.cot` (0-2-0). Sin el prefijo, la pastilla del cotizador quedaba con el texto en --soft
     sobre el marrón: contraste 1,20 medido, o sea ilegible. Es la misma trampa que .abtn.vsolomovil. */
  .arow .rt .leadorig{display:inline-flex;align-items:center;font-family:"Archivo";font-weight:700;
    font-size:var(--fs-4);letter-spacing:.04em;text-transform:uppercase;color:var(--soft);background:var(--paper);
    border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px}
  .arow .rt .leadorig.cot{color:#fff;background:var(--brown);border-color:var(--brown)}
  .arow .rt .leadveh{display:block;font-family:"Archivo";font-weight:700;font-size:var(--fs-7);color:var(--ink)}
  .arow .rt .leadnotas{display:block;font-size:var(--fs-6);color:var(--soft);font-style:italic;overflow-wrap:anywhere}
  .leadfotos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .leadfotos a{display:block;width:56px;height:56px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
  .leadfotos img{width:100%;height:100%;object-fit:cover;display:block}
  /* "Sin contacto" cuando el lead no tiene ni WhatsApp ni mail. Va en el lugar donde iría el botón, para que se
     lea como "acá no hay acción y por esto" y no como un hueco.
     CONTRASTE MEDIDO: --soft sobre --paper (el fondo de .arow) da 4,90, arriba del 4,5 de AA. NO se atenúa con
     opacity ni con un color más claro —es el antipatrón más roto de este proyecto— y la jerarquía la da que no
     tenga el marco de botón que tienen sus vecinos. Si alguien lo quiere más presente, --brown da 5,90.
     Y NO ES UN .abtn a propósito: parecer un botón que no hace nada es exactamente el problema que vino a
     resolver. Es texto. */
  .leadsintel{flex:none;font-size:var(--fs-5);color:var(--soft);font-style:italic;white-space:nowrap}