/*
 * Asoc · sitio (portada y /sumate/)
 *
 * Se carga después de probador.css, que trae los tokens, la base, los
 * botones, las secciones y el mosaico. Acá va solo lo propio del sitio:
 * enlaces con forma de botón, contador, propósitos, pendientes, modal del
 * flyer, preguntas frecuentes, el formulario de Fluent Forms y marca, meta
 * de socios/as, acción y guía.
 */

/* 1 · Botones que son enlaces */
.asoc-sitio a.asoc-boton {
	text-decoration: none;
	text-align: center;
}

.asoc-sitio a:not(.asoc-boton) {
	color: var(--asoc-color-primary);
}

.asoc-etiqueta a {
	color: inherit;
	text-decoration: none;
}

/* 2 · Contador de pre-asociaciones */
.asoc-contador {
	margin-top: 1.25rem;
	padding: 1rem 1.125rem;
	border-radius: var(--asoc-radio-tarjeta);
	background: var(--asoc-color-surface);
	box-shadow: var(--asoc-sombra);
}

.asoc-contador__texto {
	margin: 0 0 0.625rem;
	font-family: var(--asoc-font-head);
	font-size: 1.1875rem;
	line-height: 1.3;
}

.asoc-contador__texto strong {
	color: var(--asoc-color-secondary);
	font-size: 1.5rem;
}

.asoc-contador__barra {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--asoc-color-ink) 10%, transparent);
}

.asoc-contador__barra span {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: inherit;
	background: var(--asoc-color-primary);
}

/* 3 · Propósitos */
.asoc-propositos {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asoc-propositos li {
	position: relative;
	padding-left: 1.5rem;
}

/* Viñetas con las figuras del mosaico, en sus colores. */
.asoc-propositos li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	background: var(--asoc-mosaico-violeta);
}

.asoc-propositos li:nth-child(2)::before { border-radius: 3px; background: var(--asoc-mosaico-naranja); }
.asoc-propositos li:nth-child(3)::before { border-radius: 2px; background: var(--asoc-mosaico-amarillo); transform: rotate(45deg) scale(0.9); }
.asoc-propositos li:nth-child(4)::before { background: var(--asoc-mosaico-azul); }
.asoc-propositos li:nth-child(5)::before { border-radius: 3px; background: var(--asoc-mosaico-agua); }

/* 4 · Pendientes de la Comisión Promotora */
.asoc-pendiente {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 2px dashed color-mix(in srgb, var(--asoc-color-secondary) 55%, transparent);
	border-radius: 10px;
	color: var(--asoc-color-ink-soft);
	font-style: italic;
}

/* 4.b · Cuota, visible antes del formulario */
.asoc-cuota {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--asoc-color-primary);
	border-radius: 0 10px 10px 0;
	background: var(--asoc-color-surface);
}

/* 5 · Modal del flyer */
.asoc-modal {
	width: min(calc(100vw - 2rem), 480px);
	max-height: calc(100dvh - 2rem);
	padding: 0.875rem;
	border: 3px solid var(--asoc-color-ink);
	border-radius: 24px;
	background: var(--asoc-color-surface);
	color: var(--asoc-color-ink);
	box-shadow: 4px 5px 0 color-mix(in srgb, var(--asoc-color-ink) 25%, transparent);
}

.asoc-modal::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.asoc-modal[open] {
	animation: asoc-globo-entra 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.asoc-modal__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.625rem;
}

.asoc-modal__cabecera h2 {
	margin: 0;
	font-size: 1.125rem;
}

.asoc-modal__flyer {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* 6 · Preguntas frecuentes */
.asoc-faq details {
	border-top: 1px solid color-mix(in srgb, var(--asoc-color-ink) 14%, transparent);
	padding: 0.75rem 0;
}

.asoc-faq details:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--asoc-color-ink) 14%, transparent);
}

.asoc-faq summary {
	font-family: var(--asoc-font-head);
	font-weight: 600;
	cursor: pointer;
}

.asoc-faq summary + .asoc-pendiente {
	margin-top: 0.625rem;
}

