/**
 * Secciones de la Home.
 *
 * Las medidas comentadas son las del diseño sobre el lienzo de 1920 px.
 */

.silo-section {
	position: relative;
	/* Cada sección declara su propio remate; los valores salen del diseño. */
	padding-bottom: clamp(3rem, 8.5vw, 10.1875rem); /* 163px */
}

/* La franja de "qué hacemos" y la de clientes comparten el fondo negro. */
.silo-quehacemos,
.silo-clientes,
.silo-contacto {
	background: var(--c-black);
	color: var(--c-off-white);
}

.silo-servicios,
.silo-portfolio,
.silo-gobiernos {
	background: var(--c-off-white);
	color: var(--c-black);
}

/* Rótulo de sección: "(qué hacemos)", "(portfolio)". */
.silo-eyebrow {
	font-size: var(--fs-md);
	font-weight: var(--fw-light);
}

.silo-eyebrow--center {
	text-align: center;
}

/* --- Encabezado de sección ------------------------------------------------- */

/* La roseta se apoya en el borde de la retícula y el título arranca 44 px más
   a la derecha, de modo que la inicial se monta sobre ella. */
.silo-heading {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-6);
}

.silo-heading__title {
	position: relative;
	padding-left: clamp(1.5rem, 2.292vw, 2.75rem);
}

/* Se centra sobre la primera línea del título, no sobre el bloque entero:
   en Gobiernos el título ocupa tres renglones. */
.silo-heading__mark {
	position: absolute;
	left: 0;
	top: calc(var(--lh-display) * 0.5em);
	width: clamp(2.75rem, 5.7vw, 6.84rem); /* 109px */
	height: auto;
	transform: translate(-2px, -50%);
	color: var(--c-accent);
}

[data-theme="dark"] .silo-heading__mark {
	color: #333;
}

.silo-heading__text {
	position: relative;
}

/* El guion bajo del título es el cursor de una terminal: acompaña encendido a
   la frase mientras se escribe y queda parpadeando cuando termina. */
.silo-heading__caret {
	animation: silo-caret 1.06s steps(1, end) infinite;
}

.silo-heading__text.is-typing .silo-heading__caret {
	animation: none;
}

/* Lo que todavía no se escribió sigue ocupando su lugar, sólo que sin tinta:
   el título mide lo mismo desde el principio y nada se corre al teclearse. */
.silo-heading__pending {
	color: transparent;
}

/* Mientras dura la animación el cursor no ocupa ancho, así se posa sobre el
   siguiente carácter sin alterar dónde corta el renglón. */
.silo-heading__text.is-live .silo-heading__caret {
	display: inline-block;
	width: 0;
}

@keyframes silo-caret {
	0%,
	50% {
		opacity: 1;
	}

	50.01%,
	100% {
		opacity: 0;
	}
}

.silo-heading__arrow {
	flex: 0 0 auto;
	width: clamp(1.75rem, 3.06vw, 3.67rem); /* 59px */
	height: auto;
	margin-right: clamp(0rem, 1.6vw, 1.9375rem);
	color: currentColor;
	animation: silo-arrow 1s ease-in-out infinite alternate;
	margin-top: 15px;
}

/* La flecha señala que el bloque sigue más abajo: un vaivén lento y corto, que
   no compita con el título. El recorrido va en porcentaje de su propia altura,
   así conserva la misma proporción cuando la flecha escala con el ancho. */
@keyframes silo-arrow {
	from {
		transform: translateY(-4%);
	}

	to {
		transform: translateY(8%);
	}
}

/* La regla global de movimiento reducido sólo acorta la duración, y un
   parpadeo o un vaivén de 0.01ms serían peores que el original: aquí se
   apagan del todo. */
@media (prefers-reduced-motion: reduce) {
	.silo-heading__caret,
	.silo-heading__arrow {
		animation: none;
	}
}


@media (max-width: 768px) {
	.silo-heading__arrow {
		display: none;
	}
}

/* --- Hero ----------------------------------------------------------------- */

