/* =============================================================================
   CAAMDP · Sistema compartido de la maqueta 2026

   Tokens, reset, tipografía, motor de animaciones, piezas comunes, masthead,
   barra compacta, menú móvil y pie de sponsors.

   Se carga en TODAS las páginas rediseñadas: portada, landing del 44º Rally,
   archivo histórico y las tres institucionales. Lo propio de cada bloque vive
   en su hoja: `home.css` y `archivo.css`.

   Todo está 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 · TOKENS

   Los cinco valores base salen de medir el PDF del brochure, no de una
   interpretación. Los dorados tipográficos están corregidos para cumplir
   WCAG AA: #7A6638 da 4.91:1 y #5F6570 da 5.0:1 sobre el fondo base.

   NO reintroducir #8A7444 (3.99:1) ni #6F7580 (4.10:1): fallan.
============================================================================= */

body.caa-maqueta {
	/* Fondos */
	--caa-bg: #F2F1ED;          /* base clara, 66,8 % de la pieza original */
	--caa-bg-warm: #EAE9E5;     /* base cálida */
	--caa-greige: #CFCCC4;      /* banda separadora */
	--caa-gold-field: #C7AF7F;  /* panel dorado sólido */
	--caa-navy: #1F2531;        /* panel a sangre, titulares, botón primario */

	/* Tinta */
	--caa-ink: #2C333F;         /* texto corrido */
	--caa-gold: #A89060;        /* filetes y separadores: SÓLO decoración */
	--caa-gold-text: #7A6638;   /* antetítulos y microtexto */
	--caa-muted: #5F6570;       /* notas secundarias */
	--caa-on-gold: #2A2416;     /* texto dentro del panel dorado */
	--caa-gold-dark: #6B5A2E;   /* subrayado del CTA dentro del panel dorado */

	/*
	 * Antetítulo sobre la banda greige.
	 *
	 * NO es --caa-gold-dark, y la diferencia se midió: #6B5A2E sobre #CFCCC4 da
	 * 4.19:1 y NO llega al 4.5 que pide WCAG AA para texto chico. El antetítulo
	 * va a 10,5 px, así que es texto chico sin discusión. #5F4E26 da 5.03:1.
	 *
	 * Es la tercera vez en este proyecto que un dorado se queda corto de
	 * contraste: primero #8A7444 (3.99), después #6F7580 (4.10) y ahora éste.
	 * Todos se ven bien y todos fallan.
	 */
	--caa-gold-greige: #5F4E26;
	--caa-ghost: #E7E5DE;       /* numeral fantasma del hero */
	--caa-ghost-2: #E9E7E1;     /* numerales 20 · 26 de la landing */
	--caa-ghost-3: #EAE8E2;     /* numeral 1981 del cierre */
	--caa-num-greige: #4A5160;  /* numeral de sección sobre greige */

	/* Filetes */
	--caa-l12: rgba(31, 37, 49, .12);
	--caa-l14: rgba(31, 37, 49, .14);
	--caa-l16: rgba(31, 37, 49, .16);
	--caa-l18: rgba(31, 37, 49, .18);
	--caa-l22: rgba(31, 37, 49, .22);
	--caa-l26: rgba(31, 37, 49, .26);
	--caa-l28: rgba(31, 37, 49, .28);
	--caa-l35: rgba(31, 37, 49, .35);
	--caa-l40: rgba(31, 37, 49, .40);
	--caa-gold-rule: rgba(168, 144, 96, .55);

	/* Tipografías */
	--caa-display: 'Bodoni Moda', Didot, 'Times New Roman', serif;
	--caa-body: 'EB Garamond', Georgia, serif;

	/* Espaciado: el margen izquierdo es estructural, 11,5 % del ancho */
	--caa-mi: clamp(20px, 11.5vw, 190px);   /* margen izquierdo de sección */
	--caa-mi-hero: clamp(20px, 8vw, 190px); /* hero y largada, algo menor */
	--caa-md: clamp(20px, 6vw, 96px);       /* margen derecho */
	--caa-pv: clamp(70px, 9vw, 140px);      /* padding vertical superior */
	--caa-pv-b: clamp(60px, 7vw, 110px);    /* padding vertical inferior */
	--caa-gap-col: clamp(32px, 4.4vw, 72px);
	--caa-max: 1180px;

	/*
	 * Alto que ocupa la barra compacta en el momento. Es 0 hasta que aparece,
	 * y todo lo que se pega debajo de ella lo suma en su `top`. Sin esto, una
	 * fila pegajosa con `top: 70px` deja un hueco de 70 px por el que se ve
	 * pasar el texto mientras la barra todavía no entró.
	 */
	--caa-barra: 0px;

	/* Curvas */
	--caa-ease: cubic-bezier(.2, .8, .2, 1);
	--caa-ease-rev: cubic-bezier(.22, .78, .2, 1);
}


/* La barra compacta se anuncia al resto del CSS cuando entra y cuando se va. */
body.caa-maqueta:has(.caa-sticky.is-visible) {
	--caa-barra: 70px;
}


/* =============================================================================
   2 · NEUTRALIZACIÓN DE FLATSOME

   Flatsome trae su propia base tipográfica, sus márgenes de párrafo y sus
   contenedores. Acá se apagan, pero SÓLO dentro de estas dos páginas.
============================================================================= */

/*
 * Flatsome le pone al <html> el color primario, que es lo que se ve alrededor
 * de la caja en su maquetación «boxed». Acá esa caja no existe, pero el color
 * sigue puesto y asoma en el rebote del scroll y en pantallas muy altas.
 *
 * Va con el hex escrito y no con el token porque el token vive en `body`, y
 * `html` es su padre.
 */
