/*
 * Eventos Effix: listado público y detalle.
 *
 * Hoja de stickers troquelados: cada evento es un sticker blanco con contorno de tinta sobre
 * un papel de respaldo con líneas de medio corte. Tres valores (tinta, papel, respaldo) y una
 * señal amarilla solo para "En curso" y el foco. El estado se dice con el contorno:
 * sólido = próximo, doble = en curso, punteado sin relieve = pasado.
 *
 * Las variables de color llegan de los ajustes (CSS en línea). Todo va bajo .effix-ev para no
 * depender del tema ni pisarlo.
 */

.effix-ev {
	--effix-tinta: #0a0a0a;
	--effix-papel: #fff;
	--effix-senal: #ffe600;
	--effix-respaldo: #efefec;
	--effix-tinta-suave: color-mix(in srgb, var(--effix-tinta) 74%, var(--effix-papel));
	--effix-corte: color-mix(in srgb, var(--effix-tinta) 30%, transparent);
	--effix-display: "Effix Display", "Montserrat", system-ui, sans-serif;
	--effix-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--effix-radio: 22px;
	--effix-trazo: 3px;
	--effix-salida: cubic-bezier(0.16, 1, 0.3, 1);

	container-type: inline-size;
	container-name: effix-ev;
	box-sizing: border-box;
	color: var(--effix-tinta);
	font-family: var(--effix-texto);
	/* Explícitos: TT5 filtra su peso de texto liviano hacia adentro. */
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

.effix-ev *,
.effix-ev *::before,
.effix-ev *::after {
	box-sizing: inherit;
}

.effix-ev :where(h1, h2, h3, p, ul, li, figure) {
	margin: 0;
	padding: 0;
}

.effix-ev :where(ul[role="list"], .effix-ev-sticker__datos) {
	list-style: none;
}

.effix-ev ::selection {
	background: var(--effix-senal);
	color: var(--effix-tinta);
}

.effix-ev :where(a, button, summary, input, select):focus-visible {
	outline: var(--effix-trazo) solid var(--effix-tinta);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--effix-senal);
}

.effix-ev-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.effix-ev-icono {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* ---------- Hoja (respaldo) ---------- */

.effix-ev__hoja {
	padding: clamp(18px, 5cqi, 48px) clamp(16px, 4cqi, 44px) clamp(24px, 5cqi, 52px);
	border-radius: 30px;
	background: var(--effix-respaldo);
}

.effix-ev__cabecera {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

/* Titular con contorno de sticker: letra de tinta, borde blanco grueso y trazo exterior. */
.effix-ev__titulo {
	font-family: var(--effix-display);
	font-size: clamp(2.25rem, 10cqi, 5rem);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--effix-tinta);
	padding: 0.08em 0.08em 0;
}

/* El contorno solo donde paint-order pinta el trazo por debajo del relleno; si no, la letra
   queda negra y limpia (un trazo encima del relleno se comería la letra). */
@supports (paint-order: stroke fill) {
	.effix-ev__titulo {
		-webkit-text-stroke: 0.16em var(--effix-papel);
		paint-order: stroke fill;
		filter: drop-shadow(0 0 1.5px var(--effix-tinta)) drop-shadow(0 0 1px var(--effix-tinta)) drop-shadow(0 0 0.5px var(--effix-tinta));
	}
}

/* ---------- Lados: Próximos / Pasados ---------- */

.effix-ev__lados {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	max-width: 30rem;
	padding: 4px;
	border: var(--effix-trazo) solid var(--effix-tinta);
	border-radius: 999px;
	background: var(--effix-papel);
}

.effix-ev__lado {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	color: var(--effix-tinta);
	font-family: var(--effix-display);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s var(--effix-salida), color 0.25s var(--effix-salida);
}

.effix-ev__lado:hover {
	background: color-mix(in srgb, var(--effix-tinta) 8%, var(--effix-papel));
	color: var(--effix-tinta);
}

.effix-ev__lado[aria-selected="true"] {
	background: var(--effix-tinta);
	color: var(--effix-papel);
}

.effix-ev__conteo {
	display: inline-grid;
	place-items: center;
	min-width: 1.75em;
	height: 1.75em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: var(--effix-respaldo);
	color: var(--effix-tinta);
	font-family: var(--effix-display);
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* El amarillo es solo para "En curso" y el foco: el conteo activo va en blanco. */
.effix-ev__lado[aria-selected="true"] .effix-ev__conteo {
	background: var(--effix-papel);
}

/* ---------- Búsqueda y filtros ---------- */

/* En angosto: búsqueda a lo ancho y debajo, en una sola fila, "Filtrar" y "Buscar". */
.effix-ev__filtros {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	margin-bottom: 28px;
}

.effix-ev__buscar,
.effix-ev__mas[open] {
	grid-column: 1 / -1;
}

.effix-ev__enviar {
	justify-content: flex-end;
}

.effix-ev__mas[open] + .effix-ev__enviar {
	grid-column: 1 / -1;
}

.effix-ev__buscar {
	position: relative;
	display: flex;
	align-items: center;
}

.effix-ev__buscar .effix-ev-icono {
	position: absolute;
	left: 16px;
	pointer-events: none;
}

.effix-ev :where(input[type="search"], select) {
	/* Algunos temas dejan los campos en content-box: el relleno los sacaría de su columna. */
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 48px;
	margin: 0;
	border: 2px solid var(--effix-tinta);
	border-radius: 14px;
	background-color: var(--effix-papel);
	color: var(--effix-tinta);
	font: inherit;
	font-size: 1rem;
	caret-color: var(--effix-tinta);
}

.effix-ev input[type="search"] {
	padding: 0 16px 0 46px;
	appearance: none;
}

.effix-ev input[type="search"]::placeholder {
	color: var(--effix-tinta-suave);
	opacity: 1;
}

.effix-ev select {
	padding: 0 40px 0 14px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	cursor: pointer;
}

.effix-ev__mas > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--effix-tinta);
	border-radius: 999px;
	background: var(--effix-papel);
	font-family: var(--effix-display);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.effix-ev__mas > summary::-webkit-details-marker {
	display: none;
}

.effix-ev__mas[open] > summary {
	background: var(--effix-tinta);
	color: var(--effix-papel);
}

.effix-ev__selects {
	display: grid;
	gap: 12px;
	padding-top: 12px;
}

.effix-ev__mas,
.effix-ev__campo,
.effix-ev__buscar {
	min-width: 0;
}

.effix-ev__campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.effix-ev__enviar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}

