/* Monta tu pack: misma maqueta que la ficha (ficha.css), con la escena y los mandos. */

/* Escena dentro del círculo */
.pack-disco{display:block!important}
.pack-aparato{position:absolute;left:50%;top:60%;width:104%;max-width:none;height:auto;transform:translate(-50%,-50%) rotate(32deg);filter:drop-shadow(0 16px 16px rgba(6,40,84,.22))}
/* Cabezales en la zona libre de arriba a la derecha, siempre dentro del círculo:
   uno grande, dos en fila, tres o cuatro en cuadrícula de 2×2 (data-n lo pone pack.js). */
.pack-cabezales{position:absolute;left:53%;right:15%;top:14%;height:30%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6%;place-items:center}
.pack-cabezales[data-n="1"]{grid-template-columns:minmax(0,1fr);left:54%;right:18%}
.pack-cabezales[data-n="2"]{grid-auto-rows:minmax(0,72%);align-content:center}
.pack-cabezales img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;animation:pack-entra .42s var(--suave)}
/* Tres: dos arriba y el tercero centrado debajo, no descolgado a un lado */
.pack-cabezales[data-n="3"]{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:6%;row-gap:6%}
.pack-cabezales[data-n="3"] img{width:47%;height:47%}
/* La sombra va en el grupo y no en cada cabezal: en Safari un filtro sobre una imagen que se anima
   se pinta como una caja rectangular. */
.pack-cabezales{filter:drop-shadow(0 10px 10px rgba(6,40,84,.2))}
.pack-cabezales img[hidden]{display:none}
@keyframes pack-entra{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.pack-movil{position:absolute;left:17%;bottom:12%;height:25%;width:auto;transition:opacity .25s ease,transform .5s var(--suave);filter:drop-shadow(0 12px 14px rgba(6,40,84,.25))}
.pack-movil.fuera{opacity:0;transform:translateY(24px) scale(.94)}

/* Mandos */
.pack-p .ficha-compra h1{font:500 clamp(40px,4.4vw,68px)/1.02 var(--font-display)!important}
.pack-intro{margin:12px 0 0!important}
.pack-grupo{border:0;margin:0;padding:0;min-width:0}
.pack-grupo legend{padding:0;margin-bottom:10px;font-weight:700;font-size:1.05rem;color:#fff}
.pack-opciones{display:flex;flex-wrap:wrap;gap:8px}
.pack-opciones label,.pack-cabs label{position:relative;cursor:pointer}
.pack-opciones input,.pack-cabs input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.pack-opciones span{display:flex;align-items:center;min-height:50px;padding:6px 22px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700;font-size:1.02rem;transition:background-color .16s ease,color .16s ease,transform .16s var(--suave)}
.pack-opciones input:checked+span{background:#fff;color:var(--morado)!important}
.pack-nota{margin:12px 0 0!important;font-size:1rem!important;opacity:.92;max-width:32em}
.pack-cabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pack-cabs span{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:8px 44px 8px 8px;border-radius:18px;background:rgba(255,255,255,.16);transition:background-color .16s ease,transform .16s var(--suave)}
.pack-cabs img{flex:none;width:50px;height:50px;object-fit:contain;border-radius:50%;background:#fff;padding:5px}
.pack-cabs i{font-style:normal;min-width:0}
.pack-cabs b{display:block;font-weight:700;line-height:1.15;color:#fff}
.pack-cabs small{display:block;font-size:.92rem;font-weight:600;color:#fff}
.pack-cabs small del{margin-right:6px;font-weight:400;opacity:.75}
.pack-cabs span::after{content:"";position:absolute;right:13px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff}
.pack-cabs input:checked+span{background:#fff}
.pack-cabs input:checked+span b,.pack-cabs input:checked+span small{color:var(--morado)!important}
.pack-cabs input:checked+span::after{background:var(--magenta);box-shadow:none}
.pack-cabs input:checked+span::before{content:"";position:absolute;right:21px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg);z-index:1}
.pack-opciones input:focus-visible+span,.pack-cabs input:focus-visible+span{outline:3px solid var(--rosa);outline-offset:2px}
.pack-opciones label:active span,.pack-cabs label:active span{transform:scale(.97)}

/* Precio y lo que te llevas */
.pack-factura{display:flex;flex-direction:column;gap:14px;padding-top:6px;border-top:1px solid rgba(255,255,255,.3)}
.ficha-compra .pack-ahorro{padding:5px 12px;border-radius:999px;background:#fff;color:var(--morado)!important;font-size:.9rem;font-weight:700}
.pack-ahorro[hidden]{display:none}
.pack-iva{font-size:.85rem}
.pack-lleva p{margin:0 0 4px!important;font-size:.95rem!important;font-weight:700}
.pack-lleva ul{margin:0;padding:0;list-style:none}
.pack-lleva li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:1rem}
.pack-p .btn-brand{display:flex;align-items:center;gap:10px}

@media (hover:hover) and (pointer:fine){
  .pack-opciones input:not(:checked)+span:hover,.pack-cabs input:not(:checked)+span:hover{background:rgba(255,255,255,.26)}
}
/* La columna de mandos crece al añadir cabezales: el círculo no se recentra en ella,
   se queda arriba y acompaña al bajar (clip en vez de hidden para que funcione el sticky). */
@media (min-width:981px){
  .pack-p .ficha-galeria{--disco:min(44vw,70vh,660px);justify-content:flex-start;overflow:clip;padding-top:max(60px,calc((100svh - 104px - var(--disco))/2))}
  .pack-p #main-image-wrap{position:sticky;top:max(124px,calc((100svh - var(--disco))/2 + 52px))}
}
@media (max-width:520px){.pack-cabs{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pack-cabezales img{animation:none}.pack-movil{transition:none}}