/* OLAS VERANO — Product placement: un bloque, tres capítulos que se redibujan */
.pp{--ease:cubic-bezier(.16,1,.3,1)}
.pp-stage{margin-top:clamp(34px,4vw,54px);background:#fff;border-radius:32px;padding:clamp(22px,3.4vw,48px);box-shadow:0 30px 80px rgba(35,18,57,.08);position:relative;overflow:hidden}
.pp-stage:before{content:'';position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(229,250,136,.55),transparent 70%);pointer-events:none}
.pp-art{display:block;width:100%;height:auto;color:var(--dark);overflow:visible}
.pp .ln{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pp .acc{stroke:var(--purple)}.pp .ln.lime{stroke:var(--lime)}.pp .bars{stroke-width:8}
.pp .soft{fill:#fff}
.pp .prod{fill:var(--lime);stroke:var(--dark);stroke-width:1.7;stroke-linejoin:round}

/* Pestañas con barra de progreso */
.pp-tabs{display:flex;gap:10px;align-items:stretch;margin-bottom:clamp(26px,3vw,40px);position:relative;z-index:1}
.pp-tabs [role=tab]{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;text-align:left;border:1.5px solid #e6e1ee;background:#fff;border-radius:18px;padding:14px 18px 12px;cursor:pointer;font:inherit;color:var(--muted);transition:border-color .3s,background .3s,color .3s,transform .4s var(--ease)}
.pp-tabs [role=tab]:hover{transform:translateY(-2px);border-color:var(--purple)}
.pp-tn{grid-row:1/3;font:700 13px/1 Manrope,sans-serif;letter-spacing:.06em;color:var(--purple);align-self:center;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;transition:all .3s}
.pp-tl{font:600 16px/1.2 Manrope,sans-serif;letter-spacing:-.02em;align-self:end}
.pp-bar{height:3px;border-radius:3px;background:#eee9f3;overflow:hidden;align-self:start;margin-top:6px}
.pp-bar i{display:block;height:100%;background:var(--purple);transform-origin:0 50%;transform:scaleX(0)}
.pp-tabs [aria-selected=true]{background:var(--dark);border-color:var(--dark);color:#fff}
.pp-tabs [aria-selected=true] .pp-tn{background:var(--lime);border-color:var(--lime);color:var(--dark)}
.pp-tabs [aria-selected=true] .pp-bar{background:rgba(255,255,255,.18)}.pp-tabs [aria-selected=true] .pp-bar i{background:var(--lime)}
.pp-tabs [aria-selected=false].seen .pp-bar i{transform:scaleX(1);opacity:.35}
.pp-play{flex:0 0 52px;border-radius:18px;border:1.5px solid #e6e1ee;background:#fff;color:var(--dark);font-size:14px;cursor:pointer;transition:border-color .3s}
.pp-play:hover{border-color:var(--purple)}

/* Paneles apilados: el alto no salta al cambiar (escritorio) */
.pp-panels{display:grid;position:relative;z-index:1}
.pp-panel{grid-area:1/1;min-width:0}
.pp-panel[hidden]{display:block;visibility:hidden;pointer-events:none}
.pp-panel.is-leaving{visibility:visible;animation:pp-out .45s var(--ease) forwards}
@keyframes pp-out{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
.pp-title{font:600 clamp(28px,3vw,44px)/1.06 Manrope,sans-serif;letter-spacing:-.045em;margin:0;color:var(--dark);max-width:720px}
.pp-lead{color:var(--muted);max-width:560px;margin:14px 0 0;font-size:15px}
.pp-note{font-size:12px;color:var(--muted);margin:18px 0 0}
.pp-copy.wide{margin-bottom:clamp(24px,3vw,36px)}

/* Entrada de textos */
.pp-panel.is-active .pp-title,.pp-panel.is-active .pp-lead,.pp-panel.is-active .pp-spots li,.pp-panel.is-active .pp-scene,.pp-panel.is-active .pp-circ{animation:pp-rise .9s var(--ease) both;animation-delay:calc(var(--k,0) * 70ms)}
@keyframes pp-rise{from{opacity:0;transform:translateY(22px)}}

/* Redibujo de trazos */
.pp-panel.drawing .ln path,.pp-panel.drawing .ln rect,.pp-panel.drawing .ln circle{stroke-dasharray:1;stroke-dashoffset:1;animation:pp-draw 1.6s cubic-bezier(.65,0,.25,1) forwards;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes pp-draw{to{stroke-dashoffset:0}}
.pp-panel.drawing .pr{transform-box:fill-box;transform-origin:50% 60%;animation:pp-pop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--d,900) * 1ms)}
@keyframes pp-pop{from{opacity:0;transform:scale(.3) translateY(8px)}}
.pp-panel.drawing .soft{fill-opacity:1}

/* Capítulo 1: habitación */
.pp-room{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(24px,4vw,56px);align-items:center}
.pp-spots{list-style:none;margin:26px 0 0;padding:0}
.pp-spots li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:13px 0;border-top:1px solid #eee9f3;cursor:pointer;transition:opacity .3s}
.pp-spots li:last-child{border-bottom:1px solid #eee9f3}
.pp-spots i{font-style:normal;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--purple);color:var(--purple);display:grid;place-items:center;font:700 13px Manrope,sans-serif;transition:all .3s}
.pp-spots b{display:block;font-size:15px;color:var(--dark)}.pp-spots span{font-size:13px;color:var(--muted)}
.pp-spots li.on i{background:var(--lime);border-color:var(--lime);color:var(--dark)}
.pp-room.focus .pp-spots li:not(.on){opacity:.45}
.pp-room-art{position:relative;background:#fbf9f4;border-radius:24px;padding:0}
.pp-room.focus .pr:not(.on){opacity:.25;transition:opacity .3s}.pp .pr{transition:opacity .3s}
.pp-hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:0;background:var(--purple);color:#fff;font:700 13px Manrope,sans-serif;display:grid;place-items:center;cursor:pointer;animation:pp-pulse 2.4s infinite;transition:background .25s,color .25s,transform .3s var(--ease)}
.pp-hs.on{background:var(--lime);color:var(--dark);transform:scale(1.15)}
@keyframes pp-pulse{0%{box-shadow:0 0 0 0 rgba(84,32,210,.45)}70%{box-shadow:0 0 0 14px rgba(84,32,210,0)}100%{box-shadow:0 0 0 0 rgba(84,32,210,0)}}

/* Capítulo 2: recorrido */
.pp-journey{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;position:relative}
.pp-journey:before{content:'';position:absolute;left:5%;right:5%;top:86px;border-top:2px dashed rgba(84,32,210,.3)}
.pp-scene{position:relative;background:#fbf9f4;border-radius:20px;padding:14px 14px 18px;transition:transform .4s var(--ease)}
.pp-scene:hover{transform:translateY(-5px)}
.pp-scene .n{font:700 11px Manrope,sans-serif;color:var(--purple);letter-spacing:.1em}
.pp-scene h4{font:600 17px/1.2 Manrope,sans-serif;letter-spacing:-.02em;margin:6px 0 4px;color:var(--dark)}
.pp-scene p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
.pp-scene.hi{background:var(--dark)}.pp-scene.hi .pp-art{color:#fff}.pp-scene.hi h4{color:#fff}.pp-scene.hi p{color:#cfc6dc}.pp-scene.hi .n{color:var(--lime)}

/* Capítulo 3: circuitos */
.pp-circs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pp-circ{position:relative;background:#fbf9f4;border-radius:20px;padding:16px 18px 18px;transition:transform .4s var(--ease),background .3s,color .3s}
.pp-circ:hover{transform:translateY(-5px)}
.pp-circ .pp-art{height:78px;width:auto;margin:0 0 8px -4px}
.pp-circ small{font-size:10px;letter-spacing:.12em;color:var(--purple);font-weight:700}
.pp-circ h4{font:600 19px/1.15 Manrope,sans-serif;letter-spacing:-.03em;margin:4px 0 12px;color:var(--dark)}
.pp-meter{height:7px;border-radius:7px;background:#ebe6f2;overflow:hidden}
.pp-meter i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),#8f5cff);transform-origin:0 50%;transform:scaleX(var(--w))}
.pp-panel.drawing .pp-meter i{animation:pp-grow 1.4s var(--ease) both;animation-delay:.5s}
@keyframes pp-grow{from{transform:scaleX(0)}}
.pp-u{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-top:8px;color:var(--muted)}.pp-u b{color:var(--dark);font-size:15px}
.pp-pick{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1.5px solid #ddd6e6;background:#fff;color:var(--purple);font-size:18px;line-height:1;cursor:pointer;transition:all .3s var(--ease)}
.pp-pick:hover{border-color:var(--purple);transform:rotate(90deg)}
.pp-circ.sel{background:var(--dark)}.pp-circ.sel .pp-art{color:#fff}.pp-circ.sel h4{color:#fff}.pp-circ.sel small{color:var(--lime)}.pp-circ.sel .pp-u{color:#cfc6dc}.pp-circ.sel .pp-u b{color:#fff}.pp-circ.sel .pp-meter{background:rgba(255,255,255,.15)}
.pp-circ.sel .pp-pick{background:var(--lime);border-color:var(--lime);color:var(--dark);transform:none}

/* Pie compartido */
.pp-foot{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:clamp(30px,4vw,48px)}
.pp-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(35,18,57,.14)}
.pp-kpis>div{padding:18px 16px 0 0}
.pp-kpis strong{display:block;font:700 clamp(26px,2.8vw,40px)/1 Manrope,sans-serif;letter-spacing:-.045em;color:var(--purple);font-variant-numeric:tabular-nums}
.pp-kpis strong em{font-style:normal;margin-right:2px;font-weight:600}
.pp-kpis>div>span{font-size:12.5px;color:var(--muted);display:block;margin-top:6px}
.pp-cta .button{margin:0}

@media(max-width:1080px){.pp-journey{grid-template-columns:repeat(3,1fr)}.pp-journey:before{display:none}.pp-room{grid-template-columns:1fr}.pp-room-art{order:-1}.pp-foot{grid-template-columns:1fr}}
@media(max-width:760px){
 .pp-stage{border-radius:24px;padding:18px}
 .pp-tabs{gap:6px}.pp-tabs [role=tab]{grid-template-columns:1fr;padding:10px 10px 9px;border-radius:14px}.pp-tn{grid-row:auto;width:28px;height:28px;font-size:11px}.pp-tl{font-size:12.5px}.pp-play{flex-basis:40px;border-radius:14px}
 .pp-panel[hidden]{display:none}
 .pp-journey{grid-template-columns:1fr 1fr;gap:10px}.pp-scene{padding:10px 10px 14px}.pp-scene h4{font-size:15px}
 .pp-circs{grid-template-columns:1fr 1fr;gap:10px}.pp-circ{padding:14px}.pp-circ h4{font-size:16px}.pp-circ .pp-art{height:56px}.pp-u span{display:none}.pp-pick{width:32px;height:32px;top:10px;right:10px}
 .pp-kpis{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.pp-panel.drawing *,.pp-panel.is-active *{animation:none!important}.pp-hs{animation:none}.pp-panel.is-leaving{animation:none;visibility:hidden}}

/* Tarjetas de circuito seleccionables completas */
.pp-circ{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp-circ:not(.sel):hover{box-shadow:inset 0 0 0 1.5px var(--purple)}

/* Totales según la selección de circuitos */
.pp-scope{grid-column:1/-1;margin:16px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.pp-scope b{color:var(--purple);font-weight:700}
.pp-kpis.is-custom .pp-scope b{background:var(--lime);color:var(--dark);padding:2px 8px;border-radius:99px}
.pp-kpis>div.pp-flash strong{animation:pp-num .7s cubic-bezier(.16,1,.3,1)}
@keyframes pp-num{35%{transform:translateY(-5px);color:#8f5cff}}
@media(prefers-reduced-motion:reduce){.pp-kpis>div.pp-flash strong{animation:none}}