/*
 * 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 .hero-img .tag {
	z-index: 3;
}

/* ---------- líneas de negocio (banda del hero) ---------- */

/* Con la banda, el bloque de arriba deja de ocupar la pantalla entera: entre
   las dos piezas sumaban más de 100vh y la foto quedaba cortada al cargar. */
.areito-hero:has(.hero-lines) .hero-in {
	min-height: 70vh;
}

.areito-hero .hero-lines {
	position: relative;
	border-top: 1px solid rgba(239, 234, 221, 0.22);
	background: rgba(0, 0, 0, 0.08);
}

.areito-hero .lines-in {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 34px;
	padding-top: 26px;
	padding-bottom: 26px;
}

.areito-hero .lines-label {
	color: var(--marigold);
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.6rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	line-height: 1.8;
	/* Tres palabras en columna, como en el diseño. */
	max-width: 7ch;
}

.areito-hero .lines {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.areito-hero .lines > li {
	padding: 0 34px;
	border-left: 1px solid rgba(239, 234, 221, 0.22);
}

.areito-hero .lines .t {
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	line-height: 1.1;
}

.areito-hero .lines .d {
	margin-top: 6px;
	font-size: 0.9rem;
	color: #efe7d8;
}

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

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

.areito-meaning .eyebrow,
.areito-positioning .eyebrow,
.areito-diversity .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;
}

/* ---------- diversidad ---------- */

/* Va entre posicionamiento y fibras, las dos sobre fondo claro: el filete
   superior es lo que marca el corte entre secciones. */
.areito-diversity {
	background: var(--cream);
	border-top: 1px solid rgba(72, 13, 23, 0.1);
	padding: 92px 0;
}

.areito-diversity .div-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* El mapa es opcional en el panel: sin él, el texto ocupa las dos columnas en
   vez de dejar media sección en blanco. */
.areito-diversity .div-lede:only-child {
	grid-column: 1 / -1;
}

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

.areito-diversity .body {
	color: var(--muted);
	max-width: 54ch;
	margin-top: 22px;
	font-size: 0.98rem;
}

.areito-diversity .body strong {
	color: var(--oxblood);
	font-weight: 600;
}

.areito-diversity .pull {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--vermillion);
	max-width: 24ch;
	margin-top: 28px;
}

.areito-diversity .dstats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 44px;
	margin-top: 44px;
	border-top: 1px solid rgba(72, 13, 23, 0.12);
	padding-top: 38px;
}

.areito-diversity .dstat .n {
	font-family: var(--serif);
	font-size: 2.6rem;
	color: var(--olive);
	line-height: 1;
}

.areito-diversity .dstat p + p {
	font-size: 0.86rem;
	color: var(--muted);
	margin-top: 8px;
}

/* El mapa es una pieza expuesta: el marco oxblood hace de paspartú y evita
   que el rojo del mural choque con el crema de la sección. */
.areito-diversity .div-map {
	background: var(--oxblood);
	padding: 26px;
	margin: 0;
	border-radius: 2px;
}

.areito-diversity .div-map img {
	display: block;
	width: 100%;
	border-radius: 1px;
}

