/* Servicios: laboratorio web + sistemas interactivos */
.services{padding-bottom:clamp(90px,14vh,160px)}
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%)}
.spot:hover::before{opacity:1}

.web{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(32px,5vw,84px);align-items:center}
.web-copy h3{font-size:clamp(30px,3.5vw,54px);line-height:1.1;letter-spacing:-.012em;margin:0 0 20px}
.web-copy>p:not(.eyebrow){color:var(--fg2);margin:0 0 30px;max-width:44ch}
.web-steps{display:grid}
.web-step{position:relative;display:block;width:100%;background:none;border:0;border-top:1px solid var(--rule);padding:16px 0;color:inherit;text-align:left;cursor:pointer}
.web-step b{display:flex;gap:16px;align-items:baseline;font:300 clamp(18px,1.6vw,22px)/1.25 var(--disp);transition:transform .7s var(--out)}
.web-step b span{font-size:12px;letter-spacing:.1em;color:var(--accent)}
.web-step:hover b,.web-step.on b{transform:translateX(8px)}
.web-step small{font-family:var(--body);display:grid;grid-template-rows:0fr;color:var(--fg2);font-size:15px;line-height:1.5;transition:grid-template-rows .7s var(--out)}
.web-step small span{overflow:hidden;min-height:0;padding-left:8px}
.web-step.on small{grid-template-rows:1fr}
.web-step small span::before{content:"";display:block;height:8px}
.web-step i{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.web-step.on i{transform:scaleX(1)}
.web.play .web-step.on i{animation:stepRun 4s linear both}
@keyframes stepRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.web-stage{position:relative;height:clamp(460px,62vh,600px);display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:8px;overflow:hidden;perspective:1400px;background:var(--bg2);transition:background-color .9s var(--io)}
.web-stage::after{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:44px 44px;opacity:.5;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%)}
.mock{--ink2:#07201D;--mline:rgba(7,32,29,.12);width:88%;height:84%;background:#fff;color:var(--ink2);border-radius:8px;overflow:hidden;box-shadow:0 34px 80px -28px rgba(0,0,0,.55),0 0 0 1px rgba(7,32,29,.1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:width 1.1s var(--io),height 1.1s var(--io),transform .6s var(--out);font-family:var(--body);will-change:transform}
.mock-bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;background:#EEF2F0;font-size:10px;color:#607a75}
.mock-bar i{width:7px;height:7px;border-radius:50%;background:#cfd9d6}
.mock-bar span{margin-left:10px}
.mock-page{height:calc(100% - 28px);padding:0 clamp(14px,1.8vw,26px);overflow:hidden}
.m-nav{display:flex;align-items:center;gap:16px;height:44px;font-size:11px}
.m-nav b{margin-right:auto;font:400 13px var(--disp)}
.m-nav em{font-style:normal;padding:4px 10px;background:var(--ink2);color:#fff;border-radius:2px}
.m-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:center;margin-bottom:14px;transition:all .9s var(--io)}
.m-hero h4{font:200 clamp(20px,2.3vw,34px)/1.08 var(--disp);margin:0 0 9px;letter-spacing:-.01em}
.m-hero p{font-size:11.5px;line-height:1.45;margin:0 0 11px;color:#4A6661}
.m-hero a{display:inline-block;font-size:11px;padding:6px 12px;background:#0B8466;color:#fff;border-radius:2px}
.m-img{overflow:hidden;background:var(--mline);border-radius:3px}
.m-img img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .9s ease,transform 1.8s var(--out)}
.m-hero .m-img{height:clamp(120px,17vh,180px)}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-cards .m-img{height:clamp(60px,9vh,96px);margin-bottom:6px}
.m-cards strong{display:block;font:400 11.5px var(--disp)}
.m-cards small{font-size:10px;color:#607a75}
/* 0 · Estructura: la página como plano */
.mock :is(h4,p,a,strong,small,b,span.t,em){transition:color .7s ease,background-color .7s ease}
.mock[data-stage="0"] .mock-page{background-image:linear-gradient(90deg,rgba(11,132,102,.14) 1px,transparent 1px);background-size:8.33% 100%}
.mock[data-stage="0"] .mock-page :is(h4,p,a,strong,small,b,span.t,em){color:transparent;background:var(--mline);border-radius:2px}
.mock[data-stage="0"] .m-img{outline:1px dashed rgba(11,132,102,.65);outline-offset:-1px;background:transparent}
.mock[data-stage="0"] .m-img img{opacity:0;transform:scale(1.14)}
/* 2 · Adaptable: se transforma en móvil */
.mock[data-stage="2"]{width:min(270px,70%);height:94%}
.mock[data-stage="2"] .m-nav .t{display:none}
.mock[data-stage="2"] .m-hero{grid-template-columns:1fr}
.mock[data-stage="2"] .m-hero .m-img{order:-1;height:128px}
.mock[data-stage="2"] .m-cards{grid-template-columns:1fr 1fr}
.mock[data-stage="2"] .m-hero h4{font-size:23px}
/* 3 · Encontrable: aparece en la búsqueda */
.serp{position:absolute;left:50%;bottom:7%;width:min(440px,82%);padding:16px 18px;background:#fff;color:#07201D;border-radius:8px;box-shadow:0 26px 60px -18px rgba(0,0,0,.55);opacity:0;transform:translate(-50%,28px) scale(.97);transition:opacity .6s,transform 1s var(--out);pointer-events:none}
.serp q{display:block;quotes:none;font-size:12px;padding:7px 12px;background:#EEF2F0;border-radius:20px;margin-bottom:12px;color:#4A6661}
.serp small{font-size:11px;color:#4A6661}
.serp strong{display:block;font:400 17px/1.3 var(--disp);color:#0B8466;margin:2px 0}
.serp p{margin:0;font-size:12px;line-height:1.4;color:#4A6661}
.mock[data-stage="3"] + .serp{opacity:1;transform:translate(-50%,0)}
.mock[data-stage="3"]{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.93) translateY(-5%)}

/* Sistemas */
.bento-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin:clamp(80px,13vh,140px) 0 clamp(26px,4vh,44px)}
.bento-head h3{font-size:clamp(30px,4vw,62px);line-height:1.08;letter-spacing:-.012em;margin:0;max-width:17em}
.bento-head p{margin:0;color:var(--fg2);max-width:34ch}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.b{position:relative;grid-column:span var(--c,3);min-height:300px;padding:clamp(20px,2.2vw,32px);border:1px solid var(--rule);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg2) 55%,var(--bg));transition:border-color .6s,background-color .9s var(--io)}
.b:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.b h4{font:300 clamp(21px,2vw,30px)/1.15 var(--disp);margin:0 0 9px;letter-spacing:-.005em}
.b>p,.b-txt p{margin:0;color:var(--fg2);font-size:15.5px;line-height:1.5;max-width:42ch}
.b-ui{margin-top:auto;padding-top:22px}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:4px;margin-bottom:16px;flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--fg2);font:400 12.5px var(--body);padding:6px 11px;border-radius:2px;cursor:pointer;transition:background-color .4s,color .4s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
.bars{display:flex;align-items:end;gap:clamp(5px,1vw,12px);height:120px}
.bars i{flex:1;height:100%;background:linear-gradient(0deg,var(--accent),color-mix(in srgb,var(--accent) 22%,transparent));transform:scaleY(var(--h,.1));transform-origin:50% 100%;border-radius:2px 2px 0 0;transition:transform 1.1s var(--out);transition-delay:calc(var(--n)*45ms)}
.b-note{display:block;margin-top:10px;font-size:12px;color:var(--fg2)}
.buy{display:flex;align-items:center;gap:14px}
.buy img{width:76px;height:76px;object-fit:cover;border-radius:4px}
.buy div{flex:1;min-width:0}
.buy strong{display:block;font:400 15px var(--disp)}
.buy small{color:var(--fg2);font-size:12.5px}
.buy button{position:relative;border:1px solid var(--accent);background:none;color:var(--fg);font:400 13px var(--body);padding:9px 14px;border-radius:3px;cursor:pointer;transition:background-color .4s,color .4s}
.buy button:hover{background:var(--accent);color:var(--bg)}
#cartN{display:inline-block}
#cartN.bump{animation:bump .6s var(--out)}
@keyframes bump{40%{transform:translateY(-5px) scale(1.25);color:var(--accent)}}
.docs{list-style:none;margin:0;padding:0;font-size:14.5px}
.docs li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule);transition:opacity .6s,transform .7s var(--out)}
.docs li.off{opacity:.34;transform:translateX(6px)}
.docs li::after{content:"Con acceso";font-size:12px;color:var(--accent)}
.docs li.off::after{content:"Restringido";color:var(--fg2)}
.chips{--dur:46s;overflow:hidden;margin:auto calc(clamp(20px,2.2vw,32px)*-1) 0;padding-top:24px;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.chips ul{display:flex;width:max-content;gap:8px;list-style:none;margin:0 0 8px;padding:0;animation:chipMove var(--dur) linear infinite}
.chips ul:nth-child(2){animation-direction:reverse}
.chips:hover ul{animation-play-state:paused}
.chips li{padding:9px 15px;border:1px solid var(--rule);border-radius:30px;font-size:14px;white-space:nowrap;transition:background-color .4s,color .4s,border-color .4s}
.chips li:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
@keyframes chipMove{to{transform:translateX(-50%)}}
.b.pic{justify-content:flex-end;min-height:330px;background:var(--deeper);color:var(--plat);--accent:var(--sig);--fg2:#C2D2CE;--rule:rgba(237,242,240,.26);--fg:var(--plat)}
.b.pic>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.1);transition:opacity .9s,transform 2s var(--out)}
.b.pic:hover>img{opacity:.78;transform:scale(1)}
.b.pic::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,24,21,.94) 22%,rgba(5,24,21,.12))}
.spark{width:100%;height:58px;margin-bottom:12px;overflow:visible}
.spark path{fill:none;stroke:var(--sig);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--io)}
.in .spark path,.b:hover .spark path{stroke-dashoffset:0}
.dom{display:flex;align-items:baseline;margin-bottom:14px;border-bottom:1px solid var(--rule);font:300 clamp(17px,1.5vw,21px) var(--disp)}
.dom input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;color:inherit;font:inherit;padding:7px 0;text-align:right}
.dom input::placeholder{color:rgba(237,242,240,.55)}
.dom:focus-within{border-color:var(--sig)}
.dom span{color:var(--sig)}
.pulse{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:13px}
.pulse i{width:8px;height:8px;border-radius:50%;background:var(--sig);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,224,180,.55)}80%,100%{box-shadow:0 0 0 12px rgba(79,224,180,0)}}
@media(max-width:1000px){.b{grid-column:span 12}.b.pic{grid-column:span 6}.web{grid-template-columns:1fr}.web-stage{height:480px}}
@media(max-width:560px){.b.pic{grid-column:span 12;min-height:280px}.m-cards{grid-template-columns:1fr 1fr}.m-cards article:nth-child(3){display:none}.mock{width:92%}.m-hero{gap:10px}}
@media(prefers-reduced-motion:reduce){.chips ul,.pulse i,.web.play .web-step.on i{animation:none}.b.pic>img{transform:none}.spark path{stroke-dashoffset:0}}

