/* ==========================================================================
   Foro de la Comunidad Informatica — estilos del theme
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Todo lo que se salta con un link de ancla necesita este aire para no
   quedar tapado por el header, que en toda pagina es sticky o fixed. */
main [id] { scroll-margin-top: var(--altura-header); }

body {
	margin: 0;
	font-family: var(--fuente);
	font-size: var(--tam-body);
	line-height: 1.65;
	color: var(--negro);
	background: var(--fondo-claro);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fuente);
	color: var(--negro);
	line-height: 1.11;
	margin: 0 0 0.5em;
}

.foco-container {
	width: 100%;
	max-width: var(--contenedor-max);
	margin-inline: auto;
	padding-inline: var(--padding-lateral);
}

.foco-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--azul-evento);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: #fff;
	transition: background-color .25s ease, border-color .25s ease;
}
.foco-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-6); min-height: var(--altura-header); padding-block: var(--espacio-3); }
.foco-header__cta { margin-left: auto; }
.foco-brand__link { display: inline-flex; line-height: 0; }
.foco-header .foco-logo { height: 34px; }

.foco-nav { flex: 1; }
.foco-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espacio-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.foco-nav__list a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	font-size: var(--tam-caption);
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Interruptor de modo oscuro: swap de iconos con CSS puro (no depende de
   que main.js haya corrido), la clase real la pone tema-oscuro-temprano.js
   en <html> antes del primer pintado. */
.foco-interruptor-tema {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radio-pill);
	background: rgba(255, 255, 255, .08);
	color: #fff; /* un <button> no hereda color del header, ver nota de .foco-nav__toggle span mas abajo */
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.foco-interruptor-tema:hover { background: rgba(255, 255, 255, .18); }
.foco-interruptor-tema:active { transform: scale(.92); }
.foco-interruptor-tema__icono--sol { display: none; }
html[data-tema="oscuro"] .foco-interruptor-tema__icono--luna { display: none; }
html[data-tema="oscuro"] .foco-interruptor-tema__icono--sol { display: block; }

.foco-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
/* background: #fff fijo, no currentColor: un <button> no hereda color de
   sus ancestros por default en el user-agent stylesheet (a diferencia de
   un <span> o <a>), asi que currentColor caia al color por defecto del
   boton del navegador, no al blanco del header. Por eso no se veian. */
.foco-nav__toggle span { display: block; width: 22px; height: 2px; background: #fff; margin-inline: auto; }

/* La portada nace con el header flotando transparente sobre el hero a
   pantalla completa, y pasa a solido (mismo azul-evento, ya no un fondo
   claro) con main.js apenas se baja un poco — el header es oscuro en toda
   la web (logo blanco), asi que este bloque solo cambia transparencia,
   nunca el esquema de color. */
body.foco-portada .foco-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(7, 27, 61, .6) 0%, rgba(7, 27, 61, 0) 100%);
	border-bottom-color: transparent;
}
body.foco-portada.foco-header--solido .foco-header {
	background: var(--azul-evento);
	border-bottom-color: rgba(255, 255, 255, .1);
}

/* El breakpoint del menu de escritorio quedo corto para 7 items + logo +
   CTA: por debajo de ~1200px el menu se envolvia en dos filas ("doble
   fila", feedback del cliente). Con hamburguesa desde mas temprano, nunca
   compite por el espacio. */
/* CTA flotante: en mobile el boton de inscripcion arriba, al lado de la
   hamburguesa, quedaba apretado y feo (feedback del cliente). Se saca del
   header y se fija abajo, acompañando el scroll, patron mas comun en
   mobile para la accion principal de la pagina. */
/* a.foco-cta-flotante (no .foco-cta-flotante a secas): tiene que ganarle en
   especificidad a .foco-boton{display:inline-flex}, que se define mas abajo
   en este archivo. Con la misma especificidad (una clase c/u), gana la que
   este mas abajo en el archivo sin importar el media query — asi quedaba
   siempre visible en desktop pase lo que pase con este display:none. */