/* 7 · Formulario de Fluent Forms, vestido con los tokens */
.asoc-formulario .ff-el-group {
	margin-bottom: 1rem;
}

.asoc-formulario label {
	font-weight: 600;
}

.asoc-formulario input[type="text"],
.asoc-formulario input[type="email"],
.asoc-formulario input[type="tel"],
.asoc-formulario input[type="number"],
.asoc-formulario input[type="date"],
.asoc-formulario select,
.asoc-formulario textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.625rem 0.75rem;
	border: 2px solid color-mix(in srgb, var(--asoc-color-ink) 22%, transparent);
	border-radius: var(--asoc-radio-boton);
	background: var(--asoc-color-surface);
	color: var(--asoc-color-ink);
	font: 400 1rem/1.4 var(--asoc-font-body);
}

.asoc-formulario input:focus,
.asoc-formulario select:focus,
.asoc-formulario textarea:focus {
	border-color: var(--asoc-color-primary);
	outline: none;
}

.asoc-formulario button[type="submit"],
.asoc-formulario .ff-btn-submit {
	width: 100%;
	min-height: 48px;
	border: 2px solid var(--asoc-color-primary);
	border-radius: var(--asoc-radio-boton);
	background: var(--asoc-color-primary);
	color: var(--asoc-color-on-primary);
	font: 700 1rem/1.2 var(--asoc-font-body);
	cursor: pointer;
}

.asoc-formulario .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	border-radius: var(--asoc-radio-boton);
	background-color: var(--asoc-color-primary) !important;
	border-color: var(--asoc-color-primary) !important;
	color: var(--asoc-color-on-primary) !important;
}

.asoc-formulario .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: color-mix(in srgb, var(--asoc-color-primary) 85%, #000) !important;
}

/* El consentimiento (checkbox) va chico y sin negrita: es letra legal, no un título. */
.asoc-formulario label:has(input[type="checkbox"]),
.asoc-formulario label:has(input[type="checkbox"]) *,
.asoc-formulario .ff-el-form-check-label,
.asoc-formulario .ff-el-form-check-label *,
.asoc-formulario .ff_t_c,
.asoc-formulario .ff_t_c * {
	color: var(--asoc-color-ink-soft);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
}

.asoc-formulario input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0.5rem 0 0;
	vertical-align: top;
	accent-color: var(--asoc-color-primary);
}

.asoc-formulario .error,
.asoc-formulario .text-danger {
	color: var(--asoc-color-secondary);
	font-size: 0.875rem;
}

/* 8 · Portada C: marca, meta de socios/as, acción y guía */
.asoc-marca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.asoc-marca__nombre {
	font-family: var(--asoc-font-head);
	font-size: 1.25rem;
	font-weight: 700;
}

html.asoc-sitio .asoc-apertura {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--asoc-color-pie, #1A4F66);
}

.asoc-sitio--inicio h1 {
	font-size: clamp(2.25rem, 10vw, 3rem);
	line-height: 1.02;
}

.asoc-meta {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border-radius: var(--asoc-radio-tarjeta);
	background: var(--asoc-color-brisa, var(--asoc-color-surface));
}

