/* ESCALA Outdoor · tienda pública · v15 */
@font-face{font-family:'Big Shoulders';src:url(fonts/bigshoulders.woff) format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'Big Shoulders Stencil';src:url(fonts/bigshoulders-stencil.woff) format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-medium.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-semibold.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url(fonts/barlow-bold.woff) format('woff');font-weight:700;font-display:swap}

/* ===================== sistema ===================== */
:root{
  --fog:#e6e8e1;--sheet:#f3f4ef;--white:#fff;--ink:#151912;--stone:#565e51;--line:#d3d8cc;--line-2:#b9c0b1;
  --ranger:#232e20;--ranger-2:#2e3a2a;--ranger-3:#3a4834;--on-ranger:#ebeee4;--on-ranger-2:#aab49f;
  --brand:#17852f;--brand-d:#106523;--brand-soft:#dcebd9;
  --coyote:#8a6b43;--coyote-soft:#ece3d4;--trail:#e8bf45;--alert:#b03f0d;--alert-soft:#f8e4d8;--river:#165793;
  --f-d:'Big Shoulders','Arial Narrow',sans-serif;--f-s:'Big Shoulders Stencil','Big Shoulders','Arial Narrow',sans-serif;--f-b:'Barlow','Segoe UI',system-ui,sans-serif;
  /* curvas (Emil Kowalski): salida fuerte, movimiento en pantalla, cajón tipo iOS */
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px));
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --hh:64px;
  --r-sm:5px;--r:7px;--r-lg:12px;--r-xl:18px;
  --sh-1:0 1px 2px rgba(21,25,18,.06),0 1px 1px rgba(21,25,18,.04);
  --sh-2:0 10px 28px -10px rgba(21,25,18,.28);
  --sh-pop:0 28px 70px -16px rgba(21,25,18,.45);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 20px);-webkit-tap-highlight-color:transparent;scrollbar-color:var(--line-2) var(--fog)}
body{margin:0;background:var(--fog);color:var(--ink);font:400 16px/1.55 var(--f-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--brand)}
::selection{background:var(--trail);color:var(--ink)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:max(16px,1em)}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--river);text-underline-offset:3px}
/* capa táctil: sin destello gris, toque inmediato, sin seleccionar texto de los controles */
button,a,label,select,summary,[role=button]{touch-action:manipulation}
button,.btn,.chip,.ib,.seg,.tabs a,.lines a,.sign,.opt,.cp,.qty,.garr,.gdots,.sumt{-webkit-user-select:none;user-select:none}
.tag .ph,.gs,.lbs img{-webkit-touch-callout:none}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800}
p{text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.s{width:14px;height:14px;vertical-align:-2px}
.num{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--stone)}

