/* Lo que de verdad es de una sola página. */

/* ═══════════════════════════════ Inicio ═══════════════════════════════ */

/*
  Hero A. El diseño usa una foto a sangre; hasta que la academia pueda subirla, el mismo patrón de
  rayas diagonales que el diseño emplea como marcador de imagen, que además funciona como fondo
  definitivo aceptable.
*/
.hero {
  position: relative;
  background: repeating-linear-gradient(135deg, #2a2a26 0 14px, #232320 14px 28px);
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 560px);
}

.hero__velo {
  width: 100%;
  background: linear-gradient(to top, rgb(14 14 12 / 96%), rgb(14 14 12 / 0%) 100%);
  padding-block: clamp(48px, 10vh, 90px) 28px;
}

.hero__contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
}

.hero__texto {
  flex: 1 1 380px;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-eyebrow);
  margin: 0 0 12px;
}

.hero__titulo {
  font-family: var(--font-display);
  font-size: clamp(46px, 7.4vw, 78px);
  line-height: 0.92;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.hero__bajada {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--dark-bajada);
  line-height: 1.55;
  max-width: 480px;
}

.hero__acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Horario y localización. */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding-block: clamp(28px, 4vw, 40px);
  align-items: start;
}

/* Banda "Hazte socio". */
.socio {
  background: var(--surface-alt);
  padding-block: clamp(28px, 4vw, 44px);
}

.socio__contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.socio__texto {
  flex: 1 1 380px;
}

.socio__titulo {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.socio__bajada {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 560px;
}

/* ═══════════════════════════════ Contacto ═══════════════════════════════ */

.columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══════════════════════════════ Legales ═══════════════════════════════ */

/* Aquí vivían los chips para saltar entre documentos legales. Se han quitado —los tres se enlazan
   desde el pie— y con ellos su segunda definición de `.pestanas`, que pisaba el `gap` y el
   `margin-top` de las pestañas de la zona de socio por estar en un fichero posterior. */

/* El cuerpo del documento es HTML redactado por el club en el panel. Se estila por etiqueta y no
   con clases: el editor no emite clases (ni se las admite el saneador), porque así un cambio de
   diseño no obliga a repasar los documentos de todos los clubes. */
.cuerpo {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.cuerpo > :first-child {
  margin-top: 0;
}

/* La elección de cookies, al final de su política: una tarjeta aparte del texto que redacta el
   club, porque no es texto legal sino un control. */
.consentimiento {
  margin-top: 32px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

.consentimiento__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.consentimiento__estado {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.consentimiento__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cuerpo p,
.cuerpo ul,
.cuerpo ol,
.cuerpo table,
.cuerpo blockquote {
  margin: 0 0 16px;
}

.cuerpo h2,
.cuerpo h3,
.cuerpo h4 {
  font-family: var(--font-display);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.cuerpo h2 {
  font-size: 26px;
  line-height: 1.15;
  margin: 32px 0 12px;
}

.cuerpo h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 26px 0 10px;
}

.cuerpo h4 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  margin: 22px 0 8px;
}

.cuerpo ul,
.cuerpo ol {
  padding-left: 22px;
}

.cuerpo li {
  margin-bottom: 6px;
}

.cuerpo a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Las tablas de un documento legal suelen ser largas (cookies, plazos de conservación) y no caben
   en un móvil: se dejan desplazarse en horizontal dentro del ancho de la página. */
.cuerpo table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cuerpo th,
.cuerpo td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.cuerpo th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
}

.cuerpo blockquote {
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.cuerpo hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

.estado {
  margin-top: 24px;
  font-size: 15px;
  color: var(--muted);
}

/* ═══════════════════════════════ Torneos ═══════════════════════════════ */

/* La banda del destacado. Es el único bloque de la web pública sobre fondo de acento, así que el
   texto va en --on-accent, el mismo color que ya elige la academia para garantizar contraste. */
.torneo-destacado {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
}

.torneo-destacado__texto {
  flex: 1 1 340px;
}

.torneo-destacado__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.torneo-destacado__nombre {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 8px 0 0;
}

.torneo-destacado__detalle {
  font-size: 15px;
  margin: 10px 0 0;
  line-height: 1.6;
  max-width: 520px;
  /* Segundo nivel de énfasis dentro de la misma banda, sin inventar un tono nuevo. */
  opacity: 0.82;
}

.torneo-destacado__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  font-size: 14px;
}

.torneo-destacado__datos strong {
  font-size: 20px;
}

/* La rejilla reutiliza `.noticias`; aquí solo lo propio de la tarjeta de un torneo, que a
   diferencia de `.noticia` no es un único enlace: la foto y el nombre llevan al detalle, y el pie
   lleva un enlace propio a contacto, así que no se puede envolver todo en una sola `<a>`. */
.torneo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
}

.torneo__enlace {
  display: block;
}

.torneo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  flex: 1;
}