.silo-hero {
	background: var(--c-off-white);
	color: var(--c-black);
}

/* Franja de 547 px de alto sobre 1920 de ancho. */
.silo-hero__band {
	position: relative;
	display: grid;
	place-items: center;
	/* El ancho tiene que quedar fijado: si no, al entrar en juego min-height el
	   navegador deduce el ancho de la proporción y la franja se sale. */
	width: 100%;
	aspect-ratio: 1920 / 547;
	min-height: 15rem;
	background: var(--c-black);
	overflow: hidden;
	isolation: isolate;
}

.silo-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.silo-hero__media img,
.silo-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cuando iOS bloquea el autoplay —modo de bajo consumo, sobre todo— Safari
   dibuja su disco de inicio sobre el póster. Acá el video es decorativo y no
   lleva controles, así que ese botón sólo ensucia el hero: lo tapamos y el
   script se encarga de arrancar el video en la primera interacción. */
.silo-hero__video::-webkit-media-controls-start-playback-button {
	display: none;
}

/* Un velo tenue mantiene legible el título blanco sobre cualquier fotograma. */
.silo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
}

/* El título va centrado en la franja; el trazo cian no participa del centrado
   porque en el diseño cuelga por debajo, al 81% de la altura. */
.silo-hero__inner {
	display: grid;
	justify-items: center;
	width: 100%;
	padding-inline: var(--pad);
	text-align: center;
	color: var(--c-white);
}

.silo-hero__title {
	max-width: min(20ch, 100%);
	font-size: var(--fs-display);
	font-weight: var(--fw-extralight);
	line-height: var(--lh-display);
	letter-spacing: -0.005em;
}

/* Trazo cian de 107x2 px bajo el título. */
.silo-hero__rule {
	position: absolute;
	top: 81.4%;
	left: 50%;
	width: clamp(4rem, 5.57vw, 6.6875rem);
	height: 2px;
	background: var(--c-accent);
	transform: translateX(-50%);
}

.silo-hero__foot {
	padding-top: clamp(2rem, 4.22vw, 5.0625rem); /* 81px hasta la bajada */
	text-align: center;
}

.silo-hero__text {
	margin-inline: auto;
	max-width: 46em;
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	line-height: 2;
}

.silo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3.33vw, 4rem); /* 64px */
	margin-top: clamp(1.25rem, 1.93vw, 2.3125rem); /* 37px */
	padding-bottom: clamp(1.5rem, 2.86vw, 3.4375rem); /* 55px hasta la regla */
}

/* --- Servicios ------------------------------------------------------------ */

/* Las cuatro tarjetas miden 302 px en el diseño. minmax(0, 1fr) es lo que las
   iguala de verdad: con 1fr a secas la columna crece hasta el contenido más
   ancho —"COMUNITARIOS"— y ensancha esa sola tarjeta. */
.silo-servicios__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
	margin-top: clamp(2rem, 4.4vw, 5.25rem); /* 84px bajo el título */
}