html:has(body.caa-maqueta) {
	/*
	 * El único `!important` de toda la hoja, y está justificado: el color lo
	 * pone Flatsome desde el Personalizador con `html { background-color: …
	 * !important }`. Contra un `!important` no alcanza con especificidad.
	 */
	background: #F2F1ED !important;
}

body.caa-maqueta {
	margin: 0;
	background: var(--caa-bg);
	color: var(--caa-navy);
	font-family: var(--caa-body);
	/*
	 * `hidden` convierte al body en contenedor de scroll y con eso anula
	 * cualquier `position: sticky` de adentro: el índice lateral de las
	 * páginas interiores estaba declarado pegajoso y no se pegaba nunca.
	 * `clip` recorta igual y no crea el contenedor. La primera línea es el
	 * respaldo para Safari 15 y anteriores, que no conocen `clip` y se
	 * quedan con el comportamiento de antes.
	 */
	overflow-x: hidden;
	overflow-x: clip;

	/* Sin esto el navegador sintetiza la itálica de Bodoni inclinando la
	   redonda, y sobre el titular del hero aparecen contornos fantasma. */
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * El `#main` de Flatsome llega con un fondo propio puesto desde el
 * Personalizador, y ese selector es un ID. Un ID le gana a cualquier cantidad
 * de clases, así que acá hay que responder con otro ID: por eso
 * `#main.caa-main` y no sólo `.caa-main`.
 */
body.caa-maqueta #wrapper,
body.caa-maqueta #main.caa-main {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--caa-bg);
}

body.caa-maqueta #main.caa-main {
	position: relative;
	overflow-x: clip;
}

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

/* <picture> no debe agregar una caja: los flex y los grid tienen que ver
   directamente el <img>. */
body.caa-maqueta .caa-picture {
	display: contents;
}

/*
 * `:where()` no suma especificidad, así que esta base pesa lo mismo que una
 * sola clase. Es a propósito: le gana a la regla `img` de Flatsome y, a la
 * vez, deja que `.caa-medalla`, `.caa-sellos` o `.caa-hero__wordmark` fijen su
 * tamaño sin tener que repetir el prefijo en cada una.
 *
 * `height: auto` no es decorativo: los <img> llevan width y height explícitos
 * para que no salte el layout, y sin esto una imagen achicada por
 * `max-width` conservaría la altura del atributo y saldría deformada.
 */
:where(body.caa-maqueta) .caa-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

/*
 * LA BASE DE LOS ENLACES VA CON `:where()`, Y ES LA DECISIÓN MÁS IMPORTANTE
 * DE ESTA HOJA.
 *
 * El masthead, la barra compacta y el menú viven FUERA de <main>, así que
 * hace falta alcanzarlos: por eso el `#wrapper`, que los abarca a todos y
 * deja afuera la barra de administración y el «saltar al contenido».
 *
 * Pero un `#wrapper` suelto pesa un ID, y un ID le gana a cualquier clase:
 * con esa regla, `color: var(--caa-navy)` pisaba el blanco de los botones y
 * el CTA «Inscripción» quedaba con texto navy sobre fondo navy, invisible.
 *
 * Envuelto en `:where()` el selector no suma nada y pesa lo mismo que `a` a
 * secas. Le gana a la regla `a` de Flatsome porque esta hoja carga después, y
 * pierde contra cualquier componente con clase, que es justo lo que se quiere.
 */
:where(body.caa-maqueta #wrapper) a {
	color: var(--caa-navy);
	text-decoration: none;
	transition: color .25s ease;
}

/*
 * El dorado de hover del texto es #7A6638, no #A89060.
 *
 * El handoff reserva #A89060 para los enlaces de NAVEGACIÓN, que son los del
 * masthead y la barra compacta, y pide #7A6638 para los enlaces de sección.
 * La diferencia importa: sobre el fondo base, #A89060 da 2,7:1 y #7A6638 da
 * 4,91:1. El texto corrido y los enlaces de contenido se quedan con el que
 * cumple.
 */
:where(body.caa-maqueta #wrapper) a:hover,
:where(body.caa-maqueta #wrapper) a:focus-visible {
	color: var(--caa-gold-text);
}

.caa-nav a:hover,
.caa-nav a:focus-visible,
.caa-menu__nav a:hover,
.caa-menu__nav a:focus-visible {
	color: var(--caa-gold);
}

body.caa-maqueta :focus-visible {
	outline: 2px solid var(--caa-gold-text);
	outline-offset: 3px;
}

/*
 * EL RESET DE ELEMENTOS VA CON `:where()`, POR EL MISMO MOTIVO QUE LOS
 * ENLACES.
 *
 * Escrito como `body.caa-maqueta p { margin: 0 }` pesa más que cualquier
 * componente con una sola clase, así que `.caa-rally__fecha { margin-top:
 * 20px }` quedaba sin efecto y el bloque del panel dorado se veía apelmazado:
 * el subtítulo tocaba la fecha.
 *
 * Con `:where()` el reset pesa lo mismo que el selector de elemento a secas.
 * Le gana a la base de Flatsome, que carga antes, y pierde contra todas
 * nuestras clases, que es exactamente el orden que hace falta.
 */
:where(body.caa-maqueta) h1,
:where(body.caa-maqueta) h2,
:where(body.caa-maqueta) h3,
:where(body.caa-maqueta) p,
:where(body.caa-maqueta) ul,
:where(body.caa-maqueta) li,
:where(body.caa-maqueta) figure,
:where(body.caa-maqueta) figcaption {
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}

:where(body.caa-maqueta) ul {
	list-style: none;
}

:where(body.caa-maqueta) button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	line-height: inherit;
}

:where(body.caa-maqueta) strong {
	font-weight: 600;
}


/* =============================================================================
   3 · TIPOGRAFÍA Y ELEMENTOS BASE

   Toda la escala del handoff. Lo que lleva tracking va en versalitas.
   Las cifras que animan llevan tabular-nums para que no bailen los anchos.
============================================================================= */

