/* ===========================================================================
   base.css — Reset, tipografía, layout y componentes globales.
   Depende de tokens.css. Componentes de página de servicio → article.css.
   =========================================================================== */

/* --- RESET ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	tab-size: 4;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	min-height: 100%;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-serif);
	font-size: var(--step-0);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
	overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--selection); color: var(--paper); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --- GRANO DE PAPEL (textura fija, imperceptible, "imprenta") -------------- */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-grain);
	pointer-events: none;
	opacity: var(--grain-opacity);
	mix-blend-mode: var(--grain-blend);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 200px 200px;
}

/* --- TIPOGRAFÍA BASE ------------------------------------------------------ */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--display-wght);
	line-height: var(--lh-tight);
	font-variation-settings: "opsz" 144, "SOFT" var(--display-soft), "wght" var(--display-wght);
	letter-spacing: -0.012em;
	text-wrap: balance;
}
p { text-wrap: pretty; }

.display { font-family: var(--font-display); line-height: var(--lh-tight); }
.serif   { font-family: var(--font-serif); }
.amp     { font-family: var(--font-display); }

/* Etiqueta mono — kickers, folios, navegación, marginalia */
.kicker, .mono {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--tracking-mono);
	color: var(--muted);
	line-height: 1.4;
}
.kicker--accent { color: var(--accent); }

.lead {
	font-size: var(--step-1);
	line-height: 1.42;
	color: var(--paper-dim);
	font-weight: 400;
	max-width: 34ch;
}

/* --- LAYOUT --------------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 2rem + 8vh, 7rem); }
.measure { max-width: var(--measure); }
.hr { border: 0; border-top: 1px solid var(--hairline); }

main { display: block; }

/* --- SKIP LINK ------------------------------------------------------------ */
.skip {
	position: fixed;
	top: var(--s2);
	left: var(--s2);
	z-index: var(--z-skip);
	background: var(--ink-2);
	color: var(--paper);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--accent);
	transform: translateY(-160%);
	transition: transform var(--dur-fast) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* --- MASTHEAD (cabecera mínima) ------------------------------------------- */
.masthead {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: clamp(1rem, 2.2vh, 1.75rem) var(--gutter);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		backdrop-filter var(--dur-fast) var(--ease);
}
/* Estado "desplazado": gana fondo y una línea inferior tenue para separarse
   del contenido; en el tope de la página se mantiene transparente (arriba). */
.masthead.is-scrolled {
	background: color-mix(in oklch, var(--ink) 72%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom-color: var(--hairline);
}
.masthead__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--paper);
	white-space: nowrap;
}
.masthead__brand b { font-weight: 400; }
.masthead__brand .amp { color: var(--accent); font-family: var(--font-display); }

/* Escudo junto al wordmark — decorativo (aria-hidden, sin alt propio: el
   nombre accesible ya lo da .masthead__brand), así que va como fondo y no
   como <img>. Es lo que permite alternar de verdad por tema: --crest cambia
   de valor en tokens.css según data-theme, y un background-image dentro de
   una regla que no aplica al elemento actual NO se descarga — a diferencia
   de dos <img> con src fijo, que el parser pediría los dos siempre, sin
   importar cuál quede oculto por CSS. */
.masthead__crest {
	display: block;
	height: clamp(1.6rem, 4vh, 2rem);
	aspect-ratio: 1 / 1;
	flex: none;
	background: var(--crest) center / contain no-repeat;
}

/* Botón "Menú" con dos hairlines de oro que se separan al hover */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.4em 0;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--paper);
}
.menu-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 26px;
}
.menu-toggle__bars i {
	display: block;
	height: 1px;
	background: var(--accent);
	transition: transform var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
	width: 100%;
}
.menu-toggle:hover .menu-toggle__bars i:last-child { width: 60%; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(2.5px) rotate(8deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child  { transform: translateY(-2.5px) rotate(-8deg); width: 100%; }

/* --- MENÚ OVERLAY --------------------------------------------------------- */
.menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--ink-2);
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: clamp(1rem, 2.2vh, 1.75rem) var(--gutter) var(--s6);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.menu.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--dur) var(--ease);
}
.menu__top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: clamp(2rem, 4vh, 3rem);
}
.menu__body {
	align-self: center;
	display: grid;
	gap: clamp(2rem, 6vh, 4rem);
	grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
	.menu__body { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.menu__side { display: grid; gap: clamp(2rem, 5vh, 3rem); align-content: space-between; }
.menu-close__x { color: var(--accent); font-size: 1.1em; line-height: 1; }
.menu__list { display: grid; gap: clamp(0.4rem, 1.6vh, 1rem); }
.menu__item {
	opacity: 0;
	transform: translateY(0.6em);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	transition-delay: 0ms;
}
.menu.is-open .menu__item {
	opacity: 1;
	transform: none;
	transition-delay: calc(120ms + var(--i, 0) * var(--stagger));
}
.menu__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6em;
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: 1.05;
	color: var(--paper);
	transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.menu__link .n {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--accent);
	letter-spacing: 0.1em;
}
.menu__link:hover, .menu__link:focus-visible { color: var(--accent-hi); gap: 1.1em; }
.menu__areas {
	display: grid;
	gap: 0.55em;
	border-top: 1px solid var(--hairline);
	padding-top: var(--s3);
}
.menu__area {
	display: flex;
	align-items: baseline;
	gap: 0.8em;
	font-family: var(--font-serif);
	font-size: var(--step-1);
	color: var(--paper-dim);
	transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.menu__area .n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); }
