/*!
 * Plantilla del sitio público de ACCART — 0.1.0
 * (C) 2026 ACCART · GPL-2.0-or-later
 *
 * Escrita a mano y sin compilar: no hay Sass ni PostCSS en este directorio a
 * propósito. `joomla/` no lo toca ni `pint` ni el `npm run build` del CRM, así
 * que una cadena de compilación aquí sería una que nadie ejecuta y un archivo
 * generado que alguien acabaría editando a mano.
 *
 * Orden: tokens · base · utilidades · cabecera · franjas · componente · pie.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Paleta institucional: azul profundo + verde salud. La del mockup era de
	   una ONG de caridad (coral cálido) y no es lo que es ACCART. */
	--accart-primary: #0b4f7a;
	--accart-primary-dark: #073751;
	--accart-primary-light: #1a6d9e;
	--accart-accent: #12a594;
	--accart-accent-dark: #0d7f72;
	--accart-warm: #f2a93b;

	--accart-ink: #12212b;
	--accart-ink-soft: #4a5c68;
	--accart-line: #dfe7ec;
	--accart-bg: #ffffff;
	--accart-bg-soft: #f4f8fa;
	--accart-bg-deep: var(--accart-primary-dark);

	--accart-danger: #c0392b;
	--accart-success: #12a594;

	--accart-radius: 12px;
	--accart-radius-lg: 20px;
	--accart-radius-pill: 999px;

	--accart-shadow: 0 1px 2px rgba(18, 33, 43, .06), 0 8px 24px rgba(18, 33, 43, .06);
	--accart-shadow-lg: 0 2px 4px rgba(18, 33, 43, .06), 0 18px 48px rgba(18, 33, 43, .12);

	--accart-container: 1200px;
	--accart-gutter: clamp(1rem, 4vw, 2rem);

	/* Ritmo vertical de las franjas. Una sola variable: si las franjas
	   respiran distinto entre sí, la portada se lee como páginas pegadas. */
	--accart-strip-y: clamp(3rem, 7vw, 5.5rem);

	--accart-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--accart-font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* El desplazamiento a un ancla tiene que dejar sitio para la cabecera fija,
	   o el destino queda debajo de ella. */
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body.site {
	margin: 0;
	/* Columna de altura mínima completa: es lo que hace que el pie caiga abajo
	   en una página corta (el `margin-top: auto` del `.footer` no puede empujar
	   nada en un flujo normal). Un error 404 es exactamente esa página corta. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--accart-font);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--accart-ink);
	background: var(--accart-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--accart-font-display);
	color: var(--accart-primary-dark);
	line-height: 1.2;
	margin: 0 0 .6em;
	font-weight: 700;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1rem; }

a {
	color: var(--accart-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover { color: var(--accart-accent-dark); }

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--accart-line);
	margin: 2rem 0;
}

/* El foco visible se define UNA vez para todo. Los navegadores lo traen, pero
   en cuanto alguien pone `outline: none` en un botón se pierde en silencio;
   tenerlo aquí hace que reaparezca al quitar esa línea. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--accart-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Utilidades
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--accart-container);
	margin-inline: auto;
	padding-inline: var(--accart-gutter);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--accart-primary-dark);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--accart-radius) 0;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

/* --- Botones -------------------------------------------------------------
   `.btn` existe también en Bootstrap, que Joomla carga en algunas vistas. Aquí
   se define con las mismas clases (`btn-primary`, `btn-secondary`) para que el
   marcado de `com_accart` —que las usa— salga bien sin tocar el componente. */

.btn,
.btn-primary,
.btn-secondary,
.btn--cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--accart-radius-pill);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:hover,
.btn--cta:hover {
	transform: translateY(-1px);
}

.btn-primary,
.btn--cta {
	background: var(--accart-primary);
	color: #fff;
}

.btn-primary:hover,
.btn--cta:hover {
	background: var(--accart-primary-dark);
	color: #fff;
	box-shadow: var(--accart-shadow);
}

.btn-secondary {
	background: transparent;
	color: var(--accart-primary);
	border-color: var(--accart-line);
}

.btn-secondary:hover {
	background: var(--accart-bg-soft);
	color: var(--accart-primary-dark);
}

.btn[disabled],
.btn-primary[disabled] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

/* ==========================================================================
   4. Barra superior y cabecera
   ========================================================================== */

.topbar {
	background: var(--accart-primary-dark);
	color: rgba(255, 255, 255, .82);
	font-size: .875rem;
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	min-height: 2.75rem;
}