/* Las formas comparten el filtro de acuarela del mosaico (asoc_probador_mosaico_defs). */
.asoc-meta__grilla {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: clamp(4px, 1.6vw, 8px);
	filter: url(#asoc-acuarela);
}

.asoc-meta__forma {
	display: block;
	aspect-ratio: 1;
}

.asoc-meta__forma--cuadrado { border-radius: 3px; }
.asoc-meta__forma--circulo { border-radius: 50%; }
.asoc-meta__forma--rombo { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.asoc-meta__forma--triangulo { clip-path: polygon(0 0, 100% 0, 0 100%); }
.asoc-meta__forma--giro1 { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.asoc-meta__forma--giro2 { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.asoc-meta__forma--giro3 { clip-path: polygon(0 0, 100% 100%, 0 100%); }

.asoc-meta__forma--sol { background: linear-gradient(135deg, color-mix(in srgb, var(--asoc-mosaico-amarillo) 62%, #fff), var(--asoc-mosaico-amarillo) 55%, color-mix(in srgb, var(--asoc-mosaico-amarillo) 84%, #000)); }
.asoc-meta__forma--uva { background: linear-gradient(135deg, color-mix(in srgb, var(--asoc-mosaico-violeta) 62%, #fff), var(--asoc-mosaico-violeta) 55%, color-mix(in srgb, var(--asoc-mosaico-violeta) 84%, #000)); }
.asoc-meta__forma--mandarina { background: linear-gradient(135deg, color-mix(in srgb, var(--asoc-mosaico-naranja) 62%, #fff), var(--asoc-mosaico-naranja) 55%, color-mix(in srgb, var(--asoc-mosaico-naranja) 84%, #000)); }
.asoc-meta__forma--cielo { background: linear-gradient(135deg, color-mix(in srgb, var(--asoc-mosaico-azul) 62%, #fff), var(--asoc-mosaico-azul) 55%, color-mix(in srgb, var(--asoc-mosaico-azul) 84%, #000)); }
.asoc-meta__forma--menta { background: linear-gradient(135deg, color-mix(in srgb, var(--asoc-mosaico-agua) 62%, #fff), var(--asoc-mosaico-agua) 55%, color-mix(in srgb, var(--asoc-mosaico-agua) 84%, #000)); }
.asoc-meta__forma--vacia { background: #E2EBC4; }

.asoc-meta__leyenda {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin: 1rem 0 0;
	font-size: 0.9375rem;
}

.asoc-meta__leyenda strong {
	font-family: var(--asoc-font-head);
	font-size: 1.5rem;
}

.asoc-meta__nota {
	margin: 0.25rem 0 0;
	color: var(--asoc-color-ink-soft);
	font-size: 0.875rem;
}

.asoc-accion {
	margin-top: 1.25rem;
	text-align: center;
}

.asoc-accion .asoc-boton {
	min-height: 56px;
	font-size: 1.0625rem;
}

.asoc-accion__nota {
	margin: 0.625rem 0 0;
	font-size: 0.875rem;
}

.asoc-guia {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.asoc-guia li {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	counter-increment: paso;
}

.asoc-guia li::before {
	content: counter(paso);
	flex: none;
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background: var(--asoc-color-lima, #CFE88A);
	font-family: var(--asoc-font-head);
	font-weight: 700;
}

.asoc-otros {
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	margin-top: 1.5rem;
}

.asoc-otros__boton {
	width: 100%;
}

.asoc-otros__enlace {
	padding: 0.5rem 0;
	font-weight: 600;
}

/* 9 · Tarjeta del próximo evento */
.asoc-evento {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-top: 1.5rem;
	padding: 1.25rem;
	border-radius: var(--asoc-radio-tarjeta);
	background: var(--asoc-color-lima, #CFE88A);
}

.asoc-evento__sello {
	flex: none;
	display: grid;
	place-items: center;
	width: 5rem;
	height: 5rem;
	margin: 0;
	border-radius: 50%;
	background: var(--asoc-color-sol, #FADA4C);
	font-family: var(--asoc-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	transform: rotate(-10deg);
}

.asoc-evento h2 {
	margin: 0 0 0.25rem;
	font-size: 1.375rem;
}

.asoc-evento__gratis {
	display: inline-block;
	vertical-align: middle;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: var(--asoc-color-sol);
	color: var(--asoc-color-primary);
	font: 600 0.8125rem/1.2 var(--asoc-font-body);
	white-space: nowrap;
}

.asoc-evento p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* 10 · Botón Sumate pegado abajo hasta que se llega a él */
.asoc-accion {
	position: sticky;
	bottom: 0;
	z-index: 4;
	margin-inline: -1.25rem;
	padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--asoc-color-bg) 94%, transparent);
}

/* 11 · Pie del sitio con el motivo */
.asoc-sitio .asoc-pagina {
	padding-bottom: 2.5rem;
}

.asoc-pie-sitio {
	background: var(--asoc-color-pie, #1A4F66);
	color: var(--asoc-color-on-pie, #FBF6EA);
}

.asoc-pie-sitio__texto {
	max-width: 560px;
	margin: 0 auto;
	padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

.asoc-pie-sitio p {
	margin: 0;
}

.asoc-pie-sitio__nombre {
	font-family: var(--asoc-font-head);
	font-size: 1.375rem;
	font-weight: 700;
}

.asoc-pie-sitio .asoc-pie-sitio__redes {
	margin-top: 0.875rem;
}

html.asoc-sitio .asoc-pie-sitio a {
	display: inline-block;
	padding: 0.375rem 0;
	color: var(--asoc-color-on-pie, #FBF6EA);
	font-weight: 600;
}

/* 12 · Contador en barra grande (hasta 50 socios/as) */
.asoc-meta--barra {
	background: var(--asoc-color-lima, #CFE88A);
}

.asoc-meta__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.asoc-meta__cifra {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.asoc-meta__numero {
	font-family: var(--asoc-font-head);
	font-size: clamp(4.5rem, 24vw, 6.5rem);
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.03em;
}

.asoc-meta__texto {
	padding-bottom: 0.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.asoc-meta__barra {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--asoc-color-brisa, #F3F8DC);
}

.asoc-meta__barra span {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: inherit;
	background: var(--asoc-color-primary);
}

.asoc-meta--barra .asoc-meta__nota {
	margin-top: 0.75rem;
	color: var(--asoc-color-ink);
}

/* 13 · Requisitos de la adhesión (/sumate/): lista sin viñetas, con un tilde dibujado en CSS */
.asoc-requisitos {
	display: grid;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.asoc-requisitos li {
	position: relative;
	padding-left: 1.75rem;
}

/* Tilde: rectángulo con borde izquierdo e inferior, rotado; centrado en la primera línea. */
.asoc-requisitos li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	top: 0.5lh;
	left: 0.2em;
	width: 0.55em;
	height: 0.3em;
	border-left: 3px solid var(--asoc-color-primary);
	border-bottom: 3px solid var(--asoc-color-primary);
	transform: translateY(-75%) rotate(-45deg);
}

/* 15 · Provincia: el desplegable de Fluent Forms (Choices.js) con la misma piel que los campos.
 * Prefijo html.asoc-sitio: choices.css de Fluent Forms carga después y con la misma especificidad. */
html.asoc-sitio .asoc-formulario .choices {
	margin-bottom: 0;
	font: 400 1rem/1.4 var(--asoc-font-body);
}

html.asoc-sitio .asoc-formulario .choices__inner {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0.5rem 2.75rem 0.5rem 0.75rem;
	border: 2px solid color-mix(in srgb, var(--asoc-color-ink) 22%, transparent);
	border-radius: var(--asoc-radio-boton);
	background: var(--asoc-color-surface);
	color: var(--asoc-color-ink);
	font-size: 1rem;
}

html.asoc-sitio .asoc-formulario .choices.is-focused .choices__inner,
html.asoc-sitio .asoc-formulario .choices.is-open .choices__inner {
	border-color: var(--asoc-color-primary);
	border-radius: var(--asoc-radio-boton);
}

html.asoc-sitio .asoc-formulario .choices__list--single {
	padding: 0;
}

html.asoc-sitio .asoc-formulario .choices__placeholder {
	opacity: 0.7;
}

/* La flecha de Choices.js (un triángulo gris) pasa a un chevron Bosque. */
html.asoc-sitio .asoc-formulario .choices[data-type*="select-one"]::after {
	right: 1rem;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231E5631' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px;
}

html.asoc-sitio .asoc-formulario .choices[data-type*="select-one"].is-open::after {
	margin-top: -7px;
	transform: rotate(180deg);
}

html.asoc-sitio .asoc-formulario .choices__list--dropdown,
html.asoc-sitio .asoc-formulario .choices__list[aria-expanded] {
	margin-top: 0.375rem;
	overflow: hidden;
	border: 2px solid var(--asoc-color-primary);
	border-radius: 18px;
	background: var(--asoc-color-bg);
	color: var(--asoc-color-ink);
}

html.asoc-sitio .asoc-formulario .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.asoc-sitio .asoc-formulario .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background: var(--asoc-color-lima, #CFE88A);
}

html.asoc-sitio .asoc-formulario .choices[data-type*="select-one"] .choices__input {
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--asoc-color-ink) 15%, transparent);
	background: var(--asoc-color-bg);
}

/* Sin Choices.js (por si el campo deja de ser buscable): el select nativo con la misma piel. */
.asoc-formulario select.ff-el-form-control:not(.choices__input) {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.75rem;
	background: var(--asoc-color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231E5631' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px;
}

/* 16 · Pie: formas sorteadas (sin violeta, que no contrasta con Pie) y jerarquía de la marca */
.asoc-pie-sitio__formas {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: clamp(4px, 1.6vw, 8px);
	max-width: 560px;
	margin: 0 auto;
	padding: 0.75rem 1.25rem 0;
	filter: url(#asoc-acuarela);
}

.asoc-pie-sitio__hueco {
	visibility: hidden;
}

.asoc-pie-sitio .asoc-pie-sitio__sub {
	margin-top: 0.25rem;
	font-size: 1rem;
	font-weight: 600;
}

.asoc-pie-sitio__estado {
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 0.85;
}

/* 17 · Enlace discreto al boletín */
.asoc-otros__boletin {
	margin: 0;
	font-size: 0.9375rem;
	text-align: center;
}

/* 18 · /colabora/: tarjeta del alias */
.asoc-alias__rotulo {
	display: block;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Campo de solo lectura con el ícono de copiar adentro, a la derecha. */
.asoc-alias__campo {
	position: relative;
	margin-top: 0.375rem;
}

.asoc-sitio .asoc-alias__input {
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0.75rem 3.75rem 0.75rem 1rem;
	border: 2px solid color-mix(in srgb, var(--asoc-color-ink) 45%, transparent);
	border-radius: 12px;
	background: var(--asoc-color-surface);
	box-shadow: inset 0 2px 4px color-mix(in srgb, var(--asoc-color-ink) 8%, transparent);
	color: var(--asoc-color-ink);
	font: 700 1.25rem/1.2 var(--asoc-font-body);
	letter-spacing: 0.01em;
	cursor: text;
	-webkit-user-select: all;
	user-select: all;
}

.asoc-sitio .asoc-alias__input:focus {
	border-color: var(--asoc-color-primary);
	outline: 3px solid color-mix(in srgb, var(--asoc-color-primary) 30%, transparent);
	outline-offset: 0;
}

.asoc-alias__copiar {
	position: absolute;
	top: 50%;
	right: 0.375rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--asoc-color-primary);
	transform: translateY(-50%);
	cursor: pointer;
}

.asoc-alias__copiar:hover,
.asoc-alias__copiar:focus-visible {
	background: var(--asoc-color-brisa);
}

.asoc-alias__icono--hecho,
.asoc-alias__copiar.is-copiado .asoc-alias__icono--copiar {
	display: none;
}

.asoc-alias__copiar.is-copiado .asoc-alias__icono--hecho {
	display: block;
}

.asoc-alias__estado {
	min-height: 1.25rem;
	margin: 0.375rem 0 0;
	color: var(--asoc-color-primary);
	font-size: 0.875rem;
	font-weight: 700;
}

.asoc-alias__nota {
	margin: 0.875rem 0 0;
	color: var(--asoc-color-ink-soft);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* 19 · /colabora/: podio Plata · Oro · Bronce (en el DOM va primero Oro) */
.asoc-podio {
	margin-top: 1.5rem;
}

.asoc-podio h2 {
	margin: 0;
}

.asoc-podio__podio {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

.asoc-podio__escalon {
	--asoc-podio-altura: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
	min-width: 0;
	min-height: calc(7rem * var(--asoc-podio-altura));
	padding: 0.875rem 0.375rem;
	border: 0;
	border-radius: 14px 14px 0 0;
	color: var(--asoc-color-on-primary);
	font: 600 0.8125rem/1.25 var(--asoc-font-body);
	text-align: center;
	cursor: pointer;
}

.asoc-podio__escalon--plata {
	--asoc-podio-altura: 1.5;
	order: 1;
	background: var(--asoc-mosaico-azul);
}

.asoc-podio__escalon--oro {
	--asoc-podio-altura: 2.1;
	order: 2;
	background: var(--asoc-mosaico-naranja);
}

.asoc-podio__escalon--bronce {
	--asoc-podio-altura: 1;
	order: 3;
	background: var(--asoc-mosaico-violeta);
}

.asoc-podio__emoji {
	font-size: 1.375rem;
	line-height: 1;
}

.asoc-podio__nombre {
	font-family: var(--asoc-font-head);
	font-size: 1rem;
	font-weight: 700;
}

.asoc-podio__monto {
	font-family: var(--asoc-font-head);
	font-size: 1.125rem;
	font-weight: 700;
}

.asoc-podio__frase {
	font-size: 0.75rem;
	line-height: 1.3;
}

.asoc-podio__libre {
	margin: 1rem 0 0;
	font-family: var(--asoc-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: center;
}

.asoc-podio__aviso {
	min-height: 1.25rem;
	margin: 0.75rem 0 0;
	color: var(--asoc-color-ink-soft);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* 20 · Festival destacado: tarjeta alta, bajada en mayúsculas y dos botones */
.asoc-evento--grande {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	min-height: 16rem;
	padding: 1.5rem;
}

.asoc-evento__bajada {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.asoc-evento__mini {
	display: block;
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.asoc-evento__mini img {
	display: block;
	width: 112px;
	height: auto;
	border-radius: 10px;
}

.asoc-evento__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: auto;
}

.asoc-evento__acciones .asoc-boton {
	flex: 1 1 10rem;
	width: auto;
}

/* 21 · Tablero «Lo que hicimos y lo que falta» */
.asoc-tablero {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border-radius: var(--asoc-radio-tarjeta);
	background: var(--asoc-color-brisa);
}

.asoc-tablero h2 {
	margin: 0;
	font-size: 1.375rem;
}

.asoc-tablero__lista {
	display: grid;
	gap: 0.875rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.asoc-tablero__item {
	position: relative;
	padding-left: 1.75rem;
}

/* Marcadores dibujados en CSS: tilde, círculo Sol lleno o círculo vacío. */
.asoc-tablero__marcador {
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 1.125rem;
	height: 1.125rem;
}

.asoc-tablero__item--hecho .asoc-tablero__marcador::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 0.25rem;
	width: 0.55rem;
	height: 0.3rem;
	border-left: 3px solid var(--asoc-color-primary);
	border-bottom: 3px solid var(--asoc-color-primary);
	transform: translateY(-25%) rotate(-45deg);
}

.asoc-tablero__item--ahora .asoc-tablero__marcador {
	border-radius: 50%;
	background: var(--asoc-color-sol);
}

.asoc-tablero__item--falta .asoc-tablero__marcador {
	border: 2px solid color-mix(in srgb, var(--asoc-color-ink) 35%, transparent);
	border-radius: 50%;
}

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

.asoc-tablero__rotulo {
	display: inline-block;
	margin-left: 0.375rem;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: var(--asoc-color-lima);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.asoc-tablero__nota {
	display: block;
	margin-top: 0.25rem;
	color: var(--asoc-color-ink-soft);
	font-size: 0.875rem;
}

/* 21b · Botón al pie de un bloque (tablero de la portada, pasos de /colabora/):
   mismo aire que el resto de los botones respecto del texto de arriba. */
.asoc-sitio .asoc-pie-accion {
	margin: 1.5rem 0 0;
}

/* 22 · «← Inicio» con forma de botón, en las páginas internas */
html.asoc-sitio a.asoc-volver {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: 1rem;
	padding: 0.5rem 1.125rem;
	border: 2px solid var(--asoc-color-primary);
	border-radius: var(--asoc-radio-boton);
	color: var(--asoc-color-primary);
	font-weight: 600;
	text-decoration: none;
}

html.asoc-sitio a.asoc-volver:hover,
html.asoc-sitio a.asoc-volver:focus-visible {
	background: var(--asoc-color-brisa);
}