/* ==========================================================================
   Fichas de tecnología (FICHA - TECNOLOGIA - * del Figma "MiriadLanding")
   Lienzo 1512 px a escala 1/3: los valores van ×3.
   Una sola hoja para las ocho fichas; los bloques que una ficha no usa
   simplemente no se pintan.
   ========================================================================== */

/* --- Encabezado: foto del producto y rótulo enorme ------------------------ */

.ficha-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 46.6vw, 705px);
	padding-bottom: clamp(1rem, 2.4vw, 2.25rem);
	overflow: hidden;
	isolation: isolate;
}

.ficha-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo del Figma (rect 2049, #0C0C0C al 63 %). No es decorativo: varias fotos
   son de estudio con fondo claro y el rótulo va en blanco. Comparte el z-index
   negativo del fondo y se pinta después que él, así que oscurece la foto sin
   tapar el título. */
.ficha-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(12, 12, 12, 0.63);
}

.ficha-hero__titulo {
	font-family: var(--f-titulo);
	font-size: clamp(3rem, 9.5vw, 8.94rem);   /* 143 px */
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* --- Banda negra con la entradilla ---------------------------------------- */

.ficha-entradilla {
	padding-block: clamp(1.5rem, 2.4vw, 2.25rem);
	background: var(--c-negro);
}

.ficha-entradilla__eyebrow {
	margin-bottom: 0.6em;
	font-family: var(--f-titulo);
	font-size: clamp(0.95rem, 1.32vw, 1.25rem);   /* 20 px */
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ficha-entradilla__texto {
	max-width: 1300px;
	font-size: clamp(1rem, 1.59vw, 1.5rem);   /* 24 px */
	font-weight: 400;
	line-height: 1.33;
}

/* --- Resumen (fondo blanco) ----------------------------------------------- */

.ficha-resumen {
	padding-block: clamp(1.75rem, 3vw, 2.8rem);
	background: var(--c-blanco);
	color: var(--c-negro);
}

.ficha-resumen__titulo {
	margin-bottom: 0.4em;
	font-family: var(--f-titulo);
	font-size: clamp(1.6rem, 3.17vw, 3rem);   /* 48 px */
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.ficha-resumen__texto {
	max-width: 1400px;
	font-size: clamp(0.95rem, 1.32vw, 1.25rem);   /* 20 px */
	line-height: 1.45;
}
.ficha-resumen__texto > p + p { margin-top: 0.9em; }

/* Rótulo de sección, repetido en casi todos los bloques. */
.ficha-rotulo {
	margin-bottom: clamp(0.75rem, 1.2vw, 1.1rem);
	font-family: var(--f-titulo);
	font-size: clamp(0.95rem, 1.32vw, 1.25rem);   /* 20 px */
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- Capacidades: rejilla de pastillas negras ----------------------------- */

.ficha-capacidades {
	padding-block: clamp(1.5rem, 2.4vw, 2.25rem);
	background: #d8d3c9;
	color: var(--c-negro);
}

.pastillas {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.5rem, 0.95vw, 0.9rem);
}

.pastilla {
	display: grid;
	place-items: center;
	min-height: clamp(52px, 4.6vw, 70px);
	padding: 0.7em 0.9em;
	background: #0a0a0a;
	border-radius: 8px;
	color: var(--c-blanco);
	font-size: clamp(0.8rem, 0.86vw, 0.813rem);   /* 13 px */
	line-height: 1.25;
	text-align: center;
	transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pastilla:hover { background: var(--c-marron); transform: translateY(-3px); }

/* Con 8 capacidades el Figma las reparte en 4 columnas, no en 5. */
.pastillas:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Bloques claros (nombre, variantes, apartados) ------------------------ */

.ficha-claro {
	padding-block: clamp(1.5rem, 2.4vw, 2.25rem);
	background: #d8d3c9;
	color: var(--c-negro);
}

.ficha-claro__texto {
	max-width: 1400px;
	font-size: clamp(0.9rem, 1.19vw, 1.125rem);   /* 18 px */
	line-height: 1.45;
}
.ficha-claro__texto > p + p { margin-top: 0.7em; }

.ficha-claro--cierre { padding-bottom: clamp(2rem, 3.4vw, 3.2rem); }

.variantes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1.5rem);
	margin-bottom: clamp(1.5rem, 2.4vw, 2.25rem);
}

/* Con dos variantes ocupan la mitad cada una, no un tercio. */
.variantes:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.variante {
	padding: clamp(1rem, 1.6vw, 1.5rem);
	background: var(--c-marron);
	border-radius: 10px;
	color: var(--c-blanco);
}

.variante__nivel {
	font-size: clamp(0.8rem, 1.06vw, 1rem);   /* 16 px */
	line-height: 1.3;
	color: var(--c-arena);
}

.variante__nombre {
	margin: 0.15em 0 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 1.5px solid rgb(255 255 255 / 0.35);
	font-size: clamp(1.05rem, 1.59vw, 1.5rem);   /* 24 px */
	font-weight: 400;
	line-height: 1.25;
}

.variante__texto {
	font-size: clamp(0.8rem, 1.06vw, 1rem);
	line-height: 1.45;
}

/* Dentro del panel oscuro las variantes van apiladas y sin caja propia. */
.variantes--panel {
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.2vw, 2.06rem);
	margin-bottom: 0;
}
.variante--plana { padding: 0; background: none; border-radius: 0; }

/* Apartados con título en negrita y viñetas, separados por línea. */
.ficha-apartado + .ficha-apartado {
	margin-top: clamp(1.25rem, 2vw, 1.9rem);
	padding-top: clamp(1.25rem, 2vw, 1.9rem);
	border-top: 1.5px solid rgb(0 0 0 / 0.35);
}

.ficha-apartado__titulo {
	margin-bottom: 0.4em;
	font-size: clamp(0.9rem, 1.19vw, 1.125rem);   /* 18 px */
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.ficha-apartado p,
.ficha-apartado .lista-puntos {
	font-size: clamp(0.9rem, 1.19vw, 1.125rem);
	line-height: 1.45;
}

.lista-puntos { display: grid; gap: 0.3em; }
.lista-puntos li { position: relative; padding-left: 1.2em; }
.lista-puntos li::before {
	content: '•';
	position: absolute;
	left: 0.2em;
	top: 0;
}
.lista-puntos--menuda li { padding-left: 1em; }

/* --- Bloque oscuro con la foto de detalle --------------------------------- */

.ficha-detalle {
	display: grid;
	grid-template-columns: minmax(0, 49%) minmax(0, 51%);
	align-items: stretch;
	background: var(--c-marron);
}

/* minmax(0, 1fr) y no 1fr a secas: "1fr" es "minmax(auto, 1fr)", y ese auto
   impide que la pista baje del ancho de su contenido. Con la tabla de MER
   —720 px de mínimo para no volverse ilegible— eso estiraba la columna y
   desbordaba la página entera en el móvil. Así el que se desplaza es el carril
   de la tabla, que es lo previsto. */
.ficha-detalle--ancho { grid-template-columns: minmax(0, 1fr); }

.ficha-detalle__panel {
	min-width: 0;
	padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.25rem)
	         clamp(1.75rem, 2.8vw, 2.6rem) var(--margen);
	/* Alinea con el contenedor general en pantallas anchas. */
	padding-left: max(var(--margen), calc((100vw - var(--lienzo)) / 2 + var(--margen)));
}

.ficha-detalle--ancho .ficha-detalle__panel {
	/* El margen automático centra el panel en pantallas anchas, pero de paso
	   desactiva el estirado propio del grid y deja que el panel tome el ancho de
	   su contenido: con la tabla de MER dentro, 760 px. El width lo devuelve al
	   ancho de la pista, y el max-width sigue centrándolo por encima de 1512. */
	width: 100%;
	max-width: var(--lienzo);
	margin-inline: auto;
	padding-inline: var(--margen);
}

.ficha-detalle__media {
	position: relative;
	min-height: clamp(260px, 30vw, 460px);
}

.ficha-detalle__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sensores integrados: rejilla 2×2 con rótulo, nombre y descripción. */
.sensores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.2vw, 2.06rem) clamp(1rem, 1.9vw, 1.8rem);
}