.silo-servicio {
	/* El relleno lateral lo comparten la tarjeta y la regla que la cruza de
	   lado a lado, así que vive en una variable y no se puede desincronizar. */
	--card-pad-x: clamp(0.75rem, 0.885vw, 1.0625rem); /* 17px */

	display: flex;
	flex-direction: column;
	min-height: clamp(20rem, 22.08vw, 26.5rem); /* 424px */
	padding: clamp(0.875rem, 0.885vw, 1.0625rem) var(--card-pad-x)
		clamp(1.25rem, 1.82vw, 2.1875rem);
	background: var(--c-white);
	border-radius: var(--radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.silo-servicio:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}

/* --- Entrada escalonada de las tarjetas ------------------------------------- */

/* La comparten servicios y clientes: las tarjetas de una misma fila suben desde
   abajo una detrás de otra, de izquierda a derecha. Cada retícula pone su paso,
   su recorrido y el retardo de cada hijo; aquí sólo vive el mecanismo.

   Va por animación y no por la `transition` de .silo-reveal porque la tarjeta de
   servicios ya gasta esa propiedad en el realce del hover, y ambas mueven
   `transform`: compartiéndola, una de las dos se quedaría con la duración de la
   otra. `backwards` mantiene la tarjeta oculta durante su espera y devuelve el
   control al terminar, para que el hover vuelva a mandar sobre `transform`. */
.silo-servicio.is-visible,
.silo-cliente.is-visible {
	animation: silo-card-in var(--t-slow) var(--ease) var(--reveal-delay, 0s) backwards;
}

/* El punto de partida lo pone .silo-reveal; la llegada es el estado ya
   aplicado por .is-visible, así que el keyframe sólo necesita el `from`. */
@keyframes silo-card-in {
	from {
		opacity: 0;
		transform: translateY(var(--reveal-rise, 1.5rem));
	}
}

/* El bloque de 02-base.css neutraliza `transition`, que aquí no interviene. */
@media (prefers-reduced-motion: reduce) {
	.silo-servicio.is-visible,
	.silo-cliente.is-visible {
		animation: none;
	}
}

/* Los dos mandos del escalonado. El paso tiene que acercarse a la duración:
   por debajo de eso las tarjetas se solapan y entran casi a la vez, porque la
   curva gasta la mayor parte del recorrido en su primer tercio. Y el recorrido
   supera al de .silo-reveal porque la tarjeta es alta: en 24px el desplazamiento
   apenas se distingue del fundido. */
.silo-servicios__grid,
.silo-clientes__grid {
	--reveal-step: 0.15s;
	--reveal-rise: 5rem;
}

/* Servicios va en una sola fila de cuatro, así que el retardo crece de corrido. */
.silo-servicios__grid > :nth-child(2) {
	--reveal-delay: var(--reveal-step);
}

.silo-servicios__grid > :nth-child(3) {
	--reveal-delay: calc(var(--reveal-step) * 2);
}

.silo-servicios__grid > :nth-child(4) {
	--reveal-delay: calc(var(--reveal-step) * 3);
}

/* Clientes va en dos filas de dos, y cada una entra al llegar a su altura:
   el retardo se cuenta dentro de la fila, no sobre las cuatro seguidas. */
.silo-clientes__grid > :nth-child(2),
.silo-clientes__grid > :nth-child(4) {
	--reveal-delay: var(--reveal-step);
}

/* Círculo de 84 px: gris en reposo, cian al pasar el puntero. */
.silo-servicio__icon {
	display: block;
	width: clamp(3rem, 4.375vw, 5.25rem);
	margin: 0 0 clamp(0.5rem, 0.68vw, 0.8125rem); /* 13px hasta el rótulo */
	color: var(--c-off-white);
	transition: color var(--t-fast) var(--ease);
}

.silo-servicio:hover .silo-servicio__icon,
.silo-servicio:focus-within .silo-servicio__icon {
	color: var(--c-accent);
}

.silo-servicio__icon svg,
.silo-servicio__icon img {
	width: 100%;
	height: auto;
}

.silo-servicio__title {
	font-weight: var(--fw-light);
	line-height: 1.15;
	text-transform: uppercase;
}

.silo-servicio__title-1 {
	display: block;
	font-size: var(--fs-md);
}

/* "COMUNITARIOS" es la palabra más larga de las cuatro tarjetas y no entra en
   302 px con el interletrado normal. El diseño la resuelve apretándola (el PDF
   le aplica `-0.025 Tc` sólo a ella) y acercándola al borde. Como el rótulo se
   edita desde el admin, aquí el ajuste va en las cuatro por igual, con un pelo
   más de holgura para que ninguna se salga. */
.silo-servicio__title-2 {
	display: block;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.035em;
}

/* La línea que separa el rótulo de la descripción cruza la tarjeta de lado a
   lado, así que sale del área con relleno. */
.silo-servicio__text {
	margin: clamp(1rem, 1.15vw, 1.375rem) calc(var(--card-pad-x) * -1) 0;
	padding: clamp(1.25rem, 2.4vw, 2.875rem) var(--card-pad-x) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: var(--fs-body);
}

.silo-servicio .silo-link-explore {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--s-3);
}

