/* =============================================================================
   CAAMDP · Archivo histórico e institucionales

   Depende de `base.css`, que trae los tokens y todo lo compartido.
   Se carga en el hub, en las ~115 fichas por año y en las tres páginas de
   El Club, y en ningún otro lado.

   ÍNDICE
     1  Hub del archivo
     2  Ficha de edición
     3  Pestañas
     4  El contenido heredado: tablas y galerías
     5  El Club
     6  Punto de quiebre
============================================================================= */


/* =============================================================================
   1 · HUB DEL ARCHIVO
============================================================================= */

.caa-hub {
	overflow: clip;
	padding-bottom: clamp(30px, 4vw, 52px);
}

/*
 * ACÁ EL CRONÓMETRO NO CRUZA EL BORDE, Y ES DISTINTO DEL RECORRIDO.
 *
 * Decía «cruza el borde superior, como en la sección Recorrido» y asomaba 91
 * px por arriba, que `overflow: clip` cortaba. Pero en esta página lo que hay
 * encima no es una banda de color: es el masthead, que empieza en 0 y termina
 * justo donde arranca esta sección. Dejarlo sangrar lo pondría sobre el menú.
 *
 * Y no tendría ni el efecto de la otra página: el masthead y esta sección
 * comparten el mismo fondo, así que un cronómetro asomando por detrás del
 * masthead se vería exactamente igual que uno recortado.
 *
 * Así que entra entero, más grande, y la sección conserva su `overflow: clip`.
 */
.caa-hub__crono {
	position: absolute;
	right: clamp(-50px, -3vw, -10px);
	top: 0;
	width: clamp(150px, 20vw, 330px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

.caa-hub__cuerpo {
	position: relative;
	z-index: 2;
	max-width: var(--caa-max);
}

.caa-hub .caa-antetitulo {
	display: block;
	margin-bottom: 16px;
}

.caa-hub__h1 {
	margin-bottom: 18px;
}

.caa-hub__bajada {
	max-width: 58ch;
}

.caa-hub__cifras {
	margin-top: clamp(30px, 3.6vw, 46px);
	padding-top: clamp(22px, 2.6vw, 30px);
	border-top: 1px solid var(--caa-l14);
	gap: clamp(20px, 3.4vw, 52px);
}

/* --- Filtro por década -----------------------------------------------------
   Son enlaces `?decada=2010`, no botones: funcionan sin JavaScript y cada
   década queda enlazable. El JS de encima sólo evita la recarga.          */

.caa-hub__filtro-caja {
	background: var(--caa-bg);
	padding: 0 var(--caa-md) clamp(14px, 2vw, 24px) var(--caa-mi);
}

.caa-hub__filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2.2vw, 30px);
	max-width: var(--caa-max);
	padding: clamp(14px, 1.8vw, 22px) 0;
	border-top: 1px solid var(--caa-l14);
	border-bottom: 1px solid var(--caa-l14);
}

.caa-decada {
	font-family: var(--caa-body);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--caa-muted);
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
}

.caa-decada.is-activa {
	color: var(--caa-navy);
	border-bottom-color: var(--caa-gold-field);
}

/* --- Grilla de ediciones --------------------------------------------------- */

.caa-hub__grilla-caja {
	background: var(--caa-bg);
	padding: 0 var(--caa-md) clamp(56px, 7vw, 100px) var(--caa-mi);
}

.caa-hub__grilla {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--caa-l14);
}

.caa-edicion {
	flex: 1 1 240px;
	min-width: 0;
	padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 28px) 0;
	border-bottom: 1px solid var(--caa-l14);
	display: block;
}

.caa-edicion[hidden] {
	display: none;
}

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

.caa-edicion__anio {
	font-family: var(--caa-display);
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.caa-edicion__num {
	font-family: var(--caa-body);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	white-space: nowrap;
}

.caa-edicion__recursos {
	display: block;
	font-family: var(--caa-body);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--caa-ink);
	margin-top: 10px;
}

.caa-hub__enlaces {
	max-width: var(--caa-max);
	margin-top: clamp(26px, 3.2vw, 40px);
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--caa-l14);
}

/* --- Nota del archivo ------------------------------------------------------ */

.caa-hub__nota {
	background: var(--caa-bg-warm);
	padding: clamp(34px, 4.4vw, 64px) var(--caa-md) clamp(34px, 4.4vw, 64px) var(--caa-mi);
}

.caa-hub__nota-cuerpo {
	max-width: 760px;
}

.caa-hub__nota-cuerpo .caa-etiqueta {
	display: block;
	margin-bottom: 12px;
}

.caa-hub__nota-cuerpo p {
	font-family: var(--caa-body);
	font-size: 15px;
	line-height: 1.74;
	color: var(--caa-ink);
}

.caa-hub__nota-cta {
	display: inline-block;
	margin-top: 18px;
}


/* =============================================================================
   2 · FICHA DE EDICIÓN
============================================================================= */

.caa-ficha__cabecera {
	position: relative;
	background: var(--caa-bg);
	padding: clamp(40px, 5vw, 72px) var(--caa-md) clamp(26px, 3.2vw, 40px) var(--caa-mi);
}

.caa-volver {
	display: inline-block;
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	margin-bottom: clamp(22px, 2.8vw, 34px);
}

.caa-ficha__cabecera .caa-antetitulo {
	display: block;
	margin-bottom: 14px;
}

/* El año es el titular de la ficha. */
.caa-ficha__anio {
	margin: 0;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(52px, 9vw, 150px);
	line-height: .94;
	letter-spacing: -.03em;
	color: var(--caa-navy);
	font-variant-numeric: tabular-nums;
}

.caa-ficha__pruebas {
	margin-top: clamp(18px, 2.2vw, 26px);
}

.caa-ficha__contenido {
	background: var(--caa-bg);
	padding: clamp(40px, 5vw, 76px) var(--caa-md) clamp(50px, 6vw, 90px) var(--caa-mi);
}