.topbar__left,
.topbar__right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.topbar__item {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.topbar__item:hover {
	color: #fff;
}

.topbar__icon {
	color: var(--accart-warm);
}

.social {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social__link {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
}

.social__link:hover {
	background: var(--accart-accent);
	color: #fff;
}

/* Los glifos son máscaras SVG en línea: ni fuente de iconos ni peticiones
   extra, y heredan `currentColor` sin dos versiones por tema. */
.social__glyph {
	width: .95rem;
	height: .95rem;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.social__link--facebook .social__glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.6A22 22 0 0 0 14.3 4.5c-2.4 0-4 1.45-4 4.1v2.3H7.6V14h2.7v8Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.6A22 22 0 0 0 14.3 4.5c-2.4 0-4 1.45-4 4.1v2.3H7.6V14h2.7v8Z'/%3E%3C/svg%3E");
}

.social__link--instagram .social__glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.17.42.37 1.06.42 2.23.06 1.25.07 1.63.07 4.8s0 3.55-.07 4.8c-.05 1.17-.25 1.8-.42 2.23a3.8 3.8 0 0 1-.9 1.38 3.8 3.8 0 0 1-1.38.9c-.42.17-1.06.37-2.23.42-1.25.06-1.63.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.42a3.8 3.8 0 0 1-1.38-.9 3.8 3.8 0 0 1-.9-1.38c-.17-.42-.37-1.06-.42-2.23C2.21 15.55 2.2 15.17 2.2 12s0-3.55.07-4.8c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.17 1.06-.37 2.23-.42C8.45 2.21 8.83 2.2 12 2.2Zm0 1.8c-3.12 0-3.48 0-4.7.07-.9.04-1.4.2-1.73.32-.43.17-.74.37-1.06.7-.32.31-.52.62-.7 1.05-.12.33-.28.83-.32 1.73-.06 1.22-.07 1.58-.07 4.7s0 3.48.07 4.7c.4.9.2 1.4.32 1.73.18.43.38.74.7 1.06.32.32.63.52 1.06.7.33.12.83.28 1.73.32 1.22.06 1.58.07 4.7.07s3.48 0 4.7-.07c.9-.04 1.4-.2 1.73-.32.43-.18.74-.38 1.06-.7.32-.32.52-.63.7-1.06.12-.33.28-.83.32-1.73.06-1.22.07-1.58.07-4.7s0-3.48-.07-4.7c-.04-.9-.2-1.4-.32-1.73a2.9 2.9 0 0 0-.7-1.06 2.9 2.9 0 0 0-1.06-.7c-.33-.12-.83-.28-1.73-.32-1.22-.06-1.58-.07-4.7-.07Zm0 3.06a4.94 4.94 0 1 1 0 9.88 4.94 4.94 0 0 1 0-9.88Zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28Zm5.14-3.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.17.42.37 1.06.42 2.23.06 1.25.07 1.63.07 4.8s0 3.55-.07 4.8c-.05 1.17-.25 1.8-.42 2.23a3.8 3.8 0 0 1-.9 1.38 3.8 3.8 0 0 1-1.38.9c-.42.17-1.06.37-2.23.42-1.25.06-1.63.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.42a3.8 3.8 0 0 1-1.38-.9 3.8 3.8 0 0 1-.9-1.38c-.17-.42-.37-1.06-.42-2.23C2.21 15.55 2.2 15.17 2.2 12s0-3.55.07-4.8c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.17 1.06-.37 2.23-.42C8.45 2.21 8.83 2.2 12 2.2Zm0 1.8c-3.12 0-3.48 0-4.7.07-.9.04-1.4.2-1.73.32-.43.17-.74.37-1.06.7-.32.31-.52.62-.7 1.05-.12.33-.28.83-.32 1.73-.06 1.22-.07 1.58-.07 4.7s0 3.48.07 4.7c.4.9.2 1.4.32 1.73.18.43.38.74.7 1.06.32.32.63.52 1.06.7.33.12.83.28 1.73.32 1.22.06 1.58.07 4.7.07s3.48 0 4.7-.07c.9-.04 1.4-.2 1.73-.32.43-.18.74-.38 1.06-.7.32-.32.52-.63.7-1.06.12-.33.28-.83.32-1.73.06-1.22.07-1.58.07-4.7s0-3.48-.07-4.7c-.04-.9-.2-1.4-.32-1.73a2.9 2.9 0 0 0-.7-1.06 2.9 2.9 0 0 0-1.06-.7c-.33-.12-.83-.28-1.73-.32-1.22-.06-1.58-.07-4.7-.07Zm0 3.06a4.94 4.94 0 1 1 0 9.88 4.94 4.94 0 0 1 0-9.88Zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28Zm5.14-3.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z'/%3E%3C/svg%3E");
}

.social__link--linkedin .social__glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0ZM3.2 8.4h3.6V21H3.2Zm5.9 0h3.45v1.72h.05c.48-.9 1.66-1.86 3.42-1.86 3.66 0 4.33 2.35 4.33 5.4V21h-3.6v-6.05c0-1.44-.03-3.3-2.02-3.3-2.02 0-2.33 1.57-2.33 3.2V21H9.1Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0ZM3.2 8.4h3.6V21H3.2Zm5.9 0h3.45v1.72h.05c.48-.9 1.66-1.86 3.42-1.86 3.66 0 4.33 2.35 4.33 5.4V21h-3.6v-6.05c0-1.44-.03-3.3-2.02-3.3-2.02 0-2.33 1.57-2.33 3.2V21H9.1Z'/%3E%3C/svg%3E");
}

.social__link--youtube .social__glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.02V8.98L15.2 12Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.02V8.98L15.2 12Z'/%3E%3C/svg%3E");
}

.social__link--x .social__glyph {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.22-6.82-5.97 6.82H1.66l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.22-6.82-5.97 6.82H1.66l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/%3E%3C/svg%3E");
}

/* --- Cabecera ------------------------------------------------------------ */

.header {
	background: #fff;
	border-bottom: 1px solid var(--accart-line);
	z-index: 90;
}

.header--sticky {
	position: sticky;
	top: 0;
}

/* La sombra la enciende el guion al bajar (`is-stuck`). Puesta siempre, la
   cabecera flota desde el primer píxel y parece despegada de la barra
   superior. */
