/* ===========================================================
   ELCHE LOVE SALSA — Landing "Salsa & Bachata"
   Hereda componentes de styles.css + plus55.css (clases .p55-*).
   Aquí: TEMA FUEGO (scoped .slsb) + componentes propios de venta.
   =========================================================== */

/* ---------------------------------------------------------
   TEMA FUEGO — rojo pasión + naranja mango + oro (scoped .slsb)
   --------------------------------------------------------- */
body.slsb{
  --c-red:#FF2D55;--c-red-strong:#E01E45;
  --c-pink:#FF4F8B;--c-teal:#12C7B0;--c-yellow:#FFC531;
  --c-orange:#FF7A18;--c-green:#12C7B0;--c-blue:#8B5CFF;
  --primary:#FF2D55;--primary-strong:#E01E45;--on-primary:#fff;
  --accent:#FF7A18;--accent-2:#FFC531;--pop:#FF2D55;
  --line:rgba(255,120,80,.15);
  --btn-shadow:0 18px 40px -14px rgba(255,45,85,.62);
  --band-bg:linear-gradient(115deg,#FF2D55 0%,#FF5A1E 55%,#FF9A18 100%);
  --band-ink:#fff;--band-eyebrow:#FFE1C4;
  --hero-fallback:#180510;
}
.slsb .btn:hover{box-shadow:0 22px 50px -14px rgba(255,45,85,.72)}
.slsb .feature__ico,.slsb .contact__perk .ico{background:color-mix(in srgb,var(--primary) 20%,transparent)}

/* --- Motivo de fondo: notas musicales muy tenues --- */
body.slsb::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='%23FF7A18'%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 fuego detrás del hero */
body.slsb .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 108%,rgba(255,45,85,.55),transparent 60%),
             radial-gradient(90% 60% at 85% 0%,rgba(255,122,24,.35),transparent 55%)}