/* --- Qué hacemos ---------------------------------------------------------- */

.silo-quehacemos {
	padding-top: clamp(3rem, 7.45vw, 8.9375rem); /* 143px hasta el rótulo */
	padding-bottom: clamp(2.5rem, 5.68vw, 6.8125rem); /* 109px hasta la regla */
}

.silo-quehacemos .silo-eyebrow {
	text-align: center;
}

.silo-quehacemos__claim {
	margin: clamp(1rem, 2.4vw, 1.875rem) auto 0;
	max-width: 34ch;
	text-align: center;
}

.silo-quehacemos__claim strong {
	display: block;
}

/* Los paneles miden 1025 px y van centrados, más angostos que la retícula. */
.silo-quehacemos__list {
	width: min(100%, 80.08%);
	margin: clamp(2rem, 4vw, 4.8125rem) auto 0;
}

.silo-quehacemos__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: var(--s-2) var(--s-3);
	align-items: center;
	min-height: clamp(4.5rem, 6.82vw, 8.1875rem); /* 131px */
	padding: clamp(1rem, 1.5vw, 1.8rem) clamp(1rem, 1.875vw, 2.25rem);
	border: 1px solid var(--c-accent);
	border-radius: var(--radius-lg);
	/* Degradado turquesa que se apaga hacia la derecha, como en el diseño. La
	   imagen aporta el grano; el degradado que va debajo es el respaldo si no
	   llega a cargar, y se le parece lo suficiente como para no notarse.
	   Con `cover` el panel recorta arriba y abajo, que es donde la imagen no
	   cambia: el recorrido horizontal del color se conserva entero. */
	background:
		url("../img/bg-gradient.jpg") center / cover no-repeat,
		linear-gradient(
			90deg,
			#0b1f22 0%,
			#0b3334 44%,
			#050d0e 72%,
			#000 88%
		);
}

.silo-quehacemos__row + .silo-quehacemos__row {
	margin-top: clamp(1rem, 1.875vw, 2.25rem); /* 36px */
}

/* --- Destello del panel ---------------------------------------------------- */

/* El ángulo se declara para que el navegador sepa interpolarlo: una variable
   sin tipo saltaría de 0 a una vuelta de golpe, sin recorrido intermedio. */
@property --silo-destello {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* El borde encendido y el resplandor los ve cualquier navegador; el destello
   que recorre el perímetro, sólo los que saben recortar el anillo.
   La fila es además un `.silo-reveal`: su transición de entrada se repite aquí
   porque `transition` se reemplaza entera, no se acumula. */
.silo-quehacemos__row {
	transition:
		opacity var(--t-slow) var(--ease),
		transform var(--t-slow) var(--ease),
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

.silo-quehacemos__row:hover,
.silo-quehacemos__row:focus-within {
	border-color: var(--c-white);
	box-shadow:
		0 0 0 1px rgba(0, 255, 255, 0.45),
		0 0 1.75rem rgba(0, 255, 255, 0.38);
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
	/* Un degradado cónico gira sobre el panel y la máscara descubre sólo el
	   anillo: lo que se ve girar es un destello sobre el borde. El anillo mide
	   2 px y se monta sobre el borde de 1 px, sobresaliendo otro píxel, para
	   que se lea igual de nítido en pantallas con escalado. */
	.silo-quehacemos__row::after {
		content: "";
		position: absolute;
		inset: -2px;
		padding: 2px;
		border-radius: calc(var(--radius-lg) + 2px);
		background: conic-gradient(
			from var(--silo-destello),
			transparent 0turn 0.72turn,
			rgba(0, 255, 255, 0.9) 0.9turn,
			#fff 0.975turn,
			transparent 1turn
		);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
		opacity: 0;
		transition: opacity var(--t-fast) var(--ease);
		pointer-events: none;
	}

	.silo-quehacemos__row:hover::after,
	.silo-quehacemos__row:focus-within::after {
		opacity: 1;
		animation: silo-destello 1.6s linear infinite;
	}
}

@keyframes silo-destello {
	to {
		--silo-destello: 1turn;
	}
}

/* Sin movimiento el destello no gira: queda un reflejo fijo en el borde. */
@media (prefers-reduced-motion: reduce) {
	.silo-quehacemos__row:hover::after,
	.silo-quehacemos__row:focus-within::after {
		animation: none;
	}
}

.silo-quehacemos__row dt {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--c-white);
}

.silo-quehacemos__row dd {
	margin: 0;
	max-width: 46em;
	font-size: var(--fs-body);
}

/* --- Clientes -------------------------------------------------------------- */

.silo-clientes {
	padding-top: 0;
	padding-bottom: clamp(3rem, 8.54vw, 10.25rem); /* 164px */
}

.silo-clientes__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: clamp(1.5rem, 2.97vw, 3.5625rem); /* 57px */
	row-gap: clamp(2rem, 3.9vw, 4.6875rem); /* 75px */
	margin-top: clamp(2rem, 6.04vw, 7.25rem); /* 116px */
}

