/*
 * Areito Gallery — sistema visual.
 * Trasladado del concepto areito_home_concept_2.html, con las fuentes de marca
 * servidas en local en lugar de Google Fonts.
 */

@font-face {
	font-family: 'Gambarino';
	src: url('../fonts/Gambarino-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Switzer';
	src: url('../fonts/Switzer-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Switzer';
	src: url('../fonts/Switzer-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Switzer';
	src: url('../fonts/Switzer-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Los seis colores del brandbook (pág. 12). No se añaden colores nuevos:
	   lo demás son tintas al 75/50/25 % que el propio manual contempla. */
	--sand: #e0d5bb;       /* Pantone 7527 */
	--blue: #b0ccec;       /* Pantone 658  */
	--vermillion: #e84127; /* Pantone 7417 */
	--oxblood: #480d17;    /* Pantone 7631 */
	--marigold: #f59d24;   /* Pantone 2011 */
	--olive: #78661a;      /* Pantone 7768 */

	/* Derivados. --cream es el fondo del propio brandbook. */
	--cream: #efeadd;
	--bone: #f7f4ee;       /* arena al 25 % */
	--amber: #f8b65b;      /* marigold al 75 %, para estados hover */
	--olive-d: #694b19;    /* olivo con oxblood, para tarjetas sobre olivo */

	/* El manual compone todo el texto en oxblood. */
	--ink: #480d17;
	--muted: #724449;      /* oxblood al 75 % sobre crema */
	--vermillion-d: #c03423; /* bermellón hacia oxblood, para texto pequeño */

	--serif: 'Gambarino', Georgia, serif;
	--sans: 'Switzer', system-ui, -apple-system, sans-serif;
}

/* ---------- base ---------- */

/* La hoja solo se encola en las vistas del diseño, así que esto no afecta
   al resto del sitio. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.areito {
	font-family: var(--sans);
	font-weight: 300; /* Switzer Light: cuerpo de texto del manual. */
	color: var(--ink);
	background: var(--cream);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.areito *,
.areito *::before,
.areito *::after {
	box-sizing: border-box;
}

.areito h1,
.areito h2,
.areito h3,
.areito .serif {
	font-family: var(--serif);
	font-weight: 400; /* Gambarino solo tiene Regular. */
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
}

.areito p {
	margin: 0;
}

.areito img {
	display: block;
	max-width: 100%;
	height: auto;
}

.areito a {
	color: inherit;
	text-decoration: none;
}

.areito section {
	position: relative;
}

.areito .eyebrow {
	font-family: var(--sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	font-size: 0.66rem;
}

.areito b,
.areito strong {
	font-weight: 700;
}

/* El tema puede no traerla, y sin ella el enlace de salto queda a la vista. */
.areito .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.areito .wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 46px;
}

.areito .stripes {
	height: 26px;
	background:
		repeating-linear-gradient(90deg, var(--marigold) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(90deg, var(--oxblood) 3px 4px, transparent 4px 9px);
	opacity: 0.9;
}

.areito .btn {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 14px 26px;
	border-radius: 2px;
	transition: 0.25s;
	cursor: pointer;
	border: 0;
}

.areito .btn-amber {
	background: var(--marigold);
	color: var(--oxblood);
}

.areito .btn-amber:hover {
	background: var(--amber);
}

/* Variante rótulo: mismo aspecto, sin comportamiento de botón. */
.areito .btn.is-label {
	cursor: default;
	transition: none;
}

.areito .btn.is-label:hover,
.areito .btn.is-label:active {
	background: var(--marigold);
	transform: none;
}

.areito .btn-out {
	border: 1px solid currentColor;
	background: transparent;
}

/* Relativo al color de texto, que ya cambia según el fondo: sobre crema el
   velo blanco era invisible. */
.areito .btn-out:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Al enfocar hay que deshacer el recorte de .screen-reader-text, o el
   enlace de salto queda en una caja de 1×1 px e invisible. */
.areito .skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	background: var(--oxblood);
	color: var(--cream);
	padding: 12px 18px;
}

/* ---------- logotipo ---------- */

/* El SVG es el identificador oficial: no se recolorea ni se recompone.
   El área de seguridad del manual (pág. 9) es X = la mitad de su altura. */
.areito-logo {
	display: inline-block;
	line-height: 0;
	padding: calc(var(--logo-h, 32px) / 2);
	margin: calc(var(--logo-h, 32px) / -2);
}

.areito-logo svg {
	display: block;
	height: var(--logo-h, 32px);
	width: auto;
}

.areito-logo--nav {
	--logo-h: 34px;
}

.areito-logo--foot {
	--logo-h: 44px;
}

.areito-logo--rail {
	--logo-h: 30px;
}

/* ---------- nav ---------- */

.areito-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(239, 234, 221, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(72, 13, 23, 0.12);
}

.areito-nav .nav-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 46px;
	max-width: 1400px;
	margin: 0 auto;
	gap: 20px;
}

.areito-nav .nav-links {
	display: flex;
	gap: 30px;
	align-items: center;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oxblood);
}

.areito-nav .nav-links > a:not(.btn) {
	transition: opacity 0.2s;
}

.areito-nav .nav-links > a:not(.btn):hover {
	opacity: 0.55;
}

.areito-nav .lang a {
	transition: opacity 0.2s;
}

/* Control segmentado: el idioma activo va relleno, no atenuado. Así el
   contraste no depende de una opacidad. */
.areito-nav .lang {
	display: inline-flex;
	gap: 2px;
	border: 1px solid var(--oxblood);
	border-radius: 40px;
	padding: 3px;
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	line-height: 1;
}

.areito-nav .lang a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 7px 10px;
	border-radius: 40px;
	color: var(--oxblood);
	font-weight: 700;
	opacity: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.areito-nav .lang a[aria-current='true'] {
	background: var(--oxblood);
	color: var(--cream);
}

.areito-nav .lang a:not([aria-current='true']):hover,
.areito-nav .lang a:not([aria-current='true']):focus-visible {
	background: rgba(72, 13, 23, 0.1);
}

.areito-nav .nav-toggle {
	display: none;
	min-height: 44px;
	min-width: 44px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
	background: transparent;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
	border-radius: 2px;
	padding: 8px 12px;
	font-family: var(--sans);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 12px 16px;
}

/* ---------- hero ---------- */

.areito-hero {
	background: var(--olive);
	color: var(--cream);
	overflow: hidden;
}

.areito-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 12px);
	opacity: 0.5;
}

