/* ═══════════════════════════════════════════════════════════════
   Comerciautos HG SAS — estilos del sitio público
   Sacados de docs/maquetas/VISTA-COMPUTADOR.html (escritorio) y
   adaptados a celular. Los colores viven en tokens.css.

   Hojas del sitio: tokens.css + sitio.css (máximo 3 en total).
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
p{margin:0}
a{text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit; padding:0}
fieldset{margin:0; border:0; min-width:0}
[hidden]{display:none !important}

.saltar{position:absolute; left:12px; top:-60px; z-index:100; background:var(--i); color:#fff;
  padding:10px 16px; border-radius:var(--rad-s); font-weight:700}
.saltar:focus{top:12px}

.wrap{width:1240px; max-width:calc(100% - 32px); margin:0 auto}
@media (min-width:720px){ .wrap{max-width:calc(100% - 64px)} }

.sec-h{margin-bottom:24px}
.sec-h h1{font-size:26px; letter-spacing:-.025em}
.sec-h p{color:var(--i-mut); margin-top:8px; max-width:64ch; font-size:16px}
@media (min-width:720px){ .sec-h{margin-bottom:28px} .sec-h h1{font-size:33px} }

/* ── Barra superior ───────────────────────────────────────────── */
.top{background:var(--i); color:#e9e3da; font-size:13px}
.top .in{display:flex; align-items:center; gap:18px; min-height:38px}
.top .it{display:flex; align-items:center; gap:7px; white-space:nowrap}
.top svg{width:14px; height:14px; flex:0 0 14px; color:var(--o)}
.top a{color:#e9e3da}
.top .sp{margin-left:auto; display:flex; gap:6px; align-items:center}
.top .soc{width:26px; height:26px; display:grid; place-items:center; border-radius:5px;
  background:rgba(255,255,255,.09); color:#fff}
.top .soc:hover{background:var(--o); color:var(--i)}
.top .soc svg{color:currentColor}
@media (max-width:899px){ .top .it-dir,.top .it-hor{display:none} }
@media (max-width:539px){ .top .it:nth-child(4){display:none} }   /* WhatsApp ya está en la barra fija */
@media (min-width:900px){ .top .in{gap:22px} }

/* ── Encabezado ───────────────────────────────────────────────── */
.hd{background:#fff; border-bottom:1px solid var(--ln); position:relative; z-index:20}
.hd .in{display:flex; align-items:center; flex-wrap:wrap; gap:6px 20px; padding:10px 0}
.lg img{height:52px; width:auto}            /* logo más grande: pedido de Miguel, 28-sep-2026 */
.nv{display:flex; flex-wrap:wrap; gap:2px; width:calc(100% + 16px); margin:0 -8px}
.nv a{padding:7px 8px; border-radius:var(--rad-s); font-weight:600; font-size:14.5px;
  color:var(--i); white-space:nowrap; position:relative}
.nv a:hover{background:var(--pp); text-decoration:none}
.nv a.on{color:var(--o-ink); background:var(--o-tint)}
.hd .rt{display:none}
@media (min-width:900px){
  .hd .in{flex-wrap:nowrap; gap:28px; height:84px; padding:0}
  .lg img{height:56px}
  .nv{width:auto; margin:0; overflow:visible}
  .nv a{padding:9px 12px; font-size:15px}
  .nv a.on::after{content:''; position:absolute; left:12px; right:12px; bottom:-22px; height:3px;
    background:var(--o); border-radius:3px 3px 0 0}
  .hd .rt{margin-left:auto; display:flex; align-items:center; gap:12px}
}
@media (min-width:900px) and (max-width:1199px){ .hd .rt .bt-gh{display:none} }
@media (min-width:1200px){
  .hd .in{height:92px; gap:34px}
  .lg img{height:66px}
  .nv a{padding:9px 14px}
  .nv a.on::after{left:14px; right:14px; bottom:-26px}
}

/* ── Migas ────────────────────────────────────────────────────── */
.bc{background:#fff; border-bottom:1px solid var(--ln); font-size:13.5px}
.bc ol{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; min-height:42px; padding:8px 0;
  color:var(--i-mut)}
.bc li{display:flex; gap:8px; align-items:center}
.bc li + li::before{content:'›'; color:var(--i-faint)}
.bc a{color:var(--i-mut)}
.bc .cur{color:var(--i); font-weight:600}

/* ── Botones ──────────────────────────────────────────────────── */
.bt{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--rad-s); font-weight:700; font-size:15px;
  line-height:1.2; border:1.5px solid transparent; white-space:nowrap;
  transition:transform .12s ease, background .12s ease}
.bt:hover{text-decoration:none; transform:translateY(-1px)}
.bt svg{width:17px; height:17px; flex:0 0 17px}
.bt-o{background:var(--o); color:var(--i)}                /* naranja de marca + texto oscuro */
.bt-o:hover{background:#ffa04e}
.bt-cta{background:var(--o-cta); color:#fff}               /* naranja oscuro + texto blanco */
.bt-cta:hover{background:#953f03}
.bt-gh{border-color:var(--ln-s); color:var(--i); background:#fff}
.bt-gh:hover{border-color:var(--o-cta); color:var(--o-ink); background:var(--o-tint)}
.bt-lg{padding:14px 24px; font-size:16px}
.bt-sm{padding:8px 13px; font-size:14px}
.bt-blk{width:100%}
.bs{display:flex; gap:11px; flex-wrap:wrap; margin-top:18px}
@media (prefers-reduced-motion:reduce){ .bt,.vc{transition:none} .bt:hover,.vc:hover{transform:none} }

/* ── Pastillas ────────────────────────────────────────────────── */
.bdg{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
  font:700 11.5px/1.35 var(--fuente-titulo); letter-spacing:.02em; border:1px solid transparent;
  white-space:nowrap}
.bdg svg{width:12px; height:12px}
.bdg-ok{background:var(--ok-t); color:var(--ok); border-color:var(--ok-b)}
.bdg-new{background:var(--o-tint); color:var(--o-ink); border-color:var(--o-ln)}
.bdg-n{background:#efeae3; color:var(--i-mut); border-color:var(--ln)}

/* ── Campos ───────────────────────────────────────────────────── */
.ctl{font:inherit; font-size:14.5px; color:var(--i); width:100%; height:40px;
  border:1.5px solid var(--ln-s); border-radius:var(--rad-s); background-color:#fff; padding:0 10px}
.ctl::placeholder{color:var(--i-mut); opacity:1}
.ctl:focus-visible{outline:3px solid var(--o-cta); outline-offset:1px; border-radius:var(--rad-s)}
select.ctl{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6259' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:14px}

/* casilla: input real, dibujo propio */
.chk{position:relative; display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14.5px; cursor:pointer}
.chk input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.chk .box{width:17px; height:17px; flex:0 0 17px; border:1.5px solid var(--ln-s);
  border-radius:3px; background:#fff; display:grid; place-items:center}
.chk .box svg{width:11px; height:11px; color:#fff; opacity:0}
.chk input:checked + .box{background:var(--o-cta); border-color:var(--o-cta)}
.chk input:checked + .box svg{opacity:1}
.chk input:focus-visible + .box{outline:3px solid var(--o-cta); outline-offset:2px}

/* ── Catálogo: encabezado ─────────────────────────────────────── */
/* Naranja con la regla de siempre: --o solo con texto oscuro o como adorno,
   --o-hero sobre fondo oscuro, --o-cta con texto blanco */
.pag-cat{padding:26px 0 56px}
/* Encabezado claro: blanco que se vuelve naranja suave, barra naranja a la
   izquierda, un carro grande de adorno y tres datos en pastillas */
.cat-h{position:relative; overflow:hidden; border-radius:12px; padding:24px 20px 24px 26px;
  background:linear-gradient(115deg, #fff 0%, #fff 45%, var(--o-tint) 100%);
  border:1px solid var(--o-ln); box-shadow:0 10px 30px rgba(123,58,5,.10)}
.cat-h::before{content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--o)}
.cat-h > *{position:relative}
.cat-h .cat-h-fondo{position:absolute; right:-40px; bottom:-70px; width:300px; color:var(--o); opacity:.13; pointer-events:none}
.cat-h .cat-h-fondo svg{width:100%; height:auto}
.cat-h h1{color:var(--i)}
.cat-h h1 em{font-style:normal; color:var(--o-ink)}
.cat-h p{color:var(--i-mut)}
.cat-h-datos{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.cat-h-datos li{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--o-ln); color:var(--i); font-size:13.5px; font-weight:600}
.cat-h-datos li:first-child{background:var(--o); border-color:var(--o); color:var(--i)}   /* naranja con texto oscuro */
.cat-h-datos svg{width:15px; height:15px; color:var(--o-ink)}
.cat-h-datos li:first-child svg{color:var(--i)}
.cat-h-datos b{font-family:var(--fuente-titulo); font-size:15px}
@media (min-width:720px){
  .cat-h{border-radius:18px; padding:32px 36px 30px 40px}
  .cat-h .cat-h-fondo{width:420px; right:-30px; bottom:-110px}
}

/* ── Catálogo: filtros ────────────────────────────────────────── */
.cat{display:grid; grid-template-columns:1fr; gap:22px; align-items:start}
.fil{background:#fff; border:1px solid var(--ln); border-top:4px solid var(--o); border-radius:var(--rad); overflow:hidden}
.fil .hd2{padding:14px 16px; border-bottom:1px solid var(--o-ln); display:flex; background:var(--o-tint);
  justify-content:space-between; align-items:center}
.fil .hd2 h2{font-size:15px; color:var(--o-ink)}
.fil .hd2 a{font-size:13.5px; font-weight:600}
.fg{padding:15px 16px; border-bottom:1px solid var(--ln)}
.fg:last-child{border-bottom:0}
.fg legend{float:left; width:100%; padding:0; margin-bottom:10px; display:flex; align-items:center; gap:8px;
  font:700 12px/1 var(--fuente-titulo); letter-spacing:.09em; text-transform:uppercase; color:var(--i-mut)}
.fg legend::before{content:''; width:4px; height:13px; border-radius:2px; background:var(--o)}
.fg legend + *{clear:both}
.fg .two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fg .buscar{display:none; margin-bottom:6px}
.js .fg .buscar{display:block}
.fg .sin{font-size:13.5px; color:var(--i-mut); padding:5px 0}
.more{font-size:13.5px; font-weight:600; color:var(--o-ink); margin-top:6px;
  display:inline-flex; align-items:center; gap:5px; padding:4px 0}
.more svg{width:12px; height:12px; transition:transform .15s}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}
.more:hover{text-decoration:underline}

/* Sin JavaScript se ven todas (con scroll); con JavaScript, las primeras + las marcadas */
html:not(.js) .ops[data-visibles="5"]{max-height:200px; overflow:auto}
html:not(.js) .more{display:none}
.js .ops:not(.abierta):not(.buscando) .extra:not(:has(input:checked)){display:none}

/* Rango de precio: dos <input type=range> encimados */
.rng{position:relative; height:24px; margin:4px 2px 8px}
.rng::before,.rng::after{content:''; position:absolute; top:10px; height:4px; border-radius:3px}
.rng::before{left:0; right:0; background:var(--ln)}
.rng::after{left:var(--a,0%); right:calc(100% - var(--b,100%)); background:var(--o-cta)}
.rng input{position:absolute; inset:0; z-index:1; width:100%; height:24px; margin:0;
  background:none; pointer-events:none; -webkit-appearance:none; appearance:none}
.rng input::-webkit-slider-runnable-track{height:24px; background:none}
.rng input::-moz-range-track{background:none}
.rng input::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; cursor:pointer;
  width:20px; height:20px; margin-top:2px; border-radius:50%; background:#fff;
  border:3px solid var(--o-cta); box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rng input::-moz-range-thumb{pointer-events:auto; cursor:pointer; width:14px; height:14px;
  border-radius:50%; background:#fff; border:3px solid var(--o-cta); box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rng input:focus-visible{outline:none}
.rng input:focus-visible::-webkit-slider-thumb{outline:3px solid var(--o-cta); outline-offset:2px}
.rng input:focus-visible::-moz-range-thumb{outline:3px solid var(--o-cta); outline-offset:2px}
.rv{display:flex; justify-content:space-between; gap:8px; font-size:13px; color:var(--i-mut)}

/* En celular el panel se abre con un botón (solo si hay JavaScript) */
.fil-abrir{display:none; margin-bottom:14px}
.fil-abrir svg{width:16px; height:16px}
@media (max-width:899px){
  .js .fil-abrir{display:inline-flex}
  .js .fil{display:none}
  .js .fil.abierta{display:block}
}
@media (min-width:900px){
  .cat{grid-template-columns:268px 1fr; gap:26px}
}

/* ── Catálogo: barra de resultados, pastillas, paginación ─────── */
.res{min-width:0}
.res-in{transition:opacity .15s}
#resultados[aria-busy="true"] .res-in{opacity:.5}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--o-tint);
  color:var(--o-ink); border:1px solid var(--o-ln); border-radius:999px; padding:6px 12px;
  font-size:13.5px; font-weight:600}
.chip svg{width:11px; height:11px}
.chip-limpiar{background:#fff; border-color:var(--ln-s); color:var(--i-mut)}
.tb{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; background:#fff;
  border:1px solid var(--ln); border-left:4px solid var(--o); border-radius:var(--rad); padding:10px 14px; margin-bottom:18px}
.tb .cn{font-size:14px; color:var(--i-mut)}
.tb .cn b{color:var(--o-ink); font-size:15px}
.tb .rt2{margin-left:auto; display:flex; align-items:center; gap:10px}
.tb .sel{height:38px; width:auto; font-size:14px}
.pag{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:34px; align-items:center}
.pag a,.pag span{min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:0 12px; border:1.5px solid var(--ln-s); border-radius:var(--rad-s); background:#fff;
  font-size:14.5px; font-weight:600; color:var(--i)}
.pag a:hover{border-color:var(--o-cta); text-decoration:none}
.pag svg{width:15px; height:15px}
.pag .on{background:var(--o-cta); border-color:var(--o-cta); color:#fff}
.pag .gap{border:0; background:none; min-width:0; padding:0 2px}
.vacio{background:#fff; border:1px solid var(--ln); border-radius:var(--rad); padding:32px 24px; text-align:center}
.vacio h3{font-size:19px}
.vacio p{color:var(--i-mut); margin:10px auto 0; max-width:52ch}
.vacio .bs{justify-content:center}

/* ── Tarjeta de vehículo ──────────────────────────────────────── */
.vc{background:var(--card); border:1px solid var(--ln); border-radius:var(--rad); overflow:hidden;
  display:flex; flex-direction:column; position:relative; box-shadow:var(--sh);
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease}
.vc:hover{box-shadow:var(--sh-h); transform:translateY(-3px); border-color:var(--o)}
/* Línea naranja bajo la foto: une la tarjeta con el resto del sitio */
.vc .ph::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--o); z-index:2}
.vc:focus-within{border-color:var(--o-cta)}
.vc .ph{position:relative; aspect-ratio:4/3; background:#ddd6cc; overflow:hidden}
.vc .ph img{width:100%; height:100%; object-fit:cover}
.vc .ph .bdg{position:absolute; top:10px; left:10px; z-index:3; box-shadow:0 1px 3px rgba(0,0,0,.18)}
.vc .cnt{position:absolute; right:10px; bottom:10px; z-index:3; display:flex; align-items:center; gap:5px;
  background:rgba(20,16,12,.82); color:#fff; padding:4px 8px; border-radius:999px;
  font:700 11.5px/1 var(--fuente-titulo)}
.vc .cnt svg{width:12px; height:12px}
.vc .fav{position:absolute; right:10px; top:10px; z-index:3; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.93); display:grid; place-items:center; color:var(--i-mut)}
.vc .fav svg{width:16px; height:16px}
.vc .bd{padding:14px 15px 15px; display:flex; flex-direction:column; flex:1}
.vc h3{font-size:16px; line-height:1.28}
.vc h3 a{color:var(--i)}
.vc h3 a::after{content:''; position:absolute; inset:0; z-index:2}
.vc h3 a:focus-visible{outline:none}
.vc .ver{font-size:13px; color:var(--i-mut); margin-top:3px}
.vc .pr{font:800 21px/1 var(--fuente-titulo); color:var(--o-ink); margin-top:11px; letter-spacing:-.02em}
.vc .sp{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:11px; font-size:13px; color:var(--i-mut)}
.vc .sp li{display:flex; align-items:center; gap:5px}
.vc .sp svg{width:13px; height:13px; color:var(--i-faint)}
.vc .bd > :nth-last-child(2){margin-bottom:14px}      /* aire antes de los botones */
.vc .act{display:flex; gap:8px; margin-top:auto; padding-top:13px; border-top:1px solid var(--ln)}
.vc .act .bt{flex:1; position:relative; z-index:3; padding:10px 12px}

/* ── Ficha: encabezado y estructura ───────────────────────────── */
.pag-fic{padding:22px 0 56px}
.fic-h{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px; margin-bottom:18px}
.fic-h .bdgs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:9px}
.fic-h h1{font-size:25px; letter-spacing:-.022em}
.fic-h .sub{color:var(--i-mut); margin-top:6px; font-size:15.5px}
.fic-acc{margin-left:auto; display:flex; gap:9px}
.fic{display:grid; grid-template-columns:minmax(0,1fr); gap:24px;
  grid-template-areas:"gal" "panel" "info"}
.gal{grid-area:gal; min-width:0}
.panel{grid-area:panel}
.fic-info{grid-area:info; min-width:0}
.fic-info > h2{font-size:20px; margin:32px 0 14px}
.fic-info > h2:first-child{margin-top:0}
@media (min-width:720px){ .fic-h h1{font-size:31px} }
@media (min-width:900px){
  .fic{grid-template-columns:minmax(0,1fr) 340px; column-gap:30px; row-gap:34px;
    grid-template-areas:"gal panel" "info panel"}
  .panel{align-self:start; position:sticky; top:16px}
}
@media (min-width:1200px){ .fic{grid-template-columns:minmax(0,1fr) 360px} }

/* ── Ficha: galería ───────────────────────────────────────────── */
.gal-vis{position:relative; border-radius:var(--rad); overflow:hidden; border:1px solid var(--ln); background:#ddd6cc}
.gal-tira{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; aspect-ratio:4/3; overscroll-behavior-x:contain}
.gal-tira::-webkit-scrollbar{display:none}
.gal-tira:focus-visible{outline:3px solid var(--o-cta); outline-offset:-3px}
.gal-f{flex:0 0 100%; scroll-snap-align:start}
.gal-f a,.gal-f picture{display:block; height:100%}
.gal-f img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.gal-vis .cnt{position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:6px;
  background:rgba(20,16,12,.82); color:#fff; padding:5px 10px; border-radius:999px;
  font:700 12.5px/1 var(--fuente-titulo); pointer-events:none}
.gal-vis .cnt svg{width:13px; height:13px}
.gal-btn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--i); display:grid; place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.gal-btn:hover{background:#fff}
.gal-btn:disabled{opacity:0; pointer-events:none}
.gal-btn svg{width:20px; height:20px}
.gal-ant{left:12px}
.gal-sig{right:12px}
@media (hover:none){ .gal-vis .gal-btn{display:none} }        /* en celular se desliza con el dedo */
.gal-th{display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px}
.gal-th li{flex:0 0 84px}
.gal-th a{display:block; position:relative; aspect-ratio:4/3; border-radius:var(--rad-s); overflow:hidden;
  border:1px solid var(--ln); background:#ddd6cc}
.gal-th img{width:100%; height:100%; object-fit:cover}
.gal-th a.on{outline:2.5px solid var(--o-cta); outline-offset:-2.5px}
.gal-th .lb{position:absolute; left:0; right:0; bottom:0; padding:3px 4px; background:rgba(20,16,12,.74);
  color:#fff; font:700 9.5px/1.25 var(--fuente-titulo); letter-spacing:.04em; text-transform:uppercase;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:720px){
  .gal-th{display:grid; grid-template-columns:repeat(8,1fr); overflow:visible; padding-bottom:0}
}

/* visor en grande (<dialog>) */
.visor{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:rgba(14,12,10,.97); color:#fff}
.visor[open]{display:grid; place-items:center}
.visor::backdrop{background:rgba(0,0,0,.7)}
.visor picture{display:contents}
.visor img{max-width:100%; max-height:calc(100dvh - 90px); width:auto; height:auto; object-fit:contain}
.visor-n{position:absolute; left:0; right:0; bottom:18px; text-align:center; font-size:14px; color:#d8d0c5}
.visor-x{position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center}
.visor-x:hover{background:rgba(255,255,255,.22)}
.visor-x svg{width:20px; height:20px}
.visor .gal-btn{background:rgba(255,255,255,.12); color:#fff}
.visor .gal-btn:hover{background:rgba(255,255,255,.22)}

/* ── Ficha: panel de compra ───────────────────────────────────── */
.panel{background:#fff; border:1px solid var(--ln); border-radius:var(--rad); box-shadow:var(--sh); padding:20px}
.panel .pr{font:800 30px/1 var(--fuente-titulo); color:var(--o-ink); letter-spacing:-.025em}
.panel .pr small{display:block; font:500 13px/1.4 var(--fuente-texto); color:var(--i-mut); margin-top:6px; letter-spacing:0}
.panel .ck{margin:16px 0 18px; display:flex; flex-direction:column; gap:9px}
.panel .ck li{display:flex; gap:9px; font-size:14.5px; align-items:flex-start}
.panel .ck svg{width:16px; height:16px; flex:0 0 16px; color:var(--ok); margin-top:3px}
.panel .bt{margin-bottom:9px}
.panel .ad{margin-top:8px; padding-top:15px; border-top:1px solid var(--ln); font-size:13.5px; color:var(--i-mut)}
.panel .ad b{display:block; color:var(--i); font:700 14px/1.3 var(--fuente-titulo); margin-bottom:6px}
.panel .ad p + p{margin-top:8px}

/* ── Ficha: técnica, kilometraje, equipamiento, legal, pasos ──── */
.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0; background:var(--ln);
  border:1px solid var(--ln); border-radius:var(--rad); overflow:hidden}
.specs div{background:#fff; padding:12px 14px}
.specs dt{font:700 11px/1.2 var(--fuente-titulo); letter-spacing:.08em; text-transform:uppercase;
  color:var(--i-mut); margin-bottom:5px}
.specs dd{margin:0; font-size:15px; font-weight:600}
.specs div:last-child:nth-child(odd){grid-column:span 2}
@media (min-width:720px){
  .specs{grid-template-columns:repeat(4,1fr)}
  .specs div:last-child:nth-child(odd){grid-column:auto}
  .specs div:last-child:nth-child(4n+3){grid-column:span 2}
  .specs div:last-child:nth-child(4n+2){grid-column:span 3}
  .specs div:last-child:nth-child(4n+1){grid-column:span 4}
}
.eq{display:grid; grid-template-columns:repeat(2,1fr); gap:9px 18px}
.eq li{display:flex; gap:8px; font-size:14.5px; align-items:center}
.eq svg{width:15px; height:15px; flex:0 0 15px; color:var(--ok)}
.eq li.no{color:var(--i-mut)}
.eq li.no svg{color:var(--i-faint)}
@media (min-width:720px){ .eq{grid-template-columns:repeat(3,1fr)} }
.legal{margin-top:32px; background:var(--ok-t); border:1px solid var(--ok-b); border-radius:var(--rad); padding:18px 20px}
.legal h2{font-size:17px; display:flex; align-items:center; gap:9px}
.legal h2 svg{width:19px; height:19px; color:var(--ok)}
.legal ul{display:grid; grid-template-columns:1fr; gap:9px 18px; margin-top:14px}
.legal li{display:flex; gap:8px; font-size:14.5px; align-items:center}
.legal svg.c{width:15px; height:15px; flex:0 0 15px; color:var(--ok)}
.legal li.no{color:var(--i-mut)}
.legal .nota{margin-top:14px; font-size:13.5px; color:var(--i-mut)}
@media (min-width:540px){ .legal ul{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .legal ul{grid-template-columns:repeat(4,auto); justify-content:start} }
.steps{display:grid; grid-template-columns:1fr; gap:22px 20px; counter-reset:paso; padding-top:10px}
.st{background:#fff; border:1px solid var(--ln); border-radius:var(--rad); padding:22px 20px 20px;
  position:relative; box-shadow:var(--sh)}
.st::before{counter-increment:paso; content:counter(paso); position:absolute; top:-14px; left:20px;
  width:30px; height:30px; border-radius:50%; background:var(--o); color:var(--i);
  display:grid; place-items:center; font:800 15px/1 var(--fuente-titulo); border:3px solid var(--pp)}
.st h3{font-size:16.5px; margin-top:4px}
.st p{color:var(--i-mut); margin-top:8px; font-size:14.5px}
@media (min-width:720px){ .steps{grid-template-columns:repeat(3,1fr)} }

/* ── Secciones (inicio, contacto, páginas de texto) ───────────── */
.sec{padding:44px 0}
.sec-b{background:#fff; border-top:1px solid var(--ln); border-bottom:1px solid var(--ln)}
.sec.sin-arriba{padding-top:0}
.pag-sec{padding:30px 0 56px}
.sec-h .kick{display:block; margin-bottom:10px; font:700 12px/1 var(--fuente-titulo); letter-spacing:.14em;
  text-transform:uppercase; color:var(--o-ink)}
.sec-h h2{font-size:24px; letter-spacing:-.025em}
.sec-h.row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px}
.bt-wa{background:var(--wa); color:#fff}
.bt-wa:hover{background:#0c6733}
@media (min-width:720px){ .sec{padding:56px 0} .pag-sec{padding:36px 0 60px} .sec-h h2{font-size:29px} }

/* ── Portada del inicio: banner y título en recuadros ─────────── */
/* Los dos recuadros tienen el mismo ancho y las mismas esquinas: se leen
   como una sola pieza y el paso del banner al título queda ordenado. */
.portada{padding:16px 0 28px}
@media (min-width:720px){ .portada{padding:26px 0 40px} }

/* Carrusel. Las imágenes traen el texto dibujado: se muestran enteras
   (8:3), nunca recortadas. */
.banner{position:relative}
.banner-v{position:relative; aspect-ratio:8/3; overflow:hidden; border-radius:12px; background:#d9d0c4;
  border:1px solid rgba(28,23,18,.14); box-shadow:0 1px 2px rgba(28,23,18,.06),0 14px 34px rgba(28,23,18,.16);
  isolation:isolate}
.banner-s{position:absolute; inset:0}
.banner-s:not(.on){display:none}                    /* sin JavaScript: solo el primero */
.banner.listo .banner-s{display:block; opacity:0; transition:opacity .8s ease}
.banner.listo .banner-s.on{opacity:1; z-index:1}
.banner-s a,.banner-s picture{display:block; width:100%; height:100%}
.banner-s img{width:100%; height:100%; object-fit:cover}
.banner-s a:focus-visible{outline:3px solid #fff; outline-offset:-6px; border-radius:10px}
/* Controles debajo del recuadro: ‹ puntos › y pausa. No tapan el texto de los banners */
.banner-ctl{display:flex; justify-content:center; align-items:center; gap:6px; padding:12px 0 0}
.banner-ctl button{width:30px; height:30px; display:grid; place-items:center; color:var(--i-mut); border-radius:999px}
.banner-ctl button:hover{color:var(--i); background:rgba(28,23,18,.06)}
.banner-ctl .banner-fl{width:34px; height:34px; border:1.5px solid var(--ln-s); background:#fff; color:var(--i);
  box-shadow:var(--sh); transition:border-color .15s ease, color .15s ease}
.banner-ctl .banner-fl:hover{border-color:var(--o-cta); color:var(--o-ink); background:var(--o-tint)}
.banner-fl svg{width:17px; height:17px}
.banner-pp{margin-left:4px}
.banner-pp svg{width:13px; height:13px}
.banner-pp .i-play,.banner-pp.pausado .i-pausa{display:none}
.banner-pp.pausado .i-play{display:block}
.banner-dots{display:flex}
.banner-dots button::before{content:''; width:9px; height:9px; border-radius:5px; background:var(--i-faint);
  transition:width .3s ease, background .3s ease}
.banner-dots button[aria-current]::before{width:24px; background:var(--o-cta)}
@media (min-width:720px){ .banner-v{border-radius:18px} .banner-s a:focus-visible{border-radius:14px} }
@media (prefers-reduced-motion:reduce){ .banner.listo .banner-s,.banner-dots button::before{transition:none} }

/* ── Título y buscador del inicio: recuadro oscuro debajo del banner ─ */
.hero{position:relative; margin-top:14px; background:var(--i); color:#fff; border-radius:12px; padding:24px 18px 22px;
  overflow:hidden; box-shadow:0 14px 34px rgba(28,23,18,.18)}
.hero::before{content:''; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border-radius:50%;
  background:rgba(246,129,34,.13); pointer-events:none}
.hero::after{content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--o)}
.hero .in{position:relative; display:grid; gap:26px}
.hero h1{font-size:27px; color:#fff; line-height:1.1; letter-spacing:-.012em; text-transform:uppercase}
.hero h1 em{font-style:normal; color:var(--o-hero)}
.hero .sub{margin-top:14px; font-size:16.5px; color:#e6ded4; max-width:50ch}
/* En celular las 4 cifras van en una fila: así el buscador no queda dos pantallas abajo */
.hstats{display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; gap:12px; margin-top:22px}
.hstats li{display:flex; flex-direction:column}
.hstats b{font:800 21px/1 var(--fuente-titulo); color:var(--o); letter-spacing:-.02em; white-space:nowrap}
.hstats span{font-size:12px; color:#d3cabe; margin-top:6px; max-width:11ch; line-height:1.35}
@media (min-width:540px){ .hstats{justify-content:start; gap:18px 30px} .hstats b{font-size:26px} .hstats span{font-size:13px; max-width:15ch} }
.rate{display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:22px; font-size:14.5px; color:#e6ded4}
.rate a{color:#e6ded4; text-decoration:underline; text-decoration-color:rgba(230,222,212,.45); text-underline-offset:3px}
.rate a:hover{color:#fff}
.rate b{color:#fff}
.stars{display:flex; gap:2px}
.stars svg{width:16px; height:16px; color:var(--o)}
.stars svg.off{color:rgba(255,255,255,.34)}
.srch{background:#fff; border-radius:12px; padding:20px; box-shadow:0 22px 54px rgba(0,0,0,.4); color:var(--i)}
.srch .ttl{font:700 12px/1 var(--fuente-titulo); letter-spacing:.15em; text-transform:uppercase; color:var(--i-mut); margin-bottom:16px}
.srch .fld{display:flex; flex-direction:column; gap:5px; margin-bottom:13px; min-width:0}
.srch label{font:700 11px/1 var(--fuente-titulo); letter-spacing:.08em; text-transform:uppercase; color:var(--i-mut)}
.srch .ctl{height:46px; font-size:16px}     /* 16 px: en iPhone, menos hace zoom al tocar */
.srch .row2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.srch .go{width:100%; margin-top:5px; padding:14px 18px; font-size:15.5px; letter-spacing:.03em; text-transform:uppercase}
@media (min-width:900px){
  .hero .in{grid-template-columns:1fr 360px; gap:36px; align-items:center}
  .hero .sub{margin-top:16px; font-size:17px}
  .hstats{display:flex; flex-wrap:wrap; gap:18px 32px; margin-top:26px}
  .hstats b{font-size:28px}
  .srch{padding:24px}
  .srch .ctl{font-size:15px}
}
@media (min-width:720px){ .hero{margin-top:18px; padding:32px 30px 30px; border-radius:18px} .hero h1{font-size:34px} }
@media (min-width:900px){ .hero{padding:38px 38px 36px} }
@media (min-width:1200px){
  .hero{padding:44px 48px 42px}
  .hero .in{grid-template-columns:1fr 440px; gap:52px}
  .hero h1{font-size:44px}
  .hstats{gap:18px 38px}
  .hstats b{font-size:30px}
}

/* ── Sellos ───────────────────────────────────────────────────── */
.seals{background:#fff; border-bottom:1px solid var(--ln)}
.seals .in{display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; padding:20px 0}
.seal{display:flex; align-items:center; gap:11px; min-width:0}
.seal .ic{width:40px; height:40px; flex:0 0 40px; border-radius:9px; background:var(--o-tint); color:var(--o-ink);
  display:grid; place-items:center}
.seal .ic svg{width:21px; height:21px}
.seal b{display:block; font:700 14.5px/1.25 var(--fuente-titulo)}
.seal span{display:block; font-size:13px; color:var(--i-mut); margin-top:2px; line-height:1.35}
@media (min-width:900px){ .seals .in{grid-template-columns:repeat(4,1fr); gap:20px; padding:22px 0} }

/* ── Bloques de tres (razones, servicios) ─────────────────────── */
.cards3{display:grid; grid-template-columns:1fr; gap:16px}
.cd{background:#fff; border:1px solid var(--ln); border-radius:var(--rad); padding:22px; box-shadow:var(--sh)}
.cd .ic{width:46px; height:46px; border-radius:11px; background:var(--o-tint); color:var(--o-ink);
  display:grid; place-items:center; margin-bottom:15px}
.cd .ic svg{width:23px; height:23px}
.cd h3{font-size:18px}
.cd p{color:var(--i-mut); margin-top:9px; font-size:14.5px}
@media (min-width:720px){ .cards3{grid-template-columns:repeat(3,1fr); gap:22px} .cd{padding:24px} }

/* ── Banner "vende tu carro" (I-10) ───────────────────────────── */
.cta{background:var(--i); color:#fff; border-radius:var(--rad); padding:28px 22px; display:flex; flex-direction:column;
  gap:20px; position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; right:-70px; top:-70px; width:280px; height:280px; border-radius:50%;
  background:rgba(246,129,34,.14)}
.cta .tx{position:relative}
.cta h2{color:#fff; font-size:24px}
.cta p{color:#d8d0c5; margin-top:10px; max-width:58ch; font-size:15.5px}
.cta .bs{position:relative; margin-top:0}
@media (min-width:900px){
  .cta{flex-direction:row; align-items:center; gap:34px; padding:38px 40px}
  .cta h2{font-size:29px}
  .cta .tx{flex:1}
  .cta .bs{flex-shrink:0; flex-wrap:nowrap}
}

/* ── Galería de entregas (G-10) ───────────────────────────────── */
.del{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.del img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rad-s);
  border:1px solid var(--ln); background:#e6ded3}
.del a{display:block; border-radius:var(--rad-s)}
@media (min-width:540px){ .del{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .del{grid-template-columns:repeat(6,1fr); gap:12px} .del-todas{grid-template-columns:repeat(4,1fr)} }
.del-todas + .pag{margin-top:26px}
.vacio-txt{color:var(--i-mut); font-size:16px}

/* ── Formularios públicos (contrato de CLAUDE.md) ─────────────── */
.form{background:#fff; border:1px solid var(--ln); border-radius:var(--rad); padding:20px; box-shadow:var(--sh)}
.fr{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px}
.in2{display:flex; flex-direction:column; gap:6px; min-width:0}
.in2 > label:not(.drop){font:700 12px/1.2 var(--fuente-titulo); letter-spacing:.06em; text-transform:uppercase; color:var(--i-mut)}
.in2 label i{color:var(--no); font-style:normal}
.in2 .opc{text-transform:none; letter-spacing:0; font:600 12.5px/1 var(--fuente-texto)}
.in2 .ctl{height:46px; font-size:16px}
.in2 .ta{height:auto; min-height:112px; padding:11px 12px; resize:vertical; line-height:1.5}
.ctl[aria-invalid="true"]{border-color:var(--no); background-color:#fffafa}
.err{display:flex; gap:6px; align-items:flex-start; color:var(--no); font-size:13.5px; font-weight:600; line-height:1.4}
.err svg{width:15px; height:15px; flex:0 0 15px; margin-top:2px}
.err-gen{background:var(--no-t); padding:11px 13px; border-radius:var(--rad-s); margin-bottom:16px}
.cons{position:relative; display:flex; gap:10px; align-items:flex-start; margin:18px 0 6px; font-size:13.5px;
  color:var(--i-mut); line-height:1.5; cursor:pointer}
.cons input{position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; margin:0}
.cons .box{width:19px; height:19px; flex:0 0 19px; border:1.5px solid var(--ln-s); border-radius:3px; background:#fff;
  margin-top:1px; display:grid; place-items:center}
.cons .box svg{width:12px; height:12px; color:#fff; opacity:0}
.cons input:checked + .box{background:var(--o-cta); border-color:var(--o-cta)}
.cons input:checked + .box svg{opacity:1}
.cons input:focus-visible + .box{outline:3px solid var(--o-cta); outline-offset:2px}
.cons input[aria-invalid="true"] + .box{border-color:var(--no)}
.cons a{text-decoration:underline}
.cons + .err{margin-bottom:6px}
.form .bt-lg{margin-top:14px}
.form .alt{font-size:13.5px; color:var(--i-mut); margin-top:12px; text-align:center}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (min-width:540px){ .fr{grid-template-columns:1fr 1fr} .fr.one{grid-template-columns:1fr} }
@media (min-width:720px){ .form{padding:26px} }

/* ── Contacto ─────────────────────────────────────────────────── */
.cto{display:grid; grid-template-columns:1fr; gap:28px; align-items:start}
.ok-env .ic{width:48px; height:48px; border-radius:50%; background:var(--ok-t); color:var(--ok);
  display:grid; place-items:center; margin-bottom:14px}
.ok-env .ic svg{width:24px; height:24px}
.ok-env h2{font-size:22px}
.ok-env p{color:var(--i-mut); margin-top:10px; font-size:15.5px}
.cinfo li{display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--ln); align-items:flex-start}
.cinfo li:last-child{border-bottom:0}
.cinfo .ic{width:38px; height:38px; flex:0 0 38px; border-radius:9px; background:var(--o-tint); color:var(--o-ink);
  display:grid; place-items:center}
.cinfo .ic svg{width:18px; height:18px}
.cinfo div{min-width:0; overflow-wrap:anywhere}
.cinfo b{display:block; font:700 12px/1 var(--fuente-titulo); letter-spacing:.07em; text-transform:uppercase;
  color:var(--i-mut); margin-bottom:5px}
.cinfo span,.cinfo a{font-size:15.5px}
.cinfo a{color:var(--i); font-weight:600}
.cinfo small{display:block; font-size:13px; color:var(--i-mut); margin-top:3px}
.bs2 .bt{flex:1 1 180px}
.llegar{margin-top:40px}
.llegar h2{font-size:23px}
.mapa{aspect-ratio:4/3; border-radius:var(--rad); border:1px solid var(--ln); overflow:hidden; position:relative;
  display:grid; place-items:center; align-content:center; gap:16px;
  background:repeating-linear-gradient(0deg,#e8e2d8 0 1px,transparent 1px 44px),
             repeating-linear-gradient(90deg,#e8e2d8 0 1px,transparent 1px 44px), #f2ede5}
.mapa.cargado{display:block; background:#e8e2d8}
.mapa iframe{width:100%; height:100%; border:0; display:block}
@media (min-width:720px){ .mapa{aspect-ratio:16/6} }
@media (min-width:900px){ .cto{grid-template-columns:1fr 1fr; gap:36px} }

/* ── Vende tu carro ───────────────────────────────────────────── */
.pag-sec.sin-abajo{padding-bottom:0}
.cta .kick{display:block; margin-bottom:10px; font:700 12px/1 var(--fuente-titulo); letter-spacing:.14em;
  text-transform:uppercase; color:var(--o)}                /* naranja de marca sobre oscuro: 6,9:1 */
.cta h1{color:#fff; font-size:27px}
@media (min-width:900px){ .cta h1{font-size:34px} }
.steps4{margin-top:6px}
@media (min-width:540px){ .steps4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .steps4{grid-template-columns:repeat(4,1fr)} }
.nota-pasos{margin-top:22px; color:var(--i-mut); font-size:14.5px; max-width:80ch}
.etq{font:700 12px/1.2 var(--fuente-titulo); letter-spacing:.06em; text-transform:uppercase; color:var(--i-mut)}
.etq i{color:var(--no); font-style:normal}
/* Subida de fotos: el input real va escondido detrás de su etiqueta */
.drop{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; text-align:center;
  border:2px dashed var(--ln-s); border-radius:var(--rad); padding:22px 16px; background:var(--pp); color:var(--i-mut)}
.drop:hover{border-color:var(--o-cta)}
.drop:focus-within{border-color:var(--o-cta); background:var(--o-tint); outline:3px solid var(--o-cta); outline-offset:2px}
.drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0}
.drop svg{width:28px; height:28px; color:var(--o-cta)}
.drop b{color:var(--i); font-size:15.5px}
.drop span{font-size:13.5px}
.drop:has(input[aria-invalid="true"]){border-color:var(--no)}
.drop-fotos{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.drop-fotos:empty{display:none}
.drop-fotos li{position:relative; aspect-ratio:4/3; border-radius:var(--rad-s); overflow:hidden; border:1px solid var(--ln); background:#e6ded3}
.drop-fotos img{width:100%; height:100%; object-fit:cover}
.drop-fotos .nota{grid-column:1/-1; aspect-ratio:auto; border:0; background:none; font-size:13px; color:var(--i-mut)}
.legal.docs{margin-top:0}
.legal h3{font-size:17px; display:flex; align-items:center; gap:9px}
.legal h3 svg{width:19px; height:19px; color:var(--ok)}
@media (min-width:1100px){ .legal.docs ul{grid-template-columns:repeat(2,1fr)} }
.faq-t{font-size:21px; margin:32px 0 14px; scroll-margin-top:20px}
.faq{display:flex; flex-direction:column; gap:10px}
.fq{background:#fff; border:1px solid var(--ln); border-radius:var(--rad)}
.fq[open]{border-color:var(--o-ln); box-shadow:var(--sh)}
.fq summary{display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; cursor:pointer; list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary h3{font-size:16px}
.fq summary svg{width:16px; height:16px; flex:0 0 16px; color:var(--o-cta); transition:transform .2s}
.fq[open] summary svg{transform:rotate(180deg)}
.fq p{color:var(--i-mut); padding:0 18px 17px; font-size:14.5px; max-width:82ch}
#cotizar{scroll-margin-top:10px}
@media (min-width:900px){ .fr.three{grid-template-columns:repeat(3,1fr)} }

/* ── Nosotros ─────────────────────────────────────────────────── */
.hist{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}
.hist-p{color:var(--i-mut); font-size:15.5px; margin-bottom:14px; max-width:62ch}
.hist-cifras{display:flex; flex-wrap:wrap; gap:14px 30px; margin:6px 0 4px}
.hist-cifras li{display:flex; flex-direction:column; padding-left:12px; border-left:4px solid var(--o)}
.hist-cifras b{font:800 26px/1 var(--fuente-titulo); color:var(--o-ink); letter-spacing:-.02em}
.hist-cifras span{font-size:13px; color:var(--i-mut); margin-top:5px}
.hist-foto{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--ln); box-shadow:var(--sh-h);
  aspect-ratio:4/3; background:#e6ded3}
.hist-foto::after{content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--o)}
.hist-foto picture{display:contents}
.hist-foto img{width:100%; height:100%; object-fit:cover; transform:scale(1.1)}   /* saca un letrero ajeno del borde */
@media (min-width:900px){ .hist{grid-template-columns:1.05fr .95fr; gap:44px} }
.mv{display:grid; grid-template-columns:1fr; gap:18px}
.mv .cd h2{font-size:19px}
.mv .cd p{font-size:15.5px}
@media (min-width:720px){ .mv{grid-template-columns:1fr 1fr; gap:22px} .mv.una{grid-template-columns:1fr} .mv.una .cd p{max-width:80ch} }
.sec-h-2{margin-top:44px}
.vals{display:grid; grid-template-columns:1fr; gap:12px}
.val{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--ln); border-radius:var(--rad);
  padding:16px; box-shadow:var(--sh)}
.val .ic{width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:var(--o-tint); color:var(--o-ink);
  display:grid; place-items:center}
.val .ic svg{width:20px; height:20px}
.val b{display:block; font:700 16px/1.25 var(--fuente-titulo)}
.val p{font-size:14.5px; color:var(--i-mut); margin-top:5px}
@media (min-width:640px){ .vals{grid-template-columns:repeat(2,1fr); gap:14px} }
@media (min-width:1000px){ .vals{grid-template-columns:repeat(3,1fr); gap:16px} }
.premio img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rad-s); margin-bottom:14px}
.team{display:grid; grid-template-columns:1fr; gap:12px}
.tm{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--ln); border-radius:var(--rad);
  padding:14px 16px; box-shadow:var(--sh)}
.tm .av{width:54px; height:54px; flex:0 0 54px; border-radius:50%; display:grid; place-items:center;
  background:var(--o); color:var(--i); font:800 18px/1 var(--fuente-titulo); letter-spacing:.02em}   /* naranja con texto oscuro */
.tm picture{display:contents}
.tm img{width:54px; height:54px; flex:0 0 54px; border-radius:50%; object-fit:cover}
.tm .t{min-width:0}
.tm b{display:block; font:700 15.5px/1.25 var(--fuente-titulo)}
.tm span{display:block; font-size:13.5px; color:var(--i-mut); margin-top:3px}
@media (min-width:540px){ .team{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .team{grid-template-columns:repeat(4,1fr); gap:16px} }

.hist-frase{margin:6px 0 20px; padding:14px 18px; border-left:4px solid var(--o); background:var(--o-tint);
  border-radius:0 var(--rad-s) var(--rad-s) 0; max-width:62ch}
.hist-frase p{font:700 17px/1.4 var(--fuente-titulo); color:var(--i)}
.hist-frase footer{margin-top:6px; font-size:13.5px; color:var(--o-ink); font-weight:600}
.mv .cd p + p{margin-top:10px}

/* ── Páginas de texto (política de datos) ─────────────────────── */
.wrap.angosto{width:820px}
.legal-txt h2{font-size:20px; margin:32px 0 10px}
.legal-txt p,.legal-txt li{font-size:15.5px; color:#3d352d; max-width:72ch}
.legal-txt p + p,.legal-txt ul + p{margin-top:10px}
.legal-txt ul{list-style:disc; padding-left:22px; margin:8px 0}
.legal-txt li{margin:6px 0}
.legal-txt a{text-decoration:underline}
.legal-txt ol{list-style:decimal; padding-left:24px; margin:12px 0 16px}
.legal-txt ol.lista-letras{list-style:lower-alpha}
.legal-txt ol li{margin:7px 0; padding-left:4px}
.legal-txt p{margin-top:12px}
.legal-contacto{margin-top:30px; background:#fff; border:1px solid var(--ln); border-left:4px solid var(--o);
  border-radius:var(--rad); padding:16px 20px}
.legal-contacto h2{margin:0 0 8px; font-size:17px}
.aviso-borrador{display:flex; gap:9px; align-items:center; background:#fff4d6; color:#5f511b;
  border:1px solid #ded4b0; padding:12px 14px; border-radius:var(--rad-s); font-weight:600}
.aviso-borrador svg{width:18px; height:18px; flex:0 0 18px}

/* ── 404 ──────────────────────────────────────────────────────── */
.nf{padding:72px 0 88px}
.nf h1{font-size:30px}
.nf p{color:var(--i-mut); margin-top:12px; max-width:56ch; font-size:16px}

/* ── Pie ──────────────────────────────────────────────────────── */
.ft{background:var(--i); color:#cfc7bc; padding:44px 0 0}
.ft .cols{display:grid; grid-template-columns:1fr; gap:30px; padding-bottom:32px}
.ft img{height:auto; width:180px; margin-bottom:15px}
.ft .ab{font-size:14.5px; max-width:42ch}
.ft h2{color:#fff; font-size:14px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px}
.ft li{margin-bottom:9px; font-size:14.5px}
.ft a{color:#cfc7bc}
.ft a:hover{color:var(--o)}
.ft small{font-size:12.5px; color:#a99d8f}
.ft .ct li{display:flex; gap:9px; align-items:flex-start; overflow-wrap:anywhere}
.ft .ct svg{width:15px; height:15px; flex:0 0 15px; color:var(--o); margin-top:3px}
.ft .socr{display:flex; gap:8px; margin-top:15px}
.ft .socr a{width:38px; height:38px; border-radius:7px; background:rgba(255,255,255,.09);
  display:grid; place-items:center; color:#fff}
.ft .socr a:hover{background:var(--o); color:var(--i)}
.ft .socr svg{width:17px; height:17px}
.ft .bot{border-top:1px solid rgba(255,255,255,.14); padding:18px 0; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:8px 20px; font-size:13.5px; color:#a99d8f}
.ft .bot a{color:#a99d8f}
@media (min-width:600px){ .ft .cols{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .ft{padding-top:52px} .ft .cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px} }

/* ── Favoritos, comparador y vista en lista (fase 8) ──────────── */
/* Corazón de favoritos: blanco con sombra sobre la foto; guardado = relleno naranja con
   borde naranja oscuro (el borde da el contraste 3:1 que pide un control, el relleno no) */
.vc .fav{width:40px; height:40px; background:#fff; color:var(--i); box-shadow:0 2px 10px rgba(20,16,12,.22);
  transition:transform .15s ease, box-shadow .15s ease}
.vc .fav svg{width:21px; height:21px; stroke-width:2; overflow:visible; transition:fill .15s ease}
.vc .fav:hover{transform:scale(1.08); box-shadow:0 4px 14px rgba(20,16,12,.28); color:var(--o-cta)}
.vc .fav:focus-visible{outline:3px solid var(--o-cta); outline-offset:2px}
[data-guardar="fav"][aria-pressed="true"]{color:var(--o-cta)}
[data-guardar="fav"][aria-pressed="true"] svg{fill:var(--o)}
[data-guardar="fav"].late svg{animation:latido .45s ease}
@keyframes latido{0%{transform:scale(1)} 30%{transform:scale(1.35)} 55%{transform:scale(.9)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .vc .fav,.vc .fav svg{transition:none} .vc .fav:hover{transform:none} [data-guardar="fav"].late svg{animation:none} }
.fic-acc .bt svg{transition:fill .15s ease}
.fic-acc{flex-wrap:wrap; align-items:center}
.fic-acc .bt[aria-pressed="true"]{border-color:var(--o-cta); background:var(--o-tint); color:var(--o-ink)}
.fic-ir{font-size:14px; font-weight:600; color:var(--o-ink); text-decoration:underline}
.tb .rt2{flex-wrap:wrap; justify-content:flex-end}

.vista{display:none}
.vista button{width:38px; height:36px; display:grid; place-items:center; color:var(--i-mut); background:#fff}
.vista button + button{border-left:1px solid var(--ln-s)}
.vista button[aria-pressed="true"]{background:var(--o-tint); color:var(--o-ink)}
.vista button:focus-visible{outline:3px solid var(--o-cta); outline-offset:-3px}
.vista svg{width:17px; height:17px}
/* La lista pone la foto a la izquierda: solo donde el texto conserva más de 248 px (CLAUDE.md) */
@media (min-width:720px){
  .vista{display:inline-flex; border:1px solid var(--ln-s); border-radius:var(--rad-s); overflow:hidden}
  #resultados.lista .grid-v{grid-template-columns:1fr; gap:16px}
  #resultados.lista .vc{flex-direction:row}
  #resultados.lista .vc .ph{flex:0 0 clamp(220px,36%,300px); aspect-ratio:auto; min-height:200px}
  #resultados.lista .vc .ph picture{position:absolute; inset:0}
  #resultados.lista .vc .ph::after{left:auto; top:0; width:3px; height:auto}
  #resultados.lista .vc .bd{min-width:0}
  #resultados.lista .vc .act .bt{flex:0 1 190px}
}

.aviso-g{display:flex; gap:9px; align-items:center; background:var(--o-tint); border:1px solid var(--o-ln);
  border-radius:var(--rad-s); padding:10px 14px; margin-bottom:18px; font-size:14.5px; color:var(--o-ink)}
.aviso-g svg{width:16px; height:16px; flex:0 0 16px}
.mas-g{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--i-mut)}
.vacio h2{font-size:19px}

/* Comparador: dos columnas lado a lado (también en celular) */
.cmp2{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; scroll-margin-top:12px}
.cmp-lado{background:#fff; border:1px solid var(--ln); border-top:4px solid var(--o); border-radius:var(--rad);
  box-shadow:var(--sh); padding:12px 10px; min-width:0}
.cmp-lado-t{display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:10px}
.cmp-lado-t .num{width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:var(--o); color:var(--i);
  display:grid; place-items:center; font:800 13px/1 var(--fuente-titulo)}
.cmp-elegir .ctl{margin-bottom:8px}
.cmp-lista{max-height:min(62vh,560px); overflow-y:auto; margin:0 -4px; padding:0 4px; overscroll-behavior:contain}
.cmp-lista li + li{border-top:1px solid var(--ln)}
/* En celular: foto y nombre arriba; año, km y precio debajo a todo el ancho de la columna */
.cmp-lista a{display:grid; grid-template-columns:46px 1fr; grid-template-areas:"mini b" "s s" "p p"; gap:3px 8px;
  align-items:start; padding:9px 4px; color:var(--i); border-radius:var(--rad-s)}
.cmp-lista a:hover{background:var(--o-tint); text-decoration:none}
.cmp-lista a:focus-visible{outline:3px solid var(--o-cta); outline-offset:-3px}
.cmp-lista .mini{grid-area:mini; aspect-ratio:4/3; margin-bottom:3px; border-radius:4px; overflow:hidden; background:#ddd6cc}
.cmp-lista .mini img{width:100%; height:100%; object-fit:cover}
.cmp-lista .tx{display:contents; font-size:13px; line-height:1.3}
.cmp-lista b{grid-area:b; min-width:0; font:700 13.5px/1.25 var(--fuente-titulo)}
.cmp-lista small{grid-area:s; color:var(--i-mut); font-size:12.5px}
.cmp-lista small .ver{display:none}
.cmp-lista strong{grid-area:p; white-space:nowrap; color:var(--o-ink); font:800 13.5px/1.2 var(--fuente-titulo)}
.cmp-elegir .sin{font-size:14px; color:var(--i-mut); padding:12px 4px}
.cmp-sel .ph{display:block; aspect-ratio:4/3; border-radius:var(--rad-s); overflow:hidden; background:#ddd6cc}
.cmp-sel .ph img{width:100%; height:100%; object-fit:cover}
.cmp-sel h3{font-size:15px; line-height:1.28; margin-top:10px}
.cmp-sel h3 a{color:var(--i)}
.cmp-sel .pr{font:800 18px/1.1 var(--fuente-titulo); color:var(--o-ink); margin:6px 0 10px; letter-spacing:-.02em}
.cmp-sel .bt{width:100%; justify-content:center}

.cmp-filas{margin-top:18px; background:#fff; border:1px solid var(--ln); border-radius:var(--rad); box-shadow:var(--sh)}
.cmp-cab{position:sticky; top:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 12px;
  background:var(--i); color:#fff; border-radius:var(--rad) var(--rad) 0 0; font:700 13px/1.25 var(--fuente-titulo)}
.cmp-cab span:last-child{border-left:1px solid rgba(255,255,255,.25); padding-left:10px}
.cmp-f{display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; padding:10px 12px; border-top:1px solid var(--ln)}
.cmp-f:nth-child(odd){background:#fcfaf7}
.cmp-f .et{grid-column:1 / -1; color:var(--i-mut); font:700 11px/1.3 var(--fuente-titulo); letter-spacing:.07em; text-transform:uppercase}
.cmp-f p:not(.et){font-size:15px; font-weight:600; overflow-wrap:anywhere}
.cmp-f p:last-child{border-left:1px solid var(--ln); padding-left:10px}
.cmp-f.pr p:not(.et){font:800 17px/1.2 var(--fuente-titulo); color:var(--o-ink)}
.cmp-f svg{width:14px; height:14px; vertical-align:-2px}
.cmp-f .si svg{color:var(--ok)}
.cmp-f .no{color:var(--i-mut)}
.cmp-acc > div{display:flex; flex-direction:column; gap:8px}
.cmp-acc > div + div{border-left:1px solid var(--ln); padding-left:10px}
.cmp-acc .bt{justify-content:center}
@media (min-width:720px){
  .cmp2{gap:22px}
  .cmp-lado{padding:18px}
  .cmp-lado-t{font-size:18px}
  .cmp-lista a{grid-template-columns:76px 1fr; grid-template-areas:"mini b" "mini s" "mini p"; gap:2px 12px; padding:10px 6px}
  .cmp-lista .mini{margin-bottom:0}
  .cmp-lista b{font-size:15px}
  .cmp-lista small{font-size:13.5px}
  .cmp-lista small .ver{display:inline}
  .cmp-lista strong{font-size:15px}
  /* En el computador la foto va al lado: así la comparación queda a la vista */
  .cmp-sel{display:grid; grid-template-columns:minmax(0,230px) 1fr; grid-template-rows:auto auto 1fr; column-gap:18px}
  .cmp-sel .ph{grid-row:1 / 4}
  .cmp-sel .bt{justify-self:start; align-self:end}
  .cmp-sel h3{font-size:19px; margin-top:0}
  .cmp-sel .pr{font-size:23px}
  .cmp-sel .bt{width:auto}
  .cmp-cab,.cmp-f{gap:4px 22px; padding:12px 18px}
  .cmp-cab{font-size:15px}
  .cmp-cab span:last-child,.cmp-f p:last-child,.cmp-acc > div + div{padding-left:22px}
  .cmp-f.pr p:not(.et){font-size:21px}
  .cmp-acc > div{flex-direction:row}
}

/* ── WhatsApp fijo: píldora en escritorio, barra abajo en celular ─ */
.fab{position:fixed; right:22px; bottom:22px; z-index:40; display:flex; align-items:center; gap:9px;
  background:var(--wa); color:#fff; padding:13px 19px; border-radius:999px;
  font:700 15px/1 var(--fuente-titulo); box-shadow:0 8px 26px rgba(0,0,0,.3)}
.fab:hover{background:#0c6733; text-decoration:none}
.fab svg{width:20px; height:20px}
@media (max-width:719px){
  .fab{left:0; right:0; bottom:0; justify-content:center; border-radius:0;
    padding:15px 16px calc(15px + env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(0,0,0,.18)}
  body{padding-bottom:calc(50px + env(safe-area-inset-bottom))}
}