/* ==========================================================================
   Página Tecnología (05_TECNOLOGIA_ESP del Figma "MiriadLanding")
   Lienzo 1512 px a escala 1/3: los valores van ×3.
   El bloque claro y el botón píldora están en main.css: los comparten varias
   páginas interiores.
   ========================================================================== */

/* En esta página la banda negra es más corta: el titular ya cae sobre el claro. */
.cabecera-interior--tecnologia { padding-bottom: clamp(1.25rem, 2.2vw, 2rem); }

.grupo-tec + .grupo-tec { margin-top: clamp(2rem, 3.9vw, 3.6rem); }

.grupo-tec__titulo {
	margin-bottom: clamp(0.75rem, 1.15vw, 1.06rem);
	font-family: var(--f-texto);
	font-size: clamp(1.1rem, 1.59vw, 1.5rem);   /* 24 px */
	font-weight: 500;
	line-height: 1.33;
}

/* --- Carrusel de fichas ----------------------------------------------------
   Figma: tarjeta blanca de 1332×527 con radio 9; la foto ocupa la mitad
   derecha (693 px) y redondea solo por fuera.
   --------------------------------------------------------------------------- */

.carrusel { position: relative; }

.carrusel__pista { display: grid; }

.carrusel__panel {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	min-height: clamp(320px, 34.9vw, 527px);
	background: var(--c-blanco);
	border-radius: var(--radio);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.carrusel__panel.is-activo {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s;
}

.ficha-tec__texto { padding: clamp(1.5rem, 3.1vw, 2.9rem) clamp(1.5rem, 3.4vw, 3.25rem); }

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

.ficha-tec__titular {
	margin-top: 0.25em;
	font-size: clamp(1.15rem, 2.25vw, 2.125rem);   /* 34 px */
	font-weight: 400;
	line-height: 1.32;
}

.ficha-tec__descripcion {
	margin-top: 0.8em;
	max-width: 497px;
	font-size: clamp(0.9rem, 1.44vw, 1.375rem);   /* 22 px */
	font-weight: 400;
	line-height: 1.32;
}

.ficha-tec__cta { margin-top: clamp(1.25rem, 2.4vw, 2.25rem); }

.ficha-tec__img {
	width: 100%;
	height: 100%;
	min-height: clamp(220px, 34.9vw, 527px);
	object-fit: cover;
}

/* Flechas: en el Figma van fuera de la tarjeta, en x=27 y x=1453. */
.carrusel__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	color: var(--c-negro);
	transform: translateY(-50%);
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.carrusel__flecha:hover { opacity: 1; }
.carrusel__flecha--prev { left: clamp(-2.5rem, -2vw, -0.5rem); }
.carrusel__flecha--next { right: clamp(-2.5rem, -2vw, -0.5rem); }
.carrusel__flecha--prev:hover { transform: translateY(-50%) translateX(-4px); }
.carrusel__flecha--next:hover { transform: translateY(-50%) translateX(4px); }
.carrusel__flecha[hidden] { display: none; }

/* --- Nota LYNKS ----------------------------------------------------------- */

.nota-lynks {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.25rem);
	margin-top: clamp(1.25rem, 2.4vw, 2.25rem);
	font-family: var(--f-alt);
	font-size: clamp(0.8rem, 1.06vw, 1rem);   /* 16 px */
	line-height: 1.13;
}

.nota-lynks__marca {
	flex: 0 0 auto;
	order: 2;
	min-width: 218px;
	padding: 0.45em 1.2em;
	background: #d9d9d9;
	border-radius: 48px;
	font-family: var(--f-alt);
	font-size: clamp(0.95rem, 1.52vw, 1.44rem);   /* 23 px */
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}
.nota-lynks__marca:hover { background: var(--c-naranja); transform: translateY(-2px); }

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

/* Zona de toque de las flechas: el icono sigue midiendo 32 px, lo que crece es
   la superficie sensible. Va aquí y no en main.css porque esta hoja se carga
   después y su regla de 32×32 ganaría. */
@media (max-width: 1150px) {
	.carrusel__flecha { width: 44px; height: 44px; }
}

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

	.ficha-tec__img {
		order: -1;
		min-height: 0;
		aspect-ratio: 693 / 400;
	}

	/* Con el panel apilado, las flechas quedaban a media altura del bloque, que
	   ahí ya es el texto sobre fondo blanco: en blanco sobre blanco no se veían y
	   el carrusel parecía roto. En vertical pasan a ser dos botones debajo, que
	   además se aciertan con el dedo. */
	.carrusel {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.9rem;
	}

	.carrusel__pista { flex: 1 0 100%; }

	.carrusel__flecha {
		position: static;
		transform: none;
		width: 52px;
		height: 52px;
		margin-top: 1rem;
		background: var(--c-marron);
		border-radius: 50%;
		color: var(--c-blanco);
		opacity: 1;
	}
	.carrusel__flecha:hover { transform: none; }
	.carrusel__flecha--prev:hover,
	.carrusel__flecha--next:hover { transform: none; }

	.nota-lynks { flex-direction: column; align-items: flex-start; }
	.nota-lynks__marca { order: -1; }
}