/* Eventos, «La agenda de la isla» (docs/diseno-paginas/eventos.md). Se carga en la agenda (/events/, gb_pieza() =
   eventos) y también en cada plan (/events/{slug}/: lo carga plantillas/evento.php), porque aquí está lo común: la hoja
   de mes, el cartel, el desplegable del calendario, la tarjeta de villa cerca y los capítulos. Lo propio de la ficha de
   un plan está en evento.css. Todo acotado a body.vista-eventos / body.vista-evento. Móvil primero.
   El movimiento va solo bajo html.animar (header.php): sin él, la página se ve completa y quieta. */

:is(.vista-eventos, .vista-evento) {
	--agd-c0: #90c947; /* el verde de la casa */
	--agd-c1: #106189; /* el azul */
	--agd-c2: #d99a00;
	--agd-c3: #5fb0b0;
	--agd-claro: #cfe8a6;
	--agd-noche: #072a33;
	--agd-papel: #fffdf6;
	--agd-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
	--agd-firma: linear-gradient(90deg, var(--verde), #5fb0b0, var(--azul));
}

/* Cabecera fundida (D-14): arriba del todo, en blanco sobre el azul de la portada; al bajar, la de siempre */
.js :is(.vista-eventos, .vista-evento) .cabecera:not(.is-solida) { color: #fff; }
.js :is(.vista-eventos, .vista-evento) .cabecera:not(.is-solida) .cabecera__logo { color: #fff; }
.js :is(.vista-eventos, .vista-evento) :is(.agenda, .plan) { padding-top: 0; } /* sin JS, la cabecera es sólida y el main deja su hueco */

/* ── Capítulos: número grande en trazo, título y entradilla ─────────────── */
:is(.vista-eventos, .vista-evento) .agd-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 18px; margin-bottom: clamp(28px, 4vw, 48px); }
:is(.vista-eventos, .vista-evento) .agd-cap__n {
	font-family: var(--f-titulo); font-size: clamp(3.6rem, 2.4rem + 3.6vw, 6rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.03em;
	color: transparent; -webkit-text-stroke: 1px var(--verde-oscuro); font-variant-numeric: tabular-nums;
}
:is(.vista-eventos, .vista-evento) .agd-cap__texto { min-width: 0; }
:is(.vista-eventos, .vista-evento) .agd-cap__titulo { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 200; line-height: 1.02; letter-spacing: -0.025em; }
:is(.vista-eventos, .vista-evento) .agd-cap__d { max-width: 38em; margin-top: 10px; font-size: var(--t-m); color: var(--tinta-suave); }
/* En el móvil: el número y el título en la misma línea; la entradilla, debajo a todo el ancho */
@media (max-width: 899px) {
	:is(.vista-eventos, .vista-evento) .agd-cap { align-items: end; }
	:is(.vista-eventos, .vista-evento) .agd-cap__texto { display: contents; }
	:is(.vista-eventos, .vista-evento) .agd-cap__titulo { grid-column: 2; align-self: end; }
	:is(.vista-eventos, .vista-evento) .agd-cap__d { grid-column: 1 / -1; margin-top: 6px; }
	:is(.vista-eventos, .vista-evento) .agd-cap__n { font-size: clamp(3rem, 2.2rem + 3vw, 4rem); }
}

/* El subrayado de la casa (del verde al azul) en los enlaces de título */
:is(.vista-eventos, .vista-evento) :is(.cartel__titulo a, .hoja-mes__plan[href], .hoja-despues a .hoja-despues__plan) {
	text-decoration: none; background: var(--agd-firma) 0 100% / 0 2px no-repeat; transition: background-size 0.45s var(--agd-ease);
}
:is(.vista-eventos, .vista-evento) :is(.cartel__titulo a:hover, .cartel__titulo a:focus-visible, .hoja-mes__plan[href]:hover, .hoja-despues a:hover .hoja-despues__plan) { background-size: 100% 2px; }

/* ── Portada de la agenda ───────────────────────────────────────────────── */
.vista-eventos .agd-portada {
	position: relative; isolation: isolate; overflow: hidden; color: #fff;
	padding-block: clamp(28px, 6vw, 72px) clamp(56px, 7vw, 104px);
	background: radial-gradient(110% 120% at 88% 0%, #135b6d 0%, var(--azul-noche) 46%, var(--azul-profundo) 100%);
}
.js .vista-eventos .agd-portada { padding-top: calc(var(--cabecera) + clamp(28px, 6vw, 72px)); }
.vista-eventos .agd-portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--agd-firma); }
.vista-eventos .agd-portada__isla {
	position: absolute; z-index: -1; left: -22%; bottom: -34%; width: min(110vw, 900px); aspect-ratio: 1080 / 874; overflow: visible; pointer-events: none;
	stroke: rgb(207 232 166 / 0.18); stroke-width: 2.5px; stroke-linejoin: round; --z-resto: rgb(255 255 255 / 0.02);
}
.vista-eventos .agd-portada__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.vista-eventos .agd-portada__ante { color: var(--agd-claro); }
.vista-eventos .agd-portada__titulo { font-weight: 200; line-height: 0.92; letter-spacing: -0.03em; }
.vista-eventos .agd-portada__grande { display: block; font-size: clamp(3.8rem, 1.2rem + 7.6vw, 8rem); }
.vista-eventos .agd-portada__resto { display: block; margin-top: 10px; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--agd-claro); }
.vista-eventos .agd-portada__entradilla { max-width: 30em; margin-top: 22px; font-size: var(--t-l); color: rgb(255 255 255 / 0.86); }
.vista-eventos .agd-portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vista-eventos .agd-portada__botones .boton--claro:hover .icono { transform: translateY(3px); }
.vista-eventos .agd-portada__cal { border-color: rgb(255 255 255 / 0.5); color: #fff; }
.vista-eventos .agd-portada__cal:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
.vista-eventos .agd-portada__cal .icono, .vista-eventos .agd-portada__cal:hover .icono { transform: none; }
.vista-eventos .agd-portada__hoja { width: 100%; max-width: 440px; justify-self: center; }
/* Demo en el móvil: el aviso de la demo va arriba (main.css); que no tape el titular */
@media (max-width: 767px) { .js .vista-eventos:has(.aviso-demo:not([hidden])) .agd-portada { padding-top: calc(var(--cabecera) + 112px); } }
@media (min-width: 1040px) {
	.vista-eventos .agd-portada__dentro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 5vw, 88px); }
	.vista-eventos .agd-portada__hoja { justify-self: end; }
	.vista-eventos .agd-portada__isla { left: auto; right: -12%; bottom: -30%; }
}

