/*
 * APROM Eventos — hoja base del frente.
 *
 * Índice
 *   1. Variables y respaldos
 *   2. El bloque de inscripción (dos columnas)
 *   3. La ficha del evento, el llamado de arriba, el flyer y el lugar
 *   4. Fechas: lectura y elegibles
 *   5. El formulario
 *   6. Avisos y tarjetas de resultado
 *   7. El listado y la tarjeta de un evento
 *   8. La cartelera: un destacado y el riel de los que siguen
 *   9. El archivo /eventos/
 *  10. La tarjeta incrustada (oEmbed)
 *  11. Teléfono
 *
 * Este plugin NO edita design.css. Todo el color sale de las variables --ap-*
 * que define aprom-design sobre body.aprom-design, con un respaldo detrás de
 * cada una: con el diseño prendido el formulario toma la paleta del sitio solo,
 * y con el diseño apagado valen los respaldos y se ve bien igual.
 *
 * Las clases ae-* son un contrato: aprom-design puede engancharse a ellas como
 * ya se engancha a las os-* de afiliados. No se renombran a la ligera.
 */

/* ---- 1. Variables y respaldos ---- */

.ae-bloque,
.ae-lista,
.ae-card,
.ae-cart,
.ae-flyer,
.ae-llamado,
.ae-archivo,
.ae-embed {
	--ae-bg:        var(--ap-bg, #EDE7DA);
	--ae-panel:     var(--ap-panel, #FCFAF4);
	--ae-panel-alt: var(--ap-panel-alt, #F4EEE1);
	--ae-line:      var(--ap-line, #E1D8C4);
	--ae-ink:       var(--ap-ink, #1A1C1F);
	--ae-text:      var(--ap-text, #45413A);
	--ae-text-2:    var(--ap-text-2, #5C574B);
	--ae-muted:     var(--ap-muted, #6B6556);
	--ae-navy:      var(--ap-navy, #123A63);
	--ae-navy-deep: var(--ap-navy-deep, #0E2440);
	--ae-ochre:     var(--ap-ochre, #C8892A);
	--ae-ochre-dark:var(--ap-ochre-dark, #8A5C16);
	--ae-ochre-ink: var(--ap-ochre-ink, #3E2A08);
	--ae-gold:      var(--ap-gold-soft, #CDB98C);
	--ae-error:     #A02B1E;
	--ae-serif:     var(--ap-serif, Georgia, 'Times New Roman', serif);
	--ae-sans:      var(--ap-sans, 'Segoe UI', Helvetica, Arial, sans-serif);
	--ae-sombra:    var(--ap-shadow-panel, 0 16px 38px -20px rgba(60, 48, 24, .40));

	font-family: var(--ae-sans);
	color: var(--ae-text);
	box-sizing: border-box;
}

.ae-bloque *,
.ae-lista *,
.ae-card *,
.ae-cart *,
.ae-flyer *,
.ae-llamado *,
.ae-archivo *,
.ae-embed * { box-sizing: border-box; }

/* ---- 2. El bloque de inscripción ---- */

.ae-bloque { margin: 48px 0 0; }

.ae-bloque__cols {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 32px;
	align-items: start;
}

.ae-bloque__info { min-width: 0; }
.ae-bloque__form { min-width: 0; }

/* ---- 3. La ficha del evento y el lugar ---- */

/* La tira de arriba: fechas · horario · dónde. Se arma con auto-fit y no con
   tres columnas fijas porque las celdas se dibujan sólo si tienen qué decir:
   un evento sin horario común muestra dos, y quedaría un hueco. */
.ae-ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px 26px;
	padding: 20px 22px;
	margin-bottom: 26px;
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	border-left: 3px solid var(--ae-ochre);
	box-shadow: var(--ae-sombra);
}

.ae-ficha__celda {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.ae-ficha__icono {
	color: var(--ae-navy);
	flex-shrink: 0;
	line-height: 0;
	margin-top: 2px;
}

.ae-ficha__cuerpo { min-width: 0; }

.ae-ficha__rotulo {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ae-muted);
	margin-bottom: 3px;
}

.ae-ficha__valor {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--ae-ink);
	line-height: 1.45;
}

/* El lugar. Se usa igual dentro de la ficha y dentro de una fila de fecha, así
   que no define ni tamaño de letra ni color propio: los hereda de donde caiga. */
.ae-lugar { display: block; }

.ae-lugar__modo {
	display: block;
	font-weight: 600;
}

.ae-lugar__sitio,
.ae-lugar__dir,
.ae-lugar__acceso {
	display: block;
	font-weight: 400;
	font-size: .93em;
	color: var(--ae-text-2);
}

/* Lo que se pegó de la plataforma: los renglones son el formato, así que se
   respetan, y el bloque se separa de lo de arriba para que no se lea como una
   línea más de la ficha. */
.ae-lugar__instrucciones {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ae-line);
	font-size: .93em;
	line-height: 1.55;
	color: var(--ae-text-2);
	overflow-wrap: anywhere;
}

.ae-lugar__enlace {
	display: inline-block;
	margin-top: 5px;
	font-size: .93em;
	font-weight: 600;
	color: var(--ae-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ae-lugar__enlace:hover,
.ae-lugar__enlace:focus { color: var(--ae-ochre-dark); }

/* El enlace no está a la vista: decir por qué es más útil que no decir nada. */
.ae-lugar__nota {
	display: block;
	margin-top: 4px;
	font-size: .87em;
	font-weight: 400;
	font-style: italic;
	color: var(--ae-muted);
}

/*
 * La franja de llamado (doc 0056).
 *
 * Va arriba de todo en la página de un evento: la frase de cupo a la izquierda,
 * el botón que baja al formulario a la derecha. Es una franja y no una tarjeta
 * --sin sombra, un solo filete arriba en ocre-- porque no es contenido: es una
 * barra de acción, y competir con el flyer que viene abajo sería contraproducente.
 */
.ae-llamado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 28px;
	padding: 14px 20px;
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	border-top: 3px solid var(--ae-ochre);
}

/* Cerrada: la franja se apaga. Sigue estando --la frase es la respuesta a «¿me
   puedo anotar?»-- pero deja de pedir atención, y sin botón queda un renglón. */
.ae-llamado--cerrada {
	border-top-color: var(--ae-line);
	background: var(--ae-panel-alt);
}

/* El color no es el único portador del dato: la frase lo dice con todas las
   letras (WCAG 1.4.1). Ver la misma nota en la cartelera. */
.ae-llamado__estado {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ae-text);
}

.ae-llamado--pocos .ae-llamado__estado { color: var(--ae-ochre-dark); font-weight: 700; }
.ae-llamado--lleno .ae-llamado__estado,
.ae-llamado--cerrada .ae-llamado__estado { color: var(--ae-muted); }

.ae-llamado__btn {
	font-family: var(--ae-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 11px 22px;
	text-decoration: none;
	border: 1px solid var(--ae-navy);
	border-radius: 2px;
	background: var(--ae-navy);
	color: #FCFAF4 !important;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	transition: background .18s ease, border-color .18s ease;
}

.ae-llamado__btn:hover,
.ae-llamado__btn:focus { background: var(--ae-navy-deep); border-color: var(--ae-navy-deep); }

@media (max-width: 480px) {
	.ae-llamado { flex-direction: column; align-items: stretch; }
	.ae-llamado__btn { justify-content: center; }
}

/*
 * El destino del ancla.
 *
 * `scroll-margin-top` porque The7 deja una barra fija arriba al hacer scroll y
 * sin esto el título del bloque queda debajo de ella. Y el foco no se dibuja:
 * el div tiene `tabindex="-1"` para recibirlo, no para ser un control.
 */
#inscripcion { scroll-margin-top: 110px; }
#inscripcion:focus { outline: none; }

/* Desplazamiento suave, y sólo cuando hay algo que desplazar. `:has` es una
   mejora: donde no lo hay, el ancla salta como saltó siempre. Y se respeta a
   quien pidió menos movimiento (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
	html:has(.ae-llamado) { scroll-behavior: smooth; }
}

/*
 * El flyer.
 *
 * `max-width` y no ancho completo: una lámina de 1080×1350 estirada a los 1216
 * de la grilla se ve reventada, y encima empuja todo el texto abajo del pliegue.
 * A 520 entra entera en una pantalla de teléfono sin que haya que achicar nada.
 */
.ae-flyer {
	margin: 0 0 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.ae-flyer__zoom { display: block; max-width: 520px; line-height: 0; }

.ae-flyer__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ae-line);
	box-shadow: var(--ap-shadow-card, 0 10px 24px -14px rgba(60, 48, 24, .32));
}

.ae-flyer__pie {
	font-size: 13px;
	color: var(--ae-muted);
	text-align: center;
}

/* ---- 4. Fechas ---- */

.ae-fechas__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	border-bottom: 1px solid var(--ae-line);
	padding-bottom: 12px;
	margin-bottom: 22px;
}

.ae-fechas__title {
	font-family: var(--ae-serif);
	font-weight: 200;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--ae-ink);
	margin: 0;
}

.ae-fechas__nota {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ae-muted);
	white-space: nowrap;
}

.ae-fechas__lista { display: flex; flex-direction: column; }

/* Fecha de sólo lectura (curso con fechas fijas) */
.ae-fecha {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 18px 0;
	border-bottom: 1px solid var(--ae-line);
}

.ae-fecha__n {
	font-family: var(--ae-serif);
	font-size: 30px;
	font-weight: 200;
	color: var(--ae-ochre);
	line-height: 1;
	width: 44px;
	flex-shrink: 0;
}

.ae-fecha__cuerpo { flex: 1; min-width: 0; }

.ae-fecha__cuando {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--ae-ink);
	margin-bottom: 4px;
}

.ae-fecha__lugar {
	display: block;
	font-size: 14px;
	color: var(--ae-text-2);
}

/* Fecha elegible (evento que se repite) */
.ae-fecha--elegible {
	gap: 16px;
	padding: 20px 22px;
	margin-bottom: 12px;
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	cursor: pointer;
	min-height: 44px;
}

.ae-fecha--elegible.is-selected {
	border: 2px solid var(--ae-navy);
	padding: 19px 21px;
}

.ae-fecha--elegible.is-full {
	background: var(--ae-panel-alt);
	border-style: dashed;
	border-color: var(--ae-gold);
}

.ae-fecha__input {
	flex-shrink: 0;
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--ae-navy);
}

.ae-fecha__chip {
	display: inline-block;
	margin-top: 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ae-ochre-ink);
	background: var(--ae-ochre);
	padding: 4px 10px;
}

.ae-fecha__hint {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ae-text-2);
}

.ae-fecha__cupo {
	flex-shrink: 0;
	text-align: right;
	padding-left: 8px;
}

.ae-fecha__cupo-n {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ae-text);
}

.ae-fecha__cupo-sub {
	display: block;
	font-size: 12px;
	color: var(--ae-muted);
	white-space: nowrap;
}

/* La nota al pie del panel de fechas */
.ae-nota {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--ae-panel-alt);
	border: 1px solid var(--ae-line);
	padding: 20px 22px;
	margin: 30px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ae-text);
}

.ae-nota__icono { flex-shrink: 0; color: var(--ae-ochre-dark); line-height: 0; margin-top: 1px; }
.ae-nota strong { color: var(--ae-ink); }

/* ---- 5. El formulario ---- */

/* El <form> envuelve las DOS columnas, porque en «evento que se repite» los
   radios de la fecha viven en la columna izquierda: un radio fuera de su form
   no se envía, y la fecha elegida nunca llegaría. No lleva display propio —
   la grilla está en .ae-bloque__cols. */

.ae-form__card {
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	box-shadow: var(--ae-sombra);
	padding: 32px 30px;
}

.ae-kicker {
	font-family: var(--ae-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ae-ochre-dark);
	margin: 0 0 14px;
	line-height: 1.4;
}

/* La cabecera del formulario cambia de contenido según el modo: en «curso con
   fechas fijas» lleva antetítulo + medidor, y en «evento que se repite» sólo el
   antetítulo. Para que el hueco antes del primer campo sea el mismo en los dos,
   el margen lo pone la cabecera y se le saca al último hijo, sea cual sea. */
.ae-form__head { margin-bottom: 26px; }
.ae-form__head > :last-child { margin-bottom: 0; }

.ae-medidor { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }

.ae-medidor__barra {
	flex: 1;
	height: 6px;
	background: var(--ae-line);
	display: block;
	position: relative;
}

.ae-medidor__lleno {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--ae-navy);
	display: block;
}

