/* ═══════════════════════════════════════════════════════════════
   XPERFORMANCE by TRM — hoja de estilo común
   Paleta "racing": negro grafito + rojo Xperformance + acero.
   Misma familia tipográfica que tallervolvo / fapspain / revisatucambio
   (Barlow Condensed para titulares, Barlow para texto) para que las
   cuatro webs se sientan del mismo grupo.
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (min-width:768px){html{font-size:18.5px}}
@media (min-width:1280px){html{font-size:20px}}
@media (hover:none),(pointer:coarse),(max-width:767px){html{font-size:21px}}

:root{
  --bg:#07090D; --panel:#0D1117; --panel2:#141B24; --panel3:#1A222D;
  --line:rgba(228,18,28,.16); --line2:rgba(255,255,255,.07);
  --txt:#F2F5F9; --muted:#8593A4; --muted2:#5D6B7C;
  --red:#E4121C; --red2:#FF3B2F; --red3:#8A0009;
  --ok:#3FD68A; --warn:#FFB02E; --steel:#54A9FF;
  --maxw:1680px;
}
body{background:var(--bg);color:var(--txt);font-family:'Barlow',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:rgba(228,18,28,.35)}
:focus-visible{outline:2px solid var(--red2);outline-offset:2px}

/* fondo con una veladura de "asfalto" muy sutil */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(228,18,28,.07),transparent 60%),
             radial-gradient(900px 500px at 0% 100%,rgba(84,169,255,.04),transparent 60%)}
main,nav,footer{position:relative;z-index:1}

/* ══════════ NAV ══════════ */
nav.top{position:sticky;top:0;z-index:600;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,3.4rem);background:rgba(7,9,13,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s}
nav.top.up{border-color:var(--line2)}
.logo{display:flex;align-items:center;flex-shrink:0}
/* El logotipo es el fichero oficial (PNG con transparencia). Alto fijo y ancho
   automático para que no se deforme nunca. */
.logo img{height:46px;width:auto;display:block}
footer .logo img{height:52px}
@media(max-width:860px){.logo img{height:36px}}
.nav-links{display:flex;gap:1.55rem;list-style:none;align-items:center}
.nav-links a{font-family:'Barlow Condensed',sans-serif;font-size:.88rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);position:relative;transition:color .2s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover,.nav-links a.on{color:var(--txt)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:.7rem}
.nav-cart{position:relative;display:flex;align-items:center;gap:.4rem;border:1px solid var(--line2);padding:.42rem .8rem;cursor:pointer;background:none;
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s,background .2s}
.nav-cart:hover{border-color:var(--red);background:rgba(228,18,28,.08)}
.nav-cart .n{background:var(--red);color:#fff;border-radius:10px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;padding:0 5px}
.nav-cuenta{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid transparent;padding:.42rem .7rem;transition:color .2s;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.nav-cuenta:hover{color:var(--red2)}
.nav-cuenta::before{content:'👤';margin-right:.35rem;font-size:.9em}
.burger{display:none;background:none;border:1px solid var(--line2);padding:.4rem .6rem;cursor:pointer;font-size:1rem}

/* ══════════ ESTRUCTURA ══════════ */
section{padding:clamp(3.2rem,7vw,6rem) clamp(.9rem,2.4vw,2.4rem);position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}
.s-eye{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--red2);display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.s-eye::before{content:'';width:26px;height:1px;background:var(--red);opacity:.7}
.s-h{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(2rem,4.6vw,3.8rem);line-height:.94;letter-spacing:-.005em;text-transform:uppercase;margin-bottom:.9rem}
.s-h em{font-style:normal;color:var(--red2)}
.s-p{color:var(--muted);font-weight:300;font-size:.95rem;line-height:1.72;max-width:620px}
.s-head{margin-bottom:2.6rem}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.IN{opacity:1;transform:none}

/* ══════════ BOTONES ══════════ */
.btnA,.btnB,.btnC{font-family:'Barlow Condensed',sans-serif;font-size:.98rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.82rem 2rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;position:relative;overflow:hidden;transition:all .22s;text-align:center}
.btnA{background:var(--red);color:#fff}
.btnA::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-100%);transition:transform .55s}
.btnA:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(228,18,28,.32)}
.btnA:hover::before{transform:translateX(100%)}
.btnB{background:rgba(255,255,255,.04);color:var(--txt);border:1px solid rgba(255,255,255,.17)}
.btnB:hover{border-color:var(--red);background:rgba(228,18,28,.09)}
.btnC{background:none;color:var(--muted);border:1px solid var(--line2);padding:.55rem 1.1rem;font-size:.82rem}
.btnC:hover{color:var(--txt);border-color:var(--red)}
.btnA[disabled],.btnB[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-full{width:100%}

/* ══════════ HERO ══════════ */
#HERO{min-height:min(88vh,780px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(4rem,10vw,7rem) 1.2rem 3.5rem;overflow:hidden}
#HERO::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(7,9,13,.72),rgba(7,9,13,.95)),var(--hero-img,radial-gradient(circle at 50% 40%,#16202B,#07090D));
  background-size:cover;background-position:center}
