/* Lo que se rescata de la v3 y se injerta en la v2.
 *
 * Son cinco piezas: el modelo de negocio, los premios, las noticias (con su
 * carrusel), el contacto y el menú que se marca solo según dónde estés. Todo lo
 * demás —portada, llamada, ARD1, los tres bloques negros y el pie— se queda
 * exactamente como en la v2 y esta hoja no lo toca.
 *
 * Dos reglas que se siguen a rajatabla:
 *
 *  1. TODAS las clases llevan prefijo `r-` (o `nc-` en el carrusel). La v2
 *     hereda de Framer nombres como `.negocio-caja`, `.premio…`, `.noticias…`
 *     o `.carrusel-pista`, y su JavaScript sigue cargado. Con prefijo propio no
 *     hay forma de pisarse.
 *  2. Esta hoja se carga la última. A igualdad de peso gana la de más abajo,
 *     así que no hace falta inflar selectores ni usar `!important`.
 */

/* ===========================================================================
 * 0. Fichas
 * ======================================================================== */
:root {
	/* La paleta es la de la v2. Sólo se añade lo que la v2 no tenía nombrado. */
	--r-titulo: #2b2b2b;
	--r-blanco: #fff;
	--r-morado-oscuro: #5b3ce0;  /* morado legible sobre blanco */
	/* El gris del cuerpo. La v2 usa #666572, que sobre el gris de las secciones
	   da 4,17:1 y se queda por debajo del 4,5:1 que pide la norma. Éste es el
	   mismo gris dos puntos más oscuro: 5,01:1 sobre gris, 6,87:1 sobre blanco.
	   A simple vista es el mismo, y sólo lo usan las secciones rescatadas. */
	--r-gris-texto: #5a5966;
	--r-gris-oscuro: #303030;    /* el fondo del contacto en la v2 */

	/* El margen lateral acompaña al de la v2, pero sin brincos: crece de 24 px
	   en un móvil de 360 a los 100 px que la v2 usa en escritorio, y ahí se
	   queda. En 1440 vale exactamente 100, así que el título de «News» arranca
	   en la misma vertical que el de «Learn more about us…», que es de la v2. */
	--r-margen: clamp(1.5rem, 7.24vw - 4.2px, 6.25rem);
	--r-ancho: 1240px;           /* lo que mide el carrusel de la v2 (1200) más aire */

	--r-aire: clamp(1.75rem, 1rem + 3.3vw, 3.75rem);
	--r-aire-corto: clamp(1rem, 0.7rem + 1.3vw, 1.5rem);
	--r-radio: 20px;
	--r-radio-grande: 30px;

	/* La escala tipográfica, con los mismos extremos que la v2 (38 -> 72 el
	   título de sección, 30 -> 54 el de bloque…) pero continua: deja de pegar el
	   brinco que la v2 daba al cruzar 800 px. */
	--r-t-seccion: clamp(2.375rem, 1.667rem + 3.148vw, 4.5rem);
	--r-t-bloque: clamp(1.875rem, 1.375rem + 2.222vw, 3.375rem);
	--r-t-ante: clamp(1.25rem, 1.083rem + 0.741vw, 1.75rem);
	--r-t-cuerpo: clamp(1rem, 0.917rem + 0.370vw, 1.25rem);
	--r-t-nota: clamp(0.9375rem, 0.875rem + 0.278vw, 1.125rem);
	--r-t-pequeno: 0.875rem;

	/* La barra de navegación de la v2 es fija y mide 86 px: las anclas tienen
	   que parar por debajo de ella o el título de la sección queda tapado. */
	scroll-padding-top: 102px;
}

/* ===========================================================================
 * 1. El armazón de una sección rescatada
 *
 * Las secciones de la v2 son hijas de `.cuerpo-caja`, que es una columna
 * flexible. Estas se colocan igual: a lo ancho, centradas y sin encogerse.
 * ======================================================================== */