.menu__area:hover, .menu__area:focus-visible { color: var(--paper); gap: 1.2em; }
.menu__meta {
	align-self: end;
	display: grid;
	gap: 0.4em;
	color: var(--muted);
}

/* --- ACCIONES FLOTANTES (contacto directo + cambio de tema) ----------------
   Columna anclada abajo a la derecha. En reposo cada botón es un cuadrado de
   filete de 1px: nada de círculos rellenos con el color de cada marca, que
   romperían la sobriedad de la página y competirían con el acento.
   Al hover/foco el filete y el icono pasan al acento y la etiqueta mono se
   despliega hacia la izquierda — la columna está anclada a la derecha, así que
   el ancho extra crece hacia dentro y no desborda la ventana.
   Va en --z-rail: por encima del contenido, y por debajo del masthead y del
   overlay de menú, que deben poder taparlo. */
.acciones {
	position: fixed;
	right: clamp(0.9rem, 2vw, 1.6rem);
	bottom: clamp(0.9rem, 2vw, 1.6rem);
	z-index: var(--z-rail);
	display: grid;
	gap: 0.6rem;
	justify-items: end;
}
.accion {
	display: inline-flex;
	align-items: center;
	height: 2.75rem; /* 44px: objetivo táctil mínimo */
	padding-inline: 0.78rem;
	background: color-mix(in oklch, var(--ink) 82%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--hairline);
	color: var(--muted);
	cursor: pointer;
	transition:
		color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		background var(--dur-fast) var(--ease);
}
.accion:hover, .accion:focus-visible {
	color: var(--accent);
	border-color: var(--accent-soft);
	background: color-mix(in oklch, var(--ink) 92%, transparent);
}
.accion__icon { display: block; width: 1.15rem; height: 1.15rem; flex: none; }
/* Sin `display` aquí a propósito: lo da el reset (svg { display: block }), que
   tiene menos especificidad que .accion__luna/.accion__sol y deja que esas
   reglas puedan ocultar el icono que no toca. Con `display: block` en este
   selector (0,1,1) ganaba siempre y se veían los dos iconos a la vez. */
.accion__icon svg { width: 100%; height: 100%; }
.accion__label {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	white-space: nowrap;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-width var(--dur) var(--ease),
		opacity var(--dur-fast) var(--ease),
		margin-right var(--dur) var(--ease);
}
.accion:hover .accion__label,
.accion:focus-visible .accion__label {
	max-width: 9rem;
	opacity: 1;
	margin-right: 0.7rem;
}

/* Se muestra el icono del modo AL QUE se cambia: sol sobre tema oscuro, luna
   sobre tema claro. */
.accion__luna { display: none; }
:root[data-theme="light"] .accion__sol  { display: none; }
:root[data-theme="light"] .accion__luna { display: block; }

/* Sin JS el botón de tema no puede hacer nada, así que no se anuncia. */
.no-js .accion--tema { display: none; }

/* Crossfade al cambiar de tema. theme.js pone esta clase en el <html> solo
   durante el cambio y la quita al terminar: fuera de ese instante el sitio no
   arrastra ninguna transición global. Los degradados (velos de las fotos) no
   son animables y saltan; el resto de superficies y textos sí funden. */
.tema-en-transicion,
.tema-en-transicion *,
.tema-en-transicion *::before,
.tema-en-transicion *::after {
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		fill var(--dur-fast) var(--ease),
		stroke var(--dur-fast) var(--ease) !important;
}

/* --- ENLACE-FLECHA (CTA global) ------------------------------------------- */
.link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--paper);
	position: relative;
	width: fit-content;
	padding-bottom: 0.35em;
	transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.link .arrow { color: var(--accent); transition: transform var(--dur-fast) var(--ease); }
.link:hover, .link:focus-visible { gap: 1em; color: var(--accent-hi); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(0.3em); }

