/* ─────────────────────────────────────────────────────────────────────
 * LA FICHA DEL CLUB
 *
 * Un mundo visual propio, y sólo de esta página: fondo negro, Fraunces para
 * los títulos, secciones numeradas. Es el quinto del sistema —después del
 * panel, la vitrina de cada tienda, lo público viejo y el diseño nuevo— y va
 * en su propio archivo por eso mismo: se carga en una pantalla y no tiene por
 * qué pesar en las otras cincuenta.
 *
 * NO USA LOS TOKENS DE `pista.css` a propósito. Los suyos son otros —el negro
 * es más negro, el verde es otro verde— y mezclarlos daría una página que no
 * es ni una cosa ni la otra. Lo que sí comparte es el encabezado y el pie de
 * PISTA, que son la marca y tienen que verse iguales en todas partes.
 * ───────────────────────────────────────────────────────────────────── */

.cl {
  --bg: #0B0C0E;
  --surface: #141619;
  --accent: #1F4D3A;
  --text: #F2EFE9;
  --muted: #B7BCB7;
  --line: #3D423F;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --gutter: clamp(24px, 5vw, 80px);
  /* El aire entre secciones. Estaba en 12vw —173 px arriba y 173 abajo en un
     monitor: 345 px de negro entre una sección y la siguiente—, y en una
     página de ocho secciones eso son casi tres pantallas de nada. Bajado a la
     mitad: sigue habiendo respiro editorial y el recorrido no se corta. */
  --seccion: clamp(3.5rem, 6vw, 7rem);
  --curva: cubic-bezier(.16, 1, .3, 1);

  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 var(--sans);
}
.cl a { color: inherit; text-decoration: none; }
.cl img { display: block; width: 100%; object-fit: cover; }
.cl h1, .cl h2, .cl h3, .cl p, .cl figure { margin: 0; }
.cl h1, .cl h2 { font-family: var(--serif); line-height: .98; letter-spacing: -.03em;
                 font-weight: 600; }
.cl h1 { font-size: clamp(3.5rem, 9vw, 9rem); }
.cl h2 { font-size: clamp(3rem, 6.7vw, 6.5rem); }
.cl h3 { font-weight: 500; }
.cl em { font-weight: inherit; }
.cl ::selection { background: var(--accent); color: var(--text); }
.cl a:focus-visible, .cl [tabindex]:focus-visible {
  outline: 3px solid var(--text); outline-offset: 6px;
}

.cl-marco { padding-inline: var(--gutter); }
.cl-sec { padding-block: var(--seccion); position: relative; background: var(--bg); }

/* El rótulo numerado de cada sección: «01 / El club». El número es lo que
   convierte una lista de bloques en un recorrido con principio y fin. */
.cl-rot { display: flex; gap: 24px; align-items: baseline; margin-bottom: 32px;
          font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.cl-rot span { color: var(--muted); }
.cl-tenue { color: var(--muted); }
.cl-cab { display: flex; align-items: end; justify-content: space-between;
          gap: 48px; margin-bottom: 44px; }
.cl-cab p { max-width: 300px; }
.cl-num { font-variant-numeric: tabular-nums; }

/* El enlace que se estira al pasar por encima. Es el gesto de esta página:
   no hay botones de colores salvo el de reservar. */
.cl-ir { display: inline-flex; align-items: center; gap: 24px; border-bottom: 1px solid;
         padding-block: 10px; font-size: .9375rem; transition: gap .35s var(--curva); }
.cl a.cl-ir:hover { gap: 40px; color: inherit; }
/* `.cl a` gana por especificidad —dos partes contra una— así que el color va
   con el elemento adentro: sin esto el botón salía crema sobre crema, con el
   texto invisible, y era el único botón de la página. */
.cl a.cl-cta { display: inline-flex; align-items: center; justify-content: space-between;
               gap: 48px; padding: 18px 24px; background: var(--text); color: var(--bg);
               font-size: .9375rem; font-weight: 600;
               transition: gap .35s var(--curva), transform .35s var(--curva); }
.cl a.cl-cta:hover { gap: 64px; transform: translateY(-3px); color: var(--bg); }

/* ── La portada ─────────────────────────────────────────────────────
   Dos pantallas de alto con la foto pegada: se entra al club antes de leer
   nada. Sin JavaScript funciona igual —el `sticky` es CSS— y sin foto se
   queda en una sola pantalla, porque dos pantallas de negro no son una
   entrada, son un error. */
.cl-hero { height: 200svh; position: relative; }
.cl-hero--sinfoto { height: auto; }
.cl-pin { position: sticky; top: 0; height: 100svh; min-height: 760px;
          overflow: hidden; background: var(--bg); }
.cl-hero--sinfoto .cl-pin { position: relative; height: auto; min-height: 0;
                            padding-bottom: 40px; }
.cl-foto { position: absolute; inset: 0; overflow: hidden; }
.cl-foto img { height: 100%; transform: scale(1.08); object-position: 50% 45%; }
/* La cortina: sin ella el texto blanco se pierde sobre una foto clara, que es
   la mitad de las fotos de cancha. */
.cl-foto::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.66); }
.cl-hero__c { position: relative; padding-top: clamp(120px, 17vh, 176px); z-index: 2; }
.cl-id { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.cl-id__logo { width: 64px; height: 64px; flex: none; background: #fff;
               display: grid; place-items: center; overflow: hidden; }
.cl-id__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%;
                   object-fit: contain; }