.caa-ancho-ancho {
	max-width: 1240px;
}

.caa-ficha__titulo-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.caa-ficha__h2 {
	margin: 0;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.05;
	color: var(--caa-navy);
}

/* --- Buscador de tablas ----------------------------------------------------
   Es lo que hoy no se puede hacer: encontrar a un piloto por su apellido sin
   leer treinta páginas. Arranca oculto y lo revela el JS, así que sin
   JavaScript no queda un campo muerto en pantalla.                         */

.caa-buscador {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.caa-buscador[hidden] {
	display: none;
}

.caa-buscador input {
	font-family: var(--caa-body);
	font-size: 14px;
	color: var(--caa-navy);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(31, 37, 49, .3);
	padding: 7px 2px;
	min-width: 190px;
	outline: none;
	border-radius: 0;
}

.caa-buscador input:focus-visible {
	border-bottom-color: var(--caa-gold-text);
}

.caa-buscador__cuenta {
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--caa-muted);
}

.caa-ficha__pdf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2.6vw, 34px);
	margin-top: clamp(24px, 3vw, 36px);
}

/* --- Navegación entre ediciones -------------------------------------------- */

.caa-vecinos {
	background: var(--caa-bg-warm);
	padding: clamp(30px, 3.8vw, 54px) var(--caa-md) clamp(30px, 3.8vw, 54px) var(--caa-mi);
}

.caa-vecinos__fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--caa-body);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.caa-vecinos__lado {
	flex: 0 0 auto;
	min-width: 6ch;
}

.caa-vecinos__lado--der {
	text-align: right;
}

.caa-vecinos__todas {
	font-size: 11px;
	letter-spacing: .24em;
	color: var(--caa-gold-text);
}


/* =============================================================================
   3 · PESTAÑAS

   Son enlaces a páginas reales. La activa se marca con el filete dorado y con
   `aria-current`, que es lo que leen los lectores de pantalla.
============================================================================= */

.caa-pestanias {
	background: var(--caa-bg);
	padding: 0 var(--caa-md) 0 var(--caa-mi);
	position: sticky;
	/*
	 * Se pega debajo de la barra compacta, que va en z-index 200 contra los 40
	 * de acá: con `top: 0` quedaba tapada. Con 70 px fijos dejaba el hueco
	 * mientras la barra no estaba, así que sigue a `--caa-barra`.
	 */
	top: var(--caa-barra);
	transition: top .45s var(--caa-ease);
	z-index: 40;
}

.caa-pestanias__fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.6vw, 38px);
	padding: clamp(13px, 1.6vw, 18px) 0;
	border-top: 1px solid var(--caa-l14);
	border-bottom: 1px solid var(--caa-l14);
	background: var(--caa-bg);
}

.caa-pestania {
	font-family: var(--caa-body);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--caa-muted);
	padding-bottom: 5px;
	border-bottom: 1px solid transparent;
}

.caa-pestania.is-activa {
	color: var(--caa-navy);
	border-bottom-color: var(--caa-gold-field);
}

/* Sub-navegación: las pruebas de ese año. */
.caa-pruebas {
	background: var(--caa-bg);
	padding: 0 var(--caa-md) 0 var(--caa-mi);
}

.caa-pruebas__fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 2vw, 26px);
	padding: clamp(12px, 1.5vw, 16px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

.caa-prueba {
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--caa-muted);
	padding-bottom: 5px;
	border-bottom: 1px solid transparent;
}

.caa-prueba.is-activa {
	color: var(--caa-navy);
	border-bottom-color: var(--caa-gold-field);
}


/* =============================================================================
   4 · EL CONTENIDO HEREDADO

   Veinte años de tablas escritas a mano en el editor clásico. No se
   normalizan: se las viste.

   Vienen con `width` y `height` en atributos HTML, sin `<th>` —los
   encabezados son `<td><strong>`— y con 19 formas de columna distintas en 28
   años. Cualquier intento de forzarlas a una grilla fija perdería datos, así
   que el CSS se adapta a lo que hay.
============================================================================= */

.caa-contenido {
	font-family: var(--caa-body);
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--caa-ink);
}

.caa-contenido p {
	margin: 0 0 1.1em;
}

.caa-contenido h2,
.caa-contenido h3 {
	font-family: var(--caa-display);
	font-weight: 400;
	color: var(--caa-navy);
	margin: clamp(28px, 3.4vw, 44px) 0 clamp(12px, 1.6vw, 18px);
	line-height: 1.15;
}

.caa-contenido h2 { font-size: clamp(22px, 2.4vw, 32px); }
.caa-contenido h3 { font-size: clamp(19px, 2vw, 26px); }

.caa-contenido a {
	border-bottom: 1px solid var(--caa-gold);
}

.caa-contenido img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

/* --- Tablas ---------------------------------------------------------------- */

/*
 * El contenedor con scroll propio es obligatorio: hay tablas de 12 columnas
 * que en un teléfono no entran de ninguna manera. Antes que romper el ancho
 * de la página, la tabla se desplaza sola.
 */
.caa-contenido table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	margin: 0 0 clamp(24px, 3vw, 40px);
	border-collapse: collapse;
	border: 0;
	font-size: 14.5px;
}

.caa-contenido table tbody {
	display: table;
	width: 100%;
}

.caa-contenido td,
.caa-contenido th {
	width: auto !important;
	height: auto !important;
	padding: clamp(9px, 1.1vw, 13px) clamp(8px, 1.1vw, 16px) clamp(9px, 1.1vw, 13px) 0;
	border: 0;
	border-bottom: 1px solid var(--caa-l12);
	text-align: left;
	vertical-align: baseline;
	background: none;
	color: var(--caa-ink);
	white-space: nowrap;
}