/* --- HERO (portada) ------------------------------------------------------- */
.hero {
	min-height: 100svh;
	display: grid;
	/* minmax(0, 1fr) y no el `auto` implícito: el titular lleva nowrap, así que
	   su ancho mínimo de contenido es enorme y con una pista `auto` la columna
	   crecía hasta él, arrastrando al hero fuera del viewport (396px de columna
	   dentro de una pantalla de 360). Peor todavía, fitTitle() mide
	   container.clientWidth para decidir cuánto encoger la letra: al medir la
	   columna YA inflada por el propio titular, ajustaba el texto a 396 en vez
	   de a 320 y el bucle se estabilizaba desbordado. overflow-x: hidden del
	   body ocultaba la barra de scroll, así que el texto simplemente aparecía
	   cortado por la derecha sin ningún síntoma visible. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: clamp(2.5rem, 7vh, 5rem);
	padding-block: clamp(7.5rem, 17vh, 12rem) clamp(3.5rem, 9vh, 6rem);
	text-align: center;
}

/* Imagen de fondo del hero (portada) — sutil, con un zoom lentísimo tipo
   "Ken Burns". La imagen vive en /assets/img/hero/biblioteca.webp; para
   cambiarla basta reemplazar ese archivo. La intensidad NO se toca aquí:
   depende del tema (sobre papel hay que subirla, porque una foto tenue sobre
   blanco desaparece) y vive en --hero-img-opacity, en tokens.css. */
.hero--image {
	position: relative;
	isolation: isolate;
	/* El Ken Burns escala SOLO la capa de imagen (::before) hasta 1.06, y el
	   velo (::after) se queda a escala 1: sin recortar, la foto se desborda un
	   3% del alto por arriba y por abajo, fuera del velo, y deja una franja de
	   imagen cruda pegada al borde del hero (más clara que el fondo sobre
	   tinta, más oscura sobre papel).
	   No sirve `overflow: clip` a secas —como en .hero-equipo— porque aquí los
	   pseudo-elementos miden 100vw a propósito para ir a sangre, y recortar en
	   horizontal los encajaría en el ancho de .wrap. `visible clip` es la única
	   combinación permitida con visible: deja pasar el sangrado lateral y
	   recorta solo el desborde vertical, que es el que molesta. */
	overflow: visible clip;
}
.hero--image::before,
.hero--image::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	pointer-events: none;
}
.hero--image::before {
	z-index: -2;
	background: url("/assets/img/hero/biblioteca.webp?v=202607221212") center / cover no-repeat;
	opacity: var(--hero-img-opacity);
}
@keyframes hero-kenburns {
	from { transform: translateX(-50%) scale(1); }
	to   { transform: translateX(-50%) scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
	.hero--image::before {
		animation: hero-kenburns 28s var(--ease-io) infinite alternate;
		will-change: transform;
	}
}
.hero--image::after { /* viñeta: funde la imagen en la tinta y protege la legibilidad */
	z-index: -1;
	background:
		radial-gradient(120% 75% at 50% 42%, transparent 0%, color-mix(in oklch, var(--ink) 45%, transparent) 68%, var(--ink) 100%),
		linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}
.hero__masthead-line {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}
.hero__masthead-line .dot { color: var(--accent); }
/* min-width: 0 por el mismo motivo que la pista del hero: sin él este grid
   anidado vuelve a tomar el ancho mínimo del titular nowrap y lo propaga. */
.hero__center { align-self: center; display: grid; justify-items: center; gap: clamp(2.4rem, 6vh, 4rem); min-width: 0; }
.hero__center > * { min-width: 0; max-width: 100%; }
.hero__title {
	font-size: var(--step-5);
	line-height: 0.98;
	letter-spacing: -0.02em;
}
.hero__title em { font-style: italic; color: var(--accent); }
/* Cascada de letras del hero — ambiental, cada tanto: una onda breve sube y
   baja letra a letra (transform puro, sin JS por frame) y luego descansa el
   resto del ciclo antes de repetir. reveal.js divide el título en .ch.
   .line__in ya es, por diseño, cada una de las dos líneas del titular
   ("Su aliado legal," / "en cada paso.") — nowrap garantiza que cada
   una se mantenga como una sola línea sin importar el ancho de pantalla ni
   cambios futuros de texto (lo tolera el tamaño de letra fluido de --step-5).
   .chword agrupa cada palabra (con su puntuación pegada) para que, si algún
   día se quita el nowrap de la línea, el salto solo pueda caer entre
   palabras y nunca a mitad de una. */
.hero__title .line__in { white-space: nowrap; }
.hero__title .chword { display: inline-block; white-space: nowrap; }
.hero__title .ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	@keyframes letter-wave {
		0%, 92%, 100% { transform: translateY(0); }
		3% { transform: translateY(-0.14em); }
		6% { transform: translateY(0); }
	}
	.js .hero__title .ch {
		animation: letter-wave 9s var(--ease) infinite;
		animation-delay: calc(var(--i, 0) * 45ms);
	}
}
.hero__lead {
	font-size: var(--step-1);
	line-height: 1.45;
	color: var(--paper-dim);
	max-width: 50ch;
	margin-inline: auto;
	text-align: justify;
	text-align-last: center;
}
.hero__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s4);
}
.hero__lema {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--font-mono);
	font-size: var(--step--2);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}
.scroll-cue .arrow {
	display: inline-block;
	color: var(--accent);
	font-size: 1.1em;
	line-height: 1;
	animation: cue-bounce 1.8s var(--ease) infinite;
}
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.3em); } }

/* --- SUMARIO (índice editorial centrado de las 6 áreas) ------------------- */
.sumario { display: grid; }
.sumario__head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--s3); flex-wrap: wrap;
	border-bottom: 1px solid var(--hairline);
	padding-bottom: var(--s3);
	margin-bottom: var(--s4);
}
/* Variante centrada de cabecera (portada / servicios) */
.sumario__head--center {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s5); gap: var(--s2);
}
.sumario__title { font-size: var(--step-2); }