.areito-diversity .maptitle {
	font-family: var(--sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.62rem;
	color: var(--marigold);
	text-align: center;
	margin-bottom: 20px;
}

.areito-diversity .div-map figcaption {
	font-size: 0.72rem;
	color: #d8c7bf;
	text-align: center;
	margin-top: 18px;
}

.areito-diversity .div-eco {
	margin-top: 78px;
	border-top: 1px solid rgba(72, 13, 23, 0.12);
	padding-top: 46px;
}

.areito-diversity .ecotext {
	font-family: var(--serif);
	font-size: 1.62rem;
	color: var(--oxblood);
	max-width: 46ch;
	margin-top: 14px;
	line-height: 1.35;
}

.areito-diversity .ecotext em {
	color: var(--olive);
}

/* Las cuatro columnas y los tres apuntes comparten el mismo separador
   vertical: el filete solo aparece entre celdas, nunca al principio. */
.areito-diversity .ecolist,
.areito-diversity .div-notes {
	list-style: none;
	padding: 0;
	gap: 0;
	display: grid;
}

.areito-diversity .ecolist {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 36px;
}

.areito-diversity .div-notes {
	grid-template-columns: repeat(3, 1fr);
	margin-top: 58px;
	border-top: 1px solid rgba(72, 13, 23, 0.12);
	padding-top: 42px;
}

.areito-diversity .ecolist li,
.areito-diversity .div-notes li {
	border-left: 1px solid rgba(72, 13, 23, 0.12);
	padding: 0 26px;
}

.areito-diversity .ecolist li:nth-child(4n + 1),
.areito-diversity .div-notes li:nth-child(3n + 1) {
	border-left: 0;
	padding-left: 0;
}

.areito-diversity .ecolist .t {
	font-family: var(--sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.68rem;
	color: var(--oxblood);
}

.areito-diversity .ecolist li p + p {
	font-size: 0.9rem;
	color: var(--muted);
	margin-top: 10px;
}

.areito-diversity .div-notes li p + p {
	font-family: var(--serif);
	font-size: 1.06rem;
	color: var(--oxblood);
	margin-top: 14px;
	line-height: 1.45;
}

/* El dato que carga la frase: color y peso, no cursiva. El color solo no vale
   como única pista, y el bermellón pleno no llega al contraste a este cuerpo. */
.areito-diversity .div-notes em {
	font-style: normal;
	font-weight: 700;
	color: var(--vermillion-d);
}

.areito-diversity .div-sources {
	font-size: 0.72rem;
	font-style: italic;
	color: var(--muted);
	margin-top: 44px;
}

/* ---------- 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 {
	position: relative;
	height: 120px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.fiber .sw img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El zoom del hover lo lleva la foto, no la caja: así el recorte no se
	   sale del borde de la tarjeta. */
	transition: transform 0.45s ease;
}

.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.15s ease-in-out infinite;
}

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

.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.15s 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.15s ease-out infinite;
}

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

.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;
	}
}

/* Fibras vecinas al pie de cada ficha: enlaces internos reales, no un
   callejón sin salida. */
.areito-archive .fiber-back {
	margin-top: 30px;
}

.areito-archive .fiber-related {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid rgba(72, 13, 23, 0.14);
}

.areito-archive .fiber-related h2 {
	font-family: var(--serif);
	font-size: 1.7rem;
	color: var(--oxblood);
	margin-bottom: 26px;
}

/* ---------- 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;
}

/* Rellenas, no en contorno: sobre el olivo un filete fino desaparece y no se
   lee que sean pulsables. El marigold sobre oxblood contrasta 7,2:1. */
.slider-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--marigold);
	background: var(--marigold);
	color: var(--oxblood);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(30, 20, 6, 0.28);
	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(--amber);
	border-color: var(--amber);
	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. Vacío y tenue frente al relleno del
   que sí funciona: la diferencia se ve de un vistazo.

   El apagado se tiñe según la sección: en crema sobre el hueso de la sala de
   prensa no se distinguía del fondo. */
.slider-btn[disabled] {
	background: transparent;
	border-color: var(--slider-off-line, rgba(72, 13, 23, 0.34));
	color: var(--slider-off-ink, var(--oxblood));
	box-shadow: none;
	opacity: 0.5;
	cursor: default;
}

.areito-clients {
	--slider-off-line: rgba(240, 232, 222, 0.34);
	--slider-off-ink: var(--cream);
}

.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 h2 em {
	font-style: italic;
}

.areito-impact .ilede {
	max-width: 56ch;
	margin-top: 18px;
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--muted);
}

/* ---------- la película de impacto ---------- */

/* La película está grabada en vertical (1440×2560), así que el marco es
   vertical y la columna del vídeo, estrecha. Si algún día se cambia por una
   apaisada, basta con tocar --film-ratio.

   Va en banda oscura a sangre: el formato vertical deja mucho aire a los
   lados y sobre el hueso quedaba flotando. */
.areito-impact .ifilm {
	--film-ratio: 9 / 16;

	display: grid;
	grid-template-columns: minmax(240px, 340px) 1fr;
	gap: 60px;
	align-items: center;
	margin: 52px calc(50% - 50vw) 0;
	padding: 64px max(46px, calc(50vw - 570px));
	background: var(--oxblood);
	color: var(--cream);
}

.areito-impact .ifilm .film {
	margin: 0;
}

/* La carátula es un botón: hasta que se pulsa no hay <video>, así que la
   sección no arrastra megas de vídeo en la carga inicial. */
.areito-impact .poster {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--film-ratio);
	padding: 0;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	color: var(--cream);
	background-color: var(--olive-d);
	background-size: cover;
	background-position: center;
	background-image:
		radial-gradient(120% 120% at 70% 20%, rgba(245, 157, 36, 0.3), transparent 55%),
		linear-gradient(135deg, #5f5214 0%, #3b2f10 45%, var(--oxblood) 100%);
	box-shadow: 0 34px 80px rgba(72, 13, 23, 0.35);
}

