/* InstaCAR · demo v2 · estructura común. Cada propuesta define sus tokens en p1.css / p2.css. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--tinta);font-family:var(--f-cuerpo);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.wrap{width:min(100% - 48px, var(--ancho));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tab-num{font-variant-numeric:tabular-nums}

/* entrada al hacer scroll: una sola familia (opacidad + desplazamiento) */
.anim [data-anim]{opacity:0;transition:opacity .8s var(--curva),transform .8s var(--curva)}
.anim [data-anim="sube"]{transform:translateY(50px)}
.anim [data-anim="baja"]{transform:translateY(-50px)}
.anim [data-anim="escala"]{transform:scale(1.08)}
.anim [data-anim="poco"]{transform:translateY(10px)}
.anim [data-anim].visible{opacity:1;transform:none}

/* selector */
form[data-selector] label{display:block;position:relative}
form[data-selector] select{appearance:none;-webkit-appearance:none;width:100%;cursor:pointer}
form[data-selector] select:disabled{cursor:not-allowed;opacity:.45}
form[data-selector] label::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.6}
label.err{animation:sacude .4s}
@keyframes sacude{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* rejilla de repuestos */
[data-grid],[data-relacionados],[data-vitrina]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.prod{display:flex;flex-direction:column}
.prod .foto{display:grid;place-items:center;aspect-ratio:1.55}
.prod .foto img{width:82%;height:auto;max-height:80%;object-fit:contain;transition:transform .5s var(--curva)}
.prod .foto:hover img{transform:scale(1.04)}
.prod .info{flex:1}
.prod .acc{display:flex;align-items:center;gap:16px;margin-top:16px}
.prod--ayuda{justify-content:flex-end}

/* hoja de filtros en móvil */
@media (max-width:900px){
  .filtros{position:fixed;inset:auto 0 0 0;z-index:60;max-height:80vh;overflow:auto;transform:translateY(105%);transition:transform .35s var(--curva)}
  .filtros.on{transform:none}
  .pildora-filtros{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40}
}
@media (min-width:901px){.pildora-filtros,[data-act="filtros-ok"]{display:none!important}}

/* ventana de cotizar */
.sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,9,8,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sheet.on{opacity:1;visibility:visible}
.sheet .box{position:relative;width:min(460px,100%);padding:32px 28px 24px;transform:translateY(24px);transition:transform .35s var(--curva)}
.sheet.on .box{transform:none}
.sheet .x{position:absolute;right:12px;top:12px;width:40px;height:40px;font-size:26px;line-height:1}
.sheet .pasos{display:flex;gap:8px;list-style:none;margin-bottom:20px;font-size:12px}
.sheet .pasos li{flex:1;padding-top:8px;border-top:3px solid var(--linea);opacity:.6}
.sheet .pasos li.ok{border-color:var(--ac);opacity:1}
.sheet h3{font-size:24px;line-height:1.15;margin-bottom:6px}
.sheet .sub{font-size:15px;opacity:.75;margin-bottom:20px}
.sheet .chat{background:#E9E1D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d8cdbf'/%3E%3C/svg%3E");padding:20px 16px;border-radius:14px}
.sheet .burb{margin-left:auto;max-width:92%;background:#D9FDD3;color:#111;padding:10px 12px 6px;border-radius:12px 12px 4px 12px;font-size:15px;line-height:1.45}
.sheet .burb small{display:block;text-align:right;font-size:11px;color:#667}
.sheet .acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.sheet .acc .btn{flex:1 1 160px}
.sheet .nota{font-size:12px;opacity:.6;margin-top:16px}

.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 20px;font-size:15px;transition:opacity .25s,transform .25s var(--curva)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* menú móvil */
.burger{display:none;width:44px;height:44px;place-items:center;position:relative;z-index:71}
.burger i{display:block;width:20px;height:2px;background:currentColor;margin:4px auto;transition:transform .3s var(--curva),opacity .2s}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:96px 24px 32px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mmenu.on{opacity:1;visibility:visible}
.mmenu a{font-size:32px;line-height:1.2;transform:translateY(20px);opacity:0;transition:transform .5s var(--curva),opacity .5s;transition-delay:calc(var(--i)*50ms)}
.mmenu.on a{transform:none;opacity:1}
.mmenu .btn{margin-top:24px}
body.menu-on{overflow:hidden}
@media (max-width:900px){.burger{display:grid}.cab nav{display:none}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.prod .foto{overflow:hidden}
.prod .foto img{width:auto;height:78%;max-width:86%;max-height:none}