.sumario__list { border-top: 1px solid var(--hairline); }
.sumario__row {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	text-align: center;
	padding-block: clamp(1.8rem, 4vh, 3rem);
	border-bottom: 1px solid var(--hairline);
}
.sumario__row::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--dur) var(--ease);
}
.sumario__row:hover::after, .sumario__row:focus-visible::after { transform: scaleX(1); }

/* Acento dorado en hover — no un relleno permanente: mantiene la paridad
   visual de las seis áreas en reposo y solo aporta color al interactuar.
   Mismo halo de --accent-ghost que ya usa .area__numeral y el marco de
   retratos de los socios. */
.sumario__row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* La clave del corte anterior no era el tamaño de la caja sino el radio:
	   con rx al 120% del ancho, en el borde de la fila el degradado seguía
	   teniendo color y se cortaba en seco contra el gutter. Con rx al 52% ya
	   ha llegado a transparente mucho antes del borde, así que se disuelve
	   solo y nunca hay filo. Se resuelve dentro de la caja a propósito: un
	   100vw aquí desbordaría el ancho de contenido y, con la barra de scroll,
	   puede provocar scroll horizontal. */
	background: radial-gradient(52% 130% at 50% 50%, var(--accent-ghost), transparent 72%);
	opacity: 0;
	/* Arranca comprimido contra el centro y se abre hacia los lados, en el
	   mismo gesto que el filete de oro de ::after (que ya hace scaleX desde
	   el centro): los dos crecen a la vez desde el eje de la fila. */
	transform: scaleX(0.3);
	transform-origin: center;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	pointer-events: none;
}
.sumario__row:hover::before,
.sumario__row:focus-visible::before {
	opacity: 1;
	transform: scaleX(1);
}

.sumario__icon {
	line-height: 0;
	margin-bottom: var(--s1);
	color: var(--muted);
	transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.sumario__icon svg {
	width: clamp(2.8rem, 4.6vw, 3.8rem);
	height: clamp(2.8rem, 4.6vw, 3.8rem);
	display: block;
}
.sumario__row:hover .sumario__icon,
.sumario__row:focus-visible .sumario__icon { transform: translateY(-3px); color: var(--accent); }
.sumario__num {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--accent);
	letter-spacing: 0.22em;
}
.sumario__name {
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: 1.02;
	color: var(--paper);
	transition: color var(--dur-fast) var(--ease);
}
.sumario__row:hover .sumario__name,
.sumario__row:focus-visible .sumario__name { color: var(--accent-hi); }
.sumario__glyph { color: var(--accent); font-style: italic; margin-left: 0.15em; }
.sumario__lead {
	font-size: var(--step-0);
	color: var(--muted);
	max-width: 52ch;
	text-wrap: balance;
	transition: color var(--dur-fast) var(--ease);
}
.sumario__row:hover .sumario__lead { color: var(--paper-dim); }
.sumario__verb {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--muted);
	margin-top: 0.2em;
	transition: color var(--dur-fast) var(--ease);
}
.sumario__verb .arrow { color: var(--accent); display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.sumario__row:hover .sumario__verb { color: var(--paper); }
.sumario__row:hover .sumario__verb .arrow { transform: translateX(0.4em); }

/* --- DECLARACIÓN (.statement) + iluminación palabra a palabra al scroll ----
   Texto display centrado y balanceado (estilo de la sección de servicios).
   Las palabras pasan de tenue (--faint) a papel cuando el bloque entra en el
   viewport, y vuelven a apagarse al salir: el efecto funciona bajando y subiendo.
   reveal.js divide el texto en palabras .w y alterna la clase .lit (IntersectionObserver). */
.statement {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.25;
	font-weight: 360;
	letter-spacing: -0.01em;
	text-align: center;
	text-wrap: balance;
	max-width: 30ch;
	margin-inline: auto;
}
.manifesto { text-align: center; }
.manifesto__kicker { margin-bottom: var(--s4); }

/* Iluminación continua: reveal.js mide la posición real de cada palabra en
   cada frame de scroll y escribe --lit (0 a 1) según qué tan cerca está del
   centro vertical del viewport. Nada de disparo único ni clases de
   dirección: al ser una función directa de la posición, avanza o retrocede
   sola según hacia dónde se scrollee, y se apaga sola cerca del borde
   superior o inferior. */
.js .statement .w,
.js .pull__text .w {
	--lit: 0;
	color: color-mix(in oklch, var(--paper) calc(var(--lit, 0) * 100%), var(--faint));
}
.js .statement .w--accent,
.js .pull__text .w--accent {
	color: color-mix(in oklch, var(--accent) calc(var(--lit, 0) * 100%), var(--faint));
}
/* Respaldo sin scroll-tracking (reduced-motion / sin IntersectionObserver):
   reveal.js solo añade .lit, sin animar --lit. */
.js .statement.lit .w,
.js .pull__text.lit .w { --lit: 1; }

/* --- SOCIOS (teaser editorial) -------------------------------------------- */
.socios { display: grid; gap: 0; }
.socio {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s2);
	padding-block: var(--s5);
	border-top: 1px solid var(--hairline);
}
.socio:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 52rem) {
	.socio { grid-template-columns: 1fr 1.1fr; gap: var(--s5); align-items: start; }
}
.socio__role { color: var(--accent); }
.socio__name { font-size: var(--step-3); line-height: 1; margin-block: 0.3em 0.4em; }
.socio__cred { color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.7; }
.socio__bio { color: var(--paper-dim); max-width: 48ch; }