/* ===================== cabecera ===================== */
body::before{content:"";position:fixed;inset:0 0 auto;height:var(--sat);background:var(--ranger);z-index:31}
.top{position:sticky;top:var(--sat);z-index:30;background:var(--ranger);color:var(--on-ranger);transition:box-shadow .2s ease}
.top.sc{box-shadow:0 1px 0 rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.6)}
.top .wrap{display:flex;align-items:center;gap:20px;height:var(--hh)}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-ranger);text-decoration:none;font:800 24px/1 var(--f-d);letter-spacing:.01em;flex:none}
.brand .patch{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 2px var(--ranger-3)}
.brand .patch img{width:38px;height:38px}
.lines{display:flex;gap:2px;margin-left:12px}
.lines a{position:relative;color:var(--on-ranger-2);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:var(--r);transition:color .15s ease,background-color .15s ease}
.lines a.on{color:var(--on-ranger)}
.lines a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--trail)}
.top .acts{margin-left:auto;display:flex;align-items:center;gap:4px}
.ib{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 10px;border-radius:var(--r);color:var(--on-ranger);font-weight:600;transition:transform .16s var(--ease),background-color .15s ease}
.ib:active{transform:scale(.96)}
.ib .lbl{font-size:15px}
.ib .av{width:28px;height:28px;border-radius:50%;background:var(--trail);color:var(--ranger);display:grid;place-items:center;font:800 15px/1 var(--f-d)}
.ib.cart{background:var(--brand);color:#fff;padding:0 14px;margin-left:4px}
.cn{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:var(--brand-d);font:700 13px/22px var(--f-b);text-align:center}
.cn.bump{animation:bump .4s var(--ease)}
@keyframes bump{35%{transform:scale(1.3)}}
@media (hover:hover) and (pointer:fine){
  .lines a:hover{color:var(--on-ranger);background:var(--ranger-2)}
  .ib:hover{background:var(--ranger-2)}.ib.cart:hover{background:var(--brand-d)}
}
@media (max-width:860px){.lines{display:none}.ib .lbl{display:none}.top .wrap{gap:8px}}
@media (max-width:360px){.brand #brandName{display:none}}

/* ===================== botones y controles ===================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r);background:var(--brand);color:#fff;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;text-align:center;transition:transform .16s var(--ease),background-color .15s ease,box-shadow .15s ease,opacity .15s ease}
.btn:active:not([disabled]){transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.quiet{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.dark{background:var(--ink)}
.btn.blk{width:100%}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px}
.btn .bl{display:inline-flex;align-items:center;gap:8px;transition:filter .2s ease,opacity .2s ease}
.btn.swap .bl{filter:blur(2px);opacity:.6}
.btn.ok{background:var(--brand-d)}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not([disabled]){background:var(--brand-d)}
  .btn.ghost:hover:not([disabled]){background:rgba(235,238,228,.08)}
  .btn.quiet:hover:not([disabled]){background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .btn.dark:hover:not([disabled]){background:#000}
}
.link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .15s ease}
@media (hover:hover) and (pointer:fine){.link:hover{text-decoration-color:currentColor}}
.qty{display:inline-flex;align-items:center;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2)}
.qty button{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);transition:transform .14s var(--ease)}
.qty button:active:not([disabled]){transform:scale(.88)}
.qty button[disabled]{opacity:.3;cursor:not-allowed}
.qty span{min-width:30px;text-align:center;font-weight:700}
.qty.sm button{width:36px;height:36px}
.qty.sm span{min-width:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:0 16px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600;transition:transform .14s var(--ease),background-color .15s ease,color .15s ease,box-shadow .15s ease}
.chip:active:not([disabled]){transform:scale(.96)}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.chip[disabled]{color:var(--stone);background:transparent;box-shadow:inset 0 0 0 1px var(--line);opacity:.7;text-decoration:line-through;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.chip:not(.on):not([disabled]):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.x{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;transition:transform .14s var(--ease),background-color .15s ease}
.x:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.x:hover{background:rgba(21,25,18,.07)}}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-sm);background:var(--ranger);color:var(--on-ranger);font-size:13.5px;font-weight:600;line-height:1.3}
.pill.tactico{background:var(--coyote);color:#fff}
.pill.lt{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.pill.warn{background:var(--alert-soft);color:var(--alert)}
.pill.okk{background:var(--brand-soft);color:var(--brand-d)}
.pill.info{background:#e1ebf5;color:var(--river)}
.pill.hot{background:var(--ranger);color:var(--trail)}

/* ===================== portada ===================== */
.hero{position:relative;background:var(--ranger);color:var(--on-ranger);overflow:hidden;isolation:isolate}
.topo{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.topo path{fill:none;stroke:#4f6046;stroke-width:.9;vector-effect:non-scaling-stroke}
.topo path.mj{stroke:#7d8f6e;stroke-width:1.3}
.topo .grid line{stroke:#ebeee4;stroke-opacity:.07;stroke-width:1;vector-effect:non-scaling-stroke}
.topo .pk circle{fill:var(--trail)}
.topo .pk .ring{fill:none;stroke:var(--trail);stroke-width:1.5;vector-effect:non-scaling-stroke}
.topo text{fill:var(--trail);font:600 15px var(--f-b)}
.hero.draw .topo path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s var(--ease) forwards;animation-delay:calc(var(--d,0)*28ms)}
.hero.draw .topo .pk,.hero.draw .topo text{opacity:0;animation:fade .5s ease 1.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.hero .coord{position:absolute;right:var(--gr);top:18px;color:var(--on-ranger-2);font-size:13px;opacity:.8}
.hero .wrap{position:relative;padding-top:clamp(40px,8vw,104px);padding-bottom:0}
.hero h1{font:800 clamp(52px,9.4vw,96px)/.9 var(--f-s);text-transform:uppercase;letter-spacing:.005em;max-width:9ch;color:#f3f5ee}
.hero .lede{max-width:44ch;font-size:clamp(16.5px,1.6vw,20px);color:var(--on-ranger);margin:20px 0 26px;opacity:.9}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.signs{margin-top:clamp(36px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(235,238,228,.18)}
.sign{position:relative;display:flex;align-items:center;gap:14px;padding:22px 20px 26px 0;color:var(--on-ranger);text-decoration:none;text-align:left;transition:background-color .2s ease,transform .16s var(--ease)}
.sign+.sign{padding-left:24px;border-left:1px solid rgba(235,238,228,.18)}
.sign b{display:block;font:800 clamp(30px,3.6vw,44px)/1 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.sign small{display:block;color:var(--trail);font-weight:600;font-size:15px;margin-top:6px}
.sign .i{margin-left:auto;width:28px;height:28px;color:var(--trail);transition:transform .25s var(--ease)}
.sign:active{transform:scale(.98)}
.hero.draw .sign{opacity:0;transform:translateY(8px);animation:rise .5s var(--ease) forwards;animation-delay:calc(.45s + var(--i,0)*70ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.sign:hover{background:rgba(235,238,228,.04)}.sign:hover .i{transform:translateX(5px)}}
@media (max-width:560px){.hero .coord{display:none}}
@media (max-width:720px){
  .hero h1{font-size:clamp(48px,14.5vw,66px)}
  .hero .lede{font-size:16px;margin:16px 0 22px}
  .hero .cta-row .btn{flex:1 1 140px;padding:0 16px}
  .signs{margin-top:32px}
  .sign{flex-direction:column;align-items:flex-start;gap:4px;padding:16px 8px 18px 0}
  .sign+.sign{padding-left:12px}
  .sign b{font-size:clamp(20px,6.2vw,26px)}
  .sign small{font-size:13px;margin-top:3px}
  .sign .i{display:none}
}

/* franja de confianza */
.trust{background:var(--sheet);box-shadow:inset 0 -1px 0 var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:18px;padding-bottom:18px}
.trust .wrap>div{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--stone);line-height:1.4}
.trust .i{width:24px;height:24px;color:var(--brand);margin-top:1px}
.trust b{display:block;color:var(--ink);font-size:15.5px;font-weight:700}
@media (max-width:820px){
  .trust .wrap{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-top:14px;padding-bottom:14px;scroll-padding-left:var(--gl)}
  .trust .wrap::-webkit-scrollbar{display:none}
  .trust .wrap>div{flex:0 0 min(300px,80%);scroll-snap-align:start}
}

/* ===================== secciones y catálogo ===================== */
.sec{padding-top:clamp(48px,7vw,96px)}
.sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:22px}
.sec-h h2{font:800 clamp(38px,5.4vw,64px)/.95 var(--f-d);text-transform:uppercase;letter-spacing:.005em}
.sec-h p{margin:8px 0 0;color:var(--stone);max-width:52ch}
.tbar{margin-bottom:24px}
@media (min-width:721px){
  .tbar{position:sticky;top:calc(var(--sat) + var(--hh));z-index:20;padding:12px 0 10px;background:var(--fog);box-shadow:0 0 0 100vmax var(--fog);clip-path:inset(0 -100vmax)}
}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cnt{margin:10px 0 0;color:var(--stone);font-size:14px;font-weight:500}
.seg{position:relative;display:inline-flex;padding:4px;background:var(--white);border-radius:9px;box-shadow:inset 0 0 0 1px var(--line-2)}
.seg button{position:relative;z-index:1;min-height:38px;padding:0 16px;border-radius:6px;font-weight:600;color:var(--stone);white-space:nowrap;transition:color .2s ease}
.seg button.on{color:#fff}
.seg .pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;padding:0;border-radius:6px;background:var(--ink);transition:transform .28s var(--ease-io),width .28s var(--ease-io)}
@media (hover:hover) and (pointer:fine){.seg button:not(.on):hover{color:var(--ink)}}
.field-s{position:relative;flex:1 1 220px;max-width:360px}
.field-s .i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--stone);pointer-events:none}
.field-s input{width:100%;min-height:46px;border:0;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 14px 0 42px;transition:box-shadow .15s ease}
.field-s input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brand)}
.sort{min-height:46px;border:0;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 12px;margin-left:auto}
@media (max-width:720px){
  .seg{width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
  .seg button{flex:1;padding:0 10px}
  .field-s{max-width:none;flex:1 1 60%}
  .sort{margin-left:0;flex:1 1 30%;min-width:0}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:32px 20px}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}}
.morew{display:flex;justify-content:center;margin-top:36px}
.morew:empty{display:none}
.more{gap:10px;min-width:min(320px,100%)}
.more span{color:var(--stone);font-weight:500;font-size:14.5px}

/* tarjeta de producto */
.tag{position:relative;min-width:0}
.tag .media{position:relative}
.tag .ph{position:relative;display:block;color:var(--ink);aspect-ratio:1/1;background:var(--white);border-radius:var(--r-lg);overflow:hidden;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.tag .ph img{width:100%;height:100%;object-fit:contain;padding:6%;opacity:0;transition:opacity .35s ease,transform .5s var(--ease)}
.tag .ph img.ld{opacity:1}
.tag .ph .none{position:absolute;inset:0;display:grid;place-items:center;color:var(--line-2)}
.tag .bd{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:var(--r-sm);background:var(--trail);color:var(--ink);font-size:12.5px;font-weight:700}
.tag .bd.hot{background:var(--ranger);color:var(--trail)}
.tag .out{position:absolute;inset:auto 10px 10px 10px;padding:7px;border-radius:var(--r-sm);background:rgba(243,244,239,.95);color:var(--stone);text-align:center;font-weight:700;font-size:14px}
.tag .fav{position:absolute;right:8px;top:24px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:var(--sh-1);display:grid;place-items:center;color:var(--ink);transition:transform .16s var(--ease)}
.tag .fav:active{transform:scale(.9)}
.fav.on .i{fill:var(--alert);stroke:var(--alert)}
.fav.pop .i{animation:hp .35s var(--ease)}
@keyframes hp{40%{transform:scale(1.28)}}
.tag .qa{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(16,101,35,.55);transition:transform .16s var(--ease),background-color .15s ease}
.tag .qa:active{transform:scale(.92)}
.tag .qa.ok{background:var(--brand-d)}
.tag .kick{display:block;margin-top:12px;color:var(--stone);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag a.t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em;margin-top:2px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16.5px;line-height:1.3;overflow-wrap:break-word}
.tag .pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px}
.tag .pr b{font:800 26px/1 var(--f-d);letter-spacing:.01em}
.tag .pr .off{color:#fff}
.tag .st{font-size:13.5px;color:var(--stone);margin-top:3px}
.tag .st.low{color:var(--alert);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .tag .ph:hover img{transform:scale(1.04)}
  .tag .qa:hover{background:var(--brand-d)}
  .tag a.t:hover{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
}
@media (max-width:560px){.tag a.t{font-size:15.5px}.tag .pr b{font-size:23px}.tag .kick{font-size:12.5px;margin-top:10px}.tag .fav{width:38px;height:38px}}
.reveal .tag{animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);opacity:0;transform:translateY(10px)}
.tag.nw{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms);opacity:0;transform:translateY(8px)}

.empty{border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:56px 24px;text-align:center}
.empty h3{font:800 40px/1 var(--f-d);text-transform:uppercase;margin-bottom:10px}
.empty p{color:var(--stone);max-width:46ch;margin:0 auto 18px}
.skel{background:linear-gradient(90deg,#eceee8 25%,#f5f6f2 50%,#eceee8 75%);background-size:300% 100%;animation:sk 1.4s linear infinite;border-radius:var(--r)}
@keyframes sk{to{background-position:-150% 0}}
.skhero{height:min(560px,78svh);background:var(--ranger)}
.skt{height:44px;width:min(320px,60%);margin:48px 0 24px}
.skc .skel:nth-child(1){aspect-ratio:1/1;border-radius:var(--r-lg)}
.skc .skel:nth-child(2){height:14px;width:40%;margin-top:14px}
.skc .skel:nth-child(3){height:24px;width:55%;margin-top:10px}

/* destacados */
.stars .sec-h{margin-bottom:18px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:6px}
.rail::-webkit-scrollbar{display:none}
.rail>.tag{scroll-snap-align:start}
@media (max-width:1000px){.rail{grid-auto-columns:calc((100% - 32px)/2.6);gap:16px}}
@media (max-width:560px){.rail{grid-auto-columns:62%;gap:12px;margin:0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl));padding-left:var(--gl);padding-right:var(--gr);scroll-padding-left:var(--gl)}}
.rarr{display:flex;gap:8px}
.rarr button{width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;transition:opacity .2s ease,transform .14s var(--ease)}
.rarr button:active{transform:scale(.92)}
.rarr button:disabled{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){.rarr button:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
@media (hover:none){.rarr{display:none}}

/* vistos hace poco */
.seen .sec-h h2{font-size:clamp(30px,3.6vw,42px)}
.srail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.srail::-webkit-scrollbar{display:none}
.sitem{flex:0 0 min(270px,74%);display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-lg);background:var(--white);color:var(--ink);text-decoration:none;box-shadow:var(--sh-1);scroll-snap-align:start;transition:transform .16s var(--ease)}
.sitem:active{transform:scale(.98)}
.sitem img,.sitem .ph0{width:64px;height:64px;flex:none;border-radius:var(--r);object-fit:contain;background:var(--white)}
.sitem span{min-width:0}
.sitem b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:600;line-height:1.25}
.sitem small{color:var(--stone);font-weight:600}

/* cómo comprar */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative}
.route::before{content:"";position:absolute;left:12px;right:12px;top:12px;border-top:2px dashed var(--line-2)}
.route li{position:relative;padding-top:40px}
.route li::before{content:"";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--fog);box-shadow:inset 0 0 0 2px var(--ink)}
.route li:last-child::before{background:var(--brand);box-shadow:none}
.route b{display:block;font:800 22px/1.1 var(--f-d);text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.route p{margin:0;color:var(--stone);font-size:15.5px}
@media (max-width:820px){.route{grid-template-columns:1fr;gap:0}.route::before{left:12px;right:auto;top:12px;bottom:12px;border-top:0;border-left:2px dashed var(--line-2)}.route li{padding:0 0 26px 44px}}
.ship{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.ship>div{padding:20px 20px 4px 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.ship>div+div{padding-left:20px;border-left:1px solid var(--line)}
.ship .i{width:26px;height:26px;color:var(--brand);grid-row:span 2;margin-top:2px}
.ship b{font-size:17px}
.ship p{margin:0;color:var(--stone);font-size:15px}
@media (max-width:820px){.ship{grid-template-columns:1fr}.ship>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.ship>div{padding:16px 0}}

/* pie */
footer.foot{margin-top:clamp(64px,8vw,112px);background:var(--ranger);color:var(--on-ranger-2);padding-block:44px calc(44px + var(--sab));font-size:15px}
footer.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer.foot b{display:block;color:var(--on-ranger);font:800 26px/1 var(--f-d);text-transform:uppercase;margin-bottom:8px}
footer.foot h4{color:var(--on-ranger);font-size:15px;font-weight:700;margin-bottom:10px}
footer.foot a{color:var(--on-ranger);text-decoration:none}
footer.foot p{margin:0 0 8px}
@media (hover:hover) and (pointer:fine){footer.foot p a:hover{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:900px){footer.foot .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.foot .wrap{grid-template-columns:1fr}}
.soc{display:flex;flex-direction:column;gap:10px}
.soc a{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.soc .i{width:22px;height:22px;flex:none;padding:7px;box-sizing:content-box;border-radius:50%;background:var(--ranger-3);color:var(--on-ranger);transition:background-color .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){.soc a:hover .i{background:var(--trail);color:var(--ink)}}

/* ===================== ficha de producto ===================== */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:20px;color:var(--stone);font-size:15px}
.crumbs a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--stone);text-decoration:none;font-weight:600}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--ink)}}
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-top:16px;align-items:start}
@media (max-width:860px){.pdp{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:10px}}
.gal{position:sticky;top:calc(var(--hh) + 20px);min-width:0}
@media (max-width:860px){.gal{position:static}}
.gview{position:relative;background:var(--white);border-radius:var(--r-lg);overflow:hidden;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.gtrack{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gtrack::-webkit-scrollbar{display:none}
.gs{flex:0 0 100%;width:100%;aspect-ratio:1/1;max-height:72vh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:4%;cursor:zoom-in}
.gs img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.gs.none{color:var(--line-2);cursor:default}
.garr{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:var(--sh-2);display:grid;place-items:center;transition:opacity .2s ease,transform .14s var(--ease)}
.garr.prev{left:12px}.garr.next{right:12px}
.garr:disabled{opacity:0;pointer-events:none}
.garr:active{transform:scale(.92)}
@media (hover:none){.garr{display:none}}
.gcount{position:absolute;left:12px;bottom:12px;padding:3px 10px;border-radius:999px;background:rgba(21,25,18,.74);color:#fff;font-size:13px;font-weight:600;pointer-events:none}
.ghint{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:var(--sh-1);display:grid;place-items:center;pointer-events:none}
.ghint .i{width:18px;height:18px}
.gdots{display:none;justify-content:center;gap:7px;margin-top:12px}
.gdots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background-color .2s ease,transform .2s var(--ease)}
.gdots i.on{background:var(--ink);transform:scale(1.3)}
.gal .th{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.gal .th button{flex:none;width:72px;height:72px;border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:transform .14s var(--ease),box-shadow .15s ease}
.gal .th button:active{transform:scale(.95)}
.gal .th button.on{box-shadow:0 0 0 2px var(--ink)}
.gal .th img{width:100%;height:100%;object-fit:contain;padding:4px}
@media (max-width:860px){.gdots{display:flex}.gal .th{display:none}}
/* videos */
.gs.gv,.gs.ge{background:#0e110c;padding:0;cursor:default;position:relative}
.gv video{width:100%;height:100%;object-fit:contain;background:#0e110c}
.ge{display:flex;align-items:center;justify-content:center}
.ge iframe{display:block;height:100%;aspect-ratio:9/16;max-width:100%;border:0;margin:0 auto;background:#0e110c}
.ge .eload{position:absolute;display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.75);font-weight:600;font-size:14px}
.ge iframe+.eload,.ge .eload:not(:only-child){display:none}
.vsnd{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;background:rgba(14,17,12,.6);color:#fff;display:grid;place-items:center;z-index:2}
.vsnd .i{width:20px;height:20px}
.gview.onvid .ghint{display:none}
.gview.onvid .gcount{background:rgba(255,255,255,.9);color:var(--ink)}
.gal .th button.tv{position:relative;background:#0e110c}
.gal .th button.tv i{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.gal .th button.tv i .i{width:22px;height:22px;padding:5px;box-sizing:content-box;border-radius:50%;background:rgba(14,17,12,.55)}
.gal .th button.tv img{opacity:.85;padding:0;object-fit:cover}

.pinfo{min-width:0}
.pinfo .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pinfo h1{font:800 clamp(36px,4.6vw,58px)/.95 var(--f-d);text-transform:uppercase;letter-spacing:.005em;overflow-wrap:break-word}
.pprice{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:16px 0 4px}
.pprice b{font:800 46px/1 var(--f-d)}
.pprice span{color:var(--stone)}
.pprice .was{font-size:20px}
.pprice .off{font-size:15px;padding:3px 8px;color:#fff}
.was{color:var(--stone);font-size:15px;font-weight:500;text-decoration-thickness:1.5px}
.off{display:inline-block;padding:2px 6px;border-radius:var(--r-sm);background:var(--alert);color:#fff;font-size:13px;font-weight:700;line-height:1.2;align-self:center}
.lab{display:block;font-weight:700;margin:24px 0 10px}
.lab em{font-style:normal;font-weight:500;color:var(--stone);margin-left:4px}
.buy{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}
.buy .btn{flex:1 1 150px;min-height:52px;font-size:17px}
.favbtn{width:52px;height:52px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;transition:transform .14s var(--ease),box-shadow .15s ease}
.favbtn:active{transform:scale(.93)}
@media (hover:hover) and (pointer:fine){.favbtn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.ask{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.ask .i{color:var(--brand)}
@media (hover:hover) and (pointer:fine){.ask:hover{text-decoration-color:currentColor}}
@media (max-width:860px){.ask{display:none}}
.pdesc{max-width:62ch;margin:28px 0 0;color:#2a3126}
.pdesc p{margin:0}
.pdesc ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pdesc li{display:flex;gap:10px;align-items:flex-start}
.pdesc li .i{width:18px;height:18px;margin-top:3px;color:var(--brand);stroke-width:2.4}
.facts{margin:26px 0 0;padding:4px 18px;border-radius:var(--r-lg);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line)}
.facts div{display:flex;gap:14px;padding:14px 0;font-size:15px;color:var(--stone)}
.facts div+div{border-top:1px solid var(--line)}
.facts .i{color:var(--brand);margin-top:2px}
.facts b{display:block;color:var(--ink)}
.lowv:empty{display:none}
.lowv{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--alert);font-weight:600;font-size:15px}
.lowv .i{width:18px;height:18px}
.mbar{display:none}
@media (max-width:860px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:10px;align-items:center;background:rgba(243,244,239,.97);box-shadow:0 -1px 0 var(--line),0 -10px 28px -12px rgba(21,25,18,.25);padding:10px var(--gr) calc(10px + var(--sab)) var(--gl);transform:translateY(110%);transition:transform .3s var(--ease)}
  .mbar.on{transform:none}
  .mbar b{font:800 28px/1 var(--f-d)}
  .mbar .btn{flex:1}
}
.mwa{flex:none;width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:var(--white);color:var(--brand-d);box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .14s var(--ease)}
.mwa:active{transform:scale(.93)}

/* complementos */
.addons{margin-top:4px}
.adl{display:flex;flex-direction:column;gap:8px}
.ado{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s ease,background-color .15s ease}
.ado.on{background:#f4faf3;box-shadow:inset 0 0 0 1.5px var(--brand)}
.adt{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:2px}
.adt .ck{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--white);color:transparent;transition:background-color .15s ease}
.ado.on .ck{background:var(--brand);box-shadow:none;color:#fff}
.adt .ck .i{width:15px;height:15px;stroke-width:2.6}
.adt img,.adt .ph0{width:46px;height:46px;flex:none;border-radius:var(--r-sm);object-fit:contain;background:var(--white)}
.adn{min-width:0}
.adn b{display:block;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adn small{color:var(--brand-d);font-weight:700;font-size:14px}
.adv{flex:none;max-width:130px;min-height:40px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--white);padding:0 6px;font-size:16px}
.adlk{flex:none;font-size:14px;color:var(--stone);padding:8px 2px}
@media (max-width:420px){.adlk{display:none}.adv{max-width:100px}}

/* promociones */
.psk{position:absolute;left:10px;top:12px;z-index:1;padding:7px 10px 5px;border-radius:var(--r-sm);background:var(--trail);color:var(--ink);font:800 23px/1 var(--f-s);letter-spacing:.01em;transform:rotate(-5deg);box-shadow:0 3px 0 var(--ranger);pointer-events:none;white-space:nowrap}
@media (max-width:560px){.psk{font-size:19px;padding:6px 8px 4px}}
.pbt{flex:none;display:inline-block;padding:9px 11px 6px;border-radius:var(--r-sm);background:var(--trail);color:var(--ink);font:800 32px/1 var(--f-s);letter-spacing:.01em;transform:rotate(-4deg);box-shadow:0 3px 0 var(--ranger);white-space:nowrap}
.pbt.long{font-size:24px}
.ppl{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-d);font-size:13.5px;font-weight:700}
.pbox{display:flex;align-items:center;gap:14px;margin:18px 0 6px;padding:14px 16px;border-radius:var(--r-lg);background:var(--ranger);color:var(--on-ranger)}
.pbox .pbt{font-size:26px}
.pbox .pbt.long{font-size:20px}
.pbox .pbx{flex:1;min-width:0}
.pbox .pbx b{display:block;line-height:1.25}
.pbox .pbx small{display:block;color:var(--on-ranger-2);font-size:14px}
.pbox .btn{flex:none;background:var(--trail);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.pbox .btn:hover:not([disabled]){background:#f1cd5c}}
@media (max-width:520px){.pbox{flex-wrap:wrap}.pbox .btn{width:100%}}
.pbox.soft{background:var(--brand-soft);color:var(--ink);padding:12px 14px}
.pbox.soft .pbt{font:800 20px/1 var(--f-d);padding:6px 9px 5px;transform:none;box-shadow:none;background:var(--brand);color:#fff}
.pbox.soft .pbx small{color:var(--stone)}
.pbox.soft .btn{background:var(--white);color:var(--brand-d);box-shadow:inset 0 0 0 1px var(--brand)}
@media (hover:hover) and (pointer:fine){.pbox.soft .btn:hover:not([disabled]){background:#fff;box-shadow:inset 0 0 0 2px var(--brand)}}
.pbox .cd{display:flex;width:max-content;max-width:100%}
.cd{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(232,191,69,.16);color:var(--trail);font-size:13.5px;font-weight:600;line-height:1.2}
.cd .i{width:16px;height:16px;flex:none}
.cd b{font-weight:800;letter-spacing:.02em}
.cd.hot{background:var(--alert);color:#fff}
.cd.far{background:rgba(235,238,228,.1);color:var(--on-ranger-2)}
.pbox.soft .cd,.pbh .cd{background:var(--alert-soft);color:var(--alert)}
.pbox.soft .cd.hot,.pbh .cd.hot{background:var(--alert);color:#fff}
.pbox.soft .cd.far,.pbh .cd.far{background:var(--sheet);color:var(--stone)}
/* armador de la promo */
.sheet.wide{--pl:28px;--pr:28px;width:min(600px,calc(100% - 32px));padding:28px var(--pr) 0 var(--pl)}
@media (max-width:640px){.sheet.wide{--pl:var(--gl);--pr:var(--gr);width:100%;padding:28px var(--pr) 0 var(--pl)}}
.pbh{display:flex;align-items:center;gap:16px;padding-right:40px;margin-bottom:6px}
.pbh h2{font:800 30px/1 var(--f-d);text-transform:uppercase}
.pbh p{margin:6px 0 0;color:var(--stone);font-size:15px}
@media (max-width:640px){.pbh{align-items:flex-start;gap:12px}.pbh .pbt{font-size:24px}.pbh .pbt.long{font-size:19px}.pbh h2{font-size:24px}.pbh p{font-size:14px}}
.pbg{margin-top:18px}
.pbgh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.pbc{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;transition:background-color .2s ease,color .2s ease}
.pbc.ok{background:var(--brand-soft);color:var(--brand-d);box-shadow:none}
.pbc .i{width:16px;height:16px}
.pbp{display:flex;align-items:center;gap:10px;margin:10px 0 6px;font-weight:600}
.pbp img,.pbp .ph0{width:40px;height:40px;border-radius:var(--r-sm);object-fit:contain;background:var(--white)}
.pbvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.pbv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 12px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s ease,background-color .15s ease}
.pbv.on{background:#f4faf3;box-shadow:inset 0 0 0 1.5px var(--brand)}
.pbv>span{font-weight:600;min-width:0}
.pbv small{color:var(--stone);font-weight:400}
.pbf{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;margin:20px calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));padding:14px var(--pr) calc(14px + var(--sab)) var(--pl);background:var(--fog);box-shadow:0 -1px 0 var(--line),0 -10px 20px rgba(230,232,225,.9)}
.pbf .pbm{display:flex;flex-direction:column;line-height:1}
.pbf .pbm b{font:800 30px/1 var(--f-d)}
.pbf .pbm s{color:var(--stone);font-size:14px;margin-top:4px}
.pbf .btn{flex:1}

/* ===================== capas: carrito, hojas, avisos ===================== */
.ov{position:fixed;inset:0;z-index:40;background:rgba(21,25,18,.5);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.ov.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(440px,100%);display:flex;flex-direction:column;background:var(--fog);box-shadow:var(--sh-pop);transform:translateX(100%);visibility:hidden;transition:transform .24s var(--ease-io),visibility 0s linear .24s;padding-top:var(--sat);padding-bottom:var(--sab);padding-right:env(safe-area-inset-right,0px)}
.drawer.on{transform:none;visibility:visible;transition:transform .4s var(--ease-drawer)}
.drawer.drag,.sheet.drag{transition:none!important}
@media (max-width:560px){.drawer{width:calc(100% - 28px);border-radius:16px 0 0 16px}}
.dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 20px;border-bottom:1px solid var(--line)}
.dh h2{display:flex;align-items:center;gap:10px;font:800 30px/1 var(--f-d);text-transform:uppercase}
.dcn{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:var(--ink);color:#fff;font:700 14px/1 var(--f-b)}
.db{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 20px 12px}
.cl{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.cl img,.cl .ph0{width:72px;height:72px;border-radius:var(--r);object-fit:contain;background:var(--white)}
.cl b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.25;font-weight:600;overflow-wrap:break-word}
.cl small{display:block;color:var(--stone);font-size:14px;margin-top:2px;overflow-wrap:break-word}
@media (max-width:380px){.cl{grid-template-columns:56px minmax(0,1fr) auto;gap:12px}.cl img,.cl .ph0{width:56px;height:56px}.cl .sub{font-size:18px}}
.cl .qty{margin-top:10px}.cl .qty button{width:38px;height:38px}
.cl .rm{display:block;width:max-content;margin-top:6px;padding:4px 0;color:var(--stone);font-size:14px;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.cl .rm:hover{color:var(--alert)}}
.cl .sub{font:800 21px/1 var(--f-d);white-space:nowrap}
.pcl small{margin-top:3px;line-height:1.4}
.ptg{display:inline-block;padding:2px 6px 1px;border-radius:3px;background:var(--trail);color:var(--ink);font:800 14px/1.2 var(--f-s);vertical-align:1px}
.df{padding:16px 20px;border-top:1px solid var(--line);background:var(--sheet)}
.df .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-weight:600}
.df .tot b{font:800 32px/1 var(--f-d)}
.df .btn{min-height:52px;font-size:17px}
.dempty{padding:56px 10px;text-align:center;color:var(--stone)}
.dempty .i{width:48px;height:48px;margin:0 auto 12px;color:var(--line-2)}
.dsg{margin-top:20px;padding-top:4px}
.dsg .lab{margin:0 0 8px}
.dsi{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.dsi img,.dsi .ph0{width:48px;height:48px;border-radius:var(--r-sm);object-fit:contain;background:var(--white)}
.dsi a{color:var(--ink);text-decoration:none;min-width:0}
.dsi a b{display:block;font-weight:600;font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsi a small{color:var(--stone);font-size:13.5px}
.dsi .btn{min-height:38px;padding:0 12px;font-size:14px;gap:4px}
.dsi .btn .i{width:16px;height:16px}
.cl img,.summ .it img,.ord .its img{object-fit:contain;background:var(--white)}

.sheet{position:fixed;z-index:42;left:50%;top:50%;width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;overscroll-behavior:contain;background:var(--fog);border-radius:var(--r-xl);box-shadow:var(--sh-pop);padding:28px;transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;transition:transform .2s var(--ease),opacity .2s ease,visibility 0s linear .2s}
.sheet.on{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:transform .26s var(--ease),opacity .2s ease}
@media (max-width:560px){
  .sheet{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92%;border-radius:20px 20px 0 0;transform:translateY(100%);opacity:1;padding:30px var(--gr) calc(24px + var(--sab)) var(--gl);transition:transform .24s var(--ease-io),visibility 0s linear .24s}
  .sheet.on{transform:none;transition:transform .42s var(--ease-drawer)}
  .sheet::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line-2)}
}
.sheet .x{position:absolute;right:12px;top:12px}
.auth h2{font:800 38px/1 var(--f-d);text-transform:uppercase;margin-bottom:6px;padding-right:44px}
.auth>p{color:var(--stone);margin:0 0 18px}
.auth form{display:grid;gap:14px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600;transition:transform .16s var(--ease),box-shadow .15s ease}
.gbtn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.gbtn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.or{display:flex;align-items:center;gap:12px;color:var(--stone);font-size:14px;margin:8px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.auth .alt{margin-top:16px;font-size:15px;color:var(--stone);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
.auth .alt button{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:36px}

.toasts{position:fixed;left:50%;bottom:calc(20px + var(--sab));z-index:60;transform:translateX(-50%);display:grid;gap:8px;width:min(420px,calc(100% - 32px));pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:var(--r-lg);background:var(--ink);color:#fff;box-shadow:0 14px 34px -10px rgba(21,25,18,.5);font-weight:500;pointer-events:auto;transform:translateY(14px) scale(.98);opacity:0;transition:transform .32s var(--ease),opacity .26s ease}
.toast.in{transform:none;opacity:1}
.toast.out{transform:translateY(8px);opacity:0;transition:transform .18s ease,opacity .18s ease}
.toast .i{color:var(--trail)}
.toast span{flex:1;min-width:0}
.toast button{margin-left:auto;padding:8px 10px;border-radius:var(--r-sm);color:var(--trail);font-weight:700;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.toast button:hover{background:rgba(255,255,255,.08)}}
body.mb .toasts{bottom:calc(86px + var(--sab))}

/* botón de WhatsApp */
.wafab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + var(--sab));z-index:24;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px 0 14px;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 10px 24px -8px rgba(16,101,35,.6);transition:transform .16s var(--ease),background-color .15s ease}
.wafab .i{width:22px;height:22px}
.wafab:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.wafab:hover{background:var(--brand-d)}}
@media (max-width:860px){.wafab{width:52px;height:52px;padding:0;justify-content:center}.wafab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.wafab.up{display:none}}
html.lbopen .wafab{display:none}
@media print{.wafab{display:none}}

/* ===================== formularios ===================== */
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f>span:first-child{font-weight:600;font-size:15px}
.f input,.f select,.f textarea{width:100%;min-height:50px;border:0;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);padding:12px 14px;transition:box-shadow .15s ease}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brand)}
.f input[readonly]{background:var(--sheet);color:var(--stone)}
.f.bad input,.f.bad select,.f.bad textarea{box-shadow:inset 0 0 0 2px var(--alert)}
.f .er{color:var(--alert);font-size:14px;font-weight:500}
.f .er:empty{display:none}
.f .hint{color:var(--stone);font-size:14px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.fg .full{grid-column:1/-1}
@media (max-width:560px){.fg{grid-template-columns:1fr}}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500;cursor:pointer;min-height:28px}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);flex:none}
.opt{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s ease,background-color .15s ease,transform .14s var(--ease)}
.opt+.opt{margin-top:10px}
.opt:active{transform:scale(.99)}
.opt input{width:20px;height:20px;margin:0;accent-color:var(--brand);flex:none}
.opt.on{box-shadow:inset 0 0 0 2px var(--brand);background:#f6faf5}
@media (hover:hover) and (pointer:fine){.opt:not(.on):hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}}
.opt .oi{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sheet);color:var(--stone);transition:background-color .15s ease,color .15s ease}
.opt.on .oi{background:var(--brand-soft);color:var(--brand-d)}
.opt b{display:block;font-weight:700;line-height:1.3}
.opt small{display:block;color:var(--stone);font-size:14.5px;line-height:1.4;margin-top:2px}
.opt .pp{margin-left:auto;font:800 22px/1 var(--f-d);white-space:nowrap}
.opt .tagd{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-d);font-size:12.5px;font-weight:700;vertical-align:1px}
@media (max-width:350px){.opt .oi{display:none}}
.sub-in{animation:subin .26s var(--ease) both}
@keyframes subin{from{opacity:0;transform:translateY(-4px)}}
.gn{display:block;margin-top:3px;font-size:11px;line-height:1.3;color:var(--stone)}
.gn.on-dark{color:var(--on-ranger-2);text-align:right}
/* buscadores de sector y agencia */
.combo{position:relative}
.combo>.i{position:absolute;left:14px;top:16px;width:18px;height:18px;stroke:var(--stone);pointer-events:none;z-index:1}
.combo input{padding-left:44px;-webkit-appearance:none;appearance:none}
.combo input::-webkit-search-cancel-button{-webkit-appearance:none}
.cbl{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:4px;list-style:none;max-height:min(320px,50vh);overflow:auto;background:var(--white);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2),0 16px 36px -8px rgba(21,25,18,.25);overscroll-behavior:contain}
.cbl[hidden]{display:none}
.cbl li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 12px;border-radius:var(--r);cursor:pointer}
.cbl li b{font-weight:600}
.cbl li small{display:block;color:var(--stone);font-size:13px;font-weight:400}
.cbl li i{font:800 18px/1 var(--f-d);font-style:normal;white-space:nowrap}
.cbl li.act{background:var(--brand-soft)}
.cbl li.none{display:block;cursor:default;color:var(--stone);font-size:15px}
@media (hover:hover) and (pointer:fine){.cbl li[data-pick]:hover{background:var(--brand-soft)}}
.picked{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 14px;border-radius:var(--r);background:#f6faf5;box-shadow:inset 0 0 0 2px var(--brand)}
.picked>div{display:flex;gap:10px;align-items:center;min-width:0}
.picked .i{width:20px;height:20px;stroke:var(--brand);flex:none}
.picked span{min-width:0}
.picked b{display:block;font-weight:700}
.picked small{display:block;color:var(--stone);font-size:14px}
.geo-btn{width:100%;min-height:52px;background:var(--ink)}
.geo-btn .i{width:20px;height:20px}
.f.bad .geo-btn{box-shadow:0 0 0 2px var(--alert)}
/* mapa */
.mapov{position:fixed;inset:0;z-index:55;display:grid;background:rgba(21,25,18,.55);opacity:0;transition:opacity .22s ease}
.mapov.on{opacity:1}
.mapov:focus{outline:none}
.mp{display:flex;flex-direction:column;background:var(--fog);width:100%;height:100%;padding-top:var(--sat);padding-bottom:var(--sab);transform:translateY(16px);transition:transform .3s var(--ease)}
.mapov.on .mp{transform:none}
.mp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gr) 8px var(--gl)}
.mp-h b{font:800 24px/1 var(--f-d)}
.mp-s{display:flex;gap:8px;padding:0 var(--gr) 10px var(--gl)}
.mp-s input{flex:1;min-width:0;min-height:46px;border:0;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 12px}
.mp-s input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brand)}
.mp-s .btn{min-height:46px}
.mp-res{list-style:none;margin:0 var(--gr) 8px var(--gl);padding:4px;background:var(--white);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2);max-height:34vh;overflow:auto;overscroll-behavior:contain}
.mp-res[hidden]{display:none}
.mp-res li{padding:10px;border-radius:var(--r);cursor:pointer}
.mp-res li b{font-weight:600}
.mp-res li small{display:block;color:var(--stone);font-size:13px}
.mp-res li.none{cursor:default;color:var(--stone)}
@media (hover:hover) and (pointer:fine){.mp-res li[data-mp]:hover{background:var(--brand-soft)}}
.mp-map{position:relative;isolation:isolate;flex:1;min-height:240px;background:#d9dfd2}
.mp-map .load{position:absolute;inset:0;display:grid;place-items:center}
.mapfail{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:24px;color:var(--stone)}
.mapfail .i{width:28px;height:28px}
.mp-f{padding:12px var(--gr) 14px var(--gl);background:var(--sheet);box-shadow:0 -1px 0 var(--line)}
.mp-f p{margin:0 0 10px;color:var(--stone);font-size:15px}
.mp-f .acts{display:flex;gap:10px}
.mp-f .acts .btn{flex:1;padding:0 12px}
.mpin{background:none;border:0}
@media (min-width:820px){.mapov{place-items:center}.mp{width:min(820px,calc(100% - 48px));height:min(700px,calc(100% - 48px));border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-pop);padding:0}}

/* ===================== pedido ===================== */
.co{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:clamp(24px,4vw,48px);align-items:start;padding-top:8px}
@media (max-width:960px){.co{grid-template-columns:minmax(0,1fr)}}
.pageh{font:800 clamp(44px,6vw,72px)/.92 var(--f-d);text-transform:uppercase;margin:16px 0 24px}
.step{padding:26px 0 30px;border-top:2px solid var(--ink)}
.step>h2{display:flex;align-items:center;gap:12px;font:800 30px/1 var(--f-d);text-transform:uppercase;margin-bottom:18px}
.step>h2 i{flex:none;font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--f-b);transition:background-color .2s ease}
.step>h2 i.ok{background:var(--brand)}
.step>h2 i.ok .i{width:18px;height:18px;stroke-width:2.8;animation:okp .3s var(--ease)}
@keyframes okp{from{transform:scale(.6);opacity:0}}
.prompt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:var(--r-lg);background:var(--coyote-soft);margin-bottom:20px}
.prompt p{margin:0;flex:1 1 240px}
/* resumen */
.summ{position:sticky;top:calc(var(--hh) + 20px);background:var(--ranger);color:var(--on-ranger);border-radius:var(--r-xl);padding:24px}
.summ h2{font:800 28px/1 var(--f-d);text-transform:uppercase;margin-bottom:14px}
.sumt{display:none}
.sumb{display:grid}
.sumi{min-width:0}
.summ .it{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.summ .it img,.summ .it .ph0{width:48px;height:48px;border-radius:var(--r-sm);object-fit:contain;background:var(--white)}
.summ .it span{font-size:15px;line-height:1.3;overflow-wrap:break-word;min-width:0}
.summ .it small{display:block;color:var(--on-ranger-2)}
.summ .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:var(--on-ranger-2)}
.summ .row span:last-child{color:var(--on-ranger);text-align:right}
.summ .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(235,238,228,.2);margin-top:10px;padding-top:14px}
.summ .tot b{font:800 40px/1 var(--f-d);color:#fff}
.summ .bs{text-align:right;color:var(--trail);font-weight:600}
@media (max-width:960px){
  .summ{position:static;order:-1;padding:0;border-radius:var(--r-lg)}
  .sumt{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0 18px;color:var(--on-ranger);font-weight:600;text-align:left}
  .sumt>span{display:inline-flex;align-items:center;gap:10px;min-width:0}
  .sumt em{font-style:normal;white-space:nowrap}
  .sumt small{color:var(--on-ranger-2);font-weight:500}
  .sumt .cv{width:18px;height:18px;color:var(--on-ranger-2);transition:transform .24s var(--ease)}
  .summ.open .sumt .cv{transform:rotate(90deg)}
  .sumt b{font:800 26px/1 var(--f-d);color:#fff;white-space:nowrap}
  .sumb{grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease-io)}
  .summ.open .sumb{grid-template-rows:1fr}
  .sumi{overflow:hidden}
  .sumi>h2{display:none}
  .sumi>:first-child,.sumi>h2+*{margin-top:0}
  .summ .sumi{padding:0 18px}
  .summ.open .sumi{padding-bottom:18px;box-shadow:inset 0 1px 0 rgba(235,238,228,.14)}
}
.paybox{margin-top:14px;padding:18px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.paybox .amt{font:800 42px/1 var(--f-d);margin:4px 0 4px}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line-2)}
.kv:last-of-type{border-bottom:0}
.kv span{color:var(--stone);font-size:14.5px}
.kv b{margin-left:auto;text-align:right;word-break:break-all;font-variant-numeric:tabular-nums}
.cp{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;min-width:92px;justify-content:center;padding:0 10px;border-radius:var(--r-sm);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;transition:transform .14s var(--ease),background-color .15s ease,color .15s ease}
.cp:active{transform:scale(.94)}
.cp.ok{background:var(--brand-soft);color:var(--brand-d);box-shadow:none}
.cp .i{width:16px;height:16px}
.qr{width:190px;border-radius:var(--r);margin:12px 0 4px;box-shadow:inset 0 0 0 1px var(--line)}
.drop{display:flex;align-items:center;gap:14px;min-height:78px;padding:12px 14px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);cursor:pointer;transition:box-shadow .15s ease,background-color .15s ease}
.drop.over{box-shadow:inset 0 0 0 2px var(--brand);background:#f6faf5}
.drop.ok{box-shadow:inset 0 0 0 2px var(--brand);background:#f6faf5}
.drop img{width:52px;height:52px;border-radius:var(--r-sm);object-fit:cover}
.drop .i{width:28px;height:28px;color:var(--stone)}
.drop span{min-width:0;overflow-wrap:break-word}
.drop small{display:block;color:var(--stone)}
.errbox{padding:14px 16px;border-radius:var(--r-lg);background:var(--alert-soft);color:var(--alert);font-weight:500;margin-bottom:14px}
.note{color:var(--stone);font-size:15px}
.bsb{display:grid;gap:2px;margin:0 0 10px}
.bsb span{font-size:14px;color:var(--stone)}
.bsb .g{font-size:12.5px}
.bsb.on-dark{margin:2px 0 0}
.bsb.on-dark span{color:var(--on-ranger-2);text-align:right;font-size:12.5px}
.bsb.on-dark .g{font-size:11.5px}
#sendBtn{min-height:58px;font-size:17px}
@media (max-width:380px){.sumt small{display:none}.sumt b{font-size:22px}.sumt{padding:0 14px}}
/* barra fija del pedido en el teléfono */
.ckbar{display:none}
@media (max-width:960px){
  .ckbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:14px;align-items:center;background:rgba(243,244,239,.97);box-shadow:0 -1px 0 var(--line),0 -10px 28px -12px rgba(21,25,18,.25);padding:10px var(--gr) calc(10px + var(--sab)) var(--gl);transform:translateY(110%);transition:transform .3s var(--ease)}
  .ckbar.on{transform:none}
  .ckt{display:flex;flex-direction:column;line-height:1.1;min-width:0}
  .ckt span{font-size:13px;color:var(--stone);font-weight:600}
  .ckt b{font:800 26px/1 var(--f-d)}
  .ckt small{font-size:12.5px;color:var(--stone);white-space:nowrap}
  .ckt small:empty{display:none}
  .ckbar .btn{flex:1;min-height:50px}
}
/* pedido recibido */
.done{max-width:640px;margin:0 auto;padding-top:56px;text-align:center}
.done .ck{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:var(--brand);display:grid;place-items:center;animation:okp .4s var(--ease) both}
.done .ck svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:dck .45s var(--ease) .18s forwards}
@keyframes dck{to{stroke-dashoffset:0}}
.done h1{font:800 clamp(48px,7vw,76px)/.92 var(--f-d);text-transform:uppercase;margin-bottom:12px}
.code{display:inline-block;font:800 40px/1 var(--f-d);letter-spacing:.05em;padding:12px 22px;margin:14px 0;border-radius:var(--r-lg);background:var(--ranger);color:var(--trail)}
.nx{list-style:none;margin:18px auto 6px;padding:0;max-width:420px;text-align:left}
.nx li{position:relative;padding:0 0 18px 36px}
.nx li::before{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--fog);box-shadow:inset 0 0 0 2px var(--line-2)}
.nx li::after{content:"";position:absolute;left:11px;top:24px;bottom:2px;border-left:2px dashed var(--line-2)}
.nx li:last-child::after{display:none}
.nx li.on::before{background:var(--brand);box-shadow:none}
.nx b{display:block;font-weight:700}
.nx span{display:block;color:var(--stone);font-size:15px}
.done .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}