/*
 * La fila de encabezado llega como <th scope="col">: la promueve
 * `caamdp_tablas_accesibles()` desde los <td><strong> del editor. Se
 * contempla también el caso sin promover, por si algún día ese filtro no
 * corre.
 */
.caa-contenido th,
.caa-contenido tr:has(> td > strong:only-child) > td {
	font-family: var(--caa-body);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	border-bottom: 1px solid var(--caa-l22);
	white-space: normal;
}

.caa-contenido th strong,
.caa-contenido tr:has(> td > strong:only-child) > td strong {
	font-weight: 400;
}

/* Filas vacías: el editor dejó muchas como separador. Se las achica. */
.caa-contenido tr:not(:has(td:not(:empty))) > td {
	padding: 0;
	border: 0;
	height: 10px;
}

/* La primera columna suele ser el número o el puesto. */
.caa-contenido tbody tr > td:first-child {
	font-family: var(--caa-display);
	font-size: 17px;
	color: var(--caa-gold-text);
	font-variant-numeric: tabular-nums;
}

.caa-contenido th:first-child,
.caa-contenido tr:has(> td > strong:only-child) > td:first-child {
	font-family: var(--caa-body);
	font-size: 10px;
	color: var(--caa-gold-text);
}

/* Las celdas que abarcan toda la tabla son títulos de prueba, no datos. */
.caa-contenido td[colspan] {
	font-family: var(--caa-display);
	font-size: clamp(17px, 1.9vw, 22px);
	color: var(--caa-navy);
	letter-spacing: 0;
	text-transform: none;
	padding-top: clamp(20px, 2.4vw, 30px);
	border-bottom: 1px solid var(--caa-l22);
	white-space: normal;
}

.caa-contenido td[colspan] strong {
	font-weight: 400;
}

/* Fila oculta por el buscador. */
.caa-contenido tr[hidden] {
	display: none;
}

/* --- Galería del archivo ---------------------------------------------------
   La renderiza `inc/galeria.php`, no el shortcode de WordPress: sirve el
   tamaño `medium` con su proporción real, en vez de una miniatura cuadrada de
   150 px ampliada a más de 200.                                            */

.caa-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.caa-foto {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--caa-bg-warm);
}

/*
 * Absoluta y no `height: 100%`: con el alto de la caja dado por
 * `aspect-ratio`, el porcentaje no se resolvía y la foto quedaba con su alto
 * natural —apaisadas con una banda vacía abajo, verticales desbordando sobre
 * la fila siguiente—.
 *
 * Con `.caa-foto` delante: `.caa-contenido img { height: auto }` pesa una
 * etiqueta más que una clase sola, y dentro de una nota le ganaba.
 */
.caa-foto .caa-foto__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .3s ease;
}

.caa-foto:hover .caa-foto__img,
.caa-foto:focus-visible .caa-foto__img {
	opacity: .82;
}

/* --- Paginación de la galería ---------------------------------------------- */

.caa-galeria-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: clamp(14px, 2vw, 26px);
	margin-top: clamp(22px, 2.6vw, 32px);
	padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid var(--caa-l14);
}

.caa-galeria-nav__cuenta {
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--caa-muted);
}

.caa-galeria-nav__paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(8px, 1.2vw, 16px);
	font-family: var(--caa-body);
	font-size: 12px;
	letter-spacing: .16em;
}

.caa-galeria-nav__n {
	font-family: var(--caa-display);
	font-size: 17px;
	letter-spacing: 0;
	color: var(--caa-muted);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	font-variant-numeric: tabular-nums;
}

.caa-galeria-nav__n.is-activa {
	color: var(--caa-navy);
	border-bottom-color: var(--caa-gold-field);
}

.caa-galeria-nav__flecha {
	text-transform: uppercase;
	color: var(--caa-gold-text);
	white-space: nowrap;
}

/* --- El visor --------------------------------------------------------------
   Reemplaza al comportamiento de antes, que era dejar al visitante en el JPEG
   crudo. Arranca con `hidden`; sin JavaScript nunca aparece y el enlace de
   cada foto sigue llevando al original.                                    */

.caa-visor {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 28px);
	padding: clamp(14px, 3vw, 40px);
	background: rgba(31, 37, 49, .94);
}

.caa-visor[hidden] {
	display: none;
}

.caa-visor__caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 1.6vw, 18px);
	max-width: min(1200px, 100%);
	max-height: 100%;
	margin: 0;
}

.caa-visor__img {
	max-width: 100%;
	max-height: 76vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.caa-visor__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: clamp(12px, 2vw, 26px);
	font-family: var(--caa-body);
	font-size: 13px;
	line-height: 1.6;
	color: #D6D2C8;
	text-align: center;
}

.caa-visor__cuenta {
	font-variant-numeric: tabular-nums;
	letter-spacing: .14em;
	font-size: 11px;
	color: var(--caa-gold-field);
}

body.caa-maqueta .caa-visor__original {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--caa-gold-field);
	border-bottom: 1px solid rgba(199, 175, 127, .5);
}

body.caa-maqueta .caa-visor__original:hover,
body.caa-maqueta .caa-visor__original:focus-visible {
	color: #F2F1ED;
}

.caa-visor__cerrar,
.caa-visor__flecha {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--caa-body);
	font-size: 22px;
	line-height: 1;
	color: #EDEAE2;
	background: rgba(242, 241, 237, .08);
	border: 1px solid rgba(237, 234, 226, .22);
	transition: background .25s ease;
}

.caa-visor__cerrar:hover,
.caa-visor__flecha:hover {
	background: rgba(242, 241, 237, .2);
}

.caa-visor__cerrar {
	position: absolute;
	top: clamp(14px, 3vw, 32px);
	right: clamp(14px, 3vw, 32px);
	z-index: 2;
}

/* Con el visor abierto el fondo no debe correr. */
body.caa-visor-abierto {
	overflow: hidden;
}


/* =============================================================================
   5 · EL CLUB
============================================================================= */