.torneo__badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 4px;
}

.torneo__badge--abierta {
  background: var(--accent);
  color: var(--on-accent);
}

/* Próximamente, en curso, completo o finalizado: el mismo gris neutro. Solo la inscripción
   abierta merece el acento. */
.torneo__badge--neutro {
  background: var(--surface-mute);
  color: var(--disabled-fg);
}

/* El mismo estado neutro, pero sobre la banda oscura de la ficha. El diseño solo dibuja ahí el caso
   "inscripción abierta", que va en acento igual que en el listado; para el resto de estados el gris
   claro del listado sería un rótulo luminoso sobre casi negro, así que el chip se dibuja con
   contorno sobre el propio fondo. */
.torneo__badge--oscuro {
  background: transparent;
  border: 1px solid var(--dark-borde);
  color: var(--dark-fg);
}

.torneo__nombre {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: inherit;
  text-decoration: none;
}

.torneo__pie {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.torneo__precio {
  font-size: 15px;
  font-weight: 700;
}

/* ──────────────────────── Ficha de un torneo ────────────────────────
   Bloque `FICHA DE TORNEO` del diseño. Antes esta pantalla no existía en el diseño y se montó por
   analogía con el detalle de una noticia; ahora tiene su propia banda oscura a sangre y dos columnas
   con la inscripción en una tarjeta fija. Los clamp(), radios, pesos y tamaños son los del diseño. */
.ficha-torneo__banda {
  background: var(--dark-alt);
  color: var(--dark-banda-fg);
}

.ficha-torneo__banda-caja {
  padding-block: clamp(20px, 3vw, 30px) clamp(26px, 4vw, 40px);
}

.ficha-torneo__volver {
  font-size: 13px;
  color: var(--dark-banda-muted);
  text-decoration: underline;
}

.ficha-torneo__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 18px;
}

.ficha-torneo__identidad {
  flex: 1 1 460px;
}

.ficha-torneo__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.ficha-torneo__nombre {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.4vw, 72px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  margin: 14px 0 0;
  text-wrap: balance;
}

/* Los datos del torneo en el lado derecho de la fila, que el diseño reserva y deja vacío. El par
   rótulo/valor es el de `.ficha`, con la cifra en Barlow Condensed como las estadísticas de la banda
   oscura de socio: es la tipografía que el diseño usa para un dato sobre fondo oscuro. */
.ficha-torneo__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
}

.ficha-torneo__dato-rotulo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

.ficha-torneo__dato-valor {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin: 6px 0 0;
}

/* Las dos columnas. `auto-fit` y no `1fr 1fr`: es lo que trae el diseño, y además hace que la
   columna izquierda ocupe todo el ancho cuando no hay tarjeta —un torneo cerrado—, porque una pista
   sin elementos la colapsa. */
.ficha-torneo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  padding-block: clamp(24px, 3.4vw, 40px) 64px;
}

.ficha-torneo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 34px);
  min-width: 0;
}