.areito-hero .hero-in {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
	min-height: 82vh;
	padding: 70px 0;
}

.areito-hero .eyebrow {
	color: var(--marigold);
}

.areito-hero h1 {
	font-size: clamp(2.6rem, 6vw, 5.2rem);
	margin: 22px 0 0;
}

.areito-hero h1 em {
	font-style: italic;
	color: var(--marigold);
}

.areito-hero .lede {
	font-size: 1.24rem;
	max-width: 30ch;
	margin: 26px 0 34px;
	color: #efe7d8;
	font-weight: 300;
}

.areito-hero .hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.areito-hero .hero-img {
	position: relative;
}

/* Cuadrada, como en el diseño entregado (421 × 421 pt). Con altura en vh
   el recorte cambiaba con el alto de la ventana y salía apaisada o muy
   vertical según la pantalla. */
.areito-hero .hero-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.areito-hero .hero-img .tag {
	position: absolute;
	left: -18px;
	bottom: 34px;
	background: var(--vermillion);
	color: #fff;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 10px 16px;
}

/* El transform del paralaje crea contexto de apilamiento en la imagen, y al
   ir después en el DOM tapaba a las barras. Con z-index explícito el orden
   deja de depender del marcado. */
.areito-hero .hero-img img {
	position: relative;
	z-index: 1;
}

.areito-hero .stripe-accent {
	position: absolute;
	top: -16px;
	right: -16px;
	z-index: 2;
	width: 120px;
	height: 150px;
	background: repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 8px);
	opacity: 0.55;
}

.areito-hero .hero-img .tag {
	z-index: 3;
}

/* ---------- volantas por sección ---------- */

.areito-legacy .eyebrow {
	color: var(--marigold);
}

.areito-meaning .eyebrow,
.areito-positioning .eyebrow,
.areito-impact .eyebrow,
.areito-news .eyebrow {
	color: var(--vermillion-d);
}

/* ---------- legacy ---------- */

.areito-legacy {
	background: var(--oxblood);
	color: var(--cream);
	padding: 76px 0;
}

.areito-legacy h2 {
	font-size: 2.5rem;
	max-width: 20ch;
	margin-top: 16px;
}

.areito-legacy .intro {
	max-width: 46ch;
	color: #e7d7cf;
	margin-top: 18px;
	font-weight: 300;
	font-size: 1.05rem;
}

.areito-legacy .stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 52px;
	border-top: 1px solid rgba(240, 232, 222, 0.22);
	padding-top: 40px;
}

.areito-legacy .stat .n {
	font-family: var(--serif);
	font-size: 3.6rem;
	color: var(--marigold);
	line-height: 1;
}

.areito-legacy .stat .l {
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 8px;
	color: #e7d7cf;
}

.areito-legacy .stat p {
	font-size: 0.92rem;
	color: #d8c7bf;
	margin-top: 10px;
	font-weight: 300;
}

/* ---------- meaning ---------- */

.areito-meaning {
	background: var(--cream);
	padding: 96px 0;
}

.areito-meaning .meaning-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 70px;
	align-items: start;
}

.areito-meaning .dict {
	border-left: 3px solid var(--vermillion);
	padding-left: 26px;
}

.areito-meaning .dict .word {
	font-family: var(--serif);
	font-size: 3.4rem;
	color: var(--oxblood);
}

.areito-meaning .dict .phon {
	color: var(--muted);
	font-size: 1rem;
	margin-top: 4px;
}

.areito-meaning .dict .pos {
	font-style: italic;
	color: var(--vermillion-d);
	font-family: var(--serif);
	margin-top: 20px;
	font-size: 1.1rem;
}

.areito-meaning .dict .def {
	font-size: 1.12rem;
	margin-top: 6px;
	max-width: 34ch;
}

.areito-meaning h2 {
	font-size: 2.7rem;
	color: var(--oxblood);
	margin-top: 14px;
}

.areito-meaning h2 em {
	font-style: italic;
}

.areito-meaning .body p {
	margin-top: 20px;
	font-size: 1.08rem;
	font-weight: 300;
	max-width: 48ch;
}

.areito-meaning .pull {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.7rem;
	color: var(--vermillion);
	margin-top: 30px;
	line-height: 1.25;
}

/* ---------- positioning ---------- */

.areito-positioning {
	background: var(--bone);
	padding: 92px 0;
}

.areito-positioning h2 {
	font-size: 2.9rem;
	color: var(--oxblood);
	max-width: 20ch;
	margin-top: 14px;
}

.areito-positioning .pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 56px;
}

.areito-positioning .pillar {
	background: #fff;
	border: 1px solid rgba(72, 13, 23, 0.1);
	padding: 34px 30px;
	border-radius: 2px;
}

.areito-positioning .pillar .num {
	font-family: var(--serif);
	font-size: 1.6rem;
	color: var(--vermillion);
}

.areito-positioning .pillar h3 {
	font-size: 1.32rem;
	color: var(--oxblood);
	margin: 14px 0 12px;
}

.areito-positioning .pillar p {
	font-size: 0.95rem;
	color: var(--muted);
}

/* Cinta continua: la lista va duplicada en el marcado y el track se desplaza
   media vuelta, así el corte nunca se ve. */