.caa-h1 {
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(37px, 4.7vw, 80px);
	line-height: 1.05;
	letter-spacing: -.018em;
	color: var(--caa-navy);
}

.caa-h2 {
	font-family: var(--caa-display);
	font-weight: 400;
	font-size: clamp(38px, 5vw, 72px);
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--caa-navy);
}

.caa-h2--rally {
	font-size: clamp(36px, 4.8vw, 68px);
}

.caa-titulo-medio {
	font-family: var(--caa-display);
	font-size: clamp(23px, 2.6vw, 36px);
	line-height: 1.12;
	color: var(--caa-navy);
}

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

.caa-cifra {
	font-family: var(--caa-display);
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1;
	color: var(--caa-navy);
	font-variant-numeric: tabular-nums;
}

.caa-cifra--stat {
	font-size: clamp(26px, 2.6vw, 36px);
}

.caa-cifra--panel {
	font-size: clamp(28px, 3.2vw, 44px);
}

.caa-bajada {
	font-family: var(--caa-body);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.72;
	color: var(--caa-ink);
	text-wrap: pretty;
}

/* Cuerpo a dos columnas, justificado. Es el tratamiento del brochure. */
.caa-columnas {
	columns: 2 320px;
	column-gap: var(--caa-gap-col);
	font-family: var(--caa-body);
	font-size: 17px;
	line-height: 1.78;
	color: var(--caa-ink);
	text-align: justify;
	hyphens: auto;
}

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

.caa-columnas p:last-child {
	margin-bottom: 0;
}

.caa-texto-tarjeta {
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--caa-ink);
}

.caa-nota {
	font-family: var(--caa-body);
	font-style: italic;
	font-size: 16.5px;
	color: var(--caa-muted);
}

.caa-antetitulo {
	font-family: var(--caa-body);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--caa-gold-text);
}

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

.caa-etiqueta--tenue {
	color: var(--caa-muted);
}


/* =============================================================================
   4 · MOVIMIENTO

   Tres reglas que no se pueden saltear, y que están resueltas entre acá y
   home.js:

   1. Las animaciones no arrancan con la pestaña en segundo plano. Ahí la línea
      de tiempo del documento queda en cero y todo lo animado se congela en su
      primer fotograma, que es el invisible.
   2. `animation-fill-mode: backwards`, NUNCA `both`. El estado de reposo de
      todo elemento tiene que ser el visible.
   3. Red de seguridad: si a los ~2 s algo no terminó, se limpia. Ningún
      elemento puede quedar oculto de forma permanente.
============================================================================= */

@keyframes caaFadeUp {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

@keyframes caaRise {
	from { transform: translateY(108%); }
	to   { transform: translateY(0); }
}

@keyframes caaRule {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes caaCarIn {
	from { opacity: 0; transform: translateX(64px) scale(1.045); }
	to   { opacity: 1; transform: none; }
}

@keyframes caaCarUp {
	from { opacity: 0; transform: translateY(40px) scale(1.03); }
	to   { opacity: 1; transform: none; }
}

@keyframes caaFadeOnly {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes caaWipe {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes caaBlink {
	0%, 100% { opacity: .25; }
	50%      { opacity: .9; }
}

/* Máscara de las líneas del titular. El padding compensa los descendentes de
   la itálica, que si no quedan cortados por el overflow. */
.caa-mascara {
	display: block;
	overflow: hidden;
	padding-bottom: .07em;
	margin-bottom: -.07em;
}

.caa-mascara > span {
	display: block;
}

.caa-parpadeo {
	animation: caaBlink 3.4s ease-in-out infinite;
}


/* =============================================================================
   5 · PIEZAS COMPARTIDAS
============================================================================= */

/* --- Sección: el patrón de márgenes que se repite --------------------------- */

.caa-seccion {
	position: relative;
	background: var(--caa-bg);
	padding: var(--caa-pv) var(--caa-md) var(--caa-pv-b) var(--caa-mi);
}

.caa-seccion--warm { background: var(--caa-bg-warm); }
.caa-seccion--greige { background: var(--caa-greige); }

.caa-ancho {
	max-width: var(--caa-max);
}

/* Títulos y antetítulos repartidos en renglones parejos: sin esto quedaban
   viudas como «CIERRA EL 2 DE NOVIEMBRE, 20:00 / H» o «Comisión Revisora de
   / Cuentas». Los navegadores que no lo conocen lo ignoran. */
body.caa-maqueta h1,
body.caa-maqueta h2,
body.caa-maqueta h3,
body.caa-maqueta .caa-antetitulo,
body.caa-maqueta .caa-etiqueta {
	text-wrap: balance;
}

/* --- Numeral de sección ---------------------------------------------------- */

.caa-numeral {
	position: absolute;
	left: clamp(20px, 5vw, 64px);
	top: var(--caa-pv);
	z-index: 3;
}

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

.caa-numeral span {
	font-family: var(--caa-body);
	font-size: 12.5px;
	letter-spacing: .22em;
	color: var(--caa-gold-text);
}

.caa-numeral--greige::before { background: var(--caa-l40); }
.caa-numeral--greige span { color: var(--caa-num-greige); }

.caa-numeral--navy::before { background: var(--caa-gold-field); }
.caa-numeral--navy span { color: var(--caa-gold-field); }

/* --- Botones --------------------------------------------------------------- */

.caa-cta {
	display: inline-block;
	font-family: var(--caa-body);
	font-size: 13.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1.2;
}

.caa-cta--navy {
	color: #F2F1ED;
	background: var(--caa-navy);
	padding: 17px 30px;
	transition: background .3s ease, color .3s ease;
}

.caa-cta--navy:hover,
.caa-cta--navy:focus-visible {
	background: var(--caa-gold);
	color: var(--caa-navy);
}

/* Sobre el panel dorado y sobre la banda greige el hover no invierte:
   oscurece. Invertir a dorado sobre dorado borraría el botón. */
.caa-cta--navy.caa-cta--oscurece:hover,
.caa-cta--navy.caa-cta--oscurece:focus-visible {
	background: #1a1f29;
	color: #F2F1ED;
}

.caa-cta--chico {
	font-size: 13.5px;
	padding: 10px 20px;
	/* «Inscripción al Rally» son dos palabras: sin esto el botón se parte en
	   dos renglones y rompe los 70 px de la barra compacta. */
	white-space: nowrap;
}

.caa-cta--linea {
	color: var(--caa-navy);
	padding: 17px 4px;
	border-bottom: 1px solid var(--caa-gold);
}

.caa-cta--linea:hover,
.caa-cta--linea:focus-visible {
	color: var(--caa-gold-text);
}

.caa-cta--linea-oro {
	color: var(--caa-on-gold);
	padding: 16px 4px;
	border-bottom: 1px solid var(--caa-gold-dark);
}

.caa-cta--linea-oro:hover,
.caa-cta--linea-oro:focus-visible {
	color: var(--caa-navy);
}

.caa-botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* --- Enlace de sección ----------------------------------------------------- */

.caa-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 40px);
}

.caa-enlace {
	font-family: var(--caa-body);
	font-size: 13.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--caa-navy);
	border-bottom: 1px solid var(--caa-l26);
	padding-bottom: 5px;
}

.caa-enlace--oro {
	border-bottom-color: var(--caa-gold);
}

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

/* --- Fecha con filete vertical --------------------------------------------- */

.caa-fecha {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.caa-fecha__barra {
	display: block;
	width: 1px;
	height: clamp(24px, 2.6vw, 34px);
	background: var(--caa-l35);
}

/* --- Línea del recorrido --------------------------------------------------- */

.caa-recorrido-linea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--caa-body);
	font-size: 12.5px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--caa-ink);
}