.caa-club__cabecera {
	position: relative;
	background: var(--caa-bg);
	padding: clamp(46px, 6vw, 88px) var(--caa-md) clamp(24px, 3vw, 38px) var(--caa-mi);
}

.caa-club__cabecera .caa-numeral {
	top: clamp(46px, 6vw, 88px);
}

/*
 * `.caa-club__marca` se retiró junto con el lockup `asset-3.png`. La regla
 * era: width clamp(220px, 25vw, 330px).
 */

.caa-club__historia {
	padding-top: clamp(40px, 5vw, 76px);
	padding-bottom: clamp(40px, 5vw, 72px);
}

.caa-club__historia .caa-antetitulo {
	display: block;
	margin-bottom: 18px;
}

.caa-club__bajada {
	font-family: var(--caa-display);
	font-size: clamp(22px, 2.6vw, 38px);
	line-height: 1.24;
	color: var(--caa-navy);
	max-width: 26ch;
	margin-bottom: clamp(30px, 3.6vw, 48px);
}

/* --- Socios fundadores y pioneros: la placa de nombres ---------------------
   Banda cálida, el tercer fondo del sistema y el único que esta página no
   usaba. Va entre los antecedentes y los hitos, y su trabajo es que doce
   nombres propios no se lean como una lista suelta al pie de un texto.

   La jerarquía entre las dos nóminas es tipográfica y no de color: los
   fundadores en la display sobre filete dorado, los pioneros un punto más
   chicos sobre filete neutro. Numerarlos no corresponde —son personas, y el
   orden es alfabético—, así que el ritmo lo dan los filetes.               */

.caa-club__socios {
	padding-top: clamp(40px, 5vw, 76px);
	padding-bottom: clamp(40px, 5vw, 76px);
}

/*
 * Las dos nóminas van una al lado de la otra, como están publicadas hoy en la
 * portada vieja. La de fundadores crece un poco más que la de pioneros porque
 * tiene dos nombres más y los suyos son más largos; con `flex-grow` distinto
 * —y no con un ancho fijo— el reparto se acomoda solo a cada ventana.
 *
 * Las bases de 300 y 260 px hacen que se apilen sin ningún punto de quiebre
 * escrito: por debajo de unos 620 px de caja ya no entran las dos.
 */
/*
 * El tope es el mismo que el de `.caa-hitos`, 900 px, y no el ancho entero de
 * `.caa-ancho`: así el filete que cierra cada nómina termina justo donde
 * termina el de los hitos que vienen abajo. Con los 1.180 px de la caja, los
 * filetes de la placa sobresalían y las dos bandas no se alineaban con nada.
 */
.caa-club__socios-fila {
	max-width: 900px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: clamp(26px, 4vw, 72px);
	/*
	 * Apiladas, las dos nóminas necesitan más aire que el que alcanza entre
	 * columnas: el filete que cierra a los fundadores queda justo encima del
	 * rótulo de los pioneros, y con 26 px se leían como una sola lista partida.
	 */
	row-gap: clamp(36px, 4vw, 72px);
}

.caa-club__socios-grupo {
	flex: 1.2 1 300px;
	min-width: 0;
}

.caa-club__socios-grupo--pioneros {
	flex: 1 1 260px;
}

/*
 * El filete corto encima del rótulo es el mismo gesto que el de la misión y la
 * visión, y por la misma razón: le da cabeza a cada nómina sin necesidad de un
 * antetítulo de sección que dijera «Socios» tres renglones más arriba.
 */
.caa-club__socios-rotulo {
	display: block;
	font-family: var(--caa-body);
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	margin-bottom: clamp(16px, 2vw, 22px);
}

.caa-club__socios-rotulo::before {
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	background: var(--caa-gold);
	margin-bottom: 14px;
}

.caa-nombres {
	border-top: 1px solid var(--caa-gold-rule);
}

.caa-nombre {
	padding: clamp(11px, 1.4vw, 16px) 0;
	border-bottom: 1px solid var(--caa-gold-rule);
	font-family: var(--caa-display);
	font-size: clamp(19px, 2vw, 26px);
	line-height: 1.22;
	color: var(--caa-navy);
	/* Nombres propios: si una ventana angosta obliga a partir, que parta entero. */
	text-wrap: balance;
}

.caa-nombres--tenue {
	border-top-color: var(--caa-l18);
}

.caa-nombres--tenue .caa-nombre {
	border-bottom-color: var(--caa-l14);
	font-size: clamp(17px, 1.6vw, 21px);
	color: var(--caa-ink);
}

/* --- Hitos ----------------------------------------------------------------- */

/*
 * El padding de arriba era 0 mientras esta caja venía pegada a los
 * antecedentes, que son la misma banda clara y ya traían su propio aire abajo.
 * Con la placa de socios en el medio, el borde de la banda cálida le queda
 * justo encima y los hitos necesitan su propio respiro.
 */
.caa-club__hitos-caja {
	background: var(--caa-bg);
	padding: clamp(40px, 5vw, 72px) var(--caa-md) clamp(40px, 5vw, 72px) var(--caa-mi);
}

.caa-club__hitos-caja .caa-antetitulo {
	display: block;
	margin-bottom: clamp(20px, 2.4vw, 30px);
}

.caa-hitos {
	border-top: 1px solid var(--caa-l18);
	max-width: 900px;
}

