/* P2 · catálogo (p2-repuestos) y ficha (p2-repuesto) con el estilo «Deportivo» de la portada (12 nov 2026, pasada 45).
   Va después de p1.css, p2-comun.css y p2-deportivo.css (pie claro, variables, botones). Misma UX de la P1:
   filtros, tarjeta que lleva a la ficha + botón de cotización, ficha con cantidad, WhatsApp y «Agregar».
   Criterios aprobados: cursiva condensada en títulos, contornos rectos con 4 px, botones naranjas con texto blanco,
   esquinas cortadas en tarjetas de imagen, fondos diagonales solo en bloques grandes, rayas casi invisibles. */
main{overflow-x:clip}

/* ---------- migas ---------- */
.migas{padding:28px 0 18px;font:italic 700 14px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase}
.migas a{color:var(--tenue)}
.migas a:hover{color:var(--ac-txt)}
.migas span::before{content:"/";opacity:1;color:var(--ac-txt)}

/* ---------- cabecera de la página: banda gris con losa naranja inclinada a la derecha ---------- */
.res-cab{position:relative;isolation:isolate;align-items:center;min-height:180px;margin-bottom:48px;padding:40px 0}
.res-cab::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--sup) var(--rayas)}
.res-cab::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:calc(50% - 50vw - 8vw);width:30vw;background:var(--ac) var(--rayas-n);transform:skewX(var(--sk));transform-origin:bottom}
.res-cab h1{font-size:clamp(44px,5vw,76px);line-height:.9;letter-spacing:-.01em}
.res-cab h1 em{color:var(--ac-h)}
.res-cab p{margin-top:12px;font-size:18px;color:var(--tenue)}
.res{gap:48px}