.caa-sep {
	color: var(--caa-gold);
}

/* --- Cuenta regresiva ------------------------------------------------------ */

.caa-cuenta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(12px, 1.6vw, 18px);
}

.caa-cuenta__grupo {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.caa-cuenta__dias {
	font-family: var(--caa-display);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1;
	color: var(--caa-gold-text);
	font-variant-numeric: tabular-nums;
}

.caa-cuenta__dias--chica {
	font-size: clamp(22px, 2.2vw, 30px);
}

.caa-cuenta__barra {
	display: block;
	width: 1px;
	height: 22px;
	background: var(--caa-l22);
}

/* --- Sombra de contacto ----------------------------------------------------
   La única sombra del diseño. Difusa, elíptica y corta: el objeto se apoya,
   no flota. No hay sombras de tarjeta en ninguna parte.                     */

.caa-objeto {
	position: relative;
}

.caa-objeto > .caa-img,
.caa-objeto > .caa-picture > .caa-img {
	position: relative;
	z-index: 2;
}

.caa-sombra {
	position: absolute;
	left: 12%;
	right: 10%;
	bottom: 2%;
	height: 30px;
	z-index: 1;
	background: radial-gradient(ellipse at center,
		rgba(31, 37, 49, .30) 0%,
		rgba(31, 37, 49, .12) 42%,
		rgba(31, 37, 49, 0) 72%);
	filter: blur(9px);
	pointer-events: none;
}

.caa-sombra--corta {
	left: 9%;
	right: 8%;
	bottom: 3%;
	height: 22px;
	background: radial-gradient(ellipse at center,
		rgba(31, 37, 49, .26) 0%,
		rgba(31, 37, 49, 0) 70%);
	filter: blur(8px);
}

/* --- Transición greige -----------------------------------------------------
   Corte duro, no degradado. El auto cruza el borde entre las dos bandas: ese
   cruce es lo que cose verticalmente la página y evita que las secciones se
   lean apiladas.                                                            */

.caa-transicion {
	position: relative;
	background: linear-gradient(to bottom,
		var(--caa-bg) 0,
		var(--caa-bg) var(--caa-corte, 46%),
		var(--caa-greige) var(--caa-corte, 46%),
		var(--caa-greige) 100%);
	padding: clamp(30px, 4vw, 54px) 0 0;
	overflow: clip;
}

.caa-transicion__caja {
	display: flex;
	justify-content: center;
	padding: 0 clamp(16px, 4vw, 48px);
}

.caa-transicion__objeto {
	width: 100%;
	max-width: 900px;
}

.caa-transicion__cola {
	height: clamp(28px, 4vw, 56px);
}

/* --- Cifras que animan ----------------------------------------------------- */

.caa-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3.4vw, 48px);
}

.caa-stat__etiqueta {
	margin-top: 7px;
}


/* =============================================================================
   6 · MASTHEAD, BARRA COMPACTA Y MENÚ MÓVIL
============================================================================= */

/* --- Masthead --------------------------------------------------------------
   Cabecera estática, no fija: se va con el scroll. La medalla va al ras del
   borde superior y su cinta entra cortada desde arriba. Es intencional.     */

.caa-masthead {
	position: relative;
	z-index: 10;
	background: var(--caa-bg);
}

.caa-masthead__medalla {
	display: flex;
	justify-content: center;
	padding: 0 clamp(18px, 4vw, 56px);
}

.caa-masthead__medalla a {
	display: block;
}

.caa-medalla {
	height: clamp(150px, 20vw, 250px);
	width: auto;
}

.caa-masthead__franja {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(18px, 2.2vw, 30px);
	padding: clamp(13px, 1.5vw, 18px) clamp(18px, 4vw, 56px);
	border-top: 1px solid var(--caa-l14);
	border-bottom: 1px solid var(--caa-l14);
}