.hero-ey{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--red2);display:flex;align-items:center;gap:.9rem;justify-content:center;margin-bottom:1.3rem;opacity:0;animation:fup .9s .15s ease both}
.hero-ey::before,.hero-ey::after{content:'';width:30px;height:1px;background:var(--red);opacity:.55}
.hero-h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(2.7rem,8.4vw,6.8rem);line-height:.9;text-transform:uppercase;margin-bottom:1.1rem;opacity:0;animation:fup .9s .3s ease both}
.hero-h1 .ac{color:var(--red2);display:block}
.hero-sub{font-size:1rem;font-weight:300;color:var(--muted);max-width:660px;margin:0 auto 1.9rem;line-height:1.7;opacity:0;animation:fup .8s .5s ease both}
.hero-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fup .8s .68s ease both}
.hero-chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem;opacity:0;animation:fup .8s .86s ease both}
.chip{font-size:.72rem;color:#F0C9C6;background:rgba(228,18,28,.09);border:1px solid rgba(228,18,28,.24);border-radius:20px;padding:.3rem .9rem}
@keyframes fup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ══════════ BUSCADOR DE MATRÍCULA ══════════ */
.plate-box{background:var(--panel);border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.4rem);max-width:1480px;margin:0 auto}
.plate-box h3{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.35rem}
.plate-box .sub{color:var(--muted);font-size:.86rem;margin-bottom:1.3rem;line-height:1.6}
.plate-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:stretch}
.plate{display:flex;align-items:stretch;background:#fff;border-radius:5px;overflow:hidden;flex:1 1 240px;min-width:200px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.plate .eu{background:#0A3A9E;color:#FFCC00;width:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;gap:2px;flex-shrink:0}
.plate .eu span{font-size:.9rem;line-height:1}
.plate input{flex:1;border:none;background:#fff;color:#111;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:.14em;text-align:center;text-transform:uppercase;padding:.55rem .4rem;min-width:0}
.plate input:focus{outline:none}
.plate input::placeholder{color:#B9C0C9}
.plate-row .btnA{flex:0 0 auto;padding-left:2.4rem;padding-right:2.4rem}
.plate-msg{margin-top:.9rem;font-size:.85rem;color:var(--muted);min-height:1.2em}
.plate-msg.err{color:#FF7A6B}
.plate-msg.ok{color:var(--ok)}

/* Ficha del coche identificado */
.car-card{margin-top:1.5rem;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--red);padding:1.2rem 1.4rem;display:none}
.car-card.on{display:block;animation:fup .5s ease both}
.car-card .cc-t{font-family:'Barlow Condensed',sans-serif;font-size:1.35rem;font-weight:900;text-transform:uppercase;line-height:1.05}
.car-card .cc-s{color:var(--muted);font-size:.82rem;margin-top:.25rem}
.cc-specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.cc-specs span{font-size:.74rem;background:rgba(255,255,255,.05);border:1px solid var(--line2);padding:.25rem .7rem;color:var(--muted)}
.cc-sel{margin-top:1rem}
.cc-sel label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:.4rem}
select.fld,input.fld,textarea.fld{width:100%;background:#0A0F16;border:1px solid var(--line2);padding:.62rem .8rem;font-size:.9rem;transition:border-color .2s}
select.fld:focus,input.fld:focus,textarea.fld:focus{outline:none;border-color:var(--red)}
textarea.fld{resize:vertical;min-height:88px}

/* ══════════ TARJETAS DE STAGE ══════════ */
/* Los cuatro servicios (Stage 1, Stage 2, ECO y caja de cambios) van SIEMPRE en
   una sola fila mientras quepan. Con auto-fit y 270 px de mínimo, el cuarto se
   caía a una segunda fila y dejaba media pantalla vacía. En móvil se pasa a dos
   columnas, que aprovecha el ancho igual de bien, y solo por debajo de 430 px
   —donde dos columnas ya no se leen— se pone en una. */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line2);margin-top:1.6rem}
@media(max-width:1080px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.stages{grid-template-columns:1fr}}
.stage{background:var(--panel);padding:1.6rem 1.5rem;position:relative;transition:background .3s,transform .25s;display:flex;flex-direction:column}
.stage:hover{background:var(--panel2);transform:translateY(-4px)}
.stage.top{background:var(--panel2);box-shadow:inset 0 2px 0 var(--red)}
.stage-tag{font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red2);margin-bottom:.6rem}
.stage-n{font-family:'Barlow Condensed',sans-serif;font-size:2.1rem;font-weight:900;text-transform:uppercase;line-height:.95;margin-bottom:.5rem}
.stage-d{color:var(--muted);font-size:.84rem;line-height:1.62;margin-bottom:1.2rem;flex:1}
/* El recuadro de potencia y par se parte solo cuando la TARJETA es estrecha, no
   cuando lo es la pantalla: con cuatro columnas las tarjetas bajan de 210 px y
   «380 Nm +115» no cabe en dos columnas por muy ancho que sea el monitor. */