/* ===================== mi cuenta ===================== */
.band{background:var(--ranger);color:var(--on-ranger)}
.band .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:40px;padding-bottom:0}
.band h1{font:800 clamp(44px,6vw,72px)/.92 var(--f-d);text-transform:uppercase;overflow-wrap:break-word}
.band p{margin:6px 0 0;color:var(--on-ranger-2);overflow-wrap:break-word}
.tabs{position:relative;display:flex;gap:4px;overflow-x:auto;margin-top:24px;width:100%;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;padding:14px 16px;color:var(--on-ranger-2);text-decoration:none;font-weight:600;white-space:nowrap;transition:color .2s ease}
.tabs a.on{color:#fff}
@media (hover:hover) and (pointer:fine){.tabs a:not(.on):hover{color:var(--on-ranger)}}
.tabs .bar{position:absolute;bottom:0;left:0;height:3px;background:var(--trail);border-radius:3px 3px 0 0;transition:transform .28s var(--ease-io),width .28s var(--ease-io)}
.acc{padding-top:32px}
.ord{padding:24px 0;border-bottom:1px solid var(--line)}
.ord:first-child{padding-top:0}
.ord header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ord header b{font:800 30px/1 var(--f-d);letter-spacing:.03em}
.ord header time{color:var(--stone)}
.ord header .pill{margin-left:auto}
.tl{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tl li{position:relative;padding-top:18px;font-size:14.5px;color:var(--stone)}
.tl li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px;background:var(--line)}
.tl li.on::before{background:var(--brand)}
.tl li.bad::before{background:var(--alert)}
.tl li b{display:block;color:var(--ink);font-weight:600}
.tl.anim li.on::before{transform-origin:left;animation:fill .5s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes fill{from{transform:scaleX(0)}}
.ord .its{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink);font-size:15px}
.ord .its span{display:inline-flex;align-items:center;gap:8px}
.ord .its img{width:36px;height:36px;border-radius:var(--r-sm);object-fit:contain;background:var(--white)}
.ord .row{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:12px;color:var(--stone);font-size:15px}
.ord .row b{color:var(--ink)}
.ord .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ord .why{margin-top:10px;padding:10px 12px;border-radius:var(--r);background:var(--alert-soft);color:var(--alert);font-size:15px}
.addr{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.addr>.i{color:var(--brand);margin-top:3px}
.addr>div:not(.acts){flex:1 1 240px;min-width:0}
.addr b{font-weight:700}
.addr p{margin:2px 0 0;color:var(--stone);font-size:15px;overflow-wrap:break-word}
.addr .acts{display:flex;gap:6px;align-items:center;margin-left:auto}
.panel{margin-top:20px;padding:22px;border-radius:var(--r-xl);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line)}
.panel h3{font:800 26px/1 var(--f-d);text-transform:uppercase;margin-bottom:16px}
.panel .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.typesel{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}

/* ===================== visor de fotos ===================== */
html.lbopen,html.lbopen body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:58;background:#0e110c;color:#fff;display:flex;flex-direction:column;opacity:0;transition:opacity .2s ease;-webkit-user-select:none;user-select:none}
.lb.in{opacity:1}
.lbtop{flex:none;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--sat)) var(--gr) 8px var(--gl)}
.lbc{min-width:52px;font-weight:700;font-size:15px}
.lbt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.78);font-size:15px}
.lbx{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;transition:transform .14s var(--ease),background-color .15s ease}
.lbx:active{transform:scale(.92)}
.lbtrack{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lbtrack::-webkit-scrollbar{display:none}
.lbtrack.zm{overflow:hidden}
.lbs{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:6px var(--gr) 6px var(--gl)}
.lbs img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;background:#fff;cursor:zoom-in;-webkit-user-drag:none}
.lbs.z{display:block;overflow:auto;padding:0;cursor:zoom-out}
.lbs.z img{max-width:none;max-height:none;height:auto;margin:auto;cursor:zoom-out;border-radius:0}
.lbv,.lbe{padding:0}
.lbv video{max-width:100%;max-height:100%;background:#000}
.lbe iframe{height:100%;max-height:100%;aspect-ratio:9/16;max-width:100%;border:0;background:#000}
.lbarr{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;transition:background-color .15s ease,opacity .2s ease,transform .14s var(--ease)}
.lbarr:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.lbarr:hover{background:rgba(255,255,255,.26)}.lbx:hover{background:rgba(255,255,255,.24)}}
.lbarr.prev{left:max(16px,env(safe-area-inset-left,0px))}.lbarr.next{right:max(16px,env(safe-area-inset-right,0px))}
.lbarr:disabled{opacity:0;pointer-events:none}
.lbhint{flex:none;margin:0;text-align:center;font-size:13px;color:rgba(255,255,255,.6);padding:8px 16px calc(12px + var(--sab))}
@media (hover:none){.lbarr{display:none}}

/* ===================== varios ===================== */
/* cambio de pantalla: solo opacidad (se ve muchas veces al día) */
.view{animation:vin .2s ease-out both}
@keyframes vin{from{opacity:0}}
.load{display:grid;place-items:center;min-height:50vh;color:var(--stone)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* banda de promociones (ya no se muestra en el inicio; se conserva por compatibilidad) */
.sec.promos{background:var(--ranger);color:var(--on-ranger);padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(44px,6vw,72px)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.pcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:190px;border-radius:var(--r-lg);overflow:hidden;background:var(--ranger-2);color:var(--on-ranger);text-align:left}
.pcard .ptx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 18px}
.pcard .pbig{display:inline-block;padding:9px 11px 6px;border-radius:var(--r-sm);background:var(--trail);color:var(--ink);font:800 32px/1 var(--f-s);white-space:nowrap}
.pcard .pim{display:flex;align-items:center;justify-content:center;background:var(--white);padding:10px}
.pcard .pim img{width:100%;height:100%;max-height:220px;object-fit:contain}

/* movimiento reducido: menos y más suave, no cero */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ov,.lb,.mapov,.toast,.tag .ph img{transition-duration:.18s!important}
  .hero.draw .topo path{stroke-dashoffset:0}
  .hero.draw .sign,.reveal .tag,.tag.nw,.hero.draw .topo .pk,.hero.draw .topo text{opacity:1;transform:none}
  .tag .ph img{opacity:1}
  .skel{animation:none}
}

/* ===== v16 Skylink ===== */
/* Skylink Pay: colores de la marca (verde petróleo) solo en lo que es de Skylink */
:root{--sky:#0f2e28;--sky-2:#006b5f;--sky-soft:#e1efeb}
.skylogo{display:block;height:18px;width:auto}
.skylogo.big{height:26px;margin:0 auto 28px}

/* opción en el paso de pago */
.opt.skyo .oi{background:var(--sky-soft)}
.opt.skyo .oi img{width:22px;height:22px}
.opt.skyo.on{box-shadow:inset 0 0 0 2px var(--sky-2);background:#f2f8f6}
.opt.skyo.on .oi{background:#cfe6e0}
.opt.skyo input{accent-color:var(--sky-2)}
.opt.skyo .tagd{background:var(--sky-soft);color:var(--sky-2)}
.skybox .skyst{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.skybox .skyst li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--stone)}
.skybox .skyst .i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--sky-2)}

/* botón de pago */
.btn.skybtn{overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#17493f 0%,var(--sky) 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 26px -14px rgba(15,46,40,.85)}
.btn.skybtn .bl{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.skybtn .skl{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.skybtn .skl .i{flex:none;width:18px;height:18px;opacity:.85}
.skybtn .skl b{font-weight:800}
.skybtn .skw{display:flex;align-items:center;gap:8px;flex:none;padding-left:14px;border-left:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.skybtn .skw .skylogo{height:17px}
.skybtn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);transform:translateX(-100%);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn.skybtn:hover:not([disabled])::before{transform:translateX(100%);transition:transform .75s var(--ease)}
  .btn.skybtn:hover:not([disabled]){box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 30px -14px rgba(15,46,40,.9)}
}
.btn.skybtn.mini{gap:8px;box-shadow:none}
.btn.skybtn.mini .i{width:16px;height:16px}
#sendBtn.skybtn{padding:0 18px}
@media (max-width:400px){.skybtn .skw .con{display:none}.skybtn .skw{padding-left:12px}#sendBtn.skybtn{font-size:16px!important;padding:0 14px}}
.ckbar .btn{white-space:nowrap}

/* regreso desde Skylink */
.skyp{max-width:460px;margin:0 auto;padding:56px 0 40px;text-align:center}
.skyp .ring{width:58px;height:58px;margin:0 auto 24px;border-radius:50%;border:3px solid var(--sky-soft);border-top-color:var(--sky-2);animation:spin .85s linear infinite}
.skyp h1{font:800 clamp(40px,7vw,60px)/.95 var(--f-d);text-transform:uppercase;margin:0 0 12px}
.skyp > p{color:var(--stone);margin:0 auto 6px;max-width:400px}
.skyp .skyc{margin-top:14px;font-size:15px}
.skyp .skyc b{font-family:var(--f-d);font-size:20px;letter-spacing:.04em;color:var(--ink)}
.skyp .acts{display:grid;gap:10px;margin:26px auto 0}
.skyp .note{margin-top:20px}
.skyp > *{animation:subin .3s var(--ease) backwards}
.skypaid{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 4px;color:var(--stone);font-size:14px}
.skypaid .skylogo{height:14px}
@media (prefers-reduced-motion:reduce){.skyp .ring{animation-duration:2.4s}.skyp > *{animation:none}}
.done.still .ck{animation:none}
.done.still .ck svg{animation:none;stroke-dashoffset:0}

/* ===== v18 variantes, opiniones, pago seguro ===== */

/* ===== v18: color y talla ===== */
.vpick{margin-top:6px}
.vgrp .lab em{font-style:normal;font-weight:500;color:var(--stone)}
.sw{display:flex;flex-wrap:wrap;gap:10px}
.swb{display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;text-align:center}
.swi{position:relative;display:block;width:60px;height:60px;border-radius:10px;overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .15s ease,transform .14s var(--ease)}
.swi img{width:100%;height:100%;object-fit:contain}
.swi i{position:absolute;inset:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(21,25,18,.18)}
.swb small{font-size:12.5px;line-height:1.2;color:var(--stone);overflow-wrap:anywhere;max-width:68px}
.swb.on .swi{box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--white)}
.swb.on small{color:var(--ink);font-weight:700}
.swb:active:not([disabled]) .swi{transform:scale(.95)}
.swb[disabled]{cursor:not-allowed}
.swb[disabled] .swi{opacity:.45}
.swb[disabled] .swi::after{content:"";position:absolute;left:-10%;top:50%;width:120%;border-top:1.5px solid var(--stone);transform:rotate(-45deg)}
.swb[disabled] small{text-decoration:line-through;opacity:.7}
@media (hover:hover) and (pointer:fine){.swb:not([disabled]):not(.on):hover .swi{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.szc .chip{min-width:56px;justify-content:center}
.vgrp.need .szc .chip:not([disabled]){box-shadow:inset 0 0 0 1.5px var(--alert)}
.vneed{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--alert);font-weight:600;font-size:15px}
.vneed:empty{display:none}
.vneed .i{width:18px;height:18px;flex:none}
.vgrp.shake .szc{animation:vshake .32s var(--ease)}
@keyframes vshake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}100%{transform:none}}
/* hoja «Elige tu talla» */
.szs h2{font:800 32px/1 var(--f-d);text-transform:uppercase;padding-right:44px}
.szs>p{margin:8px 0 18px;color:var(--stone)}
.szs>p b{color:var(--ink);font-weight:600}
.szl{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.szo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:68px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .14s var(--ease),box-shadow .15s ease}
.szo b{font:800 22px/1 var(--f-d)}
.szo small{font-size:12.5px;color:var(--stone)}
.szo:active:not([disabled]){transform:scale(.96)}
.szo[disabled]{opacity:.5;cursor:not-allowed}
.szo[disabled] b{text-decoration:line-through}
@media (hover:hover) and (pointer:fine){.szo:not([disabled]):hover{box-shadow:inset 0 0 0 2px var(--ink)}}
.szs .note{margin:16px 0 0;text-align:center}
/* tarjetas con varios colores */
.tag .st.cdots{display:flex;align-items:center;gap:4px}
.tag .st.cdots i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(21,25,18,.2);flex:none}
.tag .st.cdots span{margin-left:4px}

/* ===== v18: opiniones ===== */
.rstars{position:relative;display:inline-flex;vertical-align:middle;line-height:0;flex:none}
.rstars .s0,.rstars .s1{display:flex;gap:1px}
.rstars .s1{position:absolute;left:0;top:0;bottom:0;overflow:hidden}
.rstars svg{width:16px;height:16px;flex:none}
.rstars .s0 svg{fill:#cdd2c6}
.rstars .s1 svg{fill:#d9a417}
.rstars.sm svg{width:13px;height:13px}
.rstars.lg svg{width:22px;height:22px}
.tag .rvl{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--ink)}
.tag .rvl small{font-weight:400;color:var(--stone);font-size:13px}
.rvlink{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;color:var(--stone);min-height:32px}
.rvlink b{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.rvlink:hover span{text-decoration:underline;text-underline-offset:3px}}
.rvs .sec-h h2{font-size:clamp(34px,4.6vw,52px)}
.rv0{color:var(--stone);margin:0}
.rvs0{margin-top:40px;max-width:760px}
.rvs0 .rv0{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:var(--r-lg);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.rvs0 .rv0 svg{width:18px;height:18px;flex:none;fill:#cdd2c6;margin-top:2px}
.rvs0 .rv0 b{color:var(--ink)}
.rvsum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 40px;align-items:center;max-width:760px;padding:22px 24px;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-1)}
.rvavg{display:grid;justify-items:start;gap:8px}
.rvavg>b{font:800 64px/.85 var(--f-d)}
.rvavg>span{color:var(--stone);font-size:14.5px}
.rvbars{display:grid;gap:7px;min-width:0}
.rvbars>div{display:grid;grid-template-columns:12px 13px minmax(0,1fr) 26px;align-items:center;gap:6px;font-size:13.5px;color:var(--stone)}
.rvbars svg{width:13px;height:13px;fill:#d9a417}
.rvbars i{display:block;height:8px;border-radius:4px;background:var(--fog);overflow:hidden}
.rvbars i b{display:block;height:100%;border-radius:4px;background:#d9a417}
.rvbars>div>span:last-child{text-align:right}
.rvph{margin-top:26px;max-width:760px}
.rvph .lab{margin:0 0 10px}
.rvms{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:2px}
.rvms::-webkit-scrollbar{display:none}
.rvt{position:relative;flex:none;width:84px;height:84px;border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:transform .14s var(--ease)}
.rvt img{width:100%;height:100%;object-fit:cover}
.rvt:active{transform:scale(.96)}
.rvt i,.rwmi i{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;border-radius:50%;background:rgba(21,25,18,.6);color:#fff}
.rvt i .i,.rwmi i .i{width:14px;height:14px;fill:#fff;stroke:none}
.rvlist{max-width:760px;margin-top:12px}
.rvi{padding:20px 0;border-top:1px solid var(--line)}
.rvi:first-child{border-top:0}
.rvi header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rvi header b{font-weight:700}
.rvi .vf{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--brand-d)}
.rvi .vf .i{width:14px;height:14px}
.rvi time{margin-left:auto;font-size:13.5px;color:var(--stone)}
.rvv{margin:6px 0 0;font-size:13.5px;color:var(--stone)}
.rvx{margin:8px 0 0;white-space:pre-line;max-width:68ch;overflow-wrap:anywhere}
.rvi .rvms{margin-top:12px}
.rvi .rvt{width:72px;height:72px}
.rvrp{margin-top:14px;padding:12px 14px;border-radius:var(--r);background:var(--white);box-shadow:inset 3px 0 0 var(--brand)}
.rvrp b{font-size:14px}
.rvrp p{margin:4px 0 0;color:var(--stone);white-space:pre-line;overflow-wrap:anywhere}
.rvlist+.btn{margin-top:6px}
@media (max-width:560px){.rvsum{grid-template-columns:1fr;padding:20px}.rvavg{grid-template-columns:auto auto;align-items:center;justify-content:start;column-gap:14px}.rvavg>b{grid-row:span 2}}
/* escribir opinión */
.rw{max-width:760px}
.rwh p{margin:-10px 0 0;color:var(--stone);max-width:60ch}
.rwn{margin:26px 0 18px;max-width:380px}
.rwl{display:grid;gap:14px}
.rwi{display:grid;gap:16px;padding:20px;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-1)}
.rwp{display:flex;align-items:center;gap:12px;min-width:0}
.rwp img,.rwp .ph0{width:56px;height:56px;border-radius:var(--r);object-fit:contain;background:var(--fog);flex:none}
.rwp b{display:block;line-height:1.25}
.rwp small{display:block;color:var(--stone);font-size:13.5px;margin-top:2px}
.rwst{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.rwst button{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r);transition:transform .12s var(--ease)}
.rwst button svg{width:34px;height:34px;fill:#d3d8cc;transition:fill .12s ease}
.rwst button.on svg{fill:#d9a417}
.rwst button:active{transform:scale(.9)}
.rwsl{margin-left:8px;color:var(--stone);font-size:15px;font-weight:600}
.rwi .f em{font-style:normal;font-weight:400;color:var(--stone)}
.rwms{display:flex;flex-wrap:wrap;gap:8px}
.rwmi{position:relative;width:76px;height:76px;border-radius:var(--r);overflow:hidden;background:var(--fog);flex:none}
.rwmi img{width:100%;height:100%;object-fit:cover}
.rwmi>button{position:absolute;right:4px;top:4px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(21,25,18,.72);color:#fff}
.rwmi>button .i{width:14px;height:14px}
.rwmi.busy{display:grid;place-items:center}
.rwmi.busy .spin{width:22px;height:22px;border-width:2.5px}
.rwadd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:76px;height:76px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--stone);font-size:13px;font-weight:600;cursor:pointer;transition:transform .14s var(--ease)}
.rwadd:active{transform:scale(.96)}
.rwadd .i{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.rwadd:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}}
.rwmh{display:block;margin-top:8px;color:var(--stone);font-size:13.5px}
.rwer{margin:0;color:var(--alert);font-weight:600;font-size:14.5px}
.rwer:empty{display:none}
.rwi>.btn{justify-self:start}
.rwi.sent{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.rwok{display:flex;align-items:center;gap:6px;margin:0;color:var(--brand-d);font-weight:700}
.rwok .i{width:18px;height:18px}
.rwdone{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:18px;padding:18px 20px;border-radius:var(--r-lg);background:var(--brand-soft)}
.rwdone .ck{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;flex:none}
.rwdone>div{flex:1;min-width:200px}
.rwdone p{margin:2px 0 0;color:var(--stone)}
@media (max-width:560px){.rwi{padding:16px}.rwi.sent{grid-template-columns:1fr}.rwst button{width:42px;height:44px}.rwst button svg{width:32px;height:32px}}
.ord .acts .btn .i.star{width:16px;height:16px}

/* ===== v18: pago seguro ===== */
.secure{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;line-height:1.45;color:var(--stone)}
.secure .i,.secbar .i{width:20px;height:20px;flex:none;color:var(--brand-d);margin-top:1px}
.secure b,.secbar b{color:var(--ink)}
.secbar{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r);background:#eef5ec;box-shadow:inset 0 0 0 1px #cfe2ca;font-size:14.5px;line-height:1.45;color:var(--stone)}
.secbar b{display:block}
.dsec,.ssec{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--brand-d)}
.dsec .i,.ssec .i{width:15px;height:15px;flex:none}
.fsec{display:flex;align-items:flex-start;gap:10px;grid-column:1/-1;margin-top:8px;padding-top:22px;border-top:1px solid var(--ranger-3);color:var(--on-ranger-2);font-size:14.5px}
.fsec .i{width:18px;height:18px;flex:none;color:var(--on-ranger);margin-top:2px}
footer.foot .fsec b{display:inline;font:inherit;font-weight:700;color:var(--on-ranger);text-transform:none;margin:0}
@media (prefers-reduced-motion:reduce){.vgrp.shake .szc{animation:none}}