.header.is-stuck {
	box-shadow: var(--accart-shadow);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-height: 4.75rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: var(--accart-primary-dark);
	/* Encogible, no rígida: con `flex: 0 0 auto` un nombre largo empuja el botón
	   y la hamburguesa fuera de la pantalla en un móvil estrecho. `min-width: 0`
	   es lo que permite que el texto de dentro se recorte en vez de desbordar —
	   sin él, el mínimo automático de un elemento flexible es su contenido. */
	flex: 0 1 auto;
	min-width: 0;
}

.brand__logo {
	max-height: 3rem;
	width: auto;
}

/* --- El módulo de logotipo -----------------------------------------------
   Mismo dibujo que la marca de repliegue, para que cambiar de una a otra no se
   note. Las clases van aparte porque el marcado lo emite el módulo y no esta
   plantilla: si algún día se instala el módulo con otra plantilla, se lleva su
   estructura pero no estos estilos, y al revés. */
.brand--module {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}

.mod-accart-logo {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: var(--accart-primary-dark);
	min-width: 0;
}

/* El alto por omisión. El módulo lo pisa con una regla propia por id cuando se
   configura uno distinto; esto es lo que se ve si no se toca nada.

   `width: auto` junto al alto es lo que impide que se deforme: con los
   atributos `width`/`height` del archivo puestos en la etiqueta —que el módulo
   pone para reservar el hueco— el navegador respetaría los dos y aplastaría la
   imagen. */
.mod-accart-logo__image {
	height: 3rem;
	width: auto;
	max-width: 100%;
	display: block;
}

.mod-accart-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.mod-accart-logo__title {
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.mod-accart-logo__tagline {
	font-size: .78rem;
	color: var(--accart-ink-soft);
	font-weight: 500;
}

/* En el pie el logotipo va sobre fondo oscuro. */
.footer .mod-accart-logo,
.footer .mod-accart-logo__title {
	color: #fff;
}

.footer .mod-accart-logo__tagline {
	color: rgba(255, 255, 255, .7);
}

.brand__mark {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--accart-primary), var(--accart-accent));
	color: #fff;
	font-weight: 800;
	font-size: 1.4rem;
}

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.brand__name {
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.brand__tagline {
	font-size: .78rem;
	color: var(--accart-ink-soft);
	font-weight: 500;
}

.header__tools {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* Móvil estrecho: la cabecera lleva marca + botón + hamburguesa, y a 320 px no
   caben los tres a tamaño de escritorio. Se recorta lo prescindible —el
   descriptor— y se aprieta el botón, en vez de esconderlo: es la puerta al CRM
   y es justo desde el móvil desde donde más se usa. */
@media (max-width: 30rem) {
	.header__inner {
		gap: .5rem;
		min-height: 4rem;
	}

	.brand__tagline,
	.mod-accart-logo__tagline {
		display: none;
	}

	.brand__name,
	.mod-accart-logo__title {
		font-size: 1rem;
	}

	.brand__mark {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.15rem;
	}

	.btn--cta {
		padding: .5rem .85rem;
		font-size: .85rem;
	}
}

/* --- Menú principal ------------------------------------------------------
   Joomla emite `ul.mod-menu` con `li.item-N`, `.current`, `.deeper`, el botón
   `.mod-menu__toggle-sub` (solo en los ítems con hijos) y el submenú
   `.mod-menu__sub` — nombres estables de mod_menu, no de esta plantilla.

   🚨 Esa `<ul>` lleva TAMBIÉN la clase `nav` — la pone Joomla, no nosotros
   (`class="mod-menu mod-list nav …"`). El módulo se pinta DOS VECES —cabecera
   y panel móvil— así que estilar por `.nav` alcanzaba a las dos con la MISMA
   regla: la del panel móvil quedaba en `display: none` justo en el ancho en
   el que el panel existe para verse, y ningún ancho lo corregía. Por eso el
   gancho es el ID del `<nav>` de escritorio (`#nav-principal`), nunca la
   clase `nav`; lo compartido entre las dos instancias cuelga de `.mod-menu`. */

/* `flex: 1 1 auto` para que ocupe el hueco entre la marca y `.header__tools`:
   sin crecer, `justify-content: flex-end` no tendría espacio de sobra donde
   empujar los ítems y el menú quedaría pegado a la marca igual que si fuera
   `flex-start`. */
#nav-principal {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}

.mod-menu,
.mod-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mod-menu a,
.mod-menu .separator {
	display: block;
	padding: .55rem .85rem;
	color: var(--accart-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	border-radius: var(--accart-radius-pill);
}

.mod-menu a:hover {
	background: var(--accart-bg-soft);
	color: var(--accart-primary);
}

.mod-menu .current > a,
.mod-menu .active > a {
	color: var(--accart-primary);
	background: rgba(11, 79, 122, .08);
}

/* El botón que Joomla añade SOLO a los ítems con hijos. Sin estilo propio se
   ve distinto de sus hermanos sin hijos — es la falta de alineación entre
   opciones que se pidió cerrar. El icono no usa la fuente de Joomla (no se
   carga a propósito, ver joomla.asset.json): es una máscara SVG en línea,
   igual que los iconos sociales, para heredar `currentColor` sin una
   dependencia más. */
.mod-menu__toggle-sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
}

.mod-menu__toggle-sub .icon-chevron-down {
	width: .7rem;
	height: .7rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 8.6a1 1 0 0 1 1.4 0L12 14.6l6-6a1 1 0 1 1 1.4 1.4l-6.7 6.7a1 1 0 0 1-1.4 0L4.6 10a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 8.6a1 1 0 0 1 1.4 0L12 14.6l6-6a1 1 0 1 1 1.4 1.4l-6.7 6.7a1 1 0 0 1-1.4 0L4.6 10a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .15s ease;
}

.mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
	transform: rotate(180deg);
}

/* --- Escritorio: fila horizontal pegada a la derecha, desplegable al hover.
   `justify-content: flex-end` es explícito y no un valor por omisión que
   otro cambio en `.header__inner` pudiera desplazar sin querer. */
#nav-principal .mod-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .25rem;
}

