/* ===== Index: secciones propias ===== */

/* ---------- Hero ---------- */
.hero{position:relative;padding:40px 0 16px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#c8cfe8 1px,transparent 1.4px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000 20%,transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;min-height:min(640px,calc(100svh - 220px))}
.tagline{font-size:16px;font-weight:500;color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.tagline::before{content:"";width:28px;height:2px;background:var(--signal);border-radius:2px}
.hero h1{margin-bottom:26px;max-width:12ch}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w>span{display:inline-block;will-change:transform}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.js .hero [data-intro]{opacity:0}
.js .hero [data-split]{visibility:hidden}
.js .hero [data-split].ready{visibility:visible}
.intro-skip .hero [data-intro]{opacity:1!important;transform:none!important}
.intro-skip .hero [data-split]{visibility:visible!important}
.intro-skip .hero h1 .w>span{transform:none!important}

/* Pila isométrica: las cuatro etapas del método */
.iso-wrap{position:relative;height:500px}
.iso-glow{position:absolute;left:50%;top:58%;width:420px;height:200px;margin:-100px 0 0 -230px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,67,214,.22),transparent);filter:blur(8px)}
.iso-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.iso{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -155px;transform:rotateX(60deg) rotateZ(-45deg);transform-style:preserve-3d}
.slab{position:absolute;inset:0;border-radius:38px;display:grid;place-items:center;transition:box-shadow .4s}
.s1{transform:translateZ(-84px);background:#cfd6f6;box-shadow:inset 0 0 0 1.5px rgba(18,26,58,.08),-10px 10px 0 #b4bdea}
.s2{transform:translateZ(-26px);background:#a99cf6;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25),-10px 10px 0 #8a7be6}
.s3{transform:translateZ(32px);background:var(--indigo);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),-10px 10px 0 #2f29a8}
.s4{transform:translateZ(90px);background:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(46,197,242,.45),-10px 10px 0 #070b22}
.s4 img{width:68%;height:68%;transform:rotateZ(45deg);filter:drop-shadow(0 0 18px rgba(46,197,242,.45))}
.slab.lift{box-shadow:inset 0 0 0 2px var(--signal),-14px 14px 0 rgba(18,26,58,.25)}
.lab{position:absolute;left:calc(50% + 150px);display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;padding:7px 16px 7px 8px;border-radius:999px;box-shadow:0 0 0 1px var(--line),0 6px 16px -10px rgba(18,26,58,.4);white-space:nowrap;transition:transform .35s var(--ease),box-shadow .3s;cursor:default}
.lab em{font-style:normal;font-size:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--indigo)}
.lab::before{content:"";position:absolute;right:100%;top:50%;width:48px;height:2px;background:var(--line);transform-origin:right;transform:scaleX(var(--ln,1))}
.lab::after{content:"";position:absolute;right:calc(100% + 48px);top:50%;width:8px;height:8px;margin:-4px -4px 0 0;border-radius:50%;background:var(--ink)}
.lab:hover,.lab.on{transform:translateX(4px);box-shadow:0 0 0 1.5px var(--signal),0 8px 20px -10px rgba(18,26,58,.45)}
.lab:hover em,.lab.on em{background:var(--signal);color:var(--ink)}
.lab:hover::before,.lab.on::before{background:var(--signal)}
.l4{top:calc(50% - 118px)}.l3{top:calc(50% - 58px)}.l2{top:calc(50% + 2px)}.l1{top:calc(50% + 62px)}

/* Estadísticas */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:1px solid var(--line)}
.stat{padding:22px 24px 6px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat dd{font:600 clamp(36px,4.2vw,52px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat dt{font-size:15px;color:var(--muted)}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .iso-wrap{height:430px;margin-top:-10px}
}
@media(max-width:700px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:18px 16px 10px}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .hero{padding-top:28px}
  .iso-wrap{height:330px;margin:0 -24px}
  .iso{transform:rotateX(60deg) rotateZ(-45deg) scale(.66);margin-left:-190px}
  .lab{left:auto;right:16px;font-size:13.5px;padding:5px 12px 5px 6px}
  .lab em{width:19px;height:19px;font-size:11px}
  .lab::before,.lab::after{display:none}
  .l4{top:calc(50% - 82px)}.l3{top:calc(50% - 40px)}.l2{top:calc(50% + 2px)}.l1{top:calc(50% + 44px)}
}

/* ---------- Industrias: cinta tipográfica ---------- */
.ind{padding:56px 0 40px}
.ind-t{font-size:15px;font-weight:500;color:var(--muted);margin-bottom:18px}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;flex:none;list-style:none;animation:mq 38s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track li{display:flex;align-items:center;font:600 clamp(34px,5vw,64px)/1.1 var(--display);letter-spacing:-.035em;font-variation-settings:"wdth" 86;color:#737c9f;padding-right:.5em;transition:color .3s;white-space:nowrap}
.mq-track li::after{content:"";width:.28em;height:.32em;margin-left:.5em;background:var(--signal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mq-track li:hover{color:var(--ink)}
@keyframes mq{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.mq-track{animation:none;flex-wrap:wrap;padding:0 24px}.mq-track[aria-hidden]{display:none}}

/* ---------- Servicios ---------- */
.svc-head{max-width:760px}
.svc-head .lead{margin-top:16px}
.svc-body{display:grid;grid-template-columns:260px 1fr;gap:48px;margin-top:44px;align-items:start}
.svc-tabs{position:relative;display:flex;flex-direction:column;border-left:2px solid var(--tint-2)}
.svc-tab{position:relative;text-align:left;font:600 17px/1.3 var(--text);padding:14px 18px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:0 10px 10px 0;transition:color .2s,background-color .2s}
.svc-tab:hover{color:var(--ink);background:rgba(255,255,255,.5)}
.svc-tab[aria-selected=true]{color:var(--ink);background:var(--surface)}
.svc-ind{position:absolute;left:-2px;top:0;width:2px;height:0;background:var(--indigo);transition:transform .45s var(--ease),height .45s var(--ease)}
.pane{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.pane[hidden]{display:none}
.pane:focus-visible{outline-offset:8px}
.pane h3{font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:-.025em;margin-bottom:14px}
.pane p{color:var(--muted);font-size:17.5px;line-height:1.5}
.pane ul{list-style:none;margin:20px 0 28px}
.pane li{padding:7px 0 7px 26px;position:relative;font-size:16px;font-weight:500}
.pane li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:11px;background:var(--signal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pane.enter>div{animation:paneIn .55s var(--ease) both}
.pane.enter>div+div{animation-delay:.08s}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}}
.screen{padding:26px}
.screen .n{font:600 60px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.screen .l{font-size:15px;color:var(--muted);margin-top:8px}
.bars{display:flex;align-items:flex-end;gap:10px;height:160px;margin-top:26px}
.bars i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:var(--tint);transition:height .7s var(--ease),background-color .2s}
.bars i:nth-child(1){transition-delay:0s}.bars i:nth-child(2){transition-delay:.04s}.bars i:nth-child(3){transition-delay:.08s}.bars i:nth-child(4){transition-delay:.12s}.bars i:nth-child(5){transition-delay:.16s}.bars i:nth-child(6){transition-delay:.2s}.bars i:nth-child(7){transition-delay:.24s}
.bars i:last-child{background:linear-gradient(var(--signal),var(--indigo))}
.bars i:hover{background:var(--tint-2)}
.bars.zero i{height:0!important;transition:none}
@media(max-width:1000px){
  .svc-body{grid-template-columns:1fr;gap:28px}
  .svc-tabs{flex-direction:row;border-left:0;border-bottom:2px solid var(--tint-2);overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px}
  .svc-tabs::-webkit-scrollbar{display:none}
  .svc-tab{flex:none;border-radius:10px 10px 0 0;padding:12px 16px;font-size:16px}
  .svc-ind{display:none}
  .svc-tab[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--indigo)}
}
@media(max-width:820px){.pane{grid-template-columns:1fr;gap:28px}.pane .btn{white-space:normal;text-align:center}}

/* ---------- Plataforma ---------- */
.p8{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.p8 article{position:relative;padding:30px 26px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.p8 article::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(46,197,242,.16),transparent 70%)}
.p8 article:hover::before{opacity:1}
.p8 svg{width:34px;height:34px;margin-bottom:22px;fill:none;stroke:var(--indigo);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease),stroke .3s}
.p8 article:hover svg{transform:translateY(-3px);stroke:var(--ink)}
.p8 h3{font-size:20px;margin-bottom:8px}
.p8 p{font-size:15.5px;color:var(--muted);line-height:1.5}
@media(max-width:1000px){.p8{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.p8{grid-template-columns:1fr}.p8 article{padding:20px 18px 22px 64px}.p8 svg{position:absolute;left:18px;top:20px;width:30px;height:30px}}

/* ---------- Nosotros ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.about h2{margin-bottom:24px}
.about p{color:var(--muted);font-size:18px;line-height:1.55;margin-bottom:28px;max-width:54ch}
.statement{font:600 clamp(26px,3vw,36px)/1.15 var(--display)!important;letter-spacing:-.025em;color:var(--ink)!important;padding-left:24px;border-left:3px solid var(--signal);margin-bottom:36px!important}
.checks{list-style:none;display:grid;gap:2px;border-radius:var(--r-m);overflow:hidden}
.checks li{background:var(--surface);padding:20px 22px 20px 60px;position:relative;font-weight:500;transition:background-color .25s,padding-left .35s var(--ease)}
.checks li:hover{background:var(--tint);padding-left:66px}
.checks li::before{content:"";position:absolute;left:22px;top:50%;width:24px;height:26px;margin-top:-13px;background:var(--indigo);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.checks li::after{content:"";position:absolute;left:31px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.checks li:hover::before{background:var(--signal)}
.checks li:hover::after{border-color:var(--ink)}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:40px}}

/* ---------- Testimonios ---------- */
.tes-head{max-width:720px}
.tes-head .lead{margin-top:16px}
.tes{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:20px;margin-top:48px}
.tes figure{background:var(--surface);border-radius:var(--r-m);padding:28px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s,transform .4s var(--ease)}
.tes figure:hover{box-shadow:0 0 0 1px var(--line),0 20px 40px -28px rgba(18,26,58,.45);transform:translateY(-3px)}
.tes .feat{grid-row:span 2;background:var(--ink);color:#fff;box-shadow:none;padding:40px;position:relative;overflow:hidden}
.tes .feat::before{content:"“";position:absolute;right:28px;top:-30px;font:700 220px/1 var(--display);color:rgba(46,197,242,.18)}
.tes .feat blockquote{font:600 clamp(24px,2.6vw,32px)/1.25 var(--display);letter-spacing:-.02em;color:#fff}
.tes .feat .stars{color:var(--signal)}
.tes .feat small{color:#aab3d9}
.tes blockquote{font-size:17.5px;line-height:1.5;margin:14px 0 26px}
.stars{letter-spacing:3px;font-size:15px;color:var(--indigo)}
.who{display:flex;gap:12px;align-items:center;margin-top:auto}
.av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--tint);color:var(--indigo);display:grid;place-items:center;font:700 14px var(--text)}
.feat .av{background:var(--signal);color:var(--ink)}
.who b{display:block;font-weight:600;font-size:15.5px}
.who small{font-size:14px;color:var(--muted)}
@media(max-width:900px){.tes{grid-template-columns:1fr}.tes .feat{grid-row:auto;padding:30px}}

/* ---------- Contacto ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.cgrid h2{margin-bottom:16px}
.why{margin:32px 0 28px;display:grid;gap:14px}
.why dt{font-weight:600}
.why dd{font-size:15.5px;color:var(--muted)}
.info{list-style:none;display:grid;gap:8px}
.info a,.info .i-static{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;margin-left:-10px;border-radius:12px;font-weight:500;word-break:break-word;transition:background-color .2s}
.info a:hover{background:var(--surface)}
.info svg{width:40px;height:40px;flex:none;padding:9px;border-radius:10px;background:var(--surface);fill:none;stroke:var(--indigo);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.info small{display:block;font-size:13.5px;color:var(--muted);font-weight:400}
.formcard{background:var(--surface);border-radius:var(--r-l);padding:32px;box-shadow:0 30px 60px -40px rgba(18,26,58,.45)}
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.req{font-weight:400;color:var(--muted)}
textarea{min-height:140px;resize:vertical}
.err{font-size:14px;color:var(--danger);margin-top:6px;min-height:0}
.err:empty{display:none}
.fld.bad input,.fld.bad textarea{box-shadow:inset 0 0 0 2px var(--danger);background:#fff7f8}
.fld.ok input,.fld.ok textarea{box-shadow:inset 0 0 0 1.5px #6cc59a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#formMessage{display:none;padding:14px 16px;border-radius:12px;font-size:15px;font-weight:500}
#formMessage.ok{display:block;background:#e8f8f0;color:#0f5132;box-shadow:inset 0 0 0 1.5px #6cc59a}
#formMessage.bad{display:block;background:#fdecee;color:#7d1426;box-shadow:inset 0 0 0 1.5px #f0a3ad}
form .btn{justify-self:start;min-width:200px}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:40px}}
@media(max-width:560px){.row2{grid-template-columns:1fr}.formcard{padding:22px;margin:0 -6px}form .btn{justify-self:stretch}}