.gain{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));gap:1px;background:var(--line2);margin-bottom:1.1rem}
.gain div{background:#0A0F16;padding:.75rem .8rem}
.gain .k{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);margin-bottom:.2rem}
.gain .v{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.15rem,1.35vw,1.55rem);font-weight:900;line-height:1.05;overflow-wrap:anywhere}
.gain .v b{color:var(--ok);font-size:.82rem;font-weight:700;margin-left:.3rem}
.stage ul{list-style:none;margin-bottom:1.2rem}
.stage ul li{font-size:.8rem;color:var(--muted);padding:.28rem 0 .28rem 1.1rem;position:relative}
.stage ul li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;background:var(--red);transform:rotate(45deg)}
.price{font-family:'Barlow Condensed',sans-serif;font-size:1.7rem;font-weight:900;margin-bottom:.15rem}
.price small{font-size:.68rem;color:var(--muted2);font-weight:600;letter-spacing:.1em;display:block;margin-top:.1rem}

/* ══════════ GRÁFICA DE POTENCIA ══════════ */
.dyno{background:var(--panel);border:1px solid var(--line2);padding:1rem;margin-top:1.6rem}
.dyno svg{width:100%;height:auto;display:block}
.dyno-legend{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;margin-top:.7rem;font-size:.74rem;color:var(--muted)}
.dyno-legend i{display:inline-block;width:16px;height:3px;margin-right:.4rem;vertical-align:middle}
.dyno-note{font-size:.72rem;color:var(--muted2);text-align:center;margin-top:.5rem;line-height:1.5}

/* ══════════ REJILLAS GENÉRICAS ══════════ */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line2)}
.gcard{background:var(--panel);padding:1.5rem 1.4rem;transition:background .3s,transform .25s}
.gcard:hover{background:var(--panel2);transform:translateY(-4px)}
.gcard .ic{font-size:1.6rem;display:block;margin-bottom:.7rem}
.gcard h4{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.45rem}
.gcard p{color:var(--muted);font-size:.83rem;line-height:1.6}