.areito-positioning .marquee {
	margin-top: 40px;
	overflow: hidden;
	/* Los extremos se desvanecen para que no aparezcan de golpe. */
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.areito-positioning .props {
	display: flex;
	width: max-content;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: areito-marquee 38s linear infinite;
}

/* Al pasar por encima se detiene, para poder leerlas. */
.areito-positioning .marquee:hover .props,
.areito-positioning .marquee:focus-within .props {
	animation-play-state: paused;
}

.areito-positioning .chip {
	white-space: nowrap;
}

@keyframes areito-marquee {
	from {
		transform: translateX(0);
	}

	to {
		/* Media vuelta menos medio hueco: el punto exacto donde la segunda
		   copia queda encima de la primera. */
		transform: translateX(calc(-50% - 6px));
	}
}

.areito-positioning .chip {
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--oxblood);
	color: var(--cream);
	padding: 9px 16px;
	border-radius: 40px;
}

/* ---------- fibras ---------- */

.areito-fibers {
	background: var(--cream);
	padding: 92px 0;
}

.areito-fibers .sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
}

.areito-fibers h2 {
	font-size: 2.8rem;
	color: var(--oxblood);
	margin-top: 12px;
}

.areito-fibers .eyebrow {
	color: var(--vermillion-d);
}

.areito-fibers .intro {
	max-width: 60ch;
	color: var(--muted);
	font-size: 1.05rem;
	margin-top: 22px;
	font-weight: 300;
}

.areito-fibers .note {
	margin-top: 26px;
	color: var(--muted);
	font-size: 0.86rem;
	font-style: italic;
}

.fiber-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
	gap: 16px;
	margin-top: 30px;
	padding: 0;
	list-style: none;
}

/* El <li> estira a la altura de la fila; la tarjeta debe ocuparlo entero,
   o las descripciones de distinto largo dejan los bordes desiguales. */
.fiber-grid > li {
	display: flex;
}

.fiber {
	border-radius: 2px;
	overflow: hidden;
	border: 1px solid rgba(72, 13, 23, 0.1);
	background: #fff;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* El hover tiene que notarse: la tarjeta es el elemento pulsable de toda
   la sección y antes apenas se movía. */
.fiber:hover,
.fiber:focus-visible {
	box-shadow: 0 22px 48px rgba(72, 13, 23, 0.22);
	transform: translateY(-6px);
	border-color: rgba(72, 13, 23, 0.3);
}

.fiber .fn {
	transition: color 0.25s ease;
}

.fiber:hover .fn,
.fiber:focus-visible .fn {
	color: var(--vermillion-d);
}

/* Filete que crece bajo el territorio, como en el menú. */
.fiber .fr {
	position: relative;
}

.fiber .fr::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 28px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.fiber:hover .fr::after,
.fiber:focus-visible .fr::after {
	transform: scaleX(1);
}

/* Los hijos son <span> para que el marcado sea válido dentro del <a>, así que
   hay que devolverles el comportamiento de bloque. */
.fiber .sw,
.fiber .txt,
.fiber .fn,
.fiber .fc,
.fiber .fr {
	display: block;
}

.fiber .sw {
	height: 120px;
	background-size: cover;
	background-position: center;
}

.fiber .txt {
	padding: 16px 16px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Dos líneas reservadas: así la descripción arranca a la misma altura
   tanto si el nombre cabe en una línea como si necesita dos. */
.fiber .fn {
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.72rem;
	line-height: 1.35;
	min-height: calc(0.72rem * 1.35 * 2);
	color: var(--oxblood);
}

/* El texto completo vive en la ficha; aquí se recorta a dos líneas para que
   la rejilla no se descuadre. */
.fiber .fc {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--muted);
	margin-top: 6px;
	min-height: calc(0.82rem * 1.5 * 2);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Pegado abajo: si la fila estira la tarjeta, el territorio no queda flotando. */
.fiber .fr {
	font-family: var(--sans);
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vermillion-d);
	margin-top: auto;
	padding-top: 10px;
}

/* ---------- aviso de clic en las fibras ---------- */

.fiber-grid-wrap {
	position: relative;
}

/* Velo oscuro a pantalla completa. `pointer-events: none` es lo que permite
   seguir haciendo scroll y pulsar mientras se muestra. */
.areito-hint-veil {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(42, 28, 20, 0.62);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.areito-hint-veil.is-on {
	opacity: 1;
}

/* La rejilla sube por encima del velo: es la zona que queda iluminada. */
.fiber-grid-wrap.is-hinting .fiber-grid {
	position: relative;
	z-index: 44;
}

/* Demostración: la primera tarjeta hace lo que haría al pasar el ratón, en
   sincronía con el indicador. */
.fiber.is-demo {
	box-shadow: 0 22px 48px rgba(72, 13, 23, 0.28);
	border-color: rgba(72, 13, 23, 0.3);
	animation: areito-demo-lift 1.3s ease-in-out infinite;
}

.fiber.is-demo .sw {
	transform: scale(1.08);
}

.fiber.is-demo .fn {
	color: var(--vermillion-d);
}

.fiber.is-demo .fr::after {
	transform: scaleX(1);
}

@keyframes areito-demo-lift {
	0%, 55%, 100% { transform: translateY(-6px); }
	12% { transform: translateY(-1px); }
	28% { transform: translateY(-6px); }
}

/* Se coloca sobre la primera tarjeta: el JS le pasa left/top y aquí solo se
   centra sobre ese punto. */
.fiber-hint {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 45;
	transform: translate(-50%, -50%);
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.fiber-grid-wrap.is-hinting .fiber-hint {
	display: flex;
	opacity: 1;
}

/* Indicador de pulsación: punto y onda. Dibujado con formas, así que no
   arrastra fondo ni se deforma a ningún tamaño. */
.fiber-hint .hint-cursor {
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
}

.fiber-hint .hint-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cream);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	animation: areito-hint-tap 1.3s ease-in-out infinite;
}

.fiber-hint .hint-ring {
	position: absolute;
	width: 24px;
	height: 24px;
	border: 2px solid var(--marigold);
	border-radius: 50%;
	animation: areito-hint-ring 1.3s ease-out infinite;
}

/* La segunda onda sale a medio ciclo: da sensación de latido continuo. */
.fiber-hint .hint-ring--late {
	animation-delay: 0.43s;
}

.fiber-hint .hint-label {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cream);
	background: var(--oxblood);
	padding: 9px 16px;
	border-radius: 40px;
}