/* Trama fina sobre la carátula, del mismo aire que el resto del sitio. */
.areito-impact .poster::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, rgba(240, 232, 222, 0.1) 0 2px, transparent 2px 14px);
}

.areito-impact .poster .play {
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 1.5px solid rgba(240, 232, 222, 0.7);
	background: rgba(240, 232, 222, 0.22);
	backdrop-filter: blur(3px);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.areito-impact .poster .play svg {
	width: 30px;
	height: 34px;
	margin-left: 6px;
}

.areito-impact .poster:hover .play,
.areito-impact .poster:focus-visible .play {
	background: var(--marigold);
	border-color: var(--marigold);
	color: var(--oxblood);
	transform: scale(1.06);
}

.areito-impact .poster .plabel {
	position: absolute;
	left: 26px;
	bottom: 24px;
	text-align: left;
}

.areito-impact .poster .plabel .k {
	display: block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--marigold);
}

.areito-impact .poster .plabel .n {
	display: block;
	font-family: var(--serif);
	font-size: 1.6rem;
	color: #fff;
	margin-top: 4px;
}

/* Sobre la banda oscura la sombra sobra: solo ensucia. */
.areito-impact .poster {
	box-shadow: none;
}

/* Al pulsar, el vídeo ocupa el mismo hueco que la carátula. `contain` evita
   recortar la cara de quien habla si el archivo no es exactamente vertical. */
.areito-impact .film video {
	display: block;
	width: 100%;
	aspect-ratio: var(--film-ratio);
	object-fit: contain;
	background: var(--ink);
}

.areito-impact .film figcaption {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 14px;
}

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

/* La cita larga es la voz de Yulie y manda en el bloque. */
.areito-impact .fside blockquote.lead {
	margin: 22px 0 0;
	border: 0;
	font-family: var(--serif);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.32;
	color: var(--cream);
}

/* Filete de separación, del mismo peso que los del resto del sitio. */
.areito-impact .fside blockquote.sub {
	margin: 30px 0 0;
	padding-top: 30px;
	border: 0;
	border-top: 1px solid rgba(240, 232, 222, 0.22);
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	line-height: 1.28;
	color: var(--cream);
}

.areito-impact .fside blockquote em {
	font-style: italic;
	color: var(--marigold);
}

.areito-impact .fside p {
	margin-top: 18px;
	font-size: 0.98rem;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(240, 232, 222, 0.82);
}

.areito-impact .fside .flink {
	display: inline-block;
	margin-top: 26px;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cream);
	border-bottom: 1px solid var(--marigold);
	padding-bottom: 5px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.areito-impact .fside .flink:hover,
.areito-impact .fside .flink:focus-visible {
	color: var(--marigold);
	border-color: var(--marigold);
}

/* Los tres efectos. La numeración es información: son consecutivos. */
.areito-impact .itriad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 56px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid rgba(72, 13, 23, 0.14);
	list-style: none;
	counter-reset: none;
}

.areito-impact .itriad .num {
	display: block;
	font-family: var(--serif);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--marigold);
}

.areito-impact .itriad h3 {
	font-family: var(--serif);
	font-size: 1.22rem;
	color: var(--oxblood);
	margin: 12px 0 6px;
}

.areito-impact .itriad p {
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--muted);
}

/* Sin fondo propio: con la banda de la película en oxblood, dos bloques
   oscuros tan seguidos se pisaban. */
.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;
}

/* Cuando el navegador no sabe leer el archivo: mejor una frase que un
   rectángulo negro sin explicación. */
.areito-impact .film-error {
	display: grid;
	place-items: center;
	aspect-ratio: var(--film-ratio);
	padding: 24px;
	text-align: center;
	background: var(--oxblood);
	color: var(--cream);
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 300;
}

/* ---------- 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;
}

/* Carrusel, como el de clientes: las apariciones ya no caben en una fila. */
.areito-news .press-slider {
	position: relative;
	margin-top: 46px;
}

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

.areito-news .releases::-webkit-scrollbar {
	display: none;
}

/* Tres por vista descontando los dos huecos. Ancho explícito por corte, no
   aritmética con variables dentro de calc(). */
.areito-news .releases > .rel {
	flex: 0 0 calc((100% - 44px) / 3);
	scroll-snap-align: start;
}

.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 .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;
}