.ficha-torneo__foto {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.ficha-torneo__bloque {
  /* Tope de medida de lectura, igual que `.cuerpo--medida`: sin tarjeta la columna ocupa los 1360px
     del contenedor, y una línea de 15px ahí pasa de 150 caracteres. */
  max-width: 760px;
}

.ficha-torneo__subtitulo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.ficha-torneo__parrafos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.ficha-torneo__parrafo {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.ficha-torneo__dudas {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.ficha-torneo__enlace {
  font-weight: 700;
  text-decoration: underline;
}

/* La columna de la inscripción. El diseño pone el `sticky` en el propio recuadro; aquí sube al
   envoltorio para que los avisos de éxito y de error viajen pegados a la tarjeta al desplazar.
   88px es el valor del diseño: deja aire por debajo de la cabecera fija. */
.ficha-torneo__lateral {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ──────────────────────── La tarjeta de inscripción ────────────────────────
   Sus campos NO son los `.campo` del resto del sitio, y se separan a propósito en lugar de añadirle
   un modificador: `.campo` dibuja la caja con el rótulo dentro, y aquí el rótulo va encima y el
   borde lo lleva el propio control. Es el mismo criterio por el que existe `.campo-caja`. */
.inscripcion {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 7%);
}

.inscripcion__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.inscripcion__titulo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.inscripcion__precio {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.inscripcion__cifra {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.inscripcion__por {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.inscripcion__campos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.inscripcion__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inscripcion__rotulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.inscripcion__input {
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
}

/* El diseño marca el foco oscureciendo el borde del campo. Se conserva, y el contorno de
   `:focus-visible` de `2-base.css` sigue por encima para quien recorre con teclado. */
.inscripcion__input:focus {
  border-color: var(--ink);
}

.inscripcion__input::placeholder {
  color: var(--placeholder);
}

.inscripcion__desglose {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.inscripcion__linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.inscripcion__linea--total {
  border-top: 1px solid var(--line);
  padding-top: 9px;
  font-size: 17px;
  font-weight: 700;
}

.inscripcion__concepto {
  color: var(--muted);
}

.inscripcion__linea--total .inscripcion__concepto {
  color: inherit;
}

.inscripcion__importe {
  margin: 0;
}

.inscripcion__enviar {
  margin-top: 16px;
  padding: 16px;
  letter-spacing: 0.04em;
}

.inscripcion__nota {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* El aviso de que se están dando los datos de otra persona. Se lee antes de los campos: no es una
   nota al pie, es la condición de lo que se está enviando. Filete lateral en tinta y no fondo de
   color: con el fondo suave sería indistinguible del mensaje de éxito, y el de error no es —esto no
   es un fallo de quien rellena. El color de acento se descarta a propósito: lo elige cada academia y
   el del diseño es un lima que sobre blanco apenas se ve. */
.inscripcion__aviso {
  margin: 18px 0 0;
  border-left: 3px solid var(--ink);
  padding: 2px 0 2px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* La casilla de consentimiento se comparte con el formulario de contacto, que la separa con el gap
   de su rejilla. La tarjeta no es una rejilla —sus bloques se separan con los márgenes del diseño—,
   así que aquí el hueco se pone a mano. */
.inscripcion .consent {
  margin-top: 14px;
}

/* ═══════════════════════════════ Noticias ═══════════════════════════════ */

.noticias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* La imagen es un marcador cuando la noticia no trae portada: el mismo patrón de rayas que el
   diseño usa para las imágenes pendientes. */
.noticia__imagen {
  display: block;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(135deg, #eceae6 0 10px, #f5f3f0 10px 20px);
  overflow: hidden;
}

.noticia__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.noticia {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.noticia__cuerpo {
  display: block;
  padding: 16px;
}

.noticia__fecha {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mono-muted);
}

.noticia__titulo {
  display: block;
  font-size: 19px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.25;
  text-wrap: pretty;
}

.noticia__entradilla {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
}

.noticia-destacada {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 24px;
  color: inherit;
  text-decoration: none;
}

.noticia__imagen--grande {
  flex: 1 1 380px;
  min-height: 260px;
  aspect-ratio: auto;
}

.noticia-destacada__texto {
  flex: 1 1 320px;
  padding: clamp(18px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.noticia-destacada__titulo {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  margin-top: 8px;
}

.noticia-destacada__enlace {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

.paginas {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  font-size: 14px;
}

.paginas__estado {
  color: var(--muted);
}

/* La portada del detalle ocupa todo el ancho del contenedor, con el alto acotado: en 16:9 a 1360px
   serían 765px de alto y empujaría el texto fuera de la pantalla. Del recorte se encarga el
   `object-fit: cover` que ya hereda de `.noticia__imagen`. */
.noticia__imagen--detalle {
  display: block;
  border-radius: 10px;
  margin-top: 20px;
  max-height: 460px;
}

/* Tope de medida de lectura: a 1360px una línea de 15px pasa de 150 caracteres, y se lee cómodo
   entre 45 y 85. Queda alineado a la izquierda, no centrado, para que no baile respecto al titular.

   Es un modificador y no un cambio en `.cuerpo` porque ese bloque lo comparten los textos legales,
   que ya viven en un contenedor estrecho y no necesitan el tope.

   Lo usan las bases de un torneo. El detalle de noticia lo llevaba y se le quitó a propósito: allí
   el cuerpo va a la anchura de la portada. */
.cuerpo--medida {
  max-width: 760px;
}

.noticia__volver {
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
}

.noticias-inicio {
  padding-block: clamp(28px, 4vw, 40px);
}

.noticias-inicio__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.noticias-inicio__titulo {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.noticias-inicio__todas {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* ═══════════════════════════ Páginas de aviso ═══════════════════════════ */
/* Página centrada sin marca de academia: la comparten "sin web publicada" y la de error.
   Se llama `pagina-aviso` y no `sin-web` porque tiene dos consumidores, y no `aviso`
   porque ese es el banner de cookies. */
.pagina-aviso {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(48px, 12vh, 120px) var(--gutter);
}

.pagina-aviso__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mono-muted);
  margin: 0;
}

.pagina-aviso__titulo {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 12px 0 0;
}

.pagina-aviso__texto {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 0;
}

/* ═══════════════════════════ Reservar pista ═══════════════════════════ */

/* Rejilla fluida de tarjetas, compartida por la tienda y el escaparate. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.rejilla__pie {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 16px 0 0;
}

/* ═════════════════════════ Reservas del socio ═════════════════════════ */

.reservas {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.reservas__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.reservas__fila:first-child {
  border-top: 0;
}

.reservas__pista {
  font-weight: 700;
  margin: 0;
}

.reservas__dato {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 0;
}

/* ═════════════════════════ Tienda y carrito ═════════════════════════ */

/*
  El escaparate reutiliza `.datos` (la rejilla de tarjetas) y `.tarjeta`, igual que las secciones de
  "Mi cuenta": un producto es una tarjeta con su título, su texto y su acción. Lo único propio es el
  precio y la fila de acciones del carrito.
*/
.producto__precio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  margin: 14px 0 0;
}

/* El precio de antes, tachado. Lo marca el club poniendo `original_price` por encima del precio. */
.producto__antes {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
  color: var(--muted);
}

/* La tarjeta de producto es compacta: el botón ya trae su propio aire, así que el formulario no suma
   el suyo o quedarían treinta y dos píxeles dentro de una tarjeta pequeña. */
.producto__form {
  margin-top: 0;
}

/* En el carrito, cambiar la cantidad y quitar son dos formularios que van uno junto al otro. */
.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.producto__total {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-align: right;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 14px 0 18px;
}

/* ─────────────────────── La rejilla de torneos ───────────────────────
   Igual que `.noticias` salvo en una palabra: **auto-fill en vez de auto-fit**.

   Con `auto-fit`, las pistas vacías se colapsan y una sola tarjeta se estira a todo
   el ancho — que es lo correcto para noticias, donde el listado es la página entera,
   y no aquí: bajo el destacado, una tarjeta estirada compite con él y parece un
   segundo destacado. Con `auto-fill` las pistas se mantienen, así que una tarjeta
   ocupa una columna y el resto queda libre a su derecha.

   No se cambia `.noticias`, que la comparten el listado de noticias y el Inicio: ahí
   el comportamiento actual es el que se quiere. */
.torneos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* ─────────────────────────── Acceso a la zona privada ───────────────────────────
   La pantalla partida del diseño: panel oscuro de marca y panel de formulario, a sangre y con las
   dos mitades sangradas hacia el centro del armazón.

   `auto-fit` y no `auto-fill`, al contrario que en la rejilla de torneos: aquí SÍ se quiere que las
   pistas vacías colapsen, porque por debajo de 800px las dos mitades tienen que apilarse a ancho
   completo en vez de dejar media pantalla en blanco. */
.acceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  align-items: stretch;
  /* La altura de la cabecera, que es lo que el diseño descuenta para que la pantalla llene el alto
     sin provocar scroll. */
  min-height: calc(100vh - 72px);
}

.acceso__marca {
  background: var(--dark-alt);
  color: var(--dark-banda-fg);
  padding: clamp(28px, 3.6vw, 44px);
  /* El sangrado izquierdo alinea el texto con el armazón del resto del sitio, pero el fondo sigue
     llegando al borde de la ventana. */
  padding-left: max(clamp(16px, 3vw, 32px), calc((100vw - var(--shell-max)) / 2 + clamp(16px, 3vw, 32px)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}

.acceso__antetitulo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.acceso__titular {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 14px 0 0;
}

.acceso__bajada {
  font-size: 15px;
  color: var(--dark-banda-muted);
  margin: 14px 0 0;
  line-height: 1.6;
  max-width: 420px;
  text-wrap: pretty;
}

.acceso__ventajas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acceso__ventaja {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  color: #d9d5cd;
}

.acceso__tic {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.acceso__panel {
  background: var(--surface);
  padding: clamp(26px, 3.4vw, 44px);
  padding-right: max(clamp(16px, 3vw, 32px), calc((100vw - var(--shell-max)) / 2 + clamp(16px, 3vw, 32px)));
  display: flex;
  align-items: center;
  justify-content: center;
}

.acceso__caja {
  width: 100%;
  max-width: 440px;
}

/* El conmutador de pestañas. Son enlaces reales: la pestaña activa se marca con la clase, no con
   JavaScript, para que funcione con el botón de atrás y se pueda compartir la URL. */
.conmutador {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-mute);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}

.conmutador__opcion {
  text-align: center;
  padding: 11px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

.conmutador__opcion--activa {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.acceso__titulo {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 26px 0 0;
}

.acceso__bajada-clara {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.6;
}

/* La fila de "No cerrar sesión" y el enlace de contraseña olvidada, uno a cada extremo. */
.acceso__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.casilla {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.acceso__enlace,
.acceso__pie a,
.acceso__volver a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
}

.acceso__pie {
  font-size: 13px;
  color: var(--muted);
  margin: 22px 0 0;
  text-align: center;
  line-height: 1.6;
}

.acceso__pie a {
  color: var(--ink);
  font-weight: 700;
}

.acceso__volver {
  margin: 0 0 4px;
  font-size: 13px;
}

/* El botón Ver/Ocultar lo crea acceso.js dentro del marco del campo. La regla vive aquí y no en el
   JavaScript porque el estilo es estilo: si el fichero no se ejecuta, no hay nada que colocar. */
.campo--con-boton {
  position: relative;
  padding-right: 74px;
}

.ver-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* ─────────────────────────── Disponibilidad de pistas ───────────────────────────
   La pantalla del diseño: chips de deporte, tira de días, tarjeta con todas las pistas y tarjeta
   fija "Tu reserva".

   Ni un `:hover` decide nada aquí: la selección es una URL, así que lo que se ve seleccionado lo
   pinta el servidor con `.hora--elegida`. Sin JavaScript no hay estado intermedio que perder. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
}

.chip--activo {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* La tira de días desborda a lo ancho en móvil, como en el diseño: catorce días no caben, y
   apilarlos empujaría la rejilla fuera de la primera pantalla. */
.tira-dias {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.dia {
  flex: 0 0 auto;
  min-width: 78px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
}

.dia--activo {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.dia__dow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.dia__num {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
}

.disponibilidad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}

.tarjeta-pistas {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.tarjeta-pistas__cabecera {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.tarjeta-pistas__titulo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

.tarjeta-pistas__cuerpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pista__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  align-items: baseline;
}

.pista__nombre {
  font-size: 15px;
  font-weight: 700;
}

.pista__dato {
  font-size: 13px;
  color: var(--muted);
}

.pista__cerrada {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
}

.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.hora {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.hora--elegida {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Ocupada: apagada y no ausente. Es un <span>, así que no hace falta quitarle nada de enlace. */
.hora--ocupada {
  background: var(--surface-mute);
  border-color: var(--surface-mute);
  color: var(--disabled-fg);
  cursor: default;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  padding-top: 4px;
  border-top: 1px solid var(--surface-mute);
}

.leyenda__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leyenda__caja {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-block;
}

.leyenda__caja--elegida {
  background: var(--accent);
  border-color: var(--accent);
}

.leyenda__caja--ocupada {
  background: var(--surface-mute);
  border-color: var(--surface-mute);
}

/* La tarjeta se queda fija al desplazar, como en el diseño: la rejilla es larga y el total tiene que
   seguir a la vista mientras se encadenan huecos. */
.tu-reserva {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  position: sticky;
  top: 82px;
}

.tu-reserva__titulo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.tu-reserva__vacia {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 16px;
}

.tu-reserva__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}

.tu-reserva__pista {
  font-size: 14px;
  font-weight: 700;
}

.tu-reserva__vaciar {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
}

.tu-reserva__huecos {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tu-reserva__hueco {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-alt);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
}

.tu-reserva__precio {
  font-weight: 600;
}

.desglose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  /* Sin margen inferior: quien separa del botón es el propio botón. */
  margin: 12px 0 0;
  font-size: 14px;
}

.desglose dt {
  color: var(--muted);
}

.desglose dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.desglose__total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-size: 17px;
  font-weight: 700;
}

.desglose dt.desglose__total {
  color: var(--ink);
}

.tu-reserva__nota {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 12px 0 0;
}

/* Un botón que no lleva a ninguna parte no es un <button disabled>, es un <span>: no hay formulario
   que enviar mientras no haya selección. */
.btn--apagado {
  background: var(--surface-mute);
  color: var(--disabled-fg);
  cursor: default;
}

.sellos-pago {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.sello {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 4px 9px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* ─────────────────────── Portada: reserva rápida y libre ahora mismo ───────────────────────
   La tarjeta blanca del hero y la banda de pistas con hueco. Las dos son del layout clásico del
   diseño, que es el único implementado. */
.reserva-rapida {
  flex: 0 1 430px;
  min-width: 290px;
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.reserva-rapida__titulo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.reserva-rapida__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

/* Un <select> dentro de `.campo` hereda su caja; sin esto trae la flecha y el marco del navegador,
   que no se parecen a los demás campos del sitio. */
.campo__input option {
  color: var(--ink);
}

select.campo__input {
  appearance: none;
  cursor: pointer;
}

.libre-hoy {
  padding-block: clamp(28px, 4vw, 40px);
}

.libre-hoy__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.libre-hoy__titulo {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.libre-hoy__enlace {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* Cuatro por fila, y con menos de cuatro NO se estiran: columnas fijas en vez de `auto-fit`, que es
   lo que hacía que dos pistas ocuparan media pantalla cada una. Se baja a tres, dos y una según cabe. */
.libre-hoy__rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .libre-hoy__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .libre-hoy__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .libre-hoy__rejilla { grid-template-columns: 1fr; }
}

/* La tarjeta entera es el enlace, como en el diseño: el destino es el mismo desde cualquier parte de
   ella, así que un enlace suelto dentro sería un objetivo más pequeño para el mismo sitio. */
.pista-libre {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.pista-libre:hover {
  border-color: var(--ink);
}

/* La foto del diseño: una banda de 104 px que recorta, no deforma. */
.pista-libre__foto {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
}

.pista-libre__cuerpo {
  display: block;
  padding: 12px;
}

.pista-libre__nombre {
  font-size: 15px;
  font-weight: 600;
}

.pista-libre__tipo {
  font-size: 13px;
  color: var(--muted);
}

.pista-libre__horas {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pista-libre__hora {
  background: var(--surface-mute);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 4px;
  color: var(--muted);
}

.pista-libre__precio {
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}

/* Portada con foto de fondo. La imagen la pone la vista en un `style`, que es donde puede estar un
   dato de la academia; aquí solo va cómo se coloca. */
.hero--foto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* La tarjeta de inscripción cuando el visitante no se ha identificado: mismo marco, y en lugar del
   formulario la invitación a entrar o crear cuenta. */
.inscripcion--anonima {
  display: flex;
  flex-direction: column;
}

.inscripcion__aviso {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 0;
}

/* El aviso de la tarjeta cuando hace falta identificarse para reservar. */
.tu-reserva__aviso {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 0;
}

/* ─────────────────────────────── La factura del socio ───────────────────────────────
   Se ve en pantalla y se imprime con el navegador. Las reglas de impresión van al final: quitan lo
   que no es la factura —cabecera, pie, acciones— para que salga la hoja y nada más. */
.factura__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* El botón de descarga no se estira a lo ancho como el resto de .btn de las tarjetas. */
.factura__descargar {
  flex: none;
}

.factura__hoja {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 40px);
  background: var(--surface);
}

.factura__cabecera,
.factura__partes {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.factura__partes {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.factura__club {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.factura__identidad {
  text-align: right;
}

.factura__rotulo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.factura__numero {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.factura__dato {
  font-size: 14px;
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.5;
}

.factura__dato--fuerte {
  color: var(--ink);
  font-weight: 600;
}

.factura__lineas {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  font-size: 14px;
}

.factura__lineas th,
.factura__lineas td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}

.factura__lineas th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Las cifras alineadas a la derecha y con dígitos de ancho fijo: en una columna de importes, las
   cifras que no cuadran se leen mal. */
.factura__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.factura__totales {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  margin: 20px 0 0;
  margin-left: auto;
  max-width: 320px;
  font-size: 14px;
}

.factura__totales dt {
  color: var(--muted);
}

.factura__totales dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.factura__total {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

@media print {
  /* Al imprimir queda solo la factura: la cabecera, el pie, el aviso de cookies y el enlace de
     volver no son parte del documento. */
  .bar,
  .pie,
  .cookies,
  .salto,
  .factura__acciones {
    display: none !important;
  }

  .factura__hoja {
    border: 0;
    padding: 0;
  }

  .factura {
    padding: 0;
  }
}

/* ═══════════════════════════ Clases y servicios ═══════════════════════════
   El escaparate del catálogo de servicios que el club marca "Mostrar en la web". Las tarjetas son
   enlaces —cada ficha es una URL— y no divs con onClick como el prototipo. */
.clases__intro {
  font-size: 16px;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.6;
  max-width: 720px;
  text-wrap: pretty;
}

.clases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.clase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.clase:hover {
  border-color: var(--ink);
}

.clase__cabecera {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.clase__nombre {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}

/* El tipo de sesión, en un distintivo hueco: es una etiqueta, no un estado. */
.clase__tipo {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.clase__resumen {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
}

.clase__datos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.clase__dato {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.clase__rotulo {
  color: var(--muted);
}

.clase__ver {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
}

/* ── La ficha de una clase ── */
.clase-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.clase-ficha__tipo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 18px 0 0;
}

.clase-ficha__titulo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.clase-ficha__texto {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  text-wrap: pretty;
  margin-top: 12px;
}

.clase-ficha__texto p {
  margin: 0 0 12px;
}

.clase-ficha__aviso {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 16px;
}

.clase-ficha__nota {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 10px 0 0;
}

/* Las dos columnas de la ficha: el texto se puede encoger y la tarjeta se queda pegada arriba
   mientras se lee, como en el diseño. */
.clase-ficha__cuerpo {
  min-width: 0;
}

.clase-ficha__interes {
  position: sticky;
  top: 88px;
  min-width: 0;
}

/* En pantalla estrecha la tarjeta deja de perseguir al lector: no hay sitio y estorba. */
@media (max-width: 720px) {
  .clase-ficha__interes {
    position: static;
  }
}

/* ═══════════════ La banda de dos columnas del inicio ═══════════════
   Torneo destacado sobre el acento y clases sobre el oscuro, a sangre y del mismo alto. Si solo hay
   una de las dos, la rejilla la estira: mejor una mitad entera que media franja vacía. */
.banda-doble {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* El COLOR va de lado a lado, pero el contenido se alinea con el resto de la página: el mismo truco
   que usa el diseño en el panel de marca del acceso. Al margen normal se le suma lo que sobra a cada
   lado del contenedor de 1360, así que el texto empieza donde empieza "Noticias del club" y el fondo
   sigue llegando al borde. Con la pantalla estrecha ese sobrante es negativo y manda el margen. */
.banda-doble__torneo,
.banda-doble__clases {
  padding: clamp(26px, 4vw, 38px) var(--gutter);
}

.banda-doble__torneo {
  padding-left: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)));
}

.banda-doble__clases {
  padding-right: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)));
}

/* Con una sola mitad, la columna ocupa el ancho entero y se alinea por los dos lados. */
.banda-doble__torneo:only-child,
.banda-doble__clases:only-child {
  padding-inline: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)));
}

/* Apiladas no hay "lado de fuera": las dos se alinean como el resto de la página. */
@media (max-width: 700px) {
  .banda-doble__torneo,
  .banda-doble__clases {
    padding-inline: var(--gutter);
  }
}

.banda-doble__torneo {
  background: var(--accent);
  color: var(--on-accent);
}

.banda-doble__clases {
  background: var(--dark-alt);
  color: #fff;
}

.banda-doble__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  /* Sobre el acento, el propio texto del acento no se leería: se apaga el de encima. */
  opacity: 0.72;
}

.banda-doble__titulo {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  margin: 8px 0 0;
  text-wrap: balance;
}

.banda-doble__titulo--claro {
  font-size: clamp(26px, 3.4vw, 32px);
  margin: 0;
}

.banda-doble__titulo a {
  color: inherit;
  text-decoration: none;
}

.banda-doble__titulo a:hover {
  text-decoration: underline;
}

.banda-doble__texto {
  font-size: 15px;
  margin: 12px 0 0;
  line-height: 1.55;
  max-width: 420px;
  opacity: 0.82;
  text-wrap: pretty;
}

.banda-doble__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  align-items: center;
}

.banda-doble__plazas {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.82;
}

.banda-doble__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.banda-doble__clase {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--dark-line);
  padding-bottom: 12px;
  color: inherit;
  text-decoration: none;
}

.banda-doble__clase-nombre {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.banda-doble__clase-horario {
  display: block;
  font-size: 13px;
  color: var(--dark-muted);
  margin-top: 2px;
}

.banda-doble__clase-chip {
  background: var(--dark-line);
  color: var(--dark-banda-fg);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.banda-doble__todas {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-muted);
}

/* El mapa del contacto: a sangre dentro de su tarjeta, como el diseño. Alto fijo de 200 px, que es
   suficiente para situarse sin comerse la columna. */
.tarjeta--sin-relleno {
  padding: 0;
  overflow: hidden;
}

.tarjeta__relleno {
  padding: clamp(18px, 3vw, 26px);
}

.mapa {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
}