/* =============================================================================
   CAAMDP · Bloque 3 — noticias, galería de fotos y videos, plantilla interior.

   Carga DESPUÉS de `base.css` y de `archivo.css`, y sólo en estas páginas.

   De `archivo.css` se heredan, sin reescribir una línea: la galería, el visor,
   el contenido editorial con sus tablas, el botón de volver y los numerales.
   Son los mismos componentes; lo que cambia es dónde se usan.

   Todo va acotado a `body.caa-maqueta`, así que no puede filtrarse al resto
   del sitio ni aunque alguien encole esta hoja por error en otro lado.

   Sin paso de compilación: CSS plano, editable por FTP.
============================================================================= */


/* =============================================================================
   1 · PIEZAS COMPARTIDAS POR LAS TRES PLANTILLAS
============================================================================= */

/* --- Encabezado de sección ------------------------------------------------ */

body.caa-maqueta .caa-b3-cabecera,
body.caa-maqueta .caa-noticias__cabecera {
	position: relative;
	background: var(--caa-bg);
	padding: clamp(46px, 6vw, 88px) var(--caa-md) clamp(26px, 3vw, 40px) var(--caa-mi);
}

body.caa-maqueta .caa-b3-cabecera .caa-numeral,
body.caa-maqueta .caa-noticias__cabecera .caa-numeral {
	top: clamp(46px, 6vw, 88px);
}

body.caa-maqueta .caa-b3-cabecera__cuerpo,
body.caa-maqueta .caa-noticias__cuerpo {
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-b3-cabecera__cuerpo .caa-antetitulo,
body.caa-maqueta .caa-noticias__cuerpo .caa-antetitulo {
	display: block;
	margin-bottom: 18px;
}

body.caa-maqueta .caa-b3-cabecera__h1,
body.caa-maqueta .caa-noticias__h1,
body.caa-maqueta .caa-interior__h1 {
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	font-size: clamp(36px, 4.8vw, 70px);
	line-height: 1.02;
	letter-spacing: -.015em;
}

body.caa-maqueta .caa-b3-cabecera__bajada,
body.caa-maqueta .caa-noticias__bajada {
	margin: 0;
	max-width: 58ch;
	text-wrap: pretty;
}


/* --- La barra de filtros ---------------------------------------------------
   Son enlaces a URLs reales, no botones de JavaScript. La activa lleva el
   filete dorado y `aria-current`, que es lo que leen los lectores de pantalla.

   Se pega arriba al scrollear, y por eso tiene fondo propio: sin él el texto
   de la grilla se leería por debajo.                                        */

body.caa-maqueta .caa-b3-filtro-caja {
	position: sticky;
	/* Debajo de la barra compacta, y siguiéndola cuando entra y cuando se va. */
	top: var(--caa-barra);
	transition: top .45s var(--caa-ease);
	z-index: 40;
	background: var(--caa-bg);
	padding: 0 var(--caa-md) 0 var(--caa-mi);
}

body.caa-maqueta .caa-b3-filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(14px, 2.4vw, 32px);
	max-width: var(--caa-max);
	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);
}

body.caa-maqueta .caa-b3-filtro__medio {
	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;
	white-space: nowrap;
}

body.caa-maqueta .caa-b3-filtro__opcion {
	font-family: var(--caa-body);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--caa-muted);
	padding-bottom: 5px;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-b3-filtro__medio.is-activa,
body.caa-maqueta .caa-b3-filtro__opcion.is-activa {
	color: var(--caa-navy);
	border-bottom-color: var(--caa-gold-field);
}

body.caa-maqueta .caa-b3-filtro__medio:hover,
body.caa-maqueta .caa-b3-filtro__opcion:hover,
body.caa-maqueta .caa-b3-filtro__medio:focus-visible,
body.caa-maqueta .caa-b3-filtro__opcion:focus-visible {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-b3-filtro__barra {
	width: 1px;
	height: 16px;
	background: var(--caa-l18);
	align-self: center;
}

body.caa-maqueta .caa-b3-filtro__cuenta {
	margin-left: auto;
	font-family: var(--caa-body);
	font-style: italic;
	font-size: 13.5px;
	color: var(--caa-muted);
	font-variant-numeric: tabular-nums;
}


/* --- Caja de grilla -------------------------------------------------------- */

body.caa-maqueta .caa-b3-grilla-caja {
	background: var(--caa-bg);
	padding: clamp(34px, 4.4vw, 64px) var(--caa-md) clamp(40px, 5vw, 72px) var(--caa-mi);
}

body.caa-maqueta .caa-b3-grilla-caja > * {
	max-width: var(--caa-max);
}


/* --- Paginación ------------------------------------------------------------
   Los objetivos táctiles miden 44 px, que es el mínimo que se respeta en todo
   el bloque: paginadores, flechas del visor, cierre del menú y del visor.   */

body.caa-maqueta .caa-b3-paginacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(8px, 1.4vw, 14px);
	max-width: var(--caa-max);
	margin-top: clamp(28px, 3.4vw, 44px);
}