.caa-hito {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(14px, 2.4vw, 34px);
	padding: clamp(13px, 1.7vw, 20px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

.caa-hito__anio {
	flex: 0 0 auto;
	font-family: var(--caa-display);
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1;
	color: var(--caa-gold-text);
	min-width: 78px;
	font-variant-numeric: tabular-nums;
}

.caa-hito__texto {
	flex: 1 1 300px;
	min-width: 0;
	font-family: var(--caa-body);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--caa-ink);
}

/* --- Misión y visión: panel navy con la medalla ----------------------------
   El único tramo oscuro de la página. En el brochure el navy es el 17,4 % de
   la pieza y va SIEMPRE a sangre completa, nunca como tarjeta con borde: por
   eso esta sección no usa `.caa-seccion`, que trae el fondo claro, sino el
   mismo patrón de padding que el panel del programa en la portada.         */

.caa-club__proposito {
	position: relative;
	background: var(--caa-navy);
	color: #EDEAE2;
	padding: clamp(52px, 6.4vw, 96px) var(--caa-md) clamp(52px, 6.4vw, 96px) var(--caa-mi);
	/*
	 * Red de seguridad: nada de acá adentro tiene que asomar. La medalla sube
	 * exactamente lo que mide el padding de arriba, así que apoya en el borde
	 * y no lo cruza; si alguien toca uno de los dos números, esto evita que el
	 * descuadre se convierta en una cinta flotando sobre los hitos.
	 */
	overflow: clip;
}

.caa-club__proposito-fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(30px, 4.6vw, 76px);
}

/*
 * LAS DOS DECLARACIONES VAN UNA AL LADO DE LA OTRA.
 *
 * Apiladas, el panel medía 958 px y la medalla —que arranca arriba— dejaba
 * 540 px de navy vacío debajo. Con las dos en rejilla el tramo baja a unos
 * 580 px y la medalla lo llena casi entero: el hueco pasa a ser el padding.
 *
 * `auto-fit` con un mínimo de 280 px se encarga del resto: donde no entran
 * dos columnas vuelven a apilarse solas, sin otro punto de quiebre.
 */
.caa-club__proposito-texto {
	flex: 1 1 340px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(26px, 3.4vw, 54px);
	align-items: start;
}

/*
 * El filete dorado corto encima del rótulo es el mismo gesto que la numeración
 * de sección del brochure, y es lo que le da cabeza a cada declaración. Con él
 * no hace falta el separador de ancho completo que había entre las dos.
 */
.caa-declaracion__rotulo {
	font-family: var(--caa-body);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--caa-gold-field);
	margin-bottom: 16px;
}

.caa-declaracion__rotulo::before {
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	background: var(--caa-gold-field);
	margin-bottom: 14px;
}

/*
 * La misión y la visión son declaraciones, no texto corrido: van en la display
 * y grandes. Lo que había antes era el mismo párrafo de 16 px de la nota, a
 * todo el ancho de la caja.
 *
 * El tope de 34ch sólo actúa si queda una sola declaración y la rejilla le da
 * una columna entera; con dos, la columna ya es más angosta que el tope.
 */
.caa-declaracion__texto {
	font-family: var(--caa-display);
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.42;
	color: #F4F2ED;
	max-width: 34ch;
}

.caa-declaracion__texto + .caa-declaracion__texto {
	margin-top: .55em;
}

/*
 * LA MEDALLA CUELGA DEL BORDE DE ARRIBA.
 *
 * Sube exactamente el padding superior de la banda —el mismo `clamp`, con el
 * signo cambiado—, así la cinta queda cortada al ras del borde y la medalla se
 * lee colgando del filo del panel. Es el gesto del masthead y el de la portada
 * del brochure, y es lo que cose esta banda con el tramo claro de arriba en
 * vez de dejarla apilada.
 *
 * Los dos valores tienen que seguir siendo iguales. Si se cambia uno, se
 * cambia el otro.
 *
 * Que el margen sea negativo es además lo que impide que la medalla se salga
 * por abajo: sigue siendo un ítem del flex, así que si es más alta que el
 * texto estira la banda en vez de desbordarla.
 */
.caa-club__proposito-medalla {
	flex: 0 1 340px;
	min-width: 0;
	display: flex;
	justify-content: center;
	margin-top: calc(-1 * clamp(52px, 6.4vw, 96px));
}

.caa-club__proposito-medalla .caa-img {
	width: 100%;
	max-width: 340px;
	height: auto;
}

/*
 * Por debajo de 960 px la fila se parte en dos, y ahí la medalla tiene que
 * pasar ARRIBA: con el margen negativo, puesta debajo del texto se le montaba
 * encima.
 *
 * El corte no es el de 700 px del resto de la hoja porque la fila se quiebra
 * mucho antes: 340 + 340 de bases más el hueco necesitan 756 px, y entre los
 * dos márgenes de sección eso se acaba alrededor de los 915 px. A 960 todavía
 * sobran 36, que es el margen con el que se eligió el número.
 */
@media (max-width: 959px) {

	.caa-club__proposito-medalla {
		order: -1;
		flex: 1 1 100%;
		margin-bottom: clamp(24px, 4vw, 38px);
	}

	.caa-club__proposito-medalla .caa-img {
		max-width: 208px;
	}
}

/* --- Valores: la tira de filetes dorados -----------------------------------
   «Numeración con filete dorado encima» y «listas sin viñetas» son dos de los
   recursos propios de la campaña. Acá van juntos: cada valor es una columna
   con su filete y su cifra, y el conjunto se lee como una tira, no como una
   enumeración.                                                              */

.caa-club__valores {
	padding-top: clamp(46px, 5.6vw, 84px);
	padding-bottom: clamp(28px, 3.2vw, 44px);
}

.caa-club__valores .caa-antetitulo,
.caa-club__objetivos .caa-antetitulo {
	display: block;
	/* Son <h2>, y el h2 de Flatsome viene en negrita: el antetítulo no lo es. */
	font-weight: 400;
	margin-bottom: clamp(20px, 2.4vw, 30px);
}

.caa-tira {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	column-gap: clamp(18px, 2.6vw, 46px);
	row-gap: clamp(22px, 2.6vw, 34px);
}

.caa-tira__item {
	border-top: 1px solid var(--caa-gold-rule);
	padding-top: 14px;
}

