/* =========================================================
   ODENZE · capa PRO
   Partículas, parallax, foco de luz, redes sociales y
   navegación de servicios. Se carga en todas las páginas.
   ========================================================= */

/* ---------- Partículas de fondo ---------- */
.pz-host{position:relative; isolation:isolate;}
.pz-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.9;}

/* ---------- Parallax ---------- */
[data-px]{will-change:transform;}

/* ---------- Servicios: foco de luz que sigue al cursor ---------- */
.svc-item{position:relative; --mx:50%; --my:50%;}
.svc-item::before{
  content:""; position:absolute; inset:0 -4vw; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(520px circle at var(--mx) var(--my), rgba(25,224,166,.09), transparent 60%);
  transition:opacity .5s ease;
}
.svc-item:hover::before{opacity:1;}

/* número gigante con contorno detrás de cada servicio */
.svc-item .pz-num{
  position:absolute; top:clamp(10px,2vw,28px); right:0; z-index:-1; pointer-events:none;
  font-family:var(--disp); font-weight:700; line-height:.8; letter-spacing:-.04em;
  font-size:clamp(5.5rem,14vw,12rem); color:transparent;
  -webkit-text-stroke:1px rgba(25,224,166,.16);
  transition:-webkit-text-stroke-color .6s ease;
}
.svc-item:nth-child(even) .pz-num{right:auto; left:0;}
.svc-item:hover .pz-num{-webkit-text-stroke-color:rgba(25,224,166,.34);}

/* viñetas de la lista con entrada escalonada */
.svc-list li{opacity:0; transform:translateX(-10px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1);}
.svc-item.pz-in .svc-list li{opacity:1; transform:none;}
.svc-item.pz-in .svc-list li:nth-child(2){transition-delay:.12s;}
.svc-item.pz-in .svc-list li:nth-child(3){transition-delay:.24s;}
.svc-item.pz-in .svc-list li:nth-child(4){transition-delay:.36s;}
.svc-list li::before{box-shadow:0 0 0 0 rgba(25,224,166,.5);}
.svc-item.pz-in .svc-list li::before{animation:pzPing 2.6s ease-out 1;}
@keyframes pzPing{0%{box-shadow:0 0 0 0 rgba(25,224,166,.55);}100%{box-shadow:0 0 0 10px rgba(25,224,166,0);}}

/* acciones: cotizar + agendar */
.pz-acts{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;}
.pz-alt{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--ink);
  border-bottom:1px solid rgba(25,224,166,.4); padding-bottom:3px;
  transition:color .3s, border-color .3s, gap .3s;
}
.pz-alt:hover{color:var(--emerald); border-color:var(--emerald); gap:12px;}