#nav-principal .mod-menu > li {
	position: relative;
}

#nav-principal .mod-menu > li > a,
#nav-principal .mod-menu > li > .separator {
	white-space: nowrap;
}

/* El botón de alternar sobra en escritorio: el desplegable ya se abre con
   `:hover`/`:focus-within`. Dejarlo visible sería el propio defecto que se
   pidió cerrar — un elemento de más ancho solo en los ítems con hijos. */
#nav-principal .mod-menu__toggle-sub {
	display: none;
}

/* `:focus-within` además de `:hover` para que el desplegable se abra también
   con el teclado; solo con `:hover` no existe sin ratón. */
/* `inset-inline-end`, no `-start`: con el menú pegado al borde derecho, un
   desplegable que abriera hacia la derecha se saldría de la cabecera en el
   último ítem. Abriendo hacia la izquierda se queda siempre dentro. */
#nav-principal .mod-menu__sub {
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	min-width: 14rem;
	background: #fff;
	border: 1px solid var(--accart-line);
	border-radius: var(--accart-radius);
	box-shadow: var(--accart-shadow-lg);
	padding: .4rem;
	display: none;
	z-index: 95;
}

#nav-principal li:hover > .mod-menu__sub,
#nav-principal li:focus-within > .mod-menu__sub {
	display: block;
}

#nav-principal .mod-menu__sub a {
	border-radius: 8px;
	white-space: normal;
}

@media (min-width: 62rem) {
	#nav-principal {
		display: block;
	}
}

/* --- Panel móvil: lista vertical, submenús por toque en `.mod-menu__toggle-sub`.
   Aquí el botón SÍ hace falta —no hay hover en pantalla táctil—, así que se
   deja visible y es `menu.min.js` (de Joomla, cargado por el preset del
   módulo) quien alterna `aria-hidden`/`aria-expanded` al tocarlo. El ítem es
   una fila para que la etiqueta ocupe siempre el mismo borde izquierdo, con o
   sin botón al lado: eso es lo que mantiene alineadas las dos clases de ítem. */
.offcanvas__panel .mod-menu li {
	display: flex;
	align-items: center;
}

.offcanvas__panel .mod-menu li > a,
.offcanvas__panel .mod-menu li > .separator {
	flex: 1;
	min-width: 0;
}

.offcanvas__panel .mod-menu__sub {
	display: none;
	padding-inline-start: 1rem;
}

.offcanvas__panel .mod-menu__sub[aria-hidden="false"] {
	display: block;
}

/* --- Botón y panel móvil ------------------------------------------------- */

.burger {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--accart-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.burger__bars,
.burger__bars::before,
.burger__bars::after {
	display: block;
	width: 1.15rem;
	height: 2px;
	background: var(--accart-ink);
	border-radius: 2px;
}

.burger__bars {
	position: relative;
}

.burger__bars::before,
.burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.burger__bars::before { top: -6px; }
.burger__bars::after  { top: 6px; }

/* 🚨 Va DESPUÉS de `.burger { display: grid; … }` a propósito: con la misma
   especificidad (0,1,0) gana la regla que aparece más abajo en el archivo —
   si esta fuera antes, `display: grid` la pisaría en cualquier ancho y el
   botón nunca desaparecería en escritorio, con la media query «en verde» y
   sin ningún error. Es exactamente lo que pasaba: la regla existía, solo que
   en el orden equivocado. */
@media (min-width: 62rem) {
	.burger {
		display: none;
	}
}

.offcanvas {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(7, 55, 81, .5);
}

.offcanvas[hidden] {
	display: none;
}

.offcanvas__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(22rem, 88vw);
	background: #fff;
	padding: 1.5rem;
	overflow-y: auto;
	box-shadow: var(--accart-shadow-lg);
}

.offcanvas__close {
	position: absolute;
	top: .75rem;
	inset-inline-end: .75rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	background: transparent;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--accart-ink-soft);
}

.offcanvas__panel ul {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.offcanvas__panel li > ul {
	margin: 0;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--accart-line);
}

.offcanvas__panel a {
	display: block;
	padding: .7rem .25rem;
	color: var(--accart-ink);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--accart-line);
}

.offcanvas__panel .current > a {
	color: var(--accart-primary);
}

/* ==========================================================================
   5. Héroe
   ========================================================================== */

.hero {
	position: relative;
	background: linear-gradient(135deg, var(--accart-primary-dark), var(--accart-primary) 55%, var(--accart-accent-dark));
	color: #fff;
	overflow: hidden;
}

