/* impacto.css — PW · Capa de impacto (Point Web, 4-nov-2026): la entrada, el pase entre páginas y el movimiento al recorrer.
   Fuente: ~/.claude/skills/diseno-web-elementor/sistema/impacto/pw-impacto/impacto.css · lo carga mu-plugins/pw-impacto.php.
   GENÉRICO: no tiene colores, textos ni letras del sitio. Eso va en pw-impacto-sitio/marca.css (lo genera marca.py desde
   impacto.json) y en las variables --pwi-tinta / --pwi-acento / --pwi-gris que el PHP imprime en el <head>.
   El <head> pone el modo: html.pwi-intro (primera página de la PESTAÑA) o html.pwi-llega (vino por un link del sitio), los dos
   con pwi-cubre (la página arranca tapada). impacto.js pone html.pwi-ya (+ --pwi-lev y --pwi-d0) cuando está listo: se va el
   telón o la cortina y entra la cabecera. Sin JS, el telón se va solo a los 4,5 s y la cortina a los 4 s con los keyframes
   «-seguro», de OTRO nombre: cambiar el nombre arranca una animación NUEVA con el delay del JS (con el mismo nombre el
   navegador seguiría con el reloj del primer cuadro y --pwi-lev no serviría). Si el JS llega después de la red (html.pwi-tarde)
   la animación sigue siendo la «-seguro» y no se vuelve a tapar nada.
   Todo el movimiento usa translate / scale / rotate (las propiedades sueltas): se SUMAN a los transform que ya tiene el
   sitio (hover de tarjetas, muros inclinados) en lugar de pisarlos. Única excepción: la barra de avance, que es propia.
   Curva compartida con el motor de efectos.py (EASE_OUT): cubic-bezier(.16,1,.3,1). */
/* los valores de respaldo con :where() = especificidad 0 (6-nov-2026, pointweb.com.ar): este archivo se carga DESPUÉS del
   :root{--pwi-acento…} que imprime el PHP con los colores del sitio y, con la misma especificidad, los pisaba: el punto y la
   raya salían #111827 (gris casi negro sobre el telón) en todos los sitios. Así gana siempre el color del sitio. */
:where(:root){--pwi-lev:0s;--pwi-d0:.2s;--pwi-tinta:#0D0E12;--pwi-acento:#111827;--pwi-gris:#A3A9B5;--pwi-red-telon:4.5s;--pwi-red-cortina:4s}
@keyframes pwi-sube{from{opacity:0;translate:0 30px}to{opacity:1;translate:none}}

/* ═══ 1 · LA ENTRADA: el nombre sube por líneas, cae el punto del acento, se dibuja la raya, aparece el rol y se levanta
       el telón con filo del acento. Corre sola en CSS desde el primer cuadro: la letra está incrustada (marca.css). ═══ */
.pwi-telon,.pwi-cortina{display:none}
html.pwi-intro .pwi-telon{display:flex;align-items:center;justify-content:center;position:fixed;left:0;top:0;width:100%;height:100%;
  z-index:100001;overflow:hidden;background:var(--pwi-tinta);animation:pwi-telon-seguro .9s cubic-bezier(.76,0,.24,1) var(--pwi-red-telon) forwards}
html.pwi-intro.pwi-ya .pwi-telon{animation:pwi-telon .9s cubic-bezier(.76,0,.24,1) var(--pwi-lev) forwards}
html.pwi-intro.pwi-ya.pwi-tarde .pwi-telon{animation:pwi-telon-seguro .9s cubic-bezier(.76,0,.24,1) var(--pwi-red-telon) forwards}
.pwi-telon::before,.pwi-cortina::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 10%,transparent 78%)}
.pwi-telon::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--pwi-acento)}
.pwi-telon-centro{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;padding:0 20px;text-align:center}
html.pwi-intro.pwi-ya .pwi-telon-centro{animation:pwi-centro-sale .9s cubic-bezier(.76,0,.24,1) var(--pwi-lev) forwards}
.pwi-logo{display:block;width:auto;height:auto;max-width:min(62vw,340px);max-height:26vh;opacity:0}
.pwi-nombre{display:flex;align-items:baseline;justify-content:center;gap:.25em;white-space:nowrap;color:#fff;
  font:800 clamp(36px,8.2vw,112px)/1 'PWI Nombre',Montserrat,Arial,sans-serif;letter-spacing:-.045em}