.ae-medidor__n {
	font-size: 12px;
	font-weight: 600;
	color: var(--ae-navy);
	white-space: nowrap;
}

.ae-medidor__pie { margin: 0 0 26px; font-size: 13px; color: var(--ae-text-2); }

.ae-form__campos { display: flex; flex-direction: column; gap: 18px; }

.ae-form__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.ae-field__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ae-text);
	margin-bottom: 7px;
}

.ae-req { color: var(--ae-ochre-dark); }

.ae-field__input {
	width: 100%;
	font-family: var(--ae-sans);
	font-size: 15px;
	line-height: 1.35;
	color: var(--ae-ink);
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	border-radius: 0;
	padding: 11px 13px;
	min-height: 44px;
	box-shadow: none;
	max-width: 100%;
}

.ae-field__input:focus {
	outline: 2px solid var(--ae-navy);
	outline-offset: -1px;
	border-color: var(--ae-navy);
}

.ae-field__area { min-height: 84px; resize: vertical; }

.ae-field__help { margin: 6px 0 0; font-size: 12px; color: var(--ae-muted); }

.ae-field__error { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--ae-error); }

.ae-field--error .ae-field__input {
	border-color: var(--ae-error);
	outline: 2px solid rgba(160, 43, 30, .16);
	outline-offset: 0;
}