/* Acotado a las columnas: cada enlace del pie es una fila. Sin acotar
   alcanzaba también al crédito y su enlace, que al volverse bloque partía la
   firma en tres líneas. */
.areito-foot .foot-in a,
.areito-foot .foot-in p {
	color: #e7d7cf;
	font-size: 0.92rem;
	display: block;
	margin-bottom: 7px;
}

.areito-foot .foot-in 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;
}

/* Crédito del estudio. Se queda en el oxblood del pie y solo lo despega un
   filete: es una firma, no un bloque más. */
.areito-foot .credit {
	max-width: 1240px;
	margin: 20px auto 0;
	padding: 16px 46px 0;
	border-top: 1px solid rgba(240, 232, 222, 0.1);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(240, 232, 222, 0.42);
	text-align: center;
	/* Va en una sola línea mientras quepa; en móvil parte por los puntos
	   medios, nunca dentro del nombre del estudio. */
	text-wrap: balance;
}

.areito-foot .credit a {
	display: inline;
	color: rgba(240, 232, 222, 0.62);
	text-decoration: underline;
	text-decoration-color: rgba(240, 232, 222, 0.24);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.areito-foot .credit a:hover,
.areito-foot .credit a:focus-visible {
	color: var(--marigold);
	text-decoration-color: var(--marigold);
}

/* ---------- 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);
}

/* En la página de la fibra el rótulo lleva además el párrafo de entrada, así
   que la columna necesita más aire que dentro del diálogo. */
.areito-spec--page {
	grid-template-columns: 0.62fr 1.38fr;
}

.areito-spec .rail-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.areito-spec .fiber-intro {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 46ch;
}

.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);
}

/* El navegador oculta el diálogo cerrado con `dialog:not([open]){display:none}`
   en su hoja de usuario, pero cualquier `display` de la hoja del sitio le gana.
   El `display: flex` de arriba lo devolvía al flujo: en móvil, con su alto de
   100dvh, dejaba una pantalla en blanco detrás del pie. */
.areito-dialog:not( [open] ) {
	display: none;
}

.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);
}

/* Cae sobre dos fondos distintos —la banda crema del rótulo y la foto—, así
   que se pinta en oxblood con un halo claro: se ve en ambos. El contenido le
   reserva sitio, no lo tapa. */
.areito-dialog .dialog-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	background: var(--oxblood);
	color: var(--cream);
	border: 2px solid rgba(247, 244, 238, 0.9);
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	line-height: 0;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(30, 12, 8, 0.35);
}

.areito-dialog .dialog-close svg {
	display: block;
	width: 19px;
	height: 19px;
}

.areito-dialog .dialog-close:hover,
.areito-dialog .dialog-close:focus-visible {
	background: var(--vermillion);
	border-color: var(--cream);
	color: var(--cream);
}

/* ---------- 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;
}

/* El aviso cae sobre fondos muy distintos —crema en contacto, oliva en la
   llamada final—, así que fija su propio color en vez de heredarlo: sobre el
   oliva heredaba crema sobre blanco y no se leía nada. */
.contact-notice {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--bone);
	color: var(--ink);
	border: 1px solid rgba(72, 13, 23, 0.12);
	border-left: 4px solid var(--vermillion);
	padding: 16px 20px;
	margin-bottom: 22px;
	font-family: var(--sans);
	font-size: 0.94rem;
	line-height: 1.5;
	box-shadow: 0 14px 34px rgba(30, 12, 8, 0.18);
	animation: areito-notice-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.contact-notice::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--vermillion);
}

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

.contact-notice--sent::before {
	background: var(--olive);
}

@keyframes areito-notice-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

/* ---------- reportaje propio ---------- */

/* Pieza escrita por la casa, no reseña de un medio: apertura centrada,
   capitular, citas a toda anchura y galería. */
.areito-feature {
	padding-bottom: 0;
}

.areito-feature .feature-head {
	max-width: 820px;
	margin: 0 auto;
	padding: 74px 32px 34px;
	text-align: center;
}

.areito-feature .feature-head .eyebrow {
	color: var(--vermillion);
}

.areito-feature .feature-head h1 {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	line-height: 1.05;
	color: var(--oxblood);
	margin: 20px 0 0;
}

.areito-feature .feature-head h1 em {
	font-style: italic;
}

.areito-feature .feature-head .deck {
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	font-weight: 300;
	line-height: 1.45;
	max-width: 34ch;
	margin: 24px auto 0;
}

