/* Heuristic — hero de portada (maqueta 6).
   Referencia: tools/preview/hero.php, caso 6. */

.hx-hero6 {
	position: relative;
	overflow: hidden;
	/* El contenido cierra alrededor del 62 % del alto; de ahí abajo es de la foto.
	   96px arriba, no 40: con 40 el bloque quedaba pegado a la cápsula de la cabecera y el
	   conjunto se leía descentrado hacia arriba (Juano, 2026-07-29). */
	padding: 96px 80px 300px;
	text-align: center;
}

.hx-hero6-in {
	position: relative;
	z-index: 3;
	max-width: 1280px;
	margin-inline: auto;
}

/* --- Cumbre sobre mar de nubes -------------------------------------------
   La foto ocupa **solo la banda inferior**, no toda la sección. Con la caja a
   `inset: 0` y la máscara al 52 % la cumbre caía siempre en la mitad tapada y la banda
   visible quedaba en niebla plana: en cualquier foto de cumbre el motivo está arriba.
   Acotando la caja al tramo visible, el encuadre entero entra ahí.

   No hay velo blanco encima. El velo es justo lo que dejaba la foto lavada —ni fondo ni
   contenido— en las once maquetas que se descartaron. */
.hx-hero6-foto {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Banda alta y foto lavada: es el ajuste que pidió Juano con una captura de
	   referencia (2026-07-29). Antes eran 470px con la foto a plena densidad, y la cumbre
	   pesaba tanto que se leía como una fotografía pegada debajo del hero. Ahora entra
	   como acuarela y el titular sigue mandando. */
	height: 660px;
	z-index: 1;
	background-size: cover;
	background-position: center 42%;
	/* Desaturada como se acordó para el faldón, y al 58 % de opacidad: la foto acompaña,
	   no compite. */
	opacity: .58;
	filter: saturate(.62);
	/* Desvanece por arriba **y por abajo**: la foto ya no termina en un corte recto contra
	   la sección siguiente, se disuelve en el fondo. Antes ese corte lo tapaba la franja
	   verde de datos; al retirarla (2026-07-29) el filo quedaba a la vista. */
	-webkit-mask-image: linear-gradient(to bottom,
		transparent 0%, rgba(0, 0, 0, .28) 22%, #000 48%, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom,
		transparent 0%, rgba(0, 0, 0, .28) 22%, #000 48%, #000 72%, transparent 100%);
}

/* --- Nubes a la deriva ----------------------------------------------------
   Dos planos a velocidades distintas. Se animan por `background-position`: un elemento
   con `transform` amplía el área desplazable del documento y eso ya costó un scroll
   lateral casi infinito y un hueco blanco al final de la página.

   Son fotos de nube blanca sobre negro, invertidas y multiplicadas, así que no hace falta
   PNG recortado. A .14 se leían como manchas grises sucias; .07 las deja en veladura. */
.hx-hero6-nube {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: auto 100%;
	pointer-events: none;
	filter: invert(1);
	mix-blend-mode: multiply;
}

.hx-hero6-nube.is-alta {
	top: 110px;
	height: 210px;
	opacity: .07;
	animation: hx-nube-deriva 78s linear infinite;
}

.hx-hero6-nube.is-media {
	top: 300px;
	height: 160px;
	opacity: .05;
	animation: hx-nube-deriva 96s linear infinite reverse;
}

/* Termina en `calc(100% + …)`, no en 100 %, o la nube se queda clavada en el borde
   derecho al final del ciclo. */
@keyframes hx-nube-deriva {
	from { background-position: -30% center }
	to   { background-position: calc(100% + 30%) center }
}

/* --- Diagrama ------------------------------------------------------------
   Las piezas se sitúan por su **centro**, con el mismo par de coordenadas que usan las
   líneas del SVG: el eje X en % —el viewBox de 1280 se estira al ancho del contenedor— y
   el Y en píxeles, porque el alto es fijo a 300. Ese es el arreglo de fondo; antes las
   cajas iban en porcentajes elegidos a ojo y no coincidían con las líneas. */
.hx-hero6-mapa {
	position: relative;
	height: 320px;
	margin: 8px 0 34px;
}

.hx-hero6-mapa svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hx-pieza {
	position: absolute;
	display: grid;
	place-items: center;
	z-index: 3;
	transform: translate(-50%, -50%);
}

.hx-pieza svg { position: static; width: auto; height: auto }

/* Los iconos van en blanco sobre la ficha de color. El shortcode los pinta en forest, así
   que se blanquean aquí en lugar de duplicar el shortcode con otro color. */
.hx-pieza--icono svg,
.hx-pieza--core svg { filter: brightness(0) invert(1) }

/* Radio 14, un punto por encima del 10 de tarjeta: estas piezas son pequeñas y con 10 se
   ven cuadradas. */
.hx-pieza--icono { border-radius: 14px }

.hx-pieza--core {
	border-radius: 20px;
	background: #137A3A;
	box-shadow: 0 16px 34px rgba(19, 122, 58, .22);
}

/* Las fotos van a radio 8, el del kit para imágenes. Sin `overflow: hidden`: con
   `background-image` el radio ya recorta, y el hidden se comía la etiqueta de debajo. */
.hx-pieza--foto {
	border-radius: 8px;
	overflow: visible;
	background-size: cover;
	background-position: center center;
	border: 1px solid rgba(255, 255, 255, .8);
	box-shadow: 0 10px 26px rgba(0, 26, 13, .16);
	filter: saturate(.85);
}

.hx-pieza-tag {
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: 'Akkurat Mono', ui-monospace, monospace;
	font-size: 9.5px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #5A605A;
}

.hx-hero6-vertice { fill: #137A3A }

/* Los paquetes que viajan por el filete. Las unidades son fracciones del tramo gracias al
   `pathLength="1"` que pone el shortcode: así el mismo keyframe vale para el tramo de 207
   unidades y para el de 84, y el paquete recorre siempre su trazo entero.

   Con el recorrido en píxeles (`stroke-dashoffset: -560`) el paquete se iba fuera del
   trazo en el primer instante y la animación parecía no existir. */
.hx-hero6-flujo {
	stroke: #A8CE3A;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: .14 1;
	opacity: 0;
	animation: hx-hero6-paquete 5.4s cubic-bezier(.2, 0, 0, 1) infinite;
	animation-fill-mode: both;
}

@keyframes hx-hero6-paquete {
	0%         { stroke-dashoffset: .14; opacity: 0 }
	8%         { opacity: 1 }
	52%        { stroke-dashoffset: -1; opacity: 1 }
	60%, 100%  { stroke-dashoffset: -1; opacity: 0 }
}

/* --- Titular y CTA ------------------------------------------------------- */

.hx-hero6-h1 {
	font-family: 'Aeonik', sans-serif;
	font-weight: 500;
	font-size: 66px;
	line-height: 72px;
	letter-spacing: -.04em;
	color: #2B2B2B;
	margin: 0 auto;
	max-width: 760px;
	text-wrap: balance;
}

.hx-hero6-sub {
	font-family: 'Aeonik', sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 28px;
	color: #5A605A;
	margin: 22px auto 0;
	max-width: 520px;
}

/* El rótulo del núcleo, solo en móvil: ver el comentario del shortcode. */
.hx-hero6-nucleo { display: none }

.hx-hero6-acciones { padding-top: 30px }

/* Un solo CTA, como la referencia. **Radio 0**, el del kit: la píldora se probó y Juano la
   quitó (2026-07-29). La excepción de radio grande se queda solo en la cápsula de la
   cabecera. */
.hx-hero6 .hx-hero6-btn {
	display: inline-block;
	background: #137A3A;
	color: #fff;
	text-decoration: none;
	font-family: 'Aeonik', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	padding: 16px 38px;
	border: 0;
	border-radius: 0;
	transition: background 180ms cubic-bezier(.2, 0, 0, 1);
}

.hx-hero6 .hx-hero6-btn:hover { background: #10130F; color: #fff }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.hx-hero6 { padding: 84px 40px 250px }
	.hx-hero6-h1 { font-size: 48px; line-height: 56px }
	.hx-hero6-mapa { height: 300px }
	.hx-pieza--icono { width: 62px !important; height: 62px !important }
	.hx-pieza--core { width: 96px !important; height: 96px !important }
}

/* En móvil el diagrama no cabe: 1280 de viewBox estirados a 390 dejan las piezas
   solapadas y las líneas en ángulos absurdos, así que el SVG se oculta y las fichas se
   apilan.

   Segunda vuelta (Juano, 2026-07-29: «en móvil el hero está regulín»). Lo que estaba mal:

   · Las fichas caían en una fila que envolvía sola —cuatro arriba, y abajo VoIP con las dos
     fotos de tamaños distintos—, con las etiquetas desalineadas. Ahora es una **rejilla de
     dos columnas** con celdas iguales, y el núcleo ocupa la fila completa arriba, que es lo
     que dice la topología.
   · Las dos fotos-nodo se retiran en móvil: a 128px son dos sellos ilegibles y compiten con
     la cumbre, que ya es la foto de esta pantalla.
   · **El titular va primero.** El diagrama abría la pantalla sin decir nada; en móvil manda
     el mensaje y el esquema ilustra después.
   · La cumbre bajaba a 660px sobre un hero de 846, así que el subtítulo caía sobre la ladera
     y se leía fatal. Baja a 400 y con menos opacidad. */
@media (max-width: 767px) {
	.hx-hero6 { padding: 68px 20px 150px }
	.hx-hero6-h1 { font-size: 34px; line-height: 42px }
	.hx-hero6-sub { font-size: 17px; line-height: 28px }

	/* Reordenado: titular, subtítulo, CTA y al final el esquema. */
	.hx-hero6-in { display: flex; flex-direction: column }
	.hx-hero6-h1       { order: 1 }
	.hx-hero6-sub      { order: 2 }
	.hx-hero6-acciones { order: 3 }
	.hx-hero6-mapa     { order: 4; margin: 44px 0 0 }

	.hx-hero6-mapa {
		height: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 42px 12px;
		justify-items: center;
	}

	.hx-hero6-mapa svg { display: none }

	/* El núcleo, a fila completa y más grande: es de quien cuelga todo lo demás. */
	.hx-pieza--core { grid-column: 1 / -1 }

	/* `relative`, no `static`: la etiqueta va en absoluto y con la ficha en `static` se
	   anclaba al contenedor del mapa, así que las siete etiquetas acababan apiladas unas
	   sobre otras en la misma línea. */
	.hx-pieza {
		position: relative;
		transform: none;
		left: auto !important;
		top: auto !important;
	}

	.hx-pieza--icono {
		width: 64px !important;
		height: 64px !important;
	}

	.hx-pieza--core {
		width: 78px !important;
		height: 78px !important;
	}

	/* Fuera las fotos-nodo: a 128px no se lee nada y compiten con la cumbre. */
	.hx-pieza--foto { display: none }

	/* La etiqueta cuelga en absoluto bajo su ficha —no en el flujo—, porque el alto de la
	   ficha está fijado; el `gap` de fila reserva su sitio.
	   
	   La del núcleo **sí se muestra aquí**: su celda ocupa la fila completa, así que los
	   ~230px de «INFRAESTRUCTURA SUPERVISADA» caben en una línea. El párrafo de refuerzo
	   `.hx-hero6-nucleo` se queda oculto: con el esquema al final de la pantalla caía sobre
	   las etiquetas de la última fila, que son absolutas y no lo empujan. */
	.hx-hero6-nucleo { display: none }

	/* La última fila no tiene `gap` debajo, y sus etiquetas van en absoluto: sin este
	   padding se salían de la sección. */
	.hx-hero6-mapa { padding-bottom: 24px }

	/* Con la cumbre más visible, las etiquetas caen sobre la ladera y en gris se perdían
	   —«ENDPOINTS» desaparecía—. Pasan a ink con un realce blanco de 2px.
	   
	   No es el glow que el cliente vetó: aquello eran halos de color flotando como adorno.
	   Esto es un realce de una sola sombra, ceñido al texto, y su única función es la
	   legibilidad sobre foto. */
	.hx-pieza-tag {
		color: #2B2B2B;
		text-shadow: 0 1px 2px rgba(255, 255, 255, .75);
	}

	/* La cumbre. Con 400px y opacidad .46 apenas se veía (Juano): en móvil la sección es
	   estrecha, así que el `cover` recorta mucho y encima la máscara se come los extremos.
	   Sube a 520 y a .66, y el desvanecido arranca más abajo para que la silueta llegue
	   entera. Aquí puede permitírselo porque lo que cae encima son las fichas verdes, que
	   son opacas; el texto queda por arriba, fuera de la banda. */
	.hx-hero6-foto {
		height: 520px;
		opacity: .66;
		-webkit-mask-image: linear-gradient(to bottom,
			transparent 0%, rgba(0, 0, 0, .45) 16%, #000 40%, #000 84%, transparent 100%);
		mask-image: linear-gradient(to bottom,
			transparent 0%, rgba(0, 0, 0, .45) 16%, #000 40%, #000 84%, transparent 100%);
	}

	.hx-hero6-nube.is-alta  { top: 60px; height: 150px }
	.hx-hero6-nube.is-media { top: 220px; height: 120px }
}

@media (min-width: 1921px) {
	.hx-hero6 { padding-bottom: 230px }
	.hx-hero6-foto { height: 520px }
}

@media (min-width: 2400px) {
	.hx-hero6 { padding-bottom: 210px }
	.hx-hero6-foto { height: 470px }
}

@media (prefers-reduced-motion: reduce) {
	.hx-hero6-nube { animation: none; background-position: 40% center }
	.hx-hero6-flujo { animation: none; opacity: 0 }
}