/* LPS · sistema "Trabajo pesado" (9-nov-2026)
   Referencia principal: marcas de herramienta industrial de EUA (Milwaukee Tool, Hilti): color de marca como escenario,
   producto como imagen dominante, grotesca condensada pesada, números grandes.
   Préstamos acotados: catálogo McMaster-Carr (tablas con reglas de 1 px, no. de parte en monoespaciada)
   y barra de utilidades + menú marino (United Rentals, ver claude/design-lps.md).
   Roles de color: azul #243369 = escenario y títulos · naranja #ff5406 = marca, "seleccionado" y botón Buscar ·
   verde #128c4a = SOLO acciones de WhatsApp. Sin sombras en cajas, sin degradados, sin tarjetas decorativas. */
@font-face{font-family:Sofia;font-weight:400;font-display:swap;src:url(fonts/sofia-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Sofia;font-weight:600;font-display:swap;src:url(fonts/sofia-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Sofia;font-weight:700;font-display:swap;src:url(fonts/sofia-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:SofiaC;font-weight:800;font-display:swap;src:url(fonts/sofia-sans-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:SofiaX;font-weight:900;font-display:swap;src:url(fonts/sofia-sans-extra-condensed-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:PlexM;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
:root{
  --azul:#243369;--azul-osc:#1b2752;--noche:#141d3d;--naranja:#ff5406;--naranja-osc:#dc4600;--wa:#128c4a;--wa-osc:#0e7a40;
  --tinta:#121726;--texto:#434a5a;--tenue:#5f6679;--regla:#dfe2ea;--gris:#f1f2f5;--suave:#c3c9db;--linea-osc:#2c3a6e;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --sans:Sofia,"Helvetica Neue",Arial,sans-serif;--cond:SofiaC,Sofia,"Arial Narrow",sans-serif;--x:SofiaX,SofiaC,"Arial Narrow",sans-serif;--mono:PlexM,ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:#fff;color:var(--tinta);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit}
.w{max-width:1240px;margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid #ffb48a;outline-offset:2px}
[hidden]{display:none!important}

.preview{background:#fff3c4;color:#4a3b00;font:600 12.5px/1.4 var(--sans);text-align:center;padding:7px 12px}

/* barra de utilidades + encabezado */
.util{background:var(--noche);color:var(--suave);font:600 13px/1 var(--sans)}
.util .w{display:flex;justify-content:space-between;align-items:center;height:34px;gap:16px}
.util a{color:#fff;text-decoration:none;font-weight:700}
.st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;background:#8a93ad}
.st.on i{background:#3ddc84}.st.on b{color:#fff}
.util .r{display:flex;gap:22px}
@media(max-width:760px){.util .hide-m{display:none}}
.hd{background:var(--azul-osc);color:#fff;border-bottom:1px solid var(--linea-osc);position:sticky;top:0;z-index:40}
.hd .w{display:flex;align-items:center;gap:30px;height:66px}
.hd .logo img{height:40px;width:auto}
.hd nav{display:flex;gap:26px;font:700 15px/1 var(--sans);color:var(--suave)}
.hd nav a{text-decoration:none;padding:8px 0;border-bottom:3px solid transparent}
.hd nav a:hover{color:#fff}
.hd nav a[aria-current]{color:#fff;border-bottom-color:var(--naranja)}
.hd .r{margin-left:auto;display:flex;gap:16px;align-items:center;font:700 15px/1 var(--sans)}
@media(max-width:900px){.hd nav{gap:18px;font-size:14px}}
@media(max-width:640px){.hd .w{height:58px;gap:14px}.hd .logo img{height:34px}.hd nav a.opt{display:none}.hd .r .btn{display:none}.hd nav{margin-left:auto}}

/* botones: bloques de 2 px, condensada pesada, sin sombra ni brinco */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:2px;border:2px solid transparent;font:800 18px/1 var(--cond);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.wa{background:var(--wa);color:#fff}.wa:hover{background:var(--wa-osc)}
.or{background:var(--naranja);color:#fff}.or:hover{background:var(--naranja-osc)}
.az{background:var(--azul);color:#fff}.az:hover{background:var(--azul-osc)}
.ol{color:#fff;border-color:rgba(255,255,255,.55)}.ol:hover{border-color:#fff}
.ol-d{color:var(--azul);border-color:var(--azul)}.ol-d:hover{background:var(--azul);color:#fff}
.sm{height:44px;padding:0 16px;font-size:16px}
.ol-d svg{color:var(--wa);width:17px;height:17px}.ol-d:hover svg{color:#fff}
.go{font:800 17px/1 var(--cond);color:var(--azul);margin-top:12px}
.go::after{content:"→";color:var(--naranja);display:inline-block;margin-left:6px;transition:transform .16s var(--ease-out)}
.lk{font:800 18px/1 var(--cond);color:var(--azul);text-decoration:none;border-bottom:2px solid var(--naranja);padding-bottom:3px}
.lk:hover{color:var(--tinta)}
.on-dark .lk{color:#fff}

/* tipografía de sección */
h1{font:900 46px/.92 var(--x);text-wrap:balance}
h2{font:900 44px/.95 var(--x);color:var(--azul);text-wrap:balance}
.on-dark h2{color:#fff}
.lead{color:var(--texto);margin-top:12px;max-width:52ch}
.on-dark .lead{color:var(--suave)}
.eyb{font:700 15px/1.3 var(--sans);color:var(--suave)}
.eyb b{color:#fff}
@media(min-width:900px){h1{font-size:72px}h2{font-size:54px}}
.sec{padding:48px 0}
@media(min-width:900px){.sec{padding:72px 0}}
.gris{background:var(--gris)}
.noche{background:var(--noche);color:#fff}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:28px}

/* ===== HÉROES ===== */
.hero{background:var(--azul);color:#fff;overflow:hidden}
.hero h1{margin-top:12px}
.hero .sub{font:600 18px/1.4 var(--sans);color:var(--suave);margin-top:16px;max-width:46ch}
/* inicio */
.hi{display:grid;grid-template-columns:1.05fr 1fr;gap:0 40px;align-items:center;padding-top:52px;padding-bottom:56px}
.hi>*,.hg>*{min-width:0}
.find{display:flex;margin-top:28px;max-width:560px}
.find input{flex:1;min-width:0;height:60px;border:0;border-radius:2px 0 0 2px;padding:0 18px;font:600 18px/1 var(--sans);color:var(--tinta);background:#fff}
.find input::placeholder{color:#8088a0;font-weight:400}
.find input:focus{outline:3px solid #ffb48a;outline-offset:-3px}
.find .btn{height:60px;border-radius:0 2px 2px 0;font-size:20px;padding:0 26px}
.quick{display:flex;gap:8px;margin:14px -20px 0;padding:0 20px;overflow-x:auto;scrollbar-width:none;align-items:center;font:600 14px/1 var(--sans);color:var(--suave);white-space:nowrap}
.quick::-webkit-scrollbar{display:none}
.quick a{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 14px;border:1.5px solid rgba(255,255,255,.4);border-radius:2px;color:#fff;text-decoration:none;font:800 16px/1 var(--cond)}
.quick a:hover{border-color:#fff}
.hero .ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.collage{max-width:600px;width:100%;margin-left:auto}
.collage img{width:100%;height:auto}
@media(max-width:900px){
  .hi{grid-template-columns:1fr;padding-top:28px;padding-bottom:0}
  .hero .sub{font-size:16.5px}
  .find input,.find .btn{height:54px}.find .btn{padding:0 18px}
  
  .collage{margin:26px auto 0;max-width:330px;padding-bottom:26px}
  .quick span{display:none}
  .quick{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:44px}
}
/* héroe compacto (buscador) */
.hx{padding-top:36px;padding-bottom:40px}
.hx .find{max-width:860px}
@media(min-width:900px){.hx{padding-top:56px;padding-bottom:60px}}

/* franja de datos bajo el héroe */
.strip{background:var(--noche);color:#fff}
.strip ul{display:grid;grid-template-columns:repeat(4,1fr)}
.strip li{padding:18px 20px;border-left:1px solid var(--linea-osc);font:600 14px/1.35 var(--sans);color:#d5d9e6}
.strip li:first-child{border-left:0;padding-left:0}
.strip b{display:block;font:800 21px/1.1 var(--cond);color:#fff;margin-bottom:3px}
@media(max-width:900px){.strip ul{grid-template-columns:1fr 1fr}.strip li{border-left:0;padding:14px 12px 14px 0;border-top:1px solid var(--linea-osc)}.strip li:nth-child(-n+2){border-top:0}}

/* baterías en inicio */
.bat3{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--azul)}
.bat3 a{display:flex;flex-direction:column;padding:22px 28px 24px;border-left:1px solid var(--regla);text-decoration:none;color:inherit}
.bat3 a:first-child{border-left:0;padding-left:0}
.bat3 img{height:180px;width:180px;object-fit:contain;object-position:left bottom;align-self:flex-start;margin-bottom:14px;transition:transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.bat3 a:hover img{transform:translateY(-4px)}.cat:hover img{transform:scale(1.05)}.go,.lk{transition:color .12s ease}.bat3 a:hover .go::after,.cat.all:hover span::after{transform:translateX(3px)}}
.bat3 .m{font:900 60px/.9 var(--x);color:var(--azul)}
.bat3 .s{font:600 14px/1.3 var(--sans);color:var(--tenue);margin-top:6px}
.bat3 .s i{font:500 13.5px/1 var(--mono);font-style:normal;white-space:nowrap}
.bat3 .p{font:900 46px/1 var(--x);margin-top:12px}
.bat3 .p small{font:700 14px/1 var(--sans);color:var(--texto)}
.bat3 .q{font:600 14.5px/1.3 var(--sans);color:var(--texto);margin-top:4px}
@media(max-width:760px){
  .bat3{grid-template-columns:1fr}
  .bat3 a{display:grid;grid-template-columns:88px 1fr auto;grid-template-areas:"i m p" "i s q" "i g g";align-items:center;gap:0 14px;padding:16px 0;border-left:0;border-bottom:1px solid var(--regla)}
  .bat3 img{grid-area:i;height:80px;width:80px;object-position:center;margin:0 auto;align-self:center}
  .bat3 .m{grid-area:m;font-size:42px;align-self:end}.bat3 .s{grid-area:s;align-self:start;margin:2px 0 0;font-size:13px}
  .bat3 .p{grid-area:p;font-size:34px;margin:0;text-align:right;align-self:end}.bat3 .p small{font-size:12px}
  .bat3 .q{grid-area:q;text-align:right;font-size:13px;align-self:start;margin:2px 0 0}
  .bat3 .go{grid-area:g;margin-top:6px;padding:6px 0}
}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(6,1fr);border-top:3px solid var(--azul);border-bottom:1px solid #d3d7e2}
.cat{padding:18px 18px 18px;border-left:1px solid #d3d7e2;text-decoration:none;display:flex;flex-direction:column;transition:background-color .12s}
.cat:first-child{border-left:0}
.cat:hover{background:#fff}
.cat .im{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;mix-blend-mode:multiply}
.cat img{max-height:100%;max-width:88%;width:auto;object-fit:contain;transition:transform .2s var(--ease-out)}
.cat b{font:800 21px/1.05 var(--cond);color:var(--azul);margin-top:auto;min-height:44px;display:flex;align-items:flex-end}
.cat.all{justify-content:flex-end;background:var(--azul)}
.cat.all:hover{background:var(--azul-osc)}
.cat.all b{color:#fff;font:900 34px/.95 var(--x);min-height:0}
.cat.all span{font:800 16px/1 var(--cond);color:#fff;margin-top:10px}
.cat.all span::after{content:"→";color:var(--naranja);display:inline-block;margin-left:6px;transition:transform .16s var(--ease-out)}
.more{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.more a{padding:14px 18px;border-left:1px solid #d3d7e2;border-bottom:1px solid #d3d7e2;text-decoration:none;font:800 18px/1.2 var(--cond);color:var(--azul)}
.more a:first-child{border-left:0}
.more a:hover{background:#fff}
@media(max-width:900px){
  .cats{grid-template-columns:1fr 1fr}
  .cat{border-left:0;border-top:1px solid #d3d7e2;padding:14px 12px 16px}
  .cat:nth-child(-n+2){border-top:0}.cat:nth-child(even){border-left:1px solid #d3d7e2}
  .cat .im{height:96px;margin-bottom:10px}.cat b{min-height:0;font-size:19px}
  .more{grid-template-columns:1fr 1fr 1fr}.more a{padding:13px 10px;font-size:17px}.more a:nth-child(3n+1){border-left:0;padding-left:0}
}


/* lista de piezas (lo más pedido) */
.tp{display:grid;grid-template-columns:1fr 1.5fr;gap:32px 64px;align-items:start}
.tp>div:first-child{position:sticky;top:100px}
@media(max-width:900px){.tp>div:first-child{position:static}}
@media(max-width:900px){.tp{grid-template-columns:1fr}}
.top{border-top:3px solid var(--azul)}
.top li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--regla)}
.top .pn{font:500 19px/1.2 var(--mono);color:var(--tinta)}
.top .d{font:400 15px/1.3 var(--sans);color:var(--texto);grid-column:1}
.top .btn{grid-column:2;grid-row:1/3}

/* marcas */
.brands{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea-osc)}
.brands div{padding:26px 32px 6px;border-left:1px solid var(--linea-osc)}
.brands div:first-child{border-left:0;padding-left:0}
.brands b{display:block;font:900 64px/.9 var(--x);color:#fff}
.brands em{display:inline-block;font:800 14px/1 var(--cond);font-style:normal;margin-top:12px;padding:6px 9px 5px;border-radius:2px;border:1.5px solid var(--suave);color:var(--suave)}
.brands em.au{background:var(--naranja);border-color:var(--naranja);color:#fff}
.brands p{color:var(--suave);font-size:15px;margin-top:12px;max-width:34ch}
@media(max-width:760px){.brands{grid-template-columns:1fr}.brands div{border-left:0;padding:20px 0;border-bottom:1px solid var(--linea-osc)}.brands div:last-child{border-bottom:0;padding-bottom:0}.brands b{font-size:50px}.brands em{margin-top:8px}.brands p{margin-top:8px;max-width:none}}

/* pasos numerados */
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:10px;padding:13px 0;border-top:1px solid var(--regla);color:var(--texto)}
.steps{counter-reset:s;margin:20px 0 26px}
.steps li::before{content:counter(s);font:900 36px/.9 var(--x);color:var(--naranja)}
.steps b{color:var(--tinta)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}

/* datos (cómo comprar) */
.facts div{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--regla)}
.facts dt{font:800 18px/1.25 var(--cond);color:var(--azul)}
.facts dd{color:var(--texto);font-size:15.5px}
.on-dark .facts div{border-top-color:var(--linea-osc)}
.on-dark .facts dt{color:#fff}.on-dark .facts dd{color:var(--suave)}

/* contacto */
.ct .g{display:grid;grid-template-columns:340px 1fr;gap:56px}
@media(max-width:900px){.ct .g{grid-template-columns:1fr;gap:30px}}
.who{padding-top:6px}
.who .k{font:700 14px/1 var(--sans);color:var(--tenue)}
.who h3{font:900 40px/.95 var(--x);color:var(--azul);margin-top:8px}
.who .n{display:block;font:900 54px/1 var(--x);margin-top:14px;text-decoration:none;color:var(--tinta)}
.who p{color:var(--texto);margin-top:6px}
.who .btn{margin-top:18px;width:100%}
form.f{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-content:start;margin-top:22px}
form.f .full{grid-column:1/-1}
@media(max-width:600px){form.f{grid-template-columns:1fr}}
form.f label{display:grid;gap:7px;font:700 14px/1 var(--sans);color:var(--tinta)}
form.f input[type=text],form.f input[type=tel],form.f textarea{font:400 16px/1.3 var(--sans);color:var(--tinta);border:1.5px solid #b8bed0;border-radius:2px;padding:12px 13px;background:#fff;width:100%}
form.f textarea{min-height:104px;resize:vertical}
form.f input:focus,form.f textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 2px var(--azul)}
.fmsg{font-size:14px;color:var(--tenue)}
.frow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* texto SEO */
.about{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 48px;border-top:3px solid var(--azul);padding-top:22px}
.about h3{font:800 21px/1.1 var(--cond);color:var(--azul);margin-bottom:8px}
.about p{color:var(--texto);font-size:15px}
@media(max-width:760px){.about{grid-template-columns:1fr}}

footer{background:var(--noche);color:var(--suave);font-size:14px}
footer .w{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;padding:44px 20px}
@media(max-width:800px){footer .w{grid-template-columns:1fr 1fr}}
footer b{color:#fff;display:block;font:800 17px/1.2 var(--cond);margin-bottom:8px}
footer a{color:#fff;text-decoration:none;font-weight:700}
footer img{height:40px;width:auto;margin-bottom:12px}
footer .legal{font-size:13px;max-width:1240px;margin:0 auto;padding:0 20px}
footer .legal>div{border-top:1px solid var(--linea-osc);padding:14px 0 18px}
footer details summary{cursor:pointer;display:inline;text-decoration:underline}
footer details p{margin-top:10px;max-width:90ch}
footer .legal a{font-weight:400;text-decoration:underline}

/* barra fija en celular */
.bar{display:none}
@media(max-width:700px){
  .bar{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--noche);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .bar .btn{height:48px;font-size:17px;width:100%;padding:0 10px}
  .bar.sel{grid-template-columns:auto 1fr}
  .bar .cnt{color:#fff;font:800 17px/1.1 var(--cond);align-self:center;padding:0 6px}
  .bar .cnt small{display:block;font:600 12px/1.2 var(--sans);color:var(--suave);text-decoration:underline;cursor:pointer}
  body{padding-bottom:64px}
}

/* ===== BATERÍAS ===== */
.hg{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"c1 st" "c2 st";gap:0 48px;padding-top:44px;padding-bottom:48px;align-items:start}
.c1{grid-area:c1}.c2{grid-area:c2}.stage{grid-area:st;align-self:end;position:relative}
.tabs{display:flex;gap:6px;margin-top:28px;border-bottom:1px solid rgba(255,255,255,.22)}
.tabs button{all:unset;cursor:pointer;font:900 46px/1 var(--x);color:rgba(255,255,255,.8);padding:4px 14px 12px;position:relative;transition:color .12s}
.tabs button:first-child{padding-left:0}
.tabs button:hover{color:#fff}
.tabs button[aria-selected=true]{color:#fff}
.tabs{position:relative}
.tabs .ind{position:absolute;left:0;bottom:-1px;height:4px;width:100px;background:var(--naranja);transform-origin:left;transition:transform .25s var(--ease-in-out);pointer-events:none}
.tabs button:active{transform:scale(.97)}
.tabs button:focus-visible{outline:3px solid #ffb48a;outline-offset:2px}
.price{display:flex;align-items:flex-end;gap:16px;margin-top:26px;flex-wrap:wrap}
.price .big{font:900 104px/.8 var(--x)}
.price .psub{font:700 16px/1.3 var(--sans);color:var(--suave);padding-bottom:6px}
.price .psub b{color:#fff;display:block;font-size:18px}
.specs{display:flex;flex-wrap:wrap;margin-top:22px;border-top:1px solid rgba(255,255,255,.22)}
.specs div{padding:12px 22px 0 0;margin-right:22px;border-right:1px solid rgba(255,255,255,.22);font:600 13px/1.2 var(--sans);color:var(--suave)}
.specs div:last-child{border-right:0;margin-right:0;padding-right:0}
.specs b{display:block;font:800 22px/1.15 var(--cond);color:#fff;margin-top:3px}
.specs b.mono{font:500 19px/1.3 var(--mono)}
.stage img{width:100%;height:auto;max-width:470px;margin:0 auto;filter:drop-shadow(0 16px 12px rgba(5,10,30,.38));transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),filter .2s ease}
.stage img.sw{opacity:0;transform:scale(.96);filter:drop-shadow(0 16px 12px rgba(5,10,30,.38)) blur(2px)}
.swap{transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.swap.sw{opacity:0;transform:translateY(6px)}
.tabs .tagn{margin-left:auto;align-self:center;font:800 15px/1 var(--cond);background:var(--naranja);color:#fff;padding:7px 10px 6px;border-radius:2px}
@media(max-width:900px){
  .hg{grid-template-columns:1fr;grid-template-areas:"c1" "st" "c2";padding-top:26px;padding-bottom:0}
  .tabs{margin-top:16px}.tabs button{font-size:40px}
  .stage{padding:14px 0 0}
  .stage img{max-width:236px;margin-bottom:-54px;position:relative;z-index:1}
  .c2{background:#fff;color:var(--tinta);margin:0 -20px;padding:70px 20px 30px}
  .price{margin-top:0}.price .big{font-size:84px;color:var(--azul)}
  .price .psub{color:var(--texto)}.price .psub b{color:var(--tinta)}
  .specs{border-top-color:var(--regla)}.specs div{border-right-color:var(--regla);color:var(--tenue);padding-right:16px;margin-right:16px}.specs b{color:var(--tinta)}
  .hg .ctas .btn{flex:1}
  .hg .ctas .ol{color:var(--azul);border-color:var(--azul)}
}
@media(min-width:1100px){.price .big{font-size:128px}}

.bank .g{display:grid;grid-template-columns:1fr 1.15fr;gap:48px 64px;align-items:start}
@media(max-width:900px){.bank .g{grid-template-columns:1fr;gap:26px}}
.seg{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:2px solid var(--azul);border-radius:2px;background:#fff}
.seg button{all:unset;cursor:pointer;text-align:center;padding:11px 0 10px;font:800 22px/1 var(--cond);color:var(--azul);border-left:2px solid var(--azul)}
.seg button:first-child{border-left:0}
.seg button small{display:block;font:600 13px/1.2 var(--sans);color:var(--tenue);margin-top:4px}
.seg button[aria-pressed=true]{background:var(--azul);color:#fff}.seg button[aria-pressed=true] small{color:var(--suave)}
.seg button:focus-visible{outline:3px solid var(--naranja);outline-offset:-3px}
.seg.m3{grid-template-columns:repeat(3,1fr);margin-top:12px}
.panel{background:#fff;border:1px solid #c9cedb;border-radius:2px;padding:22px 24px 24px}
.row{display:flex;align-items:flex-end;gap:3px;min-height:116px;padding:0 0 14px;border-bottom:3px solid var(--azul);overflow:hidden}
.row img{height:104px;width:auto;flex:none}
.row.many img{height:76px}
.sum{display:grid;gap:6px;font:600 15px/1.3 var(--sans);color:var(--texto);margin-top:16px}
.sum div{display:flex;justify-content:space-between;gap:16px}
.sum .t{border-top:1px solid #c9cedb;padding-top:10px;margin-top:4px;align-items:flex-end;color:var(--tinta);font-weight:700}
.sum .t dd{font:900 56px/.85 var(--x)}
.hint{font:800 17px/1.3 var(--cond);color:var(--azul);margin:10px 0 16px}
.panel .btn{width:100%}
.panel .fine{margin-top:12px}
@media(max-width:900px){.panel{max-width:none;margin:0}}
@media(max-width:600px){.panel{padding:16px 16px 18px}.row img{height:70px}.row.many img{height:38px}}


table.c{width:100%;border-collapse:collapse;margin-top:26px;table-layout:fixed}
.c th,.c td{padding:14px 16px;border-bottom:1px solid var(--regla);text-align:left;vertical-align:middle}
.c thead th{font:900 44px/1 var(--x);color:var(--azul);border-bottom:3px solid var(--azul);padding-bottom:12px}
.c thead th:first-child,.c tbody th{width:220px;padding-left:0}
.c thead th img{height:96px;width:auto;margin-bottom:10px}
.c tbody th{font:600 14px/1.2 var(--sans);color:var(--tenue)}
.c td{font:800 22px/1.1 var(--cond)}
.c td.pn{font:500 16px/1.2 var(--mono)}
.c td .p{font:900 42px/1 var(--x)}
.c tfoot td{border-bottom:0;padding-top:18px}
.c tfoot .btn{width:100%;max-width:220px}
.c tfoot td:first-child{padding-left:0}
@media(max-width:700px){
  table.c,.c thead,.c tbody,.c tfoot{display:block}
  .c tr{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--regla)}
  .c thead tr{border-bottom:3px solid var(--azul)}
  .c th,.c td{border:0;padding:4px 8px 12px 0}
  .c thead th:first-child,.c tfoot td:first-child{display:none}
  .c thead th{font-size:32px;padding-bottom:10px}.c thead th img{height:60px}
  .c tbody th{grid-column:1/-1;width:auto;padding:10px 0 4px;font-size:13px}
  .c td{font-size:19px}.c td .p{font-size:30px}.c td.pn{font-size:13px;word-break:break-all}
  .c tfoot tr{border:0;padding-top:14px;gap:8px}.c tfoot td{padding:0}
  .c tfoot .btn{width:100%;max-width:none;padding:0 4px;font-size:15px;gap:0}.c tfoot .btn svg{display:none}
}

.fine{font-size:13.5px;color:var(--tenue);margin-top:14px}
.on-dark .fine{color:var(--suave)}

/* ===== BUSCADOR ===== */
.cw{display:grid;grid-template-columns:230px 1fr;gap:0 48px;align-items:start;padding-top:28px}
.cw>*{min-width:0}
.cw>aside{position:sticky;top:94px}
.chips{display:flex;flex-direction:column;border-top:3px solid var(--azul)}
.chips button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:800 18px/1.15 var(--cond);color:var(--azul);padding:11px 10px 10px 0;border-bottom:1px solid var(--regla)}
.chips button span{font:600 13px/1 var(--sans);color:var(--tenue)}
.chips button:hover{color:var(--tinta)}
.chips button[aria-pressed=true]{color:var(--tinta);box-shadow:inset 4px 0 0 var(--naranja);padding-left:12px}
.chips button:focus-visible{outline:3px solid var(--naranja);outline-offset:-3px}
@media(max-width:1000px){
  .cw{grid-template-columns:1fr;padding-top:0}
  .cw>aside{position:sticky;top:66px;z-index:20;background:#fff;margin:0 -20px;border-bottom:3px solid var(--azul);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .chips{position:static;flex-direction:row;gap:8px;overflow-x:auto;padding:12px 40px 12px 20px;border-top:0;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none;display:inline-flex;align-items:center;height:44px;gap:6px;border:1.5px solid #b8bed0;border-radius:2px;padding:0 13px;background:#fff;white-space:nowrap;font-size:17px}
  .chips button[aria-pressed=true]{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:none;padding-left:13px}
  .chips button[aria-pressed=true] span{color:var(--suave)}
}
@media(max-width:640px){.cw>aside{top:58px}}

.status{font:600 14.5px/1.4 var(--sans);color:var(--texto);padding:0 0 12px;border-bottom:3px solid var(--azul)}
.status b{color:var(--tinta)}
@media(max-width:1000px){.status{padding-top:14px}}
table.p{width:100%;border-collapse:collapse}
.p thead th{font:600 13px/1 var(--sans);color:var(--tenue);text-align:left;padding:12px 10px 10px;border-bottom:1px solid var(--regla);position:sticky;top:67px;background:#fff;z-index:5}
.p td{padding:10px 10px;border-bottom:1px solid var(--regla);vertical-align:middle}
.p tr.g td{padding:28px 0 8px;border-bottom:2px solid var(--tinta);font:900 32px/1 var(--x);color:var(--azul)}
.p tr.r{cursor:pointer}
@media(hover:hover) and (pointer:fine){.p tr.r:hover td{background:var(--gris)}}
.p tr.r td{transition:background-color .12s ease}
.p tr.r.on td{background:#fff4ee}
.p tr.r.on td:first-child{box-shadow:inset 4px 0 0 var(--naranja)}
.p .ck{width:44px;padding-left:12px}
.p .ck input{width:22px;height:22px;accent-color:var(--naranja);cursor:pointer;display:block}
.p .pn{font:500 18px/1.2 var(--mono);white-space:nowrap;width:200px;color:var(--tinta)}
.p .d{font:400 15.5px/1.3 var(--sans);color:var(--texto)}
.p .b{font:600 13.5px/1.2 var(--sans);color:var(--texto);white-space:nowrap;width:160px}
.tag{display:inline-block;font:800 13px/1 var(--cond);padding:5px 7px 4px;border-radius:2px;border:1.5px solid var(--naranja-osc);color:var(--naranja-osc);margin-left:8px;vertical-align:1px}
.p .a{width:1%;text-align:right;padding-right:0}
mark{background:#ffe1d0;color:inherit;padding:0 1px}
@media(max-width:760px){
  .p thead{display:none}
  .p,.p tbody{display:block}
  .p tr.g{display:block}.p tr.g td{display:block}
  .p tr.r{display:grid;grid-template-columns:40px auto 1fr auto;grid-template-areas:"ck pn b a" "ck d d a";padding:9px 0;border-bottom:1px solid var(--regla);align-items:center;gap:1px 0}
  .p tr.r td{display:block;padding:0;border:0;width:auto;background:none!important;box-shadow:none!important}
  .p tr.r.on{background:#fff4ee;box-shadow:inset 4px 0 0 var(--naranja)}
  .p .ck{grid-area:ck;padding-left:8px}.p .pn{grid-area:pn;font-size:17px}.p .d{grid-area:d;font-size:14.5px}
  .p tr.r td.b{grid-area:b;font-size:12.5px;padding-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}.p .a{grid-area:a;padding-left:8px}
  .p .a .btn{width:44px;padding:0;border-color:#b8bed0}.p .a .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.p .a .btn svg{width:21px;height:21px}
}


.none{padding:36px 0;border-bottom:1px solid var(--regla)}
.none b{font:900 34px/1 var(--x);color:var(--azul);display:block;margin-bottom:8px}
.none p{color:var(--texto);margin-bottom:16px;max-width:56ch}
.selbar{position:sticky;bottom:0;z-index:25;background:var(--noche);color:#fff;padding:12px 20px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.selbar b{font:800 20px/1 var(--cond)}
.selbar button.x{all:unset;cursor:pointer;font:600 14px/1 var(--sans);color:var(--suave);text-decoration:underline;margin-left:14px}
@media(max-width:700px){.selbar{display:none}}
.order{padding:22px 0 56px;color:var(--texto);max-width:70ch}
.order b{color:var(--tinta)}

/* ===== MOVIMIENTO (9-nov, criterios de Emil Kowalski): solo donde explica un cambio de estado o da respuesta al toque.
   Entradas con ease-out fuerte y < 300 ms; lo que se mueve en pantalla con ease-in-out; nada se anima al teclear o filtrar. */
.seg button{transition:background-color .12s ease,color .12s ease}
.row img{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.row img.in{opacity:0;transform:translateY(8px) scale(.96)}
.selbar{transition:transform .22s var(--ease-out),opacity .22s var(--ease-out)}
.selbar.in{transform:translateY(100%);opacity:0}
.bar.sel{animation:barin .22s var(--ease-out)}
@keyframes barin{from{transform:translateY(40%);opacity:.4}}
/* entrada única del producto en los héroes */
.collage img,.hg .stage{animation:rise .5s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}}
.p .ck input,.find input,form.f input,form.f textarea{transition:border-color .12s ease,box-shadow .12s ease}
.lead,.about p,.facts dd,.steps li span,.brands p,.fine,.order,.none p{text-wrap:pretty}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.btn:active,.tabs button:active{transform:none}}

/* ======================================================================
   V7 (9-nov-2026 noche) · "otro boleto"
   - Fotos de producto re-iluminadas en estudio (Higgsfield, fieles al original) con fondo transparente.
   - Encabezado blanco con el logo de LPS (azul), como jlg.com.
   - Botones con identidad propia: placa con esquina recortada (chaflán), mayúsculas condensadas,
     tapa con flecha o ícono que se mueve, brillo que barre al pasar el ratón. Los de contorno llevan
     la esquina naranja como marca.
   - Movimiento que sí se ve: títulos que suben palabra por palabra, piezas del héroe que entran
     escalonadas y flotan, etiquetas técnicas, cinta de números de parte, secciones que aparecen al bajar,
     precio que cuenta. Todo respeta "reducir movimiento".
   ====================================================================== */
:root{--chaf:14px;--grid:rgba(255,255,255,.055)}

/* encabezado blanco */
.hd{background:rgba(255,255,255,.96);color:var(--azul);border-bottom:1px solid var(--regla);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.hd .logo img{height:44px;width:auto}
.hd nav{color:var(--tenue)}
.hd nav a:hover,.hd nav a[aria-current]{color:var(--azul)}
@media(max-width:640px){.hd .logo img{height:36px}}

/* ---------- BOTONES ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;height:54px;padding:0 22px;gap:12px;border:0;border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--chaf)) 0,100% var(--chaf),100% 100%,0 100%);
  font:800 16.5px/1 var(--cond);text-transform:uppercase;letter-spacing:.06em;
  transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn>span{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 48%,rgba(255,255,255,0) 64%);transform:translateX(-130%)}
@media(hover:hover) and (pointer:fine){.btn:hover::after{transform:translateX(130%);transition:transform .7s var(--ease-out)}}
.btn .ar{position:relative;z-index:1;flex:none;width:30px;height:30px;margin-right:-8px;display:grid;place-items:center;background:rgba(0,0,0,.16);transition:transform .25s var(--ease-out),background-color .2s}
.btn .ar::before{content:"";width:14px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M8 0l6 6-6 6-1.4-1.4L10.2 7H0V5h10.2L6.6 1.4z'/%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 14 12'%3E%3Cpath d='M8 0l6 6-6 6-1.4-1.4L10.2 7H0V5h10.2L6.6 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(hover:hover) and (pointer:fine){.btn:hover .ar{transform:translateX(4px)}}
/* WhatsApp: ícono en tapa oscura a la izquierda */
.btn.wa{padding-left:0}
.btn.wa>svg{position:relative;z-index:1;width:54px;height:54px;padding:16px;background:rgba(0,0,0,.18);flex:none;margin-right:2px;transition:background-color .2s}
.btn.wa:hover>svg{background:rgba(0,0,0,.26)}
.wa{background:var(--wa)}.wa:hover{background:#0f9a50}
.or{background:var(--naranja)}.or:hover{background:#ff6a26}
.or .ar{background:rgba(0,0,0,.18)}
/* contorno: borde de 2 px + esquina naranja */
.ol,.ol-d{clip-path:none;background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.ol{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.ol:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.06)}
.ol::before,.ol-d::before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 var(--chaf) var(--chaf) 0;border-color:transparent var(--naranja) transparent transparent;z-index:3;transition:border-width .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.ol:hover::before,.ol-d:hover::before{border-width:0 20px 20px 0}}
.ol .ar,.ol-d .ar{background:transparent}
.ol-d{color:var(--azul)}
.ol-d:hover{background:var(--azul);color:#fff;box-shadow:inset 0 0 0 2px var(--azul)}
.ol-d svg{color:var(--wa)}.ol-d:hover svg{color:#fff}
.sm{height:44px;padding:0 15px;font-size:14.5px;--chaf:11px}
.btn.wa.sm{padding-left:0}.btn.wa.sm>svg{width:44px;height:44px;padding:12px}
.btn.ol-d.sm>svg{width:18px;height:18px;padding:0;background:none}
.find .btn{clip-path:polygon(0 0,calc(100% - var(--chaf)) 0,100% var(--chaf),100% 100%,0 100%);height:60px}
.btn:active{transform:scale(.97)}
/* enlaces con flecha (patrón jlg.com: flecha naranja) */
.lk{border-bottom:0;padding-bottom:0;display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.05em;font-size:16px}
.lk{position:relative;padding-right:40px;min-height:30px}
.lk::before{content:"";position:absolute;right:0;top:50%;width:30px;height:30px;margin-top:-15px;box-shadow:inset 0 0 0 2px var(--naranja);transition:transform .25s var(--ease-out),background-color .2s}
.lk::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:12px;margin-top:-6px;background:var(--naranja);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M8 0l6 6-6 6-1.4-1.4L10.2 7H0V5h10.2L6.6 1.4z'/%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 14 12'%3E%3Cpath d='M8 0l6 6-6 6-1.4-1.4L10.2 7H0V5h10.2L6.6 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--ease-out),background-color .2s}
@media(hover:hover) and (pointer:fine){.lk:hover::before{transform:translateX(4px);background:var(--naranja)}.lk:hover::after{transform:translateX(4px);background:#fff}}
.go{text-transform:uppercase;letter-spacing:.05em;font-size:15px}

/* ---------- TÍTULOS: suben palabra por palabra ---------- */
.js [data-split] .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.js [data-split] .wd>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i)*55ms + var(--d0,0ms))}
.js [data-split].in .wd>span{transform:none}
/* etiqueta de sección con número (editorial) */
.idx{display:flex;align-items:center;gap:12px;font:500 13px/1 var(--mono);color:var(--naranja);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.idx::after{content:"";height:1px;width:48px;background:currentColor;opacity:.6}
.on-dark .idx{color:#ff8a52}

/* ---------- APARECER AL BAJAR ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- HÉROE DE INICIO ---------- */
.hero{position:relative;isolation:isolate;background:
  radial-gradient(60% 75% at 72% 48%,#3a4f9e 0%,rgba(58,79,158,0) 70%),
  linear-gradient(180deg,#26366f 0%,#1d2a5a 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 90% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(80% 90% at 70% 45%,#000 20%,transparent 75%)}
.hi{padding-top:64px;padding-bottom:72px;min-height:min(640px,calc(100svh - 100px))}
@media(min-width:900px){.hero h1{font-size:84px;line-height:.9}}
@media(min-width:1200px){.hero h1{font-size:92px}}
.hero .eyb::before{content:"";display:inline-block;vertical-align:middle;margin:-3px 10px 0 0;width:8px;height:8px;background:var(--naranja);clip-path:polygon(0 0,100% 0,100% 100%)}
.js .hero .eyb,.js .hero .sub,.js .hero .find,.js .hero .quick,.js .hg .c2{animation:up .8s var(--ease-out) both}
.js .hero .sub{animation-delay:.35s}.js .hero .find{animation-delay:.45s}.js .hero .quick{animation-delay:.55s}.js .hg .c2{animation-delay:.4s}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
.find{box-shadow:0 18px 40px -18px rgba(5,10,30,.6)}
.find input{height:60px;border-radius:0}

/* collage en capas */
.collage.lay{position:relative;aspect-ratio:1.1;max-width:620px;animation:none;--mx:0;--my:0}
.lay .k{position:absolute;display:block}
.lay .k img{width:100%;height:auto;animation:none;filter:drop-shadow(0 26px 22px rgba(4,8,26,.45))}
.lay .k1{width:66%;right:-2%;top:4%;z-index:1}
.lay .k2{width:52%;left:20%;top:30%;z-index:2}
.lay .k3{width:38%;left:-2%;top:50%;z-index:3}
.lay .fl{position:absolute;left:8%;right:4%;bottom:2%;height:12%;background:radial-gradient(50% 50% at 50% 50%,rgba(4,8,26,.55),rgba(4,8,26,0) 70%);z-index:0}
.lay .k>span{display:block;transform:translate3d(calc(var(--mx)*var(--z)*1px),calc(var(--my)*var(--z)*1px),0);transition:transform .6s var(--ease-out)}
.lay .k1{--z:-6}.lay .k2{--z:10}.lay .k3{--z:18}
.js .lay .k{animation:enter 1.1s var(--ease-out) both}
.js .lay .k1{animation-delay:.15s}.js .lay .k2{animation-delay:.3s}.js .lay .k3{animation-delay:.45s}
@keyframes enter{from{opacity:0;transform:translateY(46px) scale(.94)}}
.lay .k img{animation:float 7s ease-in-out infinite}
.lay .k2 img{animation-duration:8s;animation-delay:-2s}.lay .k3 img{animation-duration:6.5s;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-8px)}}
/* etiquetas técnicas */
.call{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;font:500 12px/1.2 var(--mono);color:#fff;white-space:nowrap}
.call b{display:block;font:800 15px/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.call>span{background:rgba(14,21,48,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);padding:8px 10px}
.call i{width:10px;height:10px;border-radius:50%;background:var(--naranja);box-shadow:0 0 0 4px rgba(255,84,6,.25);flex:none}
.call i::after{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--naranja);animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.2);opacity:0}}
.call em{font-style:normal;width:34px;height:1px;background:rgba(255,255,255,.55)}
.call.q1{top:13%;left:0;flex-direction:row-reverse}
.call.q2{bottom:15%;right:-5%}
.call.q3{bottom:1%;left:22%}
.js .call{animation:up .7s var(--ease-out) both}
.js .call.q1{animation-delay:1s}.js .call.q2{animation-delay:1.15s}.js .call.q3{animation-delay:1.3s}
@media(max-width:900px){
  .hi{min-height:0;padding-top:30px;padding-bottom:0}
  .collage.lay{max-width:400px;margin:22px auto 0;padding-bottom:0}
  .call{font-size:10.5px}.call b{font-size:13px}.call>span{padding:6px 8px}.call em{width:16px}
  .call.q2{right:-2%;bottom:20%}.call.q1{left:-2%;top:8%}.call.q3{left:16%;bottom:0}
}

/* cinta de números de parte */
.tick{background:var(--naranja);color:#fff;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.2)}
.tick .tr{display:inline-flex;animation:mar 48s linear infinite;will-change:transform}
.tick:hover .tr{animation-play-state:paused}
.tick a{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;text-decoration:none;font:500 14px/1 var(--mono);border-right:1px solid rgba(255,255,255,.28)}
.tick a b{font:800 14px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;opacity:.92}
@keyframes mar{to{transform:translateX(-50%)}}

/* franja de datos */
.strip li{transition:background-color .2s}
.strip b{font-size:20px;text-transform:uppercase;letter-spacing:.03em}

/* ---------- BATERÍAS EN INICIO: escenario de producto ---------- */
.bat3{gap:16px;border-top:0}
.bat3 a{position:relative;overflow:hidden;padding:26px 26px 26px!important;border:0!important;background:linear-gradient(180deg,#f3f5f9 0%,#e7eaf1 100%)}
.bat3 a::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--azul);transform-origin:left;transform:scaleX(.18);transition:transform .45s var(--ease-out)}
.bat3 a::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0));opacity:.9;pointer-events:none}
.bat3 img{width:100%!important;height:230px!important;object-fit:contain;object-position:center bottom!important;align-self:stretch!important;margin:0 0 18px!important;position:relative;z-index:1;filter:drop-shadow(0 18px 14px rgba(20,29,61,.28));transition:transform .5s var(--ease-out),filter .5s var(--ease-out)}
.bat3 .m,.bat3 .s,.bat3 .p,.bat3 .q,.bat3 .go{position:relative;z-index:1}
@media(hover:hover) and (pointer:fine){
  .bat3 a:hover::before{transform:scaleX(1)}
  .bat3 a:hover img{transform:translateY(-8px) scale(1.03);filter:drop-shadow(0 28px 20px rgba(20,29,61,.32))}
}
@media(max-width:760px){
  .bat3{gap:10px}
  .bat3 a{padding:14px 16px!important}
  .bat3 img{height:84px!important;width:84px!important;margin:0!important;object-position:center!important}
  .bat3 a::after{display:none}
}

/* ---------- CATEGORÍAS ---------- */
.cats{gap:12px;border:0;grid-template-columns:repeat(3,1fr)}
.cat{position:relative;overflow:hidden;border:0!important;background:#fff;padding:22px 22px 20px;min-height:250px}
.cat .im{height:150px;mix-blend-mode:normal}
.cat img{max-height:100%;max-width:80%;filter:drop-shadow(0 14px 12px rgba(20,29,61,.22));transition:transform .5s var(--ease-out)}
.cat b{font-size:24px;text-transform:none}
.cat::after{content:"";position:absolute;right:16px;bottom:18px;width:30px;height:30px;border:2px solid var(--regla);transition:border-color .2s,background-color .2s,transform .25s var(--ease-out)}
.cat::before{content:"";position:absolute;right:23px;bottom:27px;width:14px;height:12px;z-index:1;background:var(--azul);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M8 0l6 6-6 6-1.4-1.4L10.2 7H0V5h10.2L6.6 1.4z'/%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 14 12'%3E%3Cpath d='M8 0l6 6-6 6-1.4-1.4L10.2 7H0V5h10.2L6.6 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--ease-out),background-color .2s}
@media(hover:hover) and (pointer:fine){
  .cat:hover img{transform:translateY(-6px) scale(1.06)}
  .cat:hover::after{border-color:var(--naranja);background:var(--naranja);transform:translateX(3px)}
  .cat:hover::before{background:#fff;transform:translateX(3px)}
}
.cat.all{background:var(--azul);justify-content:flex-end}
.cat.all::after{border-color:rgba(255,255,255,.4)}.cat.all::before{background:#fff}
.cat.all b{font-size:52px}
.cat.all span::after{display:none}
.more{grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px}
.more a{border:0!important;background:#fff;padding:16px 18px!important;transition:background-color .2s,color .2s}
.more a:hover{background:var(--azul);color:#fff}
@media(max-width:900px){
  .cats{grid-template-columns:1fr 1fr;gap:8px}
  .cat{min-height:0;padding:14px 12px 16px}.cat .im{height:110px}.cat b{font-size:19px;padding-right:34px}
  .cat::after{right:10px;bottom:12px;width:26px;height:26px}.cat::before{right:16px;bottom:19px}
  .cat.all b{font-size:36px}
  .more{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}.more a{padding:13px 10px!important}
}

/* lista "lo que más nos piden" */
.top li{transition:background-color .2s,padding .3s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.top li:hover{background:var(--gris);padding-left:12px;padding-right:0}}
.top .pn{font-size:21px}

/* marcas: letras gigantes, JLG llena, las demás en contorno */
.brands b{font-size:110px;line-height:.82;letter-spacing:-.01em}
.brands div:not(:first-child) b{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
@media(max-width:760px){.brands b{font-size:76px}}

/* ---------- BATERÍAS: escenario ---------- */
.stage{isolation:isolate}
.stage::before{content:"";position:absolute;left:50%;top:46%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(110,134,220,.55),rgba(110,134,220,.12) 55%,rgba(110,134,220,0) 72%)}
.stage::after{content:"";position:absolute;left:14%;right:14%;bottom:-2%;height:9%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(4,8,26,.6),rgba(4,8,26,0) 70%)}
.stage img{max-width:520px;filter:drop-shadow(0 30px 24px rgba(4,8,26,.45));transition:opacity .28s var(--ease-out),transform .45s var(--ease-out),filter .28s ease}
.stage img.sw{opacity:0;transform:translateX(calc(var(--dir,1)*40px)) scale(.94);filter:drop-shadow(0 30px 24px rgba(4,8,26,.45)) blur(3px)}
.tabs button{text-transform:uppercase}
@media(max-width:900px){.stage{z-index:2}.stage::before{width:100%}.stage::after{display:none}.stage img{max-width:250px}.hg .ctas .ol{box-shadow:inset 0 0 0 2px var(--azul)}}

/* banco y tablas: productos con sombra */
.row img{filter:drop-shadow(0 8px 6px rgba(20,29,61,.25))}
.c thead th img{height:120px;filter:drop-shadow(0 12px 10px rgba(20,29,61,.22))}
@media(max-width:700px){.c thead th img{height:70px}}

/* pie con logo en blanco */
footer img{height:46px}

@media(prefers-reduced-motion:reduce){
  .js [data-split] .wd>span,.js .rv{transform:none!important;opacity:1!important}
  .tick .tr,.lay .k img,.call i::after{animation:none!important}
  .lay .k>span{transform:none!important}
}
@media(max-width:600px){.find .btn .ar{display:none}.find .btn{padding:0 18px}}
/* buscador: piezas decorativas a la derecha del héroe */
.hx-art{display:none}
@media(min-width:1000px){
  .hx .find{max-width:640px}
  .hx-art{display:block;position:absolute;right:20px;top:50%;width:440px;height:300px;transform:translateY(-50%);pointer-events:none}
  .hx-art img{position:absolute;filter:drop-shadow(0 22px 18px rgba(4,8,26,.45))}
  .hx-art .a1{width:300px;right:120px;top:10px}
  .hx-art .a2{width:170px;right:0;top:40px}
  .hx-art .a3{width:190px;right:200px;top:110px}
  .js .hx-art img{animation:enter 1s var(--ease-out) both}
  .js .hx-art .a2{animation-delay:.15s}.js .hx-art .a3{animation-delay:.3s}
}

/* ===== V7 · correcciones del juez (ronda 3) ===== */
/* WhatsApp: ícono siempre pegado a la izquierda, texto a la izquierda */
.btn.wa{justify-content:flex-start;padding-right:22px}
.btn.wa>span,.btn.wa{text-align:left}
.bar .btn.wa{padding-right:12px}
/* contorno sin esquina naranja (solo los botones llenos llevan el chaflán) */
.ol::before,.ol-d::before{display:none}
/* buscador: botón solo ícono, la fila es el objetivo */
.p .a .btn{width:44px;padding:0!important;justify-content:center;box-shadow:inset 0 0 0 1.5px #c9cedb}
.p .a .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.p .a .btn svg{width:21px;height:21px}
.p .a .btn:hover{background:var(--wa);box-shadow:inset 0 0 0 1.5px var(--wa)}
@media(hover:hover) and (pointer:fine){.p tr.r:hover td{background:#f3f5f9}.p tr.r:hover td:first-child{box-shadow:inset 3px 0 0 var(--naranja)}}
.p .b{width:150px}
/* tarjetas de batería en celular: precio sin cortes */
@media(max-width:760px){.bat3 .p,.bat3 .q{white-space:nowrap}.bat3 .s i{font-size:12px}}
/* héroe en celular: etiquetas sólidas y dentro de la pantalla */
@media(max-width:900px){
  .call>span{background:rgba(14,21,48,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .call.q2{right:0}.lay .k1{right:0;width:62%}
  .stage img{max-width:200px}.stage{padding-top:6px}
  .price .big{font-size:72px}
  .strip b{font-size:15px;letter-spacing:.06em}
}
.sub,.eyb,.lead{text-wrap:balance}
@media(max-width:760px){.eyb .hide-m{display:none}}
/* categorías pequeñas: borde y flecha */
.more a{position:relative;box-shadow:inset 0 0 0 1px var(--regla);padding-right:34px!important}
.more a::after{content:"→";position:absolute;right:14px;color:var(--naranja);transition:transform .2s var(--ease-out)}
.more a:hover::after{color:#fff;transform:translateX(3px)}
/* texto de la empresa más discreto */
.about{border-top:1px solid var(--regla)}
.about h3{font-size:17px}.about p{font-size:14px;color:var(--tenue)}
/* banco: columnas */
@media(min-width:901px){.bank .g{grid-template-columns:5fr 7fr}}
.bank .guide{margin-top:22px;font-size:14.5px;color:var(--texto)}
.bank .guide b{color:var(--tinta)}

/* ===== V7.1 · botones de Cotizar y WhatsApp (10-nov) =====
   - Botones llenos con relieve: luz arriba, labio oscuro abajo; al presionar bajan 2 px (se siente físico).
   - WhatsApp en dos renglones: acción + número real (844 186 7079), para que se vea a quién le escribe.
   - Punto de "en línea" en el ícono: verde que late si está abierto (horario real), gris si está cerrado.
   - "Cotizar" de las listas: ficha blanca con cuadro verde de WhatsApp; al pasar el ratón se llena de verde. */
.btn.or,.btn.wa,.btn.az{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.22),0 10px 22px -12px rgba(10,20,50,.55);
  transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),background-color .2s,filter .2s}
.btn.wa{background:linear-gradient(180deg,#19a159 0%,#128c4a 62%,#0f7f43 100%)}
.btn.or{background:linear-gradient(180deg,#ff6c26 0%,#ff5406 62%,#ec4c03 100%)}
@media(hover:hover) and (pointer:fine){.btn.or:hover,.btn.wa:hover{filter:brightness(1.07) saturate(1.05)}}
.btn.or:active,.btn.wa:active,.btn.az:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.22),0 4px 10px -8px rgba(10,20,50,.5)}
.btn.wa>svg{background:rgba(4,48,24,.32);box-shadow:inset -1px 0 0 rgba(255,255,255,.12)}
/* dos renglones */
.btn .tx{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.btn .tx b{font:inherit;letter-spacing:inherit}
.btn .tx small{font:500 11.5px/1 var(--mono);letter-spacing:.02em;text-transform:none;opacity:.86}
.btn.wa:has(.tx){height:60px}.btn.wa:has(.tx)>svg{width:60px;height:60px;padding:18px}
/* punto en línea */
.btn.wa{position:relative}
.btn .dot{position:absolute;z-index:3;left:33px;top:14px;width:9px;height:9px;border-radius:50%;background:#aeb6c8;box-shadow:0 0 0 2px #0f7f43}
.btn.wa:has(.tx) .dot{left:36px;top:17px}
.btn.wa.sm .dot{left:26px;top:11px;width:8px;height:8px}
.abierto .btn .dot{background:#5dff9f}
.abierto .btn .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#5dff9f;animation:ping 2.2s var(--ease-out) infinite}
.bar .btn.wa .dot{left:33px}
/* ficha "Cotizar" */
.btn.cz{clip-path:none;background:#fff;color:var(--azul);gap:10px;padding:0 14px 0 5px;height:44px;font-size:14.5px;
  box-shadow:inset 0 0 0 1.5px #d3d8e4,0 1px 0 rgba(20,29,61,.05)}
.btn.cz>svg{width:34px;height:34px;padding:8px;background:var(--wa);color:#fff;flex:none;transition:transform .2s var(--ease-out)}
.btn.cz::after{display:none}
@media(hover:hover) and (pointer:fine){
  .btn.cz:hover{background:var(--wa);color:#fff;box-shadow:inset 0 0 0 1.5px var(--wa),0 8px 18px -10px rgba(18,140,74,.7)}
  .btn.cz:hover>svg{background:rgba(4,48,24,.3);transform:scale(1.04)}}
.btn.cz:active{transform:translateY(1px) scale(.98)}
/* en el buscador: solo el cuadro verde */
.p .a .btn.cz{width:44px;padding:0;justify-content:center;box-shadow:inset 0 0 0 1.5px #d3d8e4}
.p .a .btn.cz>svg{width:34px;height:34px}
@media(hover:hover) and (pointer:fine){.p tr.r:hover .btn.cz{box-shadow:inset 0 0 0 1.5px var(--wa)}}
@media(max-width:760px){.btn.wa:has(.tx){height:58px}.btn.wa:has(.tx)>svg{width:56px;height:58px;padding:17px}.btn.wa:has(.tx) .dot{left:34px;top:16px}}
@media(prefers-reduced-motion:reduce){.abierto .btn .dot::after{animation:none}}
.abierto .btn .dot::after{animation-name:ping2}
@keyframes ping2{0%{transform:scale(1);opacity:.65}80%,100%{transform:scale(2.3);opacity:0}}
@media(max-width:600px){.hg .ctas{flex-wrap:wrap}.hg .ctas .btn.wa{flex:1 1 100%}.hg .ctas .btn.ol{flex:1 1 100%;height:48px}}

/* anclas de la landing anterior (#baterias, #refacciones, …) */
.anc{display:block;height:0;scroll-margin-top:84px}