@keyframes areito-hint-tap {
	0%, 55%, 100% { transform: scale(1); }
	12% { transform: scale(0.72); }
	28% { transform: scale(1); }
}

@keyframes areito-hint-ring {
	0% { transform: scale(0.8); opacity: 0; }
	12% { opacity: 0.95; }
	80% { transform: scale(3.1); opacity: 0; }
	100% { transform: scale(3.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.areito-hint-veil,
	.fiber-hint {
		transition: none;
	}

	.fiber-hint .hint-dot,
	.fiber-hint .hint-ring,
	.fiber.is-demo {
		animation: none;
	}

	.fiber.is-demo {
		transform: translateY(-6px);
	}

	.fiber-hint .hint-ring {
		transform: scale(2);
		opacity: 0.6;
	}
}

/* ---------- clientes ---------- */

.areito-clients {
	background: var(--olive);
	color: var(--cream);
	padding: 92px 0;
}

.areito-clients .eyebrow {
	color: var(--marigold);
}

.areito-clients h2 {
	font-size: 2.8rem;
	margin-top: 10px;
}

.areito-clients .track {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-top: 34px;
	border-top: 1px solid rgba(240, 232, 222, 0.22);
	padding-top: 26px;
	flex-wrap: wrap;
}

.areito-clients .track-n {
	font-family: var(--serif);
	font-size: 3rem;
	color: var(--marigold);
	line-height: 1;
}

.areito-clients .track-l {
	font-size: 1rem;
	color: var(--cream);
	max-width: 44ch;
	font-weight: 300;
}

.areito-clients .footprint {
	margin-top: 34px;
	font-family: var(--sans);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream);
	text-align: center;
	line-height: 2;
}

/* Carrusel: cuatro por vista, desplazamiento nativo con anclaje.
   Sin JS sigue siendo una lista desplazable; el script solo añade flechas. */
.client-slider {
	position: relative;
	margin-top: 40px;
}

.client-grid {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

/* Cuatro por vista descontando los tres huecos. Ancho explícito por corte,
   en vez de aritmética con variables dentro de calc(). */
.client-grid > .client {
	flex: 0 0 calc((100% - 48px) / 4);
}

.client-grid::-webkit-scrollbar {
	display: none;
}

.client-grid > .client {
	scroll-snap-align: start;
}

.slider-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 24px;
}

.slider-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(240, 232, 222, 0.35);
	background: transparent;
	color: var(--cream);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.slider-btn svg {
	width: 20px;
	height: 20px;
}

.slider-btn:hover:not( [disabled] ),
.slider-btn:focus-visible:not( [disabled] ) {
	background: var(--marigold);
	border-color: var(--marigold);
	color: var(--oxblood);
}

.slider-btn:active:not( [disabled] ) {
	transform: scale(0.94);
}

/* Al llegar al extremo el botón se apaga, pero no desaparece: así no baila
   la posición de la pareja de flechas. */
.slider-btn[disabled] {
	opacity: 0.3;
	cursor: default;
}

.client {
	background: var(--olive-d);
	border-radius: 2px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Sobre olivo el fondo de la tarjeta casi no contrasta: un filete en
	   crema muy bajo define el recorte sin ensuciar la sección. */
	border: 1px solid rgba(240, 232, 222, 0.22);
}

.client img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: center 30%;
}

.client .pt {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.client .k {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--marigold);
}

.client h3 {
	font-size: 1.5rem;
	margin: 6px 0 8px;
}

/* Recortadas para que la rejilla no se descuadre; el texto íntegro
   sigue en la ficha del cliente. */
.client p {
	font-size: 0.86rem;
	line-height: 1.55;
	color: #e0d4c2;
}

/* Solo se recortan los dos párrafos largos. El antetítulo también es un <p>,
   y con `.client p` se llevaba el min-height: de ahí el hueco enorme bajo él. */
.client .desc,
.client .collab {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.client .desc {
	margin-top: 4px;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	min-height: calc(0.86rem * 1.55 * 3);
}

.client .collab {
	margin-top: 10px;
	color: #cbbda6;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(0.86rem * 1.55 * 2);
}

.client .retailers {
	margin: auto 0 0;
	padding-top: 14px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cdbfa8;
}

.client .retailers li::after {
	content: ' ·';
}

.client .retailers li:last-child::after {
	content: '';
}

.areito-clients .also {
	margin-top: 44px;
	border-top: 1px solid rgba(240, 232, 222, 0.22);
	padding-top: 28px;
	text-align: center;
}

.areito-clients .also .lbl {
	font-family: var(--sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.62rem;
	color: var(--marigold);
}

.areito-clients .also .names {
	font-family: var(--serif);
	font-size: 1.5rem;
	margin-top: 12px;
	letter-spacing: 0.01em;
}

.areito-clients .also .names span {
	color: #efe7d8;
}

.areito-clients .also .names i {
	font-style: normal;
	color: rgba(240, 232, 222, 0.5);
	padding: 0 14px;
}

/* ---------- impacto ---------- */

.areito-impact {
	background: var(--bone);
	padding: 88px 0;
}

.areito-impact h2 {
	font-size: 2.7rem;
	color: var(--oxblood);
	max-width: 22ch;
	margin-top: 12px;
}

.areito-impact .istats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 50px;
}

.areito-impact .istat .n {
	font-family: var(--serif);
	font-size: 2.9rem;
	color: var(--vermillion);
	line-height: 1;
}

.areito-impact .istat p {
	font-size: 0.9rem;
	color: var(--muted);
	margin-top: 8px;
}

/* ---------- newsroom ---------- */

.areito-news {
	background: var(--cream);
	padding: 92px 0;
}

.areito-news h2 {
	font-size: 2.8rem;
	color: var(--oxblood);
	margin-top: 12px;
}

.areito-news .sub {
	color: var(--muted);
	margin-top: 10px;
	max-width: 52ch;
}

.areito-news .releases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 46px;
	padding: 0;
	list-style: none;
}