/* ---------- Barra de servicios fija (servicios.html) ---------- */
.pz-snav{
  position:sticky; top:84px; z-index:30; margin:0 auto; width:max-content; max-width:calc(100% - 32px);
  display:flex; gap:4px; padding:6px; border-radius:99px; overflow-x:auto; scrollbar-width:none;
  background:rgba(3,18,12,.72); border:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.pz-snav::-webkit-scrollbar{display:none;}
.pz-snav a{
  flex:none; padding:9px 16px; border-radius:99px; font-size:.84rem; font-weight:500; color:var(--ink-dim);
  transition:background .3s, color .3s;
}
.pz-snav a:hover{color:var(--ink);}
.pz-snav a.on{background:var(--emerald); color:#03120C; font-weight:600;}

/* ---------- Redes sociales ---------- */
.pz-social{display:flex; gap:10px; flex-wrap:wrap;}
.pz-social a{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px 9px 11px; border-radius:99px;
  border:1px solid var(--line-soft); color:var(--ink); font-size:.86rem; font-weight:500;
  background:rgba(255,255,255,.02);
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.pz-social a:hover{background:var(--emerald); color:#03120C; border-color:transparent; transform:translateY(-2px);}
.pz-social svg{width:18px; height:18px; fill:currentColor; flex:none;}
.pz-social-foot{margin-top:14px;}
.np-right .pz-social{margin-top:14px;}

@media(max-width:860px){
  .svc-item .pz-num{font-size:5rem; top:6px;}
  .pz-snav{top:74px;}
}
@media(prefers-reduced-motion:reduce){
  .svc-list li{opacity:1; transform:none; transition:none;}
  [data-px]{transform:none!important;}
}
.pz-snav{transition:opacity .35s ease, transform .35s ease;}
.pz-snav.pz-off{opacity:0; transform:translateY(-12px); pointer-events:none;}

/* ---------- Rendimiento ----------
   Las auras de fondo ya son degradados suaves: sin blur ni mezcla,
   se pintan una vez y solo se mueven con transform (GPU). */
#aura .b{filter:none!important; mix-blend-mode:normal!important; opacity:.16!important; will-change:transform; animation-duration:48s!important;}
header.site{-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.pz-host > canvas.pz-canvas{position:absolute!important; inset:0!important; z-index:-1!important;}

/* ---------- Portada: muro de trabajos en movimiento ---------- */
.hero-wall{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 18%,rgba(0,0,0,.55) 42%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 18%,rgba(0,0,0,.55) 42%,#000 70%);
}
.hw-tilt{
  position:absolute; top:-30%; bottom:-30%; left:34%; right:-12%;
  display:flex; gap:clamp(12px,1.4vw,20px); transform:rotate(-9deg); opacity:.34;
}
.hw-col{flex:1; display:flex; flex-direction:column; gap:clamp(12px,1.4vw,20px); animation:hwUp 70s linear infinite; will-change:transform;}
.hw-col:nth-child(2){animation-name:hwDown; animation-duration:84s;}
.hw-col:nth-child(3){animation-duration:62s;}
.hw-col:nth-child(4){animation-name:hwDown; animation-duration:76s;}
.hw-col img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px; border:1px solid rgba(234,244,239,.10); filter:saturate(.85) contrast(1.05); flex:none;}
@keyframes hwUp{from{transform:translateY(0);}to{transform:translateY(calc(-50% - 10px));}}
@keyframes hwDown{from{transform:translateY(calc(-50% - 10px));}to{transform:translateY(0);}}
/* velo de color de marca encima del muro */
.hero-wall::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(3,18,12,.2),rgba(25,224,166,.10) 60%,rgba(3,18,12,.55));}
@media(max-width:860px){
  .hero-wall{-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);}
  .hw-tilt{left:-10%; right:-10%; opacity:.18;}
  .hw-col:nth-child(4){display:none;}
}
@media(prefers-reduced-motion:reduce){ .hw-col{animation:none;} }

/* =========================================================
   Servicios sin iconos: foto interactiva
   ========================================================= */
.pz-shot{background:#04150F!important; perspective:1100px; overflow:visible!important; border:0!important;}
.pz-in3d{position:absolute; inset:0; border-radius:inherit; overflow:hidden; border:1px solid var(--line-soft);
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .6s, border-color .5s;}
.pz-in3d img{position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.8,.3,1), filter .6s; filter:saturate(.92) brightness(.86);}
.svc-item:hover .pz-in3d{border-color:rgba(25,224,166,.4); box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 60px -30px rgba(25,224,166,.55);}
.svc-item:hover .pz-in3d img{transform:scale(1.06); filter:saturate(1.05) brightness(.95);}
.pz-shade{position:absolute; inset:0; background:linear-gradient(200deg,transparent 35%,rgba(3,18,12,.82)), radial-gradient(60% 50% at var(--gx,70%) var(--gy,20%),rgba(25,224,166,.18),transparent 70%);}
.pz-chip{
  position:absolute; z-index:2; padding:9px 14px; border-radius:99px; font-size:.82rem; font-weight:600; color:var(--ink);
  background:rgba(4,21,15,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(234,244,239,.16); box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transform:translate3d(var(--cx,0),var(--cy,0),0); transition:transform .5s cubic-bezier(.2,.8,.3,1), opacity .6s, background .3s;
  opacity:0;
}
.pz-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--emerald); box-shadow:0 0 10px var(--emerald);}
.pc1{top:9%; left:7%;} .pc2{top:40%; right:7%;} .pc3{bottom:24%; left:10%;}
.svc-item.pz-in .pz-chip{opacity:1; animation:pzFloat 6s ease-in-out infinite;}
.svc-item.pz-in .pc2{animation-delay:-2s;} .svc-item.pz-in .pc3{animation-delay:-4s;}
.svc-item:hover .pz-chip{background:rgba(4,21,15,.82);}
@keyframes pzFloat{50%{translate:0 -6px;}}
.pz-label{position:absolute; left:22px; bottom:20px; z-index:2; font-family:var(--disp); font-weight:600; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; gap:10px;}
.pz-label::before{content:""; width:22px; height:2px; background:var(--emerald); transition:width .5s;}
.svc-item:hover .pz-label::before{width:40px;}
.pz-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px;}
.pz-tags span{padding:7px 13px; border-radius:99px; font-size:.84rem; color:var(--ink-soft); border:1px solid var(--line-soft); background:rgba(255,255,255,.02); transition:border-color .3s, color .3s;}
.svc-item:hover .pz-tags span{border-color:rgba(25,224,166,.28); color:var(--ink);}
.svc-body p{max-width:44ch!important;}