/* La curva que separa el héroe de lo que viene debajo. Va en un
   pseudoelemento y no en una imagen: cambia de color con el token y no pesa. */
.hero::after {
	content: "";
	position: absolute;
	inset-inline: -5%;
	bottom: -1px;
	height: clamp(2rem, 5vw, 4.5rem);
	background: var(--accart-bg);
	border-start-start-radius: 50% 100%;
	border-start-end-radius: 50% 100%;
}

.hero > * {
	position: relative;
	z-index: 1;
}

.hero .module,
.hero .mod-custom,
.hero .custom {
	max-width: var(--accart-container);
	margin-inline: auto;
	padding: clamp(3.5rem, 9vw, 7rem) var(--accart-gutter) clamp(5rem, 10vw, 8rem);
}

.hero h1,
.hero h2,
.hero h3 {
	color: #fff;
	max-width: 20ch;
}

.hero p {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	max-width: 52ch;
}

.hero .btn,
.hero .btn-primary {
	background: var(--accart-warm);
	color: var(--accart-ink);
	border-color: transparent;
}

.hero .btn:hover,
.hero .btn-primary:hover {
	background: #fff;
	color: var(--accart-primary-dark);
}

/* ==========================================================================
   6. Franjas de la portada
   ========================================================================== */

.below-top {
	padding: .75rem 0;
}

.strip {
	padding-block: var(--accart-strip-y);
}

.strip__title {
	text-align: center;
	margin-bottom: 2.5rem;
}

/* Alterna el fondo por posición y no con `:nth-of-type`: con `nth` el color de
   una franja depende de cuántas haya antes, así que asignar un módulo nuevo
   invierte los fondos de toda la mitad de abajo sin que nadie lo pida. */
.strip--intro,
.strip--testimonials,
.strip--news {
	background: var(--accart-bg-soft);
}

.strip--stats,
.strip--highlight {
	background: var(--accart-primary-dark);
	color: rgba(255, 255, 255, .88);
}

.strip--stats h2,
.strip--stats h3,
.strip--highlight h2,
.strip--highlight h3,
.strip--stats .strip__title,
.strip--highlight .strip__title {
	color: #fff;
}

.strip--partners {
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--accart-line);
}

/* --- Rejilla genérica de módulos dentro de una franja --------------------
   Varios módulos en la misma posición se reparten en columnas. Uno solo ocupa
   el ancho: `auto-fit` con `minmax` lo resuelve sin una clase por caso. */
.strip .container {
	--accart-cols: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.strip--actions .container,
.strip--events .container,
.strip--news .container,
.strip--gallery .container,
.strip--testimonials .container {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: var(--accart-cols);
}

/* El título de la franja atraviesa la rejilla; sin esto se metería en la
   primera columna. */
.strip .strip__title {
	grid-column: 1 / -1;
}

/* --- Tarjetas ------------------------------------------------------------ */

.module {
	min-width: 0;
}

.strip--actions .module,
.strip--events .module,
.strip--news .module,
.strip--testimonials .module {
	background: #fff;
	border: 1px solid var(--accart-line);
	border-radius: var(--accart-radius-lg);
	padding: 1.75rem;
	box-shadow: var(--accart-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.strip--actions .module:hover,
.strip--events .module:hover,
.strip--news .module:hover {
	transform: translateY(-4px);
	box-shadow: var(--accart-shadow-lg);
}

.module__title {
	margin-top: 0;
	font-size: 1.2rem;
}

.strip--actions .module__title::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(11, 79, 122, .12), rgba(18, 165, 148, .18));
	border: 1px solid rgba(11, 79, 122, .12);
}

/* --- Cifras -------------------------------------------------------------- */

.strip--stats .container {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	text-align: center;
}

.strip--stats .module {
	border: 0;
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* El número lo escribe el módulo con esta clase; el contador del guion solo lo
   anima desde cero. Sin guion, el número está escrito y se ve igual. */
.stat__value {
	display: block;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 800;
	line-height: 1;
	color: var(--accart-warm);
	font-variant-numeric: tabular-nums;
}

.stat__label {
	display: block;
	margin-top: .5rem;
	font-size: .95rem;
	color: rgba(255, 255, 255, .78);
}

/* --- Galería ------------------------------------------------------------- */

.strip--gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--accart-radius);
	display: block;
}

/* --- Testimonios: carrusel sin librería ---------------------------------- */

.strip--testimonials .container {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 1rem;
}

.strip--testimonials .module {
	flex: 0 0 min(24rem, 82vw);
	scroll-snap-align: start;
}

/* --- Aliados ------------------------------------------------------------- */

.strip--partners .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}

.strip--partners img {
	max-height: 2.75rem;
	width: auto;
	filter: grayscale(1);
	opacity: .6;
	transition: filter .2s ease, opacity .2s ease;
}

.strip--partners img:hover {
	filter: none;
	opacity: 1;
}

/* ==========================================================================
   7. Zona principal (páginas interiores)
   ========================================================================== */

.main {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.main__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	body.has-sidebar .main__grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

	body.has-sidebar .sidebar--left {
		order: -1;
	}
}

.content {
	min-width: 0;
}

.breadcrumbs {
	margin-bottom: 1.5rem;
	font-size: .875rem;
	color: var(--accart-ink-soft);
}