a.foco-cta-flotante {
	display: none;
	position: fixed;
	left: var(--espacio-4);
	right: var(--espacio-4);
	bottom: var(--espacio-4);
	bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom));
	z-index: 90;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	transition: opacity .25s ease, transform .25s ease;
}
/* main.js lo agrega cuando el footer entra en pantalla, para no pisarse
   con el CTA que el footer ya tiene propio. pointer-events:none para que
   no se pueda tocar un boton invisible. */
a.foco-cta-flotante.esta-oculto { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* El menu de escritorio (logo + 7 items + CTA) no entraba en una sola fila
   por debajo de ~1200px ("doble fila", primer feedback) — pero 1199px
   resulto ser mas ancho que el propio desktop del cliente ("el menu
   desaparecio", segundo feedback). Con labels mas cortos y menos gap el
   menu entra comodo desde ~1024px, asi que baja el corte a ese valor en
   vez de agrandar mas la ventana de hamburguesa. */
@media (max-width: 1023px) {
	.foco-header .foco-header__cta { display: none; }
	a.foco-cta-flotante { display: inline-flex; }

	/* margin-left:auto porque el CTA que antes empujaba el grupo interruptor
	   + hamburguesa a la derecha esta oculto en mobile — sin esto quedan
	   pegados al logo. Va en el interruptor (el primero del grupo), no en
	   la hamburguesa, para que los dos queden juntos a la derecha. */
	.foco-interruptor-tema { margin-left: auto; }
	.foco-nav__toggle { display: flex; position: relative; z-index: 101; }
	/* Halo oscuro detras de cada linea en vez de un chip de fondo: se ve
	   bien sobre CUALQUIER fondo (foto, gradiente, solido) sin agregar una
	   "caja" que parezca una capa rara encima (feedback del cliente sobre
	   el chip translucido anterior). */
	.foco-nav__toggle span { box-shadow: 0 0 3px rgba(0, 0, 0, .8); }
	.foco-nav { flex-basis: 100%; order: 3; }

	/* position:fixed + fondo solido propio (no hereda la transparencia del
	   header): antes el desplegable quedaba con fondo transparente sobre el
	   hero y no se leia nada (feedback del cliente). Ancho completo real,
	   no acotado por el padding del container. height (no max-height): con
	   max-height el panel solo ocupaba lo que el contenido necesitaba (unos
	   pocos links, bien corto) en vez de tapar toda la pantalla como pidio
	   el cliente — height fuerza el tamaño completo pase lo que pase con
	   la cantidad de items. */
	.foco-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 0;
		position: fixed;
		top: var(--altura-header);
		left: 0;
		right: 0;
		width: 100%;
		height: 0;
		z-index: 100;
		background: var(--azul-evento);
		overflow: hidden;
		opacity: 0;
		transform: translateY(-8px);
		padding-inline: var(--padding-lateral);
		box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
		transition: height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, transform .35s ease;
	}
	.foco-nav__list.esta-abierto {
		height: calc(100vh - var(--altura-header));
		opacity: 1;
		transform: translateY(0);
		overflow-y: auto;
	}
	.foco-nav__list a { display: block; padding-block: var(--espacio-3); font-size: var(--tam-h3); color: #fff; }

	/* Hamburguesa que se convierte en X al abrir — el aria-expanded que ya
	   maneja main.js sirve de gancho, sin sumar una clase mas. */
	.foco-nav__toggle span { transition: transform .3s ease, opacity .3s ease; }
	.foco-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.foco-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.foco-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.foco-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--boton-alto-min);
	padding-inline: var(--espacio-6);
	border-radius: var(--radio-chico);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
}
.foco-boton--primario { background: var(--azul-primario); color: #fff; }
.foco-boton--primario:hover { background: var(--azul-oscuro); }
.foco-boton--secundario { background: transparent; border-color: var(--azul-primario); color: var(--azul-primario); }

/* Numeracion de seccion tipo "01 · Trabajo": la identidad de agendainformatica
   numera sus capitulos en vez de apilar h2 sueltos. Un componente compartido
   para no repetir la regla de contraste (azul-claro solo sobre fondo oscuro)
   en cada hoja de seccion. */
.foco-eyebrow {
	display: block;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--azul-oscuro);
	margin-bottom: var(--espacio-3);
}
.foco-cierre-panel .foco-eyebrow,
.foco-cierre-politico .foco-eyebrow {
	color: var(--azul-claro);
}

/* Foto de fondo para las secciones de impacto (panel de cierre, cierre
   politico, CTA): reusa las fotos reales de "El lugar" en vez de dejarlas en
   un color plano — mismo criterio que el overlay del hero, mas sutil porque
   acá el fondo tiene que perder contra el texto, no competir con el. */
.foco-fondo-seccion { position: relative; overflow: hidden; }
.foco-fondo-seccion__capa { position: absolute; inset: 0; }
.foco-fondo-seccion__img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.foco-fondo-seccion__contenido { position: relative; z-index: 1; }

/* Grid de 3 tarjetas con icono, para "Que vamos a hacer" y cualquier otra
   seccion que necesite el mismo patron (icono + titulo corto + descripcion)
   en vez de una lista con vinetas. */
.foco-iconos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-6); margin-top: var(--espacio-8); }