.pwi-tm{display:inline-block;overflow:hidden;padding:.1em .03em .24em;margin:-.1em 0 -.24em}
.pwi-tm>i{display:inline-block;font-style:normal;translate:0 115%}
.pwi-telon .pwi-punto{display:inline-block;width:.19em;height:.19em;margin-left:-.21em;border-radius:50%;background:var(--pwi-acento);opacity:0}
.pwi-raya{width:96px;height:3px;border-radius:2px;background:var(--pwi-acento);transform-origin:50% 50%;scale:0 1}
.pwi-rol{max-width:min(92vw,620px);color:var(--pwi-gris);font:600 clamp(11px,1.05vw,13px)/1.6 'PWI Rol',Montserrat,Arial,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;opacity:0}
@media (max-width:600px){.pwi-rol{white-space:pre-line;letter-spacing:.2em}}
html.pwi-intro .pwi-logo{animation:pwi-logo .9s cubic-bezier(.16,1,.3,1) .08s both}
html.pwi-intro .pwi-tm>i{animation:pwi-letra .8s cubic-bezier(.16,1,.3,1) .08s both}
html.pwi-intro .pwi-tm:nth-child(2)>i{animation-delay:.16s}
html.pwi-intro .pwi-tm:nth-child(3)>i{animation-delay:.24s}
html.pwi-intro .pwi-telon .pwi-punto{animation:pwi-punto .7s cubic-bezier(.3,1.55,.45,1) .5s both}
html.pwi-intro .pwi-raya{animation:pwi-raya .55s cubic-bezier(.65,0,.35,1) .62s both}
html.pwi-intro .pwi-rol{animation:pwi-sube .65s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes pwi-logo{from{opacity:0;scale:.9;translate:0 18px}to{opacity:1;scale:1;translate:none}}
@keyframes pwi-letra{from{translate:0 115%}to{translate:none}}
@keyframes pwi-punto{0%{opacity:0;translate:0 -1.6em;scale:.3}50%{opacity:1}100%{opacity:1;translate:none;scale:1}}
@keyframes pwi-raya{to{scale:1 1}}
@keyframes pwi-centro-sale{to{translate:0 -16vh;opacity:0}}
@keyframes pwi-telon{to{translate:0 -100%;visibility:hidden}}
@keyframes pwi-telon-seguro{to{translate:0 -100%;visibility:hidden}}

/* ═══ 2 · EL PASE ENTRE PÁGINAS: sube la cortina tinta con el punto que late; en la página nueva sigue subiendo y se va ═══ */
html.pwi-sale .pwi-cortina,html.pwi-llega .pwi-cortina{display:flex;align-items:center;justify-content:center;position:fixed;left:0;top:-4px;
  width:100%;height:calc(100% + 8px);z-index:100000;pointer-events:none;overflow:hidden;background:var(--pwi-tinta);
  border-top:4px solid var(--pwi-acento);border-bottom:4px solid var(--pwi-acento)}
html.pwi-sale .pwi-cortina{pointer-events:auto;animation:pwi-cortina-in .5s cubic-bezier(.76,0,.24,1) both}
html.pwi-llega .pwi-cortina{animation:pwi-cortina-seguro .7s cubic-bezier(.76,0,.24,1) var(--pwi-red-cortina) both}
html.pwi-llega.pwi-ya .pwi-cortina{animation:pwi-cortina-out .7s cubic-bezier(.76,0,.24,1) var(--pwi-lev) both}
html.pwi-llega.pwi-ya.pwi-tarde .pwi-cortina{animation:pwi-cortina-seguro .7s cubic-bezier(.76,0,.24,1) var(--pwi-red-cortina) both}
.pwi-cortina .pwi-punto{position:relative;width:14px;height:14px;border-radius:50%;background:var(--pwi-acento);
  animation:pwi-late .8s ease-in-out infinite alternate}
@keyframes pwi-cortina-in{from{translate:0 100%}to{translate:none}}
@keyframes pwi-cortina-out{from{translate:none}to{translate:0 -100%;visibility:hidden}}
@keyframes pwi-cortina-seguro{from{translate:none}to{translate:0 -100%;visibility:hidden}}
@keyframes pwi-late{from{scale:.7;opacity:.55}to{scale:1.15;opacity:1}}

/* ═══ 3 · LA BARRA DE AVANCE: cuánto falta de la página (elemento propio: acá sí transform) ═══ */
.pwi-progreso{position:fixed;left:0;top:0;width:100%;height:3px;z-index:100002;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:var(--pwi-acento)}

/* ═══ 4 · LA CABECERA (solo cuando la página arrancó tapada): todo entra en orden, la foto sube, las piezas flotantes
       aparecen con rebote; después, en la compu, la foto y las piezas se mueven en capas con el mouse y al bajar ═══ */
/* html.pwi-oculta (6-nov-2026, pointweb.com.ar): lo que la capa esconde para animarlo se esconde recién DESPUÉS del primer
   cuadro pintado (el JS lo pone a los dos requestAnimationFrame). Debajo del telón no cambia nada para el que mira, pero el LCP
   del navegador ya registró el titular y la foto en el primer cuadro: la entrada no le suma 1,5-2 s al LCP de cada visita. */
html.pwi-cubre.pwi-oculta .pwi-entra{opacity:0}
html.pwi-cubre.pwi-ya .pwi-entra{animation:pwi-sube .95s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--pwi-d0) + var(--pwi-i,0)*90ms)}
html.pwi-cubre.pwi-ya .pwi-foto-hero{animation:pwi-foto-hero 1.35s cubic-bezier(.16,1,.3,1) calc(var(--pwi-d0) + .05s) both}
html.pwi-cubre.pwi-oculta .pwi-pop{opacity:0}
html.pwi-cubre.pwi-ya .pwi-pop{animation:pwi-pop .85s cubic-bezier(.3,1.45,.5,1) both;animation-delay:calc(var(--pwi-d0) + .6s + var(--pwi-i,0)*170ms)}
@keyframes pwi-foto-hero{from{translate:0 70px;scale:.94}to{translate:none;scale:1}}
@keyframes pwi-pop{from{opacity:0;translate:0 26px;scale:.86}to{opacity:1;translate:none;scale:1}}
.pwi-capa-1{translate:calc(var(--pwi-mx,0)*-14px) calc(var(--pwi-my,0)*-10px + var(--pwi-sp,0)*80px)}
.pwi-capa-2{translate:calc(var(--pwi-mx,0)*22px) calc(var(--pwi-my,0)*16px + var(--pwi-sp,0)*36px)}