.caa-masthead__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(14px, 2.3vw, 36px);
}

/* --- Navegación: sale de wp_nav_menu(), así que el Club la edita ----------- */

.caa-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(14px, 2.3vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.caa-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.caa-nav a {
	display: inline-block;
	font-family: var(--caa-body);
	font-size: 13.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--caa-navy);
	white-space: nowrap;
	line-height: 1.2;
}

/* El 44º Rally lleva filete dorado también en la portada: es el destaque de
   la campaña, no el indicador de página actual. */
.caa-nav .caa-destacado > a,
.caa-nav .current-menu-item > a,
.caa-nav .current_page_item > a {
	border-bottom: 1px solid var(--caa-gold-field);
	padding-bottom: 2px;
}

/* --- Botón de menú --------------------------------------------------------- */

.caa-menu-boton {
	display: none;
	align-items: center;
	gap: 12px;
	font-family: var(--caa-body);
	font-size: 13.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--caa-navy);
	padding: 8px 4px;
}

.caa-burger {
	display: flex;
	flex-direction: column;
	gap: 3.5px;
}

.caa-burger span {
	display: block;
	width: 18px;
	height: 1px;
	background: var(--caa-navy);
}

.caa-masthead__nav-noscript {
	width: 100%;
}

.caa-nav--apilada {
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* --- Barra compacta --------------------------------------------------------
   En reposo está fuera de pantalla. Aparece cuando el scroll pasa el alto del
   masthead más 40 px.                                                       */

.caa-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 clamp(18px, 4vw, 56px);
	background: var(--caa-bg);
	border-bottom: 1px solid var(--caa-l12);
	transform: translateY(-101%);
	transition: transform .45s var(--caa-ease);
}

.caa-sticky.is-visible {
	transform: translateY(0);
}

.caa-sticky__progreso {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--caa-gold);
	pointer-events: none;
}

.caa-sticky__logo {
	flex: 0 0 auto;
	display: block;
}

/* El logotipo horizontal sin la línea «Mar del Plata», no la medalla del
   masthead: el porqué de las dos cosas está escrito en
   `template-parts/caamdp/barra-compacta.php`.

   Se fija el ALTO y no el ancho a propósito. La barra mide 70 px y ese número
   está además publicado en `--caa-barra`, que es de lo que cuelgan el
   `scroll-margin` de las anclas y el tope del menú móvil: si el logotipo
   creciera por ancho, cualquier reemplazo del archivo con otra proporción
   empujaría la barra y correría todo eso.

   56 px dentro de 70 deja 7 px de aire arriba y abajo. El archivo viene al ras,
   sin margen propio —el recorte termina justo donde termina «ANTIGUOS»—, así
   que ese aire es todo el que hay: es lo único que separa el logotipo del
   filete de progreso, y por eso no se sube más. Probado también a 58: el
   nombre no se lee mejor y el aire de arriba baja a 5,5 px. */

.caa-logo-barra {
	height: 56px;
	width: auto;
}

.caa-sticky__nav {
	display: flex;
	align-items: center;
	gap: clamp(13px, 1.9vw, 28px);
}

.caa-sticky__nav .caa-nav {
	gap: clamp(13px, 1.9vw, 28px);
}

.caa-sticky__nav .caa-nav a {
	font-size: 13px;
}

.caa-sticky__nav .caa-cta--chico {
	font-size: 13px;
	padding: 10px 18px;
}

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

.caa-sticky__dias {
	font-family: var(--caa-display);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.caa-sticky__burger {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--caa-l28);
}

.caa-sticky__burger .caa-burger {
	gap: 4px;
}

/* --- Menú móvil ------------------------------------------------------------
   `overflow-y:auto` y `overscroll-behavior:contain` son obligatorios: sin
   ellos, en una ventana de menos de 650 px de alto el CTA de inscripción
   queda fuera de pantalla y es inalcanzable.                                */

.caa-menu {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	flex-direction: column;
	padding: 22px clamp(18px, 6vw, 48px) 32px;
	background: var(--caa-bg);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

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

.caa-menu__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 52px;
	flex: 0 0 auto;
}

.caa-menu__medalla {
	height: 84px;
	width: auto;
}

/*
 * El scope de `body` es a propósito: Flatsome pone versalitas y tracking a
 * todos los <button> con un selector más fuerte que el reset, y acá el
 * contenido es un «×» que con tracking queda descentrado.
 */
body.caa-maqueta .caa-menu__cerrar {
	text-transform: none;
	letter-spacing: normal;
}

.caa-menu__cerrar {
	width: 44px;
	height: 44px;
	border: 1px solid var(--caa-l28);
	font-family: var(--caa-body);
	font-size: 20px;
	line-height: 1;
	color: var(--caa-navy);
}

.caa-menu__nav {
	display: flex;
	flex-direction: column;
	margin-top: clamp(16px, 3vh, 30px);
	flex: 0 0 auto;
}

.caa-menu__nav a {
	font-family: var(--caa-display);
	font-size: clamp(22px, 3.4vh, 30px);
	color: var(--caa-navy);
	padding: clamp(9px, 1.5vh, 14px) 0;
	border-bottom: 1px solid var(--caa-l12);
}

.caa-menu__cta {
	flex: 0 0 auto;
	margin-top: clamp(16px, 3vh, 30px);
	text-align: center;
	font-family: var(--caa-body);
	font-size: 14.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #F2F1ED;
	background: var(--caa-navy);
	padding: 16px 20px;
}

.caa-menu__cta:hover,
.caa-menu__cta:focus-visible {
	background: var(--caa-gold);
	color: var(--caa-navy);
}

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


/* =============================================================================
   9 · PIE DE SPONSORS
============================================================================= */

