/* ESCENA-ROSSO-v3.css — coreografía scroll ROSSO v3 (stills + SVG + CSS).
   Reglas: 390/1366 sin desborde · letra mínima 14px · solo transform/opacity ·
   reduced-motion estático visible · sin-JS visible (estado final por defecto;
   los estados iniciales solo aplican bajo html.js).
   El subset crítico va además embebido en los nodos html del JSON v3
   (Gota salsa loop, Ballet F2 + órbita) para que el paste a Bricks funcione solo.
   Ojo cascada: ese subset va en el BODY (después de este link), así que aquí las
   reglas que deben mandar sobre él usan mayor especificidad:
   [data-pz-escena="ballet"] .clase (0,2,0) gana a .clase (0,1,0) sin !important.
   ANIM-ORBITA 2026-10-24: la órbita deja de ser un bloque aparte debajo de la
   foto y queda flotando encima, centrada en la misma caja que la imagen; en
   móvil la foto se recorta a 340px y el título de la sección baja a 32px.
*/

/* ---------- S1 hero: tenedor baja leve (loop, solo transform) ---------- */
.pz-s1-tenedor{animation:pz-tenedor 7s ease-in-out infinite}
@keyframes pz-tenedor{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ---------- S1 hero: gota de salsa loop (solo transform + opacity) ---------- */
.pz-gota svg{display:block;overflow:visible;animation:pz-gota 2.4s ease-in infinite}
@keyframes pz-gota{0%{transform:translateY(-10px);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translateY(30px);opacity:0}}

/* ---------- S3 ballet: crossfade F1 -> F2 (solo opacity) ---------- */
[data-pz-escena="ballet"]{width:100%;max-width:100%}
.pz-ballet{position:relative} /* ancla de la órbita: su caja es la de la foto */
.pz-ballet__cross{display:grid;position:relative;z-index:1;width:100%;max-width:640px;margin:0 auto}
.pz-ballet__cross img{grid-area:1/1;width:100%;height:auto;display:block;border-radius:24px;max-width:100%}
.pz-ballet__f1{opacity:0} /* sin-JS: F2 (final) visible */
.pz-ballet__f2{opacity:1}
html.js [data-pz-escena="ballet"]:not(.is-activa) .pz-ballet__f1{opacity:1}
html.js [data-pz-escena="ballet"]:not(.is-activa) .pz-ballet__f2{opacity:0}
html.js [data-pz-escena="ballet"].is-activa .pz-ballet__f1{opacity:0;transition:opacity .8s ease}
html.js [data-pz-escena="ballet"].is-activa .pz-ballet__f2{opacity:1;transition:opacity .8s ease}

/* ---------- S3 ballet: órbita de 4 rótulos RODEANDO la imagen (solo transform) ----------
   .pz-orbita es hermano de .pz-ballet__cross, así que se posiciona contra
   .pz-ballet (position:relative): inset:0 + width fijo + margin:auto lo centra
   en los dos ejes => mismo centro que la foto y sale del flujo (antes caía como
   bloque aparte debajo de la imagen). El anillo ::before es un cuadrado de lado
   2r centrado con margin:auto, así que aunque reduced-motion quite el transform
   sigue siendo un círculo centrado sobre la foto. */
[data-pz-escena="ballet"] .pz-orbita{
  --pz-r:200px; /* radio de los rótulos sobre la imagen */
  position:absolute;
  inset:0;
  width:min(100%,460px);
  aspect-ratio:auto;
  margin:auto;
  z-index:2; /* por encima de la imagen */
}
[data-pz-escena="ballet"] .pz-orbita::before{
  content:"";
  position:absolute;
  inset:0;
  width:calc(var(--pz-r) * 2);
  height:calc(var(--pz-r) * 2);
  margin:auto; /* centrado por caja, no por transform */
  border:2px dashed #7E3419;
  border-radius:50%;
  opacity:.45;
  animation:pz-giro 28s linear infinite;
}
.pz-orbita__giro{position:absolute;inset:0;animation:pz-giro 30s linear infinite}
[data-pz-escena="ballet"] .pz-orbita__item{
  position:absolute;
  top:50%;
  left:50%;
  width:140px;
  margin:-18px 0 0 -70px;
  text-align:center;
  transform:rotate(var(--a)) translateX(var(--pz-r)) rotate(calc(var(--a) * -1)); /* contra-rotación: texto derecho */
}
/* 4 ángulos fijos 45/135/225/315deg; !important gana al style="--a:…" del HTML */
[data-pz-escena="ballet"] .pz-orbita__item--1{--a:45deg !important}
[data-pz-escena="ballet"] .pz-orbita__item--2{--a:135deg !important}
[data-pz-escena="ballet"] .pz-orbita__item--3{--a:225deg !important}
[data-pz-escena="ballet"] .pz-orbita__item--4{--a:315deg !important}
.pz-orbita__pill{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.12em;background:#2A1A12;color:#F6EFE4;padding:8px 14px;border-radius:999px;white-space:nowrap;animation:pz-giro-rev 30s linear infinite}
@keyframes pz-giro{to{transform:rotate(360deg)}}
@keyframes pz-giro-rev{to{transform:rotate(-360deg)}}

/* ---------- S4 pin: el bloque plato se acomoda (sticky, flujo normal) ---------- */
.pz-s4-pin{position:sticky;top:96px;z-index:2}

/* ---------- Móvil ≤768px: foto recortada, órbita compacta, título a 32px ---------- */
@media (max-width:768px){
  .pz-ballet__cross img{max-height:340px;object-fit:cover}
  [data-pz-escena="ballet"] .pz-orbita{--pz-r:140px;width:min(100%,300px)}
  /* H2 "Se abre el espiral" de S3 (título grande de la sección): Bricks lo trae
     como clamp(44px,7vw,120px); aquí se fija en 32px para subir el CTA */
  section:has([data-pz-escena="ballet"]) h2,
  h2.brxe-r3e1f2{font-size:32px !important;line-height:1.1 !important}
}

/* ---------- Muy angosto ≤400px: rótulos más cerca del centro (sin desborde) ---------- */
@media (max-width:400px){
  [data-pz-escena="ballet"] .pz-orbita{--pz-r:120px}
  [data-pz-escena="ballet"] .pz-orbita__item{width:120px;margin:-16px 0 0 -60px}
}

/* ---------- 390px: sin desborde, rótulos 14px ---------- */
@media (max-width:390px){
  [data-pz-escena="ballet"]{overflow-x:clip}
  [data-pz-escena="ballet"] .pz-orbita{width:100%;max-width:300px}
  [data-pz-escena="ballet"] .pz-orbita__item{width:120px;margin:-16px 0 0 -60px}
  .pz-orbita__pill{font-size:14px;padding:7px 12px}
}

/* ---------- reduced-motion: estático y visible ---------- */
@media (prefers-reduced-motion: reduce){
  .pz-s1-tenedor,.pz-gota svg,.pz-orbita::before,.pz-orbita__giro,.pz-orbita__pill{animation:none !important;transform:none !important}
  .pz-gota svg{opacity:.9}
  [data-pz-escena="ballet"] .pz-ballet__f1{opacity:0 !important;transition:none !important}
  [data-pz-escena="ballet"] .pz-ballet__f2{opacity:1 !important;transition:none !important}
  [data-interaction-hidden-on-load]{opacity:1 !important;transform:none !important}
}