.js .b.r{transition:opacity 1s ease var(--d,0s),transform 1.2s var(--out) var(--d,0s),translate .7s var(--out),border-color .6s,background-color .9s var(--io)}
.b:hover{translate:0 -5px}
.buy{flex-wrap:wrap}
.buy img{width:100%;height:clamp(130px,16vw,190px);margin-bottom:4px;transition:transform 1.6s var(--out)}
.b:hover .buy img{transform:scale(1.03)}

/* Video de presentación */
.reel{padding:0 0 clamp(70px,12vh,130px);cursor:pointer}
.reel figure{position:relative;margin:0;aspect-ratio:16/9;max-height:100vh;width:100%;overflow:hidden;background:var(--deeper) url(assets/lima-system-poster.webp) center/cover;clip-path:inset(var(--i,0%) var(--ix,0%) round 10px);will-change:clip-path}
.reel video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1));will-change:transform}
.reel-btn{position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(18px,3vw,44px);width:clamp(52px,5vw,72px);aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid rgba(237,242,240,.5);border-radius:50%;background:rgba(5,24,21,.45);color:var(--plat);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .7s var(--out),background-color .4s,border-color .4s}
.reel:hover .reel-btn,.reel-btn:focus-visible{transform:scale(1.1);border-color:var(--sig)}
.reel-btn i{width:16px;height:16px;background:currentColor;clip-path:polygon(18% 0,100% 50%,18% 100%);transition:clip-path .5s var(--out)}
.reel.playing .reel-btn i{clip-path:polygon(14% 0,40% 0,40% 100%,60% 100%,60% 0,86% 0,86% 100%,14% 100%)}
.reel-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(237,242,240,.2)}
.reel-bar i{display:block;height:100%;background:var(--sig);transform:scaleX(0);transform-origin:0 50%}
@media(prefers-reduced-motion:reduce){.reel figure{clip-path:none}.reel video{transform:none}}
.reel.fallo video,.reel.fallo .reel-btn,.reel.fallo .reel-bar{display:none}
.reel.fallo{cursor:default}