.silo-cliente__media {
	margin: 0;
	aspect-ratio: 608 / 332;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: #111;
}

.silo-cliente__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Flecha cian bajo la imagen. Al reducirse tanto, el trazo del SVG original
   quedaría por debajo del píxel: se engrosa desde CSS. */
.silo-cliente__arrow {
	display: block;
	width: clamp(0.875rem, 1.04vw, 1.25rem);
	height: auto;
	margin: clamp(0.75rem, 1.15vw, 1.375rem) 0 clamp(0.5rem, 0.83vw, 1rem);
	color: var(--c-accent);
}

.silo-cliente__arrow path {
	stroke-width: 5;
}

.silo-cliente__title {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--c-white);
}

.silo-cliente__text {
	margin-top: 0.5em;
	max-width: 34em;
	font-size: var(--fs-body);
}

/* --- Portfolio ------------------------------------------------------------- */

.silo-portfolio {
	padding-top: clamp(2.5rem, 5.1vw, 6.125rem); /* 98px */
	padding-bottom: clamp(3rem, 6.82vw, 8.1875rem); /* 131px hasta la regla */
}

/* En el diseño el titular mide 1322 px: se sale de los 1280 de la retícula. */
.silo-portfolio__intro {
	width: min(100% - 2 * var(--s-3), 87rem);
	margin-inline: auto;
}

.silo-portfolio__claim {
	margin-top: clamp(1rem, 2.4vw, 2.875rem);
	text-align: center;
}

.silo-portfolio__claim strong {
	display: block;
}

.silo-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: clamp(2rem, 5.8vw, 6.9375rem);
}

.silo-tile {
	position: relative;
	aspect-ratio: 407 / 373;
	background: var(--c-black);
	overflow: hidden;
}

.silo-tile__link {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: clamp(1rem, 1.72vw, 2.0625rem); /* 33px */
	color: var(--c-off-white);
}

.silo-tile__link:hover {
	opacity: 1;
}

.silo-tile__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}

/* Velo negro en reposo y lavado cian al pasar el puntero: uno se desvanece
   mientras aparece el otro. Ambos van por encima de la foto, que es un
   hermano anterior. */
.silo-tile__link::before,
.silo-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	transition: opacity var(--t-slow) var(--ease);
}

.silo-tile__link::before {
	background: var(--c-black);
	opacity: 0.5;
}

.silo-tile__link::after {
	background: var(--c-accent-soft);
	opacity: 0;
}

.silo-tile__link:hover::before,
.silo-tile__link:focus-visible::before {
	opacity: 0;
}

.silo-tile__link:hover::after,
.silo-tile__link:focus-visible::after {
	opacity: 0.4;
}

.silo-tile__link:hover .silo-tile__image,
.silo-tile__link:focus-visible .silo-tile__image {
	transform: scale(1.03);
}

