/* ==========================================================================
   Fichas de sistemas (FICHA - SISTEMAS - * del Figma "MiriadLanding")
   Lienzo 1512 px a escala 1/3: los valores van ×3.
   Complementa a ficha.css, que es de donde salen el encabezado, la entradilla,
   el resumen, el panel oscuro con la tabla, las píldoras y las botoneras.
   Aquí solo va lo que estas fichas no comparten con las de tecnología.
   ========================================================================== */

/* --- Paquetes operativos: rótulo sobre banda negra y foto debajo ----------- */

/* En estas fichas las píldoras no cierran la sección: debajo vienen los
   apartados de texto y los paquetes, y sin este aire quedan pegados al rótulo
   siguiente. */
.ficha--sistema .pastillas {
	margin-bottom: clamp(1.75rem, 3.4vw, 3.25rem);
}

/* Lo mismo con los apartados de texto: en HIPPOS y ELEFAS el último queda
   justo encima del rótulo de los paquetes. */
.ficha--sistema .ficha-apartado {
	margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.paquetes {
	display: grid;
	/* En el Figma son tres tarjetas de 345 px que no llegan al borde derecho:
	   con minmax se quedan en su tamaño en vez de repartirse todo el ancho. */
	grid-template-columns: repeat(3, minmax(0, 345px));
	gap: clamp(0.6rem, 1.5vw, 1.4rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.paquete {
	background: #0a0a0a;
	border-radius: 8px;
	overflow: hidden;
}

.paquete__titulo {
	padding: 0.85em 1em;
	color: var(--c-blanco);
	font-family: var(--f-texto);
	font-size: clamp(0.8rem, 1.06vw, 1rem);   /* 16 px */
	font-weight: 600;
	line-height: 1.2;
}

.paquete__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 345 / 288;
	object-fit: cover;
}

/* --- Ajustes del bloque oscuro para estas fichas -------------------------- */

/* Las tablas de sistemas son más largas que las de tecnología (RHINOS tiene
   catorce filas), así que el rótulo de la izquierda necesita algo más de aire
   para no partirse en tres líneas. */
.ficha--sistema .especificacion {
	grid-template-columns: minmax(0, 38%) minmax(0, 62%);
}

@media (max-width: 1000px) {
	.paquetes { grid-template-columns: repeat(2, minmax(0, 345px)); }
}

@media (max-width: 700px) {
	.paquetes { grid-template-columns: minmax(0, 345px); }

	.ficha--sistema .especificacion {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}