.r-seccion {
	flex: none;
	width: 100%;
	height: min-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: hidden;
	/* La v2 arranca de `font-size: 12px` en el `body` y de la familia genérica:
	   aquí dentro se parte de lo que de verdad usa la página. */
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	color: var(--tinta, #101012);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.r-ancho {
	width: 100%;
	max-width: calc(var(--r-ancho) + var(--r-margen) * 2);
	margin-inline: auto;
	padding-inline: var(--r-margen);
}

/* Cabecera de sección: el título a la izquierda y, si la hay, una acción a la
   derecha. En la v2 el título iba solo en una fila de 100 px de alto. */
.r-cabecera {
	margin-bottom: var(--r-aire);
}

.r-cabecera-con-accion {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--r-aire-corto);
}

.r-titulo {
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-seccion);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--r-titulo);
	text-align: left;
	text-wrap: balance;
}

.r-cabecera-pie {
	max-width: 54ch;
	margin-top: 0.75rem;
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-cuerpo);
	font-weight: 400;
	line-height: 1.6;
	color: var(--r-gris-texto);
	text-align: left;
	text-wrap: pretty;
}

/* Sólo para quien lee con un lector de pantalla. */
.r-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Fondos y aire, calcados de los de la v2 ---- */
/* El modelo de negocio no lleva relleno abajo porque la raya separadora de la
   v2 va pegada al borde, dentro de la propia sección. El aire se le da al
   contenido, no a la sección: así las tarjetas respiran y la raya sigue a ras.

   Debajo de las tarjetas van 160 px, que es el aire que deja la v2 antes de su
   última raya (`.cuerpo-space-3`). Con los 100 de antes la raya quedaba pegada:
   aquí lo que termina no es un párrafo sino el canto duro de tres tarjetas
   blancas, y un borde se lee mucho más cerca que una línea de texto. */