.silo-tile__title {
	position: relative;
	z-index: 2;
	font-size: var(--fs-md);
	font-weight: var(--fw-light);
	line-height: 1.2;
	text-transform: uppercase;
}

.silo-portfolio__empty {
	margin-top: var(--s-5);
	text-align: center;
}

/* --- Gobiernos ------------------------------------------------------------- */

.silo-gobiernos {
	padding-top: 0;
	padding-bottom: clamp(3rem, 7.55vw, 9.0625rem); /* 145px */
}

.silo-gobiernos__body {
	/* Tarjeta blanca de 1180 px, 50 px a la derecha del borde de la retícula. */
	width: min(100%, 92.19%);
	margin-top: clamp(2rem, 4.8vw, 5.75rem);
	margin-left: clamp(0rem, 2.6vw, 3.125rem);
	padding: clamp(1.5rem, 3.49vw, 4.1875rem) clamp(1.5rem, 3.49vw, 4.1875rem)
		clamp(1.5rem, 2.6vw, 3.125rem);
	background: var(--c-white);
	border-radius: var(--radius-lg);
}

.silo-gobiernos__intro {
	max-width: 56em;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
}

.silo-gobiernos__list {
	margin-top: clamp(1rem, 1.9vw, 2.25rem);
	font-size: var(--fs-base);
}

/* Cada tema va separado del siguiente por una línea fina. */
.silo-gobiernos__list li {
	display: flex;
	gap: clamp(1rem, 1.6vw, 1.9375rem);
	padding-block: clamp(0.5rem, 0.83vw, 1rem);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.silo-gobiernos__list li:last-child {
	border-bottom: 0;
}

.silo-gobiernos__list li::before {
	content: "•";
	flex: 0 0 auto;
}

.silo-gobiernos__media {
	margin: var(--s-6) 0 0;
}

.silo-gobiernos__media img {
	width: 100%;
	max-height: 34rem;
	object-fit: cover;
}

/* --- Contacto -------------------------------------------------------------- */

.silo-contacto {
	padding-block: clamp(2.5rem, 5.8vw, 6.9375rem) clamp(2.5rem, 4.8vw, 5.75rem);
	text-align: center;
}

.silo-contacto__title {
	margin-inline: auto;
	max-width: 50ch;
	color: var(--c-white);
}

.silo-contacto__text {
	margin: clamp(1.5rem, 4.7vw, 5.625rem) auto 0; /* 90px */
	max-width: 44em;
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	line-height: 2;
}

.silo-contacto__action {
	margin-top: clamp(1.5rem, 4.17vw, 5rem); /* 80px */
}

/* --- Reservas de imagen ---------------------------------------------------- */

.silo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.06) 0 8px,
		rgba(255, 255, 255, 0.02) 8px 16px
	);
}

/* --- Adaptaciones ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.silo-servicios__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Al partirse en dos filas, la segunda vuelve a escalonar desde su
	   izquierda: si no, entraría entera con el retardo heredado de la primera. */
	.silo-servicios__grid > :nth-child(3) {
		--reveal-delay: 0s;
	}

	.silo-servicios__grid > :nth-child(4) {
		--reveal-delay: var(--reveal-step);
	}

	.silo-quehacemos__list {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.silo-servicios__grid,
	.silo-clientes__grid,
	.silo-portfolio__grid {
		grid-template-columns: 1fr;
	}

	.silo-servicio {
		min-height: 0;
	}

	/* En una sola columna cada tarjeta ya entra por su cuenta al hacer scroll:
	   el retardo sólo añadiría una espera después de tenerla en pantalla. */
	.silo-servicios__grid > *,
	.silo-clientes__grid > * {
		--reveal-delay: 0s;
	}

	.silo-quehacemos__row {
		grid-template-columns: 1fr;
		gap: var(--s-1);
	}

	.silo-hero__text,
	.silo-contacto__text {
		line-height: 1.7;
	}

	.silo-heading__title {
		padding-left: clamp(1rem, 4vw, 1.75rem);
	}
}