/* Portada Motoboard 2026 · generado por build-tienda.mjs · no editar a mano */

@font-face{font-family:"BS";src:url(/modules/mbportada/views/fuentes/BigShouldersDisplay.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow";src:url(/modules/mbportada/views/fuentes/Barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/modules/mbportada/views/fuentes/Barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/modules/mbportada/views/fuentes/Barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
#mbp{
  --carbon:#0B0B0C; --carbon-2:#151517; --linea:#26262a; --hueso:#F2F1ED; --borde:#E2E1DB; --gris:#9A9A95; --gris-osc:#6b6b66;
  --rojo:#EF392C; --rojo-osc:#d42c20; --jetsurf:#FF4800;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.77,0,.18,1);
  --gutter:clamp(16px,3vw,48px); --ancho:1480px; --hueco:12px; --radio:14px;
}
#mbp,#mbp *{box-sizing:border-box}
#mbp{-webkit-text-size-adjust:100%}
#mbp{margin:0;background:var(--hueso);color:var(--carbon);font:400 16px/1.5 Barlow,system-ui,sans-serif;overflow-x:hidden}
#mbp a{color:inherit;text-decoration:none}
#mbp img{display:block;max-width:100%;height:auto}
#mbp button{font:inherit;color:inherit}
#mbp .display{font-family:BS,Impact,sans-serif;font-weight:800;text-transform:uppercase;line-height:.9}
#mbp .envuelve{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
#mbp .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 Barlow,sans-serif;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease-out),background-color .2s,color .2s,border-color .2s}
#mbp .btn:active{transform:scale(.97)}
#mbp .btn--rojo{background:var(--rojo);color:#fff}#mbp .btn--rojo:hover{background:var(--rojo-osc)}
#mbp .btn--linea{border:1.5px solid rgba(255,255,255,.7);color:#fff;background:transparent}#mbp .btn--linea:hover{background:#fff;color:var(--carbon);border-color:#fff}
#mbp .btn--oscuro{background:var(--carbon);color:#fff}#mbp .btn--oscuro:hover{background:#000}
#mbp .btn svg{width:17px;height:17px}
#mbp :focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* ---------- CABECERA ---------- */
#mbp .aviso{background:#000;color:#cfcfca;font-size:13px}
#mbp .aviso .envuelve{display:flex;justify-content:space-between;gap:20px;height:32px;align-items:center}
#mbp .aviso b{color:#fff;font-weight:600}#mbp .aviso .der{display:flex;gap:22px}#mbp .aviso a:hover{color:#fff}
#mbp .cab{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#EDEDEA}
#mbp .cab__fila{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:68px}
#mbp .cab__logo img{height:30px;width:auto}
#mbp .buscador{flex:1;max-width:620px;position:relative}
#mbp .buscador input{width:100%;height:44px;border-radius:999px;border:1px solid #333;background:#1a1a1d;color:#fff;font:400 15px Barlow,sans-serif;padding:0 50px 0 20px}
#mbp .buscador input::placeholder{color:#8a8a85}
#mbp .buscador input:focus{outline:0;border-color:var(--rojo)}
#mbp .buscador button{position:absolute;right:4px;top:4px;width:36px;height:36px;border-radius:50%;border:0;background:var(--rojo);display:grid;place-items:center;cursor:pointer}
#mbp .buscador button svg{width:18px;height:18px;color:#fff}
#mbp .cab__iconos{display:flex;gap:4px;margin-left:auto}
#mbp .cab__iconos a{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:500;position:relative}
#mbp .cab__iconos a:hover{background:rgba(255,255,255,.08)}
#mbp .cab__iconos svg{width:22px;height:22px}
#mbp .cuenta{position:absolute;top:3px;left:24px;min-width:17px;height:17px;border-radius:9px;background:var(--rojo);font:600 11px/17px Barlow;text-align:center;color:#fff}
#mbp .menu{border-top:1px solid var(--linea)}
#mbp .menu ul{list-style:none;margin:0 auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
#mbp .menu ul::-webkit-scrollbar{display:none}
#mbp .menu a{display:block;white-space:nowrap;padding:12px 11px;font:600 14px/1 Barlow,sans-serif;color:#d8d8d3;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
#mbp .menu a:hover{color:#fff;border-color:var(--rojo)}
#mbp .menu li:first-child a{padding-left:0}
#mbp .menu a.roja{color:var(--rojo)}

/* ---------- MOSAICO: rejilla de 12 columnas ---------- */
#mbp .bloque{padding:var(--hueco) 0 0}
#mbp .bloque:first-of-type{padding-top:16px}
#mbp .mosaico{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--hueco)}
#mbp .cuadro{position:relative;border-radius:var(--radio);overflow:hidden;background:#fff;border:1px solid var(--borde);min-width:0}
#mbp .cuadro.osc{background:var(--carbon);color:#EDEDEA;border-color:var(--carbon)}
#mbp .c12{grid-column:span 12}#mbp .c8{grid-column:span 8}#mbp .c6{grid-column:span 6}#mbp .c4{grid-column:span 4}#mbp .c3{grid-column:span 3}#mbp .c2{grid-column:span 2}
#mbp .f2{grid-row:span 2}
#mbp .titulo-bloque{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:clamp(24px,2.6vw,36px) 0 clamp(12px,1.4vw,18px)}
#mbp .titulo-bloque h2{margin:0;font-size:clamp(30px,3.2vw,48px)}
#mbp .titulo-bloque p{margin:2px 0 0;color:var(--gris-osc);font-size:15px}
#mbp .ver-todo{font-weight:600;white-space:nowrap;border-bottom:2px solid currentColor;padding-bottom:2px}
#mbp .ver-todo:hover{color:var(--rojo)}

/* 1 · primera pantalla */
#mbp .primera{height:clamp(440px,calc(100svh - 160px),600px);grid-template-rows:1fr 1fr}

/* look Jetpilot (vídeo + prenda) */
#mbp .hero{isolation:isolate;background:#1C0A03}
#mbp .mundo{position:absolute;inset:0;background:var(--osc);clip-path:circle(0% at 68% 50%);z-index:1}
#mbp .mundo.base{clip-path:none}
#mbp .mundo.abre{animation:abre 1s var(--ease-io) forwards}
@keyframes abre{to{clip-path:circle(150% at 68% 50%)}}
#mbp .mundo__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);opacity:.72;transform:scale(1.06);transition:transform 7s linear}
#mbp .mundo.activo .mundo__foto{transform:scale(1)}
#mbp .mundo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--osc) 0%,color-mix(in srgb,var(--osc) 70%,transparent) 38%,transparent 66%),linear-gradient(0deg,color-mix(in srgb,var(--osc) 80%,transparent) 0%,transparent 35%)}
#mbp .mundo__palabra{position:absolute;right:-1%;top:50%;transform:translateY(-52%);z-index:2;font:900 clamp(100px,15vw,280px)/.8 BS,Impact,sans-serif;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--claro);opacity:.42;white-space:nowrap;pointer-events:none;translate:calc(var(--mx,0)*-36px) 0;transition:translate .6s var(--ease-out)}
#mbp .onda{position:absolute;z-index:6;left:68%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--claro,#fff);opacity:0;pointer-events:none}
#mbp .onda.va{animation:onda 1s var(--ease-out)}
@keyframes onda{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(50)}}
#mbp .escena{position:absolute;inset:0;z-index:5;pointer-events:none;perspective:1400px}
#mbp .escena__in{position:absolute;inset:0;transform:rotateY(calc(var(--mx,0)*9deg)) rotateX(calc(var(--my,0)*-5deg)) translate3d(calc(var(--mx,0)*14px),calc(var(--my,0)*8px),0);transition:transform .6s var(--ease-out)}
#mbp .hero::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.15;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#mbp .prenda{position:absolute;left:70%;top:50%;height:88%;width:auto;max-width:none;transform:translate(-50%,var(--ty,-50%)) scale(1.12) rotate(5deg);opacity:0;filter:blur(10px) drop-shadow(0 30px 34px rgba(0,0,0,.5));transition:opacity .5s ease,transform .9s var(--ease-out),filter .7s ease}
#mbp .prenda.vest{height:74%}
#mbp .prenda.activa{opacity:1;transform:translate(-50%,var(--ty,-50%));filter:drop-shadow(0 30px 34px rgba(0,0,0,.5));transition-delay:.15s}
#mbp .prenda.sale{opacity:0;transform:translate(-62%,var(--ty,-50%)) scale(.88) rotate(-4deg);filter:blur(12px);transition-duration:.45s,.6s,.45s;transition-delay:0s}
#mbp .hero__info{position:absolute;z-index:8;left:clamp(20px,2.6vw,40px);top:calc(50% - 20px);transform:translateY(-50%);width:min(46%,460px)}
#mbp .looks{position:relative}
#mbp .look{position:absolute;left:0;top:0;width:100%;visibility:hidden;transition:visibility 0s .5s}
#mbp .look.activo{position:relative;visibility:visible;transition-delay:0s}
#mbp .look__kicker{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 12px/1.2 Barlow;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
#mbp .look__kicker::before{content:"";width:22px;height:2px;background:var(--claro)}
#mbp .look__lin{overflow:hidden;display:block}
#mbp .look__lin>span{display:block;transform:translateY(105%);transition:transform .75s var(--ease-out)}
#mbp .look.activo .look__lin>span{transform:none;transition-delay:calc(.2s + var(--d,0s))}
#mbp .look__titulo{margin:0;font-size:clamp(44px,min(5.4vw,9vh),92px);color:#fff}
#mbp .look__titulo .c{color:var(--claro)}
#mbp .look__datos{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:12px 0 16px;color:rgba(255,255,255,.85);font-size:15px}
#mbp .look__precio{font:600 24px/1 Barlow;color:#fff}
#mbp .look__btns{display:flex;gap:8px;flex-wrap:wrap}
#mbp .look .fade{opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--ease-out)}
#mbp .look.activo .fade{opacity:1;transform:none;transition-delay:.45s}
#mbp .hero__mando{position:absolute;z-index:9;left:clamp(20px,2.6vw,40px);right:clamp(20px,2.6vw,40px);bottom:16px;display:flex;align-items:center;gap:14px}
#mbp .puntos{display:flex;gap:6px}
#mbp .puntos button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border-radius:999px;background:rgba(0,0,0,.32);backdrop-filter:blur(8px);font:600 11px/1 Barlow;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:background-color .3s,color .3s}
#mbp .puntos button i{width:11px;height:11px;border-radius:50%;background:var(--c)}
#mbp .puntos button[aria-current="true"]{background:rgba(255,255,255,.95);color:var(--carbon)}
#mbp .progreso{flex:1;max-width:120px;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
#mbp .progreso i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
#mbp .progreso i.corre{animation:prog var(--t,6s) linear forwards}
@keyframes prog{to{transform:scaleX(1)}}
#mbp .flechas{margin-left:auto;display:flex;gap:6px}
#mbp .flechas button{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;display:grid;place-items:center;cursor:pointer;color:#fff;transition:background-color .2s,color .2s}
#mbp .flechas button:hover{background:#fff;color:var(--carbon)}
#mbp .flechas svg{width:16px;height:16px}