/* --- Re-color de acentos que en plus55 venían fijos (rosa/verde/oro) --- */
.slsb .p55-recognize .p55-rec:nth-child(1) .p55-rec__q{background:linear-gradient(135deg,#FF2D55,#E01E45)}
.slsb .p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,#FF7A18,#E35A0C)}
.slsb .p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,#FFC531,#E39A18)}
.slsb .p55-recognize .p55-rec:nth-child(4) .p55-rec__q{background:linear-gradient(135deg,#8B5CFF,#6A3FE0)}
.slsb .p55-recognize__after .p55-script{color:var(--accent-2)}

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

.slsb .p55-steps .p55-step:nth-child(1) .p55-step__num{background:linear-gradient(135deg,#FF2D55,#E01E45);color:#fff}
.slsb .p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,#FF7A18,#E35A0C);color:#fff}
.slsb .p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,#FFC531,#E39A18);color:#3a2c08}
.slsb .p55-classes__media .badge{background:var(--accent-2);color:#3a2408}
.slsb .p55-offer__aside::after{background:radial-gradient(circle,rgba(255,154,24,.4),transparent 60%)}
.slsb .p55-offer__tag{background:var(--accent-2);color:#3a2408}

/* ---------------------------------------------------------
   HERO propio — titular a dos estilos, muy llamativo
   --------------------------------------------------------- */
.slsb-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;text-transform:uppercase;backdrop-filter:blur(4px);
  /* Va debajo del titular, donde antes estaba el párrafo. En una sola línea
     siempre: el texto es largo, así que el tamaño y el espaciado se ajustan al
     ancho de pantalla en vez de dejar que parta en dos. */
  margin:18px 0 0;white-space:nowrap;
  font-size:clamp(.56rem,2.3vw,.82rem);letter-spacing:clamp(.02em,.5vw,.12em)}
.slsb-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)}
.slsb-hero h1 .fire{background:linear-gradient(100deg,#FF2D55 0%,#FF7A18 55%,#FFC531 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(255,90,30,.35))}
.slsb-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}
.slsb-hero h1{font-size:clamp(2.6rem,6vw,5.4rem);line-height:.95}
.slsb-hero h1 .fire{font-size:1.9em;display:inline-block;line-height:.9;
  /* Bebas Neue viene en un solo grosor. El contorno la engorda, y como el
     relleno es un degradado recortado al texto, el degradado cubre también ese
     contorno: engorda sin perder el fuego. */
  -webkit-text-stroke:.038em transparent;paint-order:stroke fill}
.slsb-hero h1 .slsb-hero__amp{font-size:1.1em}
@media (max-width:640px){.slsb-hero h1 .fire{font-size:1.55em}}

/* ---------------------------------------------------------
   SECCIÓN "DOS ESTILOS" — Salsa vs Bachata
   --------------------------------------------------------- */
.slsb-styles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px)}
.slsb-style{position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;min-height:clamp(360px,42vw,520px);
  box-shadow:var(--card-shadow);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end}
.slsb-style image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.slsb-style__grad{position:absolute;inset:0;z-index:1;pointer-events:none}
.slsb-style:nth-child(1) .slsb-style__grad{background:linear-gradient(to top,rgba(20,3,10,.92) 8%,rgba(255,45,85,.28) 55%,transparent 100%)}
.slsb-style:nth-child(2) .slsb-style__grad{background:linear-gradient(to top,rgba(16,4,20,.92) 8%,rgba(139,92,255,.3) 55%,transparent 100%)}
.slsb-style__body{position:relative;z-index:2;padding:clamp(26px,3.4vw,44px)}
.slsb-style__tag{display:inline-block;font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.42em 1em;border-radius:999px;margin-bottom:16px;color:#fff}
.slsb-style:nth-child(1) .slsb-style__tag{background:var(--c-red)}
.slsb-style:nth-child(2) .slsb-style__tag{background:var(--c-blue)}
.slsb-style h3{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:.9;letter-spacing:.01em;color:#fff;margin-bottom:12px}
.slsb-style p{color:rgba(255,255,255,.86);font-size:1.06rem;max-width:42ch;margin-bottom:20px}
.slsb-style__meta{display:flex;flex-wrap:wrap;gap:10px}
.slsb-style__meta span{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:.5em 1em;border-radius:999px;backdrop-filter:blur(4px)}

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

/* ---------------------------------------------------------
   Estrellas con resplandor (reutilizable)
   --------------------------------------------------------- */
.slsb-stars{display:flex;gap:6px;justify-content:center;color:var(--accent-2);margin-top:14px}
.slsb-stars svg{width:26px;height:26px;filter:drop-shadow(0 0 6px rgba(255,197,49,.9)) drop-shadow(0 0 16px rgba(255,197,49,.55))}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:860px){
  .slsb-styles{grid-template-columns:1fr}
  .slsb-figs{grid-template-columns:repeat(2,1fr);gap:26px 14px}
}









/* ---------- Carrusel de vídeos de clase ----------
   Sangra hasta el borde de la pantalla para que se vea el trozo de la siguiente
   tarjeta: así se entiende solo que hay más y se puede deslizar. */
.slsb .vids-scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px var(--pad) 8px}
.slsb .vids-scroll::-webkit-scrollbar{display:none}
.slsb .vids-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,260px);gap:14px;
  width:max-content;margin-inline:auto}
.slsb .vid-item{scroll-snap-align:center;border-radius:20px;overflow:hidden;background:#14090d;
  aspect-ratio:9/16;box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.slsb .vid-item video{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:900px){
  .slsb .vids-track{grid-auto-columns:240px;gap:18px}
}


/* ---------- Sin zoom por doble toque ----------
   Quita el salto que pega la pantalla al pulsar dos veces seguidas, que en móvil
   pasa sobre todo al darle rápido a un botón. De paso elimina la espera de ~300 ms
   que algunos navegadores dejaban por si venía un segundo toque, así que los
   botones responden al instante.

   El zoom de pellizco SIGUE funcionando, y es a propósito: hay gente que necesita
   ampliar para leer. Bloquearlo del todo con user-scalable=no la dejaría fuera, y
   además el iPhone ignora esa instrucción desde hace años. */
body.slsb{touch-action:manipulation}




/* ===========================================================
   HERO — la promoción es el titular
   -----------------------------------------------------------
   Sin recuadro ni marco: texto directo sobre el vídeo, igual que el resto del
   hero. El reclamo es la matrícula; "aprende a bailar" queda debajo, de
   apoyo. Quien llega del anuncio viene por el 0€, no a enterarse de que
   damos salsa.

   Todo esto desaparece solo el 1 de diciembre y vuelve el titular de siempre,
   que está en el HTML esperando con data-tras-promo.
   =========================================================== */
.slsb-hero__cuando{
  display:block;font-weight:800;
  font-size:clamp(.66rem,2.5vw,.84rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}

/* El reclamo. "0€" va con el degradado de la casa y mucho más grande que la
   palabra: es la cifra la que para el dedo, no el sustantivo. */
/* Lleva el h1 delante a propósito: .slsb-hero h1 es más específico que una
   clase suelta y, sin esto, el tamaño de siempre ganaba y el reclamo se
   quedaba igual de pequeño por mucho que se cambiara aquí. */
.slsb-hero h1.slsb-hero__oferta{
  margin-top:.12em;
  font-size:clamp(3.3rem,13.4vw,7rem);
  line-height:.88;letter-spacing:.005em;
  text-shadow:0 .06em .3em rgba(0,0,0,.55);
}
.slsb-hero h1.slsb-hero__oferta .fire{
  font-size:1.55em;display:inline-block;
  /* El degradado se pinta sobre la CAJA del elemento y se recorta a la forma
     de la letra. Con line-height .82 la caja quedaba más baja que el número,
     así que a la parte de arriba del 0 no le llegaba pintura y parecía
     cortada. Se le da altura de sobra y se compensa con margen negativo para
     que el renglón no crezca. */
  line-height:1;padding-block:.08em;margin-block:-.08em;
  vertical-align:-.04em;
  /* Bebas viene en un solo grosor; el contorno la engorda y, como el relleno
     es un degradado recortado al texto, el degradado cubre también el
     contorno. Engorda sin perder el fuego. */
  -webkit-text-stroke:.03em transparent;paint-order:stroke fill;
}

.slsb-hero h1.slsb-hero__oferta s{
  font-size:.52em;text-decoration:line-through;
  text-decoration-thickness:.09em;text-decoration-color:var(--accent);
  color:rgba(255,255,255,.72);
  margin-inline:.1em;
}

/* La plataforma, con su icono y su propia línea. Va en el amarillo de la
   paleta y no en el naranja del precio: así se ve de un golpe que son dos
   cosas distintas y no una sola repetida. */
.slsb-hero__plataforma{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:.55em;font-weight:700;
  font-size:clamp(.95rem,3.8vw,1.26rem);line-height:1.2;
  color:var(--accent-2);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.slsb-hero__plataforma svg{width:1.3em;height:1.3em;flex:0 0 auto}
.slsb-hero__plataforma b{font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.slsb-hero__detalle{
  margin-top:.5em;font-size:clamp(.9rem,3.4vw,1.12rem);
  font-weight:600;color:rgba(255,255,255,.9);
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.slsb-hero__detalle s{
  text-decoration:line-through;text-decoration-thickness:.1em;
  text-decoration-color:var(--accent);opacity:.8;font-weight:800;
}
.slsb-hero__detalle b{color:var(--accent-2);font-weight:800}

.slsb-hero__secundario{
  margin-top:.7em;font-size:clamp(.82rem,3vw,1rem);
  font-weight:600;color:rgba(255,255,255,.76);
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}

.slsb-hero .hero__cta{margin-top:clamp(18px,3vw,26px)}
.slsb-hero .hero__cta .flecha{width:1.05em;height:1.05em;flex:0 0 auto;transition:transform .2s}
.slsb-hero .hero__cta .btn:hover .flecha{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .slsb-hero .hero__cta .flecha{transition:none}
}