/* ===========================================================
   ELCHE LOVE SALSA — Landing "Salsa & Bachata FINDE"
   Formato intensivo de fin de semana (1h30: 45' salsa + 45' bachata).
   Hereda componentes de styles.css + plus55.css (clases .p55-*).
   Aquí: TEMA NOCHE-FINDE (scoped .slwk) + componentes propios.
   =========================================================== */

/* ---------------------------------------------------------
   TEMA FINDE — índigo/violeta noche + teal + oro (scoped .slwk)
   --------------------------------------------------------- */
body.slwk{
  --c-red:#7A5CFF;--c-red-strong:#5F3FE0;
  --c-pink:#B05CFF;--c-teal:#1FD3C4;--c-yellow:#FFC531;
  --c-orange:#2FB6FF;--c-green:#1FD3C4;--c-blue:#7A5CFF;
  --primary:#7A5CFF;--primary-strong:#5F3FE0;--on-primary:#fff;
  --accent:#1FD3C4;--accent-2:#FFC531;--pop:#B05CFF;
  --line:rgba(150,130,255,.16);
  --btn-shadow:0 18px 40px -14px rgba(122,92,255,.6);
  --band-bg:linear-gradient(115deg,#5F3FE0 0%,#7A5CFF 50%,#2FB6FF 100%);
  --band-ink:#fff;--band-eyebrow:#D9CCFF;
  --hero-fallback:#0d0820;
}
.slwk .btn:hover{box-shadow:0 22px 50px -14px rgba(122,92,255,.72)}
.slwk .feature__ico,.slwk .contact__perk .ico{background:color-mix(in srgb,var(--primary) 20%,transparent)}

/* --- Motivo de fondo: notas musicales muy tenues --- */
body.slwk::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%20viewBox='0%200%20320%20320'%3E%3Cg%20fill='%237A5CFF'%3E%3Cpath%20transform='translate(30%2044)%20scale(2.6)'%20d='M12%203v10.55A4%204%200%201014%2017V7h4V3h-6z'/%3E%3Cpath%20transform='translate(210%20200)%20scale(1.9)'%20d='M12%203v10.55A4%204%200%201014%2017V7h4V3h-6z'/%3E%3Cpath%20transform='translate(170%2028)%20scale(1.2)'%20d='M9%203v10.55A4%204%200%201011%2017V7h6v6.55A4%204%200%201019%2017V3H9z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:360px 360px;
}
/* resplandor noche detrás del hero */
body.slwk .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 108%,rgba(122,92,255,.55),transparent 60%),
             radial-gradient(90% 60% at 85% 0%,rgba(31,211,196,.32),transparent 55%)}