body.caa-maqueta #footer {
	background: none;
	padding: 0;
	margin: 0;
}

.caa-pie {
	background: var(--caa-navy);
	width: 100%;
	padding: clamp(26px, 3.4vw, 44px) clamp(16px, 4vw, 48px);
}

.caa-pie__antetitulo {
	text-align: center;
	font-family: var(--caa-body);
	font-size: 11.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--caa-gold);
	margin-bottom: clamp(18px, 2.2vw, 28px);
}

/*
 * Los tres sellos, en fila: FIVA, FACAH y el del Club.
 *
 * Va acá y no en `home.css` porque la fila aparece en las tres familias —la
 * portada, /el-club/ y la landing del Rally— y /el-club/ no carga la hoja de
 * la portada. Cada <li> trae su propio --caa-alto desde el parcial (62, 65 y
 * 67 px) y la fila los escala en bloque con --caa-sello-escala: el ajuste
 * responsive se hace en un número y la relación entre los tres no cambia.
 *
 * La escala va por escalones y no con clamp(), y es por sintaxis: clamp()
 * sobre un número sin unidad no admite vw en el término del medio —`calc(.09vw
 * + .72)` mezcla longitud con número y el navegador descarta la declaración
 * entera—. Tres escalones dan lo mismo en pantalla y son válidos.
 */
.caa-sellos {
	--caa-sello-escala: 1;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.caa-sello {
	display: flex;
	align-items: center;
	margin: 0;
}

.caa-sello__img {
	display: block;
	height: calc(var(--caa-alto) * var(--caa-sello-escala));
	width: auto;
}

/*
 * En teléfono mandan los tres sellos y no el contexto: se lleva el prefijo
 * `body.caa-maqueta` para ganarle por especificidad a los modificadores de
 * `home.css` y `archivo.css`, que se cargan después de esta hoja.
 */
@media (max-width: 600px) {
	body.caa-maqueta .caa-sellos {
		--caa-sello-escala: .72;
		gap: 14px;
	}
}

/*
 * Los cinco sponsors, cada uno con su PNG transparente.
 *
 * El alto lo pone cada <li> con --caa-alto, que viene del parcial. El ancho
 * es `auto`: así cada logotipo conserva su proporción y la fila se ordena
 * sola. Con `flex-wrap` en teléfono se parten en dos o tres renglones sin
 * que nada se apriete.
 */
.caa-pie__sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 3.4vw, 52px);
	max-width: 920px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.caa-pie__sponsor {
	display: flex;
	align-items: center;
	margin: 0;
}

.caa-pie__logo {
	display: block;
	height: calc(var(--caa-alto) * var(--caa-sponsor-escala, 1));
	width: auto;
	max-width: 100%;
}

/*
 * Entre 900 y 620 px los cinco suman 646 px de ancho y la fila dispone de
 * unos 700: con la separación de escritorio se pasan por veinte píxeles y ACA
 * cae solo a un segundo renglón, descolgado del resto. Achicados un 15 % y con
 * menos separación entran los cinco en línea.
 */
@media (max-width: 900px) {
	.caa-pie__sponsors {
		--caa-sponsor-escala: .85;
		gap: 20px 24px;
	}
}

/*
 * Por debajo de 620 px la fila de cinco no entra ni achicada: se reparte en
 * dos o tres renglones, y los logos se achican en la misma proporción para que
 * la relación entre marcas no cambie.
 */
@media (max-width: 620px) {
	.caa-pie__sponsors {
		--caa-sponsor-escala: .8;
		gap: 18px 26px;
	}
}


/* =============================================================================
   10 · PUNTO DE QUIEBRE: 1060 px

   Uno solo. Por encima, navegación completa; por debajo, botón «Menú» y panel
   superpuesto. El resto del layout es fluido con flex-wrap y clamp().
============================================================================= */

/*
 * En la landing, con «Inscriptos» sumado a las anclas, la barra no entra en un
 * renglón por debajo de 1170 px. En ese tramo se va la cuenta regresiva —el
 * hero la muestra grande— y se aprieta el espacio entre enlaces. Por debajo
 * de 1060 manda la hamburguesa.
 */
@media (min-width: 1060px) and (max-width: 1169.98px) {

	.caa-sticky__cuenta {
		display: none;
	}

	.caa-sticky__nav,
	.caa-sticky__nav .caa-nav {
		gap: 14px;
	}
}

@media (max-width: 1059.98px) {

	.caa-masthead__nav,
	.caa-sticky__nav {
		display: none;
	}

	.caa-menu-boton {
		display: flex;
	}

	.caa-sticky__burger {
		display: flex;
	}

	.caa-masthead__franja {
		flex-direction: column;
		padding: 14px clamp(18px, 4vw, 56px);
	}

	/* Las celdas con filete lateral pasan a apilarse: el filete izquierdo
	   sobraría cuando cada una ocupa el ancho completo.

	   Con `body.caa-maqueta` delante porque `home.css` se carga después y
	   declara el mismo filete con la misma especificidad: sin el prefijo lo
	   volvía a poner, y las tarjetas apiladas quedaban encajonadas. */
	body.caa-maqueta .caa-tarjeta + .caa-tarjeta,
	body.caa-maqueta .caa-celda + .caa-celda,
	body.caa-maqueta .caa-precio + .caa-precio,
	body.caa-maqueta .caa-reconocimiento + .caa-reconocimiento,
	body.caa-maqueta .caa-dia + .caa-dia {
		border-left: 0;
	}
}

