/* =====================================================================
   IN STAGE — horarios.css
   Estilos propios de horarios.html: hero editorial, rejilla semanal
   de escritorio, vista móvil por pestañas, precios y CTA final.
   El design system (tokens, botones, tarjetas, bloques) vive en base.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO EDITORIAL (texto, chips y botones)
--------------------------------------------------------------------- */
.hero-horarios{
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
}
.hero-horarios h1{
  font-size: clamp(2.5rem, 6.5vw, 4.75rem); /* algo menor que el hero del home */
  max-width: 18ch;
}
.hero-horarios__parrafo{
  margin-top: var(--sp-3);
  max-width: 58ch;
}
/* Datos rapidos del hero: antes eran "chips" (burbujas) y parecian botones
   clicables, cosa que confundia. Ahora es una linea de texto normal, que
   ademas conserva las palabras clave (matricula, clase de prueba, metro). */
.hero-horarios__datos{
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  max-width: 62ch;
}
.hero-horarios__datos a{ color: var(--morado); font-weight: 600; }
.hero-horarios__botones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---------------------------------------------------------------------
   01 · HORARIOS — leyenda y notas
--------------------------------------------------------------------- */
.horarios-leyenda{ margin-bottom: var(--sp-4); }
.horarios-notas{
  margin-top: var(--sp-4);
  color: var(--texto-suave);
  font-size: var(--fs-small);
}
.horarios-notas li{ max-width: 75ch; }
.horarios-notas a{ color: var(--morado); }
.horarios-noscript{
  padding: var(--sp-4);
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio-m);
  color: var(--texto-suave);
}
.horarios-noscript a{ color: var(--morado); }

/* ---------------------------------------------------------------------
   REJILLA SEMANAL DE ESCRITORIO (la pinta horarios-render.js)
   Estructura: .rejilla > .rejilla__scroll > .rejilla__tabla
     ├─ .rejilla__cabecera (días)
     └─ .rejilla__cuerpo (eje de horas + 6 columnas con bloques absolutos)
   El alto se calcula con variables: --hora-h (alto de 1 hora) y las
   que fija el JS según los datos (--manana-h, --tarde-h, --sep-real).
--------------------------------------------------------------------- */
.rejilla{
  --hora-h: 4.6rem;      /* alto de una hora de clase */
  --separador-h: 30px;   /* hueco entre franja de mañana y de tarde */
  --eje-w: 56px;         /* ancho de la columna de horas */
  display: none;         /* solo escritorio (ver media query final) */
}
/* overflow-y: hidden evita que la rejilla "atrape" la rueda del ratón
   (con solo overflow-x:auto, el eje Y pasa a auto y captura el scroll vertical) */
.rejilla__scroll{ overflow-x: auto; overflow-y: hidden; }
.rejilla__tabla{ min-width: 920px; }

/* Cabecera de días */
.rejilla__cabecera{
  display: grid;
  grid-template-columns: var(--eje-w) repeat(6, 1fr);
}
.rejilla__dia-nombre{
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--tinta);
  padding-block: 12px;
  border-bottom: 1px solid var(--linea);
}

/* Cuerpo con eje + columnas */
.rejilla__cuerpo{
  position: relative;
  display: grid;
  grid-template-columns: var(--eje-w) repeat(6, 1fr);
  /* alto de la franja de mañana + separador (el JS pone --manana-h y --sep-real) */
  --alto-manana: calc(var(--manana-h, 0) * var(--hora-h) + var(--sep-real, 0px));
}
.rejilla__eje,
.rejilla__dia{
  position: relative;
  height: calc(var(--alto-manana) + var(--tarde-h, 6) * var(--hora-h));
}
.rejilla__dia{ border-left: 1px solid var(--linea); }
.rejilla__dia:last-child{ border-right: 1px solid var(--linea); }

/* Líneas horizontales de las horas, por franjas (mañana / tarde) */
.rejilla__cuerpo::before,
.rejilla__cuerpo::after{
  content: "";
  position: absolute;
  left: var(--eje-w);
  right: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px var(--hora-h));
  border-bottom: 1px solid var(--linea);
}
.rejilla__cuerpo::before{
  top: 0;
  height: calc(var(--manana-h, 0) * var(--hora-h));
}
.rejilla__cuerpo::after{
  top: var(--alto-manana);
  height: calc(var(--tarde-h, 6) * var(--hora-h));
}