.sensor__tipo {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: clamp(0.8rem, 0.79vw, 0.8rem);   /* 12 px */
	line-height: 1.3;
	color: var(--c-arena);
}
.sensor__tipo svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-blanco); }

.sensor__nombre {
	margin: 0.1em 0 0.35em;
	padding-bottom: 0.35em;
	border-bottom: 1.5px solid rgb(255 255 255 / 0.5);
	font-size: clamp(1rem, 1.46vw, 1.375rem);   /* 22 px */
	font-weight: 400;
	line-height: 1.2;
}

.sensor__texto {
	font-size: clamp(0.8rem, 0.79vw, 0.8rem);
	line-height: 1.4;
	color: var(--c-arena);
}

/* Tabla de especificaciones a una columna (HORN30). */
.especificaciones { margin: 0; }

.especificacion {
	display: grid;
	grid-template-columns: minmax(0, 32%) minmax(0, 68%);
	gap: 1rem;
	padding-block: 0.6em;
	border-bottom: 1.5px solid rgb(255 255 255 / 0.28);
}

.especificacion dt {
	font-size: clamp(0.8rem, 0.99vw, 0.94rem);   /* 15 px */
	line-height: 1.35;
	color: var(--c-arena);
}

.especificacion dd {
	margin: 0;
	font-size: clamp(0.8rem, 1.06vw, 1rem);   /* 16 px */
	line-height: 1.35;
}