/* ---------- Portada: filas de servicios con foto que sigue al cursor ---------- */
.serv-thumb{display:none; width:64px; height:64px; border-radius:16px; overflow:hidden; flex:none; border:1px solid var(--line-soft);}
.serv-thumb img{width:100%; height:100%; object-fit:cover;}
.pz-float{
  position:fixed; left:0; top:0; z-index:40; width:300px; aspect-ratio:4/3; border-radius:20px; overflow:hidden; pointer-events:none;
  border:1px solid rgba(25,224,166,.35); box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.85) rotate(-4deg); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.pz-float.on{opacity:1; transform:translate3d(-50%,-50%,0) scale(1) rotate(-2deg);}
.pz-float img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s;}
.pz-float img.on{opacity:1;}
@media(hover:none){ .serv-thumb{display:block;} .pz-float{display:none;} }

/* ---------- CTA con imagen de fondo ---------- */
.pz-cta{position:relative; overflow:hidden; isolation:isolate;}
.cta-bg{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.cta-bg img{position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; opacity:.24; filter:grayscale(.25) contrast(1.05);}
.cta-bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 75% at 50% 50%,rgba(3,18,12,.55),rgba(3,18,12,.92) 75%), linear-gradient(180deg,#03120C 0,transparent 22%,transparent 78%,#03120C);}

/* ---------- Palabras clave ---------- */
main p strong.hl{color:var(--ink); font-weight:600; background:linear-gradient(transparent 64%,rgba(25,224,166,.20) 0); padding:0 .06em; border-radius:2px;}

/* =========================================================
   Pantalla de carga corporativa
   ========================================================= */
.pz-pre{
  position:fixed; inset:0; z-index:10000; background:#03120C; color:var(--ink);
  display:grid; place-items:center; transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.pz-pre.out{transform:translateY(-100%);}
.pz-pre.out .pp-center, .pz-pre.out .pp-top, .pz-pre.out .pp-foot{opacity:0; transition:opacity .3s;}
.pp-grid{position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:linear-gradient(rgba(234,244,239,.04) 1px,transparent 1px) 0 0/100% 25%, linear-gradient(90deg,rgba(234,244,239,.04) 1px,transparent 1px) 0 0/16.666% 100%;}
.pp-top,.pp-foot{position:absolute; left:clamp(20px,4vw,48px); right:clamp(20px,4vw,48px); display:flex; justify-content:space-between;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim);}
.pp-top{top:clamp(20px,4vh,36px);} .pp-foot{bottom:clamp(20px,4vh,36px); align-items:flex-end;}
.pp-count{font-family:var(--disp); font-size:clamp(2.6rem,6vw,4.4rem); letter-spacing:-.02em; color:var(--ink); line-height:.8; font-variant-numeric:tabular-nums;}
.pp-center{display:flex; flex-direction:column; align-items:center; gap:22px;}
.pp-logo{width:clamp(170px,22vw,260px); clip-path:inset(0 calc((1 - min(1, var(--p,0) * 1.5)) * 100%) 0 0);}
.pp-logo img{width:100%; height:auto; display:block;}
@keyframes ppWipe{to{clip-path:inset(0 0 0 0);}}
.pp-line{width:clamp(170px,22vw,260px); height:1px; background:rgba(234,244,239,.12); overflow:hidden;}
.pp-line i{display:block; height:100%; width:100%; background:var(--emerald); transform:scaleX(var(--p,0)); transform-origin:left;}
@keyframes ppLine{to{transform:scaleX(1);}}
.pp-tag{display:flex; gap:14px; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim);}
.pp-tag span{opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease;}
.pz-pre.tg .pp-tag span{opacity:1; transform:none;}
.pp-tag span:nth-child(2){transition-delay:.12s;} .pp-tag span:nth-child(3){transition-delay:.24s;} .pp-tag span:nth-child(4){transition-delay:.36s;}
.pp-tag span + span::before{content:"·"; margin-right:14px; color:var(--emerald);}
@keyframes ppIn{to{opacity:1; transform:none;}}
@media(max-width:600px){ .pp-top span:last-child{display:none;} .pp-tag{gap:8px; letter-spacing:.18em;} .pp-tag span + span::before{margin-right:8px;} }