body.caa-maqueta .caa-b3-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--caa-l18);
	font-family: var(--caa-body);
	font-size: 14px;
	color: var(--caa-ink);
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-b3-paginacion .page-numbers:hover,
body.caa-maqueta .caa-b3-paginacion .page-numbers:focus-visible {
	border-color: var(--caa-gold);
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-b3-paginacion .page-numbers.current {
	background: var(--caa-navy);
	border-color: var(--caa-navy);
	color: var(--caa-bg);
}

body.caa-maqueta .caa-b3-paginacion .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0 2px;
}


/* --- Cierre ---------------------------------------------------------------- */

body.caa-maqueta .caa-b3-cierre {
	padding: clamp(38px, 4.6vw, 68px) var(--caa-md) clamp(38px, 4.6vw, 68px) var(--caa-mi);
}

body.caa-maqueta .caa-b3-cierre__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(22px, 3.4vw, 52px);
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-b3-cierre__texto {
	flex: 1 1 320px;
	min-width: 0;
}

body.caa-maqueta .caa-b3-cierre__texto .caa-antetitulo {
	display: block;
	margin-bottom: 14px;
}

body.caa-maqueta .caa-b3-cierre__frase {
	margin: 0;
	font-family: var(--caa-display);
	font-size: clamp(20px, 2.3vw, 30px);
	line-height: 1.26;
	color: var(--caa-navy);
	max-width: 28ch;
}

body.caa-maqueta .caa-b3-cierre .caa-cta {
	flex: 0 0 auto;
}


/* =============================================================================
   2 · NOTICIAS · ÍNDICE
============================================================================= */

body.caa-maqueta .caa-noticias__lista-caja {
	background: var(--caa-bg);
	padding: clamp(34px, 4.4vw, 64px) var(--caa-md) clamp(40px, 5vw, 72px) var(--caa-mi);
}