/* Jetsurf (cuadro oscuro) */
#mbp .c-jetsurf{background:radial-gradient(90% 100% at 85% 90%,#3a1606 0%,var(--carbon) 70%);color:#EDEDEA;border-color:var(--carbon);display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px)}
#mbp .c-jetsurf small,#mbp .c-ultima small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
#mbp .c-jetsurf h3{margin:8px 0 6px;font-size:clamp(30px,2.6vw,44px)}
#mbp .c-jetsurf h3 span{color:var(--jetsurf)}
#mbp .c-jetsurf p{margin:0;font-size:14.5px;color:#cfcfca;max-width:58%}
#mbp .c-jetsurf .enl{text-shadow:0 1px 8px rgba(0,0,0,.8);margin-top:auto;display:flex;flex-direction:column;gap:6px;position:relative;z-index:2;font-weight:600;font-size:14.5px}
#mbp .c-jetsurf .enl a{display:inline-flex;align-items:center;gap:8px;width:max-content}
#mbp .c-jetsurf .enl a:hover{color:var(--jetsurf)}
#mbp .c-jetsurf .enl b{color:var(--jetsurf)}
#mbp .c-jetsurf img{position:absolute;right:-9%;bottom:-3%;width:54%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.6));transition:transform .8s var(--ease-out)}
#mbp .c-jetsurf:hover img{transform:translate(-8px,-4px) rotate(-2deg)}

/* Última unidad (cuadro claro) */
#mbp .c-ultima{display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px)}
#mbp .c-ultima .cab-c{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#mbp .c-ultima h3{margin:8px 0 0;font-size:clamp(30px,2.6vw,44px);color:var(--rojo)}
#mbp .c-ultima .minis{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#mbp .mini{display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.25}
#mbp .mini .im{aspect-ratio:1;border-radius:8px;background:#f6f6f3;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden}
#mbp .mini img{max-width:100%;max-height:100%;width:auto;height:auto;transition:transform .5s var(--ease-out)}
#mbp .mini:hover img{transform:scale(1.07)}
#mbp .mini b{font-weight:600;font-size:14px}

/* categorías */
#mbp .cat{display:flex;flex-direction:column;transition:transform .35s var(--ease-out),box-shadow .35s}
#mbp .cat:hover{transform:translateY(-3px);box-shadow:0 16px 28px -18px rgba(0,0,0,.4)}
#mbp .cat .im{height:clamp(96px,8vw,128px);display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}
#mbp .cat img{max-width:100%;max-height:100%;width:auto;height:auto;transform:scale(1.2);transition:transform .5s var(--ease-out)}
#mbp .cat:hover img{transform:scale(1.28)}
#mbp .cat .tx{padding:8px 12px 10px;border-top:1px solid #eeede8}
#mbp .cat b{display:block;font:700 18px/1 BS,Impact,sans-serif;text-transform:uppercase}
#mbp .cat span{font-size:12.5px;color:var(--gris-osc)}
#mbp .cat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
#mbp .cat:hover::after{transform:scaleX(1)}

/* producto estrella + productos */
#mbp .estrella{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:12px;padding:clamp(18px,2vw,30px)}
#mbp .estrella .im{height:100%;min-height:260px;display:flex;align-items:center;justify-content:center;position:relative}
#mbp .estrella .im::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle,#ffe1dd 0%,transparent 70%)}
#mbp .estrella img{position:relative;max-height:300px;width:auto;transition:transform .7s var(--ease-out)}
#mbp .estrella:hover img{transform:rotate(-4deg) scale(1.04)}
#mbp .estrella small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-osc)}
#mbp .estrella h3{margin:8px 0 10px;font-size:clamp(30px,2.8vw,46px)}
#mbp .estrella p{margin:0 0 14px;color:#55554f;font-size:15px}
#mbp .colores{display:flex;gap:6px;margin:0 0 16px}
#mbp .colores i{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc}
#mbp .estrella .precio{font:600 26px/1 Barlow;margin:0 0 16px}
#mbp .prod{display:flex;flex-direction:column;transition:box-shadow .3s}
#mbp .prod:hover{box-shadow:0 16px 28px -18px rgba(0,0,0,.4)}
#mbp .prod .im{position:relative;aspect-ratio:1/0.9;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden}
#mbp .prod img{width:100%;height:100%;object-fit:contain;transform:scale(1.03);transition:transform .5s var(--ease-out)}
#mbp .prod:hover img{transform:scale(1.08)}
#mbp .prod .flag{z-index:2;position:absolute;left:10px;top:10px;background:var(--rojo);color:#fff;font:600 10.5px/1 Barlow;letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border-radius:4px}
#mbp .prod .tx{padding:10px 12px 12px;border-top:1px solid #eeede8;display:flex;flex-direction:column;gap:4px}
#mbp .prod .marca{font:600 10.5px/1 Barlow;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-osc)}
#mbp .prod .nom{font-size:14px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
#mbp .prod .pie{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
#mbp .prod .precio{font-weight:600;font-size:16px}
#mbp .prod .ir{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:999px;background:var(--carbon);color:#fff;font:600 14px/1 Barlow;transition:background-color .2s}
#mbp .prod:hover .ir{background:var(--rojo)}

/* fila Yachtbeach / Seabob / Blog */
#mbp .c-foto{min-height:clamp(260px,24vw,340px);display:flex;align-items:flex-end;color:#fff}
#mbp .c-foto>img,#mbp .c-foto>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
#mbp .c-foto:hover>img{transform:scale(1.04)}
#mbp .c-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.18) 55%,transparent 75%)}
#mbp .c-foto .tx{position:relative;z-index:2;padding:clamp(18px,2vw,28px)}
#mbp .c-foto small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
#mbp .c-foto h3{margin:6px 0 6px;font-size:clamp(30px,2.8vw,46px)}
#mbp .c-foto p{margin:0 0 14px;color:#e6e6e2;font-size:15px;max-width:420px}
#mbp .c-seabob{display:flex;flex-direction:column;padding:clamp(18px,1.8vw,24px)}
#mbp .c-seabob .im{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px}
#mbp .c-seabob img{max-height:150px;width:auto;transform:scale(1.25);transition:transform .7s var(--ease-out)}
#mbp .c-seabob:hover img{transform:scale(1.32) translateX(6px)}
#mbp .c-seabob small,#mbp .c-blog small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-osc)}
#mbp .c-seabob h3{margin:6px 0 4px;font-size:clamp(26px,2.2vw,36px)}
#mbp .c-seabob p{margin:0;color:#55554f;font-size:14px}
#mbp .c-seabob .ver-todo{margin-top:12px;width:max-content}
#mbp .c-blog{padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column}
#mbp .c-blog ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
#mbp .c-blog li a{display:block;padding:12px 0;border-bottom:1px solid #eeede8;font:700 19px/1.05 BS,Impact,sans-serif;text-transform:uppercase;transition:color .2s}
#mbp .c-blog li a:hover{color:var(--rojo)}
#mbp .c-blog li span{display:block;font:600 11px/1 Barlow;letter-spacing:.12em;color:var(--gris-osc);margin-bottom:5px}
#mbp .c-blog .ver-todo{margin-top:auto;padding-top:12px;width:max-content}

/* banda de cine */
#mbp .banda{min-height:clamp(260px,26vw,380px);display:flex;flex-direction:column;justify-content:center;isolation:isolate}
#mbp .banda video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
#mbp .banda::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,.12) 45%,rgba(11,11,12,.7) 100%)}
#mbp .banda__linea{display:flex;white-space:nowrap;font:900 clamp(56px,8vw,140px)/.88 BS,Impact,sans-serif;text-transform:uppercase;color:#fff;will-change:transform}
#mbp .banda__linea span{padding-right:.35em}
#mbp .banda__linea .hueca{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85)}
#mbp .banda__linea .roja{color:var(--rojo)}

/* confianza */
#mbp .conf{display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:14.5px;color:#3a3a37}
#mbp .conf svg{flex:none;width:24px;height:24px;color:var(--rojo)}
#mbp .conf b{font-weight:600;color:var(--carbon)}
#mbp .conf a{text-decoration:underline;text-underline-offset:3px}

/* pie */
#mbp .pie{margin-top:var(--hueco)}
#mbp .pie .cuadro{padding:clamp(28px,3vw,48px) clamp(20px,3vw,44px) 22px;border-radius:var(--radio) var(--radio) 0 0}
#mbp .pie__arriba{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--linea)}
#mbp .pie__logo{height:36px;width:auto;margin-bottom:14px}
#mbp .pie p{margin:0 0 6px;color:#bdbdb8}
#mbp .pie h4{margin:0 0 12px;font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
#mbp .pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
#mbp .pie ul a:hover{color:var(--rojo)}
#mbp .pie__tel{font:800 clamp(32px,3vw,44px)/1 BS,Impact,sans-serif;display:block;margin:2px 0 6px}
#mbp .pie__abajo{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-size:13px;color:#86867f}
#mbp .pagos{display:flex;gap:6px;flex-wrap:wrap}
#mbp .pagos span{border:1px solid #333;border-radius:4px;padding:4px 8px;font-size:11.5px;font-weight:600;color:#bdbdb8}

/* ===== orden de Antonio (03/10): slider bajo a todo el ancho ===== */
#mbp .slider{height:clamp(380px,calc(100svh - 430px),500px)}
#mbp .slider .prenda{left:68%}
#mbp .slider .hero__info{width:min(44%,560px);left:clamp(24px,3.4vw,56px)}
#mbp .slider .hero__mando{left:clamp(24px,3.4vw,56px);right:clamp(24px,3.4vw,56px)}
#mbp .slider .mundo__palabra{font-size:clamp(110px,17vw,300px)}

/* Jetsurf a lo ancho: texto y cifras a la izquierda, tabla a la derecha */
#mbp .c-js{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(22px,2.8vw,40px);background:radial-gradient(70% 90% at 80% 50%,#3a1606 0%,var(--carbon) 68%);color:#EDEDEA;border-color:var(--carbon)}
#mbp .c-js small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
#mbp .c-js h2{margin:8px 0 16px;font-size:clamp(32px,3.6vw,56px)}
#mbp .c-js h2 span{color:var(--jetsurf)}
#mbp .cifras{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(16px,2.4vw,36px)}
#mbp .cifras b{display:block;font:800 clamp(30px,3vw,46px)/.9 BS,Impact,sans-serif;color:#fff}
#mbp .c-js .cifras b small{font:800 .45em/1 BS,Impact,sans-serif;text-transform:none;letter-spacing:0;color:var(--jetsurf);margin-left:3px}
#mbp .cifras span{font-size:12.5px;color:var(--gris)}
#mbp .c-js .nota{margin:6px 0 14px;font-size:12.5px;color:var(--gris)}
#mbp .modelos{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid #2c2c2e}
#mbp .modelos a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #2c2c2e;transition:padding .3s var(--ease-out),color .2s}
#mbp .modelos a:hover{padding-left:8px;color:var(--jetsurf)}
#mbp .modelos .n{font:700 20px/1 BS,Impact,sans-serif;text-transform:uppercase}
#mbp .modelos .p{font-weight:600;white-space:nowrap}
#mbp .modelos .etq{margin-left:10px;font:600 10.5px/1 Barlow;letter-spacing:.08em;text-transform:uppercase;color:#111;background:var(--jetsurf);padding:4px 7px;border-radius:3px;vertical-align:middle}
#mbp .btn--js{background:var(--jetsurf);color:#fff}#mbp .btn--js:hover{background:#e04000}
#mbp .c-js__img{position:relative}
#mbp .c-js__img::before{content:"JETSURF";position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);font:900 clamp(80px,10vw,190px)/.8 BS,Impact,sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(255,72,0,.45);white-space:nowrap}
#mbp .c-js__img img{position:relative;width:100%;filter:drop-shadow(0 30px 34px rgba(0,0,0,.7));transition:transform .9s var(--ease-out)}
#mbp .c-js:hover .c-js__img img{transform:translateX(-10px) rotate(-1.5deg)}