/* =========================================================
   Muro de clientes
   ========================================================= */
.pz-clients{position:relative; padding:clamp(60px,7vw,100px) 0; overflow:hidden; border-top:1px solid var(--line-soft);}
.cl-stage{position:relative; aspect-ratio:1200/620; max-height:640px; margin:0 auto;}
.cl-box{
  position:absolute; margin:0; display:grid; place-items:center; border:1px solid rgba(234,244,239,.14);
  background:rgba(255,255,255,.015); transform:translate3d(var(--mx,0),var(--my,0),0);
  animation:clFloat calc(9s + var(--d) * 4s) ease-in-out infinite; animation-delay:calc(var(--d) * -5s);
  transition:border-color .4s, background .4s, box-shadow .5s;
}
.cl-box img{max-width:72%; max-height:62%; object-fit:contain; opacity:.62; transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.3,1);}
.cl-box:hover{border-color:rgba(234,244,239,.55); background:rgba(255,255,255,.04); box-shadow:0 0 40px -16px rgba(25,224,166,.55);}
.cl-box:hover img{opacity:1; transform:scale(1.06);}
.cl-ghost{opacity:.35; pointer-events:none;}
@keyframes clFloat{0%,100%{translate:0 0;} 50%{translate:0 -12px;}}
.cl-copy{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,40%); text-align:center; z-index:2;}
.cl-kick{display:block; font-size:.86rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--emerald);}
.cl-copy h2{margin:14px 0 12px; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.15;}
.cl-copy p{margin:0; color:var(--ink-soft); font-size:.98rem;}
@media(max-width:860px){
  .cl-stage{aspect-ratio:auto; max-height:none; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .cl-box{position:relative; left:auto!important; top:auto!important; width:auto!important; aspect-ratio:16/9!important;}
  .cl-ghost{display:none;}
  .cl-copy{position:static; transform:none; width:auto; grid-column:1 / -1; order:-1; margin-bottom:18px;}
}
@media(prefers-reduced-motion:reduce){ .cl-box{animation:none;} }

/* =========================================================
   Banners internos: fotos flotantes
   ========================================================= */
.page-hero{position:relative;}
.page-hero > .pz-hvis{position:absolute!important; z-index:1!important; right:clamp(16px,4vw,60px); top:50%; width:min(44%,560px); aspect-ratio:1/1; transform:translateY(-50%); pointer-events:none;}
.pz-hvis .hv{position:absolute; margin:0; overflow:hidden; border-radius:22px; border:1px solid rgba(234,244,239,.16);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85); transform:translate3d(var(--hx,0),var(--hy,0),0) rotate(var(--r,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.3,1); animation:hvIn 1s cubic-bezier(.2,.8,.3,1) both;}
.pz-hvis .hv img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.95) brightness(.9);}
.pz-hvis .hv::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg,transparent 50%,rgba(3,18,12,.5));}
.hv1{width:62%; aspect-ratio:4/5; right:4%; top:4%; --r:3deg; animation-delay:.15s!important;}
.hv2{width:50%; aspect-ratio:5/4; left:0; top:30%; --r:-5deg; z-index:2; animation-delay:.3s!important;}
.hv3{width:44%; aspect-ratio:1/1; right:14%; bottom:0; --r:-2deg; z-index:3; animation-delay:.45s!important;}
.pz-hvis .hv1{animation:hvIn 1s cubic-bezier(.2,.8,.3,1) .15s both, hvFloat 9s ease-in-out 1.2s infinite;}
.pz-hvis .hv2{animation:hvIn 1s cubic-bezier(.2,.8,.3,1) .3s both, hvFloat 11s ease-in-out 1.3s infinite reverse;}
.pz-hvis .hv3{animation:hvIn 1s cubic-bezier(.2,.8,.3,1) .45s both, hvFloat 10s ease-in-out 1.5s infinite;}
@keyframes hvIn{from{opacity:0; translate:0 40px;}}
@keyframes hvFloat{50%{translate:0 -12px;}}
/* el texto del banner no se monta sobre las fotos */
.page-hero:has(> .pz-hvis) > :not(.pz-hvis):not(canvas):not(.glow):not(.ph-field):not(.ph-scrim):not(.pz-herobg){max-width:min(560px,52%);}
@media(max-width:900px){
  .page-hero > .pz-hvis{position:relative!important; transform:none; right:auto; top:auto; width:min(100%,420px); margin:0 auto 28px;}
  .page-hero:has(> .pz-hvis) > *{max-width:none!important;}
}
@media(prefers-reduced-motion:reduce){ .pz-hvis .hv{animation:none!important;} }

