/* OLAS VERANO — Video de presentación del product placement (hero del bloque) */
.pp-cine{position:relative;margin:0 0 clamp(28px,4vw,48px);border-radius:32px;overflow:hidden;background:#1a0e2b;aspect-ratio:16/9;max-height:82vh;width:100%;isolation:isolate;
  /* máscara: Safari no recorta un <video> sólo con overflow+radius */
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000);transform:translateZ(0)}
.pp-cine video{display:block;width:100%;height:100%;object-fit:contain;background:#1a0e2b;cursor:pointer;border-radius:inherit}
/* barra de progreso */
.pp-cine-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(247,245,238,.16);z-index:2}
.pp-cine-bar i{display:block;height:100%;background:var(--lime,#e5fa88);transform-origin:left;transform:scaleX(0)}
/* controles */
.pp-cine-ui{position:absolute;left:0;right:0;bottom:4px;display:flex;align-items:center;gap:10px;padding:clamp(12px,2vw,22px);z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(26,14,43,.62),rgba(26,14,43,0));opacity:0;transition:opacity .35s ease}
.pp-cine:hover .pp-cine-ui,.pp-cine:focus-within .pp-cine-ui,.pp-cine.is-pausa .pp-cine-ui,.pp-cine.is-fin .pp-cine-ui{opacity:1}
.pp-cine-ui button{pointer-events:auto;font:600 13px/1 Manrope,system-ui,sans-serif;letter-spacing:.01em;border:0;border-radius:999px;padding:11px 16px;cursor:pointer;
  background:rgba(247,245,238,.94);color:#231239;transition:background .2s ease,transform .2s ease}
.pp-cine-ui button:hover{background:var(--lime,#e5fa88);transform:translateY(-1px)}
.pp-cine-ui button:focus-visible{outline:3px solid var(--lime,#e5fa88);outline-offset:3px}
.pp-cine-skip,.pp-cine-again{margin-left:auto}
.pp-cine-sound[hidden],.pp-cine-again[hidden],.pp-cine-skip[hidden]{display:none}
/* el botón "ver ahora" está siempre visible mientras el resto del bloque espera */
.pp-con-cine:not(.pp-abierto) .pp-cine-ui{opacity:1}
/* botón central de reproducir */
.pp-cine-play{position:absolute;inset:0;margin:auto;width:clamp(64px,8vw,92px);height:clamp(64px,8vw,92px);border-radius:50%;border:0;z-index:3;cursor:pointer;
  background:var(--lime,#e5fa88);color:#231239;display:none;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .2s ease}
.pp-cine-play svg{width:38%;height:38%;margin-left:6%;fill:currentColor}
.pp-cine-play:hover{transform:scale(1.06)}
.pp-cine-play:focus-visible{outline:3px solid #f7f5ee;outline-offset:4px}
.pp-cine.is-pausa .pp-cine-play,.pp-cine.is-fin .pp-cine-play{display:flex}
.pp-cine.is-fin .pp-cine-play{display:none}
/* rótulo arriba */
.pp-cine-tag{position:absolute;top:clamp(12px,2vw,22px);left:clamp(12px,2vw,22px);z-index:3;font:11px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:#f7f5ee;background:rgba(26,14,43,.55);padding:8px 10px;border-radius:4px;pointer-events:none;transition:opacity .4s ease}
.pp-cine.is-corriendo:not(:hover) .pp-cine-tag{opacity:0}

/* El resto del bloque espera a que termine el video (sólo si hay JS: sin JS se ve todo) */
.pp-con-cine:not(.pp-abierto) .pp-stage,.pp-con-cine:not(.pp-abierto) .pp-foot{display:none}
.pp-cine~.pp-stage{scroll-margin-top:96px}
.pp-abierto .pp-stage{animation:ppCineIn .9s cubic-bezier(.2,.7,.2,1) both}
.pp-abierto .pp-foot{animation:ppCineIn .9s .14s cubic-bezier(.2,.7,.2,1) both}
@keyframes ppCineIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .pp-cine{border-radius:24px;max-height:none}
  .pp-cine-ui{opacity:1;gap:8px;padding:10px}
  .pp-cine-ui button{padding:9px 12px;font-size:12px}
  .pp-cine-tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pp-abierto .pp-stage,.pp-abierto .pp-foot{animation:none}
  .pp-cine-ui,.pp-cine-tag{transition:none}
}