/* Variante con retrato: cada socio es una columna vertical centrada
   (cargo · foto · nombre · formación · línea · bio). Los dos van lado a lado. */
.socio--portrait {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0; /* anula el gap heredado de .socio; el ritmo lo dan los márgenes */
	border: 0;
	padding-block: var(--s4) 0;
}
.socio--portrait .socio__name { margin-block: 0 0.4em; }
.socio__photo {
	height: clamp(12rem, 24vh, 18rem);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* Los retratos van recortados sobre fondo transparente, y casi todos
	   visten de oscuro: el borde del saco (p. ej. azul marino rgb(20,32,56))
	   contra la tinta (rgb(14,14,13)) no tiene contraste suficiente y la
	   silueta se pierde — parece que la foto estuviera cortada por los lados
	   cuando en realidad está completa. drop-shadow sigue el contorno real
	   del canal alfa, así que basta un filo tenue para separarla del fondo.
	   El filo solo sirve sobre tinta: sobre papel la silueta oscura ya
	   contrasta sola y lo que hace falta es sombra, no halo — por eso el
	   valor vive en --photo-halo y cambia con el tema (ver tokens.css). */
	filter: var(--photo-halo);
}
/* Marco "lámina grabada" tras el retrato — halo + marcas de esquina, mismo
   vocabulario que el numeral gigante de .area__numeral. No toca la foto. */
.socio__photo-frame {
	position: relative;
	display: inline-block;
	margin-block: var(--s3) var(--s4);
}
.socio__photo-frame::before {
	content: "";
	position: absolute;
	inset: -1.6rem;
	z-index: -1;
	background: radial-gradient(closest-side, var(--accent-ghost), transparent 72%);
	pointer-events: none;
}
.socio__photo-frame::after {
	content: "";
	position: absolute;
	inset: -0.9rem;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(var(--accent-soft), var(--accent-soft)) top    left  / 1rem 1px no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) top    left  / 1px 1rem no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) top    right / 1rem 1px no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) top    right / 1px 1rem no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) bottom left  / 1rem 1px no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) bottom left  / 1px 1rem no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) bottom right / 1rem 1px no-repeat,
		linear-gradient(var(--accent-soft), var(--accent-soft)) bottom right / 1px 1rem no-repeat;
}
.socio__rule { /* línea que separa el bloque superior de la bio */
	width: 4rem;
	height: 1px;
	background: var(--accent);
	margin-block: var(--s3);
}
.socio--portrait .socio__bio {
	max-width: 40ch;
	margin-inline: auto;
	text-align: justify;
	text-align-last: center;
}

/* Dos socios en paralelo (portada) */
.socios--duo { gap: clamp(2.5rem, 5vw, 5rem); }
.socios--duo .socio { border: 0; } /* sin la línea de .socio:last-child (mayor especificidad) */
@media (min-width: 52rem) {
	.socios--duo { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* --- PULL-QUOTE (cita a sangre) ------------------------------------------- */
/* Medida en rem, no en ch: `ch` se resolvía contra el tamaño de fuente de
   este contenedor (el del cuerpo, ~18px) y no contra el de .pull__text
   (~41px), así que "32ch" daba un bloque de la mitad de ancho de lo que
   sugiere — angosto y muy alto. */
.pull {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
	position: relative;
}
.pull__mark {
	font-family: var(--font-display);
	font-size: var(--step-4);
	line-height: 0.5;
	color: var(--accent);
	display: block;
	margin-bottom: var(--s2);
}
.pull__text {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.22;
	font-weight: 360;
	letter-spacing: -0.012em;
	text-wrap: balance;
}
.pull__cite {
	margin-top: var(--s4);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --- COLOFÓN (footer) ----------------------------------------------------- */
.colophon {
	background: var(--ink-3);
	border-top: 1px solid var(--hairline);
	padding-block: var(--s6) var(--s4);
}
.colophon__grid {
	display: grid;
	gap: var(--s5);
	grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
	.colophon__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s4); }
}
.colophon__brand .display { font-size: var(--step-2); line-height: 1.05; }
.colophon__brand .amp { color: var(--accent); }
.colophon__motto { color: var(--muted); max-width: 30ch; margin-top: var(--s3); font-style: italic; }
.colophon__col h3 {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--tracking-mono);
	color: var(--accent);
	font-weight: 400;
	margin-bottom: var(--s2);
}
.colophon__col p, .colophon__col a { color: var(--paper-dim); display: block; line-height: 1.7; }
.colophon__col a:hover { color: var(--accent-hi); }
.colophon__bottom {
	display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
	margin-top: var(--s6);
	padding-top: var(--s3);
	border-top: 1px solid var(--hairline);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted);
}
.colophon__bottom a:hover { color: var(--accent-hi); }

/* ===========================================================================
   REVELADO (progressive enhancement)
   - Sin JS: todo visible (las reglas .js gobiernan el estado oculto).
   - Con JS: reveal.js añade .is-in cuando el elemento entra en viewport.
   - prefers-reduced-motion: estados finales, sin transform/opacidad animada.
   =========================================================================== */