/* ══════════ TIENDA ══════════ */
.shop{display:grid;grid-template-columns:250px 1fr;gap:2.2rem;align-items:start}
.filters{position:sticky;top:88px;background:var(--panel);border:1px solid var(--line2);padding:1.2rem}
.filters h5{font-family:'Barlow Condensed',sans-serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);margin:1.1rem 0 .5rem}
.filters h5:first-child{margin-top:0}
.fopt{display:flex;align-items:center;gap:.5rem;padding:.24rem 0;font-size:.83rem;color:var(--muted);cursor:pointer}
.fopt:hover{color:var(--txt)}
.fopt input{accent-color:var(--red);width:15px;height:15px;cursor:pointer}
.fopt .c{margin-left:auto;font-size:.7rem;color:var(--muted2)}
.shop-top{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.3rem}
.shop-top .cnt{color:var(--muted);font-size:.84rem;margin-right:auto}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
.prod{background:var(--panel);border:1px solid var(--line2);display:flex;flex-direction:column;transition:border-color .25s,transform .25s;position:relative}
.prod:hover{border-color:rgba(228,18,28,.45);transform:translateY(-4px)}
.prod .ph{aspect-ratio:4/3;background:#0A0F16;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .ph .noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:900;color:rgba(255,255,255,.22);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:0 .8rem;line-height:1.2}
.prod .ph .noimg i{font-style:normal;font-size:1.9rem;opacity:.5;filter:grayscale(.35)}
.prod .body{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;flex:1;gap:.35rem}
.prod .mk{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red2);font-weight:700}
.prod .nm{font-size:.88rem;line-height:1.35;font-weight:500;flex:1}
.prod .pr{font-family:'Barlow Condensed',sans-serif;font-size:1.35rem;font-weight:900;margin-top:.3rem}
.prod .pr s{color:var(--muted2);font-size:.8rem;font-weight:400;margin-left:.4rem}
.prod .st{font-size:.7rem;color:var(--ok)}
.prod .st.no{color:var(--warn)}
.badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.16rem .55rem;z-index:2}
.badge.eco{background:var(--ok);color:#04140C}
.badge.cons{background:var(--steel);color:#04121F}
/* Artículos de "consultar precio": se ven igual, pero sin cifra ni compra. */
.prod .pr .cons{font-family:'Barlow',sans-serif;font-size:.86rem;font-weight:600;color:var(--steel);letter-spacing:.01em}
.prod.sinpr:hover{border-color:rgba(84,169,255,.45)}
.empty{grid-column:1/-1;text-align:center;padding:3.5rem 1rem;color:var(--muted)}

/* Ficha de producto */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:2.6rem;align-items:start}
.pdp-gal .main{background:#0A0F16;border:1px solid var(--line2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp-gal .main img{width:100%;height:100%;object-fit:contain}
.pdp-thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.pdp-thumbs img{width:70px;height:56px;object-fit:cover;border:1px solid var(--line2);cursor:pointer;opacity:.65;transition:.2s}
.pdp-thumbs img:hover,.pdp-thumbs img.on{opacity:1;border-color:var(--red)}
.pdp h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:900;text-transform:uppercase;line-height:1.02;margin:.4rem 0 .7rem}
.pdp .pdp-mk{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red2);font-weight:700}
.pdp .pdp-pr{font-family:'Barlow Condensed',sans-serif;font-size:2.6rem;font-weight:900;line-height:1;margin:.8rem 0 .2rem}
.pdp .pdp-iva{font-size:.74rem;color:var(--muted2);margin-bottom:1.2rem}
.pdp-desc{color:var(--muted);font-size:.9rem;line-height:1.75;margin:1.2rem 0}
.pdp-desc p{margin-bottom:.7rem}
.spec-t{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:1rem}
.spec-t td{padding:.5rem .2rem;border-bottom:1px solid var(--line2)}
.spec-t td:first-child{color:var(--muted2);width:42%}
.qty{display:flex;align-items:center;border:1px solid var(--line2);width:fit-content}
.qty button{background:none;border:none;width:34px;height:38px;cursor:pointer;color:var(--muted);font-size:1.1rem}
.qty button:hover{color:var(--red2)}
.qty input{width:44px;text-align:center;background:none;border:none;font-weight:700}
.buy-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}