body.caa-maqueta .caa-noticias__lista {
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-entrada {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 46px);
	padding: clamp(22px, 2.8vw, 36px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

body.caa-maqueta .caa-entrada__foto {
	flex: 0 0 auto;
	width: clamp(120px, 17vw, 232px);
	display: block;
	background: var(--caa-greige);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

body.caa-maqueta .caa-entrada__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .3s ease;
}

body.caa-maqueta .caa-entrada__foto:hover .caa-entrada__img {
	opacity: .84;
}

body.caa-maqueta .caa-entrada__texto {
	flex: 1 1 340px;
	min-width: 0;
}

body.caa-maqueta .caa-entrada__fecha {
	margin: 0 0 11px;
	font-family: var(--caa-body);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-entrada__titulo {
	margin: 0 0 12px;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(21px, 2.4vw, 32px);
	line-height: 1.16;
	color: var(--caa-navy);
	text-wrap: pretty;
}

body.caa-maqueta .caa-entrada__titulo a {
	color: inherit;
}

body.caa-maqueta .caa-entrada__titulo a:hover,
body.caa-maqueta .caa-entrada__titulo a:focus-visible {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-entrada__bajada {
	margin: 0 0 14px;
	font-family: var(--caa-body);
	font-size: 15.5px;
	line-height: 1.72;
	color: var(--caa-ink);
	max-width: 62ch;
}

body.caa-maqueta .caa-entrada__mas {
	display: inline-block;
	font-family: var(--caa-body);
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--caa-navy);
	border-bottom: 1px solid var(--caa-gold-field);
	padding-bottom: 3px;
}

body.caa-maqueta .caa-entrada__mas:hover,
body.caa-maqueta .caa-entrada__mas:focus-visible {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-noticias__vacio {
	font-family: var(--caa-body);
	font-style: italic;
	font-size: 16px;
	color: var(--caa-muted);
}


/* =============================================================================
   3 · NOTICIAS · LA NOTA
============================================================================= */

body.caa-maqueta .caa-nota__volver-caja {
	background: var(--caa-bg);
	padding: clamp(30px, 3.6vw, 50px) var(--caa-md) 0 var(--caa-mi);
}

body.caa-maqueta .caa-nota__volver-caja .caa-volver {
	margin-bottom: 0;
}

body.caa-maqueta .caa-nota__cabecera {
	background: var(--caa-bg);
	padding: clamp(26px, 3.2vw, 44px) var(--caa-md) clamp(30px, 3.6vw, 46px) var(--caa-mi);
}

body.caa-maqueta .caa-nota__cabecera-cuerpo {
	max-width: 820px;
}

body.caa-maqueta .caa-nota__fecha {
	display: block;
	margin: 0 0 18px;
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-nota__titulo {
	margin: 0 0 clamp(18px, 2.2vw, 28px);
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 58px);
	line-height: 1.04;
	letter-spacing: -.012em;
	color: var(--caa-navy);
	text-wrap: pretty;
}

body.caa-maqueta .caa-nota__sep {
	width: 96px;
}

body.caa-maqueta .caa-nota__cuerpo-caja {
	background: var(--caa-bg);
	padding: 0 var(--caa-md) clamp(36px, 4.4vw, 60px) var(--caa-mi);
}

body.caa-maqueta .caa-nota__columnas,
body.caa-maqueta .caa-interior__columnas {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(26px, 4vw, 64px);
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-nota__columna {
	flex: 1.6 1 360px;
	min-width: 0;
}

body.caa-maqueta .caa-nota__destacada {
	margin: 0 0 clamp(24px, 3vw, 36px);
	background: var(--caa-greige);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

body.caa-maqueta .caa-nota__destacada-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * La galería dentro de una nota va más chica que la del archivo: son crónicas
 * de una jornada, no el registro completo de una edición. La medida sale del
 * handoff del bloque 3.
 */
body.caa-maqueta .caa-nota-pagina .caa-galeria {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: clamp(8px, 1vw, 14px);
	margin-top: clamp(24px, 3vw, 36px);
}

body.caa-maqueta .caa-nota-pagina .caa-foto {
	aspect-ratio: 1 / 1;
}

body.caa-maqueta .caa-nota__aside {
	flex: 1 1 250px;
	min-width: 0;
}

body.caa-maqueta .caa-nota__aside-fijo {
	position: sticky;
	top: clamp(16px, 2vw, 28px);
	border-top: 1px solid var(--caa-l18);
}

body.caa-maqueta .caa-nota__vecina {
	padding: clamp(18px, 2.2vw, 24px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

body.caa-maqueta .caa-nota__vecina .caa-etiqueta {
	display: block;
	margin-bottom: 11px;
}

body.caa-maqueta .caa-nota__vecina > a {
	display: block;
	font-family: var(--caa-display);
	font-size: clamp(17px, 1.8vw, 22px);
	line-height: 1.22;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-nota__vecina > a:hover,
body.caa-maqueta .caa-nota__vecina > a:focus-visible {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-nota__vecina-fecha {
	display: block;
	margin-top: 7px;
	font-family: var(--caa-body);
	font-size: 13px;
	color: var(--caa-muted);
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-nota__vecina--enlaces .caa-enlace {
	display: block;
	font-size: 14.5px;
	line-height: 1.75;
	margin-top: 4px;
}


/* =============================================================================
   4 · GALERÍA · HUB DE ÁLBUMES
============================================================================= */

body.caa-maqueta .caa-b3-albumes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(14px, 2vw, 28px);
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-album {
	display: block;
	color: inherit;
}

body.caa-maqueta .caa-album__caja {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--caa-greige);
	overflow: hidden;
}

body.caa-maqueta .caa-album__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .3s ease;
}

body.caa-maqueta .caa-album:hover .caa-album__img,
body.caa-maqueta .caa-album:focus-visible .caa-album__img {
	opacity: .84;
}

body.caa-maqueta .caa-album__pie {
	display: block;
	padding: 13px 0 0;
}

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

body.caa-maqueta .caa-album__titulo {
	display: block;
	font-family: var(--caa-display);
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.18;
	color: var(--caa-navy);
	text-wrap: pretty;
}

body.caa-maqueta .caa-album:hover .caa-album__titulo {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-album__conteo {
	display: block;
	margin-top: 6px;
	font-family: var(--caa-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--caa-ink);
	font-variant-numeric: tabular-nums;
}

/* La edición en curso lleva el filete dorado: es la que se está cargando. */
body.caa-maqueta .caa-album--actual .caa-album__caja {
	outline: 1px solid var(--caa-gold-field);
	outline-offset: -1px;
}

body.caa-maqueta .caa-album--actual .caa-album__evento {
	color: var(--caa-navy);
}


/* --- Cabecera de la edición en curso --------------------------------------- */

body.caa-maqueta .caa-b3-album__cabecera {
	background: var(--caa-bg);
	padding: clamp(24px, 3vw, 40px) var(--caa-md) clamp(22px, 2.6vw, 34px) var(--caa-mi);
}

body.caa-maqueta .caa-b3-album__cabecera-cuerpo {
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-b3-album__cabecera-cuerpo .caa-antetitulo {
	display: block;
	margin-bottom: 16px;
}

body.caa-maqueta .caa-b3-album__titulo {
	margin: 0 0 14px;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 58px);
	line-height: 1.03;
	letter-spacing: -.012em;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-b3-album__detalle {
	margin: 0;
	font-family: var(--caa-body);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--caa-muted);
	font-variant-numeric: tabular-nums;
}


/* =============================================================================
   5 · GALERÍA · VIDEOS

   Cada tarjeta es un enlace de verdad a YouTube. El reproductor sólo aparece
   si alguien hace clic: nueve `<iframe>` cargados de entrada serían más de
   seis megabytes de JavaScript de terceros para ver una página.
============================================================================= */

body.caa-maqueta .caa-b3-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(16px, 2.2vw, 30px);
	max-width: var(--caa-max);
}

body.caa-maqueta .caa-video__enlace {
	display: block;
}

body.caa-maqueta .caa-video__caja {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--caa-greige);
	overflow: hidden;
}

body.caa-maqueta .caa-video__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .3s ease;
}

body.caa-maqueta .caa-video__enlace:hover .caa-video__img,
body.caa-maqueta .caa-video__enlace:focus-visible .caa-video__img {
	opacity: .78;
}

body.caa-maqueta .caa-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 37, 49, .82);
	color: var(--caa-bg);
	font-size: 16px;
	line-height: 1;
	padding-left: 3px;
}

body.caa-maqueta .caa-video__enlace:hover .caa-video__play {
	background: var(--caa-navy);
	color: var(--caa-gold-field);
}

/* --- Un video que ya no está -----------------------------------------------
   Tres de los nueve fueron borrados o puestos en privado por quien los subió,
   que no es el Club. La tarjeta se queda —el Club tiene que saber qué había—
   pero no se pide una miniatura que da 404 ni se enlaza a una página que no
   existe.                                                                  */

body.caa-maqueta .caa-video__caja--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--caa-bg-warm);
	outline: 1px solid var(--caa-l14);
	outline-offset: -1px;
}

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

body.caa-maqueta .caa-video--caido .caa-video__titulo {
	color: var(--caa-muted);
}

/* El reproductor, cuando el JavaScript reemplaza la miniatura. */
body.caa-maqueta .caa-video__caja iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

body.caa-maqueta .caa-video__pie {
	padding: 13px 0 0;
}

body.caa-maqueta .caa-video__anio {
	display: block;
	font-family: var(--caa-body);
	font-size: 10.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-video__titulo {
	margin: 0;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(18px, 1.9vw, 23px);
	line-height: 1.2;
	color: var(--caa-navy);
	text-wrap: pretty;
}

body.caa-maqueta .caa-video__origen {
	display: block;
	margin-top: 6px;
	font-family: var(--caa-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--caa-muted);
}


/* =============================================================================
   6 · PLANTILLA INTERIOR
============================================================================= */

body.caa-maqueta .caa-interior__cuerpo-caja {
	background: var(--caa-bg);
	padding: clamp(34px, 4.4vw, 64px) var(--caa-md) clamp(40px, 5vw, 72px) var(--caa-mi);
}

body.caa-maqueta .caa-interior__columnas {
	flex-wrap: wrap-reverse;
}

body.caa-maqueta .caa-interior__columna {
	flex: 1.7 1 380px;
	min-width: 0;
}

/*
 * El ancla tiene que quedar por debajo de la barra pegajosa, o el titular al
 * que se salta queda tapado. 90 px es el alto de la barra más aire.
 */
body.caa-maqueta .caa-interior__contenido h2,
body.caa-maqueta .caa-links__grupo,
body.caa-maqueta .caa-b3-descargas {
	scroll-margin-top: 90px;
}

body.caa-maqueta .caa-interior__indice {
	flex: 1 1 220px;
	min-width: 0;
}

body.caa-maqueta .caa-interior__indice-fijo {
	position: sticky;
	top: calc(var(--caa-barra) + 26px);
}

/*
 * Cuando la página lleva la fila de hermanas, esa fila también se pega y va en
 * z-index 40 contra el `auto` del índice: a 96 px el rótulo «En esta página»
 * quedaba tapado. 70 de barra compacta más 65 de fila más aire.
 */
body.caa-maqueta .caa-b3-filtro-caja ~ .caa-interior__cuerpo-caja .caa-interior__indice-fijo {
	top: calc(var(--caa-barra) + 82px);
}

body.caa-maqueta .caa-interior__indice-fijo .caa-etiqueta {
	display: block;
	margin-bottom: 14px;
}

body.caa-maqueta .caa-interior__indice-lista {
	border-top: 1px solid var(--caa-l18);
}

body.caa-maqueta .caa-interior__indice-lista a {
	display: block;
	padding: 11px 0;
	border-bottom: 1px solid var(--caa-l12);
	font-family: var(--caa-body);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--caa-ink);
}

body.caa-maqueta .caa-interior__indice-lista a:hover,
body.caa-maqueta .caa-interior__indice-lista a:focus-visible {
	color: var(--caa-gold-text);
}


/* --- Prosa larga de las páginas interiores ---------------------------------

   `/rally-reglamento/` son 1.600 palabras. Venía como un bloque corrido: los
   rótulos de sección estaban en <strong> y los de subsección en <u>, así que
   no había ni jerarquía ni índice, y sin índice al costado la columna se
   estiraba a los 1.180 px enteros y la línea llegaba a 175 caracteres. Se lee
   sin perder el renglón hasta unos 75; más del doble es una pared.

   El contenido pasó a h2 y h3 de verdad, con lo cual el índice lateral que la
   plantilla ya sabía armar aparece solo. Lo que sigue es el tratamiento
   tipográfico de esa prosa.                                                  */

/*
 * El tope de medida va en los elementos de texto y no en el contenedor: las
 * tablas del archivo y las imágenes tienen que poder usar todo el ancho.
 *
 * En `rem` y no en `ch`: `ch` se resuelve contra el cuerpo de cada elemento,
 * así que la entrada, que es un punto más grande, se pasaba 44 px del borde de
 * los demás párrafos y el canto izquierdo de la columna quedaba dentado.
 * 38 rem dan 78 caracteres con el cuerpo de 15,5 px.
 */
body.caa-maqueta .caa-interior__contenido > p,
body.caa-maqueta .caa-interior__contenido > ul,
body.caa-maqueta .caa-interior__contenido > ol,
body.caa-maqueta .caa-interior__contenido > h2,
body.caa-maqueta .caa-interior__contenido > h3,
body.caa-maqueta .caa-interior__contenido > blockquote {
	max-width: 38rem;
}

body.caa-maqueta .caa-interior__contenido > p {
	text-wrap: pretty;
}

/*
 * Cada sección arranca con filete al tope, como las secciones del sitio. Es lo
 * que convierte seis rótulos en seis bloques que se pueden saltear.
 */
body.caa-maqueta .caa-interior__contenido > h2 {
	margin-top: clamp(46px, 5.2vw, 78px);
	padding-top: clamp(18px, 2.2vw, 28px);
	border-top: 1px solid var(--caa-l14);
}

body.caa-maqueta .caa-interior__contenido > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* El antetítulo dorado de la sección, sin marcado extra en el contenido. */
body.caa-maqueta .caa-interior__contenido > h3 {
	margin-top: clamp(30px, 3.4vw, 44px);
	font-size: clamp(15px, 1.2vw, 17px);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-family: var(--caa-body);
	color: var(--caa-gold-text);
}

/*
 * La entrada del documento, un punto más grande. Es el único párrafo que se
 * lee entero antes de decidir si se sigue leyendo.
 */
body.caa-maqueta .caa-interior__contenido > h2:first-child + p {
	font-size: clamp(16.5px, 1.5vw, 18.5px);
	line-height: 1.66;
	color: var(--caa-navy);
}

/* --- Listas ----------------------------------------------------------------
   Venían con el disco y la sangría del navegador, que es lo único del sistema
   que no había pasado por diseño. El sistema no usa formas redondeadas en
   ninguna parte, así que la viñeta es un cuadrado dorado de 5 px.           */

body.caa-maqueta .caa-interior__contenido ul,
body.caa-maqueta .caa-interior__contenido ol {
	margin: 0 0 1.3em;
	padding: 0;
}

body.caa-maqueta .caa-interior__contenido li {
	margin-bottom: .6em;
}

body.caa-maqueta .caa-interior__contenido ul {
	list-style: none;
}

body.caa-maqueta .caa-interior__contenido ul > li {
	position: relative;
	padding-left: 30px;
}

body.caa-maqueta .caa-interior__contenido ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .66em;
	width: 5px;
	height: 5px;
	background: var(--caa-gold);
}

/*
 * Las numeradas van con `::marker` y no con un contador propio: los puntos 4 y
 * 5 de «Características» están en un `<ol start="4">`, porque entre medio hay
 * una lista de categorías y un párrafo, y un `counter-reset` ignora ese
 * atributo y los volvía a numerar desde 01.
 */
/* 26 + 4 = los mismos 30 px de sangría que la viñeta de las listas con punto:
   el canto izquierdo del texto tiene que ser uno solo. */
body.caa-maqueta .caa-interior__contenido ol {
	list-style: decimal-leading-zero;
	padding-left: 26px;
}

body.caa-maqueta .caa-interior__contenido ol > li {
	padding-left: 4px;
}

/* En versalitas doradas, como los antetítulos, y con cifras tabulares. */
body.caa-maqueta .caa-interior__contenido ol > li::marker {
	font-family: var(--caa-body);
	font-size: 11px;
	color: var(--caa-gold-text);
	font-variant-numeric: tabular-nums;
}


/* --- Descargas ------------------------------------------------------------- */

body.caa-maqueta .caa-b3-descargas {
	margin-top: clamp(34px, 4vw, 54px);
}

/*
 * En `/lista-de-inscriptos/` las descargas son lo único que trae la columna, y
 * ese margen quedaba separándolas de nada: 54 px de aire encima del único
 * título de la página. El `padding` de la sección ya da la distancia.
 */
body.caa-maqueta .caa-b3-descargas:first-child {
	margin-top: 0;
}

body.caa-maqueta .caa-b3-descargas__h2 {
	margin: 0 0 16px;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(24px, 2.8vw, 38px);
	line-height: 1.1;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-b3-descargas .caa-sep {
	margin-bottom: 20px;
	width: 72px;
}

body.caa-maqueta .caa-b3-descargas__lista {
	border-top: 1px solid var(--caa-l18);
}

body.caa-maqueta .caa-descarga {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	padding: clamp(14px, 1.8vw, 20px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

body.caa-maqueta .caa-descarga__tipo {
	flex: 0 0 auto;
	font-family: var(--caa-body);
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-descarga__titulo {
	flex: 1 1 220px;
	min-width: 0;
	font-family: var(--caa-display);
	font-size: clamp(17px, 1.8vw, 22px);
	line-height: 1.25;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-descarga:hover .caa-descarga__titulo {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-descarga__peso {
	flex: 0 0 auto;
	font-family: var(--caa-body);
	font-size: 13.5px;
	color: var(--caa-muted);
	font-variant-numeric: tabular-nums;
}


/* --- Los sponsors de la edición en curso ------------------------------------
   `/rally-sponsors/` no tiene texto: lo que se ve son los logotipos de las
   marcas confirmadas. Van en tarjetas navy y no sobre el fondo cálido porque
   los cinco PNG están dibujados en claro, para la franja del pie: sobre el
   fondo de la página interior no se verían.                              */

body.caa-maqueta .caa-sponsors {
	margin-top: clamp(10px, 1.4vw, 18px);
}

body.caa-maqueta .caa-sponsors .caa-etiqueta {
	display: block;
	margin-bottom: clamp(14px, 1.8vw, 22px);
}

/*
 * A 170 px de mínimo los cinco entran en una sola fila en escritorio, como en
 * la franja del pie; más abajo la grilla los reparte en dos renglones sola.
 */
body.caa-maqueta .caa-sponsors__grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--caa-l18);
	padding-top: clamp(18px, 2.2vw, 28px);
}

body.caa-maqueta .caa-sponsors__item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 1;
	margin: 0;
	padding: clamp(14px, 1.8vw, 22px);
	background: var(--caa-navy);
}

/*
 * Cada logotipo se dibuja a su tamaño natural, acotado por las dos medidas de
 * la tarjeta: el ancho, y un alto que es su proporción dentro de la fila —la
 * misma calibración que usa la franja del pie, servida como porcentaje desde
 * el parcial—. Así ninguno se sirve por encima de su resolución nativa y la
 * relación entre marcas no cambia cuando la grilla se angosta.
 */
body.caa-maqueta .caa-sponsors__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--caa-prop, 100%);
}


/* --- Logotipos de una página sin texto -------------------------------------
   `/rally-sponsors/` tenía el contenido vacío y treinta y un logotipos
   adjuntos que nadie veía. Van sobre fondo claro y con aire: son marcas
   ajenas, y apretarlas contra el borde las deforma.                       */

body.caa-maqueta .caa-b3-logos {
	margin-top: clamp(10px, 1.4vw, 18px);
}

body.caa-maqueta .caa-b3-logos__grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	border-top: 1px solid var(--caa-l18);
	padding-top: clamp(18px, 2.2vw, 28px);
}

body.caa-maqueta .caa-b3-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: clamp(10px, 1.4vw, 18px);
	background: var(--caa-bg-warm);
}

body.caa-maqueta .caa-b3-logo__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
}