/* Tarjeta numerada · beneficio o paso (sistema de diseño): numero grande +
   borde superior de acento, en vez del icono en circulo que habia antes. */
.foco-tarjeta-numerada {
	background: #fff;
	border: 1px solid var(--borde);
	border-top: 4px solid var(--azul-primario);
	border-radius: var(--radio-tarjeta);
	padding: 28px;
	transition: transform .25s ease, border-color .25s ease;
}
.foco-tarjeta-numerada:hover { transform: translateY(-4px); border-color: var(--azul-primario); }
.foco-tarjeta-numerada__numero { font-weight: 900; font-size: 32px; letter-spacing: -.03em; color: var(--azul-primario); }
.foco-tarjeta-numerada__titulo { margin: 12px 0 0; font-weight: 700; font-size: 19px; }
.foco-tarjeta-numerada__desc { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--gris-oscuro); }

/* Guion fijo despues del eyebrow (antes se dibujaba animado al entrar en
   viewport; el disparador dependia de [data-reveal]/IntersectionObserver,
   que en produccion dejaba contenido invisible de forma intermitente y sin
   poder reproducirlo para depurarlo - se saco todo ese mecanismo entero en
   vez de seguir parchandolo. El guion queda como adorno estatico). */
.foco-eyebrow::after {
	content: '';
	display: inline-block;
	width: 28px;
	height: 2px;
	margin-left: var(--espacio-2);
	margin-bottom: 3px;
	background: currentColor;
	vertical-align: middle;
}

/* --- Interaccion: botones y nav ----------------------------------------- */
.foco-boton { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.foco-boton--primario:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0, 128, 235, .45); }
.foco-boton--secundario:hover { transform: translateY(-2px); }
/* #0090FF de hover: el mismo valor que trae el sistema para el boton
   primario del banner de cierre. */