/* La hoja de calendario: papel, dos anillas, el día enorme con la línea del verde al azul y dos hojas detrás */
.vista-eventos .hoja-pila { position: relative; isolation: isolate; }
.vista-eventos .hoja-pila::before, .vista-eventos .hoja-pila::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: #ebe8dc; box-shadow: 0 18px 40px rgb(0 0 0 / 0.22);
	transform: rotate(-3deg) translate(-10px, 10px);
}
.vista-eventos .hoja-pila::after { background: #d9d5c6; transform: rotate(2.6deg) translate(10px, 16px); z-index: -2; }
.vista-eventos .hoja {
	position: relative; display: grid; justify-items: start; padding: 30px clamp(22px, 4vw, 34px) 28px; border-radius: 22px; background: var(--agd-papel); color: var(--tinta);
	text-decoration: none; box-shadow: 0 30px 70px rgb(0 0 0 / 0.32); transition: transform 0.45s var(--agd-ease);
}
.vista-eventos a.hoja:hover { transform: rotate(-0.8deg) translateY(-3px); }
.vista-eventos a.hoja:focus-visible { outline-color: var(--agd-claro); outline-offset: 4px; }
/* La perforación de arriba (por donde se arranca) */
.vista-eventos .hoja::before { content: ""; position: absolute; left: 22px; right: 22px; top: 16px; border-top: 2px dotted rgb(23 38 43 / 0.16); }
.vista-eventos .hoja__anillas { position: absolute; top: -14px; left: 50%; display: flex; gap: 64px; transform: translateX(-50%); }
.vista-eventos .hoja__anillas span { width: 12px; height: 30px; border-radius: 6px; background: linear-gradient(90deg, #8c9aa0, #e9eef0 45%, #7b898f); box-shadow: 0 2px 3px rgb(0 0 0 / 0.3); }
.vista-eventos .hoja__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; margin-top: 6px; }
.vista-eventos .hoja__ante { font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--verde-oscuro); }
:is(.vista-eventos, .vista-evento) :is(.hoja__rel, .cartel__rel, .plan-fecha__rel) {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em;
	background: color-mix(in srgb, var(--c, var(--verde)) 18%, #fff); color: color-mix(in srgb, var(--c, var(--verde)) 55%, #000);
}
:is(.vista-eventos, .vista-evento) :is(.hoja__rel, .cartel__rel, .plan-fecha__rel).is-ahora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vista-eventos .hoja__mes { margin-top: 18px; font-family: var(--f-titulo); font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); font-style: italic; line-height: 1; color: color-mix(in srgb, var(--c, var(--verde)) 55%, #000); }
.vista-eventos .hoja__mes small { font-size: 0.6em; font-style: normal; letter-spacing: 0.08em; color: var(--tinta-suave); }
.vista-eventos .hoja__dia {
	margin: 4px 0 2px -0.06em; font-family: var(--f-titulo); font-size: clamp(7.5rem, 5rem + 9vw, 11.5rem); font-weight: 200; line-height: 0.82; letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #6aa432 10%, #3f9b9e 50%, var(--azul) 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vista-eventos .hoja__cuando { font-size: var(--t-l); text-transform: capitalize; color: var(--tinta); }
.vista-eventos .hoja__cuando time { text-transform: none; }
.vista-eventos .hoja__cuando time > span[aria-hidden] { text-transform: capitalize; }
.vista-eventos .hoja__plan { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); width: 100%; font-family: var(--f-titulo); font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.15; }
.vista-eventos .hoja__donde { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--t-s); color: var(--tinta-suave); }
.vista-eventos .hoja__donde .icono { color: color-mix(in srgb, var(--c, var(--verde)) 55%, #000); }
.vista-eventos .hoja--vacia { gap: 12px; }
.vista-eventos .hoja__nada { color: var(--tinta-suave); }

/* Y después: las tres citas siguientes, en una lista corta bajo la hoja */
.vista-eventos .hoja-despues { margin-top: 30px; }
.vista-eventos .hoja-despues__t { margin-bottom: 8px; font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--agd-claro); }
.vista-eventos .hoja-despues__lista li + li { border-top: 1px solid rgb(255 255 255 / 0.1); }
.vista-eventos .hoja-despues a { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; color: #fff; text-decoration: none; }
.vista-eventos .hoja-despues__fecha { display: flex; align-items: baseline; gap: 4px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.7); }
.vista-eventos .hoja-despues__fecha b { font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 300; letter-spacing: 0; color: #fff; }
.vista-eventos .hoja-despues__plan { position: relative; justify-self: start; padding-left: 16px; font-size: var(--t-s); line-height: 1.3; }
.vista-eventos .hoja-despues__plan::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.vista-eventos .hoja-despues__hora { font-size: var(--t-s); color: rgb(255 255 255 / 0.72); font-variant-numeric: tabular-nums; }

/* ── 01 · La tira de meses ──────────────────────────────────────────────── */
.vista-eventos .agd-meses { padding-block: clamp(64px, 9vw, 120px) clamp(48px, 7vw, 96px); background: var(--arena); }
.vista-eventos .agd-meses .agd-cap { grid-template-columns: auto minmax(0, 1fr); }
.vista-eventos .agd-tira__botones { display: none; }
@media (min-width: 900px) {
	.vista-eventos .agd-meses .agd-cap { grid-template-columns: auto minmax(0, 1fr) auto; }
	.vista-eventos .agd-tira__botones:not([hidden]) { display: flex; gap: 10px; align-self: end; }
}
.vista-eventos .agd-tira__boton {
	display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--tinta); border-radius: 50%; background: transparent; color: var(--tinta);
	transition: background-color var(--suave), color var(--suave), opacity var(--suave);
}
.vista-eventos .agd-tira__boton .icono { width: 22px; height: 22px; }
.vista-eventos .agd-tira__boton:hover:not(:disabled) { background: var(--tinta); color: #fff; }
.vista-eventos .agd-tira__boton:disabled { opacity: 0.3; cursor: default; }
.vista-eventos .agd-leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -12px 0 22px; font-size: var(--t-s); color: var(--tinta-suave); }
.vista-eventos .agd-leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.vista-eventos .agd-leyenda li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--c) 30%, #fff); box-shadow: inset 0 0 0 2px var(--c); }

.vista-eventos .agd-tira {
	--borde: max(var(--hueco), calc((100% - 1280px) / 2 + var(--hueco)));
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde);
	padding: 12px 0 26px; scrollbar-width: thin; scrollbar-color: rgb(23 38 43 / 0.28) transparent;
}
.vista-eventos .agd-tira:focus-visible { outline-offset: -3px; }
.vista-eventos .agd-tira__lista { display: flex; align-items: stretch; gap: 16px; width: max-content; padding-inline: max(var(--hueco), calc((100% - 1280px) / 2 + var(--hueco))); }

/* La hoja de mes (también en la ficha de un plan) */
:is(.vista-eventos, .vista-evento) .hoja-mes {
	position: relative; display: flex; flex-direction: column; gap: 16px; flex: none; width: min(304px, 82vw); padding: 20px 20px 22px;
	border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgb(15 76 92 / 0.06), 0 12px 32px rgb(15 76 92 / 0.07); scroll-snap-align: start;
}
:is(.vista-eventos, .vista-evento) .hoja-mes.is-actual { box-shadow: inset 0 0 0 2px var(--verde), 0 12px 32px rgb(15 76 92 / 0.08); }
:is(.vista-eventos, .vista-evento) .hoja-mes.is-vuelve { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(23 38 43 / 0.16); border: 0; }
:is(.vista-eventos, .vista-evento) .hoja-mes.is-vuelve::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--ambar); border-radius: inherit; pointer-events: none; }
:is(.vista-eventos, .vista-evento) .hoja-mes__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
:is(.vista-eventos, .vista-evento) .hoja-mes__mes { font-family: var(--f-titulo); font-size: 2rem; font-style: italic; font-weight: 300; line-height: 1; }
:is(.vista-eventos, .vista-evento) .hoja-mes__mes small { margin-left: 2px; font-family: var(--f-texto); font-size: var(--t-xs); font-style: normal; letter-spacing: 0.14em; color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .hoja-mes__este { padding: 3px 10px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-oscuro); font-size: 0.8125rem; font-weight: 600; }
:is(.vista-eventos, .vista-evento) .hoja-mes__cuenta { margin-left: auto; font-size: var(--t-xs); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
:is(.vista-eventos, .vista-evento) .hoja-mes__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; text-align: center; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
:is(.vista-eventos, .vista-evento) .hoja-mes__sem { padding-bottom: 6px; font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .hoja-mes__dia { position: relative; z-index: 0; display: grid; place-items: center; aspect-ratio: 1; color: var(--tinta); }
:is(.vista-eventos, .vista-evento) .hoja-mes__dia.is-cita { font-weight: 600; color: color-mix(in srgb, var(--c1) 52%, #000); }
:is(.vista-eventos, .vista-evento) .hoja-mes__dia.is-cita::before {
	content: ""; position: absolute; inset: 7%; z-index: -1; border-radius: 50%;
	background: color-mix(in srgb, var(--c1) 26%, #fff); box-shadow: inset 0 0 0 2px var(--c1);
}
:is(.vista-eventos, .vista-evento) .hoja-mes__dia.is-doble::before { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, #fff) 50%, color-mix(in srgb, var(--c2) 30%, #fff) 50%); box-shadow: inset 0 0 0 2px var(--c2); }
:is(.vista-eventos, .vista-evento) .hoja-mes__dia.is-pasado { color: rgb(23 38 43 / 0.32); }
:is(.vista-eventos, .vista-evento) .hoja-mes__dia.is-cita.is-pasado::before { opacity: 0.4; }
:is(.vista-eventos, .vista-evento) .hoja-mes__dia.is-hoy::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tinta); }
:is(.vista-eventos, .vista-evento) .hoja-mes.is-vacia .hoja-mes__rejilla, :is(.vista-eventos, .vista-evento) .hoja-mes.is-vuelve .hoja-mes__rejilla { opacity: 0.5; }
:is(.vista-eventos, .vista-evento) .hoja-mes__lista { display: grid; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea); }
:is(.vista-eventos, .vista-evento) .hoja-mes__lista li { position: relative; display: grid; gap: 2px; padding-left: 18px; }
:is(.vista-eventos, .vista-evento) .hoja-mes__lista li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--c) 30%, #fff); box-shadow: inset 0 0 0 2px var(--c); }
:is(.vista-eventos, .vista-evento) .hoja-mes__lista li.is-vuelve::before { background: transparent; box-shadow: none; border: 1.5px dashed var(--c); }
:is(.vista-eventos, .vista-evento) .hoja-mes__plan { justify-self: start; font-family: var(--f-titulo); font-size: 1.08rem; line-height: 1.2; color: var(--tinta); }
:is(.vista-eventos, .vista-evento) .hoja-mes__dias { font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .hoja-mes__vacio { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea); font-size: var(--t-s); color: var(--tinta-suave); }
/* Los meses sin nada, juntos y estrechos; y el final de la tira */
.vista-eventos .hoja-mes--hueco {
	justify-content: center; width: min(220px, 62vw); background: repeating-linear-gradient(135deg, transparent 0 12px, rgb(23 38 43 / 0.035) 12px 13px), var(--arena);
	box-shadow: inset 0 0 0 1.5px rgb(23 38 43 / 0.12);
}
.vista-eventos .hoja-mes--hueco .hoja-mes__mes { font-size: 1.7rem; }
.vista-eventos .hoja-mes--hueco .hoja-mes__vacio { margin-top: 0; padding-top: 12px; }
.vista-eventos .hoja-mes--fin { justify-content: flex-end; width: min(280px, 78vw); background: var(--azul-noche); color: #fff; box-shadow: 0 18px 44px rgb(15 76 92 / 0.22); }
.vista-eventos .hoja-mes__icono { width: 38px; height: 38px; color: var(--agd-claro); }
.vista-eventos .hoja-mes__fin-t { margin-top: auto; font-size: 1.8rem; font-weight: 300; line-height: 1.05; }
.vista-eventos .hoja-mes__fin-d { color: rgb(255 255 255 / 0.8); }
.vista-eventos .hoja-mes__fin-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-size: var(--t-m); text-underline-offset: 4px; }
.vista-eventos .hoja-mes__fin-wa .icono { color: var(--whatsapp); }

/* ── 02 · En cartel ─────────────────────────────────────────────────────── */
.vista-eventos .agd-carteles { padding-block: clamp(64px, 9vw, 128px); background: var(--papel); }
.vista-eventos .agd-carteles__lista { display: grid; gap: clamp(64px, 9vw, 120px); }

:is(.vista-eventos, .vista-evento) .cartel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; scroll-margin-top: calc(var(--cabecera) + 24px); }
:is(.vista-eventos, .vista-evento) .cartel__imagen { position: relative; align-self: start; padding: 18px 10px 0 12px; }
/* El cartel, pegado en la pared: papel, sombra y un poco girado. Al pasar, se endereza */
:is(.vista-eventos, .vista-evento) .cartel__marco {
	--giro: -1.4deg; display: block; padding: clamp(8px, 1.2vw, 14px); border-radius: 6px; background: #fff; transform: rotate(var(--giro));
	box-shadow: 0 2px 4px rgb(15 76 92 / 0.08), 0 26px 60px rgb(15 76 92 / 0.18); transition: transform 0.6s var(--agd-ease);
}
:is(.vista-eventos, .vista-evento) .cartel--par .cartel__marco { --giro: 1.2deg; }
:is(.vista-eventos, .vista-evento) .cartel:hover .cartel__marco { transform: rotate(0deg) scale(1.01); }
:is(.vista-eventos, .vista-evento) .cartel__img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 295; object-fit: cover; border-radius: 2px; background: var(--azul-noche); }
/* Detrás, una mancha del color del plan */
:is(.vista-eventos, .vista-evento) .cartel__imagen::before { content: ""; position: absolute; z-index: -1; inset: 34% -2% -6% 18%; border-radius: 28px; background: color-mix(in srgb, var(--c) 16%, #fff); }
:is(.vista-eventos, .vista-evento) .cartel--par .cartel__imagen::before { inset: 34% 18% -6% -2%; }
/* El sello con la fecha, como el matasellos del cartel */
:is(.vista-eventos, .vista-evento) .cartel__sello {
	position: absolute; z-index: 2; top: 0; left: 0; display: grid; justify-items: center; min-width: 96px; padding: 12px 14px 12px; border-radius: 20px;
	background: var(--agd-noche); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), 0 14px 30px rgb(0 0 0 / 0.25); transform: rotate(-4deg); text-align: center;
}
:is(.vista-eventos, .vista-evento) .cartel--par .cartel__sello { left: auto; right: 0; transform: rotate(4deg); }
:is(.vista-eventos, .vista-evento) .cartel__sello-sem, :is(.vista-eventos, .vista-evento) .cartel__sello-mes { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--agd-claro); }
:is(.vista-eventos, .vista-evento) .cartel__sello-dia { font-family: var(--f-titulo); font-size: 3.4rem; font-weight: 200; line-height: 0.95; font-variant-numeric: tabular-nums; }
:is(.vista-eventos, .vista-evento) .cartel__mas {
	position: absolute; right: clamp(22px, 3vw, 34px); bottom: clamp(14px, 2vw, 22px); padding: 6px 14px; border-radius: 999px;
	background: rgb(7 42 51 / 0.9); color: #fff; font-size: var(--t-xs); letter-spacing: 0.02em;
}
:is(.vista-eventos, .vista-evento) .cartel--par .cartel__mas { right: auto; left: clamp(22px, 3vw, 34px); }
:is(.vista-eventos, .vista-evento) .cartel__texto { min-width: 0; }
:is(.vista-eventos, .vista-evento) .cartel__ante { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde-oscuro); }
:is(.vista-eventos, .vista-evento) .cartel__ritmo { padding: 4px 12px; border-radius: 999px; background: var(--arena); color: var(--tinta); letter-spacing: 0.02em; text-transform: none; font-size: var(--t-xs); }
:is(.vista-eventos, .vista-evento) .cartel__titulo { margin: 14px 0 0; font-family: var(--f-titulo); font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); font-weight: 200; line-height: 1.02; letter-spacing: -0.025em; }
:is(.vista-eventos, .vista-evento) .cartel__titulo a { color: inherit; }
:is(.vista-eventos, .vista-evento) .cartel__proxima { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: var(--t-l); }
:is(.vista-eventos, .vista-evento) .cartel__proxima--fin { display: grid; justify-items: start; gap: 6px; color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .cartel__vuelve { font-size: var(--t-s); color: var(--tinta); }
:is(.vista-eventos, .vista-evento) .cartel__resumen { max-width: 36em; margin-top: 16px; font-size: var(--t-m); color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .cartel__datos { display: grid; margin-top: 22px; border-top: 1px solid var(--linea); }
:is(.vista-eventos, .vista-evento) .cartel__datos > div { display: grid; align-content: start; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
:is(.vista-eventos, .vista-evento) .cartel__datos dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .cartel__datos dd { margin: 0; font-size: var(--t-m); }
:is(.vista-eventos, .vista-evento) .cartel__linea { display: block; }
:is(.vista-eventos, .vista-evento) .cartel__llegar { display: inline-block; margin-left: 4px; color: var(--verde-oscuro); text-underline-offset: 4px; white-space: nowrap; }
:is(.vista-eventos, .vista-evento) .cartel__acciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 24px; }
:is(.vista-eventos, .vista-evento) .cartel__dormir {
	display: flex; align-items: center; gap: 16px; max-width: 460px; margin-top: 24px; padding: 12px 18px 12px 14px; border-radius: 18px;
	background: var(--verde-claro); color: var(--tinta); text-decoration: none; transition: background-color var(--suave);
}
:is(.vista-eventos, .vista-evento) .cartel__dormir:hover { background: var(--verde-suave); }
:is(.vista-eventos, .vista-evento) .cartel__dormir > .icono { margin-left: auto; color: var(--verde-oscuro); transition: transform var(--suave); }
:is(.vista-eventos, .vista-evento) .cartel__dormir:hover > .icono { transform: translateX(4px); }
:is(.vista-eventos, .vista-evento) .cartel__dormir-texto { display: grid; font-size: var(--t-m); line-height: 1.25; }
:is(.vista-eventos, .vista-evento) .cartel__dormir-ante { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde-oscuro); }
:is(.vista-eventos, .vista-evento) .cartel__ritmo-mini { margin-top: 6px; font-size: var(--t-s); color: var(--tinta-suave); }
@media (min-width: 560px) {
	:is(.vista-eventos, .vista-evento) .cartel__datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
}
@media (min-width: 900px) {
	.vista-eventos .cartel--grande { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
	.vista-eventos .cartel--grande.cartel--par .cartel__imagen { order: 2; }
	.vista-eventos .cartel--grande .cartel__sello { min-width: 112px; }
	.vista-eventos .cartel--grande .cartel__sello-dia { font-size: 4.2rem; }
}

/* La isla pequeña con su municipio encendido y el punto del pueblo */
:is(.vista-eventos, .vista-evento) .isla-mini { position: relative; display: block; flex: none; width: 78px; }
:is(.vista-eventos, .vista-evento) .isla-mini__svg { display: block; width: 100%; height: 100%; overflow: visible; stroke: var(--verde-oscuro); stroke-width: 9px; stroke-linejoin: round; stroke-opacity: 0.55; --z-resto: #fff; }
:is(.vista-eventos, .vista-evento) .isla-mini__pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--agd-noche); box-shadow: 0 0 0 2px #fff; }

/* Ya pasó: pequeños y sin color */
.vista-eventos .agd-pasados { margin-top: clamp(72px, 10vw, 128px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linea); }
.vista-eventos .agd-pasados__t { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 200; }
.vista-eventos .agd-pasados__d { margin-top: 6px; color: var(--tinta-suave); }
.vista-eventos .agd-pasados__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
:is(.vista-eventos, .vista-evento) .cartel--pasado, :is(.vista-eventos, .vista-evento) .cartel--mini { gap: 18px; }
.vista-eventos .cartel--pasado { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); align-items: center; padding: 14px; border-radius: 22px; background: var(--arena); }
.vista-eventos .cartel--pasado .cartel__imagen { padding: 8px 0 0 8px; }
.vista-eventos .cartel--pasado .cartel__imagen::before { display: none; }
.vista-eventos .cartel--pasado .cartel__img { filter: grayscale(1) contrast(0.92); }
.vista-eventos .cartel--pasado .cartel__marco { --giro: 0deg; padding: 6px; box-shadow: 0 1px 2px rgb(15 76 92 / 0.08), 0 10px 24px rgb(15 76 92 / 0.08); }
:is(.vista-eventos, .vista-evento) :is(.cartel--pasado, .cartel--mini) .cartel__sello { min-width: 70px; padding: 8px 10px; border-radius: 14px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
:is(.vista-eventos, .vista-evento) :is(.cartel--pasado, .cartel--mini) .cartel__sello-dia { font-size: 2.2rem; }
:is(.vista-eventos, .vista-evento) :is(.cartel--pasado, .cartel--mini) .cartel__sello-sem, :is(.vista-eventos, .vista-evento) :is(.cartel--pasado, .cartel--mini) .cartel__sello-mes { font-size: 0.6875rem; }
.vista-eventos .cartel--pasado .cartel__sello { background: #5d6b70; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9aa6aa; }
:is(.vista-eventos, .vista-evento) :is(.cartel--pasado, .cartel--mini) .cartel__titulo { margin-top: 10px; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
:is(.vista-eventos, .vista-evento) :is(.cartel--pasado, .cartel--mini) .cartel__proxima { margin-top: 10px; font-size: var(--t-m); }
@media (min-width: 640px) {
	.vista-eventos .cartel--pasado { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: 28px; }
	.vista-eventos .agd-pasados__lista { grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
}

/* ── Añadir al calendario (desplegable, va sin JS) ─────────────────────── */
:is(.vista-eventos, .vista-evento) .agd-cal { position: relative; }
:is(.vista-eventos, .vista-evento) .agd-cal__boton {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1.5px solid var(--tinta); border-radius: 999px;
	color: var(--tinta); font-size: var(--t-m); line-height: 1; list-style: none; cursor: pointer; user-select: none; transition: background-color var(--suave), color var(--suave);
}
:is(.vista-eventos, .vista-evento) .agd-cal__boton::-webkit-details-marker { display: none; }
:is(.vista-eventos, .vista-evento) .agd-cal__boton:hover, :is(.vista-eventos, .vista-evento) .agd-cal[open] .agd-cal__boton { background: var(--tinta); color: #fff; }
:is(.vista-eventos, .vista-evento) .agd-cal__flecha { width: 18px; height: 18px; transition: transform var(--suave); }
:is(.vista-eventos, .vista-evento) .agd-cal[open] .agd-cal__flecha { transform: rotate(180deg); }
:is(.vista-eventos, .vista-evento) .agd-cal__panel { display: grid; gap: 2px; width: min(340px, 100%); margin-top: 8px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: var(--sombra-g); }
:is(.vista-eventos, .vista-evento) .agd-cal__op { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px; border-radius: 12px; color: var(--tinta); text-decoration: none; transition: background-color var(--suave); }
:is(.vista-eventos, .vista-evento) .agd-cal__op:hover { background: var(--verde-claro); }
:is(.vista-eventos, .vista-evento) .agd-cal__op .icono { width: 22px; height: 22px; margin-top: 1px; color: var(--verde-oscuro); }
:is(.vista-eventos, .vista-evento) .agd-cal__op strong { display: block; font-weight: 600; }
:is(.vista-eventos, .vista-evento) .agd-cal__op small { display: block; margin-top: 2px; font-size: var(--t-xs); line-height: 1.35; color: var(--tinta-suave); }
@media (min-width: 600px) {
	:is(.vista-eventos, .vista-evento) .agd-cal__panel { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: 340px; margin-top: 0; }
}
:is(.vista-eventos, .vista-evento) .agd-cal--oscuro .agd-cal__boton { border-color: rgb(255 255 255 / 0.5); color: #fff; }
:is(.vista-eventos, .vista-evento) .agd-cal--oscuro .agd-cal__boton:hover, :is(.vista-eventos, .vista-evento) .agd-cal--oscuro[open] .agd-cal__boton { background: #fff; color: var(--tinta); }

/* ── Tarjeta de una villa cerca ─────────────────────────────────────────── */
:is(.vista-eventos, .vista-evento) .casa-cerca__enlace { position: relative; display: grid; gap: 14px; color: var(--tinta); text-decoration: none; }
:is(.vista-eventos, .vista-evento) .casa-cerca__foto { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 22px; background: var(--tono, var(--verde-claro)); }
:is(.vista-eventos, .vista-evento) .casa-cerca__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--agd-ease); }
:is(.vista-eventos, .vista-evento) .casa-cerca__enlace:hover .casa-cerca__foto img { transform: scale(1.04); }
:is(.vista-eventos, .vista-evento) .casa-cerca__n {
	position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
	background: var(--azul); color: #fff; font-size: var(--t-m); font-weight: 600; box-shadow: 0 0 0 3px #fff;
}
:is(.vista-eventos, .vista-evento) .casa-cerca__texto { display: grid; gap: 4px; }
:is(.vista-eventos, .vista-evento) .casa-cerca__zona { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde-oscuro); }
:is(.vista-eventos, .vista-evento) .casa-cerca__nombre { font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); line-height: 1.05; letter-spacing: -0.015em; }
:is(.vista-eventos, .vista-evento) .casa-cerca__nombre em { font-size: 0.62em; letter-spacing: 0; }
:is(.vista-eventos, .vista-evento) .casa-cerca__datos { font-size: var(--t-s); color: var(--tinta-suave); }
:is(.vista-eventos, .vista-evento) .casa-cerca__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: var(--t-s); }
:is(.vista-eventos, .vista-evento) .casa-cerca__km { display: inline-flex; align-items: center; gap: 6px; color: var(--azul); }
:is(.vista-eventos, .vista-evento) .casa-cerca__desde b { font-weight: 600; }

/* ── Ver la agenda otro día (solo en la demo) ──────────────────────────── */
.vista-eventos .agd-demo { padding-block: 0 clamp(56px, 7vw, 96px); background: var(--papel); }
.vista-eventos .agd-demo__dia .boton { background: transparent; }
.vista-eventos .agd-demo__caja { padding: clamp(22px, 3vw, 34px); border: 1.5px dashed var(--ambar); border-radius: 24px; background: #fffaf0; }
.vista-eventos .agd-demo__solo { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fbe9bd; color: #6b4b00; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; }
.vista-eventos .agd-demo__titulo { margin-top: 12px; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 200; }
.vista-eventos .agd-demo__texto { max-width: 46em; margin-top: 8px; color: var(--tinta-suave); }
.vista-eventos .agd-demo__viendo { margin-top: 14px; font-weight: 600; color: #6b4b00; }
.vista-eventos .agd-demo__viendo a { margin-left: 6px; color: var(--verde-oscuro); }
.vista-eventos .agd-demo__dia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.vista-eventos .agd-demo__dia input { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; }
.vista-eventos .agd-demo__atajos-t { margin-top: 18px; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.vista-eventos .agd-demo__atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vista-eventos .agd-demo__atajos a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta); font-size: var(--t-s); text-decoration: none; }
.vista-eventos .agd-demo__atajos a:hover, .vista-eventos .agd-demo__atajos a[aria-current] { border-color: var(--verde-oscuro); background: var(--verde-claro); }
.vista-eventos .agd-demo__fuente { margin-top: 16px; font-size: var(--t-xs); color: var(--tinta-suave); }

/* ── Cierre: te buscamos casa cerca y la agenda en tu calendario ───────── */
.vista-eventos .agd-cierre {
	position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); color: #fff;
	background: radial-gradient(120% 130% at 10% 100%, #135b6d 0%, var(--azul-noche) 50%, var(--azul-profundo) 100%);
}
.vista-eventos .agd-cierre__isla { position: absolute; z-index: -1; right: -10%; top: -20%; width: min(90vw, 760px); aspect-ratio: 1080 / 749; overflow: visible; stroke: rgb(207 232 166 / 0.16); stroke-width: 2.5px; --z-resto: rgb(255 255 255 / 0.02); pointer-events: none; }
.vista-eventos .agd-cierre__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.vista-eventos .agd-cierre__ante { color: var(--agd-claro); }
.vista-eventos .agd-cierre__titulo { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.4rem); font-weight: 200; line-height: 1; letter-spacing: -0.025em; }
.vista-eventos .agd-cierre__titulo span { display: block; }
.vista-eventos .agd-cierre__titulo em { display: block; margin-top: 6px; color: var(--agd-claro); }
.vista-eventos .agd-cierre__d { max-width: 32em; margin-top: 18px; font-size: var(--t-l); color: rgb(255 255 255 / 0.84); }
.vista-eventos .agd-cierre__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vista-eventos .agd-cierre__botones .icono { transform: none !important; }
.vista-eventos .agd-cierre__wa { color: #1da851; }
.vista-eventos .agd-cierre__botones .boton--contorno { border-color: rgb(255 255 255 / 0.5); }
.vista-eventos .agd-cierre__botones .boton--contorno:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
.vista-eventos .agd-cierre__villas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; color: #fff; text-underline-offset: 4px; }
.vista-eventos .agd-cierre__villas .icono { transition: transform var(--suave); }
.vista-eventos .agd-cierre__villas:hover .icono { transform: translateX(4px); }
.vista-eventos .agd-suscribir { position: relative; padding: clamp(24px, 3.4vw, 36px); border-radius: 26px; background: var(--agd-papel); color: var(--tinta); box-shadow: 0 30px 70px rgb(0 0 0 / 0.3); }
.vista-eventos .agd-suscribir::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--agd-firma); }
.vista-eventos .agd-suscribir__icono { width: 40px; height: 40px; color: var(--verde-oscuro); }
.vista-eventos .agd-suscribir__t { margin-top: 12px; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 200; line-height: 1.05; }
.vista-eventos .agd-suscribir__d { margin-top: 10px; color: var(--tinta-suave); }
.vista-eventos .agd-suscribir__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.vista-eventos .agd-suscribir__webcal { display: inline-flex; align-items: center; min-height: 44px; color: var(--verde-oscuro); text-underline-offset: 4px; }
.vista-eventos .agd-suscribir__nota { margin-top: 14px; font-size: var(--t-xs); color: var(--tinta-suave); }
@media (min-width: 960px) {
	.vista-eventos .agd-cierre__dentro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); }
}

/* ── Movimiento (solo con html.animar) ──────────────────────────────────── */
@keyframes agd-sube { from { opacity: 0; transform: translateY(18px); } }
@keyframes agd-cae { from { transform: translateY(-34px) rotate(-5deg); } 60% { transform: translateY(4px) rotate(0.6deg); } }
@keyframes agd-abanico { from { transform: none; } }
@keyframes agd-pin { from { transform: translateY(-14px) scale(0.4); } }
@keyframes agd-enciende { from { fill-opacity: 0; } }

.animar :is(.vista-eventos, .vista-evento) .agd-portada__titulo > *, .animar :is(.vista-eventos, .vista-evento) .agd-portada__entradilla, .animar :is(.vista-eventos, .vista-evento) .agd-portada__botones { animation: agd-sube 0.9s var(--agd-ease) backwards; }
.animar :is(.vista-eventos, .vista-evento) .agd-portada__resto { animation-delay: 0.12s; }
.animar :is(.vista-eventos, .vista-evento) .agd-portada__entradilla { animation-delay: 0.22s; }
.animar :is(.vista-eventos, .vista-evento) .agd-portada__botones { animation-delay: 0.3s; }
.animar :is(.vista-eventos, .vista-evento) .hoja-pila .hoja { animation: agd-cae 0.95s var(--agd-ease) 0.2s backwards; }
.animar :is(.vista-eventos, .vista-evento) .hoja-pila::before, .animar :is(.vista-eventos, .vista-evento) .hoja-pila::after { animation: agd-abanico 0.8s var(--agd-ease) 0.7s backwards; }
.animar :is(.vista-eventos, .vista-evento) .hoja-despues { animation: agd-sube 0.8s var(--agd-ease) 0.9s backwards; }

/* Entradas suaves al llegar (eventos.js pone .con-revela y luego .is-revelada): solo transform; la opacidad, en el texto */
.animar :is(.vista-eventos, .vista-evento) .con-revela [data-revela]:not(.is-revelada) { transform: translateY(26px); }
.animar :is(.vista-eventos, .vista-evento) .con-revela .hoja-mes[data-revela]:not(.is-revelada) { transform: translateX(34px); }
.animar :is(.vista-eventos, .vista-evento) [data-agenda] [data-revela].is-revelada:not(.sin-entrada) { transition: transform 0.85s var(--agd-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.animar :is(.vista-eventos, .vista-evento) .con-revela .cartel:not(.is-revelada) .cartel__texto { opacity: 0; }
.animar :is(.vista-eventos, .vista-evento) [data-agenda] .cartel.is-revelada:not(.sin-entrada) .cartel__texto { transition: opacity 0.7s ease 0.15s; }
.animar :is(.vista-eventos, .vista-evento) .con-revela .cartel:not(.is-revelada) .cartel__marco { transform: rotate(-5deg) translateY(18px); }
.animar :is(.vista-eventos, .vista-evento) .con-revela .cartel:not(.is-revelada) .cartel__sello { transform: scale(0.6) rotate(-14deg); }
.animar :is(.vista-eventos, .vista-evento) [data-agenda] .cartel.is-revelada:not(.sin-entrada) .cartel__sello { transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.45s; }
/* Los días del mes se pintan uno a uno al llegar la hoja */
.animar :is(.vista-eventos, .vista-evento) .con-revela .hoja-mes:not(.is-revelada) .hoja-mes__dia.is-cita::before { transform: scale(0); }
.animar :is(.vista-eventos, .vista-evento) [data-agenda] .hoja-mes.is-revelada:not(.sin-entrada) .hoja-mes__dia.is-cita::before { transition: transform 0.45s cubic-bezier(0.3, 1.45, 0.5, 1); transition-delay: calc(160ms + var(--d, 0) * 16ms); }
/* La isla pequeña: se enciende su municipio y cae el punto */
.animar :is(.vista-eventos, .vista-evento) .con-revela .cartel:not(.is-revelada) .isla-mini__svg { fill-opacity: 0; }
.animar :is(.vista-eventos, .vista-evento) [data-agenda] .cartel.is-revelada:not(.sin-entrada) .isla-mini__svg { transition: fill-opacity 0.9s ease 0.6s; }
.animar :is(.vista-eventos, .vista-evento) [data-agenda] .cartel.is-revelada:not(.sin-entrada) .isla-mini__pin { animation: agd-pin 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 1s backwards; }

/* El color de cada plan (el orden de eventos.json) */
:is(.vista-eventos, .vista-evento) .cartel--c0 { --c: var(--agd-c0); }
:is(.vista-eventos, .vista-evento) .cartel--c1 { --c: var(--agd-c1); }
:is(.vista-eventos, .vista-evento) .cartel--c2 { --c: var(--agd-c2); }
:is(.vista-eventos, .vista-evento) .cartel--c3 { --c: var(--agd-c3); }
/* En escritorio, el cartel acompaña al texto mientras se lee (sticky: lo mueve el navegador, sin JS) */
@media (min-width: 900px) {
	.vista-eventos .cartel--grande .cartel__imagen { position: sticky; top: calc(var(--cabecera) + 28px); }
}
@media (max-width: 639px) {
	.vista-eventos .cartel--pasado { gap: 14px; }
	.vista-eventos .cartel--pasado .cartel__sello { min-width: 52px; padding: 5px 6px; border-radius: 10px; }
	.vista-eventos .cartel--pasado .cartel__sello-dia { font-size: 1.45rem; }
	.vista-eventos .cartel--pasado :is(.cartel__sello-sem, .cartel__sello-mes) { font-size: 0.625rem; letter-spacing: 0.12em; }
	.vista-eventos .cartel--pasado .cartel__ante { font-size: 0.75rem; letter-spacing: 0.12em; }
}
/* Tableta: el cartel a un tamaño que su foto aguanta (las de la web actual tienen 400 px de ancho) */
@media (min-width: 600px) and (max-width: 899px) {
	.vista-eventos .cartel--grande .cartel__imagen { width: min(100%, 540px); }
}