/* ===========================================================
   ELCHE LOVE SALSA — Landing "Cuida de ti +55"
   Hereda todo de plus55.css (la página lleva también la clase .p55)
   y solo le cambia la paleta y lo propio de estas dos clases.
   =========================================================== */

/* ---------- Paleta ----------
   No es inventada: sale de los dos carteles que la escuela ya usa para estas
   clases. El turquesa #14DCFF es el de Mujer Activa y el verde lima #A0F014
   el de Pilates Bienestar; el rosa de apoyo es prácticamente el del logo.
   Son más vivos que el rosa chicle de la landing de baile, que es justo lo
   que se pedía.

   Va después de plus55.css y con la misma especificidad de un solo elemento,
   así que gana por orden de aparición sin pelear con !important. */
body.cuida{
  --c-red:#14DCFF;--c-red-strong:#00B4F0;
  --c-pink:#A0F014;--c-teal:#14DCFF;--c-yellow:#A0F014;
  --c-orange:#FF2878;--c-green:#A0F014;--c-blue:#14DCFF;

  /* El texto sobre turquesa va en oscuro: sobre un color tan luminoso, el
     blanco no llega al contraste mínimo y en estas clases el público lee
     peor de cerca. */
  --primary:#14DCFF;--primary-strong:#00B4F0;--on-primary:#06313d;
  --accent:#7BE8FF;--accent-2:#A0F014;--pop:#FF2878;

  --line:rgba(140,230,255,.15);
  --btn-shadow:0 18px 40px -14px rgba(20,220,255,.55);
  --band-bg:linear-gradient(135deg,#14DCFF 0%,#00B4F0 55%,#A0F014 100%);
  --band-ink:#06313d;--band-eyebrow:#06313d;
  --hero-fallback:#03222b;
}

/* La banda en degradado turquesa→lima lleva texto oscuro, así que lo que
   dentro de ella iba en blanco hay que bajarlo también. */
.cuida .band .title,
.cuida .band .eyebrow,
.cuida .band p{color:var(--band-ink)}
.cuida .p55-noneed__chip{background:rgba(0,0,0,.14);color:var(--band-ink)}
.cuida .p55-noneed__chip s{color:var(--band-ink);opacity:.72}
.cuida .p55-noneed__line em{color:#06313d}

/* ---------- Hero ----------
   Sin vídeo: la foto es fija, así que el velo tiene que trabajar más para que
   el titular se lea sobre una sala llena de gente y de luz. */
/* Lleva body delante y !important porque en styles.css hay un
   ":is(body.slsb,body.p55) .hero__bg::after" con !important, y esta página
   también es .p55. Sin esto la regla no se aplicaba —ni esta ni la que había
   antes— y el hero usaba el velo granate de las landings de baile en vez del
   turquesa de esta.
   Los valores son más altos que los de aquella porque la foto del móvil es
   muy clara (camisetas blancas y sala iluminada): medido, el texto de debajo
   del titular se quedaba en 3,3:1 y lo legible empieza en 4,5:1. */
body.cuida .hero__bg::after{
  background:linear-gradient(180deg,
    rgba(3,34,43,.80) 0%,
    rgba(3,34,43,.88) 45%,
    rgba(3,34,43,.96) 100%) !important;
}
.cuida .hero h1 .fire{
  /* El "+55" en el degradado de los dos carteles: empieza en turquesa
     (Mujer Activa) y acaba en lima (Pilates). */
  background:linear-gradient(100deg,#14DCFF 0%,#7BE8FF 45%,#A0F014 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(20,220,255,.4));
}
.cuida-hero__lead{
  margin:14px auto 0;max-width:30ch;
  font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.4;color:#eafaff;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

/* ---------- Las dos clases ----------
   Los carteles son redondos y vienen con su propio borde de color. Se dejan
   redondos a propósito: recortarlos en un cuadrado les corta el aro, que es
   lo que los hace reconocibles cuando ya los han visto en el anuncio. */
.cuida .p55-clase__foto{
  border-radius:50%;
  width:min(100%,340px);height:auto;aspect-ratio:1;object-fit:cover;
  margin-inline:auto;display:block;
}
.cuida-clase--activa .p55-clase__foto{
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6),
             0 18px 44px -20px color-mix(in srgb,#14DCFF 70%,transparent);
}
.cuida-clase--pilates .p55-clase__foto{
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6),
             0 18px 44px -20px color-mix(in srgb,#A0F014 60%,transparent);
}
/* Cada clase se queda con el color de su cartel también en el titular, para
   que de un vistazo se vea que son dos cosas distintas. */
.cuida-clase--activa h3{color:#14DCFF}
.cuida-clase--pilates h3{color:#A0F014}

/* ---------- Beneficios ----------
   Son seis y en pantalla ancha caben de tres en tres; en tableta, de dos. */
.cuida .features{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2.2vw,24px);
}
@media (max-width:900px){.cuida .features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cuida .features{grid-template-columns:minmax(0,1fr)}}
/* Los iconos alternan los dos colores de la landing, en el mismo orden en que
   aparecen en los carteles. */
.cuida .features .feature:nth-child(odd) .feature__ico{color:#14DCFF}
.cuida .features .feature:nth-child(even) .feature__ico{color:#A0F014}

/* El lema de cada clase, en su color. Heredaba el turquesa de --primary y en
   Pilates chocaba con su propio titular, que es lima. */
.cuida-clase--activa .p55-clase__claim{color:#14DCFF}
.cuida-clase--pilates .p55-clase__claim{color:#A0F014}

/* ---------- Horario en el hero ---------- */
.cuida-hero__cuando{
  display:inline-block;margin-top:12px;
  padding:.45em 1.1em;border-radius:999px;
  background:rgba(3,34,43,.55);border:1px solid color-mix(in srgb,#14DCFF 45%,transparent);
  color:#eafaff;font-weight:700;font-size:clamp(.86rem,2.2vw,1rem);
  backdrop-filter:blur(4px);white-space:nowrap;
}

/* ---------- Cuadrante ----------
   La rejilla de base reparte cinco columnas fijas, pensada para la landing de
   baile. Aquí solo hay dos clases, así que se reparten solas y se centran en
   vez de dejar tres huecos a la derecha. */
body.cuida .cuida-horarios{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:620px;margin-inline:auto;
}
@media (max-width:520px){body.cuida .cuida-horarios{grid-template-columns:minmax(0,1fr)}}

/* Cada día con el color de su clase, igual que los carteles de arriba: así se
   ve de un vistazo cuál es cuál sin tener que leer la letra pequeña. */
.cuida-horario--activa{
  border-color:color-mix(in srgb,#14DCFF 55%,transparent);
  background:color-mix(in srgb,#14DCFF 12%,var(--surface));
}
.cuida-horario--activa .horario__que{color:#14DCFF}
.cuida-horario--pilates{
  border-color:color-mix(in srgb,#A0F014 50%,transparent);
  background:color-mix(in srgb,#A0F014 10%,var(--surface));
}
.cuida-horario--pilates .horario__que{color:#A0F014}