/* Reveal por máscara línea a línea (titulares). */
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line__in { display: block; will-change: transform; }
.js .reveal-lines .line__in {
	transform: translateY(110%);
	transition: transform var(--dur) var(--ease);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal-lines.is-in .line__in { transform: none; }

/* Reveal genérico (fade + subida). */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(1.4rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .reveal-lines .line__in,
	.js [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
	.scroll-cue .arrow { animation: none; }
	.js .statement .w, .js .pull__text .w { color: var(--paper); }
	/* La etiqueta sigue apareciendo al hover, pero sin deslizamiento. */
	.accion, .accion__label { transition: none; }
	/* El halo del sumario aparece ya extendido: se funde, no se abre. */
	.sumario__row::before,
	.sumario__row:hover::before,
	.sumario__row:focus-visible::before { transform: scaleX(1); }
}

/* ===========================================================================
   COMPONENTES DE PÁGINAS INSTITUCIONALES (La Firma, Equipo, Contacto, Privacidad)
   =========================================================================== */

/* --- VALORES / PRINCIPIOS (portada) ---------------------------------------
   Van centrados como el resto de la portada: el filete superior hace de
   cabecera de columna y todo lo que cuelga de él se alinea al mismo eje. */
.valores { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .valores { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.valor { border-top: 1px solid var(--hairline); padding-top: var(--s3); text-align: center; }
.valor__n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: 0.1em; }
.valor__h { font-size: var(--step-2); margin: var(--s2) 0; }
.valor__p { color: var(--paper-dim); max-width: 32ch; margin-inline: auto; }

/* --- EQUIPO (reutiliza .socio de la home) --------------------------------- */
.equipo__group { margin-top: var(--s6); }
.equipo__group-label { margin-bottom: 0; }
.socio__group-tag { color: var(--accent); }

/* --- LÁMINA (foto grupal de estudio, con fondo claro) ---------------------
   Esta foto no tiene recorte: su fondo es la pared blanca del estudio, y
   quitárselo degradaba la imagen y se comía el nombre de la firma en dorado
   —que es justo lo que vale de ella—. En vez de pelear con el fondo, se
   asume como lo que es: una lámina fotográfica montada sobre la tinta.

   Dos tratamientos hacen que no choque:
   1. El filtro atempera el blanco puro hacia el hueso de la paleta (--paper)
      y baja el brillo, para que no deslumbre contra el fondo oscuro.
   2. Las máscaras lineales disuelven SOLO los bordes; el centro queda
      intacto. Se usan dos gradientes cruzados en vez de uno radial porque
      un radial recortaría a las personas de los extremos. */
/* --- HERO DE EQUIPO (foto grupal a sangre) --------------------------------
   La foto va en un <picture> real, no como background-image, por tres
   motivos: el navegador descarga SOLO el archivo del formato que toca, la
   imagen lleva alt (cuenta como contenido, no decoración) y se puede marcar
   con fetchpriority para que cargue cuanto antes al ser lo primero que se ve.

   Hay dos encuadres hechos a medida (art direction), porque una sola foto no
   puede servir a 2:1 y a 9:16 sin recortes desastrosos: la panorámica lleva
   a los cinco con el letrero dorado del estudio, y la vertical a los dos
   socios fundadores, que es lo que cabe con los rostros legibles en un
   teléfono.

   El titular se alinea abajo a propósito: ahí ambas fotos son torsos y
   sillas, así que el texto claro se lee sin tapar ninguna cara. */
.hero-equipo {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: grid;
	align-items: end;
	padding-block: clamp(8rem, 20vh, 12rem) clamp(2.5rem, 6vh, 4rem);
	overflow: clip;
}
.hero-equipo__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	pointer-events: none;
}
.hero-equipo__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	/* Atempera el blanco de estudio hacia la paleta y baja el brillo para que
	   no deslumbre contra la tinta del resto de la página. */
	filter: var(--photo-filter);
}
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
	.hero-equipo__foto img {
		animation: hero-zoom 34s var(--ease-io) infinite alternate;
		will-change: transform;
	}
}
.hero-equipo::after {
	/* Doble función: protege la legibilidad del titular sobre los trajes y
	   funde el pie de la foto con la tinta del resto de la página. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		var(--veil-hero),
		linear-gradient(90deg, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%);
}
.hero-equipo__inner {
	display: grid;
	justify-items: center;
	gap: clamp(1.2rem, 3vh, 2rem);
	text-align: center;
}
.hero-equipo__title {
	font-size: var(--step-4);
	line-height: 1.0;
	letter-spacing: -0.02em;
	max-width: 15ch;
}
.hero-equipo__title em { font-style: italic; color: var(--accent); }

/* --- TESTIMONIOS (carrusel de citas de clientes, sobre foto a sangre) -----
   Misma técnica que .hero-equipo: foto real en <picture>, overlay de
   degradado para legibilidad, contenido centrado. A diferencia del hero de
   equipo, aquí el degradado funde hacia --ink arriba Y abajo (esta sección
   vive a media página, no al inicio). Las 3 citas se apilan en la misma
   celda de grid (grid-area 1/1) y alternan opacidad — así el bloque se
   autoajusta a la altura de la más larga sin saltos de layout entre citas
   de longitud muy distinta. */
.testimonios {
	position: relative;
	isolation: isolate;
	overflow: clip;
	min-height: clamp(28rem, 62vh, 44rem);
	display: grid;
	align-items: center;
}
.testimonios__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	pointer-events: none;
}
.testimonios__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: var(--photo-filter);
}
@media (prefers-reduced-motion: no-preference) {
	.testimonios__foto img {
		animation: hero-zoom 34s var(--ease-io) infinite alternate;
		will-change: transform;
	}
}
.testimonios::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		var(--veil-band),
		linear-gradient(90deg, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%);
}
.testimonios__inner { padding-block: clamp(3rem, 8vh, 5rem); }