/* Etiquetas de hora del eje */
.rejilla__hora{
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  background: var(--blanco); /* tapa la línea justo detrás del número */
  padding-block: 2px;
}

/* Bloque de clase dentro de la rejilla (hereda color de .disc-*) */
.bloque-rejilla{
  position: absolute;
  z-index: 1;
  overflow: hidden;
  padding: 7px 8px 7px 12px;
  font-size: 0.71rem;
  line-height: 1.3;
  /* En columnas estrechas (clases solapadas) las palabras largas parten
     en vez de cortarse en seco ("Ballet Avanzad…") */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bloque-rejilla strong{
  font-size: 0.75rem;
  line-height: 1.25;
}
.bloque-rejilla .hora{
  display: block;
  font-size: 0.69rem;
}
.bloque-rejilla__edad{
  display: block;
  font-size: 0.66rem;
  color: #5A4A73;
}
.bloque-rejilla__nota{
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: var(--radio-pill);
  background: rgba(255,255,255,.65);
  color: var(--morado);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hueco de las mañanas libres: recordatorio del alquiler de salas */
.rejilla__nota-manana{
  position: absolute;
  top: 6px;
  left: calc(var(--eje-w) + 6px);
  height: calc(var(--manana-h, 0) * var(--hora-h) - 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio-s);
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.rejilla__nota-manana a{
  color: var(--morado);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
}
.rejilla__nota-manana a:hover{ text-decoration: underline; }

/* ---------------------------------------------------------------------
   VISTA MÓVIL: pestañas por día + filtro Niños/Adultos + lista
--------------------------------------------------------------------- */
.horario-movil{ display: block; }

.tabs-dias{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.tab-dia{
  flex: 1;
  min-width: 46px;
  padding: 10px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pill);
  background: var(--blanco);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--texto-suave);
  transition: background var(--t-micro) ease-out, color var(--t-micro) ease-out,
              border-color var(--t-micro) ease-out;
}
.tab-dia[aria-selected="true"]{
  background: var(--morado);
  border-color: var(--morado);
  color: var(--blanco);
}

.filtro-grupo{
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.filtro-grupo__btn{
  padding: 7px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pill);
  background: var(--blanco);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--texto-suave);
  transition: background var(--t-micro) ease-out, color var(--t-micro) ease-out,
              border-color var(--t-micro) ease-out;
}
.filtro-grupo__btn[aria-pressed="true"]{
  background: var(--rosa-palo);
  border-color: var(--rosa);
  color: var(--morado);
}

.lista-dia{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-3);
}

/* Fila de clase en la lista móvil (hereda color de .disc-*) */
.bloque-lista{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  font-size: 0.9375rem;
}
.bloque-lista__edad{
  display: block;
  font-size: 0.78rem;
  color: #5A4A73;
}
.bloque-lista__dcha{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  flex: none;
}
.chip--nota{ font-size: 0.625rem; padding: 3px 10px; }

.lista-vacia{
  text-align: center;
  color: var(--texto-suave);
  padding: var(--sp-5) var(--sp-3);
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio-m);
  max-width: none;
}

/* Escritorio: rejilla sí, lista móvil no */
@media (min-width: 900px){
  .rejilla{ display: block; }
  .horario-movil{ display: none; }
}

/* ---------------------------------------------------------------------
   02 · PRECIOS
--------------------------------------------------------------------- */
.precios-basicos .tarjeta-precio h3{ margin-top: 2px; }
.precios-basicos .lista-puntitos li{ font-size: var(--fs-small); }

/* Tarjeta destacada (clase de prueba): borde morado y chip arriba */
.tarjeta-precio--destacada{
  border: 1.5px solid var(--morado);
  box-shadow: var(--sombra-hover);
}
.tarjeta-precio--destacada .chip{ align-self: flex-start; }

/* Tabla de mensualidades + tarifas por programa */
.precios-detalle{
  display: grid;
  gap: var(--gap-grid);
  margin-top: var(--gap-grid);
  align-items: start;
}
@media (min-width: 1024px){
  .precios-detalle{ grid-template-columns: 7fr 5fr; }
}

