/* ==========================================================================
   Página Infraestructura (07_INFRAESTRUCTURA_ESP del Figma "MiriadLanding")
   Lienzo 1512 px a escala 1/3: los valores van ×3.
   ========================================================================== */

.capa-fija {
	padding-top: clamp(1.75rem, 3vw, 2.8rem);
	background: var(--c-topo);
	color: var(--c-negro);
}

.capa-fija__titulo {
	font-family: var(--f-titulo);
	font-size: clamp(1.75rem, 4.37vw, 4.125rem);   /* 66 px */
	font-weight: 400;
	line-height: 1.26;
}

.capa-fija__texto {
	max-width: 1356px;
	margin-top: clamp(0.75rem, 1.2vw, 1.1rem);
	padding-bottom: clamp(1.75rem, 3vw, 2.8rem);
	font-size: clamp(0.95rem, 1.44vw, 1.375rem);   /* 22 px */
	font-weight: 400;
	line-height: 1.36;
}

/* --- Nodos: dos piezas a sangre, media pantalla cada una ------------------
   Figma: 768×633 pegadas entre sí, con el rótulo centrado sobre la foto.
   -------------------------------------------------------------------------- */

.nodos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nodo {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 768 / 633;
	padding: clamp(1.5rem, 3vw, 2.8rem) clamp(1.25rem, 4.5vw, 4.25rem);
	overflow: hidden;
	/* El rótulo va en blanco sobre la foto, no hereda el negro de .capa-fija. */
	color: var(--c-blanco);
	text-align: center;
}

.nodo__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nodo:hover .nodo__img { transform: scale(1.05); }

/* El Figma pone el rótulo blanco directamente sobre la foto, y en las dos cae
   justo encima de una zona clara (la torre de VIPER, las pantallas de PUMA):
   sin velo no hay contraste suficiente para leerlo. */
.nodo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 78% 55% at 50% 50%, rgb(8 8 8 / 0.5) 0%, rgb(8 8 8 / 0.06) 100%),
		linear-gradient(180deg, rgb(8 8 8 / 0.26) 0%, rgb(8 8 8 / 0.34) 50%, rgb(8 8 8 / 0.58) 100%);
	transition: background 0.4s ease;
}
.nodo:hover::before { background: rgb(8 8 8 / 0.3); }

.nodo__cuerpo {
	max-width: 543px;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.7);
}

.nodo__nombre {
	font-size: clamp(1.4rem, 2.58vw, 2.44rem);   /* 39 px */
	font-weight: 500;
	line-height: 1.1;
}

.nodo__titular {
	margin-top: 0.35em;
	font-size: clamp(1.1rem, 2.18vw, 2.06rem);   /* 33 px */
	font-weight: 500;
	line-height: 1.1;
}

.nodo__texto {
	max-width: 432px;
	margin: clamp(0.75rem, 1.4vw, 1.3rem) auto 0;
	font-family: var(--f-alt);
	font-size: clamp(0.8rem, 1.06vw, 1rem);   /* 16 px */
	font-weight: 300;
	line-height: 1.5;
}

.nodo__cta { margin-top: clamp(1rem, 1.7vw, 1.6rem); }

/* --- Adaptación a pantallas menores --------------------------------------- */

@media (max-width: 700px) {
	.nodos { grid-template-columns: 1fr; }
	.nodo { aspect-ratio: 4 / 3; }
}