/* CARIBIAN · módulo: Arma tu bowl (explosión vertical + pasos + precios)
   Al pasar a PHP este CSS no cambia. */
.build{--sbg:#fff;background:#fff;padding:clamp(88px,16vw,150px) 0 clamp(64px,10vw,110px)}
.build .head{text-align:center}
.build .lede{margin-inline:auto}
/* Contenedor alto: da distancia de scroll para que el montaje vaya despacio.
   .stack-sticky se queda fijo en pantalla mientras se recorre esa distancia;
   el JS reparte el progreso (--p) en el 70% inicial y mantiene el bowl
   completo el 30% restante, para dar tiempo a leer los nombres. */
.stack-scroller{position:relative;height:250vh}
.stack-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;padding-top:var(--hdr)}
.stack{--spread:74px;--p:0;--fit:1;display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:0 var(--pad);transform:scale(var(--fit));transition:transform .3s var(--ease)}
.layer{position:relative;z-index:calc(10 - var(--i));transform:translateY(calc((2 - var(--i)) * var(--spread) * (1 - var(--p))));will-change:transform}
.layer+.layer{margin-top:16px}
.pic{position:relative;width:min(calc(var(--k) * 1vw),calc(var(--k) * 6.4px))}
.pic img{width:100%;height:auto;filter:drop-shadow(0 18px 16px rgba(31,36,79,.22))}
.tag{position:absolute;top:50%;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translateY(-50%);opacity:clamp(0,calc((var(--p) - .6) * 3),1);pointer-events:none}
.tag.r{left:100%;margin-left:6px}
.tag.l{right:100%;margin-right:6px}
.tag b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-size:1rem}
.tag span{font-weight:700;font-size:.88rem;line-height:1.1;color:var(--navy);text-align:center}
.c-r{--c:var(--red)}
.c-n{--c:var(--navy)}
.steps-title{font-size:1.4rem;letter-spacing:-.02em;color:var(--navy);margin:clamp(56px,9vw,90px) 0 16px;text-align:center}
.steps{max-width:760px;margin-inline:auto;border-top:1px solid rgba(43,49,123,.14)}
.step{border-bottom:1px solid rgba(43,49,123,.14)}
.step summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.step summary::-webkit-details-marker{display:none}
.step .n{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-weight:700}
.step .t{font-weight:700;font-size:1.1rem;color:var(--navy)}
.step .inc{display:block;font-weight:400;font-size:.88rem;color:var(--mut)}
.step .chev i{width:100%;height:100%}
.step .chev{margin-left:auto;width:22px;height:22px;flex:none;transition:transform .4s var(--ease);color:var(--navy)}
.step[open] .chev{transform:rotate(180deg)}
.step .body{padding:2px 4px 20px 56px}
.step .grp+.grp{margin-top:14px}
.step .glabel{font-weight:700;font-size:.88rem;color:var(--red);margin-bottom:6px}
.prices{display:grid;gap:14px;margin:44px auto 0;max-width:760px}
.price-card{border-radius:26px;padding:26px 26px 24px;color:#fff}
.p-navy{background:var(--navy)}
.p-red{background:var(--red)}
.p-name{font-weight:700;font-size:1.05rem;opacity:.9}
.p-amount{font-size:clamp(2.6rem,11vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:4px 0 8px}
.p-txt{font-size:.98rem;line-height:1.45;opacity:.92;max-width:36ch}
.extras{text-align:center;color:var(--mut);font-size:.95rem;margin-top:18px}
@media (min-width:720px){
  .tag{flex-direction:row;gap:10px}
  .tag.l{flex-direction:row-reverse}
  .tag span{font-size:1rem;text-align:left}
  .tag.l span{text-align:right}
  .tag.r{margin-left:18px}
  .tag.l{margin-right:18px}
  .prices{grid-template-columns:1fr 1fr}
  .stack{--spread:96px}
  .stack-scroller{height:220vh}
}
@media (prefers-reduced-motion:reduce){
  .stack-scroller{height:auto}
  .stack-sticky{position:static;height:auto;padding-top:0}
}