.breadcrumbs ol,
.breadcrumbs ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.sidebar .module {
	background: var(--accart-bg-soft);
	border-radius: var(--accart-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

/* --- Formularios de los módulos de Joomla -------------------------------
   El módulo de acceso, el de búsqueda y el de boletín traen su propio marcado y
   NO usan las clases de `com_accart`. Sin esto sus campos salen al tamaño por
   omisión del navegador —unos 90 px— dentro de una tarjeta ancha, que es como
   se veía el «Login Form» del pie.

   Se excluyen los botones y las casillas: darles `width: 100%` convierte
   «Recuérdeme» en una casilla del ancho de la tarjeta. */
.module input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
.module select,
.module textarea {
	width: 100%;
	padding: .6rem .8rem;
	border: 1px solid var(--accart-line);
	border-radius: 10px;
	font: inherit;
	color: inherit;
	background: #fff;
	margin-bottom: .75rem;
}

.module label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .3rem;
}

/* La casilla y su texto, en línea: `display: block` en la etiqueta los partiría
   en dos renglones. */
.module input[type="checkbox"] + label,
.module label > input[type="checkbox"] {
	display: inline-block;
	font-weight: 500;
	margin-inline-end: .4rem;
}

.module button,
.module input[type="submit"],
.module .btn {
	width: auto;
	max-width: 100%;
}

/* En el pie los campos van sobre fondo oscuro y el borde claro no se ve. */
.footer .module input,
.footer .module select,
.footer .module textarea {
	border-color: rgba(255, 255, 255, .25);
}

/* --- Contenido que no cabe -----------------------------------------------
   Aquí sí se aplana la tabla en móvil, y es una decisión distinta de la de la
   tabla de tarifas de arriba, tomada por lo que se sabe de cada una:

   - la de tarifas la escribimos nosotros y sabemos que son cuatro columnas
     cortas, así que se deja fluir y conserva su semántica;
   - éstas las escribe quien redacta en el editor, pueden tener quince columnas
     y no hay forma de saberlo desde el CSS.

   Para las segundas, el coste de aplanar (un lector de pantalla deja de
   relacionar celda y encabezado) pesa menos que el de no hacerlo (una barra de
   desplazamiento en TODA la página, que es el síntoma clásico de «no es
   responsive» y lo provoca un solo elemento).

   Lo correcto de verdad sería envolverlas en un contenedor con `overflow`, que
   conserva la semántica — pero eso exige marcado que el editor no genera. */
.content table,
.module table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

@media (min-width: 48rem) {
	.content table,
	.module table {
		display: table;
	}
}

/* La de tarifas se excluye: tiene su propia regla y no necesita aplanarse. */
.content table.com-accart-event__options {
	display: table;
}

.content pre,
.content code {
	overflow-x: auto;
	max-width: 100%;
}

.content img,
.content iframe,
.content video {
	max-width: 100%;
}

.content iframe {
	/* Un iframe sin alto declarado (un vídeo incrustado) se queda en 150 px por
	   omisión; con proporción se comporta como la imagen que sustituye. */
	aspect-ratio: 16 / 9;
	height: auto;
	width: 100%;
	border: 0;
}

/* Mensajes del sistema de Joomla */
.alert {
	border: 1px solid var(--accart-line);
	border-inline-start: 4px solid var(--accart-primary);
	background: var(--accart-bg-soft);
	border-radius: var(--accart-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.alert-danger,
.alert-error {
	border-inline-start-color: var(--accart-danger);
}

.alert-success {
	border-inline-start-color: var(--accart-success);
}

/* ==========================================================================
   8. `com_accart` — la página del Evento, el formulario y el retorno
   ==========================================================================
   El componente emite estas clases y NO trae CSS propio: hasta ahora sus
   páginas se veían con lo que la plantilla de turno diera por casualidad. Esto
   es la mitad del trabajo de esta plantilla, y no un añadido.
   ========================================================================== */

.com-accart-event,
.com-accart-form,
.com-accart-return {
	max-width: 52rem;
	margin-inline: auto;
}

.com-accart-event__banner {
	width: 100%;
	max-height: 22rem;
	object-fit: cover;
	border-radius: var(--accart-radius-lg);
	margin-bottom: 2rem;
	display: block;
}

.com-accart-event__title {
	margin-bottom: 1.25rem;
}

.com-accart-event__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem 1.25rem;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--accart-bg-soft);
	border-radius: var(--accart-radius);
	font-size: .95rem;
}

.com-accart-event__meta dt {
	font-weight: 700;
	color: var(--accart-primary-dark);
}

.com-accart-event__meta dd {
	margin: 0;
}

.com-accart-event__description {
	margin-bottom: 2.5rem;
	font-size: 1.05rem;
}

.com-accart-event__options-title {
	margin-bottom: 1rem;
}

/* La tabla de tarifas. En móvil NO se aplana con `display: block` ni se le pone
   `white-space: nowrap` para que desborde con scroll propio: aplanar una tabla
   rompe la relación entre celda y encabezado para un lector de pantalla, y el
   `nowrap` es justo lo que la hace más ancha que la pantalla.

   Aquí no hace falta ninguna de las dos cosas: son cuatro columnas cortas
   —modalidad, tipo de asistente, valor, botón— que caben en 320 px dejándolas
   fluir. Sale más alta y se lee entera. Es la ventaja de estilar una tabla
   CONOCIDA en vez de una cualquiera. */
.com-accart-event__options {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

@media (max-width: 30rem) {
	.com-accart-event__options th,
	.com-accart-event__options td {
		padding: .7rem .5rem;
		font-size: .9rem;
	}

	/* La celda del importe no se parte: «COP 300.000,00» en dos renglones se
	   lee como dos cifras. */
	.com-accart-event__options td:nth-child(3) {
		white-space: nowrap;
	}

	.com-accart-event__options .btn {
		padding: .5rem .8rem;
		font-size: .85rem;
		width: 100%;
	}
}

.com-accart-event__options th,
.com-accart-event__options td {
	padding: .9rem 1rem;
	text-align: start;
	border-bottom: 1px solid var(--accart-line);
	vertical-align: middle;
}

.com-accart-event__options thead th {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--accart-ink-soft);
	border-bottom-width: 2px;
}

.com-accart-event__options tbody tr:hover {
	background: var(--accart-bg-soft);
}

.com-accart-event__sold-out {
	display: inline-block;
	margin-inline-start: .5rem;
	padding: .15rem .6rem;
	border-radius: var(--accart-radius-pill);
	background: rgba(192, 57, 43, .1);
	color: var(--accart-danger);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.com-accart-event__no-options,
.com-accart-event__unavailable,
.com-accart-event__member-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--accart-radius);
	background: var(--accart-bg-soft);
	border-inline-start: 4px solid var(--accart-warm);
}