.cl-id__logo i { font-style: normal; font-weight: 700; font-size: 22px; color: var(--bg); }
.cl-id p { font-size: .875rem; }
.cl-hero h1 span { display: block; padding-bottom: .08em; }
.cl-hero h1 em { font-weight: 500; }
.cl-acc { display: flex; gap: 32px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.cl-pie-hero { position: absolute; bottom: 32px; left: var(--gutter); right: var(--gutter);
               z-index: 3; display: flex; align-items: end; justify-content: space-between;
               gap: 32px; border-top: 1px solid #ffffff60; padding-top: 24px; }
.cl-hero--sinfoto .cl-pie-hero { position: relative; left: auto; right: auto; bottom: auto;
                                 margin: 64px var(--gutter) 0; }
.cl-cifras { display: flex; gap: 64px; }
.cl-cifra { display: flex; gap: 12px; align-items: baseline; }
.cl-cifra b { font: 500 3rem/1 var(--serif); }
.cl-cifra span, .cl-estado { font-size: .875rem; }
.cl-estado { text-align: right; }
.cl-estado small { display: block; font-size: .875rem; margin-top: 6px; }

/* ── El manifiesto ──────────────────────────────────────────────────
   Lo que el club escribió de sí mismo, en grande. Sólo si lo escribió: una
   frase inventada por nosotros la lee el club y deja de creernos. */
.cl-manif p { max-width: 1180px; font: 500 clamp(2rem, 4.2vw, 4rem)/1.22 var(--serif);
              letter-spacing: -.025em; }
.cl-manif .cl-rot { margin-bottom: 40px; }

/* ── Disponibilidad ──────────────────────────────────────────────────
   PRIMERO EL DÍA, DESPUÉS LA HORA. Una pieza sola, en dos mitades: la foto
   con la promesa y el panel claro donde se elige.

   El panel es claro sobre la página negra a propósito: es lo único de esta
   ficha que se aprieta, y el contraste invertido lo separa de todo lo demás
   sin necesidad de un borde ni de una sombra de más. */
.cl-disp { background: var(--bg); }
/* La cabecera del club es pegajosa: sin este margen, el salto deja la primera
   fila del panel —los días— debajo de ella, y el que acaba de elegir un día no
   ve lo que eligió. */
.cl-disp, .dp-panel { scroll-margin-top: 96px; }
.cl-disp .cl-rot span { color: var(--muted); }

.dp {
  display: grid; grid-template-columns: 1fr 1.15fr;
  border-radius: 28px; overflow: hidden;
  background: var(--surface);
}

/* ── La mitad de la foto ────────────────────────────────────────────
   Columna flexible y no posiciones absolutas: la marca arriba y el texto
   abajo, con el hueco en medio. Con `position:absolute` un nombre de club
   largo se montaba encima del título, y el bloque de abajo quedaba colgado de
   una altura fija que el panel de al lado no respeta. */
.dp-foto {
  position: relative; min-height: 520px; background: #0F1A14; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 28px; padding: 28px;
}
.dp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El degradado NO es decoración: sin él, una foto clara deja el título
   ilegible y una oscura deja la marca invisible. Va de los dos lados. */
.dp-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.12) 38%,
              rgba(11,12,14,.82) 100%);
}
/* El club sin foto tampoco se queda acá con un rectángulo verde: va una
   cancha al atardecer con las luces prendidas, GENÉRICA y dicha como tal al
   pie del panel. Es otra foto que la de «Las canchas» a propósito: la misma
   dos veces en la misma página se lee como un error. Fondo de CSS por lo
   mismo de allá: nada que describir en el árbol de accesibilidad, y el
   navegador sólo la pide cuando la regla aplica. */
.dp-foto--sin { background: #0F1A14 url("/img/pista/cancha-atardecer.jpg")
                center / cover no-repeat; }
.dp-foto > :not(img) { position: relative; z-index: 1; }

/* La fila de arriba: el nombre del club y la píldora, con el hueco entre los
   dos. Si el nombre es largo, se corta él y no empuja a la píldora fuera. */
.dp-alto { display: flex; align-items: flex-start; justify-content: space-between;
           gap: 16px; }
