/* css/holo-scenes-b.css · ESCENAS B (hb-): #shopify #productos #nosotros #proceso #contacto footer.foot
   Superficies base: css/holo.css (ESCENARIO). Aquí, el contenido holográfico de cada escena (#id gana al <style> inline).
   Estados (js/holo-scenes-b.js): .hb-mo hay movimiento · .hb-go el bloque entró · .hb-run sección visible · html.hb-hid pestaña oculta.
   Estados previos SOLO bajo .hb-mo …:not(.hb-go): sin JS o con reduced-motion se ve el fotograma final. */
#shopify,#productos,#nosotros,#proceso,#contacto,footer.foot{--hb:var(--holo,#2AA5F5);--hb-hi:var(--holo-hi,#7FD0FF);--hb-dim:var(--holo-dim,rgb(42 165 245/.35));--hb-faint:var(--holo-faint,rgb(42 165 245/.12));--hb-solid:var(--holo-panel-solid,#0A1324);--hb-void:var(--holo-void,#03060D);--hb-tx:#EAF0FA;--hb-m:500 11px/1 var(--f-mono);--hb-mu:#8C9AB5;--hb-red:var(--holo-red,#FF3B3B);--hb-ease:cubic-bezier(.22,1,.36,1);--hb-io:cubic-bezier(.65,0,.35,1);overflow-x:clip}
.hb-sec:not(.hb-run) :is(.hb-x,.hb-x *),.hb-sec:not(.hb-run) :is(.hb-x,.hb-x *)::before,.hb-sec:not(.hb-run) :is(.hb-x,.hb-x *)::after,.hb-hid :is(.hb-x,.hb-x *),.hb-hid :is(.hb-x,.hb-x *)::before,.hb-hid :is(.hb-x,.hb-x *)::after{animation-play-state:paused!important}
.hb-brk{position:absolute;inset:-8px;pointer-events:none;z-index:3;--c:var(--hb-dim);--l:14px;--g:linear-gradient(var(--c),var(--c));background:var(--g) 0 0/var(--l) 1px,var(--g) 0 0/1px var(--l),var(--g) 100% 0/var(--l) 1px,var(--g) 100% 0/1px var(--l),var(--g) 0 100%/var(--l) 1px,var(--g) 0 100%/1px var(--l),var(--g) 100% 100%/var(--l) 1px,var(--g) 100% 100%/1px var(--l);background-repeat:no-repeat}
.hb-mo :not(.hb-go)>.hb-brk,.hb-mo :not(.hb-go)>.hb-fr>.hb-brk,.hb-mo .sp-stage:not(.hb-go) .hb-brk{opacity:0;transform:scale(1.04)}
.hb-mo .hb-go>.hb-brk,.hb-mo .hb-go>.hb-fr>.hb-brk,.hb-mo .sp-stage.hb-go .hb-brk{transition:opacity .6s ease-out .2s,transform .9s var(--hb-ease) .2s}
.hb-beam{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;opacity:0}
.hb-beam::after{content:"";position:absolute;left:0;right:0;top:0;height:24%;border-bottom:1px solid var(--hb-hi);background:linear-gradient(180deg,rgb(42 165 245/0),rgb(42 165 245/.16));box-shadow:0 6px 18px -4px rgb(42 165 245/.6);transform:translateY(-101%)}
.hb-mo .hb-go>.hb-beam,.hb-mo .hb-go>.hb-fr>.hb-beam,.hb-mo .sp-stage.hb-go .hb-beam{animation:hbBeamO 1.5s linear var(--hb-bd,.1s) both}
.hb-mo .hb-go>.hb-beam::after,.hb-mo .hb-go>.hb-fr>.hb-beam::after,.hb-mo .sp-stage.hb-go .hb-beam::after{animation:hbBeam 1.5s var(--hb-io) var(--hb-bd,.1s) both}
@keyframes hbBeamO{0%,100%{opacity:0}8%,85%{opacity:1}}
@keyframes hbBeam{from{transform:translateY(-101%)}to{transform:translateY(420%)}}
.hb-fr{position:absolute;pointer-events:none;z-index:3}
.hb-emit{position:absolute;left:50%;bottom:0;width:min(72%,380px);aspect-ratio:7/1;margin-left:calc(min(72%,380px) / -2);border-radius:50%;pointer-events:none;border:1px solid rgb(127 208 255/.55);background:radial-gradient(closest-side,rgb(42 165 245/.28),rgb(42 165 245/0));box-shadow:0 0 22px rgb(42 165 245/.35)}
.hb-emit::before,.hb-emit::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--hb-dim);opacity:0}
.hb-mo .hb-emit::before,.hb-mo .hb-emit::after{animation:hbRing 3.6s ease-out infinite}
.hb-mo .hb-emit::after{animation-delay:1.8s}
@keyframes hbRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.hb-rec{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--hb-red);box-shadow:0 0 8px rgba(255,59,59,.7)}
.hb-mo .hb-rec{animation:hbRec 2.4s ease-in-out infinite}
@keyframes hbRec{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes hbType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hbLine{from{transform:scaleX(0)}}
@keyframes hbIn{from{opacity:0}}
@keyframes hbIgn{0%{box-shadow:inset 0 0 0 1px rgb(42 165 245/.2);color:var(--hb-mu)}
55%{box-shadow:inset 0 0 0 1px var(--hb-hi),0 0 0 5px rgb(42 165 245/.22),0 0 22px var(--hb)}}
@keyframes hbDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#shopify .hb-xpl{position:absolute;pointer-events:none;z-index:3;perspective:1500px}
#shopify .hb-xst{position:absolute;inset:0;transform-style:preserve-3d;opacity:0}
#shopify .hb-xp{position:absolute;left:0;right:0;border-radius:4px;border:1px solid rgb(127 208 255/.75);background:rgb(42 165 245/.08);box-shadow:0 0 24px rgb(42 165 245/.28),inset 0 0 28px rgb(42 165 245/.12)}
#shopify .hb-xp.p1{top:0;height:calc(30px + 8%);--z:170}
#shopify .hb-xp.p2{top:calc(30px + 8%);height:40%;--z:70}
#shopify .hb-xp.p3{top:calc(30px + 48%);bottom:0;--z:-40}
#shopify .hb-xp b{position:absolute;left:10px;top:8px;font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase;color:var(--hb-hi);text-shadow:0 0 8px rgb(42 165 245/.8);white-space:nowrap}
#shopify .hb-xp i{position:absolute;border:1px dashed rgb(127 208 255/.5);border-radius:3px}
#shopify .p2 i{left:6%;top:26%;width:52%;bottom:14%}
#shopify .p3 i{top:30%;bottom:16%;width:27%}
#shopify .p3 i:nth-of-type(1){left:4%}#shopify .p3 i:nth-of-type(2){left:36.5%}#shopify .p3 i:nth-of-type(3){left:69%}
#shopify .hb-xpl .hb-brk{--c:rgb(127 208 255/.55)}
#shopify .hb-tag{position:absolute;right:0;top:-26px;display:flex;gap:8px;align-items:center;font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase;color:var(--holo-kicker,#74BDEB);white-space:nowrap}
#shopify .hb-tag em{font-style:normal;color:var(--hb-hi)}
.hb-mo #shopify .sp-stage:not(.hb-go) .hb-tag{opacity:0}
.hb-mo #shopify .sp-stage.hb-go .hb-tag{animation:hbIn .4s ease-out .1s backwards}
.hb-mo #shopify .sp-stage.hb-go .hb-xst{animation:hbXst 2.8s var(--hb-io) .15s both}
.hb-mo #shopify .sp-stage.hb-go .hb-xp{animation:hbXz 2.8s var(--hb-io) .15s both}
@keyframes hbXst{0%{opacity:0;transform:rotateX(56deg) rotateZ(-32deg) scale(.78)}
10%{opacity:1}38%{transform:rotateX(56deg) rotateZ(-32deg) scale(.78)}66%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes hbXz{0%{transform:translateZ(calc(var(--z) * 2.4px))}38%{transform:translateZ(calc(var(--z) * 1.5px))}66%,100%{transform:none}}
.hb-mo #shopify .sp-stage:not(.hb-go) .frame-b{opacity:0}
.hb-mo #shopify .sp-stage.hb-go .frame-b{animation:hbSolid .9s ease-out 1.85s backwards}
@keyframes hbSolid{0%{opacity:0;filter:brightness(1.9) saturate(0)}
35%{opacity:.9;filter:brightness(1.3) drop-shadow(3px 0 0 rgba(255,59,59,.55)) drop-shadow(-3px 0 0 rgb(42 165 245/.7))}
100%{opacity:1;filter:none}}
.hb-mo #shopify .sp-stage.hb-go .hb-beam{--hb-bd:1.8s}
#shopify .hb-slot{align-self:flex-end;width:calc(min(280px,60%) + 20px);margin:var(--s4) -10px 0 0;position:relative;z-index:2;display:flex;flex-direction:column;gap:6px}
#shopify .hb-slot span{display:flex;align-items:center;gap:8px;padding-left:10px;font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase;color:var(--holo-kicker,#74BDEB)}
#shopify .hb-feed{display:block;height:8px;border-radius:4px;background:#050A14;box-shadow:inset 0 0 0 1px rgb(127 208 255/.55),0 0 14px rgb(42 165 245/.45)}
#shopify .hb-slot+.ticket{margin-top:-4px;position:relative;font-variant-numeric:tabular-nums}
.hb-mo #shopify .ticket:not(.hb-go){clip-path:inset(0 0 100% 0)}
.hb-mo #shopify .ticket.hb-go{animation:hbPrint 1.3s cubic-bezier(.45,0,.2,1) .9s backwards}
@keyframes hbPrint{from{clip-path:inset(0 0 100% 0);transform:translateY(-28px)}to{clip-path:inset(0 0 0 0);transform:none}}
.hb-mo #shopify .ticket.hb-go>*{animation:hbType .55s steps(16,end) backwards;animation-delay:calc(1.25s + var(--i,0) * .14s)}
.hb-mo #shopify .ticket.hb-go .ok{animation:hbIgnT 1s ease-out 2.4s backwards}
@keyframes hbIgnT{0%{opacity:0}40%{opacity:1;text-shadow:0 0 14px var(--hb-hi)}}
#shopify .ticket .ok{text-shadow:0 0 8px rgb(42 165 245/.6)}
#shopify .ticket .r.t:last-child span:last-child{color:var(--hb-hi)}
#shopify .sp-step{position:relative;border-top-color:rgb(42 165 245/.14)}
#shopify .sp-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--hb);box-shadow:0 0 8px rgb(42 165 245/.7);transform-origin:0 50%}
#shopify .sp-step::after{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;border-radius:2px;background:var(--hb-hi);box-shadow:0 0 10px var(--hb);clip-path:inset(0 100% 0 0);opacity:0}
#shopify .sp-step .n{display:inline-grid;place-items:center;align-self:flex-start;min-width:36px;height:22px;padding:0 6px;border-radius:3px;color:var(--hb-hi);box-shadow:inset 0 0 0 1px rgb(127 208 255/.6),0 0 12px -2px rgb(42 165 245/.55)}
.hb-mo #shopify .sp-steps:not(.hb-go) .sp-step::before{transform:scaleX(0)}
.hb-mo #shopify .sp-steps.hb-go .sp-step::before{animation:hbLine .8s var(--hb-ease) backwards;animation-delay:calc(.25s + var(--k,0) * .38s)}
.hb-mo #shopify .sp-steps.hb-go .sp-step .n{animation:hbIgn .9s ease-out backwards;animation-delay:calc(.45s + var(--k,0) * .38s)}
.hb-mo #shopify .sp-steps.hb-go .sp-step::after{animation:hbPulse 9.6s linear infinite;animation-delay:calc(2.2s + var(--k,0) * 2.4s)}
@keyframes hbPulse{0%{opacity:1;clip-path:inset(0 100% 0 0)}2%{clip-path:inset(0 calc(100% - 56px) 0 0)}
22%{opacity:1;clip-path:inset(0 0 0 calc(100% - 56px))}24.9%{opacity:1;clip-path:inset(0 0 0 100%)}25%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
#shopify .sp-need{position:relative}
#shopify .sp-need::before{content:"";position:absolute;left:0;top:var(--s6);bottom:var(--s6);width:2px;border-radius:2px;background:var(--hb);box-shadow:0 0 10px var(--hb);transform-origin:50% 0}
#shopify .sp-need li::before{background:var(--hb-hi);box-shadow:0 0 6px var(--hb)}
.hb-mo #shopify .sp-need:not(.hb-go)::before{transform:scaleY(0)}
.hb-mo #shopify .sp-need.hb-go::before{transition:transform .9s var(--hb-ease) .3s}
#shopify .sp-store-shot{overflow:hidden;isolation:isolate}
#shopify .sp-store-shot .frame-b{z-index:1}
#shopify .hb-proj{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#shopify .hb-intf{position:absolute;left:0;right:0;top:-50%;height:200%;opacity:.7;background:repeating-linear-gradient(180deg,rgb(127 208 255/.07) 0 1px,transparent 1px 5px)}
.hb-mo #shopify .hb-intf{animation:hbIntf 14s linear infinite}
@keyframes hbIntf{to{transform:translateY(25%)}}
#shopify .hb-cone{position:absolute;left:12%;right:12%;bottom:14px;top:6%;background:linear-gradient(0deg,rgb(42 165 245/.30),rgb(42 165 245/.06) 70%,rgb(42 165 245/0));clip-path:polygon(36% 100%,64% 100%,100% 0,0 0)}
#shopify .hb-proj .hb-emit{bottom:6px;width:56%;margin-left:-28%}
#shopify .hb-onair{position:absolute;left:var(--s5);top:calc(var(--s5) - 18px);z-index:2;display:flex;align-items:center;gap:8px;font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase;color:var(--hb-tx);pointer-events:none}
#shopify .sp-store:only-child .hb-onair{left:var(--s7);top:calc(var(--s7) - 24px)}
.hb-mo #shopify .sp-store-shot:not(.hb-go) :is(.hb-proj,.hb-onair){opacity:0}
.hb-mo #shopify .sp-store-shot.hb-go .hb-proj{transition:opacity .8s ease-out}
.hb-mo #shopify .sp-store-shot.hb-go .hb-onair{transition:opacity .4s ease-out 1.2s}
.hb-mo #shopify .sp-store-shot:not(.hb-go) .frame-b{opacity:0}
.hb-mo #shopify .sp-store-shot.hb-go .frame-b{animation:hbProj 1.1s var(--hb-ease) .45s backwards}
.hb-mo #shopify .sp-store-shot:not(.hb-go) .sp-store-ph{opacity:0}
.hb-mo #shopify .sp-store-shot.hb-go .sp-store-ph{animation:hbProj 1s var(--hb-ease) .9s backwards}
@keyframes hbProj{0%{opacity:0;transform:translateY(22px) scale(.96);filter:brightness(1.8) saturate(.2)}
45%{opacity:.85}100%{opacity:1;transform:none;filter:none}}
#shopify .hb-sig{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
#shopify .hb-sig i{width:3px;border-radius:1px;background:var(--hb-hi);box-shadow:0 0 5px var(--hb)}
#shopify .hb-sig i:nth-child(1){height:4px}#shopify .hb-sig i:nth-child(2){height:7px}#shopify .hb-sig i:nth-child(3){height:10px}#shopify .hb-sig i:nth-child(4){height:13px}
#shopify .hb-sig b{align-self:center;margin-left:6px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--hb-mu)}
.hb-mo #shopify .hb-sig i{animation:hbBar 2s ease-in-out infinite}
#shopify .hb-sig i:nth-child(2){animation-delay:.25s}#shopify .hb-sig i:nth-child(3){animation-delay:.5s}#shopify .hb-sig i:nth-child(4){animation-delay:.75s}
@keyframes hbBar{0%,100%{opacity:.35}30%{opacity:1}}
#shopify .sp-buy{position:relative}
#shopify .sp-buy .hb-brk{inset:6px;--c:rgb(127 208 255/.5)}
#shopify .hb-sweep{position:absolute;left:var(--s5);right:var(--s5);top:0;height:1px;background:var(--hb-hi);box-shadow:0 0 10px var(--hb);clip-path:inset(0 100% 0 0);pointer-events:none}
.hb-mo #shopify .sp-buy.hb-go .hb-sweep{animation:hbRun 7s var(--hb-io) .4s infinite}
@keyframes hbRun{0%{clip-path:inset(0 100% 0 0)}8%{clip-path:inset(0 calc(100% - 140px) 0 0)}52%{clip-path:inset(0 0 0 calc(100% - 140px))}58%,100%{clip-path:inset(0 0 0 100%)}}
#antlook .hb-shield{position:absolute;right:0;top:0;width:var(--s9);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1;pointer-events:none}
#antlook .hb-shield svg{display:block;width:70px;height:auto;overflow:visible;filter:drop-shadow(0 0 6px rgb(42 165 245/.55))}
#antlook .hb-shield .sh{stroke:var(--hb-hi);stroke-width:1.3;stroke-linejoin:round}
#antlook .hb-shield .sh2{stroke:var(--hb-dim);stroke-width:1;stroke-dasharray:2 3}
#antlook .hb-shield .fp path{stroke:var(--hb-hi);stroke-width:1.15;stroke-linecap:round}
#antlook .hb-shield .fp{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
#antlook .hb-shield .f1{opacity:1}
#antlook .hb-shield .sl{fill:var(--hb-hi);opacity:0}
.hb-mo #antlook .hb-shield .fp{animation:hbMorph 7.5s ease-in-out infinite}
.hb-mo #antlook .hb-shield .f2{animation-delay:-5s}
.hb-mo #antlook .hb-shield .f3{animation-delay:-2.5s}
@keyframes hbMorph{0%{opacity:0;transform:rotate(-8deg) scale(.9)}6%,30%{opacity:1;transform:none}38%,100%{opacity:0;transform:rotate(8deg) scale(1.06)}}
.hb-mo #antlook .hb-shield .sl{animation:hbSl 2.5s linear infinite}
@keyframes hbSl{0%{opacity:0;transform:translateY(0)}10%,85%{opacity:.9}100%{opacity:0;transform:translateY(84px)}}
#antlook .hb-ro{display:flex;flex-direction:column;align-items:center;gap:4px;font:500 11px/1.1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center}
#antlook .hb-ro b{font-weight:500;color:var(--hb-mu)}
#antlook .hb-ro code{font:inherit;color:var(--hb-hi);letter-spacing:.04em}
#antlook .hb-ro em{font-style:normal;color:var(--hb-tx);padding:3px 6px;border-radius:3px;box-shadow:inset 0 0 0 1px rgb(127 208 255/.45)}
.hb-mo #antlook .ant-stage:not(.hb-go) .hb-shield{opacity:0;transform:translateY(10px)}
.hb-mo #antlook .ant-stage.hb-go .hb-shield{transition:opacity .7s ease-out .9s,transform .9s var(--hb-ease) .9s}
#lizardassets .hb-vit{position:relative;margin-bottom:var(--s5)}
#lizardassets .hb-vit-h{display:flex;justify-content:space-between;gap:16px;padding-top:10px;border-top:1px solid rgb(42 165 245/.2);font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase;color:var(--holo-kicker,#74BDEB)}
#lizardassets .hb-vit-s{position:relative;height:178px;margin-top:6px;perspective:900px}
#lizardassets .hb-car{position:absolute;left:50%;top:10px;width:118px;margin-left:-59px;height:150px;transform-style:preserve-3d}
#lizardassets .hb-card{position:absolute;left:0;top:0;width:118px;display:flex;flex-direction:column;gap:5px;padding:6px 6px 8px;border-radius:6px;background:rgba(6,12,25,.9);box-shadow:inset 0 0 0 1px rgb(127 208 255/.5),0 0 20px -4px rgb(42 165 245/.5)}
#lizardassets .hb-card-im{position:relative;height:70px;border-radius:3px;overflow:hidden;background:rgb(42 165 245/.08);box-shadow:inset 0 0 0 1px rgb(42 165 245/.25)}
#lizardassets .hb-card-im img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.92}
#lizardassets .hb-card-im i{position:absolute;left:8%;right:8%;border-radius:2px;border:1px solid rgb(127 208 255/.45)}
#lizardassets .hb-card-im i:nth-child(1){top:8%;height:8%;border-style:dashed}
#lizardassets .hb-card-im i:nth-child(2){top:22%;height:34%;background:rgb(42 165 245/.12)}
#lizardassets .hb-card-im i:nth-child(3){top:64%;height:24%;right:54%}
#lizardassets .hb-card-im i:nth-child(4){top:64%;height:24%;left:54%}
#lizardassets .hb-card b{font-size:13px;font-weight:700;line-height:1.2;color:var(--hb-tx)}
#lizardassets .hb-card small{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hb-mu)}
#lizardassets .hb-card.c0 small{color:var(--hb-hi)}
#lizardassets .hb-vit-s .hb-emit{bottom:0;width:300px;margin-left:-150px}
#lizardassets .hb-card.c0{transform:translate3d(0,0,60px)}
#lizardassets .hb-card.c1{transform:translate3d(142px,-6px,-60px) rotateY(-30deg);opacity:.6}
#lizardassets .hb-card.c2{transform:translate3d(-142px,-6px,-60px) rotateY(30deg);opacity:.6}
.hb-mo #lizardassets .hb-vit.hb-go .hb-card{animation:hbCar 10.5s var(--hb-io) infinite}
.hb-mo #lizardassets .hb-vit.hb-go .hb-card.c1{animation-delay:-7s}
.hb-mo #lizardassets .hb-vit.hb-go .hb-card.c2{animation-delay:-3.5s}
@keyframes hbCar{0%,26%{transform:translate3d(0,0,60px);opacity:1}
33%,59%{transform:translate3d(-142px,-6px,-60px) rotateY(30deg);opacity:.6}
66%,92%{transform:translate3d(142px,-6px,-60px) rotateY(-30deg);opacity:.6}
100%{transform:translate3d(0,0,60px);opacity:1}}
.hb-mo #lizardassets .hb-vit:not(.hb-go) .hb-car{opacity:0;transform:translateY(16px) scale(.92)}
.hb-mo #lizardassets .hb-vit.hb-go .hb-car{transition:opacity .8s ease-out .2s,transform 1s var(--hb-ease) .2s}
/* foto del estudio: mismo marco de proyección que la banda (borde de luz + esquinas HUD) */
#nosotros .std-photo{position:relative;box-shadow:0 0 0 1px rgb(42 165 245/.28),0 0 44px -14px rgb(42 165 245/.5)}
#nosotros .std-photo::after{content:"";position:absolute;inset:14px;pointer-events:none;z-index:2;--c:rgb(127 208 255/.6);--l:18px;--g:linear-gradient(var(--c),var(--c));
  background:var(--g) 0 0/var(--l) 1px,var(--g) 0 0/1px var(--l),var(--g) 100% 0/var(--l) 1px,var(--g) 100% 0/1px var(--l),var(--g) 0 100%/var(--l) 1px,var(--g) 0 100%/1px var(--l),var(--g) 100% 100%/var(--l) 1px,var(--g) 100% 100%/1px var(--l);background-repeat:no-repeat}
#nosotros .std-figs div{position:relative}
#nosotros .std-figs div::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:1px;background:var(--hb-hi);box-shadow:0 0 8px var(--hb);transform-origin:0 50%}
.hb-mo #nosotros .std-figs:not(.hb-go) div::before{transform:scaleX(0)}
.hb-mo #nosotros .std-figs.hb-go div::before{transition:transform .8s var(--hb-ease) .2s}
#nosotros .std-figs b{position:relative}
#nosotros .std-figs b.hb-odb{color:transparent}
#nosotros .hb-odo{position:absolute;left:0;top:0;display:flex;white-space:nowrap;pointer-events:none;text-shadow:0 0 18px rgb(42 165 245/.45)}
#nosotros .hb-reel{display:block;height:1em;overflow:hidden}
#nosotros .hb-col{display:flex;flex-direction:column}
#nosotros .hb-col span{display:block;height:1em;line-height:1}
.hb-mo #nosotros .std-figs.hb-go .hb-col{animation:hbOdo 1.9s cubic-bezier(.2,.7,.12,1) var(--d,0ms) forwards}
@keyframes hbOdo{to{transform:translateY(calc(var(--n) * -1em))}}
#nosotros .pact{position:relative}
#nosotros .pact .hb-brk{--c:rgb(127 208 255/.55)}
#nosotros .pact li::before{color:var(--hb-hi)}
.hb-mo #nosotros .pact:not(.hb-go) ol>li{clip-path:inset(0 100% 0 0)}
.hb-mo #nosotros .pact.hb-go ol>li{animation:hbType .75s steps(20,end) backwards;animation-delay:calc(.5s + var(--i,0) * .36s)}
#nosotros .hb-sign{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 16px;margin-top:var(--s4);padding-top:var(--s4);border-top:1px dashed rgb(127 208 255/.3)}
#nosotros .hb-sg{display:block;width:min(240px,100%);height:auto;overflow:visible}
#nosotros .hb-sg path{stroke:var(--hb-hi);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgb(42 165 245/.9))}
#nosotros .hb-sg path+path{stroke:var(--hb-dim);stroke-width:1;filter:none}
#nosotros .hb-seal{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hb-hi),0 0 0 4px rgb(42 165 245/.1),0 0 20px rgb(42 165 245/.45)}
#nosotros .hb-seal svg{width:24px;height:24px}
#nosotros .hb-seal path{stroke:var(--hb-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#nosotros .hb-sign-l{grid-column:1/-1;font:500 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--hb-mu)}
.hb-mo #nosotros .pact:not(.hb-go) .hb-sign path{stroke-dasharray:1;stroke-dashoffset:1}
.hb-mo #nosotros .pact.hb-go .hb-sg path{stroke-dasharray:1;animation:hbDraw 1.7s var(--hb-io) 2.2s backwards}
.hb-mo #nosotros .pact.hb-go .hb-sg path+path{animation-duration:.8s;animation-delay:3.6s}
.hb-mo #nosotros .pact:not(.hb-go) :is(.hb-seal,.hb-sign-l){opacity:0}
.hb-mo #nosotros .pact.hb-go .hb-seal{animation:hbStamp .6s var(--hb-ease) 3.7s backwards}
.hb-mo #nosotros .pact.hb-go .hb-seal path{stroke-dasharray:1;animation:hbDraw .5s ease-out 4s backwards}
.hb-mo #nosotros .pact.hb-go .hb-sign-l{animation:hbType .8s steps(24,end) 2s backwards}
@keyframes hbStamp{from{opacity:0;transform:scale(1.7)}}
.hb-mo #nosotros .pact.hb-go{--hb-bd:.1s}
#proceso .track li::before{left:9px;width:22px;background:none;box-shadow:none;border-left:2px dotted rgb(127 208 255/.5);border-right:2px dotted rgb(127 208 255/.5)}
#proceso .track .tn{border-radius:4px;transition:color .4s,box-shadow .4s,transform .4s var(--hb-ease)}
#proceso .track li.hb-cur .tn{color:#03101C;background:var(--hb-hi);box-shadow:0 0 0 4px rgb(42 165 245/.18),0 0 26px rgb(42 165 245/.8);transform:scale(1.08)}
#proceso .track li.hb-past .tn{box-shadow:inset 0 0 0 1px var(--hb),0 0 10px -2px rgb(42 165 245/.6)}
#proceso .track li h3{transition:color .4s,text-shadow .4s}
#proceso .track li.hb-cur h3{color:#fff;text-shadow:0 0 18px rgb(42 165 245/.6)}
#proceso .proc-vis .hb-brk{inset:10px;--c:rgb(127 208 255/.5)}
#proceso .hb-fc{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;pointer-events:none;font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase}
#proceso .hb-fc-l{color:var(--hb-mu)}
#proceso .hb-fc-n{justify-self:end;font-weight:500;color:var(--hb-hi);font-variant-numeric:tabular-nums}
#proceso .hb-fc-b{grid-column:1/-1;display:block;height:2px;background:rgb(127 208 255/.16);border-radius:2px;overflow:hidden}
#proceso .hb-fc-b i{display:block;height:100%;background:var(--hb-hi);box-shadow:0 0 8px var(--hb);transform-origin:0 50%;transform:scaleX(.2);transition:transform .6s var(--hb-ease)}
@media(max-width:960px){#proceso .proc-vis{position:relative}}
#proceso .qa{position:relative;transition:background-color .35s ease,box-shadow .35s ease}
#proceso .qa summary{position:relative;padding-left:22px;padding-right:var(--s3)}
#proceso .qa summary::before{content:"";position:absolute;left:4px;top:50%;width:7px;height:7px;margin-top:-4px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px rgb(127 208 255/.55);transition:background-color .3s,box-shadow .3s}
#proceso .qa summary:hover::before{box-shadow:inset 0 0 0 1px var(--hb-hi),0 0 8px var(--hb)}
#proceso .qa summary svg{width:30px;height:30px;padding:5px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(127 208 255/.3);color:var(--hb-hi)}
#proceso .qa[open]{background:rgb(42 165 245/.05);box-shadow:inset 2px 0 0 var(--hb),inset 0 0 0 1px rgb(42 165 245/.1)}
#proceso .qa[open] summary::before{background:var(--hb-hi);box-shadow:0 0 10px var(--hb)}
#proceso .qa[open] summary svg{box-shadow:inset 0 0 0 1px var(--hb-hi),0 0 12px -2px rgb(42 165 245/.7)}
#proceso .qa p{padding-left:22px}
.hb-mo #proceso .qa2-list:not(.hb-go) .qa summary::before{opacity:0}
.hb-mo #proceso .qa2-list.hb-go .qa summary::before{transition:opacity .4s ease-out .4s,background-color .3s,box-shadow .3s}
#contacto .form{box-shadow:inset 0 0 0 1px rgb(42 165 245/.28),0 0 60px -24px rgb(42 165 245/.45),0 24px 48px -32px rgba(0,0,0,.9)}
@media(max-width:960px){#contacto .form{position:relative}}
#contacto .form .hb-brk{--c:rgb(127 208 255/.6)}
#contacto .hb-con{position:absolute;left:var(--s5);top:0;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:3px;background:var(--hb-void);box-shadow:inset 0 0 0 1px rgb(127 208 255/.45);font:var(--hb-m);letter-spacing:.08em;text-transform:uppercase;color:var(--hb-hi);pointer-events:none;white-space:nowrap}
#contacto .hb-ant{position:absolute;right:var(--s5);top:-22px;width:44px;height:44px;pointer-events:none}
#contacto .hb-ant svg{width:100%;height:100%;overflow:visible}
#contacto .hb-ant .m,#contacto .hb-ant circle{stroke:var(--hb-hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#contacto .hb-ant circle{fill:var(--hb-void)}
#contacto .hb-ant .w1,#contacto .hb-ant .w2{stroke:var(--hb);stroke-width:1.5;stroke-linecap:round}
.hb-mo #contacto .hb-ant :is(.w1,.w2){animation:hbWave 2.8s ease-out infinite}
.hb-mo #contacto .hb-ant .w2{animation-delay:.35s}
@keyframes hbWave{0%,100%{opacity:.25}25%{opacity:1}}
#contacto .fg{position:relative}
#contacto .fg::before,#contacto .fg::after{content:"";position:absolute;left:0;right:0;bottom:0;top:29px;border-radius:var(--r-s);pointer-events:none;opacity:0}
#contacto .fg::before{box-shadow:0 0 0 1px rgb(127 208 255/.55),0 0 26px -2px rgb(42 165 245/.5);transition:opacity .3s ease}
#contacto .fg:focus-within::before{opacity:1}
#contacto .fg::after{z-index:2;background:linear-gradient(90deg,rgb(127 208 255/0),rgb(127 208 255/.22) 80%,rgb(127 208 255/.9));clip-path:inset(0 100% 0 0)}
.hb-mo #contacto .fg:focus-within::after{animation:hbScanF .9s cubic-bezier(.4,0,.2,1)}
@keyframes hbScanF{0%{opacity:1;clip-path:inset(0 100% 0 0)}12%{clip-path:inset(0 calc(100% - 90px) 0 0)}88%{opacity:1;clip-path:inset(0 0 0 calc(100% - 90px))}100%{opacity:0;clip-path:inset(0 0 0 100%)}}
#contacto .ct-next ol{position:relative}
#contacto .ct-next ol::before{content:"";position:absolute;left:15px;top:calc(var(--s4) + 22px);bottom:calc(var(--s4) + 30px);width:1px;background:var(--hb-dim);box-shadow:0 0 6px rgb(42 165 245/.5);transform-origin:50% 0}
#contacto .ct-next li{position:relative}
#contacto .ct-next li::before{position:relative;z-index:1;display:grid;place-items:center;align-self:start;width:32px;height:22px;padding-top:0;border-radius:3px;background:var(--hb-void);color:var(--hb-hi);box-shadow:inset 0 0 0 1px rgb(127 208 255/.55),0 0 12px -2px rgb(42 165 245/.5)}
.hb-mo #contacto .ct-next:not(.hb-go) ol::before{transform:scaleY(0)}
.hb-mo #contacto .ct-next.hb-go ol::before{transition:transform 1.2s var(--hb-ease) .3s}
.hb-mo #contacto .ct-next.hb-go li::before{animation:hbIgn .9s ease-out backwards}
.hb-mo #contacto .ct-next.hb-go li:nth-child(2)::before{animation-delay:.55s}
.hb-mo #contacto .ct-next.hb-go li:nth-child(3)::before{animation-delay:1.1s}
footer.foot .hb-end{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-bottom:var(--s8);margin-bottom:var(--s8);border-bottom:1px solid rgb(42 165 245/.16)}
footer.foot .hb-fin{grid-column:1/7;min-width:0}
/* cola de la bobina: la misma regla milimetrada de la banda cierra la película */
footer.foot .hb-end{position:relative}
footer.foot .hb-end::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9px;pointer-events:none;background:repeating-linear-gradient(90deg,rgb(127 208 255/.45) 0 1px,transparent 1px 80px) 0 0/100% 9px no-repeat,repeating-linear-gradient(90deg,rgb(127 208 255/.22) 0 1px,transparent 1px 16px) 0 4px/100% 5px no-repeat}
footer.foot .hb-fin-t{display:block;font:800 clamp(64px,9vw,136px)/.9 var(--f-display);letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;color:var(--hb-hi);text-shadow:0 0 2px rgb(127 208 255/.6),0 0 30px rgb(42 165 245/.55)}
footer.foot .hb-fin-s{display:flex;align-items:center;gap:10px;margin-top:var(--s5);font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hb-mu)}
footer.foot .hb-reelic{flex:none;width:20px;height:20px;stroke:var(--hb-hi);stroke-width:1.2}
footer.foot .hb-cred{grid-column:8/13;list-style:none;display:flex;flex-direction:column;gap:12px;min-width:0;font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
footer.foot .hb-cred li{display:flex;align-items:baseline;gap:12px;min-width:0}
footer.foot .hb-cred .r{flex:none;color:var(--hb-mu)}
footer.foot .hb-cred i{flex:1 1 16px;min-width:16px;border-bottom:1px dotted rgb(127 208 255/.3);transform:translateY(-3px)}
footer.foot .hb-cred .n{color:var(--hb-tx);text-align:right;text-transform:none;letter-spacing:.02em;font-size:12px}
.hb-mo footer.foot .hb-end:not(.hb-go) .hb-fin-t{opacity:0;transform:scale(1.06);filter:blur(10px)}
.hb-mo footer.foot .hb-end.hb-go .hb-fin-t{transition:opacity 1.4s ease-out .2s,transform 2s var(--hb-ease) .2s,filter 1.4s ease-out .2s;animation:hbFlick 7s ease-in-out 2.4s infinite}
@keyframes hbFlick{0%,100%{opacity:1}46%{opacity:1}48%{opacity:.86}50%{opacity:.98}53%{opacity:.88}56%{opacity:1}}
.hb-mo footer.foot .hb-end:not(.hb-go) :is(.hb-cred li,.hb-fin-s){opacity:0;transform:translateY(30px)}
.hb-mo footer.foot .hb-end.hb-go .hb-cred li{transition:opacity .9s ease-out,transform 1.4s var(--hb-ease);transition-delay:calc(.5s + var(--k,0) * .22s)}
.hb-mo footer.foot .hb-end.hb-go .hb-fin-s{transition:opacity .9s ease-out 1.6s,transform 1.2s var(--hb-ease) 1.6s}
.hb-mo footer.foot .hb-end.hb-go .hb-reelic{animation:hbReel 3.2s cubic-bezier(.1,.6,.3,1) 1.4s backwards}
@keyframes hbReel{from{transform:rotate(-900deg)}}
@media(max-width:960px){footer.foot .hb-end{display:flex;flex-direction:column;align-items:stretch;gap:var(--s6)}
#lizardassets .hb-vit{margin-top:0}
}
@media(max-width:600px){#shopify .hb-tag{top:-22px;font-size:10px}
#shopify .hb-xp b{font-size:10px;left:6px;top:5px}
#shopify .hb-xp i{display:none}
#shopify .hb-slot{width:calc(min(280px,86%) + 20px)}
#shopify .hb-onair,#shopify .sp-store:only-child .hb-onair{left:var(--s4);top:4px;font-size:10px}
#shopify .sp-store-shot,#shopify .sp-store:only-child .sp-store-shot{padding-top:var(--s6)}
#antlook .hb-shield{width:var(--s8);gap:6px}
#antlook .hb-shield svg{width:48px}
#antlook .hb-ro b,#antlook .hb-ro code{display:none}
#antlook .hb-ro em{font-size:9px;padding:2px 4px}
#lizardassets .hb-vit-s{height:150px}
#lizardassets .hb-car{transform:scale(.82);transform-origin:50% 0}
#lizardassets .hb-vit-s .hb-emit{width:240px;margin-left:-120px}
#nosotros .hb-sign{grid-template-columns:minmax(0,1fr) auto}
#nosotros .hb-seal{width:44px;height:44px}
#contacto .hb-con{left:var(--s4);font-size:10px}
#contacto .hb-ant{right:var(--s4);width:38px;height:38px;top:-19px}
footer.foot .hb-cred li{flex-wrap:wrap;gap:4px 12px}
footer.foot .hb-cred i{display:none}
footer.foot .hb-cred .n{text-align:left;flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){:is(#shopify,#productos,#nosotros,#proceso,#contacto,footer.foot) :is(.hb-x,.hb-beam,.hb-emit)::before,:is(#shopify,#productos,#nosotros,#proceso,#contacto,footer.foot) :is(.hb-x,.hb-beam,.hb-emit)::after,:is(#shopify,#productos,#nosotros,#proceso,#contacto,footer.foot) :is(.hb-x,.hb-x *){animation:none!important}
#shopify .hb-xpl .hb-xst{display:none}
#proceso .track .tn,#proceso .hb-fc-b i,#proceso .qa{transition:none}
}

/* QA: el borde de error del formulario usa var(--red), que index.html redefine a blanco dentro de .form → rojo visible en oscuro */
#contacto .form{--red:#FF3B3B}

/* ===================== MÓVIL-3 · tableta y teléfono (nada de esto aplica a ≥1280 px con puntero fino) =====================
   Escala 4/8/12/16/24/32/48/64/96. Márgenes: 16 px teléfono, 24 px tableta (var(--gutter)). */
@media (max-width:1279px){
  /* el boceto de tienda hereda por choque de nombres el .auto de la tarjeta de automatización (relleno, fondo oscuro, radio):
     la cabecera "TU MARCA" quedaba oscura sobre oscuro. Aquí el boceto vuelve a su papel claro */
  #shopify .store-in.auto{padding:0;margin-top:0;border-radius:0;background:none;box-shadow:none}
}
@media (max-width:1279px),(pointer:coarse){
  /* enlaces legales en línea: zona táctil de 44 px sin mover la línea */
  #contacto .form-priv a,footer.foot .foot-bottom a{display:inline-block;padding:13px 0;margin:-13px 0}
}
@media (max-width:960px){
  /* --- SHOPIFY --- la etiqueta "Capas de la tienda 3/3" chocaba con "Boceto de ejemplo": fuera (decoración) */
  #shopify .hb-tag{display:none}
  /* tienda en vivo: los hijos ya no se centran (quedaban sangrados 100 px) */
  #shopify .sp-store:only-child{align-items:stretch}
  /* --- ESTUDIO / CONTACTO --- esquinas HUD dentro de la tarjeta, no en el margen */
  #nosotros .pact .hb-brk{inset:8px}
  #contacto .form .hb-brk{display:none}
  /* --- PROCESO --- el top:112px del sticky de escritorio desplazaba el visual 112 px sobre la etapa 01 */
  #proceso .proc-vis{top:auto}
  /* --- PIE --- */
  footer.foot .hb-end{padding-bottom:var(--s7);margin-bottom:var(--s7)}
}
@media (min-width:601px) and (max-width:960px){
  /* tienda en vivo: captura 7 + ficha 5 (no un móvil estirado) */
  #shopify .sp-store:only-child{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  #shopify .sp-store:only-child .sp-store-shot{grid-column:1/8;padding:var(--s6) var(--s8) var(--s5) var(--s5)}
  #shopify .sp-store:only-child .sp-store-info{grid-column:8/13}
  /* estudio: cifras en una fila de 4 y foto más baja */
  #nosotros .std-figs{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  #nosotros .std-photo{aspect-ratio:16/9}
  #nosotros .std-photo img{object-position:50% 25%}
  /* proceso: visual 5 (fijo al desplazar) + línea de tiempo 7, como en escritorio */
  #proceso .proc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  #proceso .proc-vis{grid-column:1/6;position:sticky;top:96px;margin:var(--s5) 0 0;max-width:none;aspect-ratio:3/4}
  #proceso .proc-grid .track{grid-column:6/13;min-width:0}
  #proceso .track li{grid-template-columns:40px minmax(0,1fr);column-gap:var(--s4)}
  #proceso .track li+li::after{left:56px}
  #proceso .gets{grid-column:2;grid-row:3;margin-top:var(--s2);align-self:stretch}
  #proceso .hb-fc{left:var(--s4);right:var(--s4);bottom:var(--s4)}
  /* preguntas: encabezado 5 (fijo) + lista 7 */
  #proceso .qa2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  #proceso .qa2-head{grid-column:1/6;position:sticky;top:96px;margin-bottom:0;min-width:0}
  #proceso .qa2-list{grid-column:6/13;min-width:0}
}
@media (min-width:768px) and (max-width:960px){
  /* productos: visual 7 + ficha 5 (antlook) y ficha 5 + visual 7 (LizardAssets), como en escritorio */
  #antlook .ant-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  #antlook .ant-stage{grid-column:1/8;grid-row:1;margin:var(--s3) 0 var(--s6);padding-right:var(--s8)}
  #antlook .ant-side{display:flex;flex-direction:column;align-items:flex-start;grid-column:8/13;grid-row:1;min-width:0}
  #antlook .ant-side .ant-feats{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s6)}
  #antlook .ant-side>.ant-cta{margin-top:var(--s6)}
  #antlook .hb-shield{display:none}
  #lizardassets{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  #lizardassets .la-copy{display:flex;flex-direction:column;align-items:flex-start;grid-column:1/6;grid-row:1;min-width:0}
  #lizardassets .la-stage{grid-column:6/13;grid-row:1;margin:0 0 var(--s6);padding-left:var(--s8)}
  #lizardassets .hb-car{transform:scale(.8);transform-origin:50% 0}
  #lizardassets .hb-vit-s{height:150px}
  #lizardassets .hb-vit-s .hb-emit{width:240px;margin-left:-120px}
  /* shopify: texto 5 + mesa 7 con sangrado a la derecha (la mesa apilada ocupaba más de una pantalla) */
  #shopify .sp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  #shopify .sp-copy{display:flex;grid-column:1/6;grid-row:1}
  #shopify .sp-copy>.sp-inc{margin-bottom:var(--s6)}
  #shopify .sp-stage{grid-column:6/13;grid-row:1;margin-top:0;padding:var(--s6) var(--bleed) var(--s6) var(--s5)}
  #shopify .sp-cta{margin-top:0}
  /* contacto: datos 5 + formulario 7 */
  #contacto .ct-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  #contacto .ct-copy{grid-column:1/6;grid-row:1}
  #contacto .form{grid-column:6/13;grid-row:1;margin-top:0;position:relative}
  #contacto .ct-copy .ficha{grid-template-columns:1fr}
}
@media (max-width:767px){
  /* contacto en teléfono: título → texto → formulario (la acción) → qué pasa después → datos */
  #contacto .ct-copy{display:contents}
  #contacto .ct-copy>.kicker{order:1;align-self:flex-start}
  #contacto .ct-copy>h2{order:2}
  #contacto .ct-copy>p{order:3}
  #contacto .form{order:4;margin-top:var(--s7)}
  #contacto .ct-next{order:5;margin-top:var(--s8)}
  #contacto .ct-copy>.ficha{order:6;margin-top:var(--s7)}
}
@media (max-width:600px){
  /* --- PRODUCTOS --- escudo compacto sin lectura (quedaba tapada por el teléfono) */
  #antlook .hb-shield{width:var(--s8)}
  #antlook .hb-shield svg{width:40px}
  #antlook .hb-ro{display:none}
  /* vitrina a todo el ancho del contenido y carrusel que cabe en 320 */
  #lizardassets .hb-vit{margin-left:calc(-1 * var(--s8))}
  #lizardassets .hb-car{transform:scale(.72)}
  #lizardassets .hb-vit-s{height:136px}
  /* --- PROCESO --- visual cuadrado: menos pantalla para la decoración */
  #proceso .proc-vis{aspect-ratio:1/1;max-width:none}
  #proceso .proc-vis .pst{scale:.72;translate:0 2cqw}
  #proceso .hb-fc{left:var(--s4);right:var(--s4);bottom:var(--s4)}
  #proceso .track li.hb-cur .tn{transform:none}
  /* --- PIE --- créditos en dos columnas (rol · nombre) */
  footer.foot .hb-cred{gap:var(--s3)}
  footer.foot .hb-cred li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--s3);align-items:baseline}
  footer.foot .hb-cred .n{flex:none;line-height:1.5}
  footer.foot .hb-fin-s{flex-wrap:wrap}
}
@media (max-width:379px){
  /* teléfonos estrechos: el teléfono de antlook sube hasta el borde y no deja hueco al escudo */
  #antlook .hb-shield{display:none}
}
@media (min-width:601px) and (max-width:960px) and (max-height:640px){
  /* tableta/teléfono en horizontal: lo fijo cabe en la pantalla (si no, se cortaba por abajo) */
  #proceso .proc-vis{top:72px;aspect-ratio:auto;height:calc(100vh - 104px);min-height:256px}
  #proceso .proc-vis .pst{scale:.66;translate:0 2cqw}
  #proceso .qa2-head{position:static}
}
@media (min-width:961px) and (max-width:1279px){
  /* pie en tableta horizontal: cuatro columnas de 3 (el email se salía por la derecha a 1024) */
  footer.foot .foot-grid>div:nth-child(1){grid-column:1/4}
  footer.foot .foot-grid>div:nth-child(2){grid-column:4/7}
  footer.foot .foot-grid>div:nth-child(3){grid-column:7/10}
  footer.foot .foot-grid>div:nth-child(4){grid-column:10/13}
}
@media (max-width:1279px){
  /* la lectura del escudo quedaba debajo del teléfono de antlook: solo el escudo */
  #antlook .hb-ro{display:none}
}