/* Portada «rompecabezas» (v1.3.6.2). Mobile-first. Diseño aprobado de la maqueta v4. */
.pz-hero{padding:24px 0 8px;text-align:center}
.pz-hero h1{font-size:clamp(1.9rem,7vw,3rem);margin:0 auto 8px;max-width:20ch}
.pz-hero .lead{margin:0 auto 12px}
.pz-escena{--celda:min(28vw,112px);position:relative;margin:0 auto;padding:8px 0 16px}
.pz-instruccion{min-height:1.5em;margin:0 0 calc(var(--celda) * .3);font-weight:650}
.pz-tablero{position:relative;width:calc(var(--celda) * 3);height:calc(var(--celda) * 2);margin:0 auto;perspective:1100px;transition:transform .38s ease,opacity .38s ease}
.pz-pieza{perspective:700px;position:absolute;left:calc(var(--c) * var(--celda));top:calc(var(--f) * var(--celda));width:var(--celda);height:var(--celda)}
.pz-giro{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.3,1);transition-delay:calc(var(--i) * 60ms)}
.pz-cara{position:absolute;inset:0;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:12px}
button.pz-cara{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pz-cara svg{position:absolute;left:-25%;top:-25%;width:150%;height:150%;overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 4px rgb(14 52 102 / 18%))}
.pz-txt{position:relative;font-weight:750;line-height:1.15;font-size:clamp(.8rem,3.3vw,1.05rem);padding:0 4px}
.dorso{transform:rotateY(180deg);color:var(--giba-blue)}
.especial .frente{color:#fff}
.especial .frente .pz-txt{font-family:var(--f-title);font-weight:400;font-size:clamp(1.15rem,5vw,1.6rem);text-shadow:0 1px 2px rgb(14 52 102 / 55%)}
.especial{z-index:2}
.pz-cara:focus-visible{outline:3px solid var(--giba-blue);outline-offset:4px}
.especial .frente:focus-visible{outline-color:var(--giba-yellow)}
.pz-cara:hover svg path{filter:brightness(1.06)}
[data-estado=tipos] .pz-giro,[data-estado=detalle] .pz-giro{transform:rotateY(180deg)}
.pz-etiqueta{width:calc(var(--celda) * 3);margin:calc(var(--celda) * .32) auto 0;text-align:right;font-size:var(--t14);font-weight:600;letter-spacing:.01em;color:var(--coop-text-secondary);transition:opacity .3s}
[data-estado=tipos] .pz-etiqueta,[data-estado=detalle] .pz-etiqueta{opacity:0}
/* Latido de la pieza «Tu Sinergia» y halo que se expande */
.pz-halo{position:absolute;left:-25%;top:-25%;width:150%;height:150%;overflow:visible;pointer-events:none;opacity:0;transform-origin:50% 50%}
/* Un solo ciclo compartido (--ciclo) para mano, pieza, halo y ondas: nunca se desfasan */
.pz-escena{--ciclo:4.8s}
[data-estado=portada] .especial .frente{animation:pz-pieza var(--ciclo) linear infinite}
.tocado[data-estado=portada] .especial .frente,.tocado [data-estado=portada] .especial .frente{animation:pz-latido 1.6s ease-in-out infinite}
[data-estado=portada] .especial .pz-halo{animation:pz-halo-ciclo var(--ciclo) linear infinite}
.tocado[data-estado=portada] .especial .pz-halo,.tocado [data-estado=portada] .especial .pz-halo{animation:pz-halo 1.6s ease-out infinite}
@keyframes pz-latido{0%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(1)}42%{transform:scale(1.04)}60%,100%{transform:scale(1)}}
@keyframes pz-pieza{0%,29.7%{transform:none;animation-timing-function:ease-out}30.6%{transform:scale(1.03,.95)}32.6%{transform:scale(.99,1.02)}34.6%,41.7%{transform:none;animation-timing-function:ease-out}42.6%{transform:scale(1.07,.9)}44.8%{transform:scale(.96,1.05)}47%{transform:scale(1.015)}49.5%,66%{transform:none;animation-timing-function:ease-in-out}70%{transform:scale(1.08)}74%{transform:scale(1)}77%{transform:scale(1.04)}81%{transform:none}85%{transform:scale(1.08)}89%{transform:scale(1)}92%{transform:scale(1.04)}96%,100%{transform:none}}
@keyframes pz-halo{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.38);opacity:0}100%{transform:scale(1.38);opacity:0}}
@keyframes pz-halo-ciclo{0%,29.7%{transform:scale(1);opacity:0}30.6%{transform:scale(1);opacity:.3}37%{transform:scale(1.18);opacity:0}41.7%{transform:scale(1);opacity:0}42.6%{transform:scale(1);opacity:.55}52%{transform:scale(1.36);opacity:0}66%{transform:scale(1);opacity:0}68%{transform:scale(1);opacity:.5}80%{transform:scale(1.38);opacity:0}83%{transform:scale(1);opacity:0}85%{transform:scale(1);opacity:.5}96%,100%{transform:scale(1.38);opacity:0}}
/* Manito que toca la pieza */
.pz-mano{--w:50px;--h:calc(var(--w) * 84 / 64);position:absolute;z-index:6;pointer-events:none;width:var(--w);height:var(--h);left:calc(var(--celda) * 2.5 - var(--w) * .36);top:calc(var(--celda) * 1.66 - var(--h) * .03);opacity:0;animation:pz-mano-x var(--ciclo) infinite}
.pz-mano-y{position:relative;width:100%;height:100%;transform-origin:52% 100%;animation:pz-mano-y var(--ciclo) infinite}
.pz-mano-svg{position:relative;display:block;width:100%;height:100%;overflow:visible;transform-origin:36% 3%;animation:pz-clic var(--ciclo) infinite}
.pz-indice{transform-box:fill-box;transform-origin:50% 100%;animation:pz-indice var(--ciclo) infinite}
.pz-sombra{position:absolute;left:22%;top:14%;width:70%;height:86%;border-radius:40% 40% 30% 30%;background:rgb(14 52 102 / 30%);filter:blur(6px);transform:translate(7px,9px);animation:pz-sombra var(--ciclo) infinite}
.pz-onda{position:absolute;left:36%;top:3%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2.5px solid #fff;background:rgb(255 255 255 / 22%);opacity:0;animation:pz-onda var(--ciclo) ease-out infinite}
.pz-onda.o2{animation-name:pz-onda2}
/* Recorrido curvo: X e Y con curvas distintas; leve sobrepaso al llegar */
@keyframes pz-mano-x{0%{transform:translateX(64px);opacity:0;animation-timing-function:cubic-bezier(.2,.75,.25,1.25)}6%{opacity:1}22%{transform:translateX(0);animation-timing-function:ease-in-out}50%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.5,0,.75,.4)}64%,100%{transform:translateX(58px);opacity:0}}
@keyframes pz-mano-y{0%{transform:translateY(96px) rotate(20deg);animation-timing-function:cubic-bezier(.3,.6,.35,1.18)}22%{transform:translateY(0) rotate(-3deg);animation-timing-function:ease-out}26%{transform:translateY(0) rotate(0)}48%{transform:translateY(0) rotate(0);animation-timing-function:ease-out}52%{transform:translateY(-6px) rotate(-4deg);animation-timing-function:cubic-bezier(.55,0,.8,.5)}64%,100%{transform:translateY(70px) rotate(16deg)}}
/* Dos toques con ritmo distinto: el 1.º corto, el 2.º un poco más largo y profundo */
@keyframes pz-clic{0%,27.5%{transform:none;animation-timing-function:ease-in}30%{transform:translateY(2.5px) scale(.95);animation-timing-function:ease-out}32.5%{transform:translateY(-1px)}35%,39%{transform:none;animation-timing-function:ease-in}42%{transform:translateY(3.5px) scale(.93);animation-timing-function:ease-out}45.5%{transform:translateY(-1.5px)}49%,100%{transform:none}}
@keyframes pz-indice{0%,27.5%{transform:none}30%{transform:scaleY(.9) skewX(-3deg)}34%,39%{transform:none}42%{transform:scaleY(.87) skewX(-4deg)}47%,100%{transform:none}}
@keyframes pz-sombra{0%{transform:translate(16px,22px) scale(1.08);opacity:.35}22%,27.5%{transform:translate(7px,9px);opacity:1}30%{transform:translate(3px,4px) scale(.9);opacity:.75}34%,39%{transform:translate(7px,9px);opacity:1}42%{transform:translate(2px,3px) scale(.86);opacity:.7}47%,48%{transform:translate(7px,9px);opacity:1}52%{transform:translate(11px,15px)}64%,100%{transform:translate(16px,22px) scale(1.08);opacity:.35}}
@keyframes pz-onda{0%,29.7%{transform:scale(.2);opacity:0}30.8%{transform:scale(.3);opacity:.85}38%,100%{transform:scale(1.4);opacity:0}}
@keyframes pz-onda2{0%,41.7%{transform:scale(.2);opacity:0}42.8%{transform:scale(.3);opacity:.95}53%,100%{transform:scale(1.85);opacity:0}}
.tocado .pz-mano,:not([data-estado=portada]) > .pz-tablero .pz-mano{display:none}
.saliendo .pz-tablero{transform:rotateY(90deg) scale(.9);opacity:0}
.volviendo .pz-tablero{animation:pz-entrar .42s ease both}
.pz-detalle{max-width:560px;margin:0 auto;text-align:left;background:#fff;border:1px solid var(--coop-border-decoration);border-radius:20px;padding:18px;animation:pz-entrar .42s ease both;outline:none}
.pz-detalle.saliendo{animation:pz-salir .3s ease both}
@keyframes pz-entrar{from{transform:perspective(900px) rotateY(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes pz-salir{to{transform:perspective(900px) rotateY(90deg);opacity:0}}
.pz-detalle h2{margin:10px 0 4px;font-size:clamp(1.6rem,6vw,2.2rem)}
.pz-comun{margin:12px 0 0;font-size:var(--t14);color:var(--coop-text-secondary)}
.pz-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
@media (min-width:761px){.pz-mano{--w:64px}.pz-escena{--celda:150px}.pz-hero{padding-top:24px}.pz-hero h1{max-width:30ch}.pz-instruccion{margin-bottom:36px}.pz-txt{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){
  .pz-giro,.pz-tablero,.pz-etiqueta{transition:none!important}
  .pz-detalle,.volviendo .pz-tablero,[data-estado=portada] .especial .frente,.tocado [data-estado=portada] .especial .frente,.pz-mano-svg,.pz-mano-y,.pz-indice,.pz-sombra,.pz-onda,[data-estado=portada] .especial .pz-giro{animation:none!important}
  [data-estado=portada] .especial .pz-halo,.tocado [data-estado=portada] .especial .pz-halo{animation:none!important;opacity:.4;transform:scale(1.14)}
  .pz-mano{animation:none!important;opacity:1;transform:none}
  .pz-detalle.saliendo{animation:none!important}
}
.pz-hero{overflow-x:clip;overflow-clip-margin:16px}
.pz-halo{filter:blur(5px)!important}

.especial .frente{align-items:flex-start;padding-top:calc(var(--celda) * .12)}