.precios-tabla{ padding: var(--sp-4); }
.precios-tabla h3{ margin-bottom: 6px; }
.precios-tabla .tabla-envoltura{ margin-top: var(--sp-3); }
.precios-tabla .tabla td.cifra{
  font-family: var(--font-sans);
  font-weight: 700;
}
.precios-tabla__nota{
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

.precios-lado{
  display: grid;
  gap: var(--gap-grid);
}
.tarjeta-tarifa{ padding: var(--sp-4); }
.tarjeta-tarifa__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.filas-precio li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: 10px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
.filas-precio li:last-child{ border-bottom: 0; }
.filas-precio strong{
  color: var(--tinta);
  font-weight: 700;
  white-space: nowrap;
}
.tarjeta-tarifa__nota{
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

/* Tarifa destacada (el pack de Formación): la queremos bien visible */
.tarjeta-tarifa--destacada{
  border: 1px solid var(--rosa);
  background: var(--rosa-palo);
}
.tarjeta-tarifa--destacada .filas-precio li{ border-bottom-color: rgba(169, 80, 90, .18); }
.tarjeta-tarifa__boton{
  display: flex;
  justify-content: center;
  margin-top: var(--sp-3);
  width: 100%;
}

/* ---------------------------------------------------------------------
   CTA FINAL: foto real con overlay morado
--------------------------------------------------------------------- */
.cta-horarios{
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 8rem);
}
.cta-horarios__fondo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-horarios::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(66, 51, 89, .85); /* overlay morado de marca */
}
.cta-horarios__inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}
.cta-horarios h2{ color: var(--blanco); max-width: 20ch; }
.cta-horarios p{ color: var(--lavanda-texto); max-width: 52ch; }
.cta-horarios__botones{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* ---------- Horario como imagen (fácil de actualizar) ---------- */
.horario-imagen{ margin-top: clamp(1.5rem, 4vw, 2.5rem); }
/* Solo el enlace que envuelve la imagen (hijo directo del figure), NO el
   enlace de WhatsApp que va dentro del figcaption. */
.horario-imagen > a{
  display: block;
  border-radius: var(--radio-m);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--dur-media, .22s) var(--ease-suave, ease),
              box-shadow var(--dur-media, .22s) var(--ease-suave, ease);
}
.horario-imagen > a:hover{ transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.horario-imagen img{ width: 100%; height: auto; display: block; }
.horario-imagen figcaption{
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--texto-suave);
  text-align: center;
}
.horario-imagen figcaption a{ color: var(--morado); text-decoration: underline; }

/* Nota: .clases-detalle ("Qué trabajamos en cada clase") se movió a base.css
   porque también lo usa ballet-adultos.html. */

/* ---------------------------------------------------------------------
   EL HORARIO EN TEXTO
   La rejilla de la semana. En movil se desplaza a lo ancho con la primera
   columna fija, para no perder de vista de que clase es cada fila.
--------------------------------------------------------------------- */
.tabla-horario{ margin-top: clamp(1.5rem, 4vw, 2.25rem); min-width: 720px; }
.tabla-horario caption{
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
.tabla-horario th[scope="row"]{
  position: sticky;
  left: 0;
  background: var(--blanco);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}
.tabla-horario th[scope="row"] a{ color: var(--tinta); text-decoration: none; }
.tabla-horario th[scope="row"] a:hover{ color: var(--morado); }
.tabla-horario__edad{
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--texto-suave);
}
.tabla-horario td{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-horario__grupo th{
  background: var(--rosa-palo);
  color: var(--morado);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tabla-horario tbody tr:nth-child(even){ background: transparent; }
.tabla-horario tbody tr:nth-child(odd) td{ background: var(--gris-fondo); }
.tabla-horario tbody tr:nth-child(odd) th[scope="row"]{ background: var(--gris-fondo); }

/* Dias y horas dentro de cada clase del acordeon */
.clase-item__horario{
  margin: 0 0 var(--sp-2);
  display: grid;
  gap: 2px;
  font-size: var(--fs-small);
}
.clase-item__horario > div{
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  padding: 5px 0;
  border-top: 1px solid var(--gris-linea, rgba(66,51,89,.1));
}
.clase-item__horario dt{ font-weight: 700; color: var(--morado); }
.clase-item__horario dd{ margin: 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; }