/* Tabla comparativa a dos columnas (MER). */
.tabla-envoltura {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.comparativa {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	text-align: left;
}

.comparativa th,
.comparativa td {
	padding: 0.6em 1rem 0.6em 0;
	border-bottom: 1.5px solid rgb(255 255 255 / 0.28);
	font-size: clamp(0.8rem, 0.99vw, 0.94rem);
	font-weight: 400;
	line-height: 1.35;
	vertical-align: top;
}

.comparativa thead th { border-bottom-width: 1.5px; padding-bottom: 0.8em; }

.comparativa__modelo {
	display: block;
	font-size: clamp(1rem, 1.46vw, 1.375rem);   /* 22 px */
	color: var(--c-arena);
}

.comparativa__alias {
	display: block;
	font-size: clamp(0.8rem, 0.79vw, 0.8rem);
	color: var(--c-topo);
}

.comparativa tbody th { color: var(--c-arena); font-weight: 400; }

/* Nota destacada al pie del panel oscuro. */
.ficha-nota { margin-top: clamp(1.25rem, 2vw, 1.9rem); }

.ficha-nota__titulo {
	margin-bottom: 0.5em;
	font-family: var(--f-titulo);
	font-size: clamp(0.95rem, 1.32vw, 1.25rem);   /* 20 px */
	font-weight: 400;
	text-transform: uppercase;
}

.ficha-nota p,
.ficha-nota .lista-puntos {
	font-size: clamp(0.8rem, 0.79vw, 0.8rem);
	line-height: 1.45;
	color: var(--c-arena);
}

/* --- Botoneras de enlaces (fondo blanco) ---------------------------------- */

.ficha-enlaces {
	padding-block: clamp(1.75rem, 3vw, 2.8rem);
	background: var(--c-blanco);
	color: var(--c-negro);
}

.ficha-enlaces .ficha-rotulo { margin-top: clamp(1.25rem, 2vw, 1.9rem); }
.ficha-enlaces .ficha-rotulo:first-child { margin-top: 0; }

.botonera {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.5rem, 0.95vw, 0.9rem);
	margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

/* Los "sistemas relacionados" van de cinco en cinco. */
.botonera:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.boton-bloque {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: clamp(48px, 4.2vw, 64px);
	padding: 0.6em 1em;
	background: var(--c-naranja);
	border-radius: 8px;
	color: var(--c-blanco);
	font-size: clamp(0.8rem, 0.86vw, 0.813rem);   /* 13 px */
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease;
}
.boton-bloque span { flex: 1; }
.boton-bloque svg { width: 20px; height: 20px; flex: 0 0 auto; }
.boton-bloque:hover {
	filter: brightness(1.08);
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgb(255 106 0 / 0.35);
}
.boton-bloque:hover svg { transform: translate(3px, -3px); }
.boton-bloque svg { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }

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

@media (max-width: 1100px) {
	.ficha-detalle { grid-template-columns: minmax(0, 1fr); }

	.ficha-detalle__panel {
		width: 100%;
		max-width: var(--lienzo);
		margin-inline: auto;
		padding-inline: var(--margen);
	}

	.ficha-detalle__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }

	.pastillas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pastillas:has(> :nth-child(8):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.variantes,
	.variantes:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.botonera,
	.botonera:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.sensores { grid-template-columns: 1fr; }

	.pastillas,
	.pastillas:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.variantes,
	.variantes:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }

	.botonera,
	.botonera:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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