/* Seabob en claro, foto a la derecha */
#mbp .c-seabob2{display:grid;grid-template-columns:1fr 1fr;align-items:end;min-height:clamp(260px,24vw,340px)}
#mbp .c-seabob2 .tx{padding:clamp(18px,2vw,28px);align-self:end}
#mbp .c-seabob2 small,#mbp .c-post small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-osc)}
#mbp .c-seabob2 h3{margin:6px 0 6px;font-size:clamp(30px,2.8vw,46px)}
#mbp .c-seabob2 p{margin:0 0 14px;color:#55554f;font-size:15px}
#mbp .c-seabob2 .im{align-self:center;display:flex;align-items:center;justify-content:center;padding:16px;height:100%}
#mbp .c-seabob2 img{max-width:100%;max-height:220px;width:auto;transform:scale(1.35);transition:transform .7s var(--ease-out)}
#mbp .c-seabob2:hover img{transform:scale(1.42) translateX(6px)}

/* artículos del blog */
#mbp .c-post{display:flex;flex-direction:column;padding:clamp(16px,1.6vw,22px);min-height:150px;transition:box-shadow .3s}
#mbp .c-post:hover{box-shadow:0 16px 28px -18px rgba(0,0,0,.4)}
#mbp .c-post h3{margin:10px 0 12px;font:700 clamp(20px,1.6vw,25px)/1.04 BS,Impact,sans-serif;text-transform:uppercase}
#mbp .c-post .leer{margin-top:auto;font-weight:600;font-size:14px;color:var(--rojo)}
#mbp .c-post::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
#mbp .c-post:hover::after{transform:scaleX(1)}

@media (max-width:1000px){
  #mbp .c-js{grid-template-columns:1fr}
  #mbp .c-js__img{order:-1;max-width:640px}
  #mbp .c-seabob2{grid-column:span 12}
  #mbp .c-post{grid-column:span 6}
}
@media (max-width:700px){
  #mbp .cifras{grid-template-columns:repeat(2,auto)}
  #mbp .modelos .n{font-size:18px}
  #mbp .c-seabob2{grid-template-columns:1fr}
  #mbp .c-seabob2 .im{order:-1;height:160px;padding:10px;overflow:hidden}
  #mbp .c-seabob2 img{transform:scale(1.05);max-height:140px}#mbp .c-seabob2:hover img{transform:scale(1.1)}
  #mbp .c-post{grid-column:span 12;min-height:0}
  #mbp .slider .hero__info{width:auto;left:16px}
  #mbp .slider .prenda{left:50%}
  #mbp .slider .hero__mando{left:16px;right:16px}
  #mbp .slider .mundo__palabra{font-size:44vw}
}

