/*!
 * 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");
}

/* --- 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;
	min-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 ------------------------------------------------------
   Estiliza la salida de `mod_menu` sin override de PHP: Joomla emite
   `ul.mod-menu` con `li.item-N`, `.current` y `.deeper`, y esos nombres son
   estables. Un override sería otro archivo que mantener para el mismo dibujo. */

.nav {
	display: none;
}

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

.nav > ul {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.nav a,
.nav .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);
	white-space: nowrap;
}

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

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

/* Submenús. `:focus-within` además de `:hover` para que se abran con el
   teclado; solo con `:hover` el menú desplegable no existe sin ratón. */
.nav li {
	position: relative;
}

.nav .deeper > ul,
.nav li > ul {
	position: absolute;
	top: 100%;
	inset-inline-start: 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 li:hover > ul,
.nav li:focus-within > ul {
	display: block;
}

.nav li > ul a {
	border-radius: 8px;
	white-space: normal;
}

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

	.burger {
		display: none;
	}
}

/* --- 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; }

.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
   ========================================================================== */

.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);
}

/* --- 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;
	}
}