/* =========================================================
   Acceso rápido lateral + siguiente página + efecto de clic
   ========================================================= */
.pz-dock{position:fixed; left:clamp(14px,1.4vw,24px); top:50%; z-index:450; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:26px; opacity:0; transition:opacity .6s ease .2s;}
.pz-dock.ready{opacity:1;}
.pz-dock::before{content:""; position:absolute; left:50%; top:-60px; bottom:-60px; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(234,244,239,.14) 20%,rgba(234,244,239,.14) 80%,transparent); z-index:-1;}
.pz-dock a{display:flex; align-items:center; gap:10px; writing-mode:vertical-rl; transform:rotate(180deg); color:var(--ink);
  font:500 .66rem var(--body); letter-spacing:.24em; text-transform:uppercase; text-decoration:none; padding:2px 0;}
.pz-dock a i{display:block; width:1px; height:14px; background:rgba(234,244,239,.3); transition:height .4s cubic-bezier(.2,.8,.3,1), background .3s;}
.pz-dock a span{opacity:.45; transition:opacity .3s, color .3s;}
.pz-dock a:hover span{opacity:1; color:var(--emerald);}
.pz-dock a:hover i{height:22px; background:var(--emerald);}
.pz-dock a.on span{opacity:1; color:var(--emerald);}
.pz-dock a.on i{height:34px; width:2px; background:var(--emerald); box-shadow:0 0 10px var(--emerald);}
body.pre-lock .pz-dock{opacity:0;}
@media(max-width:1279px){ .pz-dock{display:none;} }

.pz-next{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:clamp(28px,4vw,46px) 0; border-top:1px solid var(--line-soft); color:var(--ink);}
.pz-next small{display:block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px;}
.pz-next b{font-family:var(--disp); font-size:clamp(1.8rem,4.5vw,3.4rem); line-height:1; transition:color .3s;}
.pz-next .arr{flex:none; width:clamp(54px,6vw,72px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line);
  font-size:1.4rem; transition:background .3s, color .3s, transform .4s cubic-bezier(.2,.8,.3,1);}
.pz-next:hover b{color:var(--emerald);}
.pz-next:hover .arr{background:var(--emerald); color:#03120C; transform:translateX(6px) rotate(-45deg);}

.pz-ripple{position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.45); transform:scale(0); animation:pzRip .6s ease-out forwards;}
@keyframes pzRip{to{transform:scale(1); opacity:0;}}

/* =========================================================
   Muro de clientes PRO: cuadrícula con foco de luz
   ========================================================= */