/* ---------- Botones y enlaces ---------- */

.effix-ev-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--effix-tinta);
	border-radius: 999px;
	background: var(--effix-tinta);
	color: var(--effix-papel);
	font-family: var(--effix-display);
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--effix-salida), background-color 0.25s var(--effix-salida);
}

.effix-ev-boton:hover {
	background: color-mix(in srgb, var(--effix-tinta) 82%, var(--effix-papel));
	color: var(--effix-papel);
	transform: translateY(-1px);
}

.effix-ev-boton:active {
	transform: translateY(1px);
}

.effix-ev-boton--secundario {
	background: var(--effix-papel);
	color: var(--effix-tinta);
}

.effix-ev-boton--secundario:hover {
	background: var(--effix-respaldo);
	color: var(--effix-tinta);
}

.effix-ev-boton--inactivo,
.effix-ev-boton--inactivo:hover {
	border-style: dashed;
	background: transparent;
	color: var(--effix-tinta-suave);
	transform: none;
	cursor: not-allowed;
}

.effix-ev-enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--effix-tinta);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.effix-ev-enlace:hover {
	color: var(--effix-tinta);
	text-decoration-color: var(--effix-senal);
	text-decoration-thickness: 0.35em;
	text-underline-offset: -0.1em;
	text-decoration-skip-ink: none;
}

.effix-ev-enlace--chico {
	min-height: 0;
	margin-left: 6px;
	font-size: 0.875rem;
}

/* ---------- Grilla (hoja de stickers) ---------- */

.effix-ev__resumen {
	margin-bottom: 22px;
	color: var(--effix-tinta-suave);
	font-size: 0.9375rem;
}

.effix-ev__grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	padding: 10px;
}

.effix-ev__celda {
	position: relative;
	display: flex;
	min-width: 0;
}

/* Línea de medio corte en el respaldo, por donde se despega el sticker. */
.effix-ev__celda::before {
	content: "";
	position: absolute;
	inset: -10px;
	border: 1.5px dashed var(--effix-corte);
	border-radius: calc(var(--effix-radio) + 10px);
	pointer-events: none;
}

