/* JR Repuestos, web para clientes. Primero el celular; en la compu se agranda. Colores del logo. */
:root{--rojo:#ef0709;--accion:#c80608;--accion2:#a80507;--negro:#000;--fondo:#f4f3f2;--tinta:#171514;--suave:#5c5652;--linea:#dcd8d5;--acero:#c7cacc;--rojo-txt:#b8241f;--ok:#2d7a4b;--poco:#8a5a00;--campo:#4f7cab;--blanco:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:Barlow,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
a{color:var(--rojo-txt)}
h1,h2,h3{margin:0}
h2{font-size:24px;font-weight:700;line-height:1.2}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cont{max-width:1160px;margin:0 auto;padding-left:16px;padding-right:16px}
.bloque{padding-top:28px;padding-bottom:6px}
.kicker{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.rojo-txt{color:var(--rojo-txt)}.rojo-claro{color:#ff6159}
.tit-fila{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.tit-fila a,.lnk{font-weight:600;font-size:15px;background:none;border:0;color:var(--rojo-txt);cursor:pointer;font-family:inherit;padding:8px 0}
input,select{font:inherit;font-size:16px;color:var(--tinta);background:var(--fondo);border:1.5px solid var(--campo);border-radius:8px;height:48px;padding:0 12px;width:100%;min-width:0}
input:focus,select:focus{outline:none;border-color:var(--accion)}
:focus-visible{outline:2px solid var(--accion);outline-offset:2px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:8px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .2s,transform .12s}
.btn:active{transform:scale(.97)}
.btn.rojo{background:var(--accion);color:#fff}.btn.rojo:hover{background:var(--accion2)}
.btn.negro{background:var(--tinta);color:#fff}
.btn.blanco{background:#fff;color:#000}
.btn.borde{background:#fff;color:var(--tinta);border-color:var(--tinta)}
.btn.grande{width:100%;min-height:52px;font-size:17px}

/* Estado arriba */
.estado{background:#000;color:var(--linea);font-size:13px;padding:8px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.estado>span{display:flex;gap:8px;align-items:center}
.estado b{font-family:'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#ff6159}
.dot{width:8px;height:8px;border-radius:50%;background:#5cc08a;flex:none}
.dot.abierto{animation:latido 2.4s ease-out infinite}
.dot.cerrado{background:#ff6159}.dot.aviso{background:#f0b429}

/* Encabezado */
.cab{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.cab-in{max-width:1160px;margin:0 auto;padding:10px 16px 12px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.marca{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--tinta);flex:1 1 auto}
.marca img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#000}
.marca span{display:flex;flex-direction:column;line-height:1.1}
.marca b{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:19px}
.marca small{font-size:12px;color:var(--suave);letter-spacing:.04em}
.buscador{display:flex;flex:1 1 100%;order:3}
.buscador input{border-right:0;border-radius:8px 0 0 8px}
.buscador button{height:48px;width:54px;flex:none;display:grid;place-items:center;background:var(--tinta);color:#fff;border:0;border-radius:0 8px 8px 0;cursor:pointer}
.solo-compu{display:none}
.aviso-muestra{background:#fff4d6;color:#6b4a00;font-size:14px;padding:8px 16px;text-align:center;border-bottom:1px solid #f0d58a}

/* Portada */
.portada{background:#000;color:#fff;position:relative;overflow:hidden;padding:30px 0 28px}
.brillo{position:absolute;right:-40%;top:10%;width:120%;height:70%;background:radial-gradient(closest-side,rgba(239,7,9,.26),rgba(239,7,9,0) 70%);animation:brillo 6s ease-in-out infinite;pointer-events:none}
.portada-in{position:relative;display:flex;flex-direction:column;gap:6px}
.portada-txt{display:flex;flex-direction:column;gap:14px}
.sello{align-self:flex-start;padding:5px 12px;border:1px solid #5c1210;background:rgba(239,7,9,.12);border-radius:20px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ff8a83}
.portada h1{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:36px;line-height:1.1}
.rota{display:inline-grid;color:#ff6159}
.rota span{grid-area:1/1;opacity:0;animation:palabra 9s infinite}
.rota span:nth-child(2){animation-delay:3s}.rota span:nth-child(3){animation-delay:6s}
.franja{display:block;width:90px;height:4px;background:var(--rojo);transform-origin:left;animation:franja 1s .45s cubic-bezier(.6,0,.2,1) both}
.portada p{margin:0;font-size:17px;color:var(--linea)}
.moto{display:block;width:calc(100% + 16px);margin:4px -8px 0;height:auto}
.rueda{transform-box:fill-box;transform-origin:center;animation:girar 1.1s linear infinite}
.ruta{animation:ruta 1.1s linear infinite}
.cuerpo{animation:vaiven 1.6s ease-in-out infinite}
.viento{animation:viento 1.4s linear infinite}
.viento:nth-of-type(2){animation-delay:.45s}.viento:nth-of-type(3){animation-delay:.9s}
.haz{animation:luz 3s ease-in-out infinite}
.mimoto{background:#fff;color:var(--tinta);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);margin-top:-6px}
.mimoto-tit{font-weight:700;display:flex;gap:8px;align-items:center}
.num{width:26px;height:26px;border-radius:50%;background:var(--rojo);color:#fff;display:grid;place-items:center;font-size:14px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dos label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--suave);font-weight:600}
.nota{font-size:13px;color:var(--suave);text-align:center}

/* Accesos rápidos */
.rapidos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.rapido{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px 14px;background:#fff;border:1px solid var(--linea);border-radius:14px;color:var(--tinta);text-align:center;cursor:pointer;font:inherit;transition:transform .2s,box-shadow .2s}
.rapido:active{transform:scale(.97)}
.rapido .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.rapido b{font-size:14px;line-height:1.2}

/* Banda roja */
.banda{background:var(--accion);color:#fff;border-radius:16px;padding:22px 18px;position:relative;overflow:hidden}
.banda::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;border:18px solid rgba(255,255,255,.08)}
.banda .kicker{color:#ffd0cc}
.banda h2{margin:4px 0 6px;font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:27px;line-height:1.15}
.banda p{margin:0 0 16px;color:#ffe3e0;font-size:15px}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:520px}
.dia{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border-radius:9px;background:rgba(255,255,255,.14);font-weight:700;font-size:15px;line-height:1.1}
.dia small{font-size:10px;font-weight:600;opacity:.85}
.dia.hoy{background:#fff;color:var(--accion)}

/* Marcas */
.marcas{overflow:hidden}
.marcas h2{font-size:22px;margin-bottom:12px}
.cinta-caja{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cinta{display:flex;width:max-content;animation:cinta 60s linear infinite;padding:4px 0 6px}
.cinta.lenta{animation-duration:90s;animation-direction:reverse;margin-top:6px}
.cinta-caja:hover .cinta,.cinta-caja:active .cinta{animation-play-state:paused}
.logo-marca{width:132px;height:96px;margin-right:10px;background:#fff;border:1px solid var(--linea);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;flex:none}
.logo-marca .tira{height:5px;display:flex}.logo-marca .tira span{flex:2}.logo-marca .tira span+span{flex:1}
.logo-marca .cuerpo-m{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 8px;text-align:center}
.logo-marca .recorte{overflow:hidden}
.logo-marca img{display:block;height:auto}
.logo-marca b{font-family:'Barlow Condensed',sans-serif;font-size:25px;letter-spacing:.04em;line-height:1}
.logo-marca small{font-size:11px;color:var(--suave);line-height:1.2}
.logo-marca.azul small{color:#dce4f5}
.moto-txt{display:flex;align-items:center;gap:22px;padding-right:22px;font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--suave);white-space:nowrap}
.moto-txt::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--rojo)}

/* Productos */
.destacados{position:relative}
.fondo-marca{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden;font-family:'Alfa Slab One',Georgia,serif;font-size:110px;color:rgba(23,21,20,.04)}
.fondo-marca span{grid-area:1/1;opacity:0;animation:fundido 20s infinite;white-space:nowrap}
.fondo-marca span:nth-child(2){animation-delay:5s}.fondo-marca span:nth-child(3){animation-delay:10s}.fondo-marca span:nth-child(4){animation-delay:15s}
.carril{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 14px;scrollbar-width:none;position:relative;max-width:1160px;margin:0 auto}
.carril::-webkit-scrollbar{display:none}
.carril>*{scroll-snap-align:start;flex:none;width:200px}
.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.prod{background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0;transition:transform .2s,box-shadow .2s}
.prod:active{transform:scale(.97)}
.prod .foto{aspect-ratio:1;background:linear-gradient(135deg,#f1efed,#e3e0dd);display:grid;place-items:center;color:var(--acero);overflow:hidden}
.prod .foto img{width:100%;height:100%;object-fit:cover}
.prod .info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.prod .para{font-size:12px;color:var(--suave)}
.prod .nom{font-weight:700;font-size:15px;line-height:1.3}
.disp{font-size:12px;font-weight:700}.disp.hay{color:var(--ok)}.disp.pocas{color:var(--poco)}
.disp.no{color:var(--accion);font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.sin-stock-nota{margin:10px 0 14px;color:var(--suave)}
.vacio{display:flex;flex-direction:column;align-items:center;gap:6px}
.vacio b{font-size:18px;color:var(--tinta)}
.dibujo-vacio{width:220px;max-width:80%;height:auto;margin-bottom:4px}
.dibujo-vacio .lupa{animation:revisar 3.2s ease-in-out infinite;transform-box:view-box;transform-origin:150px 50px}
.dibujo-vacio .tapa-izq{transform-box:fill-box;transform-origin:100% 0;animation:tapaI 3.2s ease-in-out infinite}
.dibujo-vacio .tapa-der{transform-box:fill-box;transform-origin:0 0;animation:tapaD 3.2s ease-in-out infinite}
.dibujo-vacio .preg{animation:pregunta 3.2s ease-out infinite;opacity:0}
.dibujo-vacio .p2{animation-delay:1.1s}
@keyframes revisar{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-62px,30px) rotate(-8deg)}60%{transform:translate(-18px,40px) rotate(6deg)}}
@keyframes tapaI{0%,100%{transform:rotate(0)}45%{transform:rotate(-7deg)}}
@keyframes tapaD{0%,100%{transform:rotate(0)}55%{transform:rotate(7deg)}}
@keyframes pregunta{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}70%{opacity:0;transform:translateY(-14px)}100%{opacity:0}}
.precio{margin-top:auto;padding-top:4px;font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;line-height:1.1}
.vacio{grid-column:1/-1;background:#fff;border:1px dashed var(--acero);border-radius:14px;padding:22px;text-align:center;color:var(--suave)}
.vacio .btn{margin-top:12px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chip{flex:none;min-height:40px;padding:0 14px;border-radius:20px;border:1.5px solid var(--linea);background:#fff;font:inherit;font-weight:600;font-size:14px;cursor:pointer;color:var(--tinta)}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.cat-sub{margin:-6px 0 10px;color:var(--suave);font-size:15px}

/* Tarjetas grandes */
.dos-tarj{display:grid;gap:12px}
.tarj-negra,.tarj-blanca{border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;gap:8px}
.tarj-negra{background:var(--tinta);color:#fff}.tarj-negra p{color:var(--linea)}
.tarj-blanca{background:#fff;border:1px solid var(--linea)}.tarj-blanca p{color:var(--suave)}
.tarj-negra h3,.tarj-blanca h3{font-size:23px;line-height:1.2}
.tarj-negra p,.tarj-blanca p{margin:0;font-size:15px}
.tarj-negra .btn,.tarj-blanca .btn{margin-top:auto}
.fila-h{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid #ebe9e7;font-size:15px}
.fila-h.hoy{font-weight:700}
.estado-corto{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700}
.donde{display:flex;gap:8px;align-items:center;color:var(--tinta)!important}

/* Puntos */
.puntos{margin-top:22px;background:#000;color:#fff;position:relative;overflow:hidden;padding:32px 0}
.brillo.b2{left:-40%;right:auto;bottom:-30%;top:auto;height:90%}
.puntos-in{position:relative;display:flex;flex-direction:column;gap:18px}
.puntos-txt{display:flex;flex-direction:column;gap:10px;max-width:560px}
.puntos h2{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:30px;line-height:1.12}
.puntos p{margin:0;color:var(--linea)}
.barra-caja{display:flex;flex-direction:column;gap:6px}
.barra-fila{display:flex;justify-content:space-between;font-size:13px;color:var(--acero)}
.barra{height:10px;border-radius:5px;background:#2e2b29;overflow:hidden}
.barra-pts{height:100%;width:0;background:linear-gradient(90deg,var(--accion),var(--rojo));border-radius:5px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.tablero{position:relative;background:#121110;border:1px solid #2e2b29;border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;gap:14px;max-width:560px}
.tablero-top{display:flex;align-items:center;gap:6px}
.taco{width:52%;max-width:240px;height:auto;flex:none}
.cuenta{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.cuenta-lbl{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ff6159}
.cuenta>b{font-family:"Barlow Condensed",sans-serif;font-size:46px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cuenta-sub{font-size:13px;color:var(--acero)}
.canje{margin-top:8px;font-size:13px;color:var(--linea);line-height:1.35}
.canje b{color:#fff}
.proxima{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--linea)}
.proxima b{color:#fff}
.niveles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.niveles li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#1c1a19;border:1px solid #2e2b29;transition:border-color .3s}
.niveles .ic-niv{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.niveles .abierto .ic-niv{background:var(--rojo);color:#fff}
.niveles .cerrado .ic-niv{background:#2e2b29;color:#a8a19c}
.niveles .niv-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.niveles b{color:#fff;font-size:15px}
.niveles small{color:#a8a19c;font-size:12px}
.niveles .premio{font-size:13px;color:var(--linea)}
.niveles .cerrado .premio{color:transparent;text-shadow:0 0 7px rgba(255,255,255,.55);user-select:none}
.niveles .actual{border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo) inset}
.mis-puntos{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.mis-puntos label{font-weight:700;color:#fff}
.fila-ced{display:flex;gap:8px}
.fila-ced input{background:#000;color:#f2f0ee;border-color:#7aa5d6}
.fila-ced .btn{flex:none;min-width:84px}
.pts-msj{font-size:14px;color:var(--linea);min-height:1em}
.pts-msj.error{color:#ff8a83}.pts-msj.ok{color:#8fe0b0}
.chispa{position:absolute;left:28%;top:28%;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:chispa 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes chispa{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--x),var(--y)) rotate(260deg);opacity:0}}
.barra-nota{font-size:13px;color:var(--linea)}

/* Pie */
.pie{margin-top:28px;background:#000;color:var(--linea);border-top:4px solid var(--rojo);font-size:14px;padding:28px 0 100px}
.pie-in{display:grid;gap:18px}
.pie-in>div{display:flex;flex-direction:column;gap:4px}
.pie b{color:#fff}
.pie-marca{flex-direction:row!important;gap:12px!important;align-items:center}
.pie-marca img{width:64px;height:64px;object-fit:cover}
.pie-legal{margin-top:18px;padding-top:14px;border-top:1px solid #2e2b29;font-size:12px;color:#a8a19c}

/* Barra de abajo */
.barra-abajo{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--linea);display:flex;gap:8px}
.barra-abajo .btn{flex:1;min-height:52px;border-radius:10px}
.barra-abajo .btn.rojo{flex:1.6}

/* Ficha que sube desde abajo */
.hoja-fondo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;animation:aparecer .2s both}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:41;background:#fff;border-radius:18px 18px 0 0;max-height:88vh;overflow-y:auto;padding:10px 16px calc(18px + env(safe-area-inset-bottom));animation:subirHoja .28s cubic-bezier(.2,.7,.2,1) both;max-width:640px;margin:0 auto}
.hoja .agarre{width:44px;height:5px;border-radius:3px;background:var(--linea);margin:0 auto 12px}
.hoja .cerrar{position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--suave)}
.hoja .foto-g{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,#f1efed,#e3e0dd);display:grid;place-items:center;color:var(--acero);overflow:hidden;margin-bottom:12px}
.hoja .foto-g img{width:100%;height:100%;object-fit:contain;background:#fff}
.hoja h3{font-size:22px;line-height:1.25;margin:4px 0}
.hoja .precio{font-size:32px}
.hoja .desc{color:var(--suave);margin:6px 0}
.cant{display:flex;align-items:center;gap:12px;margin:14px 0}
.cant button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--tinta);background:#fff;font-size:22px;font-weight:700;cursor:pointer}
.cant b{font-size:22px;min-width:30px;text-align:center}
.hoja .acciones{display:grid;gap:8px}
.linea-ped{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #ebe9e7;align-items:center}
.linea-ped .quitar{border:0;background:none;color:var(--rojo-txt);font:inherit;font-weight:600;cursor:pointer;min-height:40px}
.total-ped{display:flex;justify-content:space-between;font-weight:700;font-size:18px;padding:12px 0}

/* Animaciones */
@keyframes subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes franja{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes palabra{0%{opacity:0;transform:translateY(40%)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(92,192,138,.55)}60%{box-shadow:0 0 0 7px rgba(92,192,138,0)}}
@keyframes brillo{0%,100%{opacity:.35;transform:scale(.95)}50%{opacity:.65;transform:scale(1.05)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes ruta{to{stroke-dashoffset:-60}}
@keyframes vaiven{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes viento{0%{transform:translateX(30px);opacity:0}30%{opacity:.8}100%{transform:translateX(-50px);opacity:0}}
@keyframes luz{0%,100%{opacity:.25}50%{opacity:.5}}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fundido{0%,100%{opacity:0}8%,25%{opacity:1}33%{opacity:0}}
@keyframes llenar{from{width:0}to{width:76%}}
@keyframes aparecer{from{opacity:0}}
@keyframes subirHoja{from{transform:translateY(100%)}}
.e1{animation:subir .7s cubic-bezier(.2,.7,.2,1) both}
.e2{animation:subir .7s .12s cubic-bezier(.2,.7,.2,1) both}
.e3{animation:subir .7s .24s cubic-bezier(.2,.7,.2,1) both}
.e4{animation:subir .8s .36s cubic-bezier(.2,.7,.2,1) both}
@supports (animation-timeline:view()){
.rv{animation:subir linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}

/* En la compu */
@media (min-width:900px){
h2{font-size:30px}
.puntos-in{flex-direction:row;align-items:center;gap:48px}
.puntos-txt{flex:1}
.tablero{flex:0 0 520px}
.cab-in{flex-wrap:nowrap;padding:12px 24px}
.marca{flex:none}
.buscador{order:0;flex:1 1 auto}
.solo-compu{display:inline-flex}
.cont{padding-left:24px;padding-right:24px}
.portada{padding:64px 0 72px}
.portada-in{flex-direction:row;align-items:center;gap:48px}
.portada-txt{flex:1}
.portada-moto{flex:0 0 440px}
.portada h1{font-size:56px}
.portada p{font-size:19px}
.rapidos{grid-template-columns:repeat(6,1fr)}
.banda{padding:32px}
.banda h2{font-size:36px}
.carril{padding:4px 24px 14px}
.carril>*{width:230px}
.grilla{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.dos-tarj{grid-template-columns:1fr 1fr}
.pie-in{grid-template-columns:repeat(4,1fr)}
.pie{padding-bottom:40px}
.barra-abajo{display:none}
.hoja{bottom:auto;top:50%;transform:translateY(-50%);border-radius:18px;animation:aparecer .2s both}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.rota span{opacity:0}.rota span:first-child{opacity:1}
.fondo-marca span:first-child{opacity:1}
}