.pz-clients .cw{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,80px); align-items:center;}
.cw-copy h2{margin:14px 0 14px; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.1;}
.cw-copy p{margin:0 0 26px; color:var(--ink-soft); max-width:44ch;}
.cw-stats{display:flex; gap:clamp(18px,3vw,40px); margin-bottom:28px;}
.cw-stats b{display:block; font-family:var(--disp); font-size:clamp(1.8rem,3vw,2.5rem); line-height:1; color:var(--ink);}
.cw-stats span{font-size:.82rem; color:var(--ink-dim);}
.cw-grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:1px; border-radius:22px; overflow:hidden;
  background:rgba(234,244,239,.10); --sx:-500px; --sy:-500px;}
/* luz que sigue al cursor sobre las líneas de la cuadrícula */
.cw-grid::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(260px circle at var(--sx) var(--sy), rgba(25,224,166,.85), transparent 70%);}
.cw-cell{position:relative; z-index:1; aspect-ratio:4/3; display:grid; place-items:center; background:#04150F; overflow:hidden;}
.cw-cell::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(180px circle at var(--cx,50%) var(--cy,50%), rgba(25,224,166,.10), transparent 70%); opacity:0; transition:opacity .4s;}
.cw-cell:hover::after{opacity:1;}
.cw-cell img{max-width:62%; max-height:46%; object-fit:contain; opacity:.6; filter:blur(0); transition:opacity .45s, transform .6s cubic-bezier(.2,.8,.3,1), filter .45s;}
.cw-cell:hover img{opacity:1; transform:scale(1.08) translateY(-6px);}
.cw-cell.swap img{opacity:0; filter:blur(6px); transform:scale(.92);}
.cw-name{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:.72rem; letter-spacing:.08em; color:var(--emerald);
  opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s;}
.cw-cell:hover .cw-name{opacity:1; transform:none;}
@media(max-width:900px){ .pz-clients .cw{grid-template-columns:1fr;} .cw-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:520px){ .cw-grid{grid-template-columns:repeat(2,1fr);} }
.cw-cell img{max-width:70%; max-height:52%; opacity:.78;}

.pz-dock{gap:16px; top:calc(50% + 30px);}
.pz-dock a{font-size:.6rem; letter-spacing:.16em;}

/* =========================================================
   Responsive: celular y tablet
   ========================================================= */
@media(max-width:900px){
  html body header.site .bar{flex-wrap:nowrap!important; gap:10px!important;}
  html body header.site nav{width:auto!important; order:0!important; overflow:visible!important; margin-left:auto!important; gap:12px!important; padding-bottom:0!important;}
  html body header.site nav .wa-btn{position:static!important; box-shadow:none!important;}
}
@media(max-width:760px){
  /* WhatsApp del encabezado: solo icono */
  html body header.site nav .wa-btn{font-size:0!important; padding:5px!important; gap:0!important;}
  html body header.site nav .wa-btn .wa-ico{width:34px!important; height:34px!important; padding:8px!important;}
  html body .nav-btn .lbl{display:none;}
  /* la barra verde inferior ya cumple la función del botón flotante */
  html body .wa-float{display:none!important;}
  body{padding-bottom:58px;}
}

/* =========================================================
   Asesoría virtual gratuita (mensaje destacado)
   ========================================================= */
.pz-ase{display:inline-flex; align-items:center; gap:14px; margin-top:22px; padding:12px 18px 12px 12px; border-radius:18px;
  border:1px solid rgba(25,224,166,.45); background:linear-gradient(110deg,rgba(25,224,166,.18),rgba(25,224,166,.04));
  color:var(--ink); text-decoration:none; position:relative; overflow:hidden; transition:border-color .3s, transform .3s, box-shadow .4s;}