.ae-submit {
	width: 100%;
	font-family: var(--ae-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--ae-navy);
	color: var(--ae-panel);
	border: 0;
	border-radius: 0;
	padding: 16px 32px;
	min-height: 52px;
	cursor: pointer;
	transition: background .18s ease;
}

.ae-submit:hover,
.ae-submit:focus { background: var(--ae-navy-deep); color: #fff; }

.ae-form__pie { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ae-text-2); }

/* La trampa: fuera de la vista, pero legible por un lector de pantalla, que es
   lo que evita que alguien la complete sin querer. Nada de display:none. */
.ae-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- 6. Avisos y tarjetas de resultado ---- */

.ae-alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.55;
	background: var(--ae-panel-alt);
	border-left: 3px solid var(--ae-error);
	color: var(--ae-text);
}

/* El rojo es el aspecto por omisión de .ae-alert; la variante se escribe igual
   para que se lea al lado de --ok y --aviso, que sí lo pisan. */
.ae-alert--error { border-left-color: var(--ae-error); }
.ae-alert__icono { flex-shrink: 0; color: var(--ae-error); line-height: 0; margin-top: 1px; }

.ae-done {
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	border-top: 3px solid var(--ae-navy);
	box-shadow: var(--ae-sombra);
	padding: 30px 28px;
}

