/* ============================================================================
   PAQUETES — sección de paquetes de eventos (Producciones Interfaz).
   Reutiliza el shell de landing.css (nav/footer/wa). Prefijo .pk-.
   Diseño calcado del mockup: título centrado + ornamento, sidebar PAQUETES
   con activo rojo, tarjetas oscuras con precio dorado y features en 2 columnas.
   ============================================================================ */
.pk{
  --pk-bg:#0a0a0b; --pk-panel:#121214; --pk-panel2:#17171a; --pk-line:#242428;
  --pk-txt:#ececee; --pk-mut:#9a9aa2; --pk-faint:#6a6a72;
  --pk-red:#e50914; --pk-red2:#ff2b38; --pk-gold:#ffc24b; --pk-gold-dim:#7a5f22;
  background:var(--pk-bg); color:var(--pk-txt);
  font-family:'Barlow',system-ui,-apple-system,sans-serif; overflow-x:hidden;
}
.pk .pk-wrap{max-width:1260px;margin:0 auto;padding:0 26px}
.pk a{color:inherit;text-decoration:none}
.pk img{max-width:100%;display:block}
.pk :focus-visible{outline:2px solid var(--pk-red);outline-offset:3px;border-radius:5px}

/* encabezado centrado con ornamento */
.pk-header{padding:56px 0 34px;text-align:center;border-bottom:1px solid var(--pk-line)}
.pk-header h1{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:clamp(34px,4.8vw,56px);font-weight:700;
  letter-spacing:.01em;line-height:1.02;margin:0;color:#fff}
.pk-ornament{display:flex;align-items:center;justify-content:center;gap:13px;margin:16px 0 12px}
.pk-ornament::before,.pk-ornament::after{content:"";width:84px;height:1px;
  background:linear-gradient(90deg,transparent,var(--pk-gold-dim))}
.pk-ornament::after{background:linear-gradient(90deg,var(--pk-gold-dim),transparent)}
.pk-ornament i{width:8px;height:8px;background:var(--pk-gold);transform:rotate(45deg);box-shadow:0 0 8px rgba(255,194,75,.4)}
.pk-header .sub{color:var(--pk-mut);font-size:clamp(15px,1.5vw,17.5px);margin:0 auto;max-width:62ch;line-height:1.55}

/* layout sidebar + contenido */
.pk-layout{display:grid;grid-template-columns:232px 1fr;gap:44px;align-items:start;padding:36px 0 82px}

/* sidebar */
.pk-side{position:sticky;top:96px}
.pk-side h3{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:14px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pk-red);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--pk-line)}
.pk-side nav{display:flex;flex-direction:column;gap:2px}
.pk-side a{position:relative;display:block;padding:11px 14px 11px 22px;border-radius:9px;color:var(--pk-mut);
  font-size:15px;font-weight:500;transition:color .18s,background .18s}
.pk-side a:hover{color:#fff;background:var(--pk-panel)}
.pk-side a.active{color:#fff;background:linear-gradient(90deg,rgba(229,9,20,.13),transparent 72%)}
.pk-side a.active::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--pk-red);box-shadow:0 0 9px 2px rgba(229,9,20,.55)}

/* selector móvil */
.pk-cats-mobile{display:none;gap:8px;overflow-x:auto;padding:2px 0 16px;-webkit-overflow-scrolling:touch}
.pk-cats-mobile a{flex:0 0 auto;white-space:nowrap;padding:9px 15px;border-radius:999px;border:1px solid var(--pk-line);
  background:var(--pk-panel);color:var(--pk-mut);font-size:13.5px;font-weight:600}
.pk-cats-mobile a.active{color:#fff;border-color:var(--pk-red);background:rgba(229,9,20,.12)}

/* grid de paquetes 3×2 */
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pk-card{display:flex;flex-direction:column;background:var(--pk-panel);border:1px solid var(--pk-line);
  border-radius:15px;overflow:hidden;transition:border-color .22s,transform .22s}
.pk-card:hover{border-color:var(--pk-gold-dim);transform:translateY(-4px)}
.pk-card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.pk-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pk-card:hover .pk-card-img img{transform:scale(1.05)}
.pk-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,10,12,.85))}
.pk-card-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.pk-card h3{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:24px;font-weight:700;color:#fff;
  letter-spacing:.01em;margin:0;text-align:center}
.pk-price{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:31px;font-weight:700;color:var(--pk-gold);
  line-height:1;margin:6px 0 0;text-align:center}
.pk-price small{font-size:.42em;font-weight:600;letter-spacing:.06em;margin-left:5px;color:var(--pk-gold);opacity:.72;vertical-align:middle}
.pk-divider{height:1px;background:var(--pk-line);margin:16px 0 15px}
.pk-features{list-style:none;margin:0 0 18px;padding:0;column-count:2;column-gap:18px}
.pk-features li{break-inside:avoid;position:relative;padding-left:18px;margin-bottom:10px;font-size:13px;
  color:var(--pk-mut);line-height:1.42}
.pk-features li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;border-radius:2px;background:var(--pk-gold)}
.pk-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:auto;padding:12px 18px;
  border-radius:10px;background:var(--pk-red);color:#fff;font-weight:700;font-size:14.5px;transition:background .2s,transform .2s}
.pk-cta:hover{background:var(--pk-red2);transform:translateY(-2px)}
.pk-cta svg{width:16px;height:16px}

/* próximamente */
.pk-soon-box{border:1px dashed var(--pk-line);border-radius:16px;padding:64px 30px;text-align:center;background:var(--pk-panel)}
.pk-soon-box .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:14px;display:grid;place-items:center;
  background:rgba(229,9,20,.1);color:var(--pk-red)}
.pk-soon-box .ic svg{width:28px;height:28px}
.pk-soon-box h2{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:30px;color:#fff;margin:0 0 8px}
.pk-soon-box p{color:var(--pk-mut);font-size:15.5px;max-width:48ch;margin:0 auto 22px;line-height:1.55}
.pk-soon-box .pk-cta{display:inline-flex}

/* reveal */
.pk-reveal{transition:opacity .5s ease,transform .5s ease}
.pk-anim .pk-reveal{opacity:0;transform:translateY(16px)}
.pk-anim .pk-reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1024px){
  .pk-layout{grid-template-columns:1fr;gap:22px;padding-top:20px}
  .pk-side{display:none}
  .pk-cats-mobile{display:flex}
  .pk-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pk-grid{grid-template-columns:1fr}
  .pk-header{padding:40px 0 26px}
  .pk-features{column-count:2}
}
@media (prefers-reduced-motion:reduce){
  .pk *,.pk *::before,.pk *::after{transition:none!important;animation:none!important}
  .pk-anim .pk-reveal{opacity:1;transform:none}
}