.caa-tira__num {
	display: block;
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .24em;
	color: var(--caa-gold-text);
	margin-bottom: 11px;
}

.caa-tira__texto {
	display: block;
	font-family: var(--caa-display);
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1.22;
	color: var(--caa-navy);
}

/* --- Objetivos: lista con filete, en dos columnas --------------------------
   Frases más largas que los valores, así que acá manda la lectura: `columns`
   y no `grid`, porque la multicolumna llena la primera columna antes de pasar
   a la segunda y la lista se lee hacia abajo, como una lista.               */

.caa-club__objetivos {
	padding-top: clamp(28px, 3.2vw, 44px);
	padding-bottom: clamp(46px, 5.6vw, 84px);
}

.caa-filas {
	max-width: 940px;
	columns: 2 290px;
	column-gap: clamp(30px, 4.4vw, 72px);
}

.caa-fila {
	display: flex;
	align-items: baseline;
	gap: 15px;
	padding: clamp(12px, 1.5vw, 17px) 0;
	border-top: 1px solid var(--caa-l18);
	/* Sin esto una fila se parte entre el pie de una columna y la cabeza de la otra. */
	break-inside: avoid;
}

.caa-fila__num {
	flex: 0 0 auto;
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .22em;
	color: var(--caa-gold-text);
}

.caa-fila__texto {
	min-width: 0;
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--caa-ink);
}

/* --- Respaldo: el contenido propio sin interpretar -------------------------
   Sólo se ve si el formato del editor cambia tanto que el partidor no
   reconoce ningún bloque. Ver el comentario al pie de `club/el-club.php`.  */

.caa-club__propio {
	padding-top: clamp(30px, 3.6vw, 50px);
	padding-bottom: clamp(40px, 5vw, 72px);
}

.caa-club__propio .caa-antetitulo {
	display: block;
	margin-bottom: 18px;
}

/* --- Pertenencia ----------------------------------------------------------- */

.caa-club__pertenencia {
	background: var(--caa-greige);
	padding: clamp(44px, 5.4vw, 80px) var(--caa-md) clamp(44px, 5.4vw, 80px) var(--caa-mi);
}

.caa-club__pertenencia-fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(26px, 4vw, 60px);
}

.caa-club__pertenencia-texto {
	flex: 1 1 320px;
	min-width: 0;
}

.caa-antetitulo--greige {
	/* Ver el token: sobre greige, --caa-gold-dark se queda en 4.19:1. */
	color: var(--caa-gold-greige);
}

.caa-club__pertenencia-texto .caa-antetitulo {
	display: block;
	margin-bottom: 14px;
}

.caa-club__pertenencia-frase {
	font-family: var(--caa-display);
	font-size: clamp(19px, 2.1vw, 28px);
	line-height: 1.3;
	color: var(--caa-navy);
	max-width: 30ch;
}

/*
 * La banda «Pertenencia» va sobre greige, y es el lugar donde el PNG compuesto
 * anterior dejaba un rectángulo claro: su fondo era #F2F1ED, el de la portada,
 * no el de esta banda. Con los tres sellos transparentes el problema no puede
 * volver a aparecer, vaya sobre el fondo que vaya.
 *
 * Acá se muestran un poco más grandes que en la portada porque la banda tiene
 * más aire y sólo lleva una frase al lado.
 */
.caa-club__sellos {
	--caa-sello-escala: 1.16;
	flex: 0 0 auto;
}

@media (max-width: 1060px) {
	.caa-club__sellos {
		--caa-sello-escala: .96;
	}
}

/* Por debajo de 600 px manda el escalón de `base.css`, que lleva prefijo. */

/* --- Hacerse socio --------------------------------------------------------- */

.caa-club__socio {
	padding-top: clamp(50px, 6vw, 92px);
	padding-bottom: clamp(56px, 7vw, 100px);
}

.caa-club__socio-fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(26px, 4vw, 64px);
}

.caa-club__socio-texto {
	flex: 1.2 1 340px;
	min-width: 0;
}

.caa-club__socio-texto .caa-antetitulo {
	display: block;
	margin-bottom: 16px;
}

.caa-club__socio-h2 {
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1.05;
	color: var(--caa-navy);
	margin-bottom: 18px;
}

.caa-club__socio-p {
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.72;
	color: var(--caa-ink);
	max-width: 50ch;
}

.caa-club__socio .caa-botones {
	margin-top: clamp(24px, 3vw, 34px);
}

.caa-club__socio-nota {
	display: block;
	margin-top: 18px;
}

.caa-club__socio-foto {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.caa-club__socio-foto .caa-img {
	width: 100%;
	max-width: 400px;
}

/* --- Autoridades ----------------------------------------------------------- */

.caa-club__autoridades {
	padding-top: clamp(40px, 5vw, 76px);
	padding-bottom: clamp(56px, 7vw, 100px);
}

.caa-club__autoridades--banda {
	padding-top: clamp(48px, 5.6vw, 84px);
}

.caa-club__auto-cabeza {
	margin-bottom: clamp(28px, 3.4vw, 48px);
}

.caa-club__auto-cabeza .caa-antetitulo {
	display: block;
	margin-bottom: 14px;
}

/* Sobre greige el dorado de texto no llega al contraste: va su variante. */
.caa-club__autoridades--banda .caa-antetitulo {
	color: var(--caa-gold-greige);
}

.caa-club__auto-h2 {
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.03;
	color: var(--caa-navy);
}

.caa-club__auto-bajada {
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.72;
	color: var(--caa-ink);
	max-width: 54ch;
	margin-top: clamp(14px, 1.6vw, 20px);
}

/*
 * La mesa: cuatro columnas. La presidencia ocupa dos y va en navy; con siete
 * cargos, la Comisión Directiva entra entera en dos hileras. Lo que se lee
 * primero en cada placa es el apellido; el cargo es un antetítulo arriba.
 */
.caa-mesa {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}

.caa-mesa__cargo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(22px, 2.6vw, 40px);
	min-width: 0;
	min-height: clamp(150px, 13vw, 196px);
	margin: 0;
	padding: clamp(20px, 2vw, 30px);
	background: var(--caa-bg-warm);
	border-top: 2px solid var(--caa-gold);
}