/* ══════════ CARRITO / CHECKOUT ══════════ */
.cart-grid{display:grid;grid-template-columns:1fr 380px;gap:2.4rem;align-items:start}
.cart-line{display:grid;grid-template-columns:88px 1fr auto;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line2);align-items:center}
.cart-line .th{width:88px;height:70px;object-fit:cover;background:#0A0F16;border:1px solid var(--line2)}
.cart-line .nm{font-size:.9rem;line-height:1.35;margin-bottom:.3rem}
.cart-line .mk{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red2)}
.cart-line .rm{background:none;border:none;color:var(--muted2);font-size:.74rem;cursor:pointer;text-decoration:underline;margin-top:.35rem;display:block}
.cart-line .rm:hover{color:#FF7A6B}
.cart-line .amt{font-family:'Barlow Condensed',sans-serif;font-size:1.25rem;font-weight:900;text-align:right;white-space:nowrap}
.sumbox{background:var(--panel);border:1px solid var(--line);padding:1.4rem;position:sticky;top:88px}
.sumbox h4{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}
.sumrow{display:flex;justify-content:space-between;padding:.42rem 0;font-size:.87rem;color:var(--muted)}
.sumrow.tot{border-top:1px solid var(--line2);margin-top:.6rem;padding-top:.8rem;color:var(--txt);font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted2);margin-bottom:.32rem}
.legal-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.78rem;color:var(--muted);line-height:1.55;margin:1rem 0}
.legal-check input{accent-color:var(--red);margin-top:.2rem;width:16px;height:16px;flex-shrink:0}
.legal-check a{color:var(--red2);text-decoration:underline}
.pay-strip{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line2);font-size:.72rem;color:var(--muted2)}
.pay-strip b{color:var(--muted);font-weight:600}

/* ══════════ BANDA / MARCAS ══════════ */
.band{background:var(--red);overflow:hidden;padding:.5rem 0}
.btrack{display:flex;width:max-content;animation:marq 30s linear infinite}
.bitem{font-family:'Barlow Condensed',sans-serif;font-size:1rem;letter-spacing:.11em;color:#fff;padding:0 2rem;white-space:nowrap;display:flex;align-items:center;gap:2rem;font-weight:700}
.bitem::after{content:'●';opacity:.4;font-size:.5rem}
@keyframes marq{to{transform:translateX(-50%)}}
.marcas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.marcas span{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line2);padding:.36rem .85rem;transition:.2s}
.marcas span:hover{color:var(--txt);border-color:var(--red)}

/* ══════════ STATS ══════════ */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line2)}
.stat{background:var(--panel);padding:1.5rem 1rem;text-align:center}
.stat .n{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:900;color:var(--red2);line-height:1}
.stat .l{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-top:.35rem}

/* ══════════ FAQ ══════════ */
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;padding:1.05rem 2rem 1.05rem 0;font-family:'Barlow Condensed',sans-serif;font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.3rem;top:50%;transform:translateY(-50%);color:var(--red2);font-size:1.4rem;font-weight:300;transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{color:var(--muted);font-size:.88rem;line-height:1.75;padding:0 1.5rem 1.2rem 0}

/* ══════════ TOAST / WHATSAPP / FOOTER ══════════ */
#TOAST{position:fixed;bottom:2rem;left:50%;transform:translate(-50%,190%);background:#141C27;border-left:3px solid var(--red);padding:.85rem 1.4rem;
  font-family:'Barlow Condensed',sans-serif;font-size:.94rem;font-weight:700;letter-spacing:.04em;z-index:9500;transition:transform .4s ease;box-shadow:0 12px 44px rgba(0,0,0,.6);max-width:min(430px,90vw)}
#TOAST.vis{transform:translate(-50%,0)}
#WAF{position:fixed;right:1.1rem;bottom:1.1rem;z-index:600;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .2s}
#WAF:hover{transform:scale(1.08)}
#WAF svg{width:29px;height:29px;fill:#fff}
footer{background:#04060A;border-top:1px solid var(--line2);padding:2.6rem clamp(1rem,4vw,3.4rem) 1.6rem}
.ft-cols{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
.ft-cols h6{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted2);margin-bottom:.8rem}
.ft-cols a,.ft-cols p{display:block;font-size:.8rem;color:var(--muted);line-height:1.95}
.ft-cols a:hover{color:var(--red2)}
.ft-bot{max-width:var(--maxw);margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--line2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.72rem;color:var(--muted2)}

/* ══════════ AVISO LEGAL / TEXTO LARGO ══════════ */
.doc{max-width:820px;margin:0 auto}
.doc h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,4.4vw,3rem);font-weight:900;text-transform:uppercase;margin-bottom:1.6rem}
.doc h2{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin:2rem 0 .7rem;color:var(--red2)}
.doc p,.doc li{color:var(--muted);font-size:.9rem;line-height:1.8;margin-bottom:.7rem}
.doc ul,.doc ol{padding-left:1.3rem;margin-bottom:1rem}
.doc a{color:var(--red2);text-decoration:underline}

