*{box-sizing:border-box}
:root{--bg:#0a0c11;--sup:#12151d;--sup2:#181c26;--bor:#242936;--bor2:#323949;
--tx:#f0f1f5;--tx2:#989dae;--tx3:#686e82;--am:#ffb020;--am2:#ff8c00;--rojo:#ff4d4f;
--verde:#2bd66a;--r:13px;--r2:9px}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:82px}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
.w{max-width:1220px;margin:0 auto;padding:0 13px}
/* marquesina: altura fija, cero salto de layout */
.bnd{background:linear-gradient(90deg,var(--am2),var(--am));color:#140e00;overflow:hidden;
height:26px;display:flex;align-items:center;contain:layout paint}
.bnd .p{display:flex;gap:24px;white-space:nowrap;animation:corre 46s linear infinite;padding-left:24px}
.bnd i{font:600 .74rem/1 system-ui;font-style:normal}
.bnd:hover .p,.bnd:active .p{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bnd .p{animation:none}}
/* cabecera */
.top{position:sticky;top:0;z-index:40;background:rgba(10,12,17,.94);backdrop-filter:blur(10px);
border-bottom:1px solid var(--bor)}
.top .w{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:8px 13px}
.mk{display:flex;align-items:center;gap:7px;flex:none}
.mk img{width:32px;height:32px}
.mk b{font-size:.9rem;line-height:1.1;letter-spacing:-.2px;display:block}
.mk i{font-size:.62rem;color:var(--tx2);font-style:normal;display:none}
/* 14-sep: el buscador vive DENTRO de `.top .w`. Estaba fuera, como
   hermano del contenedor, asi que en escritorio su `flex:1` no tenia con quien
   repartirse y caia pegado al borde izquierdo, medio cortado — el dueno lo vio
   en la captura. En movil sigue siendo una fila propia: `flex-basis:100%` la
   hace envolver debajo del logo. */
.bsc{display:none;gap:6px;flex-basis:100%;order:9;padding:0 0 4px}
.bsc.abierto{display:flex}
.bsc input{flex:1}
.bsc button{flex:none;width:46px;padding:0;display:flex;align-items:center;justify-content:center}
.lupa{flex:none;width:40px;height:40px;border-radius:99px;border:1px solid var(--bor);
background:var(--sup);color:var(--tx2);display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0}
/* ── selector de coche: el protagonista de la página ── */
.coche{background:linear-gradient(150deg,#241a08,var(--sup));border:1px solid #5c4a1e;
border-radius:17px;padding:16px 15px 15px;margin:12px 0 6px;
box-shadow:0 8px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,176,32,.12)}
.coche h2{margin:0 0 2px;font-size:1.22rem;letter-spacing:-.4px}
.coche .ay{margin:0 0 12px;font-size:.79rem;color:var(--tx2)}
.paso{display:flex;align-items:center;gap:10px;margin-bottom:9px;opacity:.42;
transition:opacity .22s}
.paso.viva{opacity:1}
.paso .no{flex:none;width:26px;height:26px;border-radius:99px;background:var(--sup2);
border:1px solid var(--bor2);color:var(--tx3);font-size:.76rem;font-weight:800;
display:flex;align-items:center;justify-content:center}
.paso.viva .no{background:var(--am);border-color:var(--am);color:#140e00}
.paso.list .no{background:#0d3a20;border-color:#1d6b3c;color:#5ce08a}
.paso select{height:52px;font-size:16px;font-weight:600}
.paso .campo{flex:1;min-width:0}
.coche .bt{height:54px;font-size:1rem;margin-top:4px}
.coche .bt[disabled]{opacity:.4;cursor:default;background:var(--sup2);color:var(--tx3)}
.coche .otra{display:block;text-align:center;margin-top:10px;font-size:.78rem;color:var(--tx3)}
.pil{display:flex;align-items:center;gap:5px;background:#241a08;border:1px solid #453718;
border-radius:99px;padding:4px 4px 4px 10px;font-size:.73rem;margin-left:auto;max-width:56vw}
.pil b{color:var(--am);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pil a{color:var(--tx3);border-left:1px solid #453718;padding-left:6px;font-size:.7rem;flex:none}
/* carrusel: lo primero con contenido */
.slid{margin:18px 0 4px;position:relative}
.slid .cb{display:flex;flex-direction:column;gap:1px;margin:0 0 9px;padding:0 1px}
.slid h2{margin:0;font-size:1.02rem;letter-spacing:-.2px}
.slid .cb span{font-size:.71rem;color:var(--tx3)}
.pista{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 12px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.pista::-webkit-scrollbar{display:none}
.mg{flex:0 0 252px;scroll-snap-align:center;background:linear-gradient(168deg,#221a09,var(--sup));
border:1px solid #453718;border-radius:17px;overflow:hidden;transform:scale(.9);opacity:.6;
transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.mg.on{transform:scale(1);opacity:1;border-color:var(--am)}
.mg .im{position:relative;background:#fff;aspect-ratio:16/11;overflow:hidden}
.mg .im img{width:100%;height:100%;object-fit:contain}
.mg .bd{position:absolute;top:8px;left:8px;background:var(--rojo);color:#fff;font-weight:900;
font-size:.78rem;padding:3px 8px;border-radius:8px}
.mg .tx{padding:10px 12px 13px}
.mg .t{font-size:.84rem;line-height:1.3;height:2.6em;overflow:hidden;margin-bottom:5px}
.mg .p{font-size:1.26rem;font-weight:900;letter-spacing:-.5px}
.mg .p s{color:var(--tx3);font-size:.76rem;font-weight:400;margin-left:5px;letter-spacing:0}
.mg .ah{display:inline-block;background:#0d3a20;color:#5ce08a;font-weight:800;font-size:.72rem;
padding:3px 8px;border-radius:7px;margin-top:5px}
.mg .cp{font-size:.71rem;color:var(--am);margin-top:6px}
.mg .rl{font-size:.7rem;color:var(--tx3);margin-top:3px}
.mg .rl.u{color:var(--rojo);font-weight:700}
.fl{display:none}
.pts{display:flex;gap:4px;justify-content:center;margin-top:-6px}
.pts i{width:5px;height:5px;border-radius:99px;background:var(--bor2);transition:width .2s,background .2s}
.pts i.on{width:16px;background:var(--am)}
/* rejilla de secciones: el mapa completo del catálogo */
.tax{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin:6px 0 4px}
.tx1{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);padding:11px 12px;
display:flex;flex-direction:column;gap:2px;min-height:84px}
.tx1 svg{color:var(--am)}
.tx1 .t{font-weight:700;font-size:.86rem;margin-top:5px;letter-spacing:-.2px;line-height:1.2}
.tx1 .g{font-size:.68rem;color:var(--tx3);line-height:1.3;display:none}
.tx1 .c{margin-top:auto;font-size:.72rem;color:var(--am);font-weight:800;font-variant-numeric:tabular-nums}
.tx1.k{background:linear-gradient(160deg,#241a08,#191510);border-color:#453718}
/* tarjetas */
h1{font-size:1.22rem;margin:14px 0 3px;letter-spacing:-.4px;line-height:1.22}
.sb{color:var(--tx2);font-size:.83rem;margin:0 0 11px}
.limpiar{display:inline-block;margin-top:7px;padding:8px 14px;border-radius:99px;
border:1px solid var(--bor2);background:var(--sup);color:var(--tx2);font-size:.78rem;font-weight:700}
.limpiar:hover{border-color:var(--am);color:var(--am)}
h2{font-size:.98rem;margin:20px 0 9px;display:flex;align-items:baseline;gap:7px;letter-spacing:-.2px}
h2 .n{font-weight:400;color:var(--tx3);font-size:.73rem}
h2 a{margin-left:auto;font-size:.75rem;color:var(--am)}
.gr{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.c{position:relative;display:flex;flex-direction:column;background:var(--sup);
border:1px solid var(--bor);border-radius:var(--r);overflow:hidden}
.c .im{background:#fff;aspect-ratio:1/1;overflow:hidden}
.c .im img{width:100%;height:100%;object-fit:contain}
.c .bd{position:absolute;top:6px;left:6px;background:var(--rojo);color:#fff;font-weight:800;
font-size:.72rem;padding:2px 7px;border-radius:7px}
.c .ex{position:absolute;top:6px;right:6px;background:#140e00;color:var(--am);border:1px solid var(--am);
font-weight:800;font-size:.6rem;padding:2px 6px;border-radius:7px}
.c .tx{padding:8px 9px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.c .t{font-size:.79rem;line-height:1.25;height:2.5em;overflow:hidden;color:#dcdee8}
.c .p{font-size:1.02rem;font-weight:800;margin-top:2px;letter-spacing:-.3px}
.c .p s{color:var(--tx3);font-size:.71rem;font-weight:400;margin-left:4px;letter-spacing:0}
.c .ev{font-size:.68rem;color:var(--tx2)}
.c .cp{font-size:.7rem;color:var(--am);margin-top:auto;padding-top:3px}
.c .rl{font-size:.66rem;color:var(--tx3)}
.c .rl.u{color:var(--rojo);font-weight:700}
/* filtros */
.cj{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);padding:11px 12px;margin-bottom:9px}
.cj h3{font-size:.64rem;text-transform:uppercase;letter-spacing:.7px;color:var(--tx3);margin:0 0 8px;font-weight:800}
label{font-size:.62rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;display:block;
margin:8px 0 3px;font-weight:700}
label:first-child{margin-top:0}
select,input{width:100%;padding:10px 11px;border-radius:var(--r2);border:1px solid var(--bor2);
background:#0a0c11;color:#fff;font-size:16px;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;
background-repeat:no-repeat;padding-right:30px}
input::placeholder{color:#585e73}
.bt{padding:11px 15px;border:0;border-radius:var(--r2);font-size:.92rem;font-weight:800;
background:linear-gradient(135deg,var(--am),var(--am2));color:#140e00;cursor:pointer;width:100%;
margin-top:9px;display:block;text-align:center}
.op{display:flex;flex-direction:column;gap:1px;max-height:268px;overflow-y:auto;margin:0 -3px}
.nv .op{max-height:none;overflow:visible}
.nv .op a{align-items:center;gap:8px}
.nv .op a svg{width:17px;height:17px;flex:none;color:var(--tx3)}
.nv .op a.on svg{color:var(--am)}
.nv .op a span:first-of-type{flex:1}
.nv .op a .k{color:var(--tx3);font-size:.72rem;font-variant-numeric:tabular-nums}
.nv .op a.on .k{color:var(--am)}
.op a{padding:7px 8px;border-radius:8px;font-size:.83rem;color:var(--tx2);display:flex;
justify-content:space-between;gap:8px}
.op a.on{background:#241a08;color:var(--am);font-weight:800}
.op a span{color:var(--tx3);font-size:.72rem;font-variant-numeric:tabular-nums}
.op a.on span{color:var(--am)}
.fbus{margin-bottom:6px}
details.fl2{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);margin:11px 0}
details.fl2>summary{padding:12px 13px;font-weight:800;font-size:.86rem;cursor:pointer;list-style:none;
display:flex;justify-content:space-between;align-items:center}
details.fl2>summary::-webkit-details-marker{display:none}
details.fl2>summary::after{content:"▾";color:var(--am)}
details.fl2[open]>summary::after{content:"▴"}
details.fl2 .cj{border:0;background:transparent;margin:0;padding:0 13px 13px}
aside .esc{display:none}
/* ficha */
.fic{display:grid;gap:14px;margin-top:12px}
.fic .foto{background:#fff;border-radius:var(--r);aspect-ratio:1/1;overflow:hidden}
.fic .foto img{width:100%;height:100%;object-fit:contain}
.fic h1{margin:0 0 8px;font-size:1.1rem;line-height:1.3}
.pbox{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);padding:14px}
.pbox .pr{font-size:2rem;font-weight:900;letter-spacing:-1px;line-height:1}
.pbox .pr s{font-size:.9rem;color:var(--tx3);font-weight:400;margin-left:8px;letter-spacing:0}
.pbox .ah{display:inline-block;background:#0d3a20;color:#5ce08a;font-weight:800;font-size:.82rem;
padding:4px 10px;border-radius:8px;margin-top:8px}
.cta{display:block;text-align:center;background:linear-gradient(135deg,var(--am),var(--am2));
color:#140e00;font-weight:900;font-size:1.02rem;padding:15px;border-radius:var(--r2);margin-top:12px}
.datos{list-style:none;padding:0;margin:12px 0 0;font-size:.86rem}
.datos li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--bor)}
.datos b{color:var(--tx2);font-weight:600;flex:none}
.datos .falta{color:var(--tx3);font-style:italic}
/* varios */
.hero{background:linear-gradient(140deg,#241a08,var(--sup));border:1px solid #453718;border-radius:17px;
padding:14px 15px;margin:12px 0 11px}
.hero h1{margin:0 0 4px}.hero p{margin:0;color:var(--tx2);font-size:.81rem;line-height:1.45}
.vac{background:var(--sup);border:1px dashed var(--bor2);border-radius:var(--r);padding:22px 16px;
margin-top:13px;text-align:center}
.vac .bt{display:inline-block;width:auto;margin-top:11px}
.pag{display:flex;gap:7px;justify-content:center;margin:18px 0 0;flex-wrap:wrap}
.pag a,.pag span{padding:10px 15px;border-radius:var(--r2);border:1px solid var(--bor);
background:var(--sup);font-size:.86rem}
.pag .ac{background:var(--am);color:#140e00;font-weight:800;border-color:var(--am)}
.mig{font-size:.76rem;color:var(--tx3);margin:12px 0 0}
.mig a{color:var(--tx2)}
footer{margin-top:32px;padding:16px 0 20px;border-top:1px solid var(--bor);font-size:.72rem;
color:var(--tx3);text-align:center;line-height:1.8}
footer a{color:var(--am)}
/* barra inferior: el pulgar llega siempre */
.tab{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(10,12,17,.98);
backdrop-filter:blur(12px);border-top:1px solid var(--bor);display:flex;
padding:8px 5px calc(8px + env(safe-area-inset-bottom))}
/* 14-sep: los botones eran de 44 px de alto y 19 px de icono, y el dueño los
   probó con el dedo: *"están muy pequeños"*. 44 es el MÍNIMO de accesibilidad,
   no una medida cómoda — y esta barra se usa de pie y con una mano. Ahora el
   área tocable es de 58 px con 24 de icono y 11 px de texto. */
.tab a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;
font-size:.69rem;font-weight:600;color:var(--tx3);min-height:58px;justify-content:center;
border-radius:12px}
.tab a.on{color:var(--am);background:#1b1508}
.tab a svg{width:24px;height:24px;stroke-width:1.8}
@media(min-width:700px){
  .w{padding:0 18px}
  .mk img{width:38px;height:38px}.mk b{font-size:1rem}.mk i{display:block}
  .bsc{display:flex;padding:0;margin:0;flex:1 1 auto;order:0;max-width:480px}
  .lupa{display:none}
  .coche{padding:17px 18px 16px}
  .coche .filas{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
  .coche .filas .paso{margin:0}
  .coche .filas .bt{margin:0;width:auto;padding:0 22px}
  .top .w{gap:14px;padding:10px 18px}
  .tax{grid-template-columns:repeat(4,1fr)}
  .tx1 .g{display:block}.tx1{min-height:104px;padding:13px 14px}
  .gr{grid-template-columns:repeat(3,1fr);gap:10px}
  h1{font-size:1.5rem}
  .mg{flex:0 0 288px}
  .slid .cb{flex-direction:row;align-items:baseline;gap:8px}
  .fic{grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .fic h1{font-size:1.32rem}
}
@media(min-width:1000px){
  body{padding-bottom:0}
  .tab{display:none}
  .lay{display:grid;grid-template-columns:216px minmax(0,1fr);gap:22px;align-items:start;padding-bottom:40px}
  aside{position:sticky;top:104px}
  aside .esc{display:block}
  aside .mov{display:none}
  .gr{grid-template-columns:repeat(4,1fr)}
  .tax{grid-template-columns:repeat(4,1fr)}
  .fl{display:flex;position:absolute;top:50%;width:44px;height:44px;border-radius:99px;
  background:rgba(18,21,29,.96);border:1px solid var(--bor2);color:var(--tx);align-items:center;
  justify-content:center;cursor:pointer;z-index:5;margin-top:-8px}
  .fl.i{left:-6px}.fl.d{right:-6px}
  .fl[disabled]{opacity:.28;cursor:default}
  .fic{grid-template-columns:420px minmax(0,1fr)}
}