.com-accart-event__unavailable p:last-child,
.com-accart-event__member-notice p:last-child {
	margin-bottom: 0;
}

.com-accart-event__member-link {
	font-weight: 600;
}

/* El modal de la tarifa de socio. `<dialog>` nativo: el navegador pone el
   fondo, el foco atrapado y el cierre con Esc. */
.com-accart-event__member-modal {
	max-width: 30rem;
	border: 0;
	border-radius: var(--accart-radius-lg);
	padding: 2rem;
	box-shadow: var(--accart-shadow-lg);
	color: var(--accart-ink);
}

.com-accart-event__member-modal::backdrop {
	background: rgba(7, 55, 81, .55);
}

.com-accart-event__member-modal-actions {
	display: flex;
	gap: .75rem;
	justify-content: flex-end;
	margin: 1.5rem 0 0;
	flex-wrap: wrap;
}

/* --- El formulario de inscripción ---------------------------------------- */

.com-accart-form {
	background: #fff;
	border: 1px solid var(--accart-line);
	border-radius: var(--accart-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--accart-shadow);
}

.com-accart-form__selection {
	padding: 1rem 1.25rem;
	margin-bottom: 2rem;
	border-radius: var(--accart-radius);
	background: rgba(18, 165, 148, .08);
	border-inline-start: 4px solid var(--accart-accent);
}

.com-accart-form__selection-text {
	margin: 0;
	font-weight: 600;
}

.com-accart-form__field {
	margin-bottom: 1.25rem;
}

.com-accart-form__field label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
	font-size: .92rem;
	color: var(--accart-primary-dark);
}

.com-accart-form__field input:not([type="checkbox"]):not([type="radio"]),
.com-accart-form__field select,
.com-accart-form__field textarea,
.offlinepage__form input {
	width: 100%;
	padding: .7rem .9rem;
	border: 1px solid var(--accart-line);
	border-radius: 10px;
	font: inherit;
	color: inherit;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.com-accart-form__field input:focus,
.com-accart-form__field select:focus,
.com-accart-form__field textarea:focus {
	border-color: var(--accart-primary);
	box-shadow: 0 0 0 3px rgba(11, 79, 122, .12);
	outline: none;
}

/* 🚨 `:invalid` a secas pinta de rojo un campo obligatorio VACÍO nada más
   cargar la página, antes de que nadie escriba. `:user-invalid` solo lo hace
   cuando la persona ya interactuó, que es cuando el aviso sirve. */
.com-accart-form__field input:user-invalid,
.com-accart-form__field select:user-invalid {
	border-color: var(--accart-danger);
}

.com-accart-form__consent {
	padding: 1.25rem;
	border-radius: var(--accart-radius);
	background: var(--accart-bg-soft);
}

.com-accart-form__consent label {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	font-weight: 500;
	color: inherit;
}

.com-accart-form__consent input[type="checkbox"] {
	margin-top: .3rem;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--accart-primary);
}

.com-accart-form__consent-text > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--accart-primary);
	margin-top: .75rem;
}

.com-accart-form__consent-body {
	margin-top: .75rem;
	max-height: 16rem;
	overflow-y: auto;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--accart-line);
	border-radius: 10px;
	font-size: .92rem;
}

.com-accart-form__captcha {
	margin-block: 1.5rem;
}

.com-accart-form__actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--accart-line);
}

/* --- Cómo quiere pagar: tarjetas, no radios sueltos ----------------------
   El componente emite este marcado desde la 6.20 y la plantilla no lo vestía:
   salía como el campo número trece de un formulario largo, con el mismo aspecto
   que «teléfono». Y decide si se puede pagar con tarjeta o hay que ir al banco.

   🚨 **Sin una línea de JavaScript**, y es un requisito, no una preferencia:
   elegir es OBLIGATORIO para pagar, y `member-modal.js` ya demostró que un
   guion puede no llegar (404 en staging). Todo lo de abajo es CSS sobre los
   `<input type="radio">` que ya están en el marcado: si algo de esto no se
   aplica, quedan dos opciones de formulario normales y corrientes que siguen
   funcionando. */

