/* ═══════════════════════════════════════════════════════════
   Pittahaya · Vivo
   Movimiento con oficio: nada de fade-in genérico. Cada gesto
   dice algo — la palabra sube desde su renglón, la foto se
   descubre con un barrido, el botón se llena desde el dedo.
   Todo en transform/opacity/clip-path, un solo rAF compartido.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Titulares: la palabra sube desde su renglón ────────── */
.vv-w{ display:inline-block;overflow:hidden;vertical-align:bottom;
       padding:.08em 0 .24em;margin:-.08em 0 -.24em; }
.vv-w > span{
  display:inline-block;
  transform:translateY(140%) rotate(1.6deg);
  opacity:0;
  transition:transform 1s cubic-bezier(.16,.78,.16,1),opacity .62s ease;
  transition-delay:var(--d,0ms);
}
.vv-split.is-vivo .vv-w > span{ transform:none;opacity:1; }

/* ── 2. Imágenes: se descubren, no aparecen ────────────────── */
.vv-foto{ overflow:hidden; }
.vv-foto > img,.vv-foto > video{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.12);
  transition:clip-path 1.15s cubic-bezier(.72,0,.16,1),
             transform 1.5s cubic-bezier(.16,.7,.2,1);
}
.vv-foto.is-vivo > img,.vv-foto.is-vivo > video{
  clip-path:inset(0 0 0 0);
  transform:scale(1);
}

/* ── 3. Bloques: entran desde su lado, no desde abajo ──────── */
.vv-in{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease var(--d,0ms),
             transform .95s cubic-bezier(.16,.78,.16,1) var(--d,0ms);
}
.vv-in.is-vivo{ opacity:1;transform:none; }

/* ── 4. Botones: el relleno nace donde está el dedo ────────── */
.btn,.btn2,.boton,.sel__go,.diag-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transform:translate3d(var(--bx,0px),var(--by,0px),0);
  transition:transform .42s cubic-bezier(.16,.7,.2,1);
}
.btn::after,.btn2::after,.boton::after{
  content:"";position:absolute;z-index:-1;
  top:var(--py,50%);left:var(--px,50%);
  width:0;height:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
  transform:translate(-50%,-50%);
  transition:width .55s cubic-bezier(.16,.7,.2,1),height .55s cubic-bezier(.16,.7,.2,1);
  pointer-events:none;
}
.btn:hover::after,.btn2:hover::after,.boton:hover::after{ width:320px;height:320px; }
.vv-iman{ transition:transform .1s linear; }

/* ── 5. Enlaces: el subrayado se dibuja ────────────────────── */
.vv-sub{ position:relative;text-decoration:none; }
.vv-sub::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .42s cubic-bezier(.16,.7,.2,1);
}
.vv-sub:hover::after,.vv-sub:focus-visible::after{ transform:scaleX(1);transform-origin:left; }

/* ── 6. El filete que mide la sección ──────────────────────── */
.vv-hilo{
  position:absolute;left:0;top:0;width:1px;height:100%;
  background:linear-gradient(var(--pk-magenta,#e83487),var(--pk-lima,#c6ff6a));
  transform:scaleY(var(--p,0));transform-origin:top;
  opacity:.5;pointer-events:none;
}

@media (max-width:760px){
  .vv-foto > img,.vv-foto > video{ transform:scale(1.06); }
  .btn:hover::after,.btn2:hover::after,.boton:hover::after{ width:0;height:0; }
}

@media (prefers-reduced-motion:reduce){
  .vv-w > span,.vv-in{ transform:none!important;opacity:1!important;transition:none!important; }
  .vv-foto > img,.vv-foto > video{ clip-path:none!important;transform:none!important;transition:none!important; }
  .btn,.btn2,.boton,.sel__go,.diag-btn{ transform:none!important; }
  .vv-hilo{ display:none; }
}


/* ═══════════════════════════════════════════════════════════
   Vivo · segunda capa
   Gestos con intención, no adornos. Cada uno responde a algo
   que el visitante hace.
   ═══════════════════════════════════════════════════════════ */

/* ── 8. La cifra se dibuja con su propio filete ────────────── */
.vv-cifra{ position:relative;display:inline-block; }
.vv-cifra::after{
  content:"";position:absolute;left:0;right:0;bottom:-.14em;height:2px;
  background:linear-gradient(90deg,var(--pk-magenta,#e83487),var(--pk-lima,#c6ff6a));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s .25s cubic-bezier(.16,.7,.2,1);
}
.vv-cifra.is-vivo::after{ transform:scaleX(1); }

/* ── 9. Las filas de la vitrina se abren al pasar ──────────── */
.vitrina-fila{ position:relative;overflow:hidden;isolation:isolate; }
.vitrina-fila::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(90deg,rgba(232,52,135,.16),transparent 62%);
  transform:translateX(-100%);
  transition:transform .62s cubic-bezier(.16,.7,.2,1);
}
.vitrina-fila:hover::before,.vitrina-fila:focus-visible::before{ transform:translateX(0); }
.vitrina-fila .vf-i{ transition:transform .42s cubic-bezier(.16,.7,.2,1); }
.vitrina-fila:hover .vf-i{ transform:translateX(7px); }
.vitrina-fila .vf-n{ transition:letter-spacing .5s cubic-bezier(.16,.7,.2,1); }
.vitrina-fila:hover .vf-n{ letter-spacing:.4px; }

/* ── 10. La pieza mayor respira al acercarse el puntero ────── */
.vitrina-mayor{ position:relative;overflow:hidden; }
.vitrina-mayor img{
  transition:transform 1.5s cubic-bezier(.16,.7,.2,1),filter 1s ease;
  will-change:transform;
}
.vitrina-mayor:hover img{ transform:scale(1.045);filter:saturate(1.08); }
.vitrina-mayor .vitrina-ir{
  display:inline-flex;align-items:center;gap:9px;
  transition:gap .42s cubic-bezier(.16,.7,.2,1);
}
.vitrina-mayor:hover .vitrina-ir{ gap:16px; }

/* ── 11. El cintillo del héroe late una sola vez al entrar ─── */
.casa-heroe .etiqueta,.phead-rotulo{
  position:relative;
}
.casa-heroe .etiqueta::after,.phead-rotulo::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:linear-gradient(90deg,var(--pk-magenta,#e83487),transparent);
  animation:vv-rotulo 1.1s .5s cubic-bezier(.16,.7,.2,1) forwards;
}
@keyframes vv-rotulo{ to{ width:52px; } }

/* ── 12. Los campos del formulario se encienden al escribir ── */
.audit-field{ position:relative; }
.audit-field input,.audit-field textarea{
  transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.16,.7,.2,1);
}
.audit-field input:focus,.audit-field textarea:focus{ transform:translateY(-1px); }
.audit-field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--pk-magenta,#e83487),var(--pk-lima,#c6ff6a));
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.16,.7,.2,1);
  pointer-events:none;border-radius:2px;
}
.audit-field:focus-within::after{ transform:scaleX(1); }

/* ── 13. El pie se levanta escalonado ──────────────────────── */
.foot-cols > div{ transition-delay:var(--d,0ms); }

@media (prefers-reduced-motion:reduce){
  .vv-cifra::after{ transform:scaleX(1);transition:none; }
  .vitrina-fila::before,.vitrina-mayor img,.audit-field::after{ transition:none; }
  .casa-heroe .etiqueta::after,.phead-rotulo::after{ animation:none;width:52px; }
}