.ae-done--espera { border-top-color: var(--ae-ochre); }
.ae-done--cerrada { border-top-color: var(--ae-muted); }

.ae-done__icono { display: block; color: var(--ae-navy); margin-bottom: 18px; line-height: 0; }
.ae-done__icono .ae-icono { width: 34px; height: 34px; stroke-width: 1.25; }
.ae-done--espera .ae-done__icono { color: var(--ae-ochre-dark); }
.ae-done--cerrada .ae-done__icono { color: var(--ae-muted); }

.ae-done__title {
	font-family: var(--ae-serif);
	font-weight: 300;
	font-size: 25px;
	line-height: 1.2;
	color: var(--ae-ink);
	margin: 0 0 14px;
}

.ae-done__texto { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--ae-text); }

/* El pie de la tarjeta. Hasta el doc 0059 lo usaban dos carteles; hoy sólo el
   de «cerrada», para colgar de ahí el enlace a los próximos eventos. */
.ae-done__pie {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-top: 1px solid var(--ae-line);
	padding-top: 18px;
	margin: 22px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ae-text-2);
}


/* ---- 7. El listado y la tarjeta ---- */

.ae-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.ae-lista--cols-1 { grid-template-columns: 1fr; }
.ae-lista--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ae-lista--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ae-lista--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* El formato de una línea es una columna, siempre: son renglones, no fichas. */
.ae-lista--linea { grid-template-columns: 1fr; gap: 0; }

.ae-lista__vacio { color: var(--ap-text-2, #5C574B); font-style: italic; }

/*
 * La tarjeta. Ya no es un <a> gigante: son dos enlaces hermanos en el pie, y
 * el título es el tercero. Un <a> dentro de otro <a> no es HTML válido y el
 * navegador lo desarma como quiere -- por eso el pie existe.
 */
.ae-card {
	display: flex;
	flex-direction: column;
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	box-shadow: var(--ap-shadow-card, 0 10px 24px -14px rgba(60, 48, 24, .32));
	font-family: var(--ae-sans);
	color: var(--ae-text);
}

.ae-card__media { overflow: hidden; background: var(--ae-panel-alt); }

.ae-card__img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	transition: transform .4s ease;
}

.ae-card__media a:hover .ae-card__img { transform: scale(1.03); }

.ae-card__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 24px 22px;
}

.ae-card__cuando,
.ae-card__lugar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ae-text-2);
}

.ae-card__cuando {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ae-ochre-dark);
}

.ae-card__icono { flex-shrink: 0; line-height: 0; color: currentColor; }
.ae-card__icono .ae-icono { width: 16px; height: 16px; }

.ae-card__titulo {
	font-family: var(--ae-serif);
	font-weight: 300;
	font-size: 23px;
	line-height: 1.2;
	color: var(--ae-ink);
	margin: 0 0 12px;
}

.ae-card__link { color: inherit; text-decoration: none; transition: color .18s ease; }
.ae-card__link:hover { color: var(--ae-ochre-dark); }

.ae-card__texto {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ae-text-2);
}

/* `margin-top:auto` pega el estado al pie: con tarjetas de texto desigual, las
   filas de una grilla terminan alineadas abajo en vez de flotando. */
.ae-card__estado {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: auto 0 0;
	padding: 4px 0 0;
}