.foco-cta .foco-boton--primario:hover { background: #0090FF; }

.foco-nav__list a { position: relative; }
.foco-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.foco-nav__list a:hover::after,
.foco-nav__list a:focus-visible::after { transform: scaleX(1); }
.foco-nav__list a:hover { opacity: 1; }

/* --- Textura tecnologica sobre las secciones de impacto ------------------
   Grilla de puntos muy sutil encima de la foto de fondo, para que las
   bandas oscuras (panel de cierre, cierre politico, CTA) no queden lisas. */
.foco-fondo-seccion::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

/* --- Carrusel de fotos (deslizable, sin libreria) ------------------------
   overflow-x + scroll-snap nativo: funciona con touch/trackpad solo, las
   flechas en main.js solo hacen scrollBy() para quien usa mouse/teclado. */
.foco-carrusel { position: relative; margin-top: var(--espacio-8); }
.foco-carrusel__pista {
	display: flex;
	gap: var(--espacio-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--espacio-2);
	scrollbar-width: none;
	margin: 0;
}
.foco-carrusel__pista::-webkit-scrollbar { display: none; }
.foco-carrusel__item {
	flex: 0 0 auto;
	width: min(320px, 74vw);
	aspect-ratio: 4 / 3;
	margin: 0;
	scroll-snap-align: start;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
}
.foco-carrusel__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.foco-carrusel__item:hover .foco-carrusel__img { transform: scale(1.06); }

.foco-carrusel__controles { display: flex; gap: var(--espacio-3); margin-top: var(--espacio-4); }
.foco-carrusel__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radio-pill);
	border: 1px solid var(--borde);
	background: #fff;
	color: var(--negro);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.foco-carrusel__flecha:hover { background: var(--azul-primario); border-color: var(--azul-primario); color: #fff; transform: translateY(-2px); }
.foco-carrusel__flecha:disabled { opacity: .35; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.foco-carrusel__pista { scroll-behavior: auto; }
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.foco-skip-link {
	position: absolute;
	left: -9999px;
}
.foco-skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 999;
	background: var(--fondo-claro);
	padding: 0.75rem 1rem;
}

/* --- Archivo y single de los CPT (Task 15) ------------------------------- */
.foco-single { padding-block: var(--espacio-16); max-width: 70ch; margin-inline: auto; }
.foco-single__imagen { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-tarjeta); margin-bottom: var(--espacio-6); }
.foco-single__comunidad { color: var(--azul-oscuro); font-weight: 700; }
.foco-expositores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--espacio-6); margin-top: var(--espacio-6); }
.foco-expositor__foto { border-radius: var(--radio-pill); width: 80px; height: 80px; object-fit: cover; }
.foco-expositor__nombre { font-weight: 700; margin: var(--espacio-2) 0 0; }
.foco-expositor__cargo, .foco-expositor__bio { color: var(--gris); font-size: var(--tam-caption); margin: var(--espacio-1) 0 0; }

/* --- Footer institucional (en main.css) --------------------------------- */
.foco-footer { background: var(--negro); color: #fff; padding-top: var(--espacio-12); }
.foco-logo { height: 32px; }
.foco-logo--texto { font-weight: 700; font-size: var(--tam-h3); }

.foco-footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--espacio-8); padding-bottom: var(--espacio-10); }
.foco-footer__lema { color: var(--gris); margin: var(--espacio-2) 0 0; }

.foco-footer__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.foco-footer__lista a { color: var(--texto-sobre-oscuro); text-decoration: none; }
.foco-footer__lista a:hover { color: #fff; }

.foco-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-3); }
.foco-footer__fecha { color: var(--texto-sobre-oscuro); margin: 0; }

.foco-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-3);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: var(--espacio-6);
}
.foco-footer__emisor { color: var(--azul-claro); font-size: var(--tam-caption); display: flex; align-items: center; gap: var(--espacio-2); margin: 0; }
.foco-footer__copy { color: var(--gris); font-size: var(--tam-caption); margin: 0; }

/* AGC va como emisor, nunca como marca par de FoCo (regla del brief) - se achica el logo/texto de AGC respecto del de FoCo en .foco-footer__marca. */
.foco-footer__emisor .foco-logo { height: 26px; }
.foco-footer__enlace { display: inline-flex; align-items: center; line-height: 0; }
.foco-footer__sitio { color: var(--azul-claro); text-decoration: none; }
.foco-footer__sitio:hover { text-decoration: underline; }
.foco-footer__emisor .foco-logo--texto { font-weight: 400; font-size: inherit; }

@media (max-width: 767px) {
	.foco-footer__top { grid-template-columns: 1fr; gap: var(--espacio-6); }
}