.pz-ase::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%); animation:aseShine 4s ease-in-out 1.5s infinite;}
@keyframes aseShine{0%,60%{transform:translateX(-100%);} 100%{transform:translateX(100%);}}
.pz-ase:hover{border-color:var(--emerald); transform:translateY(-2px); box-shadow:0 18px 40px -20px rgba(25,224,166,.6);}
.pz-ase-ico{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--emerald); color:#03120C;}
.pz-ase-ico svg{width:22px; height:22px;}
.pz-ase b{display:block; font-family:var(--disp); font-size:1rem; line-height:1.2;}
.pz-ase em{display:block; font-style:normal; font-size:.8rem; color:var(--ink-soft); margin-top:2px;}
.pz-ase i{font-style:normal; color:var(--emerald); font-size:1.2rem; margin-left:4px; transition:transform .3s;}
.pz-ase:hover i{transform:translateX(4px);}
.pz-free{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:99px; margin-bottom:6px;
  background:rgba(25,224,166,.14); border:1px solid rgba(25,224,166,.4); color:var(--emerald); font-weight:600; font-size:.85rem; letter-spacing:.02em;}
.pz-free .dot{width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px rgba(25,224,166,.18); animation:rxPulse 2.4s ease-in-out infinite;}
@media(max-width:600px){ .pz-ase{display:flex; width:100%;} .pz-free{font-size:.78rem;} }
@media(prefers-reduced-motion:reduce){ .pz-ase::after{animation:none;} }

/* =========================================================
   Portada WOW
   ========================================================= */
/* palabra rotativa: todas las palabras ocupan la misma celda, así el titular no salta */
.pz-rot{display:inline-grid; vertical-align:bottom; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em;}
.pz-rot .rw{grid-area:1 / 1; white-space:nowrap;}
@keyframes rwShine{to{background-position:-250% 0;}}

/* muro: profundidad 3D con el mouse (usa --px/--py que ya calcula la portada) */
.hero-wall{perspective:1200px;}
.hw-tilt{transform:rotate(-9deg) rotateY(calc(var(--px,0) * 7deg)) rotateX(calc(var(--py,0) * -5deg)) translate3d(calc(var(--px,0) * -22px), calc(var(--py,0) * -14px), 0);
  transition:transform .9s cubic-bezier(.2,.8,.3,1);}
.hw-light{position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(420px circle at calc(50% + var(--px,0) * 45%) calc(50% + var(--py,0) * 45%), rgba(25,224,166,.28), transparent 70%);}
/* entrada: el muro llega desde lejos y se enfoca */
body.intro-out .hw-tilt{animation:hwIntro 1.8s cubic-bezier(.16,1,.3,1) both;}
@keyframes hwIntro{from{scale:1.45; filter:blur(10px) brightness(1.6); opacity:0;} to{scale:1; filter:none; opacity:.34;}}
body.intro-out .hw-col:nth-child(odd){animation-delay:0s;}
@media(max-width:860px){ @keyframes hwIntro{from{scale:1.3; filter:blur(8px); opacity:0;} to{scale:1; filter:none; opacity:.18;}} }
@media(prefers-reduced-motion:reduce){ .pz-rot .rw{transition:none; animation:none;} body.intro-out .hw-tilt{animation:none;} }
.hero h1 .kw.pz-rot{display:inline-grid!important; text-shadow:none;}


/* =========================================================
   RENDIMIENTO (va al final para mandar sobre todo lo anterior)
   Regla: nada de desenfoques, mezclas ni máscaras sobre cosas que se mueven.
   ========================================================= */