/* ═══ 5 · LOS TÍTULOS caen palabra por palabra (el H1 al irse el telón, cada H2 cuando aparece). Padding SOLO vertical en la
       máscara (lateral → qa.py avisa «desborda»), y al terminar overflow:visible (si no, recorta tildes y sombras) ═══ */
.pwi-pm{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.14em 0 .22em;margin:-.14em 0 -.22em}
.pwi-p{display:inline-block}
html.pwi-oculta .pwi-partido:not(.pwi-listo) .pwi-p{translate:0 120%}
.pwi-listo .pwi-p{animation:pwi-palabra 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--pwi-dt,0s) + var(--pwi-w,0)*60ms)}
.pwi-fin .pwi-pm{overflow:visible}
.pwi-fin .pwi-p{animation:none!important;translate:none!important;rotate:none!important}
@keyframes pwi-palabra{from{translate:0 120%;rotate:3deg}to{translate:none;rotate:none}}

/* ═══ 6 · AL BAJAR: las tarjetas suben en cascada y las fotos se revelan de abajo hacia arriba ═══ */
html.pwi-oculta .pwi-rv:not(.pwi-in){opacity:0;translate:0 44px;scale:.97}
.pwi-rv.pwi-in{animation:pwi-rv .95s cubic-bezier(.16,1,.3,1) var(--pwi-rd,0s) both}
@keyframes pwi-rv{from{opacity:0;translate:0 44px;scale:.97}to{opacity:1;translate:none;scale:1}}
html.pwi-oculta .pwi-fo:not(.pwi-in){clip-path:inset(100% 0 0 0)}
.pwi-fo.pwi-in{animation:pwi-fo 1.15s cubic-bezier(.65,0,.2,1) var(--pwi-rd,0s) both}
.pwi-fo.pwi-in img{animation:pwi-fo-img 1.5s cubic-bezier(.16,1,.3,1) var(--pwi-rd,0s) both}
@keyframes pwi-fo{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pwi-fo-img{from{scale:1.14}to{scale:1}}

/* ═══ 7 · LA LINTERNA (solo dial «expresivo» o coreografia.linterna=true; compu con mouse): la grilla se ilumina alrededor del
       cursor en la cabecera y en las secciones tinta. Entra como primer hijo: el JS saltea secciones cuyo CSS cuenta hijos ═══ */
.pwi-con-linterna{isolation:isolate}
.pwi-linterna{position:absolute!important;inset:0!important;z-index:-1!important;margin:0!important;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background-image:radial-gradient(circle 300px at var(--pwi-lx,50%) var(--pwi-ly,50%),var(--pwi-lg,transparent),transparent 70%),
    linear-gradient(var(--pwi-lc) 1px,transparent 1px),linear-gradient(90deg,var(--pwi-lc) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;
  -webkit-mask-image:radial-gradient(circle 240px at var(--pwi-lx,50%) var(--pwi-ly,50%),#000 0,rgba(0,0,0,.5) 45%,transparent 100%);
  mask-image:radial-gradient(circle 240px at var(--pwi-lx,50%) var(--pwi-ly,50%),#000 0,rgba(0,0,0,.5) 45%,transparent 100%)}
.pwi-linterna.on{opacity:1}
.pwi-linterna--clara{--pwi-lc:rgba(13,14,18,.10)}
.pwi-linterna--tinta{--pwi-lc:rgba(255,255,255,.11);--pwi-lg:rgba(255,255,255,.045)}

/* ═══ Quieto: «reducir movimiento» del sistema y al imprimir ═══ */
@media (prefers-reduced-motion:reduce){
  .pwi-telon,.pwi-cortina,.pwi-progreso,.pwi-linterna{display:none!important}
  .pwi-logo,.pwi-entra,.pwi-pop,.pwi-foto-hero,.pwi-rv,.pwi-fo,.pwi-fo img,.pwi-p{animation:none!important;opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important}}
@media print{
  .pwi-telon,.pwi-cortina,.pwi-progreso,.pwi-linterna{display:none!important}
  .pwi-logo,.pwi-entra,.pwi-pop,.pwi-foto-hero,.pwi-rv,.pwi-fo,.pwi-fo img,.pwi-p{animation:none!important;opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important}}