.areito-news .rel {
	background: #fff;
	border: 1px solid rgba(72, 13, 23, 0.12);
	border-radius: 2px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.areito-news .rel:hover,
.areito-single .rel:hover {
	box-shadow: 0 20px 44px rgba(72, 13, 23, 0.12);
	transform: translateY(-3px);
}

.areito-news .rel .meta {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vermillion-d);
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.areito-news .rel h3 {
	font-size: 1.4rem;
	color: var(--oxblood);
	margin: 16px 0 10px;
}

.areito-news .rel p {
	font-size: 0.92rem;
	color: var(--muted);
	flex: 1;
}

.areito-news .rel h3 a:hover {
	color: var(--vermillion-d);
}

.areito-news .rel .rd {
	font-family: var(--sans);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oxblood);
	margin-top: 18px;
	font-weight: 700;
}

.areito-news .presskit {
	margin-top: 40px;
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	border-top: 1px solid rgba(72, 13, 23, 0.14);
	padding-top: 30px;
}

.areito-news .presskit .t {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.3rem;
	color: var(--oxblood);
}

/* ---------- blog / prensa ---------- */

.areito-blog {
	padding-top: 78px;
}

.areito-blog h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--oxblood);
	margin-top: 12px;
}

.areito-blog .eyebrow {
	color: var(--vermillion-d);
}

.areito-pagination {
	margin-top: 46px;
	border-top: 1px solid rgba(72, 13, 23, 0.14);
	padding-top: 24px;
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.areito-pagination a,
.areito-pagination .current {
	display: inline-block;
	padding: 8px 12px;
	color: var(--oxblood);
}

.areito-pagination .current {
	background: var(--oxblood);
	color: var(--cream);
}

.areito-single .press-article {
	max-width: 72ch;
}

.areito-single .press-meta {
	display: flex;
	gap: 14px;
	align-items: baseline;
	font-family: var(--sans);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vermillion-d);
	margin-bottom: 14px;
}

.areito-single .press-meta time {
	color: var(--muted);
}

.areito-single .press-figure {
	margin: 34px 0 0;
}

.areito-single .press-figure img {
	width: 100%;
	border-radius: 2px;
}

.areito-single .press-source {
	margin-top: 36px;
	border-top: 1px solid rgba(72, 13, 23, 0.14);
	padding-top: 28px;
}

.areito-single .press-more {
	margin-top: 70px;
	border-top: 1px solid rgba(72, 13, 23, 0.14);
	padding-top: 40px;
}

.areito-single .press-more h2 {
	font-size: 1.9rem;
	color: var(--oxblood);
	margin-bottom: 26px;
}

.areito-single .releases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	padding: 0;
	list-style: none;
}

.areito-single .rel {
	background: #fff;
	border: 1px solid rgba(72, 13, 23, 0.12);
	border-radius: 2px;
	padding: 28px;
	display: flex;
	flex-direction: column;
}

.areito-single .rel .meta {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vermillion-d);
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.areito-single .rel h3 {
	font-size: 1.25rem;
	color: var(--oxblood);
	margin: 14px 0 10px;
}

.areito-single .rel p {
	font-size: 0.9rem;
	color: var(--muted);
	flex: 1;
}

.areito-single .rel .rd {
	font-family: var(--sans);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oxblood);
	margin-top: 18px;
	font-weight: 700;
}

/* ---------- fundadoras ---------- */

.areito-founders {
	background: var(--oxblood);
	color: var(--cream);
	padding: 92px 0;
}

.areito-founders .founders-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
	align-items: center;
}

.areito-founders .founders-img {
	position: relative;
}

.areito-founders img {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 2px;
}

/* En espejo respecto al hero: allí las barras van arriba a la derecha. */
.areito-founders .stripe-accent {
	position: absolute;
	top: -16px;
	left: -16px;
	z-index: 2;
	width: 110px;
	height: 140px;
	background: repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 8px);
	opacity: 0.5;
}

.areito-founders .tag {
	position: absolute;
	right: -14px;
	bottom: 30px;
	z-index: 3;
	background: var(--vermillion);
	color: #fff;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 10px 16px;
}

.areito-founders .eyebrow {
	color: var(--marigold);
}

.areito-founders h2 {
	font-size: 3rem;
	margin: 12px 0 22px;
}

.areito-founders .body p {
	color: #e7d7cf;
	font-weight: 300;
	font-size: 1.05rem;
	margin-bottom: 16px;
	max-width: 52ch;
}

.areito-founders .body strong {
	color: #fff;
}

.areito-founders .fmeta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-top: 26px;
	border-top: 1px solid rgba(240, 232, 222, 0.22);
	padding-top: 26px;
}

.areito-founders .fmeta .k {
	font-family: var(--sans);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--marigold);
	margin-bottom: 10px;
}

.areito-founders .fmeta ul {
	margin: 0;
	padding: 0;
}

.areito-founders .fmeta li {
	list-style: none;
	font-size: 0.9rem;
	color: #e7d7cf;
	margin-bottom: 5px;
}

/* ---------- cta + footer ---------- */

.areito-cta {
	background: var(--olive);
	color: var(--cream);
	padding: 100px 0;
	text-align: center;
	overflow: hidden;
}

.areito-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, var(--vermillion) 0 2px, transparent 2px 13px);
	opacity: 0.16;
}

.areito-cta h2 {
	position: relative;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	max-width: 18ch;
	margin: 0 auto;
}

.areito-cta h2 em {
	font-style: italic;
	color: var(--marigold);
}

.areito-cta .csub {
	position: relative;
	margin: 24px auto 34px;
	max-width: 44ch;
	color: #efe7d8;
	font-weight: 300;
	font-size: 1.1rem;
}

.areito-cta .btn {
	position: relative;
}

.areito-cta .signup {
	position: relative;
	display: flex;
	max-width: 440px;
	margin: 34px auto 0;
	border: 1px solid rgba(240, 232, 222, 0.4);
}

.areito-cta .signup input[type='email'] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 15px 18px;
	color: var(--cream);
	font-family: var(--sans);
	font-size: 0.9rem;
}

.areito-cta .signup input::placeholder {
	color: #efe7d8;
}

