/* ===========================================================
ELCHE LOVE SALSA — Landing "Baila +55"
Estilos propios. Hereda tokens de themes.css + styles.css
Sube legibilidad (público +55) y añade componentes de venta.
=========================================================== */
/* ---- Legibilidad: cuerpo y leads algo mayores ---- */
.p55 .lead{font-size:clamp(1.16rem,2vw,1.42rem);line-height:1.55}
.p55 p{font-size:1.06rem}
.p55 .btn{font-size:1.06rem;padding:1.1em 1.9em}
.p55 .btn--lg{font-size:1.18rem;padding:1.2em 2.3em}
/* eyebrow script un poco más contenido en esta página */
.p55 .eyebrow{font-size:clamp(1.6rem,3.4vw,2.5rem)}
/* La vuelta a la home vive ahora en styles.css, sin apellidos. Las reglas
que había aquí apuntaban a .p55, y ninguna de las tres landings que ya
llevaban el botón (kizomba, bodas y finde) tiene esa clase: nunca se
aplicaron, y por eso se veía el icono y la palabra apilados. */
/* ---- HERO: badge superior + tira de confianza ---- */
.p55-hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:.55em 1.15em;border-radius:999px;
background:color-mix(in srgb,var(--pop) 18%,transparent);border:1px solid color-mix(in srgb,var(--pop) 45%,transparent);
color:#fff;font-weight:800;text-transform:uppercase;backdrop-filter:blur(4px);
/* Va debajo del titular, igual que en la landing de salsa, y en una sola
línea siempre: el tamaño y el espaciado se ajustan al ancho de pantalla
en vez de dejar que el texto parta en dos. */
margin:18px 0 0;white-space:nowrap;
font-size:clamp(.64rem,2.5vw,.82rem);letter-spacing:clamp(.05em,.4vw,.12em)}
.p55-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)}
.p55-trust{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center;margin-top:34px;color:#fff}
.p55-trust__item{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:1rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.p55-trust__item b{font-family:var(--font-display);font-size:1.5rem;line-height:1}
.p55-trust__stars{display:inline-flex;gap:2px;color:#FBB034}
.p55-trust__stars svg{width:20px;height:20px}
.p55-trust__sep{width:1px;height:26px;background:rgba(255,255,255,.3)}
/* ---- Sección "¿Te suena?" (identificación) ---- */
.p55-recognize{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,24px)}
.p55-rec{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:26px 28px;box-shadow:var(--card-shadow)}
.p55-rec__q{flex-shrink:0;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
font-family:var(--font-display);font-size:1.7rem;color:var(--on-primary);background:linear-gradient(135deg,var(--pop),#b8345e)}
.p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,var(--c-teal),#2f8f6b)}
.p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,var(--c-yellow),#c8842f)}
.p55-recognize .p55-rec:nth-child(4) .p55-rec__q{background:linear-gradient(135deg,var(--primary),var(--primary-strong))}
.p55-rec h3{font-size:1.2rem;letter-spacing:.01em;margin-bottom:6px}
.p55-rec p{color:var(--ink-soft);font-size:1rem}
.p55-recognize__after{text-align:center;margin-top:clamp(34px,5vw,52px)}
.p55-recognize__after .p55-script{font-family:var(--font-script);color:var(--accent-2);font-size:clamp(2rem,5vw,3.2rem);
line-height:1.1;transform:rotate(-2deg);display:inline-block}
/* ---- Pilares de beneficios ---- */
.p55-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.p55-pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(28px,3vw,38px) clamp(26px,3vw,34px);box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.p55-pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:5px}
.p55-pillars .p55-pillar:nth-child(1)::before{background:var(--c-red)}
.p55-pillars .p55-pillar:nth-child(2)::before{background:var(--c-teal)}
.p55-pillars .p55-pillar:nth-child(3)::before{background:var(--c-pink)}
.p55-pillar__ico{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin-bottom:20px}
.p55-pillar__ico svg{width:32px;height:32px}
.p55-pillars .p55-pillar:nth-child(1) .p55-pillar__ico{color:var(--c-red);background:color-mix(in srgb,var(--c-red) 16%,transparent)}
.p55-pillars .p55-pillar:nth-child(2) .p55-pillar__ico{color:var(--c-teal);background:color-mix(in srgb,var(--c-teal) 16%,transparent)}
.p55-pillars .p55-pillar:nth-child(3) .p55-pillar__ico{color:var(--c-pink);background:color-mix(in srgb,var(--c-pink) 16%,transparent)}
.p55-pillar h3{font-size:1.5rem;letter-spacing:.01em;margin-bottom:12px}
.p55-pillar ul{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.p55-pillar li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-soft);font-size:1.02rem;line-height:1.45}
.p55-pillar li svg{width:21px;height:21px;flex-shrink:0;margin-top:2px;color:var(--accent)}
.p55-pillars .p55-pillar:nth-child(1) li svg{color:var(--c-red)}
.p55-pillars .p55-pillar:nth-child(2) li svg{color:var(--c-teal)}
.p55-pillars .p55-pillar:nth-child(3) li svg{color:var(--c-pink)}
/* ---- "Cómo son las clases" + media ---- */
.p55-classes{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,5vw,72px);align-items:center}
.p55-classes__media{position:relative}
.p55-classes__media image-slot{width:100%;aspect-ratio:4/5;display:block}
.p55-classes__media .badge{position:absolute;left:-14px;bottom:-18px;background:var(--accent);color:#0f231d;border-radius:var(--radius);
padding:16px 22px;box-shadow:0 22px 44px -18px rgba(0,0,0,.5);text-align:center;rotate:-4deg}
.p55-classes__media .badge b{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1}
.p55-classes__media .badge span{font-size:.8rem;letter-spacing:.03em}
.p55-feats{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.p55-feat{display:flex;gap:16px;align-items:flex-start}
.p55-feat__ico{flex-shrink:0;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary)}
.p55-feat__ico svg{width:25px;height:25px}
.p55-feat h3{font-size:1.18rem;margin-bottom:3px}
.p55-feat p{color:var(--ink-soft);font-size:1rem}
/* ---- "No necesitas..." (derribar objeciones) ---- */
.p55-noneed{text-align:center}
.p55-noneed__grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:8px auto 0;max-width:880px}
.p55-noneed__chip{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.4em;border-radius:999px;
background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:1.05rem;color:var(--ink-soft)}
.p55-noneed__chip s{text-decoration-color:var(--c-red);text-decoration-thickness:2px;color:var(--ink)}
.p55-noneed__chip svg{width:20px;height:20px;color:var(--c-red)}
.p55-noneed__line{margin-top:clamp(30px,4vw,46px);font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.8rem);
text-transform:uppercase;letter-spacing:.01em;line-height:1.05;max-width:18ch;margin-inline:auto;text-wrap:balance}
.p55-noneed__line em{font-style:normal;color:var(--primary)}
/* ---- Pasos (cómo empezar) ---- */
.p55-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);counter-reset:step}
.p55-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(30px,3vw,40px) clamp(26px,3vw,32px);box-shadow:var(--card-shadow)}
.p55-step__num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);
font-size:1.7rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-strong));margin-bottom:18px}
.p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,var(--c-teal),#2f8f6b);color:#0f231d}
.p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,var(--pop),#b8345e)}
.p55-step h3{font-size:1.4rem;margin-bottom:8px}
.p55-step p{color:var(--ink-soft);font-size:1.02rem}
.p55-step__arrow{position:absolute;right:-22px;top:50%;transform:translateY(-50%);z-index:2;color:var(--line)}
.p55-step__arrow svg{width:30px;height:30px}
/* ---- Oferta / precio ---- */
.p55-offer{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--surface);border:1px solid var(--line);
border-radius:calc(var(--radius) + 6px);overflow:hidden;box-shadow:var(--card-shadow)}
.p55-offer__main{padding:clamp(34px,4.5vw,56px)}
.p55-offer__main .eyebrow{margin-bottom:6px}
.p55-offer__list{display:flex;flex-direction:column;gap:14px;margin:26px 0 0}
.p55-offer__list li{display:flex;gap:13px;align-items:flex-start;font-size:1.08rem;font-weight:600}
.p55-offer__list li svg{width:24px;height:24px;flex-shrink:0;color:var(--accent);margin-top:1px}
.p55-offer__aside{background:var(--band-bg);color:var(--band-ink);padding:clamp(34px,4.5vw,56px);
display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden}
.p55-offer__aside::after{content:"";position:absolute;right:-30%;top:-30%;width:80%;height:80%;
background:radial-gradient(circle,rgba(255,111,89,.28),transparent 60%);pointer-events:none}
.p55-offer__tag{position:relative;z-index:2;display:inline-block;align-self:center;background:var(--c-yellow);color:#3a2c08;
font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.5em 1.1em;border-radius:999px;margin-bottom:18px}
.p55-offer__price{position:relative;z-index:2;font-family:var(--font-display);line-height:.9}
.p55-offer__price .free{font-size:clamp(3.2rem,8vw,5rem);display:block;color:#fff}
.p55-offer__price .sub{font-size:1.1rem;font-weight:600;font-family:var(--font-body);color:color-mix(in srgb,var(--band-ink) 80%,transparent);margin-top:10px;display:block}
.p55-offer__note{position:relative;z-index:2;margin-top:8px;font-size:.95rem;color:color-mix(in srgb,var(--band-ink) 72%,transparent)}
.p55-offer__aside .btn{position:relative;z-index:2;margin-top:24px;width:100%;justify-content:center}
/* editable price hint */
.p55-editable{border-bottom:2px dashed color-mix(in srgb,var(--accent-2) 60%,transparent)}
/* ---- CTA final band ---- */
.p55-finalcta{text-align:center}
.p55-finalcta .p55-cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
/* ---- Responsive ---- */
@media (max-width:980px){
.p55-pillars{grid-template-columns:1fr}
.p55-steps{grid-template-columns:1fr}
.p55-step__arrow{display:none}
.p55-classes{grid-template-columns:1fr}
.p55-classes__media{max-width:440px;margin-inline:auto}
.p55-offer{grid-template-columns:1fr}
}
@media (max-width:640px){
.p55-recognize{grid-template-columns:1fr}
.p55-trust__sep{display:none}
}
/* ===========================================================
TEMA ROSA CHICLE — solo landing +55 (scoped .p55)
Reasigna la paleta a rosa chicle + morado/oro de apoyo.
=========================================================== */
body.p55{
--c-red:#FF4D9E;--c-red-strong:#E23A87;
--c-pink:#FF8FC4;--c-teal:#C07BFF;--c-yellow:#FFC24B;
--c-orange:#FF8FC4;--c-green:#C07BFF;--c-blue:#C07BFF;
--primary:#FF4D9E;--primary-strong:#E23A87;--on-primary:#4a0a24;
--accent:#FF8FC4;--accent-2:#FFC24B;--pop:#FF4D9E;
--line:rgba(255,180,214,.13);
--btn-shadow:0 18px 40px -14px rgba(255,77,158,.6);
--band-bg:linear-gradient(135deg,#FF4D9E 0%,#E23A87 100%);
--band-ink:#fff;--band-eyebrow:#FFD9EC;
--hero-fallback:#2a0a1a;
}
/* iconos check / listas en rosa cálido */
.p55 .feature__ico,.p55 .contact__perk .ico{background:color-mix(in srgb,var(--primary) 20%,transparent)}
/* botón primario: texto legible sobre rosa chicle */
.p55 .btn{--on-primary:#4a0a24}
.p55 .btn:hover{box-shadow:0 22px 48px -14px rgba(255,77,158,.7)}
/* --- Corazones de fondo, muy tenues (mucha opacidad/faded) --- */
body.p55::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.11;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20300%20300'%3E%3Cg%20fill='%23FF4D9E'%3E%3Cpath%20transform='translate(24%2038)%20scale(3.4)'%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3Cpath%20transform='translate(186%20176)%20scale(2.2)'%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3Cpath%20transform='translate(150%2020)%20scale(1.4)'%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3C/g%3E%3C/svg%3E");
background-size:340px 340px;
}
/* --- Ajustes de degradados que traían verdes/corales fijos --- */
.p55 .p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,#C07BFF,#8E5BD8)}
.p55 .p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,#FFC24B,#E39A18)}
.p55 .p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,#C07BFF,#8E5BD8);color:#fff}
.p55 .p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,#FF4D9E,#E23A87);color:#fff}
.p55 .p55-classes__media .badge{background:#C07BFF;color:#fff}
.p55 .p55-offer__aside::after{background:radial-gradient(circle,rgba(255,143,196,.35),transparent 60%)}
.p55 .p55-offer__tag{background:var(--c-yellow);color:#3a2c08}
/* pilares beneficios: rosa · morado · oro */
.p55 .p55-pillars .p55-pillar:nth-child(2)::before{background:#C07BFF}
.p55 .p55-pillars .p55-pillar:nth-child(2) .p55-pillar__ico{color:#C07BFF;background:color-mix(in srgb,#C07BFF 16%,transparent)}
.p55 .p55-pillars .p55-pillar:nth-child(2) li svg{color:#C07BFF}
.p55 .p55-pillars .p55-pillar:nth-child(3)::before{background:#FFC24B}
.p55 .p55-pillars .p55-pillar:nth-child(3) .p55-pillar__ico{color:#E39A18;background:color-mix(in srgb,#FFC24B 18%,transparent)}
.p55 .p55-pillars .p55-pillar:nth-child(3) li svg{color:#E39A18}
/* ===========================================================
VÍDEOS — Cafecito + Testimonios (carrusel)
=========================================================== */
.p55-cafe__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px);align-items:start;max-width:980px;margin-top:clamp(20px,3vw,32px)}
.p55-cafe__intro .lead strong,.p55-cafe__intro p strong{color:var(--ink);font-weight:750}
.p55-cafe__intro>p:not(.lead){color:var(--ink-soft);font-size:1.06rem}
.p55-cafe__chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:760px){.p55-cafe__intro{grid-template-columns:1fr}}
.vid-carousel{position:relative;margin-top:clamp(30px,4vw,48px)}
.vid-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,400px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 22px;scrollbar-width:none}
.vid-track::-webkit-scrollbar{display:none}
.vid-track--portrait{grid-auto-columns:min(66vw,290px)}
.vid-card{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;background:#160a10;box-shadow:var(--card-shadow);isolation:isolate}
.vid-card--portrait{aspect-ratio:9/16}
.vid-card image-slot{position:absolute;inset:0;width:100%;height:100%}
.vid-card>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:4}
.vid-card__grad{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(15,6,10,.82),rgba(15,6,10,.04) 55%);pointer-events:none}
.vid-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:none;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 14px 32px -8px rgba(255,77,158,.75);cursor:pointer;transition:transform .2s}
.vid-play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--primary);opacity:.5;animation:pulse 2.4s ease-out infinite}
.vid-play:hover{transform:translate(-50%,-50%) scale(1.09)}
.vid-play svg{width:26px;height:26px;margin-left:3px}
.vid-card__cap{position:absolute;z-index:3;left:18px;bottom:16px;color:#fff;font-weight:750;font-size:1.02rem;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.vid-card.playing .vid-play,.vid-card.playing .vid-card__grad,.vid-card.playing .vid-card__cap,.vid-card.playing image-slot{opacity:0;pointer-events:none}
.vid-nav{position:absolute;top:calc(50% - 11px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -12px rgba(0,0,0,.7);backdrop-filter:blur(8px);transition:background .2s,color .2s,transform .2s}
.vid-nav:hover{background:var(--primary);color:#fff;border-color:transparent;transform:translateY(-50%) scale(1.06)}
.vid-nav svg{width:22px;height:22px}
.vid-nav--prev{left:-8px}
.vid-nav--next{right:-8px}
@media (max-width:640px){.vid-nav{display:none}}
.p55 #cafecito .title{font-size:clamp(2.6rem,7vw,5rem)}
.p55-cafe__stars{display:flex;gap:6px;justify-content:flex-start;margin-top:12px;color:#FFC24B}
.p55-cafe__stars svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(255,194,75,.9)) drop-shadow(0 0 14px rgba(255,194,75,.55))}
/* ---------- La palabra que destaca del titular ----------
Mismo recurso que en la landing de salsa, pero sin agrandar la palabra: allí
"Salsa" y "Bachata" son el titular entero y aquí van dentro de una frase. */
body.p55 .hero h1 .fire{
background:linear-gradient(100deg,var(--primary) 0%,var(--accent) 55%,var(--accent-2) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 4px 24px color-mix(in srgb,var(--primary) 35%,transparent));
/* Bebas Neue viene en un solo grosor, así que no vale pedirle negrita: el
navegador la falsearía y se vería sucia. El contorno engorda el trazo de
verdad, y como el relleno es un degradado recortado al texto, el degradado
cubre también ese contorno: engorda sin perder el color.
Es el mismo recurso que usa "SALSA Y BACHATA" en la otra landing. */
-webkit-text-stroke:.034em transparent;paint-order:stroke fill;
}
/* ---------- Reseña destacada ----------
Una sola opinión, grande y antes que las demás. Dentro de la rejilla su
texto tiraba de la altura de todas las otras y se quedaban con un palmo de
hueco; y además es la que importa en esta página, así que mejor sola. */
.gr-destacada{
position:relative;max-width:820px;margin:0 auto clamp(26px,4vw,40px);
padding:clamp(26px,4vw,40px) clamp(22px,3.4vw,38px) clamp(22px,3vw,32px);
border-radius:calc(var(--radius) + 6px);
background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 16%,#1A0D14),#15090F);
border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);
box-shadow:0 34px 70px -34px rgba(0,0,0,.8);
}
/* Las comillas, de adorno y por detrás: dan el aire de cita sin empujar nada. */
.gr-destacada__comillas{
position:absolute;top:-.16em;right:.18em;font-family:var(--font-display);
font-size:clamp(7rem,16vw,11rem);line-height:1;color:var(--primary);
opacity:.16;pointer-events:none;user-select:none;
}
.gr-destacada__texto{
position:relative;margin:0;font-size:clamp(1.02rem,2.5vw,1.22rem);
line-height:1.62;color:#F6E9EE;text-wrap:pretty;
}
.gr-destacada__pie{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:clamp(18px,2.6vw,26px);padding-top:16px;
border-top:1px solid color-mix(in srgb,var(--primary) 18%,transparent);
}
.gr-destacada__pie > div:not(.stars){display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.gr-destacada__pie b{font-size:1rem;color:#fff}
.gr-destacada__pie span{font-size:.84rem;color:var(--ink-soft)}
.gr-destacada__pie .stars{color:#FBBC05;margin:0;flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap}
.gr-destacada__pie .stars svg{width:17px;height:17px}
.gr-destacada__pie .gg{width:22px;height:22px;flex-shrink:0}
@media (max-width:520px){
/* En pantalla estrecha el nombre y las estrellas no caben en una línea. */
.gr-destacada__pie > div:not(.stars){margin-right:0;flex:1 1 auto}
.gr-destacada__pie .stars{flex:1 0 100%;order:3}
}
/* ---------- Titular del hero, a tamaño de cartel ----------
El global se queda corto aquí: a 390 px usaba su suelo de 2,5rem y dejaba
un palmo de aire a los lados. La medida la marca "para volver a bailar",
que es la línea larga; el tope de arriba evita que en pantalla grande se
coma el badge y el botón. */
/* La medida sale de medir, no de probar a ojo: con el titular partido en tres,
la línea más larga es "NUNCA ES TARDE", que ocupa 6,7 veces el cuerpo de la
letra. El hueco útil es el 90% del ancho de pantalla, así que el máximo que
entra son 13,4vw; se dejan 12,8 de margen. El techo de 8rem es lo que cabe
sin empujar el badge, el botón y la tarjeta del 2x1 fuera del hero. */
body.p55 .hero h1{font-size:clamp(2.5rem,12.8vw,8rem)}
/* ---------- Badge de promoción: dos líneas ----------
La primera manda (tipografía de cartel, grande) y la segunda acompaña, más
fina y pequeña, para que se distingan de un vistazo. Va aparte y solo para
esta landing porque la de salsa usa el mismo badge con otro texto, y ahí el
peso de la segunda línea tiene que seguir como estaba.
El cuerpo de la segunda línea está medido para que los dos nombres de clase
entren en UNA sola línea y el badge se quede en dos, como se pidió: con los
0,9rem de serie se partía en tres en el móvil. */
body.p55 .promo2x1__txt{
flex:0 0 100%;font-weight:500;font-size:clamp(.71rem,3.1vw,.92rem);
letter-spacing:.01em;opacity:.95;
}
/* En pantallas de 320 px —los móviles pequeños que aún circulan— el reclamo del
badge no cabe: medido, "🎁 ¡2 SEMANAS GRATIS!" ocupa 7,38 veces el cuerpo de
la letra y ahí solo hay sitio para 31 px, con los 33,6 de serie se partía en
dos y el badge se iba a tres líneas. Solo se toca por debajo de 360 px: a
partir de ahí entra de sobra y no hay por qué cambiar nada. */
@media (max-width:359px){
body.p55 .promo2x1 b{font-size:1.8rem}
}
/* ===========================================================
HERO — oferta y botón, en una sola pieza
-----------------------------------------------------------
Antes eran dos: un botón y, debajo, la tarjeta de la promoción. Dos cosas
del mismo tamaño y del mismo color, una encima de otra, obligaban a decidir
cuál se pulsa. Ahora la tarjeta entera es el enlace y lleva el botón dentro.
=========================================================== */
body.p55 .p55-oferta{
display:flex;flex-direction:column;align-items:center;gap:6px;
margin:20px auto 0;max-width:min(100%,560px);
padding:clamp(16px,3.4vw,22px) clamp(18px,4vw,30px) clamp(14px,3vw,20px);
border-radius:20px;text-align:center;text-decoration:none;
background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,var(--accent)));
color:#2A0614;
box-shadow:0 26px 50px -22px color-mix(in srgb,var(--primary) 70%,transparent);
transition:transform .2s,box-shadow .2s;
}
body.p55 .p55-oferta:hover{
transform:translateY(-3px);
box-shadow:0 32px 60px -22px color-mix(in srgb,var(--primary) 80%,transparent);
}
body.p55 .p55-oferta:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* El mes, arriba y en pequeño: es la condición de la oferta, no el reclamo. */
body.p55 .p55-oferta__mes{
font-weight:800;font-size:clamp(.66rem,2.6vw,.78rem);
letter-spacing:.16em;text-transform:uppercase;opacity:.82;
}
body.p55 .p55-oferta__titulo{
font-family:var(--font-display);font-weight:400;
font-size:clamp(1.9rem,8vw,2.9rem);line-height:1;letter-spacing:.02em;
text-transform:uppercase;color:#fff;
text-shadow:0 2px 0 color-mix(in srgb,var(--primary) 60%,#7A0033);
}
body.p55 .p55-oferta__clases{
font-weight:500;font-size:clamp(.71rem,3.1vw,.92rem);line-height:1.35;
opacity:.95;
}
/* El botón de dentro. No es un botón de verdad —toda la tarjeta es el enlace—
pero tiene que parecerlo, que es lo que dice qué pasa si la pulsas. */
body.p55 .p55-oferta__btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6em;
margin-top:clamp(10px,2vw,14px);padding:.85em 1.6em;border-radius:999px;
background:#fff;color:#2A0614;font-weight:800;
font-size:clamp(.92rem,3.6vw,1.06rem);line-height:1;
box-shadow:0 10px 20px -10px rgba(0,0,0,.5);
}
body.p55 .p55-oferta__btn svg{width:1.05em;height:1.05em;flex:0 0 auto;transition:transform .2s}
body.p55 .p55-oferta:hover .p55-oferta__btn svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
body.p55 .p55-oferta,
body.p55 .p55-oferta__btn svg{transition:none}
body.p55 .p55-oferta:hover{transform:none}
}
/* ===========================================================
LAS CLASES — vídeo con etiquetas que se van turnando
-----------------------------------------------------------
Un solo vídeo, horizontal. Encima, arriba a la izquierda, la etiqueta de lo
que se está contando; debajo, su explicación. Cambian solas cada 3 segundos.
=========================================================== */
.p55-clip{max-width:900px;margin:clamp(30px,4vw,46px) auto 0}
.p55-clip__marco{
position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;
aspect-ratio:16/9;background:#140A10;
box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
border:1px solid var(--line);
}
.p55-clip__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* La etiqueta, ahora debajo del vídeo y en redondo. Las cuatro ocupan el mismo
hueco, una encima de otra, así que al cambiar no se mueve nada alrededor:
la rejilla de una sola celda las apila y la caja mide lo que la más grande. */
.p55-clip__chapas{
display:grid;justify-items:center;justify-content:center;
margin-top:clamp(-34px,-4vw,-26px); /* monta un poco sobre el vídeo */
position:relative;z-index:2;
}
.p55-chapa{
grid-area:1 / 1;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
width:clamp(92px,24vw,116px);height:clamp(92px,24vw,116px);
border-radius:50%;text-align:center;padding:0 .5em;
background:linear-gradient(160deg,var(--primary),color-mix(in srgb,var(--primary) 62%,#B3005E));
color:#2A0614;font-weight:800;
font-size:clamp(.62rem,2.5vw,.76rem);line-height:1.12;
letter-spacing:.02em;text-transform:uppercase;
/* El aro oscuro lo separa del vídeo cuando se monta encima. */
box-shadow:0 0 0 6px var(--bg),0 16px 32px -14px rgba(0,0,0,.8);
opacity:0;transform:scale(.92);
transition:opacity .45s ease,transform .45s ease;
}
.p55-chapa.is-on{opacity:1;transform:none}
.p55-chapa svg{width:clamp(22px,6vw,28px);height:clamp(22px,6vw,28px);flex:0 0 auto}
/* Los textos, igual: apilados en el mismo hueco para que el resto de la página
no dé un salto cada tres segundos. La caja reserva el alto del más largo. */
.p55-clip__pies{
display:grid;margin-top:clamp(14px,2.2vw,20px);
text-align:center;min-height:5.2em;
}
.p55-pie{
grid-area:1 / 1;margin:0;color:var(--ink-soft);line-height:1.6;
font-size:clamp(1rem,2.2vw,1.12rem);max-width:60ch;margin-inline:auto;
text-wrap:pretty;opacity:0;transition:opacity .45s ease;
}
.p55-pie.is-on{opacity:1}
/* Sin rotación: se enseñan los cuatro textos, cada uno con su etiqueta. Quien
ha pedido menos animación no puede quedarse sin tres cuartas partes del
apartado. */
.p55-clip--quieto .p55-clip__chapas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.p55-clip--quieto .p55-chapa{grid-area:auto;opacity:1;transform:none}
.p55-clip--quieto .p55-clip__pies{display:block;min-height:0}
.p55-clip--quieto .p55-pie{opacity:1;margin-top:10px}
@media (max-width:560px){
/* En vertical el vídeo a 16:9 se queda en una tira muy baja; se le da algo
más de alto para que se vea lo que pasa dentro. */
.p55-clip__marco{aspect-ratio:4/3}
.p55-clip__pies{min-height:7.5em}
}
@media (prefers-reduced-motion:reduce){
.p55-chapa,.p55-pie{transition:none}
}
/* ---------- Sin zoom ----------
La landing está medida para cada ancho de pantalla y al ampliarla se
descuadra. "pan-x pan-y" deja mover el dedo para recorrer la página y para
deslizar el carrusel de reseñas, y nada más: ni pellizcar ni doble toque.
Esta es la que hace el trabajo de verdad. El maximum-scale del viewport lo
respeta Android, pero el iPhone lo ignora desde hace años; touch-action sí
lo obedece.
Ojo: esto le quita el zoom también a quien lo necesite para leer, y esta
página la lee gente de más de 55 años. Se hace porque se ha pedido, y la
letra de la página es grande de partida. */
body.p55{touch-action:pan-x pan-y}
/* ===========================================================
LAS DOS CLASES DE LA PROMOCIÓN
-----------------------------------------------------------
Va justo después del hero: quien acaba de leer "2 semanas gratis" lo
primero que se pregunta es gratis de qué, y aquí se lo encuentra antes de
llegar al formulario.
=========================================================== */
.p55-dos{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(24px,4vw,44px);max-width:900px;margin:clamp(26px,4vw,40px) auto 0;
}
.p55-clase{text-align:center}
/* Los carteles son redondos de por sí; el recorte quita el blanco de las
esquinas y deja solo el círculo. El aro de color lo despega del fondo negro. */
.p55-clase__foto{
display:block;width:min(100%,300px);height:auto;aspect-ratio:1;margin:0 auto 18px;
border-radius:50%;object-fit:cover;
box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 30%,transparent),
0 26px 50px -24px rgba(0,0,0,.85);
}
.p55-clase h3{
font-size:clamp(1.3rem,3vw,1.75rem);margin:0 0 .3em;color:#fff;
}
.p55-clase__claim{
margin:0 0 .7em;color:var(--primary);font-weight:800;
font-size:clamp(.98rem,2.2vw,1.08rem);line-height:1.35;
}
.p55-clase p:not(.p55-clase__claim){
margin:0;color:var(--ink-soft);line-height:1.62;
font-size:clamp(.96rem,2.1vw,1.04rem);text-wrap:pretty;
}
@media (max-width:720px){
/* Una debajo de otra: a dos columnas en un móvil el texto queda en tiras
estrechas y la foto se hace diminuta. */
.p55-dos{grid-template-columns:1fr;gap:clamp(30px,7vw,40px)}
.p55-clase__foto{width:min(72%,260px)}
}
/* ---------- Lo que vale la oferta ----------
"Gratis" solo dice que no se paga; el precio tachado al lado dice cuánto se
está regalando, que es lo que hace que parezca una oportunidad y no un
reclamo. El 0 € va en una pastilla blanca para que sea lo primero que se
mira después del titular. */
body.p55 .p55-oferta__valor{
display:inline-flex;align-items:center;gap:.5em;flex-wrap:wrap;
justify-content:center;margin-top:.45em;
font-weight:700;font-size:clamp(.78rem,3vw,.95rem);color:#2A0614;
}
body.p55 .p55-oferta__valor s{
text-decoration:line-through;text-decoration-thickness:.12em;
opacity:.72;font-weight:800;
}
body.p55 .p55-oferta__valor em{
font-style:normal;font-weight:800;
font-size:clamp(.92rem,3.6vw,1.12rem);line-height:1;
padding:.3em .72em;border-radius:999px;
background:#fff;color:#2A0614;
box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
}
/* ---------- Horarios: tres grupos, centrados ----------
La rejilla de serie tiene cinco columnas porque la landing de salsa tiene
cinco grupos. Aquí hay tres, y se quedaban pegados a la izquierda con dos
huecos vacíos a la derecha. Tres columnas y ancho máximo: quedan centrados.
Y el grupo nuevo pasa al medio, que es donde cae la vista. En el HTML sigue
siendo el primero a propósito: en el móvil, que va en una columna, tiene que
leerse antes que los otros dos. */
@media (min-width:901px){
body.p55 .horarios{
grid-template-columns:repeat(3,minmax(0,1fr));
max-width:860px;margin-inline:auto;
}
body.p55 .horario:nth-child(2){order:1}
body.p55 .horario--promo{order:2}
body.p55 .horario:nth-child(3){order:3}
}
@media (min-width:421px) and (max-width:900px){
/* A dos columnas el grupo nuevo seguía ocupando el ancho entero por la regla
general; aquí son solo tres tarjetas y queda mejor una arriba y dos abajo. */
body.p55 .horarios{max-width:620px;margin-inline:auto}
}
/* ---------- Un color por etiqueta ----------
Cuatro colores del logo —rosa, turquesa, naranja y amarillo— para que al
turnarse se note el cambio de un vistazo y no solo por el texto. El texto
de dentro es oscuro, así que se lee sobre los cuatro. */
.p55-chapa:nth-child(1){--chapa:#FF4D9E;--chapa-2:#E23A87}
.p55-chapa:nth-child(2){--chapa:#2FD3C0;--chapa-2:#15A897}
.p55-chapa:nth-child(3){--chapa:#FF8A3D;--chapa-2:#E06A1C}
.p55-chapa:nth-child(4){--chapa:#FFC24B;--chapa-2:#E0A020}
.p55-chapa{
background:linear-gradient(160deg,var(--chapa),var(--chapa-2));
box-shadow:0 0 0 6px var(--bg),0 16px 32px -14px rgba(0,0,0,.8);
}
/* ---------- Hero: la línea del grupo nuevo ----------
Va entre el badge y la oferta. Dos renglones: el horario en negrita y la
fecha debajo en el rosa de la marca, que es el dato que hace decidir. */
body.p55 .p55-hero__nuevo{
display:flex;flex-direction:column;align-items:center;gap:.15em;
margin-top:.7em;padding:.5em 1.1em;border-radius:14px;
background:rgba(12,4,8,.5);
border:1px solid color-mix(in srgb,var(--primary) 32%,transparent);
backdrop-filter:blur(3px);
font-size:clamp(.7rem,2.9vw,.88rem);line-height:1.25;text-align:center;
}
body.p55 .p55-hero__nuevo b{font-weight:800;color:#fff}
body.p55 .p55-hero__nuevo em{
font-style:normal;font-weight:800;color:var(--primary);
letter-spacing:.04em;text-transform:uppercase;
font-size:.92em;
}
/* La frase de entrada de la oferta: pequeña y encima del reclamo, para que se
lea "prueba gratis el baile Y ADEMÁS llévate dos semanas". */
body.p55 .p55-oferta__intro{
display:block;font-weight:700;line-height:1.25;
font-size:clamp(.74rem,3vw,.94rem);opacity:.9;
}
body.p55 .p55-oferta__titulo{margin-top:.05em}
body.p55 .p55-oferta__clases{margin-top:.1em}
body.p55 .p55-oferta__valor{margin-top:.5em}
/* La fecha de comienzo en la tarjeta del horario. */
.horario__desde{
margin-top:6px;font-weight:800;font-size:.82rem;letter-spacing:.02em;
color:var(--primary);
}
/* Foto de clase donde antes había un hueco del editor. Hereda la forma del
hueco —misma proporción 4:5 y mismo redondeo— para que no desencaje con la
chapa que lleva pegada en la esquina. */
.p55-classes__media .p55-classes__foto{
width:100%;aspect-ratio:4/5;height:auto;display:block;object-fit:cover;
border-radius:var(--radius);
}
/* ---------- Testimonio en vídeo (dentro de Opiniones) ----------
Una sola tarjeta, así que no va en el carrusel .vid-track: el vídeo está
grabado en vertical con el móvil y, solo y centrado, dejaría dos huecos
enormes a los lados en pantalla ancha. Se pone al lado del texto, que es
quien rellena esa mitad. En móvil se apila y se centra. */
.p55-testi{
display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
gap:clamp(18px,3.4vw,40px);align-items:center;
max-width:860px;
margin:clamp(22px,3.4vw,36px) auto clamp(30px,4.2vw,52px);
}
/* La luz de color debajo, igual que las tarjetas de la escuela online: una
sombra rosa además de la negra. La negra sola deja la tarjeta plana. */
.p55-testi__card{
box-shadow:0 26px 54px -26px rgba(0,0,0,.5),
0 22px 50px -24px color-mix(in srgb,var(--primary) 55%,transparent);
}
/* La portada es un ![]()
normal y no un : esta página ya no carga
image-slot.js. Se coloca como lo haría aquel, llenando la tarjeta. */
.vid-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-card.playing>img{opacity:0;pointer-events:none}
.p55-testi__h{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,2.9rem);
line-height:1.04;margin:0 0 .45em;color:var(--ink)}
.p55-testi__txt p{margin:0 0 .7em}
.p55 .p55-testi__nota{color:var(--ink-soft);font-size:.96rem}
@media (max-width:700px){
.p55-testi{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.p55-testi__card{width:min(78vw,290px)}
}
/* ---------- Carrusel de reseñas en esta landing ----------
Aquí una de las reseñas es tres veces más larga que las demás (la de
Nieves, que es la única alumna de este grupo y por eso va primera). En una
rejilla de columnas todas las tarjetas crecen hasta la más alta, así que
las cortas quedaban como cajas medio vacías de medio metro. Con esto cada
una mide lo que ocupa su texto, que en un carrusel se lee bien. */
.p55 .reviews-track{align-items:start}