/* Laboratorio web: la página cambia en cascada, no de golpe */
.web-step i{transition:transform .9s var(--out)}
.web-step small span{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .8s var(--out)}
.web-step.on small span{opacity:1;transform:none;transition-delay:.22s}
.mock{--cae:cubic-bezier(.16,1,.3,1)}
.mock :is(h4,p,a,strong,small,b,span.t,em){transition:color .8s ease var(--dl,0s),background-color .8s ease var(--dl,0s)}
.m-nav b{--dl:.05s}.m-nav .t{--dl:.12s}.m-nav em{--dl:.18s}
.m-hero h4{--dl:.22s}.m-hero p{--dl:.32s}.m-hero a{--dl:.42s}
.m-hero .m-img{--dl:.3s}
.m-cards article:nth-child(1){--dl:.5s}.m-cards article:nth-child(2){--dl:.6s}.m-cards article:nth-child(3){--dl:.7s}
.m-img{transition:background-color .8s ease var(--dl,0s),outline-color .6s ease var(--dl,0s)}
.m-img img{clip-path:inset(0);transition:opacity .6s ease var(--dl,0s),clip-path 1.2s var(--io) var(--dl,0s),transform 1.9s var(--cae) var(--dl,0s)}
.mock[data-stage="0"] .m-img img{clip-path:inset(0 100% 0 0)}
.mock[data-stage="3"] + .serp{transition:opacity .7s ease .45s,transform 1.1s var(--out) .45s}
@media(prefers-reduced-motion:reduce){.mock *,.web-step small span{transition-delay:0s!important}}