body.caa-maqueta .caa-b3-logos .caa-nota {
	display: block;
	margin-top: clamp(14px, 1.8vw, 20px);
}


/* --- La edición en curso, antes de que haya material -----------------------
   `/clasificacion/` vacía. Va sobre la base cálida y con el filete de oro a
   la izquierda: es un aviso, no un contenido, y tiene que leerse como tal
   sin gritar. El enlace a la edición archivada es lo único accionable, así
   que es lo único que lleva color de enlace.                              */

body.caa-maqueta .caa-b3-espera {
	border-left: 2px solid var(--caa-gold);
	background: var(--caa-bg-warm);
	padding: clamp(22px, 2.8vw, 34px) clamp(20px, 2.6vw, 32px);
}

body.caa-maqueta .caa-b3-espera .caa-etiqueta {
	display: block;
}

body.caa-maqueta .caa-b3-espera__frase {
	margin: 12px 0 0;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(19px, 2.1vw, 26px);
	line-height: 1.35;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-b3-espera__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.2vw, 30px);
	margin: clamp(20px, 2.4vw, 28px) 0 0;
}


/* =============================================================================
   7 · EL DIRECTORIO DE CLUBES
============================================================================= */

body.caa-maqueta .caa-links__grupo {
	margin-bottom: clamp(30px, 3.6vw, 46px);
}