.areito-cta .signup button {
	background: var(--marigold);
	color: var(--oxblood);
	border: 0;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0 24px;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.12s ease;
}

.areito-cta .signup button:hover {
	background: var(--amber);
}

.areito-cta .signup button:active {
	transform: translateY(1px);
}

.areito-cta .contact-notice {
	position: relative;
	max-width: 440px;
	margin: 30px auto 0;
	text-align: left;
}

.areito-foot {
	background: var(--oxblood);
	padding: 56px 0 30px;
	color: var(--cream);
}

.areito-foot .foot-in {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 34px;
	align-items: start;
}

.areito-foot .foot-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.areito-foot .ftag {
	color: #d8c7bf;
	font-size: 0.92rem;
	font-weight: 300;
	max-width: 34ch;
}

.areito-foot .k {
	font-family: var(--sans);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--marigold);
	margin-bottom: 14px;
}

.areito-foot a,
.areito-foot p {
	color: #e7d7cf;
	font-size: 0.92rem;
	display: block;
	margin-bottom: 7px;
}

.areito-foot a:hover {
	color: var(--marigold);
}

.areito-foot .copyright {
	max-width: 1240px;
	margin: 44px auto 0;
	padding: 22px 46px 0;
	border-top: 1px solid rgba(240, 232, 222, 0.18);
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8a79d;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- spec sheet (dialog y página) ---------- */

.areito-spec {
	display: grid;
	grid-template-columns: 0.3fr 1.7fr;
	background: var(--bone);
	min-height: 520px;
}

.areito-spec .spec-rail {
	padding: 34px 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--bone);
}

.areito-spec .spec-rail .fiber-name {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	color: var(--oxblood);
	text-transform: uppercase;
	line-height: 1.05;
}

.areito-spec .spec-stage {
	position: relative;
	background: var(--ink);
	min-height: 320px;
}

.areito-spec .spec-stage > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.areito-spec .spec-panel {
	position: relative;
	margin: 92px 34px 34px auto;
	max-width: 460px;
	background: var(--oxblood);
	color: var(--cream);
	padding: 34px 36px 38px;
}

.areito-spec .spec-panel::before {
	content: '';
	position: absolute;
	left: 0;
	right: -12px;
	top: -46px;
	height: 58px;
	background:
		repeating-linear-gradient(90deg, var(--vermillion) 0 2px, transparent 2px 6px),
		repeating-linear-gradient(90deg, var(--blue) 3px 4px, transparent 4px 8px);
}

.areito-spec .spec-panel h2,
.areito-spec .spec-panel h1 {
	font-family: var(--serif);
	font-size: clamp(1.35rem, 5.5vw, 2rem);
	margin-bottom: 26px;
	/* Explícito: en la ficha a página completa este h1 vive dentro de un
	   contenedor que pinta los titulares en oxblood, y el panel es oxblood. */
	color: var(--cream);
}

.areito-spec .spec-list {
	margin: 0;
	display: grid;
	gap: 18px;
}

.areito-spec .spec-row dt {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 8px;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.areito-spec .spec-row dd {
	margin: 6px 0 0 42px;
	font-size: 0.92rem;
	font-weight: 300;
	color: #efe2dd;
}

/* ---------- dialog ---------- */

.areito-dialog {
	border: 0;
	padding: 0;
	width: min(1180px, 94vw);
	max-width: none;
	/* El scroll va en el cuerpo, no en el <dialog>: si scrollea el diálogo,
	   el botón de cerrar (absoluto) se va con el contenido y no hay salida. */
	max-height: 92dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bone);
	color: var(--ink);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

.areito-dialog [data-dialog-body] {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.areito-dialog::backdrop {
	background: rgba(42, 28, 20, 0.72);
	backdrop-filter: blur(3px);
}

.areito-dialog .dialog-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	background: var(--cream);
	color: var(--oxblood);
	border: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.areito-dialog .dialog-close:hover {
	background: var(--marigold);
}


/* ---------- archive de fibras ---------- */

.areito-archive {
	background: var(--cream);
	padding: 78px 0 96px;
}

.areito-archive .eyebrow {
	color: var(--vermillion-d);
}

.areito-archive h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--oxblood);
	margin-top: 12px;
	max-width: 22ch;
}

.areito-archive .intro {
	max-width: 62ch;
	color: var(--muted);
	font-size: 1.05rem;
	margin-top: 20px;
	font-weight: 300;
}

/* ---------- páginas de texto ---------- */

.areito-page {
	background: var(--cream);
	padding: 78px 0 96px;
}

.areito-page h1 {
	font-size: clamp(2rem, 4.4vw, 3rem);
	color: var(--oxblood);
	max-width: 22ch;
}

.areito-page .page-body {
	max-width: 68ch;
	margin-top: 30px;
	font-weight: 300;
	font-size: 1.02rem;
}

.areito-page .page-body h2 {
	font-size: 1.7rem;
	color: var(--oxblood);
	margin: 34px 0 12px;
}

.areito-page .page-body h3 {
	font-size: 1.25rem;
	color: var(--oxblood);
	margin: 26px 0 10px;
}

.areito-page .page-body p,
.areito-page .page-body ul,
.areito-page .page-body ol {
	margin-bottom: 16px;
}

.areito-page .page-body a {
	color: var(--vermillion-d);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.areito-page .page-body a:hover {
	color: var(--oxblood);
}

/* ---------- contacto ---------- */

.areito-contact .contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.areito-form .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.areito-form label {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oxblood);
}

.areito-form input,
.areito-form textarea {
	font-family: var(--sans);
	font-size: 0.98rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid rgba(72, 13, 23, 0.22);
	border-radius: 2px;
	padding: 12px 14px;
	width: 100%;
}

.areito-form input:focus-visible,
.areito-form textarea:focus-visible {
	outline: 2px solid var(--vermillion);
	outline-offset: 1px;
}

/* Trampa antispam: fuera de pantalla, nunca oculta con display:none
   (algunos bots lo detectan y la saltan). */