.ae-card__chip {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ae-ochre-ink);
	background: var(--ae-panel-alt);
	border: 1px solid var(--ae-gold);
	padding: 4px 10px;
}

.ae-card__chip--cerrada,
.ae-card__chip--pasada {
	background: transparent;
	border-color: var(--ae-line);
	color: var(--ae-muted);
}

.ae-card__chip--ahora {
	background: var(--ae-navy);
	border-color: var(--ae-navy);
	color: #FCFAF4;
}

.ae-card__chip--libres,
.ae-card__chip--lleno {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12.5px;
	font-weight: 500;
	background: transparent;
	border-color: transparent;
	padding: 4px 0;
	color: var(--ae-text-2);
}

.ae-card__chip--lleno { color: var(--ae-ochre-dark); }

.ae-card__pie {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ae-line);
}

.ae-card__btn {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	padding: 9px 18px;
	border: 1px solid var(--ae-navy);
	transition: background .18s ease, color .18s ease;
}

/*
 * El `!important` del color se queda, y se queda ACÁ.
 *
 * Enfrente hay dos reglas de aprom-design: `body.aprom-design a` para todo el
 * sitio y `body.aprom-design:not(.home) #content a` adentro del contenido, la
 * segunda con un id. Sin la marca, «Inscribirme» sale azul sobre azul: un
 * rectángulo sin texto (se vio en la primera captura del doc 0037).
 *
 * La tentación es poner la excepción en design.css, al lado de la regla que la
 * obliga. Sería más elegante y estaría mal: este plugin se instala por su
 * propio zip, en un sitio donde design.css puede ser más viejo, o puede no
 * estar. Un botón cuyo texto depende de que otro plugin esté al día es un botón
 * que un día no se lee. Se paga una marca de más y el plugin se basta solo.
 *
 * El <button> de «Enviar inscripción» no necesita nada de esto: no es un <a>.
 */