.dp-marca {
  font: 600 1.125rem/1.2 var(--sans); letter-spacing: -.02em; color: #fff;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La píldora: es el tono de la marca, no un botón. Por eso no tiene acción. */
.dp-chip {
  flex: none; padding: 10px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .875rem; color: #fff; white-space: nowrap;
}
.dp-txt { color: #fff; }
.dp-ojo { display: block; font-size: .75rem; letter-spacing: .18em;
          text-transform: uppercase; opacity: .85; margin-bottom: 14px; }
.dp-txt h2 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: .95; color: #fff; }
.dp-txt h2 em { font-style: italic; }
.dp-txt p { margin-top: 16px; font-size: 1rem; line-height: 1.5; opacity: .9; }
/* De quién es la foto, chico y sin robarle nada al título. */
.dp-cred { display: block; margin-top: 20px; font-size: .75rem; opacity: .55; }

/* ── El panel donde se elige ──────────────────────────────────────── */
.dp-panel {
  background: #F4F2ED; color: #14161A;
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 22px;
}
.dp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dp-cab h3 { font: 600 clamp(1.75rem, 2.4vw, 2.25rem)/1 var(--serif); letter-spacing: -.03em; }
.dp-rango { font-size: .9375rem; color: #6C7075; white-space: nowrap; }

/* Los siete días. `1fr` cada uno para que el ancho no dependa del largo del
   nombre: con «Mié» y «Jue» de anchos distintos, la fila se ve desarmada. */
.dp-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
/* `a.` y no `.` a secas en todo lo que sea un enlace de este panel: más
   arriba, `.cl a { color: inherit }` pesa (0,1,1) y le gana a una clase sola,
   así que el número del día elegido y el texto del botón salían del color del
   panel —negro sobre negro, y verde sobre verde—. Con el elemento delante
   empatan en peso y manda el que está después, que es éste. */
a.dp-dia {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 4px 12px; border-radius: 14px;
  background: #EAE7E0; color: #14161A; text-transform: capitalize;
  transition: background .25s var(--curva), color .25s var(--curva),
              transform .25s var(--curva);
}
a.dp-dia:hover, a.dp-dia:focus-visible { background: #DFDBD2; transform: translateY(-2px); }
a.dp-dia--on, a.dp-dia--on:hover { background: #14161A; color: #fff; }
.dp-dia__n { font-size: .8125rem; color: #6C7075; }
.dp-dia--on .dp-dia__n { color: rgba(255, 255, 255, .72); }
.dp-dia__d { font: 500 1.375rem/1 var(--sans); font-variant-numeric: tabular-nums; }
/* El punto dice si ese día tiene algo ANTES de apretarlo: sin él, elegir un
   día es una apuesta y el que cae en el cerrado cree que el club no tiene
   canchas. */
.dp-dia__p { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dp-dia--on .dp-dia__p { background: #7FD1A6; }
a.dp-dia--vacio { color: #9AA0A6; }
.dp-dia--vacio .dp-dia__p { background: transparent; }

.dp-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
          margin-top: 4px; }
/* Sólo la primera letra: `capitalize` pone «Viernes 25 De Septiembre», con
   el «De» en mayúscula, que no es castellano. */
.dp-sub b { font-weight: 600; }
.dp-sub b::first-letter { text-transform: uppercase; }
.dp-sub span { font-size: .875rem; color: #6C7075; }

/* Las horas: dos por fila. La hora en grande es el dato; todo lo demás
   acompaña. */
.dp-horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dp-hora {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; border-radius: 16px;
  background: #fff; border: 1px solid #E3DFD7; color: inherit;
  transition: border-color .25s var(--curva), transform .25s var(--curva),
              box-shadow .25s var(--curva);
}
.dp-hora:hover, .dp-hora:focus-visible {
  border-color: #14161A; transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(20, 22, 26, .10);
}
.dp-hora__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dp-hora__t b { font: 500 clamp(1.75rem, 2.6vw, 2.25rem)/1 var(--sans);
                letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dp-hora__ya { font-style: normal; font-size: .6875rem; letter-spacing: .12em;
               text-transform: uppercase; font-weight: 600; color: var(--accent); }
.dp-hora__c { font-size: .875rem; color: #6C7075; }
.dp-hora__f { position: absolute; top: 18px; right: 18px; font-style: normal;
              color: #9AA0A6; }

.dp-nada { padding: 26px 22px; border-radius: 16px; background: #fff;
           border: 1px dashed #D8D3C9; }
.dp-nada p { color: #6C7075; }
.dp-nada a { display: inline-block; margin-top: 10px; font-weight: 600;
             text-decoration: underline; text-underline-offset: 3px; }

/* El botón grande: la acción principal de toda la ficha. */
a.dp-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-radius: 16px;
  background: var(--accent); color: #fff; font-weight: 600;
  transition: transform .25s var(--curva), background .25s var(--curva);
}
a.dp-cta:hover, a.dp-cta:focus-visible { background: #14161A; transform: translateY(-2px); }
.dp-cta i { font-style: normal; }
.dp-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          font-size: .875rem; color: #6C7075; }
.dp-pie a { text-decoration: underline; text-underline-offset: 3px; }

/* La píldora se va antes que el resto. Entre 900 y 1100 la tarjeta es media
   pantalla y la píldora le come el ancho al nombre del club, que se corta a
   la mitad de una palabra: «MasPa…». La píldora es copia de ambiente; el
   nombre es el club. */
@media (max-width: 1100px) { .dp-chip { display: none; } }

@media (max-width: 900px) {
  /* En el teléfono la foto va arriba y baja de alto: dos tercios de pantalla
     de foto antes de poder elegir el día es una sección que nadie ve. */
  .dp { grid-template-columns: 1fr; border-radius: 22px; }
  .dp-foto { min-height: 300px; }
  .dp-txt h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .dp-horas { grid-template-columns: 1fr; }
  .dp-dias { gap: 6px; }
  a.dp-dia { padding: 10px 2px 9px; border-radius: 12px; }
  .dp-dia__d { font-size: 1.125rem; }
  .dp-cab { flex-wrap: wrap; }
}

/* ── Las canchas ────────────────────────────────────────────────────
   «¿En cuál voy a jugar?». La foto del club a la izquierda con el número
   grande, y a la derecha el tablero donde se elige. El precio no va en
   grande: depende de la cancha y de la hora. */
.cl-canchas { background: var(--surface); }
.cl-canchas, .cn-panel { scroll-margin-top: 96px; }

/* El nombre del club a la derecha del rótulo, como una firma. `margin-left:
   auto` y no una rejilla: el rótulo ya es flex y una columna de más lo
   descuadra cuando el nombre es largo. */
.cn-vuelta { margin-left: auto; color: var(--muted); }
.cn-vuelta:hover { color: var(--text); }

.cn-cab { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
          align-items: end; margin-bottom: 48px; }
.cn-cab h2 em { font-style: italic; color: #9FD8B8; }
.cn-cab p { color: var(--muted); line-height: 1.7; }

.cn { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: stretch; }

/* ── La foto, con el número encima ─────────────────────────────────── */
.cn-foto { position: relative; margin: 0; border-radius: 22px; overflow: hidden;
           min-height: 480px; background: #0F1A14; }
.cn-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El club sin foto no se queda con un rectángulo verde: va una cancha
   cenital, GENÉRICA y dicha como tal en la letra chica de abajo. Es fondo de
   CSS y no un <img>: así no entra al árbol de accesibilidad con un texto
   alternativo que tendría que mentir sobre de quién es la cancha, y el
   navegador sólo la descarga cuando la regla aplica —el club que sí tiene
   foto no la pide—. */
.cn-foto--sin { background: #0F1A14 url("/img/pista/cancha-referencial.jpg")
                center / cover no-repeat; }
/* El degradado de los dos lados: sin él, una foto clara deja el número
   ilegible y una oscura deja la píldora invisible. */
.cn-foto figcaption { position: absolute; inset: 0; padding: 24px;
                      display: flex; flex-direction: column; justify-content: space-between;
                      background: linear-gradient(180deg, rgba(11,12,14,.5) 0%,
                                  rgba(11,12,14,.06) 32%, rgba(11,12,14,.62) 72%,
                                  rgba(11,12,14,.94) 100%);
                      color: #fff; }
.cn-chip { align-self: flex-start; padding: 8px 18px; border-radius: 999px;
           background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
           backdrop-filter: blur(6px); font-size: .8125rem; }
.cn-foto__pie { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 24px; }
.cn-foto__pie > div { max-width: 60%; }
.cn-gran { display: block; font: 500 clamp(4rem, 8vw, 7rem)/0.9 var(--sans);
           letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cn-foto__pie span { font-size: .9375rem; line-height: 1.5; opacity: .92; }
.cn-mas { text-align: right; flex: none; }

/* ── El tablero donde se elige ─────────────────────────────────────── */
.cn-panel { background: #11151A; border: 1px solid #222A31; border-radius: 22px;
            padding: clamp(20px, 2.4vw, 30px);
            display: flex; flex-direction: column; gap: 18px; }
.cn-panel__cab { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 16px; }
.cn-panel__cab b { font-size: 1.25rem; font-weight: 500; }
.cn-panel__cab span { font-size: .875rem; color: var(--muted);
                      font-variant-numeric: tabular-nums; }

/* Las fichas: `auto-fit` con mínimo, para que seis o doce canchas se acomoden
   solas. Con columnas fijas, un club de tres deja media fila vacía. */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
           gap: 10px; }
a.cn-ficha { display: flex; flex-direction: column; align-items: center; gap: 2px;
             padding: 14px 8px 12px; border-radius: 14px;
             border: 1px solid #222A31; background: #141A20; color: var(--text);
             transition: border-color .25s var(--curva), background .25s var(--curva),
                         transform .25s var(--curva); }
a.cn-ficha:hover, a.cn-ficha:focus-visible { border-color: #3C4A55; transform: translateY(-2px); }
a.cn-ficha--on { background: var(--accent); border-color: #9FD8B8; color: #fff; }
.cn-ficha__r { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
               color: var(--muted); }
a.cn-ficha--on .cn-ficha__r { color: rgba(255, 255, 255, .8); }
.cn-ficha__n { font: 500 1.5rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
/* «Central» no es un número: con el cuerpo de un «01» se sale de la ficha, y
   con uno más chico se lee igual —el número es la identidad, el nombre es la
   excepción—. */
.cn-ficha__n--txt { font-size: 1.125rem; letter-spacing: 0; overflow-wrap: anywhere; }

/* La banda ancha: dice la cancha elegida con todas sus letras, y ofrece la
   single —la cancha que la mayoría de los clubes no tiene y que, perdida
   entre las otras once fichas, no se ve—. */
.cn-banda { display: flex; align-items: center; gap: 18px; padding: 18px 22px;
            border-radius: 16px; border: 1px solid #2A3A44; color: var(--text);
            background: linear-gradient(120deg, #17222B 0%, #131A20 100%);
            transition: border-color .25s var(--curva), transform .25s var(--curva); }
a.cn-banda { color: var(--text); }
a.cn-banda:hover, a.cn-banda:focus-visible { border-color: #9FD8B8; transform: translateY(-2px); }
.cn-banda--on { border-color: #9FD8B8;
                background: linear-gradient(120deg, #1B3A2C 0%, #12201A 100%); }
.cn-banda__n { font: 500 2.25rem/1 var(--sans); font-variant-numeric: tabular-nums;
               letter-spacing: -.03em; flex: none; }
.cn-banda__n--txt { font-size: 1.5rem; letter-spacing: 0; max-width: 8ch;
                    overflow-wrap: anywhere; }
.cn-banda__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cn-banda__t b { font-weight: 500; }
.cn-banda__t span { font-size: .875rem; color: var(--muted); }
.cn-banda__e { font-style: normal; font-size: .6875rem; letter-spacing: .14em;
               text-transform: uppercase; padding: 6px 12px; border-radius: 8px;
               border: 1px solid #3C4A55; color: var(--muted); flex: none; }
.cn-banda--on .cn-banda__e { border-color: #9FD8B8; color: #9FD8B8; }

.cn-pie { margin-top: auto; padding-top: 18px; border-top: 1px solid #222A31;
          display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cn-pie b { display: block; font-weight: 500; }
.cn-pie span { font-size: .875rem; color: var(--muted); }
/* El botón claro sobre el tablero oscuro: es la única acción de la sección. */
a.cn-cta { flex: none; padding: 16px 24px; border-radius: 14px;
           background: #F2EFE9; color: #0B0C0E; font-weight: 600; white-space: nowrap;
           transition: transform .25s var(--curva), background .25s var(--curva); }
a.cn-cta:hover, a.cn-cta:focus-visible { background: #fff; transform: translateY(-2px); }

.cn-nota { display: flex; justify-content: space-between; gap: 24px; margin-top: 20px;
           font-size: .8125rem; color: var(--muted); }

/* La lista simple sigue viva: la usan los servicios del club en «Cómo
   llegar». Se queda acá aunque las canchas ya no la usen. */
.cl-lista { margin: 0; padding: 0; list-style: none; display: grid;
            grid-template-columns: 1fr 1fr; gap: 0 24px; }
.cl-lista li { border-top: 1px solid var(--line); padding: 16px 0; font-size: 1rem; }

@media (max-width: 900px) {
  .cn, .cn-cab { grid-template-columns: 1fr; gap: 20px; }
  .cn-cab { margin-bottom: 32px; }
  .cn-foto { min-height: 320px; }
  /* El nombre del club al lado del rótulo parte «02 /» en dos líneas, y es
     un atajo a una sección que en el teléfono está a un pulgar de distancia. */
  .cn-vuelta { display: none; }
  .cn-mas { display: none; }
  .cn-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
  /* El texto entre el número y la píldora queda de tres palabras por línea.
     Bajándolo entero se lee de corrido. */
  .cn-banda { flex-wrap: wrap; gap: 10px 14px; }
  .cn-banda__t { flex: 1 1 100%; order: 3; }
  .cn-banda__e { margin-left: auto; }
  .cn-pie { flex-direction: column; align-items: flex-start; }
  a.cn-cta { width: 100%; text-align: center; }
  .cn-nota { flex-direction: column; gap: 6px; }
}

/* ── La galería ─────────────────────────────────────────────────────
   Placas grandes, una al lado de la otra. La versión con desplazamiento
   horizontal pedía cuatro archivos de una CDN: acá van apiladas, que es la
   misma caída que el diseño usa en el teléfono. */
.cl-gal { background: var(--bg); }
.cl-gal .cl-cab { margin-bottom: 40px; }
.cl-gal__r { display: grid; gap: 48px 32px; grid-template-columns: repeat(2, 1fr); }
.cl-gal figure:first-child { grid-column: 1 / -1; }
.cl-gal__i { overflow: hidden; aspect-ratio: 4 / 5; }
.cl-gal figure:first-child .cl-gal__i { aspect-ratio: 16 / 9; }
.cl-gal img { height: 100%; transition: transform .6s var(--curva); }
.cl-gal figure:hover img { transform: scale(1.03); }
.cl-gal figcaption { padding-top: 20px; display: flex; align-items: baseline;
                     justify-content: space-between; border-top: 1px solid var(--line);
                     margin-top: 20px; font-size: .875rem; }
.cl-gal figcaption b { font: 500 2.5rem var(--serif); }

/* ── El equipo ──────────────────────────────────────────────────────
   Retratos verticales, escalonados. Y las horas libres adentro de cada uno:
   la pregunta no es «quiénes enseñan acá» sino «con cuál puedo el jueves». */
.cl-equipo { background: var(--surface); }
.cl-profes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 24px; }
.cl-profe:nth-child(even) { padding-top: 64px; }
.cl-retrato { aspect-ratio: 3 / 4; overflow: hidden; background: var(--accent); }
.cl-retrato img { height: 100%; filter: grayscale(1); transition: filter .35s, transform .35s; }
.cl-profe:hover img { filter: grayscale(0); transform: scale(1.035); }
/* Donde no hay puntero no hay `hover`, y el gris deja de ser un recurso para
   pasar a ser el estado final: en el teléfono —que es de donde viene casi
   todo el tráfico— el equipo entero quedaba en blanco y negro para siempre.
   La foto la subió el profesor para que se le vea la cara, no para ser una
   textura. */
@media (hover: none) {
  .cl-retrato img { filter: none; }
}
.cl-iniciales { height: 100%; display: flex; align-items: center; justify-content: center;
                font: 500 clamp(4rem, 8vw, 8rem) var(--serif); letter-spacing: -.08em; }
.cl-profe h3 { font: 500 clamp(1.4rem, 2.2vw, 2rem)/1.15 var(--serif); margin: 24px 0 8px; }
.cl-profe__cat { font-size: .875rem; margin-bottom: 16px; }
.cl-profe__est { font-size: .8125rem; color: var(--muted); margin-bottom: 8px; }
.cl-profe .cl-ir { font-size: .875rem; gap: 12px; }
.cl-horas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cl-hora { font-size: .75rem; border: 1px solid var(--line); padding: 4px 8px; }

/* ── La competencia ─────────────────────────────────────────────────── */
.cl-vivo { margin-top: 48px; padding: 40px 0; border-block: 1px solid var(--line);
           display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 40px; }
.cl-fecha { font: 500 4rem/1 var(--serif); }
.cl-fecha small { display: block; font: 400 .875rem var(--sans); margin-top: 12px; }
.cl-marca-vivo { display: inline-block; font-size: .875rem; background: var(--accent);
                 padding: 6px 12px; margin-bottom: 16px; }
.cl-vivo h3 { font: 500 clamp(2rem, 4vw, 4rem)/1.1 var(--serif); margin-bottom: 16px; }
.cl-vivo p { font-size: .9375rem; }
.cl-palmares { margin-top: 64px; }
.cl-palmares h3 { font: 500 2rem var(--serif); margin-bottom: 24px; }
.cl table { width: 100%; border-collapse: collapse; }
.cl th, .cl td { text-align: left; padding: 24px 16px; border-bottom: 1px solid var(--line);
                 font-size: .9375rem; vertical-align: top; }
.cl th { color: var(--muted); font-size: .875rem; font-weight: 400; }
.cl th:first-child, .cl td:first-child { padding-left: 0; }
.cl td small { display: block; color: var(--muted); font-size: .8125rem; margin-top: 8px; }
.cl td a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ── La tienda ──────────────────────────────────────────────────────
   Los dos primeros van grandes y el resto como índice. Las fotos van sobre
   BLANCO y sin recortar: una pala recortada cuadrada pierde el mango, que es
   por donde se reconoce. */
.cl-tienda { background: var(--surface); }
.cl-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 40px; }
.cl-prod { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center;
           border-top: 1px solid var(--line); padding-top: 24px; }
.cl-prod:nth-child(-n+2) { display: block; border: 0; padding: 0; }
.cl-prod__f { aspect-ratio: 1; overflow: hidden; background: #fff; }
.cl-prod__f img { height: 100%; object-fit: contain; transition: transform .35s var(--curva); }
.cl-prod:hover img { transform: scale(1.05); }
.cl-prod:nth-child(-n+2) .cl-prod__f { aspect-ratio: 4 / 3; }
.cl-prod:nth-child(-n+2) .cl-prod__i { display: flex; justify-content: space-between;
                                        gap: 32px; margin-top: 24px; }
.cl-prod h3 { font-size: 1rem; max-width: 330px; font-weight: 400; }
.cl-prod data { font: 500 1.8rem var(--serif); display: block; white-space: nowrap; }
.cl-tienda > .cl-ir { margin-top: 48px; }

/* ── Auspiciadores y marcas ─────────────────────────────────────────
   A COLOR. El gris es para un pie de página que no debe competir con nada;
   acá el club los pone porque quiere que se vean. */
.cl-socios { padding-block: var(--seccion); background: var(--bg); }
.cl-socios h2 { font: 400 .875rem var(--sans); text-transform: uppercase;
                letter-spacing: .12em; margin-bottom: 32px; }
.cl-logos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
.cl-logos img, .cl-vende img { aspect-ratio: 3 / 2; object-fit: contain; background: #fff;
                               padding: 12px; }
.cl-vende { display: flex; gap: 24px; align-items: center; margin-top: 48px; flex-wrap: wrap; }
.cl-vende img { width: 100px; }
.cl-vende p { font-size: .875rem; margin-right: 24px; }

/* ── Dónde queda ────────────────────────────────────────────────────── */
.cl-donde { padding-top: 0; }
.cl-donde__g { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-top: 64px; }
.cl address { font-style: normal; font: 500 clamp(2rem, 3.5vw, 3.5rem)/1.2 var(--serif); }
.cl-donde__l { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.cl-horario th, .cl-horario td { padding-block: 12px; }
.cl-horario td { text-align: right; }
.cl-nota { margin-top: 24px; font-size: .875rem; color: var(--muted); }
/* A COLOR. Estaba invertido y en gris para que no fuera un rectángulo blanco
   en medio de una página negra, y el resultado es que no se distinguía el
   parque de la manzana: un mapa que no se lee no es un mapa, es una textura.
   El recuadro se apoya en el marco, que es cosa de diseño, y no en romperle
   los colores al contenido. */
.cl-mapa { grid-column: 1 / -1; overflow: hidden; border: 1px solid #3D423F; }
/* 2:1 y a todo el ancho de la sección: es el mapa de Google, con la escala
   fija en la manzana, así que un marco más grande no aleja la vista —muestra
   más manzanas—. Angosto quedaba del porte de una estampilla justo donde uno
   mira para saber por dónde llegar. */
.cl-mapa iframe { display: block; width: 100%; aspect-ratio: 2 / 1;
                  height: auto; max-height: 60svh; border: 0; }

/* ── En el teléfono ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cl-hero { height: auto; }
  .cl-pin { position: relative; height: auto; min-height: 780px; padding-bottom: 32px; }
  .cl-hero__c { padding-top: 120px; }
  .cl-hero h1 { font-size: clamp(3.5rem, 12.8vw, 6rem); }
  .cl-foto img { object-position: 58% center; transform: none; }
  .cl-acc { align-items: start; flex-direction: column; gap: 16px; }
  /* Hermano de .cl-hero__c: en `absolute` el gutter venía de left/right, y al
     soltarlo hay que devolvérselo o las cifras salen pegadas al borde. */
  .cl-pie-hero { position: relative; left: auto; right: auto; bottom: auto;
                 margin: 64px var(--gutter) 0; display: block; }
  .cl-cifras { justify-content: space-between; gap: 16px; }
  .cl-cifra { display: block; }
  .cl-cifra b { font-size: 2.5rem; }
  .cl-cifra span { display: block; margin-top: 8px; }
  .cl-estado { text-align: left; margin-top: 24px; }
  .cl-cab { display: block; margin-bottom: 40px; }
  .cl-cab p, .cl-cab > .cl-ir { margin-top: 24px; }
  .cl-rot { margin-bottom: 32px; }
  .cl-canchas__g { grid-template-columns: 1fr; gap: 48px; }
  .cl-gal__r { grid-template-columns: 1fr; gap: 48px; }
  .cl-gal__i, .cl-gal figure:first-child .cl-gal__i { aspect-ratio: 4 / 5; }
  .cl-gal figcaption b { font-size: 2rem; }
  .cl-profes { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .cl-profe:nth-child(even) { padding-top: 40px; }
  .cl-profe h3 { font-size: 1.5rem; }
  .cl-iniciales { font-size: 4rem; }
  .cl-vivo { grid-template-columns: 64px 1fr; gap: 24px; }
  .cl-fecha { font-size: 3rem; }
  .cl-vivo > .cl-ir { grid-column: 2; justify-self: start; }
  /* La tabla del palmarés se lee en filas, con el rótulo delante de cada
     dato: en el teléfono, tres columnas se comen el nombre del torneo. */
  .cl-palmares table, .cl-palmares tbody, .cl-palmares tr, .cl-palmares td { display: block; }
  .cl-palmares thead { display: none; }
  .cl-palmares tr { border-bottom: 1px solid var(--line); padding-block: 24px; }
  .cl-palmares td { border: 0; padding: 8px 0; }
  .cl-palmares td[data-rotulo]::before { content: attr(data-rotulo); display: block;
                                         color: var(--muted); font-size: .8125rem;
                                         margin-bottom: 4px; }
  .cl-prods { gap: 40px 24px; }
  .cl-prod { grid-column: 1 / -1; grid-template-columns: 100px 1fr; }
  .cl-prod:nth-child(-n+2) { grid-column: auto; }
  .cl-prod:nth-child(-n+2) .cl-prod__f { aspect-ratio: 3 / 4; }
  .cl-prod:nth-child(-n+2) .cl-prod__i { display: block; margin-top: 16px; }
  .cl-prod h3 { font-size: .9375rem; }
  .cl-prod data { font-size: 1.5rem; margin-top: 8px; }
  .cl-logos { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cl-logos img { padding: 4px; }
  .cl-vende { flex-wrap: wrap; gap: 16px; }
  .cl-vende p { width: 100%; }
  .cl-donde__g { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Sin animación ──────────────────────────────────────────────────
   Quien pidió no ver movimiento no ve ninguno, y la portada deja de ser de
   dos pantallas: el `sticky` es movimiento aunque no lo parezca. */
@media (prefers-reduced-motion: reduce) {
  .cl *, .cl *::before, .cl *::after { animation: none !important; transition: none !important; }
  .cl-hero { height: auto; }
  .cl-pin { position: relative; height: auto; }
  .cl-foto img { transform: none; }
}

/* ── ¿Es tuyo este club? ─────────────────────────────────────────────
   Al final, sobre el verde: es lo único de la página que no le habla al
   jugador sino al dueño, y el cambio de color es lo que lo separa. */
.cl-reclamo { background: var(--accent); }
.cl-reclamo h2 { margin-bottom: 24px; }
.cl-reclamo p { max-width: 46ch; font-size: 1.0625rem; margin-bottom: 32px; }

/* ── La cabecera de PISTA, en la ficha ───────────────────────────────
   La barra es clara y con desenfoque, y sobre una página negra queda
   flotando como una franja de otro sitio. Acá se pinta del color de la
   página y deja de estar pegada: el diseño la pone arriba y nada más, y en
   una página de trece mil píxeles una barra clara persiguiendo al lector
   corta el recorrido en cada sección.

   La navegación no se pierde: el pie la repite entera, que es justamente por
   lo que el diseño la pone ahí. */
/* El cuerpo también: `body.pista` lo pinta de hueso, y bajo el último bloque
   asomaba una franja clara —la página parecía terminar antes de terminar—. */
body.ficha-club { background: #0B0C0E; }

/* Acá había veinte líneas repintando `.ps-top`, `.ps-pie` y `.ps-fondo` —la
   cabecera, la barra del pulgar y el pie del marketplace— para que no se
   vieran como dos franjas claras sobre una página negra. Ya no hacen falta:
   la ficha del club dejó de usarlos y tiene los suyos, `.clcab` y `.clpie`,
   que nacen oscuros. Se borran en vez de dejarse: una regla que no pinta nada
   igual se lee, se copia y se mantiene. */

/* ─────────────────────────────────────────────────────────────────────
 * LA COMPETENCIA · layout «Club claro»
 *
 * Un bloque CLARO dentro de una página oscura, y es a propósito: la ficha del
 * club es negra y editorial, y ésta es la única sección donde alguien viene a
 * DECIDIR —«¿a cuál voy el sábado?»—. El contraste la separa del resto y la
 * hace leerse como un tablero, que es lo que es.
 *
 * TODO CUELGA DE `.am2`. Los nombres del prototipo —`.card`, `.badge`,
 * `.bar`— son los que cualquiera vuelve a usar: sueltos, chocarían con media
 * página. Y sus propios tokens: este bloque no usa los de `.cl` porque no es
 * del mismo mundo visual.
 *
 * Las otras dos direcciones del prototipo quedan como variantes —`.am2--
 * matchday` y `.am2--agenda`— y no hay selector en producción: se miran
 * agregando `?estilo=matchday` a la ficha del club. Guardadas acá y no en un
 * archivo aparte porque comparten el 80 % de las reglas; separadas habría que
 * arreglar un espaciado tres veces.
 * ───────────────────────────────────────────────────────────────────── */

.am2 {
  --am-tinta: #172234;
  --am-suave: #6b7686;
  --am-linea: #e1e6ee;
  --am-azul: #245eea;
  --am-azulón: #172b49;
  --am-lavado: #f0f4fb;
  background: #fff;
  color: var(--am-tinta);
  font-family: var(--sans);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(4, 8, 16, .45);
}
.am2 * { box-sizing: border-box; }

.am2__club {
  padding: 22px 34px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e6eaf0;
  font-size: .875rem;
  color: var(--am-suave);
}
.am2__club b { color: #14243c; }

.am2__cuerpo { padding: 34px; }
.am2__rot {
  font-size: .75rem; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: #59728e;
}
.am2__cab {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin: 10px 0 28px;
}
/* El título es del prototipo y no de la página: sin este `font`, hereda la
   Fraunces de `.cl h2` y deja de ser el mismo bloque. */
.am2 h2 {
  font: 700 clamp(2rem, 4.2vw, 2.75rem)/1.05 var(--sans);
  letter-spacing: -2px; margin: 0 0 10px; color: var(--am-tinta);
}
.am2 h2 em { font-style: normal; color: #2563eb; }
.am2__sub { color: var(--am-suave); line-height: 1.5; margin: 0; font-size: 1rem; }
.am2__cuenta {
  font-size: .8125rem; white-space: nowrap; border: 1px solid #dde4ed;
  padding: 10px 14px; border-radius: 24px; color: var(--am-suave);
}

.am2__filtros { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.am2__f {
  padding: 10px 16px; background: #fff; border: 1px solid #dce3ee;
  border-radius: 24px; font: inherit; font-size: .875rem; color: #5c6a7e;
  cursor: pointer;
}
.am2__f--on { background: var(--am-azulón); color: #fff; border-color: var(--am-azulón); }

.am2__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.am2__t {
  border: 1px solid var(--am-linea); border-radius: 18px; padding: 23px;
  display: flex; flex-direction: column; min-width: 0; background: #fff;
}
.am2__alto { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.am2__fecha {
  background: var(--am-lavado); border-radius: 12px; min-width: 62px; padding: 10px;
  text-align: center; color: #2a4a72;
}
.am2__fecha strong { font-size: 1.6875rem; display: block; line-height: 1.1; }
.am2__fecha small { font-size: .75rem; text-transform: uppercase; }
.am2__chapa {
  font-size: .75rem; font-weight: 700; padding: 7px 9px; border-radius: 6px;
  background: #e9f0ff; color: #245cc4; white-space: nowrap;
}
.am2__chapa--vivo { background: #fff0e7; color: #b85312; }
.am2__chapa--vivo::before { content: '● '; font-size: .625rem; }
.am2__chapa--quieto { background: #eef1f5; color: #5c6a7e; }

/* `overflow-wrap` y no `text-overflow`: un nombre largo BAJA DE LÍNEA, nunca
   se corta. «Americano de la Primavera 2026» recortado no lo reconoce nadie. */
.am2__t h3 {
  font: 700 1.4375rem/1.2 var(--sans); letter-spacing: -.6px; margin: 24px 0 10px;
  overflow-wrap: anywhere; color: var(--am-tinta);
}
.am2__meta { font-size: .875rem; color: #6a788c; line-height: 1.7; margin: 0; }
.am2__cupo { margin: 22px 0; font-size: .8125rem; color: #56677e; }
.am2__cupo__l { display: flex; justify-content: space-between; gap: 8px; }
.am2__barra {
  display: block; height: 5px; border-radius: 8px; background: #eaf0f6;
  margin-top: 10px; overflow: hidden;
}
.am2__barra > span { display: block; height: 100%; background: #326fed; }

.am2__ir {
  margin-top: auto; background: var(--am-azul); color: #fff; padding: 14px 16px;
  border-radius: 10px; display: flex; justify-content: space-between; gap: 12px;
  font-weight: 700; font-size: .875rem; border: 0;
}
.cl a.am2__ir:hover { background: #1c4fd0; color: #fff; gap: 12px; }

.am2__nada { padding: 32px; text-align: center; color: var(--am-suave); }

.am2__hist { margin-top: 32px; border-top: 1px solid #e3e9f0; padding-top: 26px; }
.am2__hist__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.am2__hist__cab h3 { margin: 0; font: 700 1.125rem var(--sans); color: var(--am-tinta); }
.am2__hist__cab span { font-size: .8125rem; color: #708094; }
.am2__fila {
  display: grid; grid-template-columns: 110px 1fr 1fr 32px; gap: 20px;
  padding: 17px 0; align-items: center; border-bottom: 1px solid #eef1f5;
  font-size: .875rem;
}
.am2__fila__d { color: #56677e; text-transform: uppercase; font-size: .75rem; }
.am2__fila__q { min-width: 0; overflow-wrap: anywhere; }
.am2__fila__q small { display: block; color: #798798; font-size: .75rem; margin-top: 5px; }
.am2__fila__c { color: #68778b; min-width: 0; overflow-wrap: anywhere; }
/* Se lee siempre, se ve sólo en el teléfono: en el escritorio la columna se
   entiende por su sitio, y ahí el rótulo sería ruido repetido siete veces. */
.am2__rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.am2__fila__i {
  background: #f0f4fa; border-radius: 50%; width: 32px; height: 32px;
  display: grid; place-items: center; color: #345;
}
.cl a.am2__fila__i:hover { background: #e2eaf6; color: #234; }

/* ── 02 · Matchday: un americano protagonista y el resto al costado ──── */
.am2--matchday .am2__cuerpo { background: linear-gradient(125deg, #eaf2ff, #f8fbff); }
.am2--matchday h2 { color: #113566; }
.am2--matchday .am2__tarjetas { grid-template-columns: 1.5fr 1fr; gap: 16px; }
.am2--matchday .am2__t:first-child {
  grid-row: span 2; background: linear-gradient(135deg, #1251bb, #2785ec);
  color: #fff; padding: 30px; min-height: 370px;
}
.am2--matchday .am2__t:first-child h3 { font-size: 2.375rem; margin-top: 36px; color: #fff; }
.am2--matchday .am2__t:first-child .am2__meta,
.am2--matchday .am2__t:first-child .am2__cupo { color: #e3edff; }
.am2--matchday .am2__t:first-child .am2__fecha { background: rgba(255,255,255,.13); color: #fff; }
.am2--matchday .am2__t:first-child .am2__ir { background: #fff; color: #1857ba; }
.am2--matchday .am2__t:first-child .am2__barra { background: rgba(255,255,255,.21); }
.am2--matchday .am2__t:first-child .am2__barra > span { background: #b8d8ff; }
.am2--matchday .am2__t:not(:first-child) .am2__cupo { display: none; }

/* ── 03 · Agenda editorial: una lista compacta con ritmo de diario ───── */
.am2--agenda h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -1.5px; }
.am2--agenda h2 em { color: #bf562e; }
.am2--agenda .am2__tarjetas {
  display: flex; flex-direction: column; gap: 0; border-top: 1px solid #dbe2ea;
}
.am2--agenda .am2__t {
  display: grid; grid-template-columns: 180px 1fr 180px 175px; gap: 20px;
  align-items: center; border: 0; border-bottom: 1px solid #dbe2ea;
  border-radius: 0; padding: 25px 0;
}
.am2--agenda .am2__alto { align-items: center; }
.am2--agenda .am2__fecha {
  background: none; border-right: 1px solid #e3e6ea; border-radius: 0;
  padding: 0 18px 0 0;
}
.am2--agenda .am2__fecha strong { font-family: var(--serif); font-size: 2.25rem; }
.am2--agenda .am2__t h3 { font-size: 1.4375rem; margin: 0 0 8px; }
.am2--agenda .am2__cupo { margin: 0; }
.am2--agenda .am2__ir { margin: 0; background: #19324d; }
.am2--agenda .am2__barra > span { background: #cf7145; }
.am2--agenda .am2__f--on { background: #19324d; border-color: #19324d; }

@media (max-width: 900px) {
  .am2 { border-radius: 18px; }
  .am2__club { padding: 18px 20px; }
  .am2__club span { display: none; }
  .am2__cuerpo { padding: 24px 20px; }
  .am2__cab { align-items: flex-start; }
  .am2__cuenta { display: none; }
  .am2__tarjetas,
  .am2--matchday .am2__tarjetas { grid-template-columns: 1fr; }
  .am2--matchday .am2__t:first-child { min-height: 0; padding: 23px; }
  .am2--matchday .am2__t:first-child h3 { font-size: 1.75rem; margin-top: 24px; }
  .am2--agenda .am2__t { grid-template-columns: 1fr; gap: 14px; }
  .am2--agenda .am2__fecha { border-right: 0; padding: 0; }
  /* La fila del historial, en tres: la fecha y el acceso a los costados y el
     nombre con sus campeones al medio. En cuatro columnas a 360 px, «Campeones»
     quedaba en una tira de doce píxeles. */
  .am2__fila { grid-template-columns: 1fr 32px; gap: 10px 12px; }
  .am2__fila__d { grid-column: 1; }
  .am2__fila__i { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .am2__rotulo { position: static; width: auto; height: auto; clip-path: none; color: #9aa7b8; }
}