body.caa-maqueta .caa-links__h2 {
	margin: 0 0 16px;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(23px, 2.6vw, 34px);
	line-height: 1.1;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-links__grupo .caa-sep {
	margin-bottom: 18px;
	width: 72px;
}

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

body.caa-maqueta .caa-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	padding: clamp(13px, 1.7vw, 19px) 0;
	border-bottom: 1px solid var(--caa-l14);
}

body.caa-maqueta .caa-link__nombre {
	flex: 1 1 200px;
	min-width: 0;
	font-family: var(--caa-display);
	font-size: clamp(17px, 1.8vw, 22px);
	line-height: 1.25;
	color: var(--caa-navy);
	text-wrap: pretty;
}

body.caa-maqueta .caa-link:hover .caa-link__nombre {
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-link__dominio {
	flex: 0 0 auto;
	font-family: var(--caa-body);
	font-size: 13.5px;
	letter-spacing: .04em;
	color: var(--caa-muted);
}

body.caa-maqueta .caa-link__nota {
	flex: 0 0 auto;
	font-family: var(--caa-body);
	font-style: italic;
	font-size: 12.5px;
	color: var(--caa-gold-text);
}

body.caa-maqueta .caa-link__flecha {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--caa-gold-text);
}


/* =============================================================================
   8 · UN SOLO PUNTO DE QUIEBRE, 1060 px

   El resto de la maqueta es `flex-wrap` y `clamp()`. Acá sólo se apila lo que
   con dos columnas quedaría demasiado angosto para leer.
============================================================================= */