/* ---------- filtros ---------- */
.filtros .fg{border-color:var(--linea)}
.filtros .fg summary{font:italic 800 21px/1 var(--f-tit);text-transform:uppercase;letter-spacing:.02em}
.filtros label{font-size:16px}
.filtros input{border-radius:4px;background:var(--sup2)}
.filtros input:checked{background:var(--ac-bt2)}
.filtros input:checked::after{border-color:#fff}
.fg__mas{font:italic 700 15px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);text-decoration:none;padding-bottom:4px;border-bottom:2px solid var(--ac)}
.ayuda-f{position:relative;border-radius:0;background:var(--sup);clip-path:var(--corte);padding-top:28px}
.ayuda-f::before{content:"";position:absolute;top:0;left:20px;width:48px;height:5px;background:var(--ac)}
.ayuda-f b,.ayuda-f h3,.ayuda-f strong{font-family:var(--f-tit);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.btn{border-radius:4px}
.btn--sm{font-size:16px}

/* ---------- tarjetas de producto (como «Lo más pedido» de la portada) ---------- */
.res [data-grid],[data-relacionados]{gap:24px}
.pc{background:#fff;border:1px solid var(--linea);border-radius:4px;overflow:hidden;transition:border-color .2s}
.pc:hover{border-color:var(--tinta)}
.pc:has(.pc__nm a:focus-visible){outline:3px solid var(--ac);outline-offset:2px}
.pc__ft{margin:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% 95%,0 100%)}
.pc__mk{margin:12px 18px 6px;font:italic 700 14px/1.1 var(--f-tit);letter-spacing:.1em;text-transform:uppercase;color:var(--ac-txt)}
.pc__fila{align-items:flex-end;padding:0 16px 16px 18px}
.pc__nm{min-height:2.5em;font-size:19px}
.pc__add{border:0;border-radius:4px;background:var(--tinta);color:#fff}
.pc__add:hover,.pc__add.en{background:var(--ac-bt);color:#fff}
.pc__add .b{border-radius:4px;box-shadow:none}
/* «¿No ves tu repuesto?»: bloque negro con esquina cortada y botón naranja */
.prod--ayuda{border-radius:0;clip-path:var(--corte);padding:32px 28px}
.prod--ayuda h3{font:italic 800 30px/1 var(--f-tit);text-transform:uppercase}
.prod--ayuda p{color:#C9CDD2}
.prod--ayuda .btn{background:var(--ac-bt);color:#fff}
.prod--ayuda .btn:hover{background:var(--ac-bt2);color:#fff}

/* ---------- ficha ---------- */
.galeria .grande{border-radius:0;clip-path:var(--corte)}
.galeria .min button{border-radius:4px;outline-offset:-2px}
.galeria .min button.on{outline:3px solid var(--ac)}
.dato h1{font-size:clamp(40px,4vw,62px);line-height:.92}
.dato .eti{font-size:15px}
.linea span{border-radius:4px}
.linea .orig{border-radius:4px;background:var(--tinta);color:#fff;font:italic 700 14px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase}
.compat{border-radius:4px;box-shadow:inset 4px 0 0 var(--ac)}
.compra{position:relative;border-radius:0;clip-path:var(--corte);padding:24px}
.cant{border-radius:4px}
.cant button{border-radius:4px}
.btn--wa{height:56px;border-radius:4px;background:var(--ac-bt);color:#fff;font:italic 800 19px/1 var(--f-tit);letter-spacing:.06em;text-transform:uppercase}
.btn--wa:hover{background:var(--ac-bt2);color:#fff}
.btn--ln{border-radius:4px;background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta);font:italic 800 17px/1 var(--f-tit);letter-spacing:.06em;text-transform:uppercase}
.btn--ln:hover{background:var(--tinta);color:#fff}
.btn--ln.en{background:var(--tinta);color:#fff}
.garantias li::before{border-radius:4px;background-color:var(--ac-bt2)}
.garantias b{font:italic 800 19px/1.1 var(--f-tit);text-transform:uppercase;letter-spacing:.02em}
/* compatibilidad y cómo cotizar */
.dos h2,.cabsec h2{font-size:clamp(34px,3.4vw,50px)!important;line-height:.94;letter-spacing:-.005em!important}
.tabla th{font:italic 700 14px/1 var(--f-tit);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.tabla tbody tr:nth-child(odd){background:var(--sup)}
.tabla td{padding:16px 14px;border-top:0}
.tabla th{padding:0 14px 12px}
.paso{position:relative;border-radius:0!important;clip-path:var(--corte);box-shadow:inset 4px 0 0 var(--ac)}
.paso::before{font:italic 800 52px/1 var(--f-tit);letter-spacing:0;color:var(--ac-h);margin-bottom:20px}
.paso h3{font:italic 800 22px/1.1 var(--f-tit);text-transform:uppercase;letter-spacing:.02em}

/* ---------- celular ---------- */
@media (max-width:900px){
  .res-cab{min-height:0;margin-bottom:28px;padding:28px 0}
  .res-cab::after{width:46vw;right:-24vw}
  .res-cab h1{font-size:clamp(36px,10vw,48px)}
  .res-cab p{font-size:16px;max-width:30ch}
  .res [data-grid],[data-relacionados]{gap:12px}
  .pc__mk{margin:10px 12px 4px;font-size:12px}
  .pc__fila{padding:0 10px 12px 12px;gap:8px}
  .pc__nm{font-size:16px}
  .pc__add{width:40px;height:40px}
  .compra{padding:18px}
  .btn--wa{font-size:19px}
  .barra-movil .btn{border-radius:4px}
}

/* ajustes tras revisar celular y contraste */
/* botones naranjas chicos (16 px): naranja más oscuro para que el blanco cumpla 4,5:1 */
.btn--ac,.prod--ayuda .btn{background:var(--ac-bt2);color:#fff}
.btn--ac:hover,.prod--ayuda .btn:hover{background:#A94206;color:#fff}
.dato .linea span{border-radius:4px}
@media (max-width:900px){
  .cab.cab--p2 .der,.cab.cab--p2.baja .der,.cab--p2.cab--solida .der{background:none;border-radius:0}
}