.aviso{background:rgba(255,176,46,.06);border:1px solid rgba(255,176,46,.28);padding:1rem 1.2rem;font-size:.83rem;color:#E9D5AE;line-height:1.65;display:flex;gap:.8rem}
.aviso b{color:var(--warn)}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1080px){
  .shop{grid-template-columns:1fr}
  .filters{position:static}
  .cart-grid{grid-template-columns:1fr}
  .sumbox{position:static}
  .pdp{grid-template-columns:1fr;gap:1.6rem}
  .ft-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#0A0D12;flex-direction:column;gap:0;padding:.6rem 0;border-bottom:1px solid var(--line2)}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:.75rem 1.4rem;font-size:.95rem}
  .nav-links a::after{display:none}
  .burger{display:block}
  .plate-row .btnA{width:100%}
  .form-grid{grid-template-columns:1fr}
  .cart-line{grid-template-columns:64px 1fr;gap:.8rem}
  .cart-line .th{width:64px;height:52px}
  .cart-line .amt{grid-column:2;text-align:left}
  .ft-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* Referencias agrupadas: un proveedor puede llamar igual al disco delantero y
   al trasero. Se enseña una tarjeta con «desde» y el número de variantes. */
.prod .dsd{font-size:.62em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-right:.2em}
.prod .st.vr{color:#54A9FF}
.vars{display:grid;gap:1px;background:var(--line2);margin-top:1.2rem}
.vars a{background:var(--panel);padding:.7rem .9rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.86rem}
.vars a:hover{background:var(--panel2)}
.vars a.act{border-left:3px solid var(--red)}
.vars .pv{font-family:'Barlow Condensed',sans-serif;font-weight:900;white-space:nowrap}

/* ── Las cuatro tarjetas de servicio en una fila ──────────────────────────
   Al pasar de tres a cuatro columnas cada tarjeta pierde unos 90 px de ancho,
   así que se aprieta un poco la tipografía para que «380 Nm +115» no se parta.
   Y por debajo de 620 px el recuadro de potencia y par se apila: en dos
   columnas de móvil no hay sitio para ponerlos uno al lado del otro. */
@media(max-width:1240px){
  .stage{padding:1.35rem 1.15rem}
  .stage-n{font-size:1.8rem}
  .stage-d{font-size:.8rem;line-height:1.55;margin-bottom:1rem}
  .gain .v{font-size:1.3rem}
  .gain .v b{font-size:.72rem;margin-left:.22rem}
  .gain div{padding:.6rem .65rem}
  .stage ul li{font-size:.76rem}
  .price{font-size:1.5rem}
}
@media(max-width:620px){
  .stage{padding:1.1rem .9rem}
  .stage-n{font-size:1.45rem}
  .stage-d{font-size:.76rem}
  /* «POTENCIA» y «PAR MOTOR» con tanto espaciado no caben en media pantalla */
  .gain .k{font-size:.58rem;letter-spacing:.1em}
  .gain div{padding:.5rem .55rem}
  .price{font-size:1.35rem}
}
/* Nombres largos sin espacios (referencias tipo «5x100/5x112») partían la caja */
.stage ul li,.stage-d,.prod .nm{overflow-wrap:anywhere}

/* Subfamilias del filtro: cuelgan de su familia, indentadas y con una guía a la
   izquierda para que se vea que dependen de ella. */
.fsubs{margin:.1rem 0 .5rem .95rem;padding-left:.7rem;border-left:1px solid var(--line2)}
.fsubs .fopt{font-size:.78rem;color:var(--muted)}
.fsubs .fopt .c{opacity:.75}