@layer tokens, reset, base, layout, components, utilities;

/* Fuentes autoalojadas: sin peticiones a Google Fonts en tiempo de ejecución
   (rendimiento y privacidad — no se expone la IP del visitante a terceros). */
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSans-var.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/Newsreader-var.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* Fuentes corporativas autoalojadas (Neue Haas Display).
   Pesos registrados: 100/300/700 — la resolución de pesos intermedios
   (400→300, 500→300, 600→700) coincide con el diseño original. */
@font-face {
	font-family: "Neuehaasdisplay";
	src: url("../fonts/NeueHaasDisplay-Thin.woff") format("woff");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neuehaasdisplay";
	src: url("../fonts/NeueHaasDisplay-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neuehaasdisplay";
	src: url("../fonts/NeueHaasDisplay-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@layer tokens {
	:root {
		/* Colores (valores exactos del diseño original) */
		--color-ink: #243624;
		--color-body-text: #6a859c;
		--color-body-bg: #edeff2;
		--color-surface: #fff;
		--color-accent: #7a9c6a;
		--color-accent-border: #7a9d6a;
		--color-hero-title: #f2f5ef;
		--color-hero-text: #f4f8f4;
		--color-hero-border: #69b9ff;
		--color-heading-muted: #676770;
		/* Verde de marca oscurecido para enlaces en texto: AA 4.82:1 sobre blanco
		   (el #7a9c6a de marca da 2.9:1 y no sirve como color de enlace) */
		--color-link: #5d7a4e;
		/* Verde salvia claro para enlaces sobre fondos oscuros (familia del acento) */
		--color-link-soft: #aec7a0;
		--color-nav-current: #5d7a4e;
		--color-button-hover: #5d7a4e;
		--color-footer-bg: #383838;
		/* #a3a3a3 en lugar del #9e9e9e original: contraste AA 4.65:1 sobre
		   #383838 (el original daba 4.38:1); diferencia visual imperceptible */
		--color-footer-text: #a3a3a3;
		--color-footer-border: #dbdbdb;
		--color-nav-panel: #fdf9f9;
		--color-card-text: #f3f9f3;
		--color-offwhite: #e8e8e8;
		--color-form-ring: #4040474d;
		--color-overlay-rest: #f8f5f5c9;
		--color-overlay-hover: #243624bf;

		/* Tipografía */
		--font-body: "Open Sans", sans-serif;
		--font-display: "Neuehaasdisplay", Verdana, sans-serif;
		--font-serif: "Newsreader", sans-serif;

		/* Métricas globales */
		--nav-height: 61px;
	}
}

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

	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		margin: 0;
	}

	img {
		max-width: 100%;
		height: auto;
		vertical-align: middle;
		display: inline-block;
		border: 0;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
		margin: 0;
	}

	button {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	ul[class] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

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

@layer base {
	body {
		color: var(--color-body-text);
		background-color: var(--color-body-bg);
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 20px;
	}

	h1 {
		margin-top: 0;
		margin-bottom: 10px;
		font-size: 38px;
		font-weight: 700;
		line-height: 44px;
	}

	h2 {
		color: var(--color-heading-muted);
		text-align: center;
		margin-top: 0;
		margin-bottom: 10px;
		font-size: 32px;
		font-weight: 300;
		line-height: 36px;
	}

	h3 {
		color: var(--color-heading-muted);
		letter-spacing: 3px;
		text-transform: uppercase;
		margin-top: 0;
		margin-bottom: 0;
		font-size: 20px;
		font-weight: 300;
		line-height: 1.5;
	}

	p {
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 300;
		line-height: 25px;
	}

	b,
	strong {
		font-weight: 700;
	}

	label {
		font-weight: 700;
	}

	/* Enlaces de contenido (sin clase): verde corporativo con subrayado fino */
	main a:not([class]) {
		color: var(--color-link);
		text-decoration-thickness: 1px;
		text-decoration-color: var(--color-accent);
		text-underline-offset: 2px;
		transition: color 0.3s, text-decoration-color 0.3s;
	}

	main a:not([class]):hover {
		color: var(--color-ink);
		text-decoration-color: currentColor;
	}

	:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}
}

@layer layout {
	.container {
		margin-inline: auto;
	}

	/* Guardas anti-colapso de márgenes (equivalen al clearfix del original;
	   sin ellas los márgenes de los hijos colapsan y las alturas varían) */
	.container::before,
	.container::after {
		content: " ";
		display: table;
	}

	.container::after {
		clear: both;
	}

	/* Filas y columnas replican el modelo de floats del original: las alturas
	   porcentuales de las tarjetas deben resolver contra auto (con flex las
	   columnas estiran a sus hijas y el layout diverge del diseño fuente) */
	.row::before,
	.row::after {
		content: " ";
		display: table;
	}

	.row::after {
		clear: both;
	}

	.row--clamped {
		width: 100%;
		max-width: 100%;
	}

	.col {
		position: relative;
		float: left;
		width: 100%;
		min-height: 1px;
		padding-inline: 10px;
	}

	.section {
		color: var(--color-ink);
		text-align: center;
		background-color: var(--color-surface);
		border-top: 1px solid var(--color-ink);
		padding: 80px 10px;
		position: relative;
		scroll-margin-top: var(--nav-height);
	}

	.section--accent {
		background-color: var(--color-accent);
	}

	.section .container {
		margin-top: -50px;
	}

	@media (min-width: 480px) {
		.container {
			max-width: 728px;
		}
	}

	@media (min-width: 768px) {
		.row {
			margin-inline: -10px;
		}

		.col--3 {
			width: 25%;
		}

		.col--4 {
			width: 33.3333%;
		}

		.col--6 {
			width: 50%;
		}
	}

	@media (min-width: 992px) {
		.container {
			max-width: 940px;
		}
	}
}

@layer components {
	.site-header {
		background-color: var(--color-surface);
		border-top: 1px solid #000;
		border-bottom: 1px solid var(--color-accent);
		position: fixed;
		inset: 0 0 auto;
		z-index: 1000;
	}

	.site-header .container {
		display: flex;
		align-items: flex-start;
	}

	.site-header__brand {
		display: block;
		padding-left: 10px;
		color: var(--color-ink);
		text-decoration: none;
	}

	@media (min-width: 768px) {
		.site-header__brand {
			padding-left: 0;
		}
	}

	.site-header__logo {
		max-width: 150px;
		margin-top: -15px;
		margin-bottom: -40px;
	}

	.site-nav-overlay {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.site-nav {
		background-color: var(--color-nav-panel);
		border: 1px solid var(--color-accent);
		transform: translateY(-102%);
		visibility: hidden;
		transition: transform 400ms ease, visibility 0s linear 400ms;
	}

	.site-header.is-open .site-nav {
		transform: none;
		visibility: visible;
		transition: transform 400ms ease;
		pointer-events: auto;
	}

	.site-nav__link {
		display: block;
		padding: 20px;
		text-align: left;
		text-decoration: none;
		color: var(--color-ink);
		font-family: var(--font-display);
		font-size: 12px;
		font-weight: 600;
	}

	.site-nav__link:hover {
		color: var(--color-accent);
	}

	.site-nav__link[aria-current="page"] {
		color: var(--color-nav-current);
	}

	.site-nav__toggle {
		color: var(--color-accent);
		margin-left: auto;
		padding: 18px;
		display: block;
	}

	.site-nav__toggle svg {
		display: block;
	}

	.site-header.is-open .site-nav__toggle {
		background-color: var(--color-accent);
		color: #fff;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-nav {
			transition: none;
		}

		.site-header.is-open .site-nav {
			transition: none;
		}
	}

	@media (min-width: 992px) {
		.site-header {
			border-top: 0;
		}

		.site-nav-overlay {
			position: static;
			overflow: visible;
			margin-left: auto;
			pointer-events: auto;
		}

		.site-nav {
			background: none;
			border: 0;
			transform: none;
			visibility: visible;
			transition: none;
		}

		/* Los enlaces fluyen como inline-blocks separados por el espacio en
		   blanco del HTML — mismo mecanismo (y misma métrica) que el original */
		.site-nav__list {
			display: block;
			white-space: nowrap;
		}

		.site-nav__list li {
			display: inline;
		}

		.site-nav__link {
			display: inline-block;
			vertical-align: top;
		}

		.site-nav__toggle {
			display: none;
		}
	}
}

@layer components {
	.hero {
		color: var(--color-accent);
		text-align: center;
		background-image: linear-gradient(193deg, #060806 22%, #2e9dff38), url("../images/Foto13.webp");
		background-position: 0 0, 50%;
		background-size: auto, cover;
		border-bottom: 4px solid var(--color-hero-border);
		max-height: 1000px;
		padding-block: 60px;
	}

	.hero .container {
		margin-top: -30px;
		margin-bottom: 50px;
	}

	.hero__logo-wrap {
		margin-inline: auto;
		margin-top: 20px;
	}

	.hero__title {
		color: var(--color-hero-title);
		text-align: center;
		letter-spacing: 3px;
		text-transform: uppercase;
		margin-top: 20px;
		margin-bottom: auto;
		font-family: var(--font-display);
		font-size: 18px;
		font-weight: 400;
		line-height: 25px;
	}

	.hero__lead {
		color: var(--color-hero-text);
		text-align: center;
		margin-top: 40px;
		padding-inline: 10px;
		font-family: var(--font-display);
		font-size: 20px;
		font-weight: 400;
		line-height: 30px;
	}

	/* Enlaces sobre el hero oscuro: verde salvia claro de la familia corporativa */
	.hero__lead a {
		color: var(--color-link-soft);
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
		transition: color 0.3s;
	}

	.hero__lead a:hover {
		color: #fff;
	}

	@media (min-width: 480px) {
		.hero {
			padding-block: 119px;
		}

		.hero__logo-wrap {
			margin-top: 0;
		}

		.hero__title {
			margin-top: 40px;
		}

		.hero__lead {
			margin-top: 100px;
		}
	}

	@media (min-width: 768px) {
		.hero {
			padding-block: 144px;
		}

		.hero__title {
			font-size: 25px;
		}

		.hero__lead {
			padding-inline: 20px;
		}
	}

	@media (min-width: 992px) {
		.hero {
			padding-block: 50px 230px;
		}

		.hero .container {
			margin-top: 40px;
		}

		.hero__title {
			margin-top: 10px;
		}
	}
}

@layer components {
	.section__title-group {
		max-width: 940px;
		margin-bottom: 60px;
	}

	.section__heading {
		color: var(--color-ink);
		text-align: center;
		letter-spacing: 5px;
		text-transform: uppercase;
		margin-top: 0;
		margin-bottom: 16px;
		font-family: var(--font-serif);
		font-size: 30px;
		font-weight: 300;
	}

	.section__heading--white {
		color: #fff;
	}

	.section__subheading {
		color: var(--color-ink);
		text-align: center;
		letter-spacing: 3px;
		text-transform: uppercase;
		margin-top: 20px;
		margin-bottom: -40px;
		font-family: var(--font-serif);
		font-size: 20px;
		font-weight: 300;
		line-height: 30px;
	}

	@media (min-width: 480px) {
		h2.section__subheading {
			line-height: 36px;
		}

		h3.section__subheading {
			line-height: 1.5;
		}
	}

	.section__subheading--off-white {
		color: var(--color-offwhite);
		margin-bottom: -30px;
	}

	.section__intro {
		color: var(--color-ink);
		text-align: justify;
		letter-spacing: 0.5px;
		margin-top: 10px;
		margin-bottom: 0;
		padding-inline: 10px;
		font-family: var(--font-display);
		font-size: 14px;
		font-weight: 300;
		line-height: 30px;
	}

	.section__text {
		color: var(--color-ink);
		text-align: justify;
		letter-spacing: 0.5px;
		margin-top: 0;
		margin-inline: 20px;
		font-family: var(--font-display);
		font-weight: 300;
	}

	.section__text--wide {
		margin-top: 10px;
		margin-inline: 20px;
		padding: 10px;
		font-family: var(--font-display);
		letter-spacing: 0.5px;
		color: var(--color-ink);
		text-align: justify;
	}

	.section__lead {
		color: var(--color-ink);
		text-align: center;
		font-family: var(--font-display);
	}

	@media (min-width: 480px) {
		.section__subheading {
			line-height: 1.5;
		}

		.section__text--wide {
			padding: 0 140px;
		}
	}

	@media (min-width: 768px) {
		.section__intro {
			padding-inline: 20px;
		}
	}
}

@layer components {
	/* Icono circular compartido (quiénes somos + herramientas) */
	.icon-badge {
		background-color: var(--color-accent);
		border: 10px solid #f9fcf8;
		border-radius: 50%;
		width: 35%;
		max-width: 100%;
		margin: 15px auto;
		padding: 20px;
		display: block;
		object-fit: contain;
		box-shadow: 0 0 0 1px var(--color-accent);
	}

	/* Tarjetas "Quiénes somos" */
	.feature-card {
		text-align: center;
		background-color: var(--color-surface);
		border: 0.5px solid var(--color-accent-border);
		border-radius: 2px;
		padding: 15px;
		width: 101%;
		height: 400px;
		margin-bottom: 10px;
	}

	.feature-card__title {
		color: var(--color-ink);
		font-family: var(--font-serif);
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 3px;
		text-transform: uppercase;
		margin: 0;
		line-height: 1.5;
	}

	.feature-card__title--start {
		text-align: left;
		padding-right: 0;
	}

	.feature-card__text {
		color: var(--color-ink);
		text-align: justify;
		font-family: var(--font-display);
	}

	/* Tarjetas de servicio (gestión procesal masiva) */
	.service-card {
		text-align: center;
		background-color: transparent;
		border: 0;
		border-radius: 5px;
		padding: 5px;
		margin: 0;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: stretch;
		height: 100%;
		min-height: 100%;
	}

	.service-card__media {
		display: block;
		position: relative;
		width: 100%;
		max-width: 100%;
		height: auto;
		overflow: hidden;
	}

	.service-card__image {
		width: 100%;
		height: 200px;
		max-height: 287px;
		margin: 0;
		object-fit: contain;
	}

	.service-card__overlay {
		display: none;
	}

	.service-card__title {
		color: #fff;
		margin: 0;
		font-family: var(--font-serif);
		font-size: 17px;
	}

	.service-card__text {
		color: var(--color-card-text);
		text-align: justify;
		width: 100%;
		height: 42%;
		margin: 0;
		font-family: var(--font-display);
		font-size: 15px;
		font-weight: 100;
	}

	.service-card__text--stacked {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		margin-top: 10px;
	}

	/* Contenedor de herramientas (el original lo expande a todo el ancho ≤991) */
	.tools__container {
		max-width: 100%;
	}

	/* Fila de tarjetas "Quiénes somos" (ancho 100% solo en tablet, como el original) */
	@media (min-width: 768px) {
		.cards__row {
			width: 100%;
		}
	}

	@media (min-width: 992px) {
		.cards__row {
			width: auto;
		}

		.tools__container {
			max-width: 940px;
		}
	}

	/* Tarjetas de herramientas */
	.tools__row {
		margin-inline: 3px;
	}

	.tools__row .col {
		padding-inline: 0;
	}

	.tool-link {
		max-width: 100%;
		width: 100%;
		display: block;
		color: var(--color-ink);
		font-family: var(--font-serif);
		text-decoration: none;
	}

	.tool-card {
		text-align: center;
		background-color: var(--color-surface);
		border: 1px solid var(--color-accent-border);
		border-radius: 1px;
		padding: 15px;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: auto;
		min-height: 200px;
		margin-bottom: 0;
	}

	.tool-card__title {
		color: var(--color-ink);
		font-family: var(--font-serif);
		font-size: 14px;
		letter-spacing: 3px;
		text-transform: uppercase;
		margin: 0;
		line-height: 1.5;
	}

	.tool-card__title--alt {
		font-size: 15px;
	}

	@media (min-width: 480px) {
		.icon-badge {
			width: 20%;
		}

		.feature-card {
			height: 300px;
		}

		.service-card {
			margin-bottom: 30px;
		}

		.service-card__title {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.service-card__title--spaced {
			margin-bottom: 40px;
		}

		.service-card__text {
			height: auto;
		}
	}

	@media (min-width: 768px) {
		.icon-badge {
			width: 50px;
			padding: 0;
		}

		.service-card {
			margin-bottom: 0;
		}

		.service-card__image {
			object-fit: cover;
		}

		.feature-card {
			height: 450px;
		}

		.tool-card {
			margin-bottom: 0;
		}
	}

	@media (min-width: 992px) {
		.tools__row {
			margin-inline: -10px;
		}

		.tools__row .col {
			padding-inline: 10px;
		}

		.icon-badge {
			width: 94px;
			margin: 20px auto;
			padding: 15px;
		}

		.feature-card {
			width: auto;
			height: 400px;
			margin-bottom: 0;
		}

		.feature-card__title {
			font-size: 15px;
			font-weight: 300;
		}

		.feature-card__title--start {
			text-align: center;
		}

		.service-card {
			display: block;
			height: auto;
			min-height: 0;
		}

		.service-card__media {
			height: 287px;
			overflow: visible;
		}

		.service-card__image {
			height: 100%;
			max-height: 287px;
			margin-bottom: 20px;
			object-fit: fill;
		}

		.service-card__overlay {
			opacity: 0;
			color: var(--color-ink);
			background-color: var(--color-overlay-rest);
			flex-flow: column;
			justify-content: center;
			align-items: center;
			font-weight: 400;
			line-height: 27px;
			display: flex;
			position: absolute;
			inset: 0;
			overflow: hidden;
		}

		.service-card__overlay:hover {
			opacity: 1;
			color: #fff;
			background-color: var(--color-overlay-hover);
		}

		.service-card__overlay-text {
			text-align: center;
			letter-spacing: 0.3px;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 10px 20px;
			font-family: var(--font-display);
			font-size: 11px;
			font-weight: 500;
			line-height: 1.5;
			display: flex;
			position: absolute;
			inset: 0;
		}

		.service-card__title {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.service-card__title--spaced {
			margin-bottom: 10px;
		}

		.service-card__text--stacked {
			display: none;
		}

		.tool-card {
			border-radius: 1px;
			min-width: 220px;
			height: 280px;
			min-height: 250px;
			margin-bottom: 20px;
			display: block;
			width: auto;
		}

		.tool-card__title {
			font-size: 15px;
			font-weight: 300;
		}
	}
}

@layer components {
	.form-wrapper {
		margin: 0 0 15px;
	}

	.form {
		margin-top: 40px;
	}

	.form__input {
		display: block;
		width: 100%;
		height: 45px;
		padding: 8px 12px;
		margin-bottom: 17px;
		font-family: var(--font-display);
		font-size: 14px;
		line-height: 1.42857143;
		color: #333;
		vertical-align: middle;
		background-color: var(--color-surface);
		border: 0;
		border-radius: 3px;
		box-shadow: 0 0 0 1px var(--color-form-ring);
	}

	.form__input--compact {
		height: 38px;
		margin-bottom: 10px;
		border: 1px solid #ccc;
		border-radius: 0;
		box-shadow: none;
	}

	.form__input--area {
		height: 110px;
		resize: vertical;
	}

	.form__input::placeholder {
		color: #999;
	}

	.form__input:focus {
		outline: 0;
		box-shadow: 0 0 0 2px var(--color-accent);
	}

	.form__privacy {
		text-align: justify;
		font-family: var(--font-display);
		font-size: 10px;
	}

	.form__consent {
		display: block;
		position: absolute;
		margin-bottom: 5px;
		padding-left: 20px;
		cursor: pointer;
	}

	.form__consent-input {
		float: left;
		margin: 4px 0 0 -20px;
		line-height: normal;
		accent-color: var(--color-accent);
	}

	.form__consent-label {
		display: inline-block;
		text-align: left;
		margin-bottom: 10px;
		font-size: 12px;
		cursor: pointer;
	}

	.form__feedback {
		display: none;
	}

	.form__feedback.is-visible {
		display: block;
	}

	.form__feedback--success {
		padding: 20px;
		text-align: center;
		background-color: #ddd;
	}

	.form__feedback--error {
		margin-top: 10px;
		padding: 10px;
		background-color: #ffdede;
	}

	.button {
		color: #fff;
		text-align: center;
		letter-spacing: 2px;
		text-transform: uppercase;
		border-radius: 4px;
		padding: 12px 30px;
		font-size: 16px;
		font-weight: 300;
		line-height: 21px;
		text-decoration: none;
		transition: background-color 0.3s;
		display: inline-block;
	}

	.button--full {
		background-color: var(--color-accent);
		width: 100%;
		margin-top: 40px;
		margin-inline: auto;
		font-family: var(--font-serif);
		display: block;
	}

	.button--full:hover {
		background-color: var(--color-button-hover);
	}

	.button:disabled {
		opacity: 0.7;
		cursor: default;
	}

	@media (min-width: 768px) {
		.button--full {
			margin-inline: 0;
		}
	}
}

@layer components {
	.site-footer {
		text-align: center;
		background-color: var(--color-footer-bg);
		border-top: 1px solid var(--color-footer-border);
		padding-top: 35px;
		padding-bottom: 35px;
	}

	.site-footer__text {
		color: var(--color-footer-text);
		margin-top: 5px;
		margin-bottom: 5px;
		font-family: var(--font-display);
		font-size: 16px;
	}

	.site-footer__text a {
		color: inherit;
	}
}

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

	a.u-visually-hidden {
		color: var(--color-link);
	}

	/* El skip link se hace visible al recibir foco de teclado */
	a.u-visually-hidden:focus-visible {
		position: fixed;
		inset: 10px auto auto 10px;
		width: auto;
		height: auto;
		margin: 0;
		padding: 10px 16px;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		background-color: var(--color-accent);
		color: #fff;
		border-radius: 3px;
		text-decoration: none;
		z-index: 2000;
	}

	/* Animación de entrada (equivalente al preset slideInBottom del original:
	   translateY 100px + fade, 1 s, outQuart, al entrar en viewport) */
	.js .reveal {
		opacity: 0;
		translate: 0 100px;
		transition:
			opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) var(--reveal-delay, 0s),
			translate 1s cubic-bezier(0.165, 0.84, 0.44, 1) var(--reveal-delay, 0s);
	}

	.js .reveal.is-visible {
		opacity: 1;
		translate: none;
	}

	.reveal[data-reveal-delay="100"] {
		--reveal-delay: 0.1s;
	}

	.reveal[data-reveal-delay="200"] {
		--reveal-delay: 0.2s;
	}

	@media (prefers-reduced-motion: reduce) {
		.js .reveal {
			translate: none;
		}
	}
}