/* ---------- Sticker ---------- */

.effix-ev-sticker {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px;
	border-radius: var(--effix-radio);
	background: var(--effix-papel);
	box-shadow:
		0 0 0 var(--effix-trazo) var(--effix-tinta),
		0 12px 18px -14px rgb(10 10 10 / 0.55);
	transform-origin: 12% 8%;
	transition: transform 0.45s var(--effix-salida), box-shadow 0.45s var(--effix-salida);
}

/* Esquina que se levanta al despegar: deja ver el respaldo debajo. */
.effix-ev-sticker::after {
	content: "";
	position: absolute;
	right: calc(var(--effix-trazo) * -1);
	bottom: calc(var(--effix-trazo) * -1);
	width: 44px;
	height: 44px;
	border-radius: 0 0 var(--effix-radio) 0;
	background: linear-gradient(315deg, var(--effix-respaldo) 0 49%, var(--effix-tinta) 49% 52%, var(--effix-papel) 52% 100%);
	box-shadow: -3px -3px 8px -4px rgb(10 10 10 / 0.35);
	transform: scale(0);
	transform-origin: 100% 100%;
	transition: transform 0.45s var(--effix-salida);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.effix-ev-sticker:not(.effix-ev-sticker--pasado):not(.effix-ev-sticker--resumen):hover {
		transform: translateY(-4px) rotate(-0.7deg);
		box-shadow:
			0 0 0 var(--effix-trazo) var(--effix-tinta),
			0 22px 26px -16px rgb(10 10 10 / 0.5);
	}

	.effix-ev-sticker:not(.effix-ev-sticker--pasado):not(.effix-ev-sticker--resumen):hover::after {
		transform: scale(1);
	}
}

.effix-ev-sticker:not(.effix-ev-sticker--pasado):not(.effix-ev-sticker--resumen):focus-within::after {
	transform: scale(1);
}

/* En curso: contorno doble con núcleo de señal. */
.effix-ev-sticker--en_curso {
	box-shadow:
		0 0 0 var(--effix-trazo) var(--effix-tinta),
		0 0 0 calc(var(--effix-trazo) + 4px) var(--effix-senal),
		0 0 0 calc(var(--effix-trazo) * 2 + 4px) var(--effix-tinta),
		0 14px 20px -14px rgb(10 10 10 / 0.55);
}

/* Pasado: ya despegado; queda la silueta punteada y sin relieve. */
.effix-ev-sticker--pasado {
	box-shadow: none;
	outline: 2px dashed var(--effix-tinta);
	outline-offset: 0;
}

.effix-ev-sticker--pasado .effix-ev-sticker__media {
	filter: grayscale(1) contrast(1.05);
	opacity: 0.85;
}

.effix-ev-sticker__media {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--effix-radio) - 7px);
	background: var(--effix-respaldo);
}

.effix-ev-sticker__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.effix-ev-sticker__reemplazo {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 20px;
	background: var(--effix-tinta);
}

.effix-ev-sticker__logo {
	width: min(62%, 220px);
	height: auto;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--effix-papel);
}


/* Fecha: un sticker pequeño pegado encima de la imagen. */
.effix-ev-sticker__fecha {
	position: absolute;
	top: 12px;
	left: 12px;
	display: grid;
	justify-items: center;
	min-width: 72px;
	padding: 8px 12px 9px;
	border-radius: 16px;
	background: var(--effix-papel);
	box-shadow: 0 0 0 var(--effix-trazo) var(--effix-tinta), 0 6px 10px -6px rgb(10 10 10 / 0.6);
	font-family: var(--effix-display);
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-2deg);
}