.areito-feature .feature-head .dateline {
	margin-top: 26px;
	font-family: var(--sans);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Foto de apertura, con la etiqueta apoyada en la esquina inferior. */
.areito-feature .feature-hero {
	max-width: 1240px;
	margin: 14px auto 0;
	padding: 0 46px;
}

.areito-feature .feature-hero figure {
	position: relative;
	margin: 0;
}

.areito-feature .feature-hero img {
	width: 100%;
	height: 62vh;
	max-height: 640px;
	object-fit: cover;
}

.areito-feature .feature-hero .tag {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--oxblood);
	color: var(--cream);
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 17px;
}

.areito-feature .figcap {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 12px;
	text-align: center;
}

/* Columna de lectura estrecha: el texto largo pide medida corta. */
.areito-feature .feature-body {
	max-width: 680px;
	margin: 0 auto;
	padding: 46px 32px 0;
}

.areito-feature .feature-body p {
	font-size: 1.14rem;
	font-weight: 300;
	line-height: 1.7;
	margin-bottom: 22px;
	color: #3a2a20;
}

/* Capitular del primer párrafo, en bermellón como el concepto. */
.areito-feature .feature-body p.lead::first-letter {
	font-family: var(--serif);
	font-size: 3.4rem;
	float: left;
	line-height: 0.8;
	padding: 6px 12px 0 0;
	color: var(--vermillion);
}

.areito-feature .feature-body h2 {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 3.4vw, 1.9rem);
	color: var(--oxblood);
	margin: 40px 0 14px;
}

.areito-feature .feature-quote {
	max-width: 940px;
	margin: 54px auto;
	padding: 0 32px;
	border: 0;
	text-align: center;
}

.areito-feature .feature-quote p {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	line-height: 1.2;
	color: var(--oxblood);
}

.areito-feature .feature-quote em {
	font-style: italic;
	color: var(--vermillion);
}

/* La segunda cita va a sangre, sobre oxblood. */
.areito-feature .feature-quote--dark {
	max-width: none;
	margin: 56px 0;
	padding: 70px 32px;
	background: var(--oxblood);
}

.areito-feature .feature-quote--dark p {
	color: var(--cream);
	max-width: 940px;
	margin: 0 auto;
}

.areito-feature .feature-quote--dark em {
	color: var(--marigold);
}

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

.areito-feature .feature-band img {
	width: 100%;
	height: 70vh;
	max-height: 720px;
	object-fit: cover;
}

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

.areito-feature .feature-gallery .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.areito-feature .feature-gallery img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.areito-feature .feature-closing {
	max-width: 680px;
	margin: 54px auto 0;
	padding: 0 32px;
	text-align: center;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	line-height: 1.4;
	color: var(--oxblood);
}

/* Llamada final: la misma banda oliva rayada que cierra la home. */
.areito-feature .feature-cta {
	position: relative;
	overflow: hidden;
	margin-top: 60px;
	padding: 78px 0;
	background: var(--olive);
	color: var(--cream);
	text-align: center;
}

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

.areito-feature .feature-cta .wrap {
	position: relative;
}

.areito-feature .feature-cta h2 {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 4.4vw, 2.2rem);
	line-height: 1.15;
	color: var(--cream);
	max-width: 22ch;
	margin: 0 auto;
}

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

.areito-feature .feature-cta .btn {
	margin-top: 26px;
}

.areito-feature .feature-more {
	padding: 60px 0 70px;
}

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

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

/* ---------- 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;
}

/* El rótulo de la fibra recibe el foco al abrir la ficha, solo para que los
   lectores de pantalla anuncien de qué fibra se trata. No es pulsable, así que
   el anillo encima solo parecía un recuadro roto alrededor del título. */
.areito-spec .spec-rail .fiber-name:focus,
.areito-spec .spec-rail .fiber-name:focus-visible {
	outline: none;
}