.testimonios__track { display: grid; }
.testimonio {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
}
.testimonio.is-active { opacity: 1; pointer-events: auto; }
.pull--photo { padding-block: clamp(1rem, 3vh, 2rem); }
/* Texto propio (no .pull__text): ese selector lo toma reveal.js para el
   efecto "lumina" de iluminación palabra a palabra ligado al scroll
   (ver .js .pull__text .w más arriba), pensado para la cita fija de la
   página. Aquí el bloque ya cambia de opacidad con el propio carrusel
   (.testimonio/.is-active) y necesita leerse completo de inmediato, sin
   competir con un segundo sistema de opacidad por palabra. */
.testimonio__text {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.22;
	font-weight: 360;
	letter-spacing: -0.012em;
	text-wrap: balance;
	text-shadow: 0 2px 28px color-mix(in oklch, var(--ink) 55%, transparent);
}

.testimonio__cite { margin-top: var(--s4); display: grid; gap: 0.3em; }
.testimonio__cite-name { font-family: var(--font-serif); font-size: var(--step-0); color: var(--paper); }
.testimonio__cite-role { color: var(--paper-dim); }

.testimonios__controls {
	margin-top: var(--s5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s4);
}
.testimonios__arrow {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--accent);
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1;
	padding: 0.2em;
	transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.testimonios__arrow:hover, .testimonios__arrow:focus-visible { color: var(--accent-hi); }
.testimonios__arrow--prev:hover, .testimonios__arrow--prev:focus-visible { transform: translateX(-0.25em); }
.testimonios__arrow--next:hover, .testimonios__arrow--next:focus-visible { transform: translateX(0.25em); }

.testimonios__dots { display: flex; align-items: center; gap: 0; }
/* El punto que se ve es el ::before; el <button> es una caja de 2.25rem para
   que el objetivo táctil sea real. Cuando el botón MEDÍA lo que el punto, el
   blanco eran 10px de alto: prácticamente imposible de acertar con el dedo. */
.testimonios__dot {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.testimonios__dot::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	/* El filete normal se pierde sobre la foto: aquí el borde sigue al color
	   del texto, que por definición contrasta con el velo en los dos temas. */
	border: 1px solid color-mix(in oklch, var(--paper) 45%, transparent);
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.testimonios__dot[aria-current="true"]::before { background: var(--accent); border-color: var(--accent); }

/* --- FORMULARIO ----------------------------------------------------------- */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s1); }
.field label {
	font-family: var(--font-mono); font-size: var(--step--2);
	text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}
.field input, .field textarea {
	background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
	color: var(--paper); font-family: var(--font-serif); font-size: var(--step-1);
	padding: var(--s2) 0; transition: border-color var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.form__note { color: var(--muted); font-size: var(--step--1); }
.btn {
	justify-self: start; display: inline-flex; align-items: center; gap: 0.8em;
	background: transparent; border: 1px solid var(--accent); color: var(--paper);
	font-family: var(--font-mono); font-size: var(--step--1);
	text-transform: uppercase; letter-spacing: 0.18em;
	padding: var(--s2) var(--s4); cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--accent); color: var(--ink); gap: 1.2em; }
.btn .arrow { color: inherit; }

/* Segunda vía de envío: mismo peso tipográfico, menos jerarquía cromática,
   para que las dos opciones convivan sin competir. */
.btn--ghost { border-color: var(--hairline-2); color: var(--paper-dim); }
.btn--ghost:hover, .btn--ghost:focus-visible {
	background: transparent; border-color: var(--accent); color: var(--accent);
}

/* El formulario también va centrado y en medida de lectura. */
.form--centrado { max-width: 42rem; margin-inline: auto; }
.form__acciones { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.form--centrado .form__note { text-align: center; }

/* --- CONTACTO -------------------------------------------------------------
   Composición centrada en una sola columna, como el resto del sitio: los
   datos del despacho se leen como una faja de colofón entre dos filetes, y
   debajo van el formulario y el mapa, cada uno en su propia medida. */
.contacto__details {
	display: grid;
	gap: var(--s4) var(--s3);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	border-block: 1px solid var(--hairline);
	padding-block: var(--s4);
}
.detail { display: grid; gap: 0.45em; align-content: start; justify-items: center; text-align: center; }
.detail__label {
	font-family: var(--font-mono); font-size: var(--step--2);
	text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--accent);
}
/* --step-0 y no --step-1: repartidos en cinco columnas, el cuerpo grande
   obligaba a la dirección a romperse en demasiadas líneas. */