/* ===== Tablas a motor: catálogo que se pasa ===== */
#mbp .c-tablas{padding:clamp(20px,2.6vw,36px);background:radial-gradient(60% 120% at 90% 0%,#2a1206 0%,var(--carbon) 60%)}
#mbp .c-tablas__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
#mbp .c-tablas small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
#mbp .c-tablas h2{margin:8px 0 0;font-size:clamp(34px,3.8vw,56px);color:#fff}
#mbp .c-tablas__acc{display:flex;align-items:center;gap:16px}
#mbp .c-tablas .ver-todo{color:#fff}#mbp .c-tablas .ver-todo:hover{color:var(--jetsurf)}
#mbp .rail__flechas{display:flex;gap:8px}
#mbp .rail__flechas button{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s,opacity .2s}
#mbp .rail__flechas button:hover{background:#fff;color:var(--carbon)}
#mbp .rail__flechas button:disabled{opacity:.25;cursor:default;background:transparent;color:#fff}
#mbp .rail__flechas svg{width:17px;height:17px}
#mbp .filtros{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 18px}
#mbp .filtros button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);color:#e4e4df;font:600 14px/1 Barlow;transition:background-color .2s,color .2s,border-color .2s}
#mbp .filtros button span{font-size:12px;color:var(--gris)}
#mbp .filtros button:hover{border-color:#fff}
#mbp .filtros button[aria-pressed="true"]{background:var(--jetsurf);border-color:var(--jetsurf);color:#fff}
#mbp .filtros button[aria-pressed="true"] span{color:rgba(255,255,255,.85)}
#mbp .filtros button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#mbp .tablas{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*14px)/4.3);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1*clamp(20px,2.6vw,36px));padding-right:clamp(20px,2.6vw,36px)}
#mbp .tablas::-webkit-scrollbar{display:none}
#mbp .tabla{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;color:var(--carbon);border-radius:12px;overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s}
#mbp .tabla:hover{transform:translateY(-4px);box-shadow:0 20px 30px -16px rgba(0,0,0,.7)}
#mbp .tabla .im{position:relative;aspect-ratio:1/0.95;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}
#mbp .tabla img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease-out)}
#mbp .tabla:hover img{transform:scale(1.06)}
#mbp .tabla .tipo{position:absolute;left:10px;top:10px;font:600 10.5px/1 Barlow;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:4px;background:#f1f0ec;color:#55554f}
#mbp .tabla .tx{padding:11px 14px 14px;border-top:1px solid #eeede8;display:flex;flex-direction:column;gap:4px;flex:1}
#mbp .tabla .marca{font:600 10.5px/1 Barlow;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-osc)}
#mbp .tabla .nom{font:700 19px/1.05 BS,Impact,sans-serif;text-transform:uppercase}
#mbp .tabla .pie{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
#mbp .tabla .precio{font-weight:600;font-size:16px}
#mbp .tabla .ir{font:600 12.5px/1 Barlow;color:var(--jetsurf)}
#mbp .tablas .vacio{display:none}
@media (max-width:1000px){#mbp .tablas{grid-auto-columns:calc((100% - 2*14px)/3.2)}}
@media (max-width:700px){
  #mbp .tablas{grid-auto-columns:62%;gap:10px}
  #mbp .c-tablas .rail__flechas{display:none}
  #mbp .filtros{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  #mbp .filtros button{flex:none}
}

/* Blog con portada */
#mbp .c-post{padding:0;min-height:0}
#mbp .c-post .im{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:#e9e8e3}
#mbp .c-post .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
#mbp .c-post:hover .im img{transform:scale(1.06)}
#mbp .c-post .im small{position:absolute;left:10px;bottom:10px;background:rgba(11,11,12,.82);color:#fff;padding:5px 8px;border-radius:4px;font:600 10.5px/1 Barlow;letter-spacing:.12em;text-transform:uppercase}
#mbp .c-post .tx{display:flex;flex-direction:column;flex:1;padding:12px 16px 16px}
#mbp .c-post h3{margin:0 0 12px}
/* Banda baja: las marcas pasan en una franja */
#mbp .banda{min-height:0;height:clamp(84px,7vw,108px)}
#mbp .franja{overflow:hidden;width:100%}
#mbp .franja__pista{display:flex;align-items:center;width:max-content;animation:franja 38s linear infinite;font:900 clamp(34px,3.4vw,52px)/1 BS,Impact,sans-serif;text-transform:uppercase;color:#fff;white-space:nowrap}
#mbp .franja__pista span{padding:0 22px}
#mbp .franja__pista i{width:8px;height:8px;border-radius:50%;background:var(--rojo);flex:none}
#mbp .franja__pista .hueca{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9)}
#mbp .franja__pista .roja{color:var(--rojo)}
#mbp .banda:hover .franja__pista{animation-play-state:paused}
@keyframes franja{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){#mbp .franja__pista{animation:none}}
/* ===== Motos eléctricas: slider en claro (fotos de estudio) ===== */
#mbp .c-motos{position:relative;height:clamp(430px,34vw,520px);background:var(--tinte-activo,#EEE7DD);transition:background-color .8s ease;border-color:#ddd8cf}
#mbp .motos__cab{position:absolute;z-index:4;left:clamp(22px,3vw,48px);top:clamp(20px,2.4vw,34px)}
#mbp .motos__cab small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:#6b6b66}
#mbp .motos__cab h2{margin:6px 0 0;font-size:clamp(18px,1.6vw,24px);letter-spacing:.06em;color:var(--carbon)}
#mbp .moto{position:absolute;inset:0;display:grid;grid-template-columns:.8fr 1.2fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,32px);padding:clamp(28px,3vw,44px) clamp(22px,3vw,48px) clamp(70px,6vw,84px);visibility:hidden;transition:visibility 0s .6s}
#mbp .moto.activa{visibility:visible;transition-delay:0s}
#mbp .moto__kicker{margin:0 0 8px;font:600 13px/1 Barlow;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
#mbp .moto h3{margin:0 0 12px;font-size:clamp(40px,4.4vw,72px);color:var(--carbon)}
#mbp .moto__datos{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px}
#mbp .moto__datos li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:#3a3a37}
#mbp .moto__datos li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento);flex:none}
#mbp .moto__precio{margin:0 0 16px;font:600 28px/1 Barlow;color:var(--carbon)}
#mbp .moto__img{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
#mbp .moto__img::before{content:"";position:absolute;left:8%;right:8%;bottom:10%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent)}
#mbp .moto__img img{position:relative;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* entrada y salida */
#mbp .moto .moto__tx>*{opacity:0;transform:translateY(16px);transition:opacity .45s,transform .6s var(--ease-out)}
#mbp .moto.activa .moto__tx>*{opacity:1;transform:none}
#mbp .moto.activa .moto__tx>*:nth-child(2){transition-delay:.36s}#mbp .moto.activa .moto__tx>*:nth-child(3){transition-delay:.42s}#mbp .moto.activa .moto__tx>*:nth-child(4){transition-delay:.48s}#mbp .moto.activa .moto__tx>*:nth-child(5){transition-delay:.54s}
/* una moto cada vez: la que sale se apaga en su sitio y la nueva entra cuando ya no está (nunca se pisan) */
#mbp .moto .moto__img img{opacity:0;transform:translateX(40px);transition:opacity .5s ease .4s,transform .8s var(--ease-out) .4s}
#mbp .moto.activa .moto__img img{opacity:1;transform:none}
#mbp .moto.sale .moto__img img{opacity:0;transform:none;transition:opacity .3s ease}
#mbp .moto.sale .moto__tx>*{opacity:0;transform:none;transition:opacity .25s ease}
#mbp .moto.activa .moto__tx>*:first-child{transition-delay:.3s}
/* mandos */
#mbp .motos__mando{position:absolute;z-index:5;left:clamp(22px,3vw,48px);right:clamp(22px,3vw,48px);bottom:clamp(16px,1.8vw,24px);display:flex;align-items:center;gap:16px}
#mbp .motos__puntos{display:flex;gap:6px;flex-wrap:wrap}
#mbp .motos__puntos button{all:unset;cursor:pointer;height:34px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(0,0,0,.15);font:600 13px/34px Barlow;color:#4a4a46;transition:background-color .2s,color .2s,border-color .2s}
#mbp .motos__puntos button:hover{border-color:var(--carbon)}
#mbp .motos__puntos button[aria-current="true"]{background:var(--carbon);border-color:var(--carbon);color:#fff}
#mbp .motos__puntos button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
#mbp .c-motos .progreso{flex:1;max-width:140px;height:2px;background:rgba(0,0,0,.12);overflow:hidden}
#mbp .c-motos .progreso i{display:block;height:100%;background:var(--carbon);transform-origin:left;transform:scaleX(0)}
#mbp .c-motos .progreso i.corre{animation:prog var(--t,6s) linear forwards}
#mbp .c-motos .ver-todo{margin-left:auto;color:var(--carbon)}
#mbp .c-motos .rail__flechas button{border-color:rgba(0,0,0,.3);color:var(--carbon)}
#mbp .c-motos .rail__flechas button:hover{background:var(--carbon);color:#fff;border-color:var(--carbon)}
@media (max-width:1000px){
  #mbp .c-motos{height:auto;min-height:620px}
  #mbp .moto{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;padding-top:24px;padding-bottom:110px}
  #mbp .moto__img{order:-1;height:220px}
  #mbp .motos__mando{flex-wrap:wrap}
  #mbp .c-motos .ver-todo{margin-left:0}
}
@media (max-width:700px){
  #mbp .c-motos{min-height:630px}
  #mbp .moto{padding-bottom:130px}
  #mbp .moto h3{font-size:clamp(40px,12vw,58px)}
  #mbp .moto__img{height:200px}
  #mbp .c-motos .progreso,#mbp .c-motos .rail__flechas{display:none}
  #mbp .motos__puntos button{padding:0 11px;font-size:12.5px}
#mbp .motos__puntos{flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none}
#mbp .motos__puntos::-webkit-scrollbar{display:none}
#mbp .motos__puntos button{flex:none}
}

/* ===== Entrada a las motos: foto de acción a sangre, texto en el lado oscuro ===== */
#mbp .c-motos-intro{display:flex;align-items:center;min-height:clamp(300px,30vw,440px);padding:clamp(22px,3vw,44px) clamp(22px,3vw,48px);background:#141416;overflow:hidden}
#mbp .intro__foto{position:absolute;inset:0;z-index:0}
#mbp .intro__foto img{width:100%;height:100%;object-fit:cover;object-position:75% 50%;transition:transform 1.2s var(--ease-out)}
#mbp .intro__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.88) 0%,rgba(14,12,10,.55) 34%,rgba(14,12,10,0) 58%)}
#mbp .c-motos-intro:hover .intro__foto img{transform:scale(1.03)}
html.js #mbp .c-motos-intro.rv:not(.visto) .intro__foto img{transform:scale(1.08)}
#mbp .intro__tx{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;max-width:min(42%,520px)}
#mbp .intro__tx small{font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:#d6aa62}
#mbp .intro__tx h2{margin:8px 0 10px;font-size:clamp(40px,4.6vw,72px);color:#fff}
#mbp .intro__p{margin:0 0 18px;color:#cfcfca;font-size:16px}
#mbp .franja-conf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
#mbp .franja-conf li{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:11px 14px;font-size:14px;line-height:1.25;color:#3a3a37}
#mbp .franja-conf li+li{border-left:1px solid var(--borde)}
#mbp .franja-conf svg{flex:none;width:20px;height:20px;color:var(--rojo)}
#mbp .franja-conf b{font-weight:600;color:var(--carbon)}
#mbp .franja-conf a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){#mbp .franja-conf{grid-template-columns:repeat(2,1fr)}#mbp .franja-conf li{justify-content:flex-start;padding:10px 12px;font-size:13px}#mbp .franja-conf li:nth-child(3){border-left:0}#mbp .franja-conf li:nth-child(n+3){border-top:1px solid var(--borde)}}
#mbp .intro__tipos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
#mbp .intro__tipos a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);color:#fff;font:600 14px/1 Barlow,sans-serif;transition:background-color .2s,color .2s,border-color .2s}
#mbp .intro__tipos a:hover{background:#fff;color:var(--carbon);border-color:#fff}
@media (max-width:1000px){#mbp .intro__tx{max-width:50%}#mbp .intro__foto img{object-position:68% 50%}}
@media (max-width:700px){
  #mbp .c-motos-intro{flex-direction:column;align-items:stretch;padding-top:0}
  #mbp .intro__foto{position:relative;inset:auto;height:240px;margin:0 calc(-1*clamp(22px,3vw,48px)) 20px}
  #mbp .intro__foto img{object-position:50% 50%}
  #mbp .intro__foto::after{background:linear-gradient(180deg,rgba(20,20,22,0) 60%,#141416 100%)}
  #mbp .intro__tx{max-width:none}
}

/* Tablas a motor: fichas enteras, sin asomar cortadas */
#mbp .tablas{grid-auto-columns:calc((100% - 3*14px)/4)!important;margin-right:0!important;padding-right:0!important}
@media (max-width:1000px){#mbp .tablas{grid-auto-columns:calc((100% - 2*14px)/3)!important}}
@media (max-width:700px){#mbp .tablas{grid-auto-columns:calc((100% - 10px)/2)!important}#mbp .tabla .nom{font-size:16px}#mbp .tabla .precio{font-size:14.5px}}
/* ===== BOCETO DE ANTONIO (03/10) ===== */
/* Tablas con el diseño nuevo de Jetsurf internacional: amarillo neón y cortes en diagonal */
#mbp{--js-amarillo:#FDFF2C}
#mbp .c-tablas{background:linear-gradient(115deg,#0B0B0C 0%,#0B0B0C 62%,#161616 62%,#161616 100%)}
#mbp .c-tablas__logo{display:block;height:clamp(26px,2.4vw,36px);width:auto;margin-bottom:12px}
#mbp .c-tablas small{color:var(--js-amarillo)}
#mbp .c-tablas h2{font-style:italic;letter-spacing:.005em}
#mbp .c-tablas .ver-todo{border:0;padding:12px 22px;background:var(--js-amarillo);color:#111;transform:skewX(-14deg)}
#mbp .c-tablas .ver-todo>span{display:inline-block;transform:skewX(14deg)}
#mbp .c-tablas .ver-todo:hover{background:#fff;color:#111}
#mbp .filtros button{border-radius:0;transform:skewX(-14deg);border-color:rgba(255,255,255,.3)}
#mbp .filtros button>*{transform:skewX(14deg)}
#mbp .filtros button[aria-pressed="true"]{background:var(--js-amarillo);border-color:var(--js-amarillo);color:#111}
#mbp .filtros button[aria-pressed="true"] span{color:#333}
#mbp .tabla{border-radius:4px}
#mbp .tabla .tipo{border-radius:0;background:#111;color:var(--js-amarillo);transform:skewX(-14deg)}
#mbp .tabla .nom{font-style:italic}
#mbp .tabla .ir{color:#111;background:var(--js-amarillo);padding:6px 10px;transform:skewX(-14deg);font-size:12px}
#mbp .c-tablas .rail__flechas button{border-radius:0;transform:skewX(-14deg)}
#mbp .c-tablas .rail__flechas button:hover{background:var(--js-amarillo);border-color:var(--js-amarillo);color:#111}

/* Modelos de motos: 5 en fila */
#mbp .c-modelos{padding:clamp(18px,2.2vw,30px)}
#mbp .c-modelos__cab{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
#mbp .c-modelos__cab h3{margin:0;font-size:clamp(26px,2.4vw,38px)}
#mbp .modelos-rejilla{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
#mbp .modelo{display:flex;flex-direction:column;border:1px solid #ecebe6;border-radius:10px;overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s}
#mbp .modelo:hover{transform:translateY(-4px);box-shadow:0 18px 28px -18px rgba(0,0,0,.4)}
#mbp .modelo .im{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:10px;background:#fff}
#mbp .modelo img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease-out)}
#mbp .modelo:hover img{transform:scale(1.05)}
#mbp .modelo .tx{display:flex;flex-direction:column;gap:5px;padding:10px 12px 12px;border-top:1px solid #eeede8;flex:1}
#mbp .modelo .marca{font:600 10.5px/1 Barlow;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-osc)}
#mbp .modelo .nom{font:700 20px/1 BS,Impact,sans-serif;text-transform:uppercase}
#mbp .modelo .uso{align-self:flex-start;font:600 11px/1 Barlow;padding:5px 8px;border-radius:999px}
#mbp .modelo .uso.calle{background:#E3EEF4;color:#21607F}
#mbp .modelo .uso.campo{background:#F6E6DC;color:#A8461C}
#mbp .modelo .pie{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px}
#mbp .modelo .precio{font-weight:600;font-size:16px}
#mbp .modelo .ir{font:600 12.5px/1 Barlow;color:var(--rojo)}

/* Yate y Seabob: la foto arriba, el texto debajo (que no la tape) */
#mbp .c-foto.partido{display:flex;flex-direction:column;align-items:stretch;min-height:0}
#mbp .c-foto.partido::after{display:none}
#mbp .c-foto.partido>img{position:relative;inset:auto;height:clamp(200px,19vw,290px)}
#mbp .c-foto.partido .tx{background:var(--carbon)}

/* Instagram: perfil arriba y 4 reels que se mueven solos */
#mbp .btn--amarillo{background:var(--js-amarillo);color:#111}#mbp .btn--amarillo:hover{background:#fff}
#mbp .c-ig{padding:clamp(16px,2vw,24px);background:var(--carbon)}
#mbp .ig__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(12px,1.4vw,18px)}
#mbp .ig__perfil{display:flex;align-items:center;gap:12px;color:#fff;min-width:0}
#mbp .ig__aro{flex:none;width:58px;height:58px;border-radius:50%;padding:2.5px;background:conic-gradient(from 210deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75)}
#mbp .ig__aro img{width:100%;height:100%;border-radius:50%;object-fit:contain;padding:0 4px;background:#111;border:2.5px solid var(--carbon)}
#mbp .ig__perfil strong{display:block;font:700 16px/1.2 Barlow}
#mbp .ig__perfil em{display:block;font:400 13.5px/1.3 Barlow;font-style:normal;color:#a9a9a4}
#mbp .ig__seguir{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:9px;background:#0095F6;color:#fff;font:600 14px/1 Barlow;transition:background-color .2s}
#mbp .ig__seguir:hover{background:#1877F2}
#mbp .ig__seguir svg{width:17px;height:17px}
#mbp .ig__reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
#mbp .reel{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#000;color:#fff;isolation:isolate}
#mbp .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
#mbp .reel:hover video{transform:scale(1.04)}
#mbp .reel::before{content:"";position:absolute;top:12px;right:12px;z-index:2;width:20px;height:20px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M3 8.5h18M8.5 3l3 5.5M14.5 3l3 5.5M10 12v5l4.5-2.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M3 8.5h18M8.5 3l3 5.5M14.5 3l3 5.5M10 12v5l4.5-2.5z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#mbp .reel::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);z-index:1}
#mbp .reel__tx{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#mbp .reel__cap{font:600 14.5px/1.3 Barlow;text-shadow:0 1px 3px rgba(0,0,0,.5)}
#mbp .reel__prod{display:inline-flex;align-items:center;gap:6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 10px;border-radius:7px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 12.5px/1.2 Barlow;transition:background-color .2s,color .2s}
#mbp .reel__prod::before{content:"";flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/contain no-repeat}
#mbp .reel:hover .reel__prod{background:#fff;color:#111}
#mbp .reel:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:1000px){
  #mbp .modelos-rejilla{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*12px)/3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  #mbp .modelo{scroll-snap-align:start}
  #mbp .ig__reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*10px)/2.6);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  #mbp .ig__reels::-webkit-scrollbar{display:none}
  #mbp .reel{scroll-snap-align:start;aspect-ratio:9/14}
}
@media (max-width:700px){
  #mbp .ig__reels{grid-auto-columns:calc((100% - 10px)/1.35)}
  #mbp .ig__aro{width:48px;height:48px}
  #mbp .reel__cap{font-size:14px}
}
@media (max-width:700px){
  #mbp .modelos-rejilla{grid-auto-columns:calc((100% - 10px)/2);gap:10px}
}

/* ===== Tablas a motor en 3D (diseño Jetsurf: amarillo neón y diagonales) ===== */
#mbp .c-t3d{display:grid;grid-template-columns:.75fr 1.25fr;grid-template-rows:1fr auto;min-height:clamp(560px,46vw,680px);background:linear-gradient(115deg,#0B0B0C 0%,#0B0B0C 55%,#151515 55%,#151515 100%);color:#EDEDEA;border-color:#0B0B0C}
#mbp .c-t3d>*{min-width:0}
#mbp .t3d__info{grid-column:1;grid-row:1;align-self:center;z-index:3;padding:clamp(24px,3vw,48px) 0 clamp(16px,2vw,24px) clamp(24px,3vw,48px)}
#mbp .t3d__logo{height:clamp(24px,2.2vw,32px);width:auto;margin-bottom:16px}
#mbp .t3d__info small{display:block;font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--js-amarillo);margin-bottom:22px}
#mbp .t3d__marca{margin:0;font:600 12px/1 Barlow;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
#mbp .t3d__info h2{margin:6px 0 8px;font-size:clamp(46px,5.6vw,92px);font-style:italic;color:#fff;transition:opacity .3s}
#mbp .t3d__tipo{display:inline-block;margin:0 0 16px;padding:6px 12px;background:#222;color:var(--js-amarillo);font:600 12px/1 Barlow;letter-spacing:.1em;text-transform:uppercase;transform:skewX(-14deg)}
#mbp .t3d__precio{margin:0 0 20px;font:600 30px/1 Barlow;color:#fff}
#mbp .t3d__btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#mbp .t3d__ver{border-radius:0;transform:skewX(-14deg)}#mbp .t3d__ver>span{display:inline-block;transform:skewX(14deg)}
#mbp .t3d__cat{font-size:14px;color:#cfcfca;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}#mbp .t3d__cat:hover{color:var(--js-amarillo);border-color:var(--js-amarillo)}
/* escenario 3D */
#mbp .t3d__escenario{grid-column:2;grid-row:1;position:relative;perspective:1300px;perspective-origin:50% 30%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
#mbp .t3d__escenario:active{cursor:grabbing}
#mbp .t3d__escenario::before{content:"";position:absolute;left:50%;top:52%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(253,255,44,.16),transparent 70%);pointer-events:none}
#mbp .t3d__tabla{position:absolute;left:50%;top:47%;height:var(--alto,122%);aspect-ratio:var(--ratio,.35);transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--rx,52deg)) rotateZ(var(--rz,-60deg));will-change:transform}
#mbp .t3d__tabla img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;backface-visibility:visible}
#mbp .t3d__tabla img.canto{filter:brightness(.28) saturate(.4)}
#mbp .t3d__tabla.cambia{animation:t3dEntra .7s var(--ease-out)}
#mbp .c-t3d .t3d__sombra{display:none}
/* ===== Equipo Jetpilot 2026 en 3D: 3D a la izquierda, ficha a la derecha, tira de piezas abajo ===== */
#mbp .c-eq[hidden]{display:none!important}
#mbp .c-eq{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr auto;min-height:clamp(520px,42vw,640px);background:radial-gradient(70% 80% at 35% 45%,#FFFFFF 0%,#ECEAE4 70%);border-color:#E2DFD8}
#mbp .eq__escenario{grid-column:1;grid-row:1;position:relative;min-height:0}
#mbp .eq__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#mbp .eq__lienzo:active{cursor:grabbing}
#mbp .eq__cargando{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:600 13px/1 Barlow;letter-spacing:.08em;text-transform:uppercase;color:#8a877f;transition:opacity .4s;pointer-events:none}
#mbp .c-eq.lista .eq__cargando{opacity:0}
#mbp .eq__pista{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;font:600 12px/1 Barlow;letter-spacing:.1em;text-transform:uppercase;color:#8a877f;white-space:nowrap;transition:opacity .5s;pointer-events:none}
#mbp .eq__pista svg{width:18px;height:18px}
#mbp .c-eq.tocada .eq__pista{opacity:0}
#mbp .eq__info{grid-column:2;grid-row:1;align-self:center;padding:clamp(24px,3vw,48px) clamp(24px,3vw,48px) clamp(12px,1.5vw,20px) 0}
#mbp .eq__info small{display:block;font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo);margin-bottom:18px}
#mbp .eq__tipo{margin:0;font:600 12px/1 Barlow;letter-spacing:.14em;text-transform:uppercase;color:#6d6a63}
#mbp .eq__info h2{margin:6px 0 8px;font-size:clamp(38px,4.2vw,64px);color:var(--carbon)}
#mbp .eq__nota{margin:0 0 14px;font-size:15px;color:#55524b}
#mbp .eq__precio{margin:0 0 20px;font:600 30px/1 Barlow;color:var(--carbon)}
#mbp .eq__btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#mbp .eq__cat{font-size:14px;color:#4a4740;border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:2px}#mbp .eq__cat:hover{color:var(--rojo);border-color:var(--rojo)}
#mbp .eq__tira{grid-column:1 / -1;grid-row:2;display:flex;gap:10px;padding:0 clamp(16px,2.4vw,40px) clamp(16px,2vw,26px);overflow-x:auto;scrollbar-width:none}
#mbp .eq__tira::-webkit-scrollbar{display:none}
#mbp .eq__mini{all:unset;cursor:pointer;flex:1 0 auto;min-width:170px;display:flex;align-items:center;gap:10px;height:64px;padding:0 14px 0 6px;background:#fff;border:1.5px solid #E2DFD8;border-radius:12px;transition:border-color .2s,box-shadow .2s}
#mbp .eq__mini img{width:52px;height:52px;object-fit:contain;mix-blend-mode:multiply}
#mbp .eq__mini span{display:flex;flex-direction:column;gap:3px;font:700 15px/1 BS,Impact,sans-serif;text-transform:uppercase;color:var(--carbon);white-space:nowrap}
#mbp .eq__mini span em{font:600 12px/1 Barlow;font-style:normal;color:#77746c;text-transform:none}
#mbp .eq__mini:hover{border-color:#bdb9b0}
#mbp .eq__mini[aria-current="true"]{border-color:var(--carbon);box-shadow:0 0 0 1px var(--carbon)}
#mbp .eq__mini:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
@media (max-width:1000px){
  #mbp .c-eq{grid-template-columns:1fr;grid-template-rows:auto clamp(320px,62vw,460px) auto;min-height:0}
  #mbp .eq__info{grid-column:1;grid-row:1;padding:clamp(22px,4vw,36px) clamp(22px,4vw,36px) 0}
  #mbp .eq__escenario{grid-column:1;grid-row:2}
  #mbp .eq__tira{grid-row:3}
}
@media (max-width:700px){#mbp .eq__info h2{font-size:clamp(34px,10vw,48px)}#mbp .eq__mini{min-width:150px;height:58px}}
#mbp .t3d__logo.es-surfie{height:clamp(20px,1.9vw,27px);margin-bottom:18px}
#mbp .t3d__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#mbp .t3d__lienzo:active{cursor:grabbing}
#mbp .t3d__reserva{position:absolute;inset:0;margin:auto;width:86%;height:72%;object-fit:contain;pointer-events:none}
#mbp .t3d__reserva[hidden]{display:none}
#mbp .c-t3d .cifra{display:inline-block;font-family:Barlow,sans-serif;font-weight:600;font-style:inherit;font-size:1.13em;line-height:.8;transform:scaleX(.8);margin:0 -.07em;letter-spacing:0}
#mbp .t3d__mini.es-moto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* con la foto puesta (cargando el 3D o con ahorro de datos): fuera el lienzo, la pista de girar y el «Cargando» */
#mbp .c-t3d.con-foto .t3d__lienzo{visibility:hidden}
#mbp .c-t3d.con-foto .t3d__pista,#mbp .c-t3d.con-foto .t3d__cargando{opacity:0}
#mbp .t3d__ver3d{all:unset;position:absolute;left:50%;bottom:18px;z-index:5;transform:translateX(-50%) skewX(-14deg);background:var(--js-amarillo);color:#111;padding:12px 20px;font:700 14px/1 Barlow;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .2s}
#mbp .t3d__ver3d>span{display:inline-block;transform:skewX(14deg)}
#mbp .t3d__ver3d:hover{background:#fff}
#mbp .t3d__ver3d:focus-visible{outline:2px solid #fff;outline-offset:3px}
#mbp .c-t3d.sin3d .t3d__escenario{cursor:default}
#mbp .c-t3d.sin3d .t3d__pista,#mbp .c-t3d.sin3d .t3d__lienzo{display:none}
#mbp .t3d__cargando{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:600 13px/1 Barlow;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:opacity .4s;pointer-events:none}
#mbp .c-t3d.lista .t3d__cargando{opacity:0}
#mbp .t3d__colores{display:flex;align-items:center;gap:10px;margin:-6px 0 22px}
#mbp .t3d__colores[hidden]{display:none}
#mbp .t3d__colores b{font:600 12px/1 Barlow;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-right:4px}
#mbp .t3d__color{all:unset;cursor:pointer;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,transform .2s}
#mbp .t3d__color:hover{transform:scale(1.1)}
#mbp .t3d__color[aria-pressed="true"]{outline-color:var(--js-amarillo)}
#mbp .t3d__color:focus-visible{outline-color:#fff}
@keyframes t3dEntra{from{opacity:0;transform:translate(-50%,-38%) rotateX(var(--rx,58deg)) rotateZ(calc(var(--rz,-60deg) + 70deg)) scale(.85)}}
#mbp .t3d__sombra{position:absolute;left:50%;top:62%;width:78%;height:20%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(6px)}
#mbp .t3d__pista{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;font:600 12px/1 Barlow;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:opacity .5s;pointer-events:none}
#mbp .t3d__pista svg{width:18px;height:18px}
#mbp .c-t3d.tocada .t3d__pista{opacity:0}
/* tira de tablas */
#mbp .t3d__tira{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;gap:10px;padding:0 clamp(16px,2.4vw,40px) clamp(16px,2vw,26px)}
#mbp .t3d__miniaturas{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
#mbp .t3d__miniaturas::-webkit-scrollbar{display:none}
#mbp .t3d__mini{all:unset;cursor:pointer;flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;height:62px;padding:0 16px 0 10px;background:#1c1c1e;border:1.5px solid #2c2c2e;transform:skewX(-14deg);transition:background-color .2s,border-color .2s}
#mbp .t3d__mini>*{transform:skewX(14deg)}
#mbp .t3d__mini i{position:relative;flex:none;width:62px;height:40px;transform:skewX(14deg)}
#mbp .t3d__mini span{display:flex;flex-direction:column;gap:3px;font:700 15px/1 BS,Impact,sans-serif;text-transform:uppercase;color:#fff;white-space:nowrap}
#mbp .t3d__mini span em{font:600 12px/1 Barlow;font-style:normal;color:var(--gris);text-transform:none}
#mbp .t3d__mini:hover{border-color:#555}
#mbp .t3d__mini[aria-current="true"]{background:var(--js-amarillo);border-color:var(--js-amarillo)}
#mbp .t3d__mini[aria-current="true"] span,#mbp .t3d__mini[aria-current="true"] span em{color:#111}
#mbp .t3d__mini:focus-visible{outline:2px solid #fff;outline-offset:2px}
#mbp .t3d__flecha{flex:none;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transform:skewX(-14deg);transition:background-color .2s,color .2s,border-color .2s}
#mbp .t3d__flecha svg{width:18px;height:18px;transform:skewX(14deg)}
#mbp .t3d__flecha:hover{background:var(--js-amarillo);border-color:var(--js-amarillo);color:#111}
@media (max-width:1000px){
  #mbp .c-t3d{grid-template-columns:minmax(0,1fr);grid-template-rows:auto clamp(340px,60vw,460px) auto;min-height:0}
  #mbp .t3d__info{grid-column:1;grid-row:1;padding-bottom:0}
  #mbp .t3d__escenario{grid-column:1;grid-row:2}
  #mbp .t3d__tira{grid-row:3}
}
@media (max-width:700px){
  #mbp .t3d__info h2{font-size:clamp(40px,12vw,60px)}
  #mbp .t3d__tabla{--alto:96%}
  #mbp .t3d__pista{white-space:nowrap;font-size:11px}
  #mbp .t3d__info small{margin-bottom:14px}
  #mbp .t3d__flecha{display:none}
  #mbp .t3d__mini{height:54px}
  #mbp .t3d__mini i{width:52px;height:34px}#mbp .t3d__mini img{height:52px}
}
@media (prefers-reduced-motion:reduce){#mbp .t3d__tabla.cambia{animation:none}}

/* aparición al bajar */
html.js #mbp .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*55ms)}
html.js #mbp .rv.visto{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1240px){
  #mbp .primera{height:clamp(440px,calc(100svh - 160px),560px)}
  #mbp .c-jetsurf p{max-width:none}
  #mbp .cats-m .cat{grid-column:span 3}
  #mbp .prod-m .prod{grid-column:span 6}
  #mbp .conf{grid-column:span 6}
}
@media (max-width:1000px){
  #mbp .cab__iconos .txt{display:none}
  #mbp .primera{height:auto;grid-template-rows:auto}
  #mbp .hero{grid-column:span 12;height:clamp(460px,64svh,560px)}
  #mbp .c-jetsurf,#mbp .c-ultima{grid-column:span 6;min-height:280px}
  #mbp .estrella{grid-column:span 12}
  #mbp .c-foto{grid-column:span 12}
  #mbp .c-seabob,#mbp .c-blog{grid-column:span 6}
  #mbp .pie__arriba{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  #mbp{--hueco:8px;--radio:12px}
  #mbp .aviso .der{display:none}#mbp .aviso .envuelve{justify-content:center}
  #mbp .cab__fila{flex-wrap:wrap;height:auto;padding:10px var(--gutter);gap:10px 12px}
  #mbp .cab__logo img{height:26px}
  #mbp .buscador{order:3;flex-basis:100%;max-width:none}
  #mbp .buscador input{font-size:16px}
  #mbp .cab.compacta .menu{display:none}
  #mbp .hero{height:clamp(500px,calc(100svh - 220px),580px)}
  #mbp .mundo{clip-path:circle(0% at 50% 28%)}
  @keyframes abre{to{clip-path:circle(150% at 50% 28%)}}
  #mbp .onda{left:50%;top:28%}
  #mbp .prenda{--ty:0%;left:50%;top:5%;height:42%}
  #mbp .prenda.vest{top:7%;height:36%}
  #mbp .prenda.sale{transform:translate(-50%,0) scale(.88) rotate(-4deg)}
  #mbp .mundo::after{background:linear-gradient(0deg,var(--osc) 0%,color-mix(in srgb,var(--osc) 88%,transparent) 44%,transparent 72%)}
  #mbp .mundo__palabra{top:25%;right:auto;left:50%;transform:translate(-50%,-50%);font-size:44vw}
  #mbp .hero__info{top:auto;bottom:62px;transform:none;width:auto;right:16px;left:16px}
  #mbp .look__titulo{font-size:clamp(44px,13vw,66px)}
  #mbp .hero__mando{left:16px;right:16px;bottom:14px}
  #mbp .puntos button{width:34px;padding:0;justify-content:center}#mbp .puntos button span{display:none}
  #mbp .progreso,#mbp .flechas{display:none}
  #mbp .c-jetsurf,#mbp .c-ultima{grid-column:span 12;min-height:250px}
  #mbp .c-ultima .minis{margin-top:14px}
  #mbp .cats-m .cat{grid-column:span 4}
  #mbp .cat .im{height:92px;padding:6px}
  #mbp .cat b{font-size:15px}
  #mbp .estrella{grid-template-columns:1fr;text-align:left}
  #mbp .estrella .im{min-height:200px}
  #mbp .estrella img{max-height:200px}
  #mbp .c-seabob,#mbp .c-blog{grid-column:span 12}
  #mbp .titulo-bloque{padding:22px 0 10px}
  #mbp .conf{grid-column:span 12;padding:12px 14px}
  #mbp .pie__arriba{grid-template-columns:1fr}
}
@media (max-width:700px) and (max-height:700px){#mbp .look__btns .btn--linea{display:none}}
/* pantallas de poca altura: en «Última unidad» se queda la foto y el precio */
@media (min-width:1001px) and (max-height:820px){#mbp .mini{font-size:0;gap:2px}#mbp .mini b{font-size:13.5px}#mbp .c-ultima h3{font-size:clamp(26px,2.2vw,36px)}#mbp .c-jetsurf p{display:none}}
@media (prefers-reduced-motion:reduce){
  #mbp .mundo.abre{animation:none;clip-path:none}
  #mbp .prenda,#mbp .look__lin>span,#mbp .look .fade{transition:opacity .3s!important}
  #mbp .look__lin>span,#mbp .look .fade{transform:none!important}
  #mbp .prenda,#mbp .prenda.sale{filter:none}
  #mbp .onda{display:none}#mbp .escena__in{transform:none}
  html.js #mbp .rv{opacity:1;transform:none;transition:none}
}


/* ===== v2 · ritmo de tienda (04/10/2026): 2 protagonistas a sangre, tienda sin cajas, un solo tema claro ===== */
#mbp{--radio:0px;--lado:max(var(--gutter),calc((100vw - var(--ancho))/2 + var(--gutter)));--sep:clamp(40px,4.4vw,64px);--gris-foto:#E9E8E3}
#mbp .bloque{padding-top:var(--sep)}
#mbp .titulo-bloque{padding-top:0}
#mbp .bloque.hero-sec,#mbp .bloque.conf-sec{padding-top:0}
#mbp .a-sangre>.envuelve{max-width:none;padding:0}
#mbp .a-sangre .cuadro{border:0;border-radius:0}
#mbp .a-sangre .mosaico{padding-top:0!important;gap:0}
/* protagonista 1: el slider ocupa la pantalla menos la cabecera y la franja de confianza (las dos se ven sin bajar) */
#mbp .hero-sec .slider{height:clamp(330px,calc(100svh - var(--cab-alto,140px) - 52px),680px)}
#mbp .hero-sec .slider .hero__info{left:var(--lado)}
#mbp .hero-sec .slider .hero__mando{left:var(--lado);right:var(--lado)}
/* prendas del slider: sin desenfoque animado (pesado y parece que «no carga»); solo fundido y desplazamiento */
#mbp .hero .prenda,#mbp .hero .prenda.sale,#mbp .hero .prenda.activa{filter:drop-shadow(0 30px 34px rgba(0,0,0,.5))}
#mbp .hero .prenda{transition:opacity .45s ease,transform .8s var(--ease-out);will-change:transform,opacity}
#mbp .hero .prenda.activa{transition-delay:.12s}
#mbp .hero .prenda.sale{transition-duration:.35s,.5s;transition-delay:0s}
#mbp .hero.quieto .prenda{transition:none}
/* confianza: línea blanca de lado a lado pegada al slider */
#mbp .conf-sec>.envuelve{max-width:none;padding:0;background:#fff;border-bottom:1px solid var(--borde)}
#mbp .conf-sec .franja-conf{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);border:0;border-radius:0;background:transparent}
#mbp .conf-sec .conf2 li{display:block;padding:0}
#mbp .conf2__it{display:flex;align-items:center;justify-content:center;gap:12px;height:100%;padding:11px 16px;color:inherit;transition:background-color .2s}
#mbp .conf-sec .conf2 a{text-decoration:none;color:inherit}
#mbp a.conf2__it:hover{background:#FBF4F3}
#mbp .conf2__ico{flex:none;width:38px;height:38px;border-radius:50%;background:#FDE9E7;display:grid;place-items:center;transition:transform .25s var(--ease-out)}
#mbp a.conf2__it:hover .conf2__ico{transform:scale(1.08)}
#mbp .conf2__ico svg{width:18px;height:18px;color:var(--rojo)}
#mbp .conf2__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
#mbp .conf2__tx b{display:flex;align-items:center;gap:8px;font:600 14.5px/1.2 Barlow;color:var(--carbon)}
#mbp .conf2__tx small{font:400 12.5px/1.25 Barlow;color:var(--gris-osc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mbp .estrellas{display:inline-block;flex:none;width:72px;height:13px;background:linear-gradient(90deg,#F2A516 calc(var(--nota) / 5 * 100%),#D9D7D0 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.9 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") left/14.4px 13px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.9 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") left/14.4px 13px repeat-x}
/* franja v3: tarjeta blanca flotante que se monta sobre el borde del slider (une el escaparate con la tienda) */
#mbp .conf-sec{position:relative;z-index:6}
#mbp .conf-sec>.envuelve{max-width:var(--ancho);margin:-34px auto 0;padding:0 var(--gutter);background:transparent;border:0}
#mbp .conf-sec .conf2{max-width:none;padding:6px;background:#fff;border-radius:14px;box-shadow:0 22px 44px -22px rgba(11,11,12,.55),0 2px 8px rgba(11,11,12,.08)}
#mbp .conf-sec .conf2 li+li{border-left:1px solid #EDECE7}
#mbp .conf2__it{gap:14px;padding:12px 18px;border-radius:10px}
#mbp a.conf2__it:hover{background:#F6F5F1}
#mbp .conf2__ico{width:42px;height:42px;background:#FDE9E7;box-shadow:none;transition:transform .25s var(--ease-out),background-color .25s}
#mbp .conf2__ico svg{width:20px;height:20px;color:var(--rojo);transition:color .25s}
#mbp a.conf2__it:hover .conf2__ico{background:var(--rojo);transform:translateY(-2px)}
#mbp a.conf2__it:hover .conf2__ico svg{color:#fff}
#mbp .conf2__tx b{font-size:15.5px}
#mbp .conf2__tx small{font-size:13px}
#mbp .hero-sec .slider .hero__mando{bottom:50px}
@media (min-width:901px){#mbp .hero-sec .slider .hero__info{top:calc(50% - 32px)}}
@media (max-width:900px){
  #mbp .hero-sec .slider .hero__mando{bottom:22px}
  #mbp .conf-sec>.envuelve{margin-top:-12px}
  #mbp .hero-sec .slider{height:clamp(470px,calc(100svh - var(--cab-alto,140px) - 74px),680px)}
}
@media (max-width:700px){
  #mbp .hero-sec .prenda{top:3%;height:37%}
  #mbp .hero-sec .prenda.vest{top:5%;height:32%}
}
/* franja: 3 opciones para elegir (?franja=a|b|c; «flota» = la tarjeta flotante anterior). Por defecto, B (elegida por Antonio 04/10) */
#mbp .conf-sec>.envuelve{max-width:none;margin:0;padding:0}
#mbp .conf-sec .conf2{max-width:var(--ancho);margin:0 auto;padding:4px var(--gutter);border-radius:0;box-shadow:none;background:transparent}
#mbp .hero-sec .slider .hero__mando{bottom:18px}
#mbp .hero-sec .slider{height:clamp(330px,calc(100svh - var(--cab-alto,140px) - 76px),680px)}
#mbp .conf-sec .conf2{padding:0 var(--gutter)}
#mbp .conf2__it{padding:10px 18px}
#mbp .estrellas{background:linear-gradient(90deg,#F2A516 calc(var(--nota) / 5 * 100%),rgba(255,255,255,.22) 0)}
#mbp .conf-sec>.envuelve{background:#151517;border-top:1px solid rgba(255,255,255,.08)}
#mbp .conf2 li+li{border-left-color:rgba(255,255,255,.1)}
#mbp .conf2__tx b{color:#fff}
#mbp .conf2__tx small{color:#a9a9a4}
#mbp .conf2__ico{background:rgba(239,57,44,.16)}
#mbp a.conf2__it:hover{background:rgba(255,255,255,.05)}
@media (max-width:900px){
  #mbp .hero-sec .slider{height:clamp(470px,calc(100svh - var(--cab-alto,140px) - 74px),680px)}
  #mbp .hero-sec .slider .hero__mando{bottom:22px}
  #mbp .conf-sec .conf2{padding:0}
}
/* titulares: más presencia (tamaño, letras juntas) y la palabra clave marcada; 3 tratamientos (?tit=1|2|3) */
#mbp .titulo-bloque h2.tit{font-size:clamp(38px,4vw,58px);letter-spacing:-.005em;line-height:.92}
#mbp .tit .t2{display:inline-block}
#mbp .tit .t2{color:var(--rojo)}
/* franja de marcas: cada marca es un enlace; al pasar el ratón la franja se para y la marca se pone roja */
#mbp .franja__pista a{padding:0 22px;color:inherit;transition:color .2s,-webkit-text-stroke-color .2s}
#mbp .franja__pista a.hueca{color:transparent}
#mbp .franja__pista a.roja{color:var(--rojo)}
#mbp .franja__pista a:hover,#mbp .franja__pista a:focus-visible{color:var(--rojo)!important;-webkit-text-stroke-color:var(--rojo)!important}
#mbp .franja:hover .franja__pista,#mbp .franja:focus-within .franja__pista{animation-play-state:paused}
/* comprar por categoría */
#mbp .cats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
#mbp .cat{display:flex;flex-direction:column;gap:10px;color:var(--carbon)}
#mbp .cat__im{aspect-ratio:1/1;background:var(--gris-foto);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#mbp .cat__im img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease-out)}
#mbp .cat:hover .cat__im img{transform:scale(1.06)}
#mbp .cat__nom{font:600 15px/1.25 Barlow}
#mbp .cat--foto .cat__im img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
#mbp .cat:hover .cat__nom{color:var(--rojo)}
/* categorías = botones de navegación (recuadro blanco con borde, nombre dentro y flecha), distintas de los productos (gris, sin marco) */
#mbp .cat{gap:0;background:#fff;border:1px solid var(--borde);border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .25s}
#mbp .cat__im{background:#fff;border-radius:0;aspect-ratio:1/.82}
#mbp .cat__im img{width:76%;height:76%}
#mbp .cat__nom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid #F0EFEA;font:600 15px/1.2 Barlow}
#mbp .cat__nom::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--carbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;transition:background-color .2s,transform .25s var(--ease-out)}
#mbp .cat:hover{border-color:var(--carbon);box-shadow:0 12px 24px -16px rgba(11,11,12,.4)}
#mbp .cat:hover .cat__nom{color:var(--carbon)}
#mbp .cat:hover .cat__nom::after{background-color:var(--rojo);transform:translateX(2px)}
/* la tienda sin cajas: foto en recuadro gris, texto debajo */
#mbp .cuadro.prod{background:transparent;border:0;overflow:visible}
#mbp .prod:hover{box-shadow:none}
#mbp .prod .im{background:var(--gris-foto);border-radius:8px}
#mbp .prod img{mix-blend-mode:multiply}
#mbp .prod .tx{border-top:0;padding:12px 0 0}
#mbp .prod .flag{left:8px;top:8px}
/* protagonista 2: tablas en 3D de lado a lado */
#mbp .t3d-sec .c-t3d{padding-left:var(--lado);padding-right:var(--lado)}
/* motos: foto de acción y slider en un solo bloque partido */
@media (min-width:1001px){
  #mbp .motos-sec .mosaico{gap:0}
  /* el texto no tapa la foto: foto arriba (piloto entero), texto debajo sobre oscuro */
  #mbp .motos-sec .c-motos-intro{grid-column:span 5;min-height:0;flex-direction:column;align-items:stretch;padding:0;border:0}
  #mbp .motos-sec .intro__foto{position:relative;inset:auto;flex:1 1 auto;min-height:0;height:auto;margin:0}
  #mbp .motos-sec .intro__tx{flex:none;padding:clamp(14px,1.4vw,20px) clamp(22px,2.4vw,36px) clamp(22px,2.4vw,32px)}
  #mbp .motos-sec .intro__tx h2{font-size:clamp(38px,3.4vw,56px);margin:6px 0 8px}
  #mbp .motos-sec .intro__p{margin-bottom:14px}
  #mbp .motos-sec .intro__tipos{margin-bottom:16px}
  #mbp .motos-sec .c-motos{grid-column:span 7;height:auto;min-height:clamp(440px,36vw,580px);border:0}
  #mbp .motos-sec .moto h3{font-size:clamp(38px,3.1vw,54px)}
  #mbp .motos-sec .c-motos .progreso,#mbp .motos-sec .c-motos .ver-todo{display:none}
  #mbp .motos-sec .motos__puntos{flex-wrap:nowrap}
  #mbp .motos-sec .motos__puntos button{flex:none}
  #mbp .motos-sec .motos__mando{justify-content:space-between}
  #mbp .motos-sec .intro__tx{max-width:100%}
  #mbp .motos-sec .intro__foto::after{background:linear-gradient(180deg,rgba(20,20,22,0) 72%,#141416 100%)}
  #mbp .motos-sec .intro__foto img{object-position:58% 38%}
}
#mbp .motos-sec .mosaico{padding-top:0!important}
#mbp .motos-sec .cuadro{border:0}
/* yate, Seabob, Instagram y marcas en claro */
#mbp .bajo-sec .mosaico{padding-top:0!important}
#mbp .bajo-sec .c-foto.partido{background:transparent;border:0;color:var(--carbon);overflow:visible}
#mbp .bajo-sec .c-foto.partido>img{border-radius:8px}
#mbp .bajo-sec .c-foto.partido .tx{background:transparent;padding:16px 0 0}
#mbp .bajo-sec .c-foto p{color:var(--gris-osc)}
#mbp .bajo-sec .c-foto .btn--linea{border-color:var(--carbon);color:var(--carbon)}
#mbp .bajo-sec .c-foto:hover .btn--linea{background:var(--carbon);color:#fff}
#mbp .bajo-sec .c-ig{background:transparent;border:0;padding:var(--sep) 0 0}
#mbp .bajo-sec .ig__perfil{color:var(--carbon)}
#mbp .bajo-sec .ig__perfil em{color:var(--gris-osc)}
#mbp .bajo-sec .ig__aro img{border-color:var(--hueso)}
#mbp .bajo-sec .reel{border-radius:8px}
#mbp .bajo-sec .banda{background:transparent;border:0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);margin-top:var(--sep);min-height:0;padding:18px 0}
#mbp .bajo-sec .banda>video,#mbp .bajo-sec .banda::before,#mbp .bajo-sec .banda::after{display:none}
#mbp .bajo-sec .franja__pista{color:var(--carbon)}
#mbp .bajo-sec .franja__pista .hueca{-webkit-text-stroke:1.5px var(--carbon)}
/* qué vende Motoboard: texto discreto encima del pie, titular a la izquierda y texto en dos columnas */
#mbp .seo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(18px,3vw,48px);padding-top:var(--sep);border-top:1px solid var(--borde)}
#mbp .seo h1{margin:0;font-size:clamp(24px,2.3vw,34px);line-height:1;color:var(--carbon)}
#mbp .seo__tx{columns:2;column-gap:clamp(20px,2.6vw,40px)}
#mbp .seo__tx p{margin:0 0 12px;font:400 14.5px/1.6 Barlow;color:var(--gris-osc);break-inside:avoid}
#mbp .seo__tx a{color:var(--carbon);text-decoration:underline;text-decoration-color:var(--borde);text-underline-offset:3px}
#mbp .seo__tx a:hover{color:var(--rojo);text-decoration-color:currentColor}
@media (max-width:900px){#mbp .seo{grid-template-columns:none}#mbp .seo__tx{columns:1}}
/* pie de lado a lado */
#mbp .pie.a-sangre{margin-top:var(--sep)}
#mbp .pie.a-sangre .cuadro{padding-left:var(--lado);padding-right:var(--lado)}
@media (max-width:900px){
  #mbp .cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  #mbp .cats::-webkit-scrollbar{display:none}
  #mbp .cat{scroll-snap-align:start}
  /* en el móvil la franja de confianza va en UNA línea que se desliza, para que quepa con el slider sin bajar */
  #mbp .conf-sec .franja-conf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0}
  #mbp .conf-sec .franja-conf::-webkit-scrollbar{display:none}
  #mbp .conf-sec .franja-conf li{flex:none;width:76%;scroll-snap-align:start;border-top:0!important;border-left:1px solid var(--borde)!important;justify-content:flex-start}
  #mbp .conf-sec .franja-conf li:first-child{border-left:0!important}
}
#mbp .bloque:not(.hero-sec):not(.conf-sec):not(.cats-sec),#mbp .pie{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* a todo el ancho de la ventana sea cual sea el contenedor del tema (va al final: el «body{margin:0}» de la maqueta pasa a #mbp) */
#mbp{position:relative;overflow-x:clip;width:calc(100vw - var(--sb,0px));max-width:none;margin:0 0 0 calc(50% - 50vw + var(--sb,0px) / 2)}
/* Ajustes pedidos por Antonio al ver la portada DENTRO de la tienda (se añaden al final de portada.css, ya acotados a #mbp).
   Si se pasan a la maqueta (orden-v2.html), quitarlos de aquí. */

/* 06/10 · «el fondo de las tablas algo más sutil, es demasiado negro»: grafito en vez de negro, misma diagonal */
#mbp .c-t3d{background:linear-gradient(115deg,#26292E 0%,#2B2E34 55%,#33373E 55%,#373B42 100%);border-color:#26292E}
#mbp .t3d__escenario::before{background:radial-gradient(closest-side,rgba(253,255,44,.20),rgba(255,255,255,.04) 55%,transparent 72%)}
/* «aunque está soso, se ve mucho mejor» ⇒ algo de vida sin volver al negro: foco de estudio arriba a la derecha,
   filo amarillo en la diagonal y grano fino (todo encima del fondo, debajo del contenido) */
#mbp .c-t3d{position:relative;isolation:isolate}
#mbp .c-t3d::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 75% at 74% 18%,rgba(255,255,255,.10),transparent 70%),
    linear-gradient(115deg,transparent calc(55% - 1px),rgba(253,255,44,.55) calc(55% - 1px),rgba(253,255,44,.55) calc(55% + 1px),transparent calc(55% + 1px)),
    radial-gradient(40% 50% at 12% 100%,rgba(253,255,44,.06),transparent 70%)}
/* 06/10 · «la parte derecha bien para darle protagonismo, pero a la izquierda una imagen para darle vida»:
   foto que pasó Antonio (piloto con chaleco Jetpilot naranja; original en assets/_originales-jetsurf-accion-antonio.jpg), pasada a gris pizarra (saturación 0,42) solo en la mitad izquierda,
   oscurecida para que el texto se lea y fundida en la misma diagonal (115°, 55 %) */
#mbp .c-t3d::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(32,35,40,1) 0%,rgba(32,35,40,1) 25%,rgba(32,35,40,.74) 36%,rgba(32,35,40,.62) 100%),
    url("/modules/mbportada/views/assets/jetsurf-accion-antonio.webp") 20vw 30%/max(44vw,960px) auto no-repeat,#202328;
  /* «más sutil y parece que se pisan»: velo más tupido y la foto se apaga ANTES de la diagonal, lejos de la tabla 3D */
  -webkit-mask-image:linear-gradient(115deg,#000 0%,#000 36%,transparent 49%);mask-image:linear-gradient(115deg,#000 0%,#000 36%,transparent 49%)}
/* 06/10 · móvil: la prenda del slider más grande (quedaba un hueco vacío entre la prenda y el título) */
@media (max-width:700px){#mbp .hero-sec .prenda{top:3%;height:47%}#mbp .hero-sec .prenda.vest{top:5%;height:41%}
  /* puntos de color del slider: zona de toque de 40 px (eran 34) */
  #mbp .hero-sec .puntos button{min-width:40px;min-height:40px}
  /* 07/10: palabra de fondo larga («Naranja») entera dentro de la pantalla; a 44vw se salía por los dos lados */
  #mbp .slider .mundo__palabra.larga{font-size:26vw}}
/* móviles BAJOS (≤ 700 px de alto): la prenda rozaba el antetítulo */
@media (max-width:700px) and (max-height:700px){#mbp .hero-sec .prenda{top:3%;height:36%}#mbp .hero-sec .prenda.vest{top:5%;height:33%}}
/* móviles ALTOS (≥ 800 px): sobraba hueco bajo la prenda */
@media (max-width:700px) and (min-height:800px){#mbp .hero-sec .prenda{top:3%;height:52%}#mbp .hero-sec .prenda.vest{top:5%;height:45%}}
/* 06/10 · bloque de texto final rehecho (seo-sec.html): presentación + contacto | 4 tarjetas por tema */
#mbp .seo2{padding:clamp(40px,4.5vw,64px) 0 clamp(44px,5vw,72px);margin-bottom:0}
#mbp .seo2__rej{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.4vw,56px);align-items:start;border-top:0}
#mbp .seo2__kicker{margin:0 0 12px;font:600 12px/1 Barlow;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo,#EF392C);display:flex;align-items:center;gap:10px}
#mbp .seo2__kicker::before{content:"";width:22px;height:2px;background:currentColor}
#mbp .seo2__intro h1{margin:0 0 16px;font-size:clamp(30px,2.9vw,44px);line-height:.98;color:var(--carbon,#0B0B0C)}
#mbp .seo2__lead{margin:0 0 22px;font:400 16.5px/1.6 Barlow;color:#3a3a37;max-width:46ch}
#mbp .seo2__duda{margin:0 0 10px;font:600 15px/1.3 Barlow;color:var(--carbon,#0B0B0C)}
#mbp .seo2__btns{display:flex;flex-wrap:wrap;gap:10px}
#mbp .seo2__btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--carbon,#0B0B0C);font:600 14.5px/1 Barlow;color:var(--carbon,#0B0B0C);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
#mbp .seo2__btn:hover{background:var(--carbon,#0B0B0C);color:#fff}
#mbp .seo2__btn--wa{background:#1fae5b;border-color:#1fae5b;color:#fff}
#mbp .seo2__btn--wa:hover{background:#178c49;border-color:#178c49;color:#fff}
#mbp .seo2__temas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#mbp .seo2__tema{background:#fff;border:1px solid #e3e0d9;border-radius:10px;padding:20px 22px 18px;position:relative}
#mbp .seo2__tema::before{content:"";position:absolute;left:22px;top:0;width:28px;height:3px;background:var(--rojo,#EF392C);border-radius:0 0 3px 3px}
#mbp .seo2__tema h2{margin:0 0 8px;font:700 19px/1.05 BS,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--carbon,#0B0B0C)}
#mbp .seo2__tema p{margin:0;font:400 15px/1.6 Barlow;color:#3a3a37}
#mbp .seo2__tema a,#mbp .seo2__lead a{color:var(--carbon,#0B0B0C);font-weight:600;text-decoration:underline;text-decoration-color:#cfcac0;text-underline-offset:3px}
#mbp .seo2__tema a:hover{color:var(--rojo,#EF392C);text-decoration-color:currentColor}
@media (max-width:1000px){#mbp .seo2__rej{grid-template-columns:none}#mbp .seo2__temas{grid-template-columns:none}}
/* la franja blanca entre este bloque y el pie de la tienda era el relleno inferior del contenedor del tema */
#wrapper:has(#mbp),#content-wrapper:has(#mbp),#main:has(#mbp),#content:has(#mbp){padding-bottom:0!important;margin-bottom:0!important}
/* 06/10 · las cifras del nombre van en <b class="cifra"> (otro chat): con el span en flex-columna, «L», «1» y «e» salían
   cada una en su línea ⇒ nombre en línea y el precio debajo */
#mbp .t3d__mini>span{display:block;line-height:1}#mbp .t3d__mini>span b.cifra{display:inline}#mbp .t3d__mini>span em{display:block;margin-top:3px}
#mbp .t3d__mini>span bdi{display:inline}
/* 06/10 · 7 piezas (3 tablas, 3 motos y el Seabob) «para que se vea todo»: en ordenador se reparten la tira, sin desplazarla */
@media (min-width:1001px){#mbp #t3d-minis{display:flex;overflow:hidden}#mbp #t3d-minis .t3d__mini{flex:1 1 0;min-width:0;max-width:none}#mbp #t3d-minis .t3d__mini span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86em}
  #mbp #t3d-minis .t3d__mini{gap:8px;padding-left:10px;padding-right:10px}#mbp #t3d-minis .t3d__mini i{width:46px;flex:none}#mbp #t3d-minis .t3d__mini i img{max-width:100%}}
@media (min-width:1001px) and (max-width:1500px){#mbp #t3d-minis .t3d__mini span{font-size:.8em}#mbp #t3d-minis .t3d__mini i{width:38px}#mbp #t3d-minis .t3d__mini{gap:6px;padding-left:8px;padding-right:8px}}
@media (max-width:1000px){#mbp .c-t3d::after{background:
    linear-gradient(180deg,rgba(32,35,40,.66) 0%,rgba(32,35,40,.86) 45%,rgba(32,35,40,.97) 70%),
    url("/modules/mbportada/views/assets/jetsurf-accion-antonio.webp") 30% 0/auto 46% no-repeat;
  -webkit-mask-image:none;mask-image:none}
  /* en móvil la diagonal cruzaba el texto: fuera el filo amarillo */
  #mbp .c-t3d::before{background:radial-gradient(60% 75% at 74% 18%,rgba(255,255,255,.10),transparent 70%)}}

/* 07/10 · motos: la foto provisional (hecha desde el 3D) cae justo donde aparece el modelo */
#mbp .t3d__reserva.foto-moto{transform:translateY(6%) scale(1.05)}
@media (max-width:700px){#mbp .t3d__reserva.foto-moto{transform:translate(5%,11%) scale(1.2)}}