/* --- Re-color de acentos que en plus55 venían fijos --- */
.slwk .p55-recognize .p55-rec:nth-child(1) .p55-rec__q{background:linear-gradient(135deg,#7A5CFF,#5F3FE0)}
.slwk .p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,#2FB6FF,#1E86E0)}
.slwk .p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,#1FD3C4,#14A79A)}
.slwk .p55-recognize .p55-rec:nth-child(4) .p55-rec__q{background:linear-gradient(135deg,#B05CFF,#8B3FE0)}
.slwk .p55-recognize__after .p55-script{color:var(--accent-2)}

.slwk .p55-pillars .p55-pillar:nth-child(1)::before{background:#7A5CFF}
.slwk .p55-pillars .p55-pillar:nth-child(1) .p55-pillar__ico{color:#7A5CFF;background:color-mix(in srgb,#7A5CFF 16%,transparent)}
.slwk .p55-pillars .p55-pillar:nth-child(1) li svg{color:#7A5CFF}
.slwk .p55-pillars .p55-pillar:nth-child(2)::before{background:#1FD3C4}
.slwk .p55-pillars .p55-pillar:nth-child(2) .p55-pillar__ico{color:#1FD3C4;background:color-mix(in srgb,#1FD3C4 16%,transparent)}
.slwk .p55-pillars .p55-pillar:nth-child(2) li svg{color:#1FD3C4}
.slwk .p55-pillars .p55-pillar:nth-child(3)::before{background:#FFC531}
.slwk .p55-pillars .p55-pillar:nth-child(3) .p55-pillar__ico{color:#E39A18;background:color-mix(in srgb,#FFC531 18%,transparent)}
.slwk .p55-pillars .p55-pillar:nth-child(3) li svg{color:#E39A18}

.slwk .p55-steps .p55-step:nth-child(1) .p55-step__num{background:linear-gradient(135deg,#7A5CFF,#5F3FE0);color:#fff}
.slwk .p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,#2FB6FF,#1E86E0);color:#fff}
.slwk .p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,#FFC531,#E39A18);color:#3a2c08}
.slwk .p55-classes__media .badge{background:var(--accent-2);color:#3a2408}
.slwk .p55-offer__aside::after{background:radial-gradient(circle,rgba(31,211,196,.4),transparent 60%)}
.slwk .p55-offer__tag{background:var(--accent-2);color:#3a2408}

/* ---------------------------------------------------------
   HERO propio — titular finde, muy llamativo
   --------------------------------------------------------- */
.slwk-hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:.55em 1.15em;border-radius:999px;
  background:color-mix(in srgb,var(--pop) 20%,transparent);border:1px solid color-mix(in srgb,var(--pop) 50%,transparent);
  color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(4px);margin-bottom:22px}
.slwk-hero__badge .dot{width:9px;height:9px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 4px color-mix(in srgb,var(--pop) 28%,transparent)}
.slwk-hero h1 .fire{background:linear-gradient(100deg,#B05CFF 0%,#7A5CFF 50%,#2FB6FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(122,92,255,.35))}
.slwk-hero__amp{font-family:var(--font-script);color:var(--accent-2);-webkit-text-fill-color:var(--accent-2);font-size:.62em;padding:0 .12em;filter:none}

/* ---------------------------------------------------------
   BLOQUE "CÓMO FUNCIONA LA CLASE" — 45' + 45'
   --------------------------------------------------------- */
.slwk-split{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,24px);align-items:stretch;margin-top:8px}
.slwk-half{position:relative;overflow:hidden;border-radius:calc(var(--radius) + 4px);padding:clamp(28px,3.4vw,46px);
  border:1px solid var(--line);box-shadow:var(--card-shadow);display:flex;flex-direction:column;justify-content:center}
.slwk-half--salsa{background:linear-gradient(150deg,color-mix(in srgb,#7A5CFF 22%,var(--surface)),var(--surface))}
.slwk-half--bachata{background:linear-gradient(150deg,color-mix(in srgb,#2FB6FF 22%,var(--surface)),var(--surface))}
.slwk-half__time{font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1}
.slwk-half--salsa .slwk-half__time{color:#9B85FF}
.slwk-half--bachata .slwk-half__time{color:#5FC8FF}
.slwk-half__label{display:block;font-weight:800;font-size:1.5rem;margin:6px 0 8px;letter-spacing:.01em}
.slwk-half p{color:var(--ink-soft);font-size:1rem;max-width:34ch}
.slwk-split__plus{display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);color:var(--accent-2)}
.slwk-split__foot{text-align:center;margin-top:clamp(22px,3vw,32px)}
.slwk-split__pill{display:inline-flex;align-items:center;gap:.6em;font-weight:800;font-size:1.05rem;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  padding:.7em 1.4em;border-radius:999px}
.slwk-split__pill svg{width:22px;height:22px;color:var(--accent)}

/* ---------------------------------------------------------
   BANDA DE CIFRAS (prueba social rápida)
   --------------------------------------------------------- */
.slwk-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);text-align:center}
.slwk-fig{padding:8px}
.slwk-fig b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;
  background:linear-gradient(120deg,#fff,#D9CCFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.slwk-fig span{display:block;margin-top:6px;font-weight:700;font-size:.98rem;color:color-mix(in srgb,var(--band-ink) 82%,transparent)}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:860px){
  .slwk-split{grid-template-columns:1fr}
  .slwk-split__plus{padding:6px 0}
  .slwk-figs{grid-template-columns:repeat(2,1fr);gap:26px 14px}
}