@media (max-width: 700px) {

	/* Con dos columnas de texto en pantalla angosta las líneas quedan de seis
	   palabras y la justificación abre ríos. A una sola columna. */
	.caa-columnas {
		columns: 1;
		text-align: left;
	}

	body.caa-maqueta .caa-tarjeta,
	body.caa-maqueta .caa-celda,
	body.caa-maqueta .caa-precio,
	body.caa-maqueta .caa-reconocimiento,
	body.caa-maqueta .caa-dia {
		padding-left: 0;
		padding-right: 0;
	}

	/* El numeral de sección vive en el margen izquierdo, y en un teléfono ese
	   margen mide 20 px: quedaba pegado al antetítulo o al <h1> («C1El Club»,
	   «04VELOCIDAD…»). Es decoración, así que en pantalla angosta se va. */
	body.caa-maqueta .caa-numeral,
	body.caa-maqueta .caa-rhero .caa-hero__pie-izq {
		display: none;
	}

	/* Pestañas y filtros: el texto mide 12–13 px y la zona tocable quedaba
	   en 25 px. El aire va arriba, así el filete de la pestaña activa sigue
	   pegado a la palabra. */
	body.caa-maqueta .caa-pestania,
	body.caa-maqueta .caa-decada,
	body.caa-maqueta .caa-b3-filtro__opcion {
		padding-top: 14px;
	}

	/* Los objetos en paralaje no encuentran lugar sin tapar texto: el
	   cronómetro caía sobre «Velocidad controlada» y el guante sobre el <h1>
	   del archivo. También son decoración. */
	body.caa-maqueta .caa-recorrido__crono,
	body.caa-maqueta .caa-hub__crono {
		display: none;
	}

	.caa-hero__pie-der {
		display: none;
	}

	.caa-rhero__fantasma--izq { margin-left: -68vw; }
	.caa-rhero__fantasma--der { margin-left: 28vw; }
}


/* =============================================================================
   11 · MOVIMIENTO REDUCIDO

   Con `prefers-reduced-motion: reduce` se desactiva todo el movimiento SIN
   ocultar nada. La cuenta regresiva sigue funcionando.
============================================================================= */

@media (prefers-reduced-motion: reduce) {

	body.caa-maqueta *,
	body.caa-maqueta *::before,
	body.caa-maqueta *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.caa-parpadeo {
		animation: none;
		opacity: .9;
	}
}


/* =============================================================================
   12 · PÁGINA 404

   Va en esta hoja, y no en una propia, porque es la única que carga la 404: la
   página que aparece cuando algo falló no debería pedir tres CSS.
============================================================================= */

.caa-404 {
	background: var(--caa-bg);
}

.caa-404__cabecera {
	position: relative;
	padding: clamp(44px, 6vw, 92px) var(--caa-md) clamp(34px, 4vw, 56px) var(--caa-mi);
}

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

.caa-404__bajada {
	margin-top: clamp(20px, 2.4vw, 30px);
	max-width: 56ch;
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.74;
	color: var(--caa-ink);
}

/* --- Buscador ---------------------------------------------------------------
   Es un formulario de verdad, con `action` al sitio y `name="s"`: funciona con
   JavaScript desactivado y el resultado es una URL que se puede compartir.   */

.caa-404__buscador {
	margin-top: clamp(28px, 3.4vw, 42px);
	max-width: 560px;
}

.caa-404__buscador .caa-etiqueta {
	display: block;
	margin-bottom: 12px;
}

.caa-404__campo {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.caa-404__campo input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	font-family: var(--caa-body);
	font-size: 16px;
	color: var(--caa-navy);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(31, 37, 49, .3);
	border-radius: 0;
	padding: 12px 2px;
	outline: none;
	/* 16px evita que Safari en iPhone haga zoom al enfocar el campo. */
}

.caa-404__campo input[type="search"]:focus-visible {
	border-bottom-color: var(--caa-gold-text);
}

.caa-404__campo .caa-cta {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	font-family: var(--caa-body);
}

/*
 * En teléfono el botón baja a su propio renglón.
 *
 * Con los dos en línea a 390 px el campo queda de 185 px —tres palabras— y el
 * botón toca el borde derecho. Apilados, el campo ocupa el ancho entero, que
 * es lo que hace falta para escribir un apellido.
 */
@media (max-width: 560px) {
	.caa-404__campo {
		display: block;
	}

	.caa-404__campo input[type="search"] {
		width: 100%;
		margin-bottom: 18px;
	}

	.caa-404__campo .caa-cta {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* --- Tira de años ---------------------------------------------------------- */

.caa-404__anios {
	background: var(--caa-bg-warm);
	padding: clamp(30px, 3.6vw, 52px) var(--caa-md) clamp(30px, 3.6vw, 52px) var(--caa-mi);
}

.caa-404__anios .caa-etiqueta {
	display: block;
	margin-bottom: 16px;
}

.caa-404__tira {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.caa-404__tira a {
	display: block;
	font-family: var(--caa-display);
	font-size: clamp(19px, 2vw, 26px);
	line-height: 1.2;
	color: var(--caa-navy);
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid transparent;
	/* 44 px de objetivo táctil sin agrandar la tipografía. */
	padding: 9px 2px;
}

.caa-404__tira a:hover,
.caa-404__tira a:focus-visible {
	border-bottom-color: var(--caa-gold-field);
}

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

/* --- Los cuatro accesos ----------------------------------------------------- */

.caa-404__accesos {
	padding: clamp(36px, 4.4vw, 64px) var(--caa-md) clamp(48px, 6vw, 88px) var(--caa-mi);
}

.caa-404__grilla {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--caa-l14);
}

.caa-404__acceso {
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
	border-bottom: 1px solid var(--caa-l14);
}

.caa-404__acceso > a {
	display: block;
	height: 100%;
	padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 30px) 0;
}

.caa-404__acceso-titulo {
	display: block;
	font-family: var(--caa-display);
	font-size: clamp(20px, 2.2vw, 27px);
	line-height: 1.16;
	color: var(--caa-navy);
}

.caa-404__acceso--oro .caa-404__acceso-titulo {
	color: var(--caa-gold-greige);
}

.caa-404__acceso-texto {
	display: block;
	margin-top: 10px;
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.68;
	color: var(--caa-ink);
}

.caa-404__acceso > a:hover .caa-404__acceso-titulo,
.caa-404__acceso > a:focus-visible .caa-404__acceso-titulo {
	color: var(--caa-gold-greige);
}

/* --- Resultados de búsqueda (search.php) ------------------------------------
   Misma cabecera y mismo buscador que la 404; esto es sólo la lista. */

.caa-busqueda__resultados {
	padding: clamp(8px, 1vw, 16px) var(--caa-md) clamp(48px, 6vw, 88px) var(--caa-mi);
}

.caa-busqueda__lista {
	max-width: 820px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--caa-l14);
}