.caa-mesa--cuatro .caa-mesa__cargo {
	background: var(--caa-bg);
}

.caa-mesa__puesto {
	font-family: var(--caa-body);
	font-size: 11.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
}

.caa-mesa__nombre {
	display: block;
	min-width: 0;
}

.caa-mesa__pila {
	display: block;
	font-family: var(--caa-body);
	font-style: italic;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.3;
	color: var(--caa-ink);
	margin-bottom: 4px;
}

.caa-mesa__apellido {
	display: block;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(24px, 2.5vw, 36px);
	line-height: 1.05;
	color: var(--caa-navy);
	overflow-wrap: anywhere;
}

.caa-mesa__cargo--destacado {
	grid-column: span 2;
	grid-row: span 1;
	background: var(--caa-navy);
	border-top-color: var(--caa-gold-field);
}

.caa-mesa__cargo--destacado .caa-mesa__puesto {
	color: var(--caa-gold-field);
}

.caa-mesa__cargo--destacado .caa-mesa__pila {
	color: #EDEAE2;
	font-size: clamp(17px, 1.6vw, 22px);
}

.caa-mesa__cargo--destacado .caa-mesa__apellido {
	color: #F4F2ED;
	font-size: clamp(38px, 4.6vw, 66px);
	line-height: 1;
}

@media (max-width: 959px) {
	.caa-mesa {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.caa-mesa__cargo {
		min-height: 128px;
	}
}

@media (max-width: 420px) {
	.caa-mesa__cargo {
		padding: 16px 14px;
		gap: 18px;
	}

	.caa-mesa__puesto {
		font-size: 10.5px;
		letter-spacing: .2em;
	}

	.caa-mesa__apellido {
		font-size: 22px;
	}
}

/* --- Contacto -------------------------------------------------------------- */

.caa-club__contacto {
	padding-top: clamp(40px, 5vw, 76px);
	padding-bottom: clamp(50px, 6vw, 88px);
}

.caa-club__contacto-fila {
	max-width: var(--caa-max);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(30px, 5vw, 76px);
}

.caa-club__form {
	flex: 1.05 1 320px;
	min-width: 0;
}

.caa-club__form .caa-antetitulo {
	display: block;
	margin-bottom: 18px;
}

.caa-club__form-h2 {
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.03;
	color: var(--caa-navy);
	margin-bottom: clamp(24px, 3vw, 36px);
}

/*
 * El formulario sigue siendo el de Contact Form 7. Lo único que cambia es el
 * aspecto: campos con filete inferior y sin caja, como el resto del sistema.
 */
.caa-formulario {
	max-width: 520px;
}

/*
 * LOS RÓTULOS AHORA SON <label> DE VERDAD.
 *
 * La plantilla de Contact Form 7 escribía «Nombre y Apellido (requerido)<br />
 * [text* your-name]» dentro de un <p>: el rótulo era texto suelto, sin ningún
 * elemento propio, así que esta hoja no tenía de dónde agarrarlo y los cuatro
 * campos se leían como párrafos comunes en la serif del cuerpo.
 *
 * `inc/instalar-contacto.php` reescribió la plantilla para que cada campo sea
 * un <label> con su <span> de rótulo adentro. El «(requerido)» arrastrado se
 * fue: ahora se marca al revés, y sólo lo que de verdad se puede dejar vacío.
 */
.caa-campo {
	display: block;
	margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.caa-campo__rotulo {
	display: block;
	font-family: var(--caa-body);
	font-size: 10.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
}

/* El «(opcional)» pesa menos que el rótulo y no grita en versalitas. */
.caa-campo__rotulo i {
	font-style: normal;
	letter-spacing: .14em;
	color: var(--caa-muted);
}

/*
 * El respaldo, por si en algún entorno la plantilla vieja sigue puesta: sin
 * `.caa-campo`, el <p> de CF7 tiene que conservar su aire.
 */
.caa-formulario .wpcf7-form p {
	margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.caa-formulario .wpcf7-form p.caa-campo-envio {
	margin-bottom: 0;
}

.caa-formulario input[type="text"],
.caa-formulario input[type="email"],
.caa-formulario input[type="tel"],
.caa-formulario select,
.caa-formulario textarea {
	width: 100%;
	font-family: var(--caa-body);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--caa-navy);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--caa-l28);
	border-radius: 0;
	box-shadow: none;
	padding: 10px 2px;
	margin-top: 9px;
	outline: none;
	min-height: 0;
	transition: border-color .25s ease;
	/*
	 * El campo vive DENTRO del <label>, y el rótulo va en versalitas espaciadas:
	 * sin estos dos, lo que se escribe hereda el tracking y sale en mayúsculas.
	 */
	text-transform: none;
	letter-spacing: normal;
}

.caa-formulario textarea {
	resize: vertical;
	min-height: 8.5em;
}

.caa-formulario input:focus,
.caa-formulario select:focus,
.caa-formulario textarea:focus {
	border-bottom-color: var(--caa-gold-text);
	box-shadow: none;
}

/*
 * El <select> nativo trae el fondo, el borde redondeado y la flecha del
 * sistema, que al lado de tres campos que son una línea y nada más se veía
 * como un widget pegado de otra página. La flecha es un SVG en línea, del
 * mismo navy que el texto.
 */
.caa-formulario select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231F2531' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 3px center;
	cursor: pointer;
}

.caa-formulario input[type="submit"],
.caa-formulario button[type="submit"] {
	width: auto;
	font-family: var(--caa-body);
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #F2F1ED;
	background: var(--caa-navy);
	border: 0;
	border-radius: 0;
	padding: 18px 34px;
	margin-top: clamp(8px, 1.4vw, 16px);
	transition: background .3s ease, color .3s ease;
	box-shadow: none;
}