.ae-card__btn--principal { background: var(--ae-navy); color: #FCFAF4 !important; }
.ae-card__btn--principal:hover { background: var(--ae-navy-deep); color: #FCFAF4 !important; }

.ae-card__btn--fantasma { background: transparent; color: var(--ae-navy) !important; }
.ae-card__btn--fantasma:hover { background: var(--ae-navy); color: #FCFAF4 !important; }

/* Un evento que ya pasó se ve pasado: sigue estando, sin llamar la atención. */
.ae-card.is-pasada { box-shadow: none; background: transparent; }
.ae-card.is-pasada .ae-card__img { filter: grayscale(1); opacity: .7; }
.ae-card.is-pasada .ae-card__titulo { color: var(--ae-text-2); }
.ae-card.is-pasada .ae-card__cuando { color: var(--ae-muted); }

/* Formato «línea»: un renglón por evento. */
.ae-card--linea {
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ae-line);
	box-shadow: none;
}

.ae-card--linea .ae-card__cuerpo {
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 14px 0;
	width: 100%;
}

.ae-card--linea .ae-card__cuando { margin: 0; }
/* `flex: 0 1 auto` y no `1 1 220px`: con el título estirándose, en un ancho
   grande la fecha quedaba pegada a la izquierda y todo lo demás a la derecha,
   con un pozo en el medio. Lo que empuja es el pie. */
.ae-card--linea .ae-card__titulo { font-size: 19px; margin: 0; flex: 0 1 auto; }
.ae-card--linea .ae-card__lugar { margin: 0; }
.ae-card--linea .ae-card__estado { margin: 0; padding: 0; }
.ae-card--linea .ae-card__pie { margin: 0 0 0 auto; padding: 0; border: 0; }

/* Formato «banner»: la imagen a un lado, ancho completo. */
.ae-card--banner { flex-direction: row; align-items: stretch; }
.ae-card--banner .ae-card__media { flex: 0 0 38%; max-width: 38%; }
.ae-card--banner .ae-card__img { height: 100%; min-height: 220px; }
.ae-card--banner .ae-card__cuerpo { padding: 30px 32px; }
.ae-card--banner .ae-card__titulo { font-size: 28px; }

/* La atribución que Google pide a cambio de esconder su distintivo (doc 0020). */
.ae-form__recaptcha {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ae-muted);
}

.ae-form__recaptcha a { color: var(--ae-muted); text-decoration: underline; }
.ae-form__recaptcha a:hover { color: var(--ae-ochre-dark); }

/* ---- 8. La cartelera ---- */

/* Un destacado y los que siguen, en un solo borde y tres zonas. La decisión de
   fondo es que el riel va AL LADO y no abajo: apilar cuesta alto, y el alto es
   lo caro en una portada. Con el riel a la derecha la pieza mide lo que mide el
   destacado y los otros tres salen gratis. */
.ae-cart {
	display: grid;
	/* El riel se encoge antes de que la pieza se desarme: entre 820 y 1000px
	   una tercera columna fija de 286px obligaba a apilar, y apilada en una
	   tablet la pieza mide el doble de alto con media pantalla vacía al lado.
	   Con clamp() aguanta las tres zonas hasta los 820. */
	grid-template-columns: 124px minmax(0, 1fr) clamp(232px, 27%, 286px);
	min-height: 284px;
	background: var(--ae-panel);
	border: 1px solid var(--ae-line);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 12px 28px -18px rgba(60, 48, 24, .36);
}

/* Un solo evento en el calendario: no hay riel que dibujar. */
.ae-cart--solo { grid-template-columns: 124px minmax(0, 1fr); min-height: 0; }

.ae-cart__vacio { font-size: 15px; color: var(--ae-muted); margin: 0; }

/* --- zona 1: el lomo. Es la fecha y el borde izquierdo a la vez --- */
.ae-cart__lomo {
	background: var(--ae-navy-deep);
	color: #F3EFE6;
	padding: 20px 12px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ae-cart__barra { width: 26px; height: 3px; background: var(--ae-ochre); margin-bottom: 14px; }

.ae-cart__dow {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(205, 185, 140, .82);
	margin-bottom: 6px;
}

.ae-cart__dia {
	font-family: var(--ae-serif);
	font-size: 38px;
	line-height: .92;
	color: #FFFDF7;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

/* El mes va entero, así que el interletrado baja de .22em a .1em: con el
   original «SEPTIEMBRE» se salía de los 124px del lomo. Medido, no estimado. */
.ae-cart__mes {
	margin-top: 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ae-gold);
	line-height: 1.25;
}

.ae-cart__hora {
	margin-top: 12px;
	padding-top: 11px;
	width: 56px;
	border-top: 1px solid rgba(205, 185, 140, .32);
	font-size: 11.5px;
	color: rgba(243, 239, 230, .78);
	font-variant-numeric: tabular-nums;
}

/* El año, sólo cuando no es el año en curso: ver aprom_eventos_cart_lomo(). */
.ae-cart__anio {
	margin-top: auto;
	padding-top: 16px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(205, 185, 140, .72);
	font-variant-numeric: tabular-nums;
}

/* --- zona 2: el destacado --- */
/* El destacado se centra en vertical. Quien manda el alto de la pieza es el
   riel --tres filas de tres renglones--, y el destacado casi nunca lo llena: si
   se ancla arriba, todo el sobrante queda abajo y la caja se ve descolgada. */
.ae-cart__hero {
	padding: 22px 26px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.ae-cart__antetitulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 9px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ae-muted);
}

.ae-cart__antetitulo i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ae-cart__antetitulo--ahora { color: var(--ae-ochre-dark); }

.ae-cart__titulo {
	font-family: var(--ae-serif);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.18;
	margin: 0;
	color: var(--ae-ink);
	letter-spacing: -.012em;
}

.ae-cart__titulo a { color: inherit; text-decoration: none; transition: color .18s ease; }
.ae-cart__titulo a:hover { color: var(--ae-ochre-dark); }

.ae-cart__filete { display: block; width: 40px; height: 2px; background: var(--ae-ochre); margin: 12px 0; }

.ae-cart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 18px;
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--ae-text-2);
}

.ae-cart__meta > span { display: inline-flex; align-items: center; gap: 7px; }
.ae-cart__meta .ae-icono { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }

.ae-cart__texto {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ae-text-2);
	max-width: 46ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* La disponibilidad: texto llano. Sin píldora, sin recuadro y sin fondo -- es
   una oración que se lee, no una etiqueta que se mira, y el color es lo único
   que la distingue. El color NO es el único portador del dato: la frase lo dice
   con todas las letras (WCAG 1.4.1). */
.ae-cart__cupo {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ae-text-2);
}

.ae-cart__cupo--libre { color: var(--ae-text); font-weight: 600; }
.ae-cart__cupo--pocos { color: var(--ae-ochre-dark); font-weight: 700; }
.ae-cart__cupo--cerrada { color: var(--ae-muted); }

/* Los botones siguen al texto en lugar de irse al fondo de la caja. Con el
   riel de tres filas la pieza mide 370px y el destacado no llena tanto: pegados
   abajo dejaban un agujero de casi 200px entre la frase de cupo y el botón. El
   aire sobrante queda ahora DESPUÉS del botón, que es donde no se nota. */
.ae-cart__botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; }