/* --- Movimiento en mobile: secciones que entran al hacer scroll ---------
   Va al final del archivo a proposito, mismo criterio que el bloque de
   secciones.css sobre los parrafos lead.

   La version anterior de esto escondia con "html:not(.no-js) [data-reveal]"
   y revelaba con "[data-reveal].esta-revelado" — dos selectores con
   ESPECIFICIDAD DISTINTA (el que esconde tiene un elemento "html" de mas),
   asi que el que esconde le ganaba siempre al que revela sin importar la
   clase. Quedo todo invisible para siempre y hubo que sacar la funcion
   entera de la 1.4.0.

   Esta vez el que esconde incluye ":not(.esta-revelado)" en el propio
   selector: en cuanto la clase se agrega, ese selector DEJA DE
   COINCIDIR con el elemento — no hace falta pelear por especificidad,
   la regla simplemente no aplica mas. Ademas, solo corre en mobile y
   solo si el visitante no pidio reduced-motion; en desktop no cambia
   nada. Con threshold:0 (sin rootMargin negativo) y una red de
   seguridad en main.js a los 2.5s, nada puede quedar trabado. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
	html:not(.no-js) [data-reveal]:not(.esta-revelado) {
		opacity: 0;
		transform: translateY(20px);
	}
}
[data-reveal] { transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--retraso, 0) * 70ms); }


/* --- Carrusel de tarjetas (comunidades) -----------------------------------
   Reusa el carrusel de fotos (.foco-carrusel + main.js), pero cada item es
   una tarjeta de alto libre, no una foto 4:3. El selector de dos clases le
   gana a .foco-carrusel__item (una clase, definido mas arriba) sin depender
   del orden en el archivo. */
.foco-carrusel .foco-carrusel__item--tarjeta { aspect-ratio: auto; width: min(320px, 82vw); overflow: visible; display: flex; }
.foco-carrusel--tarjetas .foco-carrusel__pista { padding-block: 2px; }

/* --- Modal de inscripcion (<dialog> nativo) ------------------------------ */
html.foco-modal-abierto { overflow: hidden; }
.foco-modal {
	padding: 0;
	border: 0;
	border-radius: var(--radio-tarjeta);
	background: #fff;
	color: var(--negro);
	width: min(760px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: hidden;
}
.foco-modal::backdrop { background: rgba(7, 27, 61, .72); }
.foco-modal[open] { display: flex; flex-direction: column; animation: foco-modal-entrada .25s ease; }
.foco-modal__caja { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; width: 100%; }
.foco-modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); padding: var(--espacio-4) var(--espacio-6); border-bottom: 1px solid var(--borde); flex: 0 0 auto; }
.foco-modal__titulo { margin: 0; font-size: var(--tam-h3); font-weight: 900; letter-spacing: -.02em; }
.foco-modal__cerrar { width: 44px; height: 44px; border: 0; border-radius: var(--radio-pill); background: var(--azul-suave); color: var(--azul-oscuro); font-size: 28px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.foco-modal__cerrar:hover { background: var(--azul-primario); color: #fff; }
.foco-modal__cuerpo { padding: var(--espacio-4) var(--espacio-6) var(--espacio-6); overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.foco-modal__cargando { margin: 0 0 var(--espacio-4); color: var(--gris); }
.foco-modal__cuerpo iframe { display: block; width: 100%; max-width: 100%; border: 0; }

@keyframes foco-modal-entrada {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* En pantallas chicas el modal ocupa toda la pantalla: un formulario en una
   ventanita de 300px de alto seria incomodo de completar. */
@media (max-width: 640px) {
	.foco-modal { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; margin: 0; }
	.foco-modal__cabecera { padding: var(--espacio-3) var(--espacio-4); }
	.foco-modal__cuerpo { padding: var(--espacio-3) var(--espacio-4) var(--espacio-6); }
}
@media (prefers-reduced-motion: reduce) {
	.foco-modal[open] { animation: none; }
}