/* Catálogo */
.cat{padding:clamp(90px,14vh,160px) 0;overflow:hidden}
.cat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:center}
.cat-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cat-btn{padding:14px 24px;border:1px solid var(--accent);border-radius:30px;color:var(--fg);font:300 15px var(--disp);text-decoration:none;transition:background-color .4s,color .4s}
.cat-btn:hover,.cat-btn.main{background:var(--accent);color:var(--bg)}
.cat-btn.main:hover{background:none;color:var(--fg)}
.cat-fan{position:relative;display:block;height:clamp(380px,46vw,620px);perspective:1500px}
.cat-fan img{position:absolute;left:50%;top:50%;height:88%;aspect-ratio:210/297;width:auto;object-fit:cover;border-radius:4px;box-shadow:0 34px 70px -24px rgba(0,0,0,.6);translate:-50% -50%;transition:transform 1.2s var(--out)}
.cat-fan img:nth-child(1){transform:translateX(16%) rotate(6deg)}
.cat-fan img:nth-child(2){transform:translateX(8%) rotate(3deg)}
.cat-fan:hover img:nth-child(1),.cat-fan:focus-visible img:nth-child(1){transform:translateX(48%) rotate(9deg);transition-delay:.06s}
.cat-fan:hover img:nth-child(2),.cat-fan:focus-visible img:nth-child(2){transform:translateX(24%) rotate(4.5deg);transition-delay:.03s}
.cat-fan:hover img:nth-child(3),.cat-fan:focus-visible img:nth-child(3){transform:translateX(-12%) rotate(-3deg)}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr}.cat-fan{height:min(112vw,520px)}}
.cat-qr{display:flex;align-items:center;gap:16px;margin-top:30px;color:var(--fg2);font-size:15px;line-height:1.4}
.cat-qr img{width:92px;height:92px;border-radius:6px}
@media(max-width:900px){.cat-qr{display:none}}