/* 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 img,
.fiber:focus-visible .sw img {
	transform: scale(1.06);
}

/* 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-diversity .div-top,
	.areito-founders .founders-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

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

	/* Con las celdas en dos filas, el filete de la izquierda deja de separar
	   columnas y pasa a cortar por donde no toca: se sustituye por el de
	   arriba, que sí sigue el orden de lectura. */
	.areito-diversity .ecolist,
	.areito-diversity .div-notes {
		column-gap: 26px;
	}

	.areito-diversity .ecolist li,
	.areito-diversity .div-notes li {
		border-left: 0;
		border-top: 1px solid rgba(72, 13, 23, 0.12);
		padding: 22px 0 0;
	}

	/* Los dos primeros ya van bajo el filete del contenedor: otro encima sería
	   una raya doble. */
	.areito-diversity .ecolist li:nth-child(-n + 2),
	.areito-diversity .div-notes li:nth-child(-n + 2) {
		border-top: 0;
		padding-top: 0;
	}

	.areito-news .releases > .rel {
		flex-basis: calc((100% - 22px) / 2);
	}

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

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

	/* Menos interletrado para que quepa en menos líneas, y el nombre del
	   estudio entero: partido en dos deja de leerse como una firma. */
	.areito-foot .credit {
		letter-spacing: 0.08em;
		line-height: 1.9;
	}

	.areito-foot .credit a {
		white-space: nowrap;
	}

	/* 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;
	}

	/* En una columna el filete vertical no separa nada: pasa a horizontal. */
	.areito-hero .lines-in,
	.areito-hero .lines {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.areito-hero .lines-label {
		max-width: none;
	}

	.areito-hero .lines > li {
		padding: 16px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(239, 234, 221, 0.22);
	}

	.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,
	.areito-spec--page {
		grid-template-columns: 1fr;
		/* En una columna la altura la marca el contenido; forzar 520 px solo
		   añadía hueco muerto. */
		min-height: 0;
	}

	/* El hueco de la derecha es del botón de cerrar: sin él, el botón caía
	   encima del nombre de la fibra y lo cortaba. */
	.areito-spec .spec-rail {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 18px 74px 18px 22px;
	}

	.areito-spec .spec-rail .fiber-name {
		font-size: clamp(1.3rem, 5.6vw, 2rem);
		overflow-wrap: anywhere;
	}

	/* 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;
		min-height: 0;
	}

	/* 4/3 se comía tres cuartos del ancho en alto y la ficha no cabía. Con
	   16/9 y un tope en unidades de pantalla siempre queda sitio para los
	   datos, que es lo que se viene a leer. */
	.areito-spec .spec-stage > img {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		max-height: 34dvh;
		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;
	}

	/* El vídeo pasa arriba y el texto debajo: en una columna estrecha la
	   película sigue siendo lo primero que se ve. */
	.areito-impact .ifilm {
		grid-template-columns: 1fr;
		gap: 30px;
		justify-items: center;
		padding: 46px 24px;
	}

	/* En una columna, el vídeo vertical no puede ocupar todo el ancho o se
	   come dos pantallas de alto. */
	.areito-impact .ifilm .film {
		width: min(100%, 320px);
	}

	.areito-impact .fside {
		width: 100%;
	}

	.areito-impact .itriad {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.areito-feature .feature-gallery .grid,
	.areito-feature .feature-more .releases {
		grid-template-columns: 1fr;
	}

	.areito-feature .feature-hero,
	.areito-feature .feature-band,
	.areito-feature .feature-gallery {
		padding: 0 22px;
	}

	.areito-feature .feature-hero img,
	.areito-feature .feature-band img {
		height: 44vh;
	}

	.areito-feature .feature-gallery img {
		height: 240px;
	}

	.areito-feature .feature-head {
		padding: 48px 24px 28px;
	}

	.areito-feature .feature-quote--dark {
		padding: 48px 24px;
	}
}

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

	.areito-impact .poster .play {
		width: 74px;
		height: 74px;
	}

	.areito-impact .poster .play svg {
		width: 22px;
		height: 25px;
	}

	.areito-impact .poster .plabel {
		left: 18px;
		bottom: 16px;
	}

	.areito-impact .poster .plabel .n {
		font-size: 1.2rem;
	}

	.areito-impact .istats {
		padding: 26px 22px 30px;
	}

	.areito-news .releases > .rel {
		flex-basis: 100%;
	}

	/* 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 .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-diversity .dstats,
	.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-diversity .dstat,
	.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,
	.areito-diversity .dstat {
		border-bottom: 1px solid rgba(72, 13, 23, 0.12);
	}

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

	.areito-legacy .stat .n,
	.areito-impact .istat .n,
	.areito-diversity .dstat .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;
	}

	/* A pantalla completa: con márgenes, la ficha se quedaba sin alto y el
	   último dato caía fuera. Ahora scrollea dentro y se ve entera. */
	.areito-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
	}

	.areito-spec .spec-stage > img {
		max-height: 30dvh;
	}

	.areito-spec .spec-rail {
		padding: 16px 68px 16px 18px;
	}

	.areito-dialog .dialog-close {
		top: 10px;
		right: 10px;
	}
}

@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;
	}
}