.detail a, .detail p { font-size: var(--step-0); color: var(--paper); line-height: 1.5; }
.detail a:hover { color: var(--accent-hi); }

/* --- MAPA -----------------------------------------------------------------
   Antes ocupaba el ancho completo a 16/10, es decir media pantalla de alto
   para un dato que es de referencia. Aquí va en su propia medida y con un
   formato apaisado, con el pie como cualquier otra lámina del sitio. */
.mapa { display: grid; gap: var(--s2); max-width: 58rem; margin-inline: auto; }
.map {
	border: 1px solid var(--hairline);
	width: 100%;
	aspect-ratio: 2.6 / 1;
	filter: var(--map-filter);
}
@media (max-width: 40rem) { .map { aspect-ratio: 4 / 3; } }
.mapa__pie {
	font-family: var(--font-mono);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--muted);
	text-align: center;
}
.mapa__pie a { color: var(--accent); }
.mapa__pie a:hover { color: var(--accent-hi); }

/* Justificado con última línea centrada. Existe como clase porque se repite
   en varias páginas; antes iba suelto en atributos style, donde no había
   forma de corregirlo por media query (un estilo en línea gana a todo). */
.justificado { text-align: justify; text-align-last: center; }

/* --- AJUSTES DE PANTALLA ESTRECHA -----------------------------------------
   Detalles que solo se notan con el teléfono en la mano. */
@media (max-width: 40rem) {
	/* El justificado necesita líneas largas para repartir bien el sobrante:
	   con tres o cuatro palabras por línea abre ríos enormes entre ellas y el
	   párrafo se lee a saltos. Centrado mantiene el gesto sin los huecos. */
	.hero__lead,
	.socio--portrait .socio__bio,
	.justificado { text-align: center; }

	/* El lema del hero cae SIEMPRE en el mismo punto —el hero mide 100svh—, y
	   ese punto es justo donde están las acciones flotantes: con su tracking
	   ancho, las últimas letras quedaban permanentemente debajo de ellas. No
	   basta con que sea un solapamiento pasajero, porque aquí nunca pasa. */
	.hero__lema { font-size: var(--step--2); letter-spacing: 0.14em; }

	/* Misma razón en el pie: es lo último de la página, así que la fila final
	   se queda para siempre bajo el botón inferior si no se le da suelo. */
	.colophon { padding-bottom: calc(var(--s4) + 4rem); }
}

/* --- OBJETIVOS TÁCTILES ---------------------------------------------------
   Con el dedo, varios enlaces del sitio se quedaban muy por debajo de los
   ~44px recomendados: los datos de contacto (24px), los enlaces del colofón
   (27px), los CTA de flecha (25px), el botón de menú (30px) y la marca del
   masthead (20px). Todos crecen aquí por padding, no por tamaño de letra ni
   por separación visible: el dibujo de la página no cambia, solo la zona
   sensible al toque.
   La condición combina puntero grueso Y ventana estrecha a propósito: cubre
   el móvil y la tablet aunque el navegador no reporte bien el tipo de
   puntero, y no engorda nada en escritorio. */
@media (pointer: coarse), (max-width: 52rem) {
	.masthead__brand { padding-block: 0.6em; }
	.menu-toggle { padding-block: 0.75em; }
	/* .link crece SOLO hacia arriba: su filete de oro vive pegado al borde
	   inferior (::after { bottom: 0 }), y con padding-bottom se despegaría
	   del texto en lugar de subrayarlo. */
	.link { padding-top: 0.9em; }
	.scroll-cue { padding-block: 0.7em; }
	.detail a { padding-block: 0.4em; }
	/* :not(.link) es necesario: .colophon__col a (0,1,1) gana a .link (0,1,0)
	   y le pisaba el padding-top de arriba, dejando el CTA del colofón en 30px
	   mientras el resto de .link llegaba a 36. */
	.colophon__col a:not(.link) { padding-block: 0.35em; }
	/* Estos dos van en tipografía micro (--step--2), así que un padding en em
	   rinde poco: necesitan bastante más para llegar a un objetivo decente. */
	.colophon__bottom a { padding-block: 0.9em; }
	.mapa__pie a { padding-block: 0.8em; }
	.menu__area { padding-block: 0.3em; }
	.testimonios__arrow { padding: 0.5em; }
}

/* --- PROSE (Privacidad / textos legales) ---------------------------------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin: var(--s5) 0 var(--s2); }
.prose h3 {
	font-family: var(--font-mono); font-size: var(--step--1);
	text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
	margin: var(--s4) 0 var(--s1); font-weight: 400;
}
.prose p { margin-bottom: var(--s2); color: var(--paper-dim); }
.prose ul { display: grid; gap: var(--s1); margin: var(--s2) 0 var(--s3); padding-left: var(--s3); }
.prose li { list-style: disc; color: var(--paper-dim); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.aviso {
	border: 1px solid var(--accent-soft); background: var(--ink-1);
	padding: var(--s3); margin-bottom: var(--s4);
	font-family: var(--font-mono); font-size: var(--step--1); color: var(--paper-dim); line-height: 1.6;
}