@media (max-width: 1060px) {

	body.caa-maqueta .caa-nota__aside-fijo,
	body.caa-maqueta .caa-interior__indice-fijo {
		position: static;
	}

	/*
	 * El índice se queda arriba, que es `wrap-reverse`. Con `wrap` caía al pie
	 * de la página: después de las 1.600 palabras del reglamento y del bloque
	 * de descargas, o sea donde ya no sirve para nada. Un índice se lee antes
	 * de leer, no después.
	 */
	body.caa-maqueta .caa-interior__indice-fijo {
		position: static;
	}

	body.caa-maqueta .caa-interior__indice {
		flex-basis: 100%;
		padding-bottom: clamp(6px, 1.4vw, 12px);
	}

	body.caa-maqueta .caa-b3-filtro__cuenta {
		margin-left: 0;
		width: 100%;
	}
}

@media (max-width: 620px) {

	body.caa-maqueta .caa-entrada__foto {
		width: 100%;
	}

	body.caa-maqueta .caa-b3-albumes {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}


/* --- Lista de inscriptos ----------------------------------------------------
   La tabla que reemplaza al PDF de `/lista-de-inscriptos/`. Los datos salen de
   la planilla del formulario de inscripción; ver `inc/inscriptos.php`.

   DOS FORMAS, UN SOLO MARCADO. Arriba de 860 px es una tabla de ocho columnas.
   Abajo se reacomoda en fichas —una por tripulación, con el número al costado—
   porque ocho columnas en un teléfono obligan a arrastrar la tabla de lado
   para leer un renglón, y esta lista se mira sobre todo desde el teléfono.
   Los roles ARIA van escritos en el HTML, así que el cambio de `display` no le
   saca a nadie la estructura de tabla.                                      */

body.caa-maqueta .caa-b3-inscriptos {
	margin-top: clamp(4px, 1vw, 12px);
}

body.caa-maqueta .caa-b3-inscriptos__h2 {
	margin: 0 0 16px;
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(24px, 2.8vw, 38px);
	line-height: 1.1;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-b3-inscriptos .caa-sep {
	margin-bottom: 18px;
	width: 72px;
}

body.caa-maqueta .caa-b3-inscriptos__estado {
	margin: 0 0 clamp(16px, 2vw, 24px);
	font-family: var(--caa-body);
	font-size: 14px;
	color: var(--caa-muted);
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-b3-inscriptos__estado strong {
	font-weight: 600;
	color: var(--caa-ink);
}

/*
 * Entre 860 y ~1000 px la tabla entra justa. El marco la deja arrastrarse de
 * lado en vez de empujar el ancho de la página, que es lo que rompe el diseño
 * de todo lo demás.
 */
body.caa-maqueta .caa-b3-inscriptos__marco {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.caa-maqueta .caa-tabla--inscriptos {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--caa-body);
	font-size: clamp(14px, 1.02vw, 16px);
	line-height: 1.35;
	color: var(--caa-ink);
}

body.caa-maqueta .caa-tabla--inscriptos thead th {
	padding: 0 14px 11px 0;
	border-bottom: 1px solid var(--caa-l18);
	font-family: var(--caa-body);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
	text-align: left;
	white-space: nowrap;
}

body.caa-maqueta .caa-tabla--inscriptos td {
	padding: 13px 14px 13px 0;
	border-bottom: 1px solid var(--caa-l14);
	vertical-align: baseline;
}

body.caa-maqueta .caa-tabla--inscriptos tbody tr:last-child td {
	border-bottom: 0;
}

/* El número es una referencia, no un dato que se lea: cifras tabulares y tenue. */
body.caa-maqueta .caa-tabla__c--numero {
	width: 1%;
	padding-right: 18px;
	font-variant-numeric: tabular-nums;
	color: var(--caa-muted);
}

body.caa-maqueta .caa-tabla--inscriptos td.caa-tabla__c--piloto {
	font-size: 1.06em;
	color: var(--caa-navy);
}

body.caa-maqueta .caa-tabla__c--anio {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.caa-maqueta .caa-tabla--inscriptos td.caa-tabla__c--categoria {
	font-size: .88em;
	color: var(--caa-muted);
}

body.caa-maqueta .caa-tabla__vacio {
	color: var(--caa-l35);
}

/* --- Los seis tramos de categoría ------------------------------------------
   Estaban impresos al costado de la lista en el PDF. Sin ellos «Contemporáneos
   II» no le dice nada a quien entra por primera vez.                        */

body.caa-maqueta .caa-b3-inscriptos__tramos {
	margin-top: clamp(22px, 2.6vw, 34px);
	padding-top: clamp(14px, 1.8vw, 20px);
	border-top: 1px solid var(--caa-l14);
}

/*
 * Tres columnas y no seis: repartidos a lo ancho de la página, «Contemporáneos
 * III» no entra en su celda y corta en dos renglones, y un solo renglón partido
 * entre seis parece un error de maquetación.
 */
body.caa-maqueta .caa-b3-inscriptos__tramos-lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	max-width: 840px;
	gap: 6px clamp(14px, 2vw, 28px);
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

body.caa-maqueta .caa-b3-inscriptos__tramos-lista li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-family: var(--caa-body);
	font-size: 13px;
	line-height: 1.5;
}

body.caa-maqueta .caa-b3-inscriptos__rango {
	flex: 0 0 auto;
	color: var(--caa-muted);
	font-variant-numeric: tabular-nums;
}

body.caa-maqueta .caa-b3-inscriptos__cat {
	color: var(--caa-ink);
}


@media (max-width: 860px) {

	/*
	 * En fichas. El encabezado se oculta a la vista y no al lector de pantalla,
	 * que sigue teniendo los `th` de la tabla para nombrar cada celda.
	 */
	body.caa-maqueta .caa-tabla--inscriptos thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.caa-maqueta .caa-tabla--inscriptos,
	body.caa-maqueta .caa-tabla--inscriptos tbody,
	body.caa-maqueta .caa-tabla--inscriptos td {
		display: block;
	}

	body.caa-maqueta .caa-tabla--inscriptos tbody tr {
		display: grid;
		grid-template-columns: 2.4em minmax(0, auto) minmax(0, 1fr);
		grid-template-areas:
			"num piloto   piloto"
			"num copiloto copiloto"
			"num marca    modelo"
			"num anio     color"
			"num cat      cat";
		column-gap: 12px;
		row-gap: 1px;
		padding: 15px 0;
		border-bottom: 1px solid var(--caa-l14);
	}

	body.caa-maqueta .caa-tabla--inscriptos tbody tr:last-child {
		border-bottom: 0;
	}

	body.caa-maqueta .caa-tabla--inscriptos td {
		padding: 0;
		border: 0;
	}

	body.caa-maqueta .caa-tabla__c--numero {
		grid-area: num;
		width: auto;
		padding-right: 0;
		font-size: 13px;
	}

	body.caa-maqueta .caa-tabla__c--piloto {
		grid-area: piloto;
	}

	body.caa-maqueta .caa-tabla__c--copiloto {
		grid-area: copiloto;
		color: var(--caa-muted);
	}

	body.caa-maqueta .caa-tabla__c--marca {
		grid-area: marca;
	}

	body.caa-maqueta .caa-tabla__c--modelo {
		grid-area: modelo;
	}

	body.caa-maqueta .caa-tabla__c--anio {
		grid-area: anio;
	}

	body.caa-maqueta .caa-tabla__c--color {
		grid-area: color;
	}

	body.caa-maqueta .caa-tabla__c--categoria {
		grid-area: cat;
		margin-top: 4px;
		font-size: 11.5px !important;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--caa-gold-text) !important;
	}

	/*
	 * Marca, modelo, año y color son cuatro celdas seguidas sin encabezado a la
	 * vista. Un filete tenue delante de las de la segunda línea las separa de
	 * las de arriba sin agregar una palabra.
	 */
	body.caa-maqueta .caa-tabla__c--anio,
	body.caa-maqueta .caa-tabla__c--color,
	body.caa-maqueta .caa-tabla__c--marca,
	body.caa-maqueta .caa-tabla__c--modelo {
		font-size: .92em;
		color: var(--caa-muted);
	}
}