/* 1. grano a pantalla completa: sin mezcla de colores */
body::before{mix-blend-mode:normal!important; opacity:.025!important;}
/* 2. manchas de luz del inicio: sin desenfoque (ya son degradados suaves) ni mezcla */
.hero-aurora{filter:none!important; opacity:.55!important;}
.hero-aurora i{mix-blend-mode:normal!important; will-change:transform;}
/* 3. vidrio esmerilado fuera: fondos sólidos semitransparentes */
header.site, header.site.shrunk{-webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(3,18,12,.94)!important;}
.pz-snav, .pz-chip, .bl-chip, .rx-snd, .wx-modal, .g-slide figcaption, .g-btn, .odz-hud{-webkit-backdrop-filter:none!important; backdrop-filter:none!important;}
.pz-chip{background:rgba(4,21,15,.88)!important;}
.pz-snav{background:rgba(3,18,12,.94)!important;}
.wx-modal{background:rgba(2,10,7,.92)!important;}
/* 4. textos con degradado: degradado fijo (sin repintar cada cuadro) */
.pz-rot .rw, .hero h1 .kw{animation:none!important;}
.hw-light{mix-blend-mode:normal!important; background:radial-gradient(420px circle at calc(50% + var(--px,0) * 45%) calc(50% + var(--py,0) * 45%), rgba(25,224,166,.12), transparent 70%)!important;}
/* muro: sin máscara sobre columnas animadas; se oscurece con una capa encima */
.hero-wall{-webkit-mask-image:none!important; mask-image:none!important;}
.hero-wall::before{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,#04150F 0%,#04150F 22%,rgba(4,21,15,.6) 44%,rgba(4,21,15,0) 72%);}
.hw-col, .hw-tilt{will-change:transform; backface-visibility:hidden;}
/* capas que se mueven solas: promovidas a la GPU */
.pz-hvis .hv, .cl-box, .bx-item img, .lens-ring, .mq-track{will-change:transform;}

/* 5. celular y tablet táctil: modo liviano */
@media (hover:none), (max-width:860px){
  #aura{display:none!important;}
  .hero-aurora i, .hero-beams, .hero-dust, .hero-ui, .scroll-cue{animation:none!important;}
  .hero-beams, .hero-dust{display:none!important;}
  .hw-tilt{transition:none!important;}
  .pz-chip{animation:none!important;}
  .pz-hvis .hv{animation:hvIn .8s cubic-bezier(.2,.8,.3,1) both!important;}
  .bx-item.in-v img{animation:none!important;}
  .pz-ase::after{animation:none!important;}
  .svc-item::before, .cw-grid::before{display:none!important;}
}
@media (max-width:600px){
  .hero-wall::before{background:linear-gradient(180deg,rgba(4,21,15,.2),rgba(4,21,15,.75) 60%,#04150F)!important;}
}
/* iPad / tablet: el muro se ve a la derecha, como en computadora */
@media (min-width:601px) and (max-width:1024px){
  .hw-tilt{left:38%!important; right:-18%!important; opacity:.32!important;}
  .hw-col:nth-child(4){display:flex!important;}
  .hero-wall::before{background:linear-gradient(90deg,#04150F 0%,#04150F 30%,rgba(4,21,15,.55) 55%,rgba(4,21,15,0) 80%)!important;}
  @keyframes hwIntro{from{scale:1.35; opacity:0;} to{scale:1; opacity:.32;}}
}

/* ---------- Primera impresión inmediata ----------
   El texto de portada y banners no espera al detector de scroll: entra solo, en < 1 s. */
.hero .reveal, .page-hero .reveal{opacity:1!important; transform:none!important;}
.hero .hero-copy > *, .page-hero > .kicker, .page-hero > .sec-tag, .page-hero > h1, .page-hero > .sub, .page-hero > .crumb, .page-hero > .ar-meta{
  animation:pzIn .85s cubic-bezier(.19,.9,.22,1) both;}
.hero .hero-copy > *:nth-child(2), .page-hero > h1{animation-delay:.08s;}
.hero .hero-copy > *:nth-child(3), .page-hero > .sub{animation-delay:.16s;}
.hero .hero-copy > *:nth-child(4), .page-hero > .crumb, .page-hero > .ar-meta{animation-delay:.24s;}
.hero .hero-copy > *:nth-child(5){animation-delay:.32s;}
@keyframes pzIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
body.pre-lock .hero .hero-copy > *{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){ .hero .hero-copy > *, .page-hero > *{animation:none!important;} }

/* palabra rotativa: fundido secuencial suave (sale una, luego entra la otra; nunca dos a la vez) */
html body .hero h1 .kw.pz-rot{display:inline-grid!important; overflow:visible; text-shadow:none;}
html body .hero h1 .kw.pz-rot .rw{grid-area:1 / 1; white-space:nowrap; opacity:0; visibility:hidden; transform:translate3d(0,.14em,0);
  color:#2BE3B0; background:none; -webkit-text-fill-color:currentColor;
  transition:opacity .4s ease, transform .5s ease, visibility 0s linear .4s;}
html body .hero h1 .kw.pz-rot .rw.on{opacity:1; visibility:visible; transform:none;
  transition:opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;}