.caa-formulario input[type="submit"]:hover,
.caa-formulario button[type="submit"]:hover,
.caa-formulario input[type="submit"]:focus-visible,
.caa-formulario button[type="submit"]:focus-visible {
	background: var(--caa-gold);
	color: var(--caa-navy);
}

/*
 * CF7 mete un <span> alrededor de cada campo y, mientras envía, le cuelga un
 * anillo giratorio con `display:inline-block` que empuja el botón media línea.
 */
.caa-formulario .wpcf7-form-control-wrap {
	display: block;
}

.caa-formulario .wpcf7-not-valid-tip {
	font-family: var(--caa-body);
	font-size: 13px;
	color: #8a1c1c;
	text-transform: none;
	letter-spacing: normal;
	margin-top: 6px;
}

.caa-formulario .wpcf7-response-output {
	font-family: var(--caa-body);
	font-size: 14.5px;
	line-height: 1.6;
	border: 0 !important;
	border-left: 2px solid var(--caa-gold) !important;
	padding: 10px 0 10px 14px !important;
	margin: clamp(16px, 2vw, 24px) 0 0 !important;
	color: var(--caa-ink);
	text-transform: none;
	letter-spacing: normal;
}

.caa-club__datos {
	flex: 1 1 280px;
	min-width: 0;
}

/* --- El membrete ------------------------------------------------------------
   El logotipo horizontal `asset-3`, el mismo que ya lleva la barra compacta.
   El porqué de usarlo acá está en `club/contacto.php`, donde se imprime.

   OJO SI SE MUEVE: su tinta es navy #1F2531 y dorado #A89060, los dos pensados
   para fondo claro. Sobre el panel navy desaparecería todo menos el «ESTB
   1981», así que ahí haría falta generar antes una versión clara.          */

.caa-club__membrete {
	display: block;
	width: 100%;
	max-width: 248px;
	height: auto;
	margin-bottom: clamp(26px, 3vw, 38px);
}

.caa-datos {
	border-top: 1px solid var(--caa-l18);
}

.caa-dato {
	padding: clamp(18px, 2.2vw, 26px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

.caa-dato .caa-etiqueta {
	display: block;
	margin-bottom: 11px;
}

.caa-dato__titulo {
	font-family: var(--caa-display);
	font-size: clamp(19px, 2vw, 26px);
	line-height: 1.2;
	color: var(--caa-navy);
}

.caa-dato__texto {
	font-family: var(--caa-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--caa-ink);
	margin-top: 8px;
}

.caa-dato__telefonos {
	line-height: 1.95;
}

.caa-dato__correo {
	font-family: var(--caa-display);
	font-size: clamp(17px, 1.8vw, 23px);
	line-height: 1.2;
	color: var(--caa-navy);
	border-bottom: 1px solid var(--caa-gold);
}


/* --- La banda del mapa ------------------------------------------------------
   Remata /contacto/, que antes terminaba de golpe en el último campo. El mapa
   estaba dentro de la columna del formulario, a 400 px de alto y con un <hr />
   debajo: empujaba el formulario hacia abajo y partía la lectura en dos.    */

.caa-club__mapa {
	background: var(--caa-bg);
	padding: clamp(20px, 2.4vw, 34px) var(--caa-md) clamp(56px, 7vw, 100px) var(--caa-mi);
}

.caa-club__mapa .caa-antetitulo {
	display: block;
	/* Es un <h2>, y el h2 de Flatsome viene en negrita: el antetítulo no lo es. */
	font-weight: 400;
	margin-bottom: clamp(18px, 2.2vw, 26px);
}

/*
 * `aspect-ratio` da la proporción y `min-height` la rescata en el teléfono,
 * donde 21:9 sobre 350 px de ancho deja una franja de 150 px en la que no se
 * lee ninguna calle. El alto real es el mayor de los dos.
 */
.caa-mapa {
	position: relative;
	aspect-ratio: 21 / 9;
	min-height: 280px;
	border-top: 1px solid var(--caa-l18);
	/*
	 * El embed de Google pinta blanco puro. Sobre el fondo de la maqueta el
	 * corte se nota, así que el filete de arriba lo apoya en la página en vez
	 * de dejarlo flotando.
	 */
	background: var(--caa-bg-warm);
}

.caa-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =============================================================================
   6 · PUNTO DE QUIEBRE
============================================================================= */

@media (max-width: 700px) {

	/* Los programas viejos son tablas de tres columnas —hora, «hs.», texto—
	   con el texto en una sola línea de 600 px: en un teléfono se cortaba y
	   no se notaba que la tabla se desplazaba. Con el texto partiéndose, la
	   tabla entra en el ancho; las de muchas columnas siguen desplazándose. */
	.caa-contenido td,
	.caa-contenido th {
		white-space: normal;
		min-width: 3.5em;
	}


	/* La barra de pestañas fija se come media pantalla en un teléfono. */
	.caa-pestanias {
		position: static;
	}

	.caa-ficha__titulo-fila {
		flex-direction: column;
		align-items: flex-start;
	}

	.caa-buscador input {
		min-width: 0;
		width: 100%;
	}

	.caa-hito__anio {
		min-width: 62px;
	}

	.caa-vecinos__fila {
		font-size: 11px;
		gap: 12px;
	}

	.caa-galeria {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/* En un teléfono las flechas laterales se comen la foto. */
	.caa-visor__flecha {
		position: fixed;
		bottom: clamp(14px, 3vw, 24px);
		z-index: 2;
	}

	.caa-visor__flecha--izq { left: clamp(14px, 4vw, 28px); }
	.caa-visor__flecha--der { right: clamp(14px, 4vw, 28px); }

	.caa-visor__img { max-height: 64vh; }
}