.effix-ev-sticker__dia {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.effix-ev-sticker__mes {
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

/* Sin foto, la fecha es la imagen: gigante, con rotulado de sticker sobre la tinta. */
.effix-ev-sticker__media--fecha {
	aspect-ratio: 16 / 7;
	background: var(--effix-tinta);
}

.effix-ev-sticker__media--fecha .effix-ev-sticker__fecha {
	top: auto;
	bottom: 14px;
	left: 18px;
	justify-items: start;
	min-width: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--effix-tinta);
	transform: none;
}

.effix-ev-sticker__media--fecha .effix-ev-sticker__dia {
	/* cqi de la imagen: "28–30" cabe entero en la celda más angosta. */
	font-size: min(24cqi, 6rem);
	line-height: 0.9;
	-webkit-text-stroke: 0.1em var(--effix-papel);
	paint-order: stroke fill;
}

.effix-ev-sticker__media--fecha .effix-ev-sticker__mes {
	color: var(--effix-papel);
	font-size: min(4.5cqi, 1.125rem);
}

/* Si la fila estira el sticker, crece el panel de tinta y no queda blanco vacío en el cuerpo. */
.effix-ev-sticker:has(> .effix-ev-sticker__media--fecha) > .effix-ev-sticker__media--fecha {
	flex: 1 0 auto;
}

.effix-ev-sticker:has(> .effix-ev-sticker__media--fecha) > .effix-ev-sticker__cuerpo {
	flex: none;
}

/* Con estado arriba a la derecha, la fecha baja de tamaño para no tocarlo. */
.effix-ev-sticker__media--fecha:has(.effix-ev-sticker__estado) .effix-ev-sticker__dia {
	font-size: min(20cqi, 5rem);
}

.effix-ev-sticker__media--fecha .effix-ev-sticker__estado {
	top: 10px;
	right: 10px;
}

/* Estado: un sticker pequeño sobre la imagen, arriba a la derecha. */
.effix-ev-sticker__estado {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.effix-ev-sticker__estado .effix-ev-etiqueta {
	background: var(--effix-papel);
	box-shadow: 0 4px 8px -5px rgb(10 10 10 / 0.6);
	transform: rotate(2deg);
}

.effix-ev-sticker__estado .effix-ev-etiqueta--en-curso {
	background: var(--effix-senal);
}

.effix-ev-sticker__estado .effix-ev-etiqueta--agotado {
	background: var(--effix-tinta);
	box-shadow: 0 0 0 1.5px var(--effix-papel), 0 4px 8px -5px rgb(10 10 10 / 0.6);
}

.effix-ev-sticker__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 16px 10px 10px;
}

.effix-ev-etiqueta {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border: 1.5px solid var(--effix-tinta);
	border-radius: 999px;
	font-family: var(--effix-display);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.effix-ev-etiqueta--en-curso {
	background: var(--effix-senal);
}

.effix-ev-etiqueta--agotado {
	background: var(--effix-tinta);
	color: var(--effix-papel);
}

.effix-ev-etiqueta--pasado {
	border-style: dashed;
}

.effix-ev-sticker__titulo {
	font-family: var(--effix-display);
	font-size: clamp(1.0625rem, 0.95rem + 1.1cqi, 1.3125rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.effix-ev-sticker__titulo a {
	color: inherit;
	text-decoration: none;
}

.effix-ev-sticker__titulo a:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.3em;
	text-decoration-color: var(--effix-senal);
	text-underline-offset: -0.08em;
	text-decoration-skip-ink: none;
}

.effix-ev-sticker__datos {
	display: grid;
	gap: 8px;
	font-size: 0.9375rem;
}

.effix-ev-sticker__datos li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.effix-ev-sticker__datos .effix-ev-icono {
	margin-top: 0.12em;
}

.effix-ev-sticker__hora {
	display: block;
	color: var(--effix-tinta-suave);
	font-size: 0.875rem;
}

.effix-ev-sticker__extras {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding-top: 12px;
	border-top: 1.5px dashed var(--effix-corte);
	color: var(--effix-tinta-suave);
	font-size: 0.875rem;
}

.effix-ev-sticker__precio {
	color: var(--effix-tinta);
	font-family: var(--effix-display);
	font-size: 1rem;
	font-weight: 800;
}

.effix-ev-sticker__acciones {
	display: grid;
	gap: 4px;
	margin-top: auto;
	padding-top: 4px;
}

.effix-ev-sticker__acciones .effix-ev-boton {
	width: 100%;
	padding-inline: 14px;
	font-size: clamp(0.75rem, 0.6rem + 0.9cqi, 0.875rem);
	letter-spacing: 0;
}

.effix-ev-sticker__acciones .effix-ev-enlace {
	justify-self: center;
}

/* ---------- Vacío y paginación ---------- */

.effix-ev__vacio {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 32px 28px;
	border: 2px dashed var(--effix-tinta);
	border-radius: var(--effix-radio);
	background: var(--effix-papel);
}

.effix-ev__vacio-titulo {
	font-family: var(--effix-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
}

.effix-ev__paginas {
	margin-top: 40px;
}

.effix-ev__paginas ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.effix-ev__pagina {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid var(--effix-tinta);
	border-radius: 999px;
	background: var(--effix-papel);
	color: var(--effix-tinta);
	font-family: var(--effix-display);
	font-size: 0.875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

a.effix-ev__pagina:hover {
	background: var(--effix-respaldo);
	color: var(--effix-tinta);
}

.effix-ev__pagina[aria-current="page"] {
	background: var(--effix-tinta);
	color: var(--effix-papel);
}

.effix-ev__puntos {
	align-self: center;
	padding: 0 4px;
}

/* ---------- Detalle del evento ---------- */

.effix-ev--detalle {
	margin-block: 0 2.5rem;
}

.effix-ev__volver {
	margin-bottom: 12px;
}

.effix-ev-sticker--resumen {
	padding: 6px;
}

.effix-ev-sticker--resumen .effix-ev-sticker__cuerpo {
	padding: 18px 16px 16px;
}

.effix-ev-resumen__fecha {
	display: grid;
	gap: 4px;
}

.effix-ev-resumen__fecha-grande {
	font-family: var(--effix-display);
	font-size: clamp(1.75rem, 1.2rem + 3cqi, 2.75rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

/* ---------- Página completa (sin el tema) ---------- */

.effix-ev-pagina {
	--effix-tinta: #0a0a0a;
	--effix-papel: #fff;
	--effix-senal: #ffe600;
	--effix-respaldo: #efefec;
	--effix-display: "Effix Display", "Montserrat", system-ui, sans-serif;
	--effix-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
	background: var(--effix-respaldo);
	color: var(--effix-tinta);
	font-family: var(--effix-texto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

html:has(> body.effix-ev-cuerpo) {
	scrollbar-color: #0a0a0a #efefec;
}

.effix-ev-pagina,
.effix-ev-pagina *,
.effix-ev-pagina *::before,
.effix-ev-pagina *::after {
	box-sizing: border-box;
}

.effix-ev-pagina ::selection {
	background: var(--effix-senal);
	color: var(--effix-tinta);
}

.effix-ev-pagina :where(a, button):focus-visible {
	outline: 3px solid var(--effix-tinta);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--effix-senal);
}

.effix-ev-saltar:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	clip: auto;
	border-radius: 999px;
	background: var(--effix-tinta);
	color: var(--effix-papel);
	font-weight: 700;
}

.effix-ev-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
	padding: 12px clamp(16px, 4vw, 48px);
	border-bottom: 3px solid var(--effix-tinta);
	background: var(--effix-papel);
}

.effix-ev-barra__marca {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: 44px;
	overflow: hidden;
	color: var(--effix-tinta);
	text-decoration: none;
}

.effix-ev-barra__logo {
	display: block;
	width: auto;
	max-width: min(52vw, 260px);
	height: 44px;
	object-fit: contain;
}

.effix-ev-barra__nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--effix-display);
	font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.effix-ev-barra__enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--effix-tinta);
	border-radius: 999px;
	color: var(--effix-tinta);
	font-family: var(--effix-display);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.effix-ev-barra__enlace:hover {
	background: var(--effix-tinta);
	color: var(--effix-papel);
}

.effix-ev-barra__enlace .effix-ev-icono {
	width: 18px;
	height: 18px;
}

/* En angosto el enlace queda en "Agenda" para no empujar el ancho de la página. */
.effix-ev-barra__enlace-corto {
	display: none;
}

@media (max-width: 560px) {
	/* Barra baja en el celular, para que el primer sticker quepa entero a 360. */
	.effix-ev-barra {
		min-height: 56px;
		padding-block: 6px;
	}

	.effix-ev-barra__logo {
		height: 36px;
	}

	.effix-ev-pagina__contenido {
		padding-top: 12px;
	}

	.effix-ev-barra__enlace {
		padding: 0 12px;
	}

	/* Oculto a la vista pero no al lector de pantalla (el corto es aria-hidden). */
	.effix-ev-barra__enlace-largo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.effix-ev-barra__enlace-corto {
		display: inline;
	}
}

.effix-ev-pagina__contenido {
	flex: 1;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 80px);
}

.effix-ev-pagina__texto > * + * {
	margin-top: 1.5rem;
}

/* En página completa la hoja ya es la página: sin marco ni relleno propio. */
.effix-ev-pagina .effix-ev__hoja {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.effix-ev-pie {
	padding: 24px clamp(16px, 4vw, 48px);
	border-top: 1.5px dashed color-mix(in srgb, var(--effix-tinta) 30%, transparent);
	font-size: 0.875rem;
	text-align: center;
}

.effix-ev-pie a {
	color: var(--effix-tinta);
	text-underline-offset: 0.25em;
}

/* Detalle de evento en página completa. */
.effix-ev-detalle__cabecera {
	max-width: 62rem;
	margin-bottom: clamp(24px, 4vw, 40px);
}

.effix-ev-detalle__titulo {
	font-family: var(--effix-display);
	font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.75rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	text-wrap: balance;
	padding: 0.08em 0.08em 0;
}

/* Mismo rotulado de sticker que el titular del listado. */
@supports (paint-order: stroke fill) {
	.effix-ev-detalle__titulo {
		-webkit-text-stroke: 0.16em var(--effix-papel);
		paint-order: stroke fill;
		filter: drop-shadow(0 0 1.5px var(--effix-tinta)) drop-shadow(0 0 1px var(--effix-tinta)) drop-shadow(0 0 0.5px var(--effix-tinta));
	}
}

.effix-ev-detalle__extracto {
	max-width: 60ch;
	margin-top: 16px;
	color: var(--effix-tinta-suave);
	font-size: 1.125rem;
}

.effix-ev-detalle__cuerpo {
	display: grid;
	gap: 32px;
}

.effix-ev-detalle__imagen {
	margin: 0 0 36px;
}

.effix-ev-detalle__imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--effix-radio) - 7px);
}

.effix-ev-detalle__descripcion {
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.effix-ev-detalle__descripcion > * + * {
	margin-top: 1em;
}

.effix-ev-detalle__descripcion a {
	color: var(--effix-tinta);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.effix-ev-detalle .effix-ev--detalle {
	margin: 0;
}

/* En ancho, los datos empiezan a la altura del título y quedan fijos: el botón de
   WhatsApp entra en el primer pantallazo. */
@media (min-width: 960px) {
	.effix-ev-detalle {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
		column-gap: 48px;
		align-items: start;
	}

	.effix-ev-detalle__cuerpo {
		display: contents;
	}

	.effix-ev-detalle__cabecera {
		grid-column: 1;
		grid-row: 1;
	}

	.effix-ev-detalle__lateral {
		position: sticky;
		top: 24px;
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.effix-ev-detalle__principal {
		grid-column: 1;
		grid-row: 2;
	}

	.admin-bar .effix-ev-detalle__lateral {
		top: 56px;
	}
}

/* ---------- Tamaños del contenedor ---------- */

/* Angosto: búsqueda y "Filtrar" (solo ícono) en un renglón y separaciones cortas, para que el
   primer sticker suba. "Buscar" aparece con los filtros abiertos; sin ellos, el teclado envía. */
@container effix-ev (max-width: 559px) {
	.effix-ev__cabecera {
		gap: 10px;
		margin-bottom: 10px;
	}

	.effix-ev__lado {
		min-height: 40px;
	}

	.effix-ev__filtros {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		margin-bottom: 12px;
	}

	.effix-ev-sticker__cuerpo {
		gap: 8px;
		padding-top: 12px;
	}

	.effix-ev-sticker__datos {
		gap: 6px;
	}

	.effix-ev-sticker__extras {
		padding-top: 8px;
	}

	.effix-ev-sticker__acciones {
		gap: 0;
		padding-top: 2px;
	}

	.effix-ev__buscar {
		grid-column: 1;
		grid-row: 1;
	}

	.effix-ev__filtros:has(.effix-ev__mas[open]) .effix-ev__buscar {
		grid-column: 1 / -1;
	}

	.effix-ev__mas {
		grid-column: 2;
		grid-row: 1;
	}

	.effix-ev__mas[open] {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.effix-ev__mas:not([open]) > summary {
		justify-content: center;
		min-width: 48px;
		min-height: 48px;
		padding: 0 12px;
	}

	/* La palabra "Filtrar" queda para el lector de pantalla. */
	.effix-ev__mas:not([open]) > summary > span:not(.effix-ev__conteo) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.effix-ev__mas:not([open]) + .effix-ev__enviar:not(:has(a)) {
		display: none;
	}

	.effix-ev__enviar {
		grid-column: 1 / -1;
	}

	.effix-ev__resumen {
		margin-bottom: 6px;
	}
}

@container effix-ev (min-width: 560px) {
	.effix-ev__grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Una fila: búsqueda, "Filtrar" y "Buscar"; los selects abiertos bajan a la segunda. */
	.effix-ev__filtros {
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: start;
	}

	.effix-ev__buscar {
		grid-column: 1;
	}

	.effix-ev__mas {
		grid-column: 2;
		grid-row: 1;
	}

	.effix-ev__mas[open] {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.effix-ev__selects {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.effix-ev__enviar,
	.effix-ev__mas[open] + .effix-ev__enviar {
		grid-column: 3;
		grid-row: 1;
		flex-wrap: nowrap;
	}

	.effix-ev-sticker--resumen .effix-ev-sticker__acciones {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 10px;
	}
}

@container effix-ev (min-width: 900px) {
	.effix-ev__cabecera {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 24px 40px;
	}

	.effix-ev__lados {
		min-width: 22rem;
	}

	.effix-ev__filtros {
		grid-template-columns: minmax(16rem, 1.2fr) minmax(0, 2fr) auto;
		align-items: end;
	}

	.effix-ev__mas,
	.effix-ev__mas[open] {
		grid-column: 2;
		grid-row: 1;
	}

	/* Con JS el desplegable se abre solo en pantallas anchas y el botón sobra. Sin JS el
	   botón se queda: un <details> cerrado no se puede abrir desde CSS. */
	.effix-ev--js .effix-ev__mas[open] > summary {
		display: none;
	}

	.effix-ev--js .effix-ev__selects {
		padding-top: 0;
	}

	.effix-ev__enviar {
		grid-column: 3;
		grid-row: 1;
		flex-wrap: nowrap;
		min-height: 48px;
	}

	.effix-ev__grilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 36px;
	}

	.effix-ev[data-columnas="1"] .effix-ev__grilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.effix-ev[data-columnas="2"] .effix-ev__grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* El destacado domina la hoja: dos celdas, imagen a la izquierda. */
	.effix-ev__celda--destacada {
		grid-column: span 2;
	}

	.effix-ev[data-columnas="1"] .effix-ev__celda--destacada {
		grid-column: auto;
	}

	.effix-ev-sticker--destacado {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 8px;
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__cuerpo {
		padding: 22px 18px 14px;
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__titulo {
		font-size: clamp(1.5rem, 1rem + 1.4cqi, 2rem);
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__fecha {
		top: 18px;
		left: 18px;
		min-width: 92px;
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__dia {
		font-size: 2.75rem;
	}

	/* Destacado sin foto: en vez de una columna alta de tinta vacía, la fecha ocupa un panel
	   ancho arriba y los datos van debajo. */
	.effix-ev-sticker--destacado:has(.effix-ev-sticker__media--fecha) {
		display: flex;
	}

	/* Baja para que la fila no estire a sus vecinos. */
	.effix-ev-sticker--destacado .effix-ev-sticker__media--fecha {
		aspect-ratio: 16 / 4.6;
		min-height: 0;
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__media--fecha .effix-ev-sticker__fecha {
		top: auto;
		bottom: 22px;
		left: 28px;
		min-width: 0;
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__media--fecha .effix-ev-sticker__dia {
		font-size: min(24cqi, 11rem);
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__media--fecha:has(.effix-ev-sticker__estado) .effix-ev-sticker__dia {
		font-size: min(20cqi, 9rem);
	}

	.effix-ev-sticker--destacado .effix-ev-sticker__media--fecha .effix-ev-sticker__mes {
		font-size: min(3cqi, 1.5rem);
	}
}

@container effix-ev (min-width: 1240px) {
	.effix-ev[data-columnas="4"] .effix-ev__grilla {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.effix-ev *,
	.effix-ev *::before,
	.effix-ev *::after {
		transition-duration: 0.01ms !important;
	}

	.effix-ev-sticker:hover,
	.effix-ev-boton:hover,
	.effix-ev-boton:active {
		transform: none !important;
	}
}

@media (forced-colors: active) {
	.effix-ev-sticker {
		border: 2px solid CanvasText;
	}

	.effix-ev__lado[aria-selected="true"] {
		border: 2px solid Highlight;
	}
}