/* =========================================================== ELCHE LOVE SALSA — Landing "Rueda Cubana / Casino" Hereda componentes de styles.css + plus55.css (clases .p55-*). Aquí: TEMA CUBA (scoped .rueda) + componentes propios. =========================================================== */ /* --------------------------------------------------------- TEMA CUBA — rojo bandera + azul cubano + oro estrella --------------------------------------------------------- */ body.rueda{ --c-red:#E4211F;--c-red-strong:#C21715; --c-pink:#E4211F;--c-teal:#12B0C7;--c-yellow:#FFC531; --c-orange:#FF7A18;--c-green:#12B0C7;--c-blue:#1A47B8; --primary:#E4211F;--primary-strong:#C21715;--on-primary:#fff; --accent:#1A47B8;--accent-2:#FFC531;--pop:#E4211F; --line:rgba(255,150,120,.14); --btn-shadow:0 18px 40px -14px rgba(228,33,31,.6); --band-bg:linear-gradient(115deg,#1A47B8 0%,#2E5FCF 48%,#E4211F 100%); --band-ink:#fff;--band-eyebrow:#FFE1C4; --hero-fallback:#160512; } .rueda .btn:hover{box-shadow:0 22px 50px -14px rgba(228,33,31,.72)} .rueda .feature__ico,.rueda .contact__perk .ico{background:color-mix(in srgb,var(--primary) 20%,transparent)} /* --- Motivo de fondo: estrellas cubanas muy tenues --- */ body.rueda::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05; 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='%23E4211F'%3E%3Cpath%20transform='translate(28%2040)%20scale(2.4)'%20d='M12%202l2.95%206.18%206.8.78-5.04%204.6%201.36%206.69L12%2017.6l-6.07%203.25%201.36-6.69L2.25%209.5l6.8-.78z'/%3E%3Cpath%20transform='translate(212%20206)%20scale(1.8)'%20d='M12%202l2.95%206.18%206.8.78-5.04%204.6%201.36%206.69L12%2017.6l-6.07%203.25%201.36-6.69L2.25%209.5l6.8-.78z'/%3E%3Cpath%20transform='translate(176%2026)%20scale(1.1)'%20d='M12%202l2.95%206.18%206.8.78-5.04%204.6%201.36%206.69L12%2017.6l-6.07%203.25%201.36-6.69L2.25%209.5l6.8-.78z'/%3E%3C/g%3E%3C/svg%3E"); background-size:360px 360px; } /* Velo del hero: oscuro debajo, resplandor cubano encima. Esta regla sustituye al velo general (--hero-overlay), así que el oscuro tiene que estar AQUÍ dentro o no hay ninguno. Antes solo llevaba los dos resplandores de color, y con el vídeo de clase —sala clara, ropa clara— el titular blanco se perdía. El degradado va de menos a más hacia abajo, que es donde caen la oferta, el botón y el reloj. */ body.rueda .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 80% at 50% 108%,rgba(228,33,31,.42),transparent 60%), radial-gradient(90% 60% at 85% 0%,rgba(26,71,184,.3),transparent 55%), linear-gradient(180deg,rgba(12,4,8,.56) 0%,rgba(12,4,8,.66) 42%,rgba(12,4,8,.9) 100%)} /* --- Re-color de acentos que en plus55 venían fijos --- */ .rueda .p55-recognize .p55-rec:nth-child(1) .p55-rec__q{background:linear-gradient(135deg,#E4211F,#C21715)} .rueda .p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,#1A47B8,#123594)} .rueda .p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,#FFC531,#E39A18)} .rueda .p55-recognize .p55-rec:nth-child(4) .p55-rec__q{background:linear-gradient(135deg,#12B0C7,#0C8494)} .rueda .p55-recognize__after .p55-script{color:var(--accent-2)} .rueda .p55-pillars .p55-pillar:nth-child(1)::before{background:#E4211F} .rueda .p55-pillars .p55-pillar:nth-child(1) .p55-pillar__ico{color:#E4211F;background:color-mix(in srgb,#E4211F 16%,transparent)} .rueda .p55-pillars .p55-pillar:nth-child(1) li svg{color:#E4211F} .rueda .p55-pillars .p55-pillar:nth-child(2)::before{background:#1A47B8} .rueda .p55-pillars .p55-pillar:nth-child(2) .p55-pillar__ico{color:#3A63C9;background:color-mix(in srgb,#1A47B8 22%,transparent)} .rueda .p55-pillars .p55-pillar:nth-child(2) li svg{color:#3A63C9} .rueda .p55-pillars .p55-pillar:nth-child(3)::before{background:#FFC531} .rueda .p55-pillars .p55-pillar:nth-child(3) .p55-pillar__ico{color:#E39A18;background:color-mix(in srgb,#FFC531 18%,transparent)} .rueda .p55-pillars .p55-pillar:nth-child(3) li svg{color:#E39A18} .rueda .p55-steps .p55-step:nth-child(1) .p55-step__num{background:linear-gradient(135deg,#E4211F,#C21715);color:#fff} .rueda .p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,#1A47B8,#123594);color:#fff} .rueda .p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,#FFC531,#E39A18);color:#3a2c08} .rueda .p55-classes__media .badge{background:var(--accent-2);color:#3a2408} .rueda .p55-offer__aside::after{background:radial-gradient(circle,rgba(26,71,184,.4),transparent 60%)} .rueda .p55-offer__tag{background:var(--accent-2);color:#3a2408} /* --------------------------------------------------------- BANDERA DE CUBA (SVG-free, hecha con CSS) — reutilizable --------------------------------------------------------- */ .cu-flag{position:relative;display:inline-block;width:2.1em;height:1.35em;border-radius:3px;overflow:hidden; vertical-align:-.22em;box-shadow:0 2px 8px rgba(0,0,0,.4);flex-shrink:0; background:linear-gradient(#0B4EA2 20%,#fff 20% 40%,#0B4EA2 40% 60%,#fff 60% 80%,#0B4EA2 80%)} .cu-flag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:38%; background:#E4211F;clip-path:polygon(0 0,100% 50%,0 100%)} .cu-flag::after{content:"★";position:absolute;left:5%;top:50%;transform:translateY(-50%); color:#fff;font-size:.62em;line-height:1;text-shadow:0 0 1px rgba(0,0,0,.3)} .cu-flag--lg{width:3.1em;height:2em} /* --------------------------------------------------------- HERO propio — titular Rueda Cubana, con bandera --------------------------------------------------------- */ .rueda-hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1.05em .5em .7em;border-radius:999px; background:color-mix(in srgb,var(--pop) 18%,transparent);border:1px solid color-mix(in srgb,var(--pop) 48%,transparent); color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(4px);margin-bottom:22px} .rueda-hero h1 .fire{background:linear-gradient(100deg,#E4211F 0%,#FF6A3D 45%,#FFC531 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(228,33,31,.35))} /* --------------------------------------------------------- SILUETA DE CUBA (sección "¿Qué es la rueda?") --------------------------------------------------------- */ .rueda-cuba{position:relative;width:100%;max-width:520px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:22px} .rueda-cuba img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 50px rgba(228,33,31,.45))} .rueda-cuba__tag{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap; font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2); background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line); padding:.55em 1.2em;border-radius:999px;backdrop-filter:blur(6px)} .rueda-what{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,66px);align-items:center} .rueda-ring{position:relative;aspect-ratio:1;max-width:420px;margin-inline:auto;width:100%} .rueda-ring__circle{position:absolute;inset:8%;border-radius:50%;border:2px dashed color-mix(in srgb,var(--primary) 55%,transparent); animation:ruedaspin 26s linear infinite} .rueda-ring__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;height:34%;border-radius:50%; display:grid;place-items:center;text-align:center;background:var(--band-bg);color:#fff;box-shadow:0 18px 40px -14px rgba(228,33,31,.6)} .rueda-ring__center b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:.95} .rueda-ring__center span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9} .rueda-couple{position:absolute;width:15%;height:15%;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:2px solid var(--primary);color:var(--primary);left:50%;top:50%; margin:-7.5%;transform:rotate(var(--a)) translate(0,-138%) rotate(calc(-1*var(--a)))} .rueda-couple svg{width:56%;height:56%} .rueda-couple:nth-child(2){--a:0deg} .rueda-couple:nth-child(3){--a:60deg;border-color:var(--accent);color:#4E7BE0} .rueda-couple:nth-child(4){--a:120deg;border-color:var(--accent-2);color:#E39A18} .rueda-couple:nth-child(5){--a:180deg} .rueda-couple:nth-child(6){--a:240deg;border-color:var(--accent);color:#4E7BE0} .rueda-couple:nth-child(7){--a:300deg;border-color:var(--accent-2);color:#E39A18} @keyframes ruedaspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.rueda-ring__circle{animation:none}} /* --------------------------------------------------------- BANDA DE CIFRAS --------------------------------------------------------- */ .rueda-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);text-align:center} .rueda-fig{padding:8px} .rueda-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} .rueda-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){ .rueda-what{grid-template-columns:1fr} .rueda-figs{grid-template-columns:repeat(2,1fr);gap:26px 14px} } /* ---------- Hero: la oferta de noviembre ---------- Texto al aire sobre el fondo, sin recuadro. Va DEBAJO del titular y no encima: a la rueda cubana se llega sin saber qué es, así que primero toca explicarlo y luego empujar con el precio. */ .rueda-hero .rc-oferta{ display:flex;flex-direction:column;align-items:center;gap:.1em; margin-top:clamp(16px,2.6vw,24px);text-decoration:none;color:#fff; } .rueda-hero .rc-oferta__mes{ font-weight:800;font-size:clamp(.6rem,2.3vw,.76rem); letter-spacing:.24em;text-transform:uppercase;color:var(--accent); text-shadow:0 2px 12px rgba(0,0,0,.75); } .rueda-hero .rc-oferta__linea{ font-family:var(--font-display);font-weight:400; font-size:clamp(2rem,7.6vw,3.4rem);line-height:1;letter-spacing:.01em; text-transform:uppercase; text-shadow:0 .05em .26em rgba(0,0,0,.6); } .rueda-hero .rc-oferta__linea s{ font-size:.52em;text-decoration:line-through; text-decoration-thickness:.09em;text-decoration-color:var(--accent); color:rgba(255,255,255,.7);margin-inline:.12em; } .rueda-hero .rc-oferta__linea b{ font-weight:400;color:var(--accent-2);font-size:1.25em; /* La caja del degradado tiene que ser más alta que el número o se le corta la parte de arriba. */ display:inline-block;line-height:1;padding-block:.06em;margin-block:-.06em; } .rueda-hero .rc-oferta__extra{ font-weight:700;font-size:clamp(.82rem,3vw,1rem);color:var(--accent-2); text-shadow:0 2px 12px rgba(0,0,0,.8); } /* El acento de esta landing es el azul de la bandera cubana. Para lo que lleva cifras —la cuenta atrás y el precio— se usa el amarillo y el rojo del logo: son los colores de la marca y los mismos que en las otras dos landings, así que una oferta se lee igual en todas. */ body.rueda .slsb-reloj__u b{color:var(--accent-2)} body.rueda .rc-oferta__mes{color:var(--accent-2)} body.rueda .rc-oferta__linea s{text-decoration-color:var(--primary)} /* ---------- Horarios: aquí solo hay dos grupos ---------- La rejilla común es de cinco columnas, heredada de la landing de salsa. Con dos tarjetas quedarían encogidas contra el borde izquierdo, así que aquí se ponen a dos columnas y se centran. */ body.rueda .horarios{ grid-template-columns:repeat(2,1fr); max-width:720px;margin-inline:auto; } /* En la otra landing el grupo destacado ocupa el ancho entero al estrecharse. Con dos tarjetas eso dejaría la segunda a media anchura y descolgada: siguen del mismo tamaño hasta que ya no caben, y entonces se apilan. */ @media (max-width:900px){ body.rueda .horario--promo{grid-column:auto} } @media (max-width:560px){ body.rueda .horarios{grid-template-columns:1fr} } /* El sello va de rojo a azul en la landing de salsa. Aquí, rojo liso: el azul de la bandera no se usa para marcar ofertas, igual que en el reloj. */ body.rueda .horario__sello{background:var(--primary)} /* ---------- Hero en móvil: que se vea la sala entera ---------- El vídeo es 9:16 y el hero ocupaba la pantalla completa (100svh). Para llenar una caja más estrecha que el vídeo, el navegador recorta a lo ancho: se veía el 70% del centro, o sea un torso en vez de la clase. Bajando el hero a 76svh manda el ancho, no el alto, y entra el encuadre completo: la sala, los espejos y las cuatro parejas. El contenido cabe de sobra. */ @media (max-width:700px){ body.rueda .hero{min-height:76svh} } /* ---------- Palabras flotantes ---------- En ordenador caen en los márgenes, a los lados del texto, y quedan bien las tres. En móvil no hay márgenes: este hero lleva chapa, titular de dos líneas, párrafo de cinco, oferta, dos botones y reloj. "¡Dame!" se montaba encima del titular y "En grupo" encima del párrafo. La única franja libre de verdad es la de arriba a la derecha, así que en móvil se queda una sola. Se probó bajar la segunda al hueco de abajo y se pisaba con el reloj o con el botón según el ancho de pantalla; una palabra que se lee bien vale más que tres encajadas a la fuerza. */ body.rueda .hero__chip:nth-of-type(1){top:23%;left:11%} body.rueda .hero__chip:nth-of-type(2){top:34%;right:12%} body.rueda .hero__chip:nth-of-type(3){bottom:26%;left:16%} @media (max-width:700px){ body.rueda .hero__chip:nth-of-type(1){top:5%;right:7%;left:auto;bottom:auto} body.rueda .hero__chip:nth-of-type(2), body.rueda .hero__chip:nth-of-type(3){display:none} } /* ---------- Nuestras clases: vídeos a demanda ---------- Dos tarjetas verticales, porque los vídeos están grabados con el móvil en vertical. En pantalla ancha caben las dos de lado; en móvil se apilan, que es mejor que encogerlas hasta que no se vea quién baila. */ .clasevids{ display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.4vw,24px); max-width:720px;margin-inline:auto; } @media (max-width:560px){ .clasevids{grid-template-columns:1fr;max-width:340px} } .clasevid{margin:0} /* La luz de debajo. Es el mismo recurso que llevan las pantallas de la escuela online: una sombra de color en lugar de negra. Hace que la tarjeta parezca encendida e iluminando el suelo, en vez de estar pegada sobre el negro. Va en variable porque la llevan dos elementos distintos: el botón mientras se ve la foto, y el