.ae-cart__btn {
	font-family: var(--ae-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 10px 18px;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 2px;
	display: inline-flex;
	align-items: center;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ae-cart__btn--principal { background: var(--ae-navy); color: #FCFAF4 !important; border-color: var(--ae-navy); }
.ae-cart__btn--principal:hover { background: var(--ae-navy-deep); border-color: var(--ae-navy-deep); }
.ae-cart__btn--fantasma { background: transparent; color: var(--ae-navy) !important; border-color: rgba(18, 58, 99, .36); }
.ae-cart__btn--fantasma:hover { background: var(--ae-navy); color: #FCFAF4 !important; border-color: var(--ae-navy); }

/* --- zona 3: el riel --- */
.ae-cart__riel {
	border-left: 1px solid var(--ae-line);
	background: var(--ae-panel-alt);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ae-cart__riel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 14px 18px 10px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ae-muted);
}

.ae-cart__riel-head b { color: var(--ae-ochre-dark); font-variant-numeric: tabular-nums; }

.ae-cart__fila {
	display: block;
	padding: 11px 18px 12px;
	border-top: 1px solid var(--ae-line);
	text-decoration: none;
	color: inherit;
	transition: background .15s ease;
}

.ae-cart__fila:hover { background: var(--ae-panel); }
.ae-cart__fila:hover .ae-cart__fila-titulo { color: var(--ae-ochre-dark); }

/* La fecha entera manda el renglón de arriba. Va en versalitas del texto, no
   en mayúsculas: «LUNES 2 DE SEPTIEMBRE» a 10px interletrado es una barra
   gris, y acá hay tres seguidas. La mayúscula queda para la inicial. */
.ae-cart__fila-fecha {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ae-ochre-dark);
	font-variant-numeric: tabular-nums;
}

.ae-cart__fila-fecha::first-letter { text-transform: uppercase; }

.ae-cart__fila-cuerpo { display: block; min-width: 0; }

.ae-cart__fila-titulo {
	font-family: var(--ae-serif);
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.3;
	margin: 0;
	color: var(--ae-ink);
	transition: color .15s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ae-cart__fila-sub {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	color: var(--ae-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ae-cart__riel-pie {
	margin: auto 0 0;
	border-top: 1px solid var(--ae-line);
	padding: 11px 18px;
	text-align: right;
}

.ae-cart__riel-pie a {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ae-navy);
	text-decoration: none;
}

.ae-cart__riel-pie a:hover { color: var(--ae-ochre-dark); }

/* ---- 9. El archivo /eventos/ ---- */

.ae-archivo { font-family: var(--ae-sans); color: var(--ae-text); margin: 0 0 40px; }

.ae-archivo__head { margin: 8px 0 4px; }

.ae-archivo__title {
	font-family: var(--ae-serif);
	font-weight: 200;
	font-size: 42px;
	line-height: 1.1;
	color: var(--ae-ink);
	margin: 0 0 12px;
}

.ae-archivo__intro {
	margin: 0 0 22px;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ae-text-2);
}

.ae-archivo__tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var(--ae-line);
}

.ae-archivo__tab {
	display: inline-block;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ae-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.ae-archivo__tab:hover { color: var(--ae-navy); }

.ae-archivo__tab.is-activa {
	color: var(--ae-navy);
	border-bottom-color: var(--ae-ochre);
}

.ae-archivo__pasados { margin: 46px 0 0; padding: 30px 0 0; border-top: 1px solid var(--ae-line); }

.ae-archivo__sub {
	font-family: var(--ae-serif);
	font-weight: 300;
	font-size: 26px;
	color: var(--ae-ink);
	margin: 0 0 6px;
}

.ae-archivo__mas { margin: 16px 0 0; font-size: 14px; }
.ae-archivo__mas a { color: var(--ae-navy); }

.ae-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 34px 0 0;
	font-size: 14px;
}

.ae-pager__link { color: var(--ae-navy); text-decoration: none; font-weight: 600; }
.ae-pager__link:hover { color: var(--ae-ochre-dark); }
.ae-pager__pos { color: var(--ae-muted); font-size: 13px; }

/* ---- 10. La tarjeta incrustada ---- */

.ae-embed { font-family: var(--ae-sans); }
.ae-embed .ae-card__cuando { margin-bottom: 8px; }
.ae-embed .ae-card__texto { margin-bottom: 0; }

.ae-embed__btn {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 14px;
	background: var(--ap-navy, #123A63);
	color: #FCFAF4;
}

.ae-embed__btn:hover { background: var(--ap-navy-deep, #0E2440); color: #FCFAF4; }

/* El botón de agendar, en la ficha del evento. */
.ae-ficha__celda--agendar .ae-ficha__cuerpo { gap: 2px; }

.ae-ficha__agendar {
	display: inline-block;
	font-weight: 600;
	font-size: 14px;
	color: var(--ae-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--ae-gold);
}

.ae-ficha__agendar:hover { color: var(--ae-ochre-dark); }
.ae-ficha__nota { display: block; margin-top: 3px; font-size: 12px; color: var(--ae-muted); }

/* Una fecha que ya pasó, en el listado de fechas del evento. */
.ae-fecha.is-pasada { opacity: .62; }
.ae-fecha.is-pasada .ae-fecha__cuando { text-decoration: line-through; text-decoration-thickness: 1px; }

/* La base (fondo ocre) es la de «Cupo completo» y no se toca: estos dos son
   modificadores, y cada uno apaga el fondo que hereda. */
.ae-fecha__chip--pasada {
	background: transparent;
	border: 1px solid var(--ae-line);
	color: var(--ae-muted);
	letter-spacing: .12em;
	font-size: 10.5px;
	padding: 3px 8px;
}

.ae-fecha__chip--ahora {
	background: var(--ae-navy);
	border: 1px solid var(--ae-navy);
	color: #FCFAF4;
	font-size: 10.5px;
	padding: 3px 8px;
}

/* Una fecha pasada dentro de la lista donde se ELIGE: misma caja que las
   elegibles, para que la columna no parezca rota, pero sin invitación. */
.ae-fecha--caja {
	gap: 16px;
	padding: 20px 22px;
	margin-bottom: 12px;
	background: var(--ae-panel-alt);
	border: 1px dashed var(--ae-line);
}

/* ---- 11. Teléfono ---- */

@media (max-width: 991px) {
	.ae-bloque__cols { grid-template-columns: 1fr; gap: 28px; }
	.ae-lista,
	.ae-lista--cols-3,
	.ae-lista--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ae-lista--linea { grid-template-columns: 1fr; }
	.ae-card--banner .ae-card__cuerpo { padding: 24px 24px; }
	.ae-card--banner .ae-card__titulo { font-size: 24px; }
}

/* La cartelera aguanta las tres zonas más abajo que el resto del listado, así
   que se desarma en su propio punto de corte y no en el de 991px. */
@media (max-width: 820px) {
	.ae-cart,
	.ae-cart--solo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.ae-cart__lomo { flex-direction: row; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; }
	.ae-cart__barra { width: 3px; height: 26px; margin: 0; }
	.ae-cart__dow { margin: 0; }
	.ae-cart__dia { font-size: 26px; }
	.ae-cart__mes { margin-top: 0; }
	.ae-cart__hora { margin: 0 0 0 auto; padding: 0; border: 0; width: auto; }
	.ae-cart__anio { margin: 0; padding: 0; writing-mode: horizontal-tb; transform: none; letter-spacing: .18em; }
	.ae-cart__riel { border-left: 0; border-top: 1px solid var(--ae-line); }

	/* «Ver todos» se va a la izquierda: alineado a la derecha, en un teléfono
	   le queda justo debajo el botón flotante de WhatsApp, que es fijo. */
	.ae-cart__riel-pie { text-align: left; }
}

@media (max-width: 767px) {
	.ae-bloque { margin-top: 34px; }
	.ae-fechas__title { font-size: 25px; }
	.ae-fechas__head { flex-wrap: wrap; gap: 8px; }
	.ae-fechas__nota { margin-left: 0; }
	.ae-form__card { padding: 24px 20px; }
	.ae-form__par { grid-template-columns: 1fr; }
	.ae-ficha { grid-template-columns: 1fr; gap: 16px; padding: 18px 18px; }
	.ae-fecha--elegible { flex-wrap: wrap; }
	.ae-fecha__cupo { text-align: left; padding-left: 34px; }
	.ae-lista,
	.ae-lista--cols-2,
	.ae-lista--cols-3,
	.ae-lista--cols-4 { grid-template-columns: 1fr; }
	.ae-archivo__title { font-size: 32px; }
	.ae-flyer { margin-bottom: 26px; }
	.ae-card--banner { flex-direction: column; }
	.ae-card--banner .ae-card__media { flex: 1 1 auto; max-width: none; }
	.ae-card--banner .ae-card__img { height: 190px; min-height: 0; }
	.ae-card__pie { flex-direction: column; align-items: stretch; }
	.ae-card__btn { text-align: center; }
	.ae-cart__hero { padding: 18px 18px 16px; }
	.ae-cart__titulo { font-size: 21px; }
	.ae-cart__texto { display: none; }
	.ae-cart__botones { flex-direction: column; align-items: stretch; }
	.ae-cart__btn { justify-content: center; }
	.ae-done { padding: 24px 20px; }
	/* 16px evita que iOS haga zoom al enfocar un campo. */
	.ae-field__input { font-size: 16px; }
}