.caa-busqueda__item {
	margin: 0;
	border-bottom: 1px solid var(--caa-l14);
}

.caa-busqueda__item > a {
	display: block;
	padding: clamp(18px, 2vw, 26px) 0;
}

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

.caa-busqueda__titulo {
	display: block;
	margin-top: 8px;
	font-family: var(--caa-display);
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.16;
	color: var(--caa-navy);
}

.caa-busqueda__extracto {
	display: block;
	margin-top: 8px;
	font-family: var(--caa-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--caa-ink);
}

.caa-busqueda__item > a:hover .caa-busqueda__titulo,
.caa-busqueda__item > a:focus-visible .caa-busqueda__titulo {
	color: var(--caa-gold-greige);
}

.caa-busqueda__paginas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: clamp(24px, 3vw, 36px);
	font-family: var(--caa-body);
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.caa-busqueda__paginas a,
.caa-busqueda__paginas span {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	color: var(--caa-navy);
}

.caa-busqueda__paginas .current {
	color: var(--caa-gold-text);
	border-bottom: 1px solid var(--caa-gold);
}


/* =============================================================================
   13 · TECLADO

   Dos cosas que Flatsome deja a medias y que sólo se notan navegando sin mouse.
============================================================================= */

/*
 * EL «SALTAR AL CONTENIDO» NO SE VEÍA.
 *
 * Flatsome imprime el enlace, que está bien, pero lo deja con la clase
 * `.screen-reader-text` y sin regla de `:focus`. Medido en el navegador: al
 * tabular desde el principio de la página el enlace recibe el foco y su caja
 * sigue midiendo 1×1 px, recortada por `clip-path: inset(50%)`.
 *
 * Es decir: existe para el lector de pantalla y no existe para quien navega
 * con el teclado a la vista, que es justamente para quien se inventó.
 *
 * Hay que anular las cinco propiedades que lo esconden. Con desarmar `clip`
 * no alcanza: `clip-path`, `width`, `height` y `overflow` siguen puestas.
 */
body.caa-maqueta .skip-link:focus {
	/*
	 * La posición se queda en `absolute`, que es la que pone Flatsome con
	 * `!important`. No se le pelea: el enlace es la primera parada del
	 * tabulador, y ahí la página está arriba de todo, así que `absolute` y
	 * `fixed` se ven igual. Un segundo `!important` en esta hoja costaría más
	 * de lo que resuelve.
	 */
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 14px 22px;
	clip: auto;
	clip-path: none;
	overflow: visible;
	background: var(--caa-navy);
	color: #F2F1ED;
	font-family: var(--caa-body);
	font-size: 14.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	outline: 2px solid var(--caa-gold-field);
	outline-offset: 2px;
}

/*
 * FOCO VISIBLE EN TODA LA NAVEGACIÓN.
 *
 * Flatsome pisa el anillo del navegador con `outline: none` en varios
 * componentes, y los que no pisa heredan el azul del sistema, que sobre el
 * navy del masthead casi no se distingue.
 *
 * Va con `:focus-visible` y no con `:focus`: así el anillo aparece al tabular
 * y no al hacer clic, que es lo que molesta y lo que lleva a la gente a
 * quitarlo.
 *
 * El dorado del campo tiene 3,6:1 contra el navy y 1,9:1 contra el fondo
 * claro; por eso lleva `outline-offset` y un segundo anillo oscuro con
 * `box-shadow`, que es lo que lo hace visible sobre los dos fondos.
 */
body.caa-maqueta a:focus-visible,
body.caa-maqueta button:focus-visible,
body.caa-maqueta input:focus-visible,
body.caa-maqueta select:focus-visible,
body.caa-maqueta textarea:focus-visible,
body.caa-maqueta summary:focus-visible,
body.caa-maqueta [tabindex]:focus-visible {
	outline: 2px solid var(--caa-gold-field);
	outline-offset: 3px;
	box-shadow: 0 0 0 1px rgba(31, 37, 49, .55);
	border-radius: 1px;
}

/* Dentro del masthead y del pie, el segundo anillo va claro: el fondo es navy. */
body.caa-maqueta .caa-sticky a:focus-visible,
body.caa-maqueta .caa-sticky button:focus-visible,
body.caa-maqueta .caa-pie a:focus-visible,
body.caa-maqueta .caa-menu a:focus-visible,
body.caa-maqueta .caa-menu button:focus-visible {
	box-shadow: 0 0 0 1px rgba(242, 241, 237, .65);
}

/*
 * El anillo no se dibuja recortado.
 *
 * Varias secciones llevan `overflow: clip` para que los autos no desborden la
 * página. Un elemento enfocado contra el borde de una de esas secciones se
 * queda con medio anillo. `outline-offset` positivo lo empeora, así que en los
 * contenedores recortados el anillo va por dentro.
 */
body.caa-maqueta .caa-transicion a:focus-visible,
body.caa-maqueta .caa-hero a:focus-visible,
body.caa-maqueta .caa-hub a:focus-visible {
	outline-offset: 1px;
}