.com-accart-form__gateways {
	/* El `fieldset` trae borde y relleno propios del navegador; estorban cuando
	   lo de dentro ya son tarjetas con su propio borde. */
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.com-accart-form__gateways > legend {
	/* `legend` se posiciona solo dentro del borde del fieldset; sin borde, se
	   comporta como un título normal. Se le da el peso de una etiqueta de campo
	   porque eso es lo que es. */
	padding: 0;
	margin-bottom: .75rem;
	font-weight: 600;
	font-size: .92rem;
	color: var(--accart-primary-dark);
}

/* Dos tarjetas lado a lado cuando caben, apiladas cuando no. `auto-fit` y no un
   `repeat(2, …)`: el día que haya tres candidatas, esto ya funciona. */
.com-accart-form__gateways {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.com-accart-form__gateways > legend {
	grid-column: 1 / -1;
}

.com-accart-form__gateway {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;
	align-items: start;
	padding: 1rem 1.1rem;
	border: 1px solid var(--accart-line);
	border-radius: var(--accart-radius);
	background: #fff;
	cursor: pointer;
	/* Toda la tarjeta es la etiqueta del radio, así que el área de pulsación es
	   la tarjeta entera y no el circulito. En un móvil eso es la diferencia
	   entre acertar y no. */
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.com-accart-form__gateway:hover {
	border-color: var(--accart-primary-light);
	background: var(--accart-bg-soft);
}

.com-accart-form__gateway input[type="radio"] {
	margin: .15rem 0 0;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--accart-primary);
	flex: 0 0 auto;
}

.com-accart-form__gateway-serves {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--accart-ink);
	/* La primera oración es la que distingue una opción de la otra; el resto
	   explica. Sin marcado propio para separarlas no se puede hacer más, y por
	   eso la historia propone que el contrato mande título y explicación
	   aparte. */
}

/* La elegida, marcada de verdad. `:has()` no está en todos los navegadores
   viejos — y cuando falta no se pierde nada importante: el propio radio sigue
   mostrando cuál está seleccionada, que es la información. Esto la refuerza. */
.com-accart-form__gateway:has(input:checked) {
	border-color: var(--accart-primary);
	background: rgba(11, 79, 122, .04);
	box-shadow: inset 0 0 0 1px var(--accart-primary);
}

/* El foco del teclado va en la TARJETA, no en el circulito: quien navega con
   tabulador tiene que ver qué opción está tocando, no un punto de 16 píxeles.
   Y el radio conserva el suyo por dentro para quien lo necesite. */
.com-accart-form__gateway:focus-within {
	outline: 3px solid var(--accart-accent);
	outline-offset: 2px;
}

/* --- La página de retorno de la pasarela --------------------------------- */

.com-accart-return {
	text-align: center;
	padding-block: clamp(2.5rem, 7vw, 5rem);
}

.com-accart-return__title {
	margin-bottom: 1rem;
}

.com-accart-return__message {
	font-size: 1.1rem;
	color: var(--accart-ink-soft);
	max-width: 46ch;
	margin-inline: auto;
}

.com-accart-return__retry {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--accart-ink-soft);
}

.com-accart-return__actions {
	margin-top: 2rem;
}

/* ==========================================================================
   9. Error, fuera de línea y pie
   ========================================================================== */

.errorpage,
.offlinepage {
	max-width: 40rem;
	margin-inline: auto;
	padding-block: clamp(3rem, 10vw, 7rem);
	text-align: center;
}

.errorpage__code {
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 800;
	line-height: 1;
	margin: 0;
	color: var(--accart-line);
}

.errorpage__lead {
	color: var(--accart-ink-soft);
	font-size: 1.1rem;
}

.errorpage__detail {
	text-align: start;
	overflow-x: auto;
	padding: 1rem;
	background: var(--accart-bg-soft);
	border-radius: var(--accart-radius);
	font-size: .85rem;
}

.offlinepage__form {
	max-width: 22rem;
	margin-inline: auto;
	text-align: start;
}

.footer {
	background: var(--accart-bg-deep);
	color: rgba(255, 255, 255, .75);
	margin-top: auto;
}

.footer a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}

.footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.footer__col--about {
	max-width: 26rem;
}

.brand__name--footer {
	display: block;
	color: #fff;
	font-size: 1.35rem;
	margin-bottom: 1rem;
}

.footer__address {
	font-style: normal;
	margin-bottom: 1rem;
}

.footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer .module__title {
	color: #fff;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 1.25rem;
}

.footer .module ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

.footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .875rem;
}

.footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
}

.footer__copyright {
	margin: 0;
}

/* --- Volver arriba ------------------------------------------------------- */

.to-top {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 80;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background: var(--accart-primary);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--accart-shadow-lg);
}

.to-top[hidden] {
	display: none;
}

.to-top:hover {
	background: var(--accart-primary-dark);
	color: #fff;
}

/* ==========================================================================
   10. Impresión
   ========================================================================== */

@media print {
	.topbar,
	.header,
	.offcanvas,
	.footer,
	.to-top,
	.strip--partners,
	.breadcrumbs {
		display: none !important;
	}

	body.site {
		color: #000;
	}

	.com-accart-form,
	.com-accart-event__meta {
		box-shadow: none;
		border: 1px solid #999;
		background: transparent;
	}
}