.r-business { background-color: #dcdcdc; padding: 100px 0 0; }
.r-business > .r-ancho { padding-bottom: 160px; }
.r-awards   { background-color: #d9d9d9; padding: 100px 0; }
.r-news     { background-color: #dcdcdc; padding: 100px 0; }
.r-contact  { background-color: var(--r-gris-oscuro); padding: clamp(4.5rem, 2rem + 4vw, 6.5rem) 0; }

/* La v2 reordena las secciones en tableta con `order` (allí el vídeo va antes
   que las noticias). Si estas secciones no lo declaran se irían las primeras,
   así que se repiten los mismos números. */
@media (min-width: 800px) and (max-width: 1399.98px) {
	.r-business { order: 1; }
	.r-awards   { order: 2; padding: 24px 0 100px; overflow: visible; }
	.r-news     { order: 6; }
	.r-contact  { order: 8; }
}

@media (max-width: 799.98px) {
	.r-business { padding: 80px 0 0; }
	.r-business > .r-ancho { padding-bottom: 80px; }
	.r-awards   { padding: 80px 0; }
	.r-news     { padding: 80px 0; }
}

/* ---- Tarjeta blanca, la base de premios y modelo de negocio ---- */
.r-tarjeta {
	background: var(--r-blanco);
	border-radius: var(--r-radio-grande);
	border: 1px solid rgba(16, 16, 18, 0.07);
	box-shadow: 0 1px 2px rgba(16, 16, 18, 0.04), 0 8px 24px rgba(16, 16, 18, 0.05);
}

/* ---- Botones ---- */
.r-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;            /* el mínimo que se puede tocar con el dedo */
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-family: "DM Sans", sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.r-boton-principal {
	background: var(--morado, #7855ff);
	color: var(--r-blanco);
	box-shadow: 0 6px 20px rgba(120, 85, 255, 0.35);
}

.r-boton-principal:hover { background: #8b6cff; transform: translateY(-2px); }

.r-boton-oscuro {
	background: var(--tinta, #101012);
	color: var(--r-blanco);
}

.r-boton-oscuro:hover { background: #2a2a30; transform: translateY(-2px); }

.r-boton-claro {
	background: transparent;
	color: var(--tinta, #101012);
	border: 1.5px solid rgba(16, 16, 18, 0.25);
}

.r-boton-claro:hover { background: rgba(16, 16, 18, 0.06); }

@media (prefers-reduced-motion: reduce) {
	.r-boton, .r-boton:hover { transform: none; transition: none; }
}

/* ---- Foco visible ---- */
.r-seccion :focus-visible,
.r-modal :focus-visible {
	outline: 3px solid var(--morado, #7855ff);
	outline-offset: 3px;
	border-radius: 4px;
}

.r-contact :focus-visible {
	outline-color: var(--lavanda, #e8e3fd);
}

/* ===========================================================================
 * 2. Modelo de negocio
 *
 * Tres tarjetas con la misma rejilla interior —título, icono, texto— así que
 * las tres líneas coinciden siempre. En la v2 cada tarjeta colocaba su icono
 * donde le caía según lo largo que fuera el párrafo, y las de «Hardware» y
 * «Software» acababan con un palmo de hueco vacío abajo.
 * ======================================================================== */
/* Se reparte con `flex`, no con `grid`, por lo mismo que los premios: en una
   tableta (768 px) caben dos tarjetas por fila y la tercera se queda sola. Con
   `grid` esa última se pega a la izquierda y deja media fila vacía; así se
   centra. Cuando la fila va llena —móvil y escritorio— no se nota nada. */
.r-negocio-rejilla {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--r-aire-corto);
}

.r-negocio-rejilla > * {
	flex: 1 1 280px;
	/* Que la tarjeta suelta no se estire al ancho entero de la sección. */
	max-width: calc(50% - var(--r-aire-corto) / 2);
}

@media (max-width: 639px) {
	.r-negocio-rejilla > * { max-width: 100%; }
}

.r-negocio-tarjeta {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: var(--r-aire-corto);
	padding: clamp(1.5rem, 2.4vw, 2.5rem);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.r-negocio-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(16, 16, 18, 0.05), 0 16px 40px rgba(16, 16, 18, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.r-negocio-tarjeta:hover { transform: none; }
}

.r-negocio-tarjeta h3 {
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-bloque);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--tinta, #101012);
	text-align: center;
}

/* Caja de icono de alto fijo: tres dibujos de proporciones distintas se ven del
   mismo tamaño óptico. */
.r-negocio-icono {
	position: relative;
	display: block;
	height: clamp(96px, 11vw, 132px);
}

.r-negocio-icono img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Los dibujos vienen en blanco: sobre tarjeta clara hay que invertirlos. */
	filter: invert(1);
}

.r-negocio-cuerpo {
	display: grid;
	gap: 0.8em;
	align-content: start;
	text-align: left;
}

.r-negocio-cuerpo p {
	font-family: "Inter", sans-serif;
	font-size: var(--r-t-cuerpo);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.5;
	color: var(--r-gris-texto);
	text-align: left;
	text-wrap: pretty;
}

/* ===========================================================================
 * 3. Premios
 *
 * Una sola rejilla. En la v2 eran cinco bloques distintos, cada uno con su
 * copia para escritorio, tableta y móvil (once premios escritos veintitantas
 * veces), y la última fila dejaba medio renglón vacío a la derecha.
 *
 * Se reparte con `flex`, no con `grid`, justamente por eso: así las sobras de
 * la última fila se centran en vez de amontonarse a la izquierda.
 * ======================================================================== */
.r-premios-rejilla {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--r-aire-corto);
	margin: 0;
	padding: 0;
	list-style: none;
}

.r-premios-rejilla > li {
	flex: 1 1 230px;
	max-width: 290px;
	display: flex;
}

.r-premios-rejilla > li > * {
	width: 100%;
}

.r-premio {
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	gap: 0.75rem;
	padding: 1.5rem 1.25rem;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.r-premio:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(16, 16, 18, 0.05), 0 16px 40px rgba(16, 16, 18, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	a.r-premio:hover { transform: none; }
}

/* Alto fijo para el logotipo: es lo que iguala ópticamente marcas tan distintas
   como NVIDIA, AECOC o Vibez. La imagen va en absoluto, no con porcentajes:
   dentro de una rejilla, con `height: 100%` el cálculo se muerde la cola —la
   fila mide lo que mida el contenido y el contenido quiere medir lo que mida la
   fila— y el navegador deshace el empate dejando el tamaño natural. El
   logotipo del NEEC, que es vertical, se iba a 314 px dentro de una caja de 72
   y se comía la insignia y el texto de debajo. */
.r-premio-logo {
	position: relative;
	display: block;
	height: 72px;
}

.r-premio-logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.r-premio-galardon {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	background: rgba(16, 16, 18, 0.06);
	color: var(--tinta, #101012);
}

/* Distinguir un primer premio de un finalista es información, no decoración. */
.r-premio-galardon[data-nivel="primero"] {
	background: rgba(120, 85, 255, 0.14);
	color: var(--r-morado-oscuro);
}

.r-premio dl {
	display: grid;
	gap: 0.15rem;
	align-content: start;
	margin: 0;
}

.r-premio dt {
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-nota);
	font-weight: 500;
	line-height: 1.4;
	color: var(--tinta, #101012);
}

.r-premio dd {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-pequeno);
	font-weight: 400;
	line-height: 1.45;
	color: var(--r-gris-texto);
}

/* En una tableta, tres por fila. Con el ancho de partida de escritorio sólo
   entraban dos y quedaban anchísimas, con medio palmo de aire entre columna y
   columna; y la sección se iba a cinco filas. */
@media (min-width: 600px) and (max-width: 899px) {
	.r-premios-rejilla > li {
		flex: 1 1 200px;
		/* El tope es justo una columna de tres: sin el, el premio que se queda
		   solo en la ultima fila se estira a lo ancho de la seccion. */
		max-width: calc((100% - var(--r-aire-corto) * 2) / 3);
	}

	.r-premio { padding: 1.35rem 1rem; }
}

/* En el móvil, dos por fila. De uno en uno la sección se iba a casi 2.800 px de
   alto y había que bajar media eternidad para pasar de los premios. */
@media (max-width: 599px) {
	.r-premios-rejilla { gap: 0.75rem; }

	.r-premios-rejilla > li {
		flex: 1 1 calc(50% - 0.375rem);
		max-width: calc(50% - 0.375rem);
	}

	.r-premio { padding: 1.25rem 0.9rem; gap: 0.6rem; }
	.r-premio-logo { height: 56px; }
	.r-premio dt { font-size: 0.9375rem; }
	.r-premio dd { font-size: 0.8125rem; }
}

/* ===========================================================================
 * 4. Noticias: la tarjeta
 * ======================================================================== */
.r-noticia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Apilada, cada tarjeta mide lo suyo. Si se estiraran todas a la más alta
	   —que es lo que hace falta en dos columnas, para que la foto llene la
	   columna— las cortas se quedaban con medio palmo de blanco debajo del
	   texto. */
	height: auto;
	align-self: start;
	overflow: hidden;
	background: var(--r-blanco);
	border-radius: var(--r-radio-grande);
	border: 1px solid rgba(16, 16, 18, 0.07);
}

/* El hueco de la foto tiene la proporción de la foto, que cada noticia declara
   en su `--r-foto-r` (0,700 la vertical del MWC; 1,914 el cartel del MWC/4YFN;
   1,910 el de la NVIDIA Inception; 1,000 la cuadrada de Advanced Factories).
   Así la foto llena todo el hueco con `cover` sin recortar nada: ni franjas, ni
   fondo de relleno, ni bordes. */
.r-noticia-foto {
	position: relative;
	aspect-ratio: var(--r-foto-r, 1.6);
	width: 100%;
	overflow: hidden;
	/* Tope para que una foto vertical no levante una tarjeta de mil píxeles: a
	   1024 la del MWC pediría 1263. En cuanto el tope manda, el hueco deja de
	   tener la proporción de la foto y entra a jugar el punto focal de abajo. */
	max-height: 520px;
}

.r-noticia-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El punto focal de cada noticia, para cuando el tope recorta: el de la
	   NVIDIA Inception se ancla a la izquierda, que es donde están los dos
	   recuadros de logotipo; las dos fotos verticales se anclan a la altura de
	   las personas. En porcentaje, así que el encuadre aguanta igual recorte el
	   tope mucho o poco. */
	object-position: var(--r-foto-pos, center);
}

/* Entre 720 y 1439 la tarjeta se queda en una columna y se centra. A lo ancho
   de 1100 px, una foto vertical a sangre pediría 1570 px de alto. Acotando la
   tarjeta a 760 y la foto a 620, el hueco de las dos verticales se queda algo
   más ancho que alto y se ve el 60 % de la foto, más que el 50 % de antes. Las
   otras cinco —las tres con logotipos o texto incrustado, entre ellas— caben
   enteras: cero recorte. */
@media (min-width: 720px) and (max-width: 1439.98px) {
	.r-noticia {
		max-width: 760px;
		margin-inline: auto;
	}
	.r-noticia-foto { max-height: 620px; }
}

/* Dos columnas sólo a partir de 1440. El ancho de la columna de la foto sale de
   multiplicar su proporción por el alto de la tarjeta, así que el hueco tiene
   EXACTAMENTE la forma de la foto y no se recorta nada.
   `--r-nc-alto` tiene que ser mayor que el texto más largo a ese ancho; medido,
   la tarjeta se queda clavada en 378 px. Si algún día el texto crece, las
   tarjetas crecen con él, la columna se queda como está y la foto empieza a
   recortarse por el punto focal: se degrada, no se rompe.
   Por debajo de 1440 no caben: a 1024 el cartel del MWC pediría 727 px de
   columna y dejaría 157 para las letras. */
@media (min-width: 1440px) {
	.r-noticia {
		height: 100%;
		align-self: stretch;
		--r-nc-alto: 380px;
		grid-template-columns: calc(var(--r-foto-r) * var(--r-nc-alto)) minmax(0, 1fr);
		min-height: var(--r-nc-alto);
	}
	.r-noticia-foto {
		aspect-ratio: auto;
		min-height: 100%;
		max-height: none;
	}
}

.r-noticia-texto {
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: clamp(1.25rem, 2.2vw, 2rem);
	min-width: 0;
}

.r-noticia-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.9rem;
}

.r-noticia-ante {
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-ante);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--r-morado-oscuro);
}

.r-noticia time {
	font-family: "DM Sans", sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--r-gris-texto);
	white-space: nowrap;
}

.r-noticia h3 {
	font-family: "DM Sans", sans-serif;
	font-size: clamp(1.125rem, 1rem + 0.56vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.35;
	color: var(--tinta, #101012);
	text-align: left;
	text-wrap: balance;
}

.r-noticia p {
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-nota);
	font-weight: 400;
	line-height: 1.55;
	color: var(--r-gris-texto);
	text-align: left;
	text-wrap: pretty;
}

.r-noticia-ir {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.3rem;
	min-height: 44px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--r-morado-oscuro);
	text-decoration: none;
}

.r-noticia-ir svg { width: 16px; height: 16px; flex: none; }

.r-noticia-ir:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
 * 5. El carrusel de noticias (`nc-`, de «noticias-carrusel»)
 *
 * Es una lista que se desplaza de lado con anclaje de CSS. El dedo, la rueda,
 * el teclado y el lector de pantalla funcionan sin programarlos, y la posición
 * la lleva el navegador: el JavaScript sólo pide «vete a la tarjeta 3».
 *
 * El de la v2 movía una pista con `transform` y calculaba el salto a mano a
 * partir del alto del carrusel. De ahí venían los fallos: pulsar la flecha a
 * media animación partía desde donde la animación cancelada iba a acabar, y al
 * girar el móvil los fotogramas ya calculados dejaban la pista descuadrada.
 * Aquí no hay cuentas que descuadrar.
 *
 * El prefijo `nc-` no es un capricho: la v2 usa `.carrusel-…` y su
 * `animaciones.js` sigue cargado y buscando esas clases.
 * ======================================================================== */
.nc {
	display: grid;
	gap: var(--r-aire-corto);
}

.nc-ventana {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Sin JavaScript, el salto de las flechas lo suaviza el navegador. Con él,
	   el movimiento lo lleva `rescatado.js` con su propia curva y escribe
	   `scrollLeft` en modo instantáneo, así que esto no le estorba. */
	scroll-behavior: smooth;
	/* Que pasar tarjeta no acabe pasando de página en el móvil. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-radius: var(--r-radio-grande);
}

.nc-ventana::-webkit-scrollbar { display: none; }

.nc-pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--r-aire-corto);
	/* `stretch` es lo que hace que todas las tarjetas midan lo mismo: lo que
	   mida la más alta. En la v2 se les imponía el alto del carrusel y la de
	   titular largo salía cortada por la mitad de una línea. */
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nc-hueco {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nc-ventana { scroll-behavior: auto; }
}

/* ---- Mandos: debajo de la tarjeta, nunca encima ----
   En la v2 las dos flechas estaban dentro de la tarjeta, centradas arriba y
   abajo, y en el móvil caían justo sobre el titular. */
.nc-mandos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.nc-flecha {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(16, 16, 18, 0.08);
	color: var(--tinta, #101012);
	transition: background-color 0.18s ease;
}

.nc-flecha:hover:not(:disabled) { background: var(--morado, #7855ff); color: var(--r-blanco); }

/* Los dos iconos del botón de pausa ocupan la misma casilla de la rejilla, así
   que cambiar de uno a otro no mueve nada. Se enseña el que toca según si la
   pausa está puesta (`aria-pressed`), sin tocar el DOM desde el guion. */
.nc-pausa > svg { grid-area: 1 / 1; }
.nc-pausa[aria-pressed="true"]  .nc-icono-pausa { display: none; }
.nc-pausa[aria-pressed="false"] .nc-icono-play  { display: none; }
.nc-flecha:disabled { opacity: 0.35; cursor: default; }
.nc-flecha svg { width: 22px; height: 22px; }

.nc-puntos {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nc-punto {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(16, 16, 18, 0.22);
	transition: background-color 0.18s ease, width 0.18s ease;
}

/* El punto se dibuja de 10 px pero se toca en 44. */
.nc-punto-caja {
	display: grid;
	place-items: center;
	width: 24px;
	height: 44px;
}

.nc-punto-caja[aria-current="true"] .nc-punto {
	width: 26px;
	background: var(--morado, #7855ff);
}

/* El contador sustituye a los puntos cuando no caben. */
.nc-cuenta {
	display: none;
	min-width: 4.5ch;
	text-align: center;
	font-family: "DM Sans", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tinta, #101012);
}

/* En pantalla estrecha, los tres botones y los siete puntos no caben en una
   fila: el de «siguiente» se caía él solo a la línea de abajo. Se aprieta lo
   justo para que entren, sin bajar de 44 px de alto en nada que se toque. */
@media (max-width: 520px) {
	.nc-mandos { gap: 0.5rem; flex-wrap: nowrap; }
	.nc-flecha { width: 44px; height: 44px; }
	.nc-puntos { display: none; }
	.nc-cuenta { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.nc-flecha, .nc-punto { transition: none; }
}

/* ===========================================================================
 * 6. Contacto
 *
 * Mismo gris oscuro que la v2 (#303030). El sello de ENISA se sirve con su
 * transparencia original, así que el fondo que se ve detrás es el de la
 * sección: en la v3 el PNG traía el fondo aplastado en un verde gris opaco.
 * ======================================================================== */
.r-contacto-rejilla {
	display: grid;
	gap: var(--r-aire);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.r-contacto-rejilla {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: clamp(3rem, 5vw, 7rem);
	}
}

.r-contacto-texto {
	display: grid;
	gap: var(--r-aire-corto);
	align-content: start;
}

.r-contacto-texto h2 {
	font-family: "DM Sans", sans-serif;
	font-size: var(--r-t-seccion);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--r-blanco);
	text-align: left;
}

.r-contacto-enlaces {
	display: grid;
	gap: 0.9rem;
	justify-items: start;
}

.r-contacto-dato {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	font-family: "DM Sans", sans-serif;
	font-size: clamp(1.125rem, 0.9rem + 1vw, 2rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--r-blanco);
	text-decoration: none;
	word-break: break-word;
}

.r-contacto-dato svg {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	color: var(--lavanda, #e8e3fd);
}

.r-contacto-dato:hover {
	color: var(--lavanda, #e8e3fd);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.r-contacto-accion { margin-top: 0.25rem; }

.r-contacto-sellos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-aire);
}

.r-contacto-sellos img { height: auto; opacity: 0.95; }
.r-sello-enisa  { width: clamp(120px, 15vw, 185px); }
.r-sello-nvidia { width: clamp(150px, 18vw, 220px); }

/* ===========================================================================
 * 7. El menú se marca solo
 *
 * El fondo de los cinco enlaces estaba en un estilo en línea en el HTML de la
 * v2 (`background-color: rgba(118,84,255,0)`), y un estilo en línea gana a
 * cualquier clase: no había forma de encender el activo. Se ha sacado del HTML
 * y se pone aquí, que es donde se puede cambiar. El color de reposo es el
 * mismo de antes (morado al 0 % = transparente), así que nada cambia de
 * aspecto hasta que el JavaScript marca una sección.
 * ======================================================================== */
.nav-product,
.nav-business,
.premios-enlace,
.noticias-enlace-4,
.contacto-enlace {
	background-color: rgba(118, 84, 255, 0);
	transition: background-color 0.18s ease;
}

.nav-product:hover,
.nav-business:hover,
.premios-enlace:hover,
.noticias-enlace-4:hover,
.contacto-enlace:hover {
	background-color: rgba(120, 85, 255, 0.28);
}

.nav-product[aria-current="true"],
.nav-business[aria-current="true"],
.premios-enlace[aria-current="true"],
.noticias-enlace-4[aria-current="true"],
.contacto-enlace[aria-current="true"] {
	background-color: var(--morado, #7855ff);
}

@media (prefers-reduced-motion: reduce) {
	.nav-product, .nav-business, .premios-enlace,
	.noticias-enlace-4, .contacto-enlace { transition: none; }
}

/* ===========================================================================
 * 8. Entradas al desplazar
 *
 * El bloque sube un poco y aparece cuando entra en pantalla. El estado de
 * partida se declara aquí para que no haya parpadeo. Sin JavaScript, o con
 * «menos movimiento» puesto, el contenido se ve entero desde el principio.
 * ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
	[data-r-entra="no"] {
		opacity: 0;
		transform: translateY(24px);
	}

	[data-r-entra] {
		transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* ===========================================================================
 * 9. La ventana del formulario de demo
 * ======================================================================== */
.r-modal[hidden] { display: none; }

.r-modal {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	padding: clamp(0.75rem, 3vw, 2rem);
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	color: var(--tinta, #101012);
	-webkit-font-smoothing: antialiased;
	/* En el móvil el teclado se come media pantalla: la ventana tiene que poder
	   desplazarse por dentro, no salirse por abajo. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.r-modal-fondo {
	position: fixed;
	inset: 0;
	background: rgba(8, 8, 10, 0.68);
	backdrop-filter: blur(2px);
}

.r-modal-caja {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--r-blanco);
	border-radius: var(--r-radio);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
	.r-modal-caja { animation: r-entrada-modal 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
	@keyframes r-entrada-modal {
		from { opacity: 0; transform: translateY(14px) scale(0.985); }
		to   { opacity: 1; transform: none; }
	}
}

.r-modal-cerrar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--r-gris-texto);
	transition: background-color 0.15s ease;
}

.r-modal-cerrar:hover { background: rgba(16, 16, 18, 0.07); color: var(--tinta, #101012); }
.r-modal-cerrar svg { width: 20px; height: 20px; }

.r-modal-titulo {
	font-family: "DM Sans", sans-serif;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--r-titulo);
	text-align: left;
	padding-right: 2.5rem;
}

.r-modal-intro {
	margin-top: 0.6rem;
	font-family: "DM Sans", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--r-gris-texto);
	text-align: left;
}

.r-modal-intro strong { font-weight: 700; color: var(--tinta, #101012); }

/* ---- El formulario ---- */
.r-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}

@media (min-width: 560px) {
	.r-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.r-campo-ancho, .r-form-aviso, .r-form-pie { grid-column: 1 / -1; }
}

.r-campo { display: grid; gap: 0.35rem; min-width: 0; }

.r-campo label {
	font-family: "DM Sans", sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tinta, #101012);
}

.r-obligatorio { color: var(--r-morado-oscuro); }
.r-opcional { font-weight: 400; color: var(--r-gris-texto); }

.r-campo input[type="text"],
.r-campo input[type="email"],
.r-campo input[type="tel"],
.r-campo textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	font-family: "DM Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--tinta, #101012);
	background: #f7f7f9;
	border: 1.5px solid rgba(16, 16, 18, 0.16);
	border-radius: 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.r-campo textarea { min-height: 112px; resize: vertical; }

.r-campo input:focus,
.r-campo textarea:focus {
	background: var(--r-blanco);
	border-color: var(--morado, #7855ff);
	outline: none;
}

.r-campo[data-mal] input,
.r-campo[data-mal] textarea {
	border-color: #c43527;
	background: #fdf4f3;
}

.r-error {
	display: none;
	font-family: "DM Sans", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: #a92c20;
}

.r-campo[data-mal] .r-error { display: block; }

.r-campo-casilla { gap: 0.4rem; }

.r-casilla {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400 !important;   /* gana al `label` de arriba, que va en 700 */
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--r-gris-texto);
	cursor: pointer;
}

.r-casilla input[type="checkbox"] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--morado, #7855ff);
	cursor: pointer;
}

.r-casilla a { color: var(--r-morado-oscuro); text-decoration: underline; text-underline-offset: 2px; }

/* La trampa para robots: fuera de la vista y fuera del recorrido del teclado,
   pero sin `display:none` ni `hidden`, que es lo que miran los que rellenan
   formularios automáticamente. */
.r-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.r-form-aviso {
	display: none;
	margin: 0;
	padding: 0.75rem 0.9rem;
	border-radius: 12px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
}

.r-form-aviso[data-estado="bien"] {
	display: block;
	background: #e9f7ee;
	color: #12562c;
	border: 1px solid #a9ddba;
}

.r-form-aviso[data-estado="mal"] {
	display: block;
	background: #fdf0ee;
	color: #8f2317;
	border: 1px solid #f0b8b0;
}

.r-form-pie { display: flex; justify-content: flex-end; }
.r-form-pie .r-boton { width: 100%; }

@media (min-width: 560px) {
	.r-form-pie .r-boton { width: auto; min-width: 200px; }
}

.r-boton[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* En una pantalla corta (un móvil apaisado, o un 360 × 800 con el teclado
   abierto) el formulario entero no cabe. Se aprieta lo justo para que el botón
   de enviar entre sin tener que bajar a buscarlo, sin tocar los 48 px de alto
   de ningún campo. */
@media (max-height: 820px) {
	.r-modal-caja { padding: 1.25rem 1.25rem 1.5rem; }
	.r-modal-titulo { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
	.r-modal-intro { margin-top: 0.4rem; font-size: 0.9375rem; }
	.r-form { margin-top: 1rem; gap: 0.75rem; }
	.r-campo textarea { min-height: 88px; }
}

/* Mientras la ventana está abierta, la página de detrás no se desplaza. */
body[data-r-modal="abierta"] { overflow: hidden; }

/* ---- Móvil y tableta estrecha: todas las tarjetas iguales ----
   Pol (01-10-2026): en el móvil cada noticia medía distinto y costaba leer.
   Por debajo de 720 px la foto tiene SIEMPRE la misma proporción (16:9, la
   que deja enteros los dos carteles con texto) y llena el hueco con su punto
   focal; todas las tarjetas miden lo que la más alta y el enlace va abajo. */
@media (max-width: 719.98px) {
	.r-noticia {
		height: 100%;
		align-self: stretch;
		grid-template-rows: auto 1fr;
	}
	.r-noticia-foto {
		aspect-ratio: 16 / 9;
		max-height: none;
	}
	.r-noticia-texto { grid-template-rows: auto auto 1fr auto; }
	.r-noticia-ir { align-self: end; }
}

/* ---- Ordenador y tableta: lo mismo que en el móvil ----
   Pol (01-10-2026): el móvil con todas las tarjetas iguales y la foto 16:9
   le gusta; el ordenador se alinea con eso. Entre 720 y 1199 px la tarjeta es
   la del móvil, centrada. Desde 1200 px, foto a la izquierda con columna fija
   (16:9 sobre el alto de la tarjeta) y todas las tarjetas del mismo alto. */
@media (min-width: 720px) and (max-width: 1199.98px) {
	.r-noticia {
		max-width: 760px;
		margin-inline: auto;
		height: 100%;
		align-self: stretch;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		min-height: 0;
	}
	.r-noticia-foto { aspect-ratio: 16 / 9; max-height: none; min-height: 0; }
	.r-noticia-texto { grid-template-rows: auto auto 1fr auto; }
	.r-noticia-ir { align-self: end; }
}
@media (min-width: 1200px) {
	.r-noticia {
		max-width: none;
		margin-inline: 0;
		height: 100%;
		align-self: stretch;
		--r-nc-alto: 380px;
		grid-template-columns: min(56%, calc(var(--r-nc-alto) * 1.92)) minmax(0, 1fr);
		grid-template-rows: none;
		min-height: var(--r-nc-alto);
	}
	.r-noticia-foto { aspect-ratio: auto; min-height: 100%; max-height: none; }
	.r-noticia-texto { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
	.r-noticia-ir { align-self: end; }
}