.areito .field--trap,
.areito-form .field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-notice {
	border-left: 3px solid var(--vermillion);
	background: #fff;
	padding: 14px 18px;
	margin-bottom: 22px;
	font-size: 0.95rem;
}

.contact-notice--sent {
	border-left-color: var(--olive);
}

/* ---------- movimiento ---------- */

/* El scroll escribe --sy y el puntero --dx/--dy; aquí se componen en un solo
   transform para no chocar con los hover que ya mueven elementos. */
.areito [data-parallax],
.areito [data-drift] {
	transform: translate3d(var(--dx, 0px), calc(var(--sy, 0px) + var(--dy, 0px)), 0);
	will-change: transform;
}

/* La deriva del puntero persigue al ratón; el paralaje ya va por rAF. */
.areito [data-drift] {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.areito [data-parallax] {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.areito [data-parallax],
	.areito [data-drift] {
		transform: none;
		will-change: auto;
	}

	.areito-positioning .props {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}
}

/* ---------- interacciones ---------- */

/* Un solo anillo de foco para todo. :focus-visible no molesta al ratón,
   solo aparece con teclado. */
.areito :focus-visible {
	outline: 2px solid var(--vermillion);
	outline-offset: 3px;
}

/* Sobre olivo y oxblood el bermellón se apaga; el marigold sí destaca. */
/* Sobre oxblood el marigold contrasta 7,2:1; sobre olivo solo 2,6:1, por
   debajo del 3:1 que pide WCAG para indicadores de foco. Ahí va crema. */
.areito-legacy :focus-visible,
.areito-founders :focus-visible,
.areito-foot :focus-visible,
.areito-spec .spec-panel :focus-visible {
	outline-color: var(--marigold);
}

.areito-hero :focus-visible,
.areito-clients :focus-visible,
.areito-cta :focus-visible {
	outline-color: var(--cream);
}

.areito ::selection {
	background: var(--marigold);
	color: var(--oxblood);
}

/* El anclaje no debe quedar debajo de la cabecera fija. */
.areito [id] {
	scroll-margin-top: 96px;
}

/* Botones: el hover ya cambia color; el clic necesita respuesta física. */
.areito .btn {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.12s ease;
}

.areito .btn:active {
	transform: translateY(1px);
}

.areito-nav .nav-links > a:not(.btn) {
	position: relative;
	padding-bottom: 2px;
}

/* Subrayado que crece desde la izquierda, sin mover el texto. */
.areito-nav .nav-links > a:not(.btn)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.areito-nav .nav-links > a:not(.btn):hover::after,
.areito-nav .nav-links > a:not(.btn):focus-visible::after,
.areito-nav .nav-links > a[aria-current='location']::after {
	transform: scaleX(1);
}

.areito-nav .nav-links > a[aria-current='location'] {
	opacity: 1;
}

.areito-nav .lang a:hover,
.areito-nav .lang a:focus-visible {
	opacity: 1;
}

.areito-nav .nav-toggle:hover,
.areito-nav .nav-toggle[aria-expanded='true'] {
	background: var(--oxblood);
	color: var(--cream);
}

.areito-nav .nav-toggle:active {
	transform: translateY(1px);
}

/* Cabecera: al bajar se compacta y se despega con una sombra mínima. */
.areito-nav {
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.areito-nav .nav-in {
	transition: padding 0.3s ease;
}

.areito-nav.is-scrolled {
	box-shadow: 0 10px 30px rgba(72, 13, 23, 0.1);
	background: rgba(239, 234, 221, 0.97);
}

.areito-nav.is-scrolled .nav-in {
	padding-top: 10px;
	padding-bottom: 10px;
}

.areito-nav.is-scrolled .areito-logo--nav {
	--logo-h: 28px;
}

.areito-logo--nav svg {
	transition: height 0.3s ease;
}

/* Tarjeta de fibra: el foco de teclado debe verse igual que el hover. */
.fiber:focus-visible {
	outline-offset: 2px;
}

.fiber:active {
	transform: translateY(-1px);
}

.fiber .sw {
	transition: transform 0.4s ease;
}

.fiber:hover .sw,
.fiber:focus-visible .sw {
	transform: scale(1.08);
}

/* Tarjeta de cliente: no tenía ningún estado. */
.client {
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.client:hover,
.client:focus-within {
	border-color: rgba(240, 232, 222, 0.45);
	transform: translateY(-2px);
}

.client img {
	transition: transform 0.5s ease;
}

.client:hover img {
	transform: scale(1.03);
}

/* La tarjeta de prensa se levanta entera; el foco del enlace la acompaña. */
.areito-news .rel:focus-within,
.areito-single .rel:focus-within {
	box-shadow: 0 20px 44px rgba(72, 13, 23, 0.12);
	transform: translateY(-3px);
}

.areito-news .rel h3 a,
.areito-single .rel h3 a {
	transition: color 0.2s ease;
}

.areito-news .rel .rd,
.areito-single .rel .rd {
	transition: color 0.2s ease;
}

.areito-news .rel:hover .rd,
.areito-single .rel:hover .rd {
	color: var(--vermillion-d);
}

.areito-foot a {
	transition: color 0.2s ease;
}

.areito-dialog .dialog-close {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.areito-dialog .dialog-close:active {
	transform: scale(0.94);
}

/* Formularios: el borde reacciona antes de que el campo reciba el foco. */
.areito-form input,
.areito-form textarea {
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.areito-form input:hover,
.areito-form textarea:hover {
	border-color: rgba(72, 13, 23, 0.45);
}

.areito-cta .signup {
	transition: border-color 0.25s ease;
}

.areito-cta .signup:focus-within {
	border-color: var(--marigold);
}

.areito-pagination a {
	transition: background-color 0.2s ease, color 0.2s ease;
}

.areito-pagination a:hover,
.areito-pagination a:focus-visible {
	background: var(--oxblood);
	color: var(--cream);
}

/* La entrada de las secciones al hacer scroll: sutil, y solo una vez. */
.areito [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.areito [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Sin JS el atributo no llega a ponerse, así que no hay nada que revelar. */

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.areito-hero .hero-in,
	.areito-meaning .meaning-grid,
	.areito-founders .founders-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.areito-legacy .stats,
	.areito-positioning .pillars,
	.fiber-grid,
	.areito-news .releases,
	.areito-single .releases,
	.areito-impact .istats,
	.areito-foot .foot-in {
		grid-template-columns: 1fr 1fr;
	}

	.client-grid > .client {
		flex-basis: calc((100% - 16px) / 2);
	}

	.areito .wrap,
	.areito-nav .nav-in,
	.areito-foot .copyright {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* En el desplegable cada destino necesita una fila pulsable de 44 px. */
	.areito-nav .nav-links {
		gap: 2px;
		padding: 10px 24px 16px;
	}

	.areito-nav .nav-links > a:not(.btn) {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		min-height: 44px;
		width: 100%;
	}

	/* A todo el ancho el subrayado deja de leerse como subrayado. */
	.areito-nav .nav-links > a:not(.btn)::after {
		display: none;
	}

	.areito-nav .nav-links > a[aria-current='location'] {
		color: var(--vermillion-d);
	}

	.areito-nav .nav-links .btn {
		align-self: center;
		margin-top: 6px;
	}

	.areito-nav .lang {
		align-self: center;
		margin-top: 12px;
	}

	.areito-nav .lang a {
		min-height: 44px;
		min-width: 52px;
	}

	/* En móvil sigue cuadrada; el ancho de columna ya la limita. */
	.areito-hero .hero-img img {
		height: auto;
	}

	.areito-nav .nav-toggle {
		display: block;
	}

	.areito-nav .nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		padding: 22px 24px 26px;
		background: var(--cream);
		border-bottom: 1px solid rgba(72, 13, 23, 0.12);
	}

	.areito-nav .nav-links.is-open {
		display: flex;
	}

	.areito-spec {
		grid-template-columns: 1fr;
	}

	.areito-spec .spec-rail {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		padding: 20px 24px;
	}

	/* En móvil la foto no puede quedar debajo del panel: primero se ve la
	   fibra y luego sus datos, en flujo normal. */
	.areito-spec .spec-stage {
		display: flex;
		flex-direction: column;
		background: transparent;
	}

	.areito-spec .spec-stage > img {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.areito-spec .spec-panel {
		position: relative;
		margin: 0;
		max-width: none;
	}

	/* La trama pasa a ir sobre el panel, no colgando de la foto. */
	.areito-spec .spec-panel::before {
		top: -30px;
		right: 0;
		height: 34px;
	}

	.areito-contact .contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 620px) {
	.areito-legacy .stats,
	.areito-positioning .pillars,
	.areito-news .releases,
	.areito-single .releases,
	.areito-impact .istats,
	.areito-foot .foot-in {
		grid-template-columns: 1fr;
	}

	/* Dos por fila: una sola columna dejaba tarjetas enormes y obligaba a
	   recorrer quince pantallazos. */
	.fiber-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.fiber .sw {
		height: 88px;
	}

	.fiber .txt {
		padding: 12px 12px 14px;
	}

	.fiber .fn {
		font-size: 0.64rem;
		letter-spacing: 0.08em;
		min-height: calc(0.64rem * 1.35 * 2);
	}

	.fiber .fc {
		font-size: 0.74rem;
		min-height: calc(0.74rem * 1.5 * 2);
	}

	.fiber .fr {
		font-size: 0.54rem;
		padding-top: 8px;
	}

	.client-grid > .client {
		flex-basis: 84%;
	}

	.slider-nav {
		justify-content: center;
	}

	.areito-hero .hero-img .tag {
		left: 0;
	}

	.areito-founders .stripe-accent {
		left: 0;
		width: 84px;
		height: 108px;
	}

	.areito-founders .tag {
		right: 0;
	}

	/* En una sola columna el pie se lee mejor centrado. */
	.areito-foot .foot-in {
		justify-items: center;
		text-align: center;
		gap: 30px;
	}

	.areito-foot .foot-brand {
		align-items: center;
	}

	.areito-foot .ftag {
		max-width: 30ch;
	}

	.areito-foot .copyright {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
	}

	/* Apiladas a todo el ancho las cifras quedan sueltas. En fila —número a
	   la izquierda, texto a la derecha— el bloque se lee de un vistazo. */
	.areito-legacy .stats,
	.areito-impact .istats {
		gap: 0;
		margin-top: 34px;
	}

	/* Cada stat es su propia rejilla, así que `auto` medía la columna por
	   separado en cada fila y los textos arrancaban a distinta altura.
	   Con ancho fijo comparten eje. */
	.areito-legacy .stat,
	.areito-impact .istat {
		display: grid;
		grid-template-columns: 92px 1fr;
		column-gap: 18px;
		align-items: baseline;
		padding: 18px 0;
	}

	.areito-legacy .stat {
		border-bottom: 1px solid rgba(240, 232, 222, 0.16);
	}

	.areito-impact .istat {
		border-bottom: 1px solid rgba(72, 13, 23, 0.12);
	}

	.areito-legacy .stat:last-child,
	.areito-impact .istat:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.areito-legacy .stat .n,
	.areito-impact .istat .n {
		grid-column: 1;
		grid-row: 1 / span 2;
		font-size: 2.3rem;
		line-height: 1;
	}

	.areito-legacy .stat .l {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.areito-legacy .stat p,
	.areito-impact .istat p {
		grid-column: 2;
		grid-row: 2;
		margin-top: 4px;
	}

	/* Impacto no tiene rótulo, así que su texto ocupa las dos filas. */
	.areito-impact .istat p {
		grid-row: 1 / span 2;
		align-self: center;
	}

	.areito-spec .spec-panel {
		margin: 54px 12px 12px;
		padding: 24px 20px 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.areito *,
	.areito *::before,
	.areito *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	/* Nada de aparecer al hacer scroll si el sistema pide menos movimiento. */
	.areito [data-reveal],
	.areito [data-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

	.fiber:hover .sw,
	.fiber:focus-visible .sw,
	.client:hover img {
		transform: none;
	}
}