/* =========================================================================
   Archivo del Tío — hoja de estilo principal
   v0.3.0 · dirección editorial

   Tres decisiones gobiernan todo lo de abajo:

   1. La fotografía manda. El texto vive sobre la imagen siempre que pueda,
      no debajo en una caja aparte.
   2. Todo está construido en vertical. Los originales del archivo son
      retratos de 1200x1600, así que el sistema usa 3:4 y 4:5 y nunca pide
      un panorámico a sangre que habría que reescalar por encima de su
      resolución real.
   3. El aire se gana, no se regala. El ritmo vertical es deliberadamente
      más corto que en la versión anterior.

   Sin frameworks. Sin dependencias.
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
	/* Superficies */
	--adt-bg:        #0a0a0b;
	--adt-bg-elev:   #131315;
	--adt-bg-sunk:   #060607;

	/* Tinta */
	--adt-ink:       #f2eee7;
	--adt-ink-dim:   #9a948b;
	/* Subido de #67625b en el QA de Sprint C: aquel daba 3,27:1 sobre el
	   fondo y se usa en veinte sitios de texto de 11 y 12 px, todos por
	   debajo del 4,5:1 que pide AA. Mismo matiz cálido, sólo más claro. */
	--adt-ink-faint: #837d74;

	/* Líneas y acento */
	--adt-line:      rgba(242, 238, 231, 0.14);
	--adt-line-soft: rgba(242, 238, 231, 0.07);
	--adt-accent:    #c9a978;

	/* Tipografía. Cambiar aquí para cambiar todo el sitio. */
	--adt-font-display: "Hoefler Text", "Didot", "Bodoni MT", "Playfair Display",
	                    Garamond, "Times New Roman", Georgia, serif;
	--adt-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
	                    "Helvetica Neue", Arial, sans-serif;

	/* Ritmo vertical. V1.1: recortado otro ~12% sobre la primera pasada. */
	--adt-space-section: clamp(2.85rem, 5.25vw, 5.25rem);
	--adt-space-tight:   clamp(1.75rem, 3vw, 2.85rem);

	/* Contenedores */
	--adt-wrap:        1520px;
	--adt-wrap-narrow: 44rem;
	--adt-gutter:      clamp(1.15rem, 3.5vw, 3rem);
	--adt-gap:         clamp(0.85rem, 1.4vw, 1.4rem);

	/* Velos sobre fotografía */
	--adt-scrim-tile: linear-gradient(to top,
		rgba(6, 6, 7, 0.94) 0%,
		rgba(6, 6, 7, 0.70) 20%,
		rgba(6, 6, 7, 0.20) 48%,
		rgba(6, 6, 7, 0.00) 70%);

	/* Movimiento */
	--adt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	color-scheme: dark;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--adt-bg);
	color: var(--adt-ink);
	font-family: var(--adt-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

figure {
	margin: 0;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-family: var(--adt-font-display);
}

p {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
}

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

/* --- 3. Utilidades de layout -------------------------------------------- */

.adt-wrap {
	width: 100%;
	max-width: var(--adt-wrap);
	margin-inline: auto;
	padding-inline: var(--adt-gutter);
}

.adt-wrap--narrow {
	max-width: var(--adt-wrap-narrow);
}

.adt-section {
	padding-block: var(--adt-space-section);
}

.adt-section--tight {
	padding-block: var(--adt-space-tight);
}

/* Dos secciones seguidas no necesitan el doble de aire entre ellas. */
.adt-section + .adt-section {
	padding-top: 0;
}

.adt-main {
	display: block;
	min-height: 40vh;
}

.adt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--adt-ink);
	color: var(--adt-bg);
}

.adt-skip:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* --- 4. Tipografía de sistema ------------------------------------------- */

.adt-eyebrow {
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	margin: 0;
}

.adt-link {
	color: var(--adt-ink-dim);
	transition: color 0.3s var(--adt-ease);
	/* WCAG 2.2 AA 2.5.8 pide 24x24 CSS px. Estos enlaces miden 15-20px de
	   alto por su propia tipografía. En un elemento en línea el relleno
	   vertical NO altera la altura de la línea, así que esto agranda el
	   área pulsable sin mover una sola pieza de la maquetación. */
	padding-block: 0.3rem;
}

.adt-link:hover {
	color: var(--adt-accent);
}

.adt-empty {
	color: var(--adt-ink-dim);
	font-size: 1.0625rem;
	padding-block: 2rem;
}

/* Encabezado de sección: rótulo a la izquierda, salida a la derecha. */
.adt-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-bottom: clamp(1.1rem, 1.8vw, 1.6rem);
	border-bottom: 1px solid var(--adt-line);
	margin-bottom: clamp(1.4rem, 2.4vw, 2.25rem);
}

.adt-section__headings {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.adt-section__title {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.adt-section__more {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	/* 2.5.8: 19px de alto se quedan cortos. Aquí el relleno SÍ empuja,
	   porque es inline-flex, así que el margen negativo lo devuelve a su
	   sitio: el área crece y la cabecera de sección no se mueve. */
	padding-block: 0.4rem;
	margin-block: -0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	white-space: nowrap;
	transition: color 0.3s var(--adt-ease);
}

.adt-section__more:hover {
	color: var(--adt-accent);
}

.adt-section__more span {
	transition: transform 0.35s var(--adt-ease);
}

.adt-section__more:hover span {
	transform: translateX(0.35rem);
}

/* Cabecera de archivo: el título de la página, grande y sin ceremonia. */
.adt-masthead {
	/* El hueco y el aire de abajo se nombran porque la variante con mascota
	   (sección 25) los reutiliza: el texto, envuelto ya en su propia
	   columna, necesita el mismo hueco, y el dibujo se apoya en el filete
	   descontando ese aire. Los valores no cambian. */
	--adt-masthead-gap: clamp(0.7rem, 1.2vw, 1rem);
	--adt-masthead-pb:  clamp(1.25rem, 2.1vw, 2rem);
	padding-block: clamp(2.2rem, 4.4vw, 3.95rem) var(--adt-masthead-pb);
	display: flex;
	flex-direction: column;
	gap: var(--adt-masthead-gap);
	border-bottom: 1px solid var(--adt-line);
	margin-bottom: clamp(1.5rem, 2.6vw, 2.5rem);
}

.adt-masthead__title {
	font-size: clamp(2.6rem, 8vw, 6.5rem);
	line-height: 0.9;
}

.adt-masthead__lede {
	color: var(--adt-ink-dim);
	max-width: 46ch;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
}

.adt-masthead__meta {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

/* --- 5. Botones --------------------------------------------------------- */

.adt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.7rem;
	border: 1px solid var(--adt-ink);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink);
	background: transparent;
	transition: background 0.35s var(--adt-ease), color 0.35s var(--adt-ease),
		border-color 0.35s var(--adt-ease);
}

.adt-btn:hover {
	background: var(--adt-ink);
	color: var(--adt-bg);
}

.adt-btn--ghost {
	border-color: var(--adt-line);
	color: var(--adt-ink-dim);
}

.adt-btn--ghost:hover {
	border-color: var(--adt-ink);
	background: transparent;
	color: var(--adt-ink);
}

/* --- 6. Imagen y placeholder -------------------------------------------- */

.adt-img {
	display: block;
}

/* El hueco vacío no es una imagen: es un degradado con tono derivado del ID
   del contenido, para que dos huecos no se vean idénticos. */
.adt-ph {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 90% at 30% 10%,
			hsl(var(--ph-h, 30) 12% 22%) 0%,
			transparent 60%),
		linear-gradient(155deg,
			hsl(var(--ph-h, 30) 10% 17%) 0%,
			hsl(var(--ph-h, 30) 8% 9%) 100%);
	position: relative;
}

.adt-ph::after {
	content: "";
	position: absolute;
	inset: clamp(0.75rem, 3%, 1.5rem);
	border: 1px solid rgba(242, 238, 231, 0.09);
}

/* --- 7. Cabecera -------------------------------------------------------- */

/* Transparente sobre la fotografía; gana cuerpo al desplazarse. */
.adt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.4s var(--adt-ease), border-color 0.4s var(--adt-ease),
		backdrop-filter 0.4s var(--adt-ease);
}

.adt-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 180%;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(6, 6, 7, 0.72) 0%, rgba(6, 6, 7, 0) 100%);
	transition: opacity 0.4s var(--adt-ease);
}

.adt-header.is-scrolled {
	background: rgba(10, 10, 11, 0.92);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom-color: var(--adt-line-soft);
}

.adt-header.is-scrolled::before {
	opacity: 0;
}

.adt-header__inner {
	position: relative;
	z-index: 1;
	max-width: var(--adt-wrap);
	margin-inline: auto;
	padding: 1rem var(--adt-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.adt-brand {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	font-family: var(--adt-font-display);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	letter-spacing: 0.005em;
	line-height: 1;
}

.adt-brand__line--em {
	font-style: italic;
	color: var(--adt-ink-dim);
	transition: color 0.35s var(--adt-ease);
}

.adt-brand:hover .adt-brand__line--em {
	color: var(--adt-accent);
}

/* La barra envuelve en pantallas estrechas. Sin flex-wrap medía 411 px fijos
   y, con overflow-x:hidden en el body, el último destino quedaba cortado y
   sin forma de alcanzarlo: comprobado a 360 y 390 px, los dos anchos de móvil
   más comunes. Y habría ido a peor, porque la barra gana «Editoriales» y
   «Sesiones» en cuanto se publique la primera pieza de cada una.
   `gap` se parte en los dos ejes para conservar la separación horizontal
   exacta que ya había y añadir sólo la vertical de las filas nuevas. */
.adt-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	min-width: 0;
	column-gap: clamp(1.1rem, 2.5vw, 2rem);
	row-gap: 0.35rem;
}

.adt-nav__link {
	position: relative;
	font-size: 0.7188rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	padding-block: 0.4rem;
	transition: color 0.3s var(--adt-ease);
}

/* El subrayado se dibuja desde el centro: más fino que un borde que aparece. */
.adt-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--adt-accent);
	transform: scaleX(0);
	transition: transform 0.35s var(--adt-ease);
}

.adt-nav__link:hover {
	color: var(--adt-ink);
}

.adt-nav__link:hover::after,
.adt-nav__link.is-current::after {
	transform: scaleX(1);
}

.adt-nav__link.is-current {
	color: var(--adt-ink);
}

/* --- 8. Hero ------------------------------------------------------------ */

/* Retrato dominante anclado a la derecha, tipografía montada encima por la
   izquierda. En móvil el retrato pasa a fondo completo. */
.adt-hero {
	/* El ancho del panel de la fotografía se nombra aquí porque la sección
	   25 necesita saber dónde empieza para no invadirlo. Mismo valor de
	   siempre: esto no cambia nada de lo que ya se pintaba. */
	--adt-hero-panel: min(64%, 1000px);
	position: relative;
	min-height: min(86vh, 900px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--adt-bg-sunk);
	isolation: isolate;
}

.adt-hero__frame {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.adt-hero__media,
.adt-hero__media .adt-ph {
	position: absolute;
	inset: 0;
}

.adt-hero__media .adt-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: saturate(0.88) contrast(1.06);
}

.adt-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top,
			rgba(6, 6, 7, 0.95) 0%,
			rgba(6, 6, 7, 0.62) 26%,
			rgba(6, 6, 7, 0.18) 58%,
			rgba(6, 6, 7, 0.42) 100%);
}

.adt-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.adt-hero__title {
	font-size: clamp(3.4rem, 15vw, 11rem);
	line-height: 0.84;
	letter-spacing: -0.035em;
	display: flex;
	flex-direction: column;
}

.adt-hero__title-line--em {
	font-style: italic;
	color: var(--adt-ink-dim);
	padding-left: 0.1em;
}

.adt-hero__lede {
	max-width: 32ch;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--adt-ink-dim);
}

.adt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.4rem;
}

/* Crédito de la foto, abajo a la derecha, discreto. */
.adt-hero__credit {
	position: absolute;
	z-index: 2;
	right: var(--adt-gutter);
	bottom: clamp(1.1rem, 2vw, 1.75rem);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
	transition: color 0.3s var(--adt-ease);
}

.adt-hero__credit:hover {
	color: var(--adt-ink-dim);
}

/* En pantallas estrechas el crédito compite con los botones por la misma
   esquina. Se cae: el enlace a la modelo ya está a un toque de distancia. */
@media (max-width: 699px) {
	.adt-hero__credit {
		display: none;
	}
}

@media (min-width: 900px) {
	/* El retrato deja de ser fondo y pasa a ser un panel a la derecha. Así se
	   sirve a su resolución real en vez de estirarse a todo el ancho. */
	.adt-hero__frame {
		left: auto;
		right: 0;
		width: var(--adt-hero-panel);
	}

	.adt-hero__scrim {
		background:
			linear-gradient(to right,
				var(--adt-bg) 0%,
				rgba(10, 10, 11, 0.82) 14%,
				rgba(6, 6, 7, 0.10) 52%,
				rgba(6, 6, 7, 0.30) 100%),
			linear-gradient(to top,
				rgba(6, 6, 7, 0.70) 0%,
				rgba(6, 6, 7, 0) 38%);
	}

	.adt-hero__inner {
		padding-block: clamp(3rem, 7vw, 6rem);
	}

	.adt-hero__lede {
		max-width: 28ch;
	}
}

/* --- 9. Rejillas -------------------------------------------------------- */

.adt-grid {
	display: grid;
	gap: var(--adt-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.adt-grid--2,
	.adt-grid--3,
	.adt-grid--4,
	.adt-grid--spread,
	.adt-grid--duo {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Grupos cortos dentro del perfil de modelo.
   Una colección sola en una rejilla de tres queda descolgada a la izquierda
   con dos huecos al lado; en vez de estirarla a todo el ancho, que obligaría
   a recortar el retrato a una tira, se ensancha de proporción y se centra.
   Dos se quedan a media rejilla acotada para que no crezcan hasta monopolizar
   la pantalla. De tres en adelante no se toca nada. */
.adt-grid--solo,
.adt-grid--duo {
	margin-inline: auto;
}

@media (min-width: 900px) {
	.adt-grid--solo {
		max-width: 66%;
	}

	.adt-grid--solo .adt-tile__link {
		aspect-ratio: 4 / 3;
	}

	/* En un retrato el sujeto casi nunca está en el centro geométrico: al
	   recortar a apaisado conviene subir el encuadre. */
	.adt-grid--solo .adt-tile__media .adt-img {
		object-position: 50% 35%;
	}

	.adt-grid--solo .adt-tile__title {
		font-size: clamp(2rem, 3vw, 3.1rem);
	}

	.adt-grid--duo {
		max-width: 1040px;
	}
}

@media (min-width: 900px) {
	.adt-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.adt-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Desfase vertical: rompe la sensación de plantilla sin inventar nada.
   V1.1: a la mitad. Marcaba demasiado y descolgaba la fila. */
@media (min-width: 900px) {
	.adt-grid--stagger > :nth-child(even) {
		margin-top: clamp(0.75rem, 1.8vw, 1.75rem);
	}
}

/* Rejilla editorial de colecciones.
   V1.1: fuera las dos aperturas a media pantalla. Ocupaban un scroll entero
   entre las dos y empujaban el resto fuera de vista. Ahora tres por fila,
   todas del mismo tamaño: la sección es más corta y más densa, y la jerarquía
   la pone el orden, no el tamaño. */
@media (min-width: 900px) {
	.adt-grid--spread {
		grid-template-columns: repeat(12, 1fr);
	}

	.adt-grid--spread > * {
		grid-column: span 4;
	}
}

/* --- 10. Tile: la pieza de imagen con texto encima --------------------- */

/* Una sola primitiva para modelo, colección y plataforma. Cambia el
   contenido, no la mecánica. */
.adt-tile {
	position: relative;
	display: flex;
	flex-direction: column;
}

.adt-tile__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--adt-bg-elev);
	isolation: isolate;
}

.adt-tile__media,
.adt-tile__media .adt-ph {
	position: absolute;
	inset: 0;
}

.adt-tile__media .adt-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.88);
	transition: transform 0.9s var(--adt-ease), filter 0.6s var(--adt-ease);
}

.adt-tile__media .adt-ph {
	transition: transform 0.9s var(--adt-ease);
}

.adt-tile__link:hover .adt-img {
	transform: scale(1.04);
	filter: saturate(1);
}

.adt-tile__link:hover .adt-ph {
	transform: scale(1.035);
}

.adt-tile__scrim {
	position: absolute;
	inset: 0;
	background: var(--adt-scrim-tile);
	transition: opacity 0.5s var(--adt-ease);
}

.adt-tile__link:hover .adt-tile__scrim {
	opacity: 0.88;
}

.adt-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1rem, 1.8vw, 1.75rem);
}

.adt-tile__eyebrow {
	font-family: var(--adt-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
}

.adt-tile__title {
	font-family: var(--adt-font-display);
	font-size: clamp(1.4rem, 2vw, 1.95rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--adt-ink);
	transition: color 0.3s var(--adt-ease);
}

.adt-tile__link:hover .adt-tile__title {
	color: var(--adt-accent);
}

.adt-tile__text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--adt-ink-dim);
	max-width: 40ch;
}

.adt-tile__meta {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

/* Pie fuera del enlace: lleva a otro destino (el perfil de la modelo), y un
   <a> no puede contener otro. */
.adt-tile__caption {
	margin-top: 0.7rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

.adt-tile__caption a {
	color: var(--adt-ink-dim);
	transition: color 0.3s var(--adt-ease);
	/* Mismo motivo que en .adt-link: WCAG 2.2 AA 2.5.8 pide 24x24 CSS px y
	   este pie mide 15px de alto por su tipografía. El relleno vertical de
	   un elemento en línea NO altera la altura de la línea, así que el área
	   crece y la card no se mueve. 0.4rem deja el objetivo en ~28px, con
	   margen: 0.3rem lo dejaría en 24,6 y eso es rozar el umbral.
	   Hacia arriba no invade la pieza: el <p> ya separa 0.7rem. */
	padding-block: 0.4rem;
}

.adt-tile__caption a:hover {
	color: var(--adt-accent);
}

/* Variantes de encuadre */
.adt-tile--tall .adt-tile__link {
	aspect-ratio: 2 / 3;
}

.adt-tile--wide .adt-tile__link {
	aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
	.adt-tile--feature .adt-tile__link {
		aspect-ratio: 4 / 5;
	}

	.adt-tile--feature .adt-tile__title {
		font-size: clamp(2rem, 3vw, 3.1rem);
	}
}

/* El nombre es lo que se busca en un retrato: que pese más que el resto. */
.adt-tile--modelo .adt-tile__title {
	font-size: clamp(1.55rem, 2.3vw, 2.3rem);
}

/* Una plataforma no es una persona y no debería encuadrarse como tal. El 4:3
   la separa de las rejillas de retratos manteniendo la misma familia, y de
   paso baja la escala: más ancha, bastante menos alta. */
.adt-tile--plataforma .adt-tile__link {
	aspect-ratio: 4 / 3;
}

.adt-tile--plataforma .adt-tile__title {
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
}

/* Nombre y recuento son los dos datos del índice: el recuento deja de ser
   letra pequeña apagada. */
.adt-tile--plataforma .adt-tile__meta {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--adt-ink-dim);
}

/* En el archivo de modelos las piezas se servían demasiado grandes en
   pantalla ancha. Se acota la rejilla, no el encuadre: la proporción del
   retrato se respeta y la cabecera sigue a todo el ancho. */
@media (min-width: 1100px) {
	.post-type-archive-modelo .adt-grid--3 {
		max-width: 1200px;
		margin-inline: auto;
	}
}

/* --- 11. Raíl de plataformas ------------------------------------------- */

/* Filas grandes en vez de cards: densidad editorial, cero módulos vacíos. */
.adt-rail {
	border-top: 1px solid var(--adt-line-soft);
}

.adt-rail__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1.5rem;
	padding-block: clamp(1.1rem, 2.2vw, 1.85rem);
	border-bottom: 1px solid var(--adt-line-soft);
	transition: border-color 0.35s var(--adt-ease), padding-left 0.35s var(--adt-ease);
}

.adt-rail__link:hover {
	border-bottom-color: var(--adt-ink-faint);
	padding-left: 0.65rem;
}

.adt-rail__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--adt-font-display);
	font-size: clamp(1.5rem, 3.6vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	transition: color 0.35s var(--adt-ease);
}

.adt-rail__link:hover .adt-rail__name {
	color: var(--adt-accent);
}

.adt-rail__count {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
	white-space: nowrap;
}

.adt-rail__arrow {
	color: var(--adt-ink-faint);
	font-size: 1.1rem;
	transition: transform 0.35s var(--adt-ease), color 0.35s var(--adt-ease);
}

.adt-rail__link:hover .adt-rail__arrow {
	transform: translateX(0.4rem);
	color: var(--adt-accent);
}

/* --- 12. Banda explorar ------------------------------------------------- */

.adt-explore {
	border-block: 1px solid var(--adt-line);
}

.adt-explore__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	max-width: var(--adt-wrap);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 5rem) var(--adt-gutter);
	transition: background 0.5s var(--adt-ease);
}

.adt-explore__link:hover {
	background: var(--adt-bg-elev);
}

.adt-explore__eyebrow {
	flex: 0 0 100%;
}

.adt-explore__title {
	flex: 1 1 auto;
	font-family: var(--adt-font-display);
	font-size: clamp(2.1rem, 6.5vw, 5rem);
	line-height: 0.96;
	letter-spacing: -0.028em;
	transition: color 0.4s var(--adt-ease);
}

.adt-explore__link:hover .adt-explore__title {
	color: var(--adt-accent);
}

.adt-explore__arrow {
	font-size: clamp(1.4rem, 3vw, 2.25rem);
	color: var(--adt-ink-dim);
	transition: transform 0.45s var(--adt-ease), color 0.45s var(--adt-ease);
}

.adt-explore__link:hover .adt-explore__arrow {
	transform: translateX(0.6rem);
	color: var(--adt-accent);
}

/* --- 13. Spread: apertura de modelo y de colección ---------------------- */

/* Mismo mecanismo que el hero, en versión de página interior: retrato grande
   a un lado, tipografía montada al otro. Lo comparten el perfil de modelo y
   la ficha de colección para que el sitio suene a una sola publicación. */
.adt-spread {
	position: relative;
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 3rem);
}

.adt-spread__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--adt-bg-elev);
}

.adt-spread__media .adt-img,
.adt-spread__media .adt-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.adt-spread__body {
	display: flex;
	flex-direction: column;
	gap: clamp(0.8rem, 1.4vw, 1.15rem);
	min-width: 0;
}

.adt-spread__title {
	font-size: clamp(2.6rem, 9vw, 6.5rem);
	line-height: 0.9;
}

.adt-spread__lede {
	font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
	line-height: 1.5;
	color: var(--adt-ink-dim);
	max-width: 38ch;
}

.adt-spread__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
	padding-top: clamp(0.4rem, 1vw, 0.75rem);
	border-top: 1px solid var(--adt-line-soft);
	margin-top: 0.3rem;
}

.adt-spread__meta a {
	color: var(--adt-ink-dim);
	transition: color 0.3s var(--adt-ease);
}

.adt-spread__meta a:hover {
	color: var(--adt-accent);
}

@media (min-width: 900px) {
	.adt-spread {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		align-items: end;
		gap: clamp(2rem, 4vw, 4rem);
		padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 4rem);
	}

	.adt-spread__media {
		order: 2;
		aspect-ratio: 4 / 5;
	}

	.adt-spread__body {
		order: 1;
		padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
	}

	/* La colección abre con la portada a la izquierda: distinta cadencia que
	   el perfil, misma gramática. */
	.adt-spread--cover .adt-spread__media {
		order: 1;
	}

	.adt-spread--cover .adt-spread__body {
		order: 2;
	}
}

/* --- 14. Galería -------------------------------------------------------- */

.adt-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--adt-gap);
}

.adt-gallery--n1 {
	grid-template-columns: 1fr;
}

.adt-gallery__figure {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--adt-bg-elev);
}

.adt-gallery__figure .adt-img,
.adt-gallery__figure .adt-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	transition: transform 0.9s var(--adt-ease), filter 0.6s var(--adt-ease);
}

.adt-gallery__figure:hover .adt-img {
	transform: scale(1.035);
	filter: saturate(1);
}

@media (min-width: 900px) {
	/* Con tres o más piezas, la primera manda: ocupa dos columnas y dos filas,
	   y al hacerlo conserva exactamente el mismo 3:4 que las pequeñas. */
	.adt-gallery--n3,
	.adt-gallery--n4 {
		grid-template-columns: repeat(3, 1fr);
	}

	.adt-gallery--n3 > :first-child,
	.adt-gallery--n4 > :first-child {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	.adt-gallery--n3 > :first-child .adt-gallery__figure,
	.adt-gallery--n4 > :first-child .adt-gallery__figure {
		aspect-ratio: auto;
		height: 100%;
	}

	.adt-gallery--n1 .adt-gallery__figure {
		aspect-ratio: 16 / 9;
	}
}

/* --- 15. Grupos de colecciones por plataforma --------------------------- */

.adt-platgroup + .adt-platgroup {
	margin-top: clamp(2.25rem, 4.5vw, 4rem);
}

.adt-platgroup__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	padding-bottom: 0.85rem;
	margin-bottom: clamp(1.1rem, 2vw, 1.75rem);
	border-bottom: 1px solid var(--adt-line-soft);
}

.adt-platgroup__title {
	font-family: var(--adt-font-display);
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	min-width: 0;
}

.adt-platgroup__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	transition: color 0.3s var(--adt-ease);
}

.adt-platgroup__link:hover {
	color: var(--adt-accent);
}

.adt-platgroup__arrow {
	font-size: 0.8em;
	transition: transform 0.35s var(--adt-ease);
}

.adt-platgroup__link:hover .adt-platgroup__arrow {
	transform: translateX(0.35rem);
}

.adt-platgroup__count {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
	white-space: nowrap;
}

/* Una colección sin plataforma no se esconde: se ve que le falta. */
.adt-platgroup__orphan {
	color: var(--adt-ink-faint);
	font-style: italic;
}

/* --- 16. Llamada a la modelo (ficha de colección) ---------------------- */

.adt-modelo-callout {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.5vw, 1.85rem);
	padding: clamp(0.9rem, 1.8vw, 1.35rem);
	border: 1px solid var(--adt-line);
	transition: border-color 0.4s var(--adt-ease), background 0.4s var(--adt-ease);
}

.adt-modelo-callout:hover {
	border-color: var(--adt-ink-dim);
	background: var(--adt-bg-elev);
}

.adt-modelo-callout__media {
	flex: 0 0 auto;
	width: clamp(68px, 14vw, 96px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--adt-bg-sunk);
}

.adt-modelo-callout__media .adt-img,
.adt-modelo-callout__media .adt-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.adt-modelo-callout__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.adt-modelo-callout__name {
	font-family: var(--adt-font-display);
	font-size: clamp(1.3rem, 2.8vw, 1.9rem);
	line-height: 1.1;
}

.adt-modelo-callout__cta {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	transition: color 0.35s var(--adt-ease);
}

.adt-modelo-callout:hover .adt-modelo-callout__cta {
	color: var(--adt-accent);
}

/* --- 17. Navegación de regreso ------------------------------------------ */

.adt-backnav {
	padding-block: clamp(1.55rem, 3.1vw, 2.65rem) clamp(2.2rem, 4.4vw, 3.95rem);
	border-top: 1px solid var(--adt-line-soft);
	margin-top: clamp(1.75rem, 3.5vw, 3.1rem);
}

.adt-backnav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	transition: color 0.3s var(--adt-ease), gap 0.3s var(--adt-ease);
}

.adt-backnav__link:hover {
	color: var(--adt-ink);
	gap: 0.95rem;
}

/* --- 18. Páginas, prosa y 404 ------------------------------------------- */

.adt-page {
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.adt-page__head {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
	border-bottom: 1px solid var(--adt-line);
}

.adt-page__title {
	font-size: clamp(2.1rem, 5.5vw, 3.75rem);
}

.adt-prose {
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--adt-ink-dim);
}

.adt-prose > * + * {
	margin-top: 1.35em;
}

.adt-prose h2,
.adt-prose h3 {
	color: var(--adt-ink);
	margin-top: 1.9em;
	font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.adt-prose a {
	color: var(--adt-ink);
	border-bottom: 1px solid var(--adt-ink-faint);
	transition: border-color 0.3s var(--adt-ease);
}

.adt-prose a:hover {
	border-bottom-color: var(--adt-accent);
}

.adt-prose strong {
	color: var(--adt-ink);
	font-weight: 600;
}

.adt-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--adt-line-soft);
	transition: border-color 0.3s var(--adt-ease);
}

.adt-list__link:hover {
	border-bottom-color: var(--adt-ink-dim);
}

.adt-list__title {
	font-family: var(--adt-font-display);
	font-size: 1.35rem;
}

.adt-list__meta {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

.adt-404 {
	padding-block: clamp(4rem, 13vw, 9rem);
}

.adt-404__title {
	font-size: clamp(2.1rem, 6vw, 4.25rem);
	margin-block: 0.85rem 1rem;
	max-width: 18ch;
}

.adt-404__text {
	color: var(--adt-ink-dim);
	max-width: 40ch;
}

.adt-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 2.25rem;
}

/* Prosa legal: listas con marca y una línea de fecha discreta.

   El reset global le quita la viñeta a TODAS las listas del sitio, y ahí está
   bien: en el archivo las listas son índices, raíles y navegación, no
   enumeraciones. Un texto legal es el caso contrario —sin marca no se ve
   dónde acaba una obligación y empieza la siguiente—, así que la viñeta se
   devuelve sólo dentro de .adt-prose y sólo ahí. */

.adt-prose ul,
.adt-prose ol {
	padding-left: 1.45rem;
}

.adt-prose ul {
	list-style: disc;
}

.adt-prose ol {
	list-style: decimal;
}

.adt-prose li + li {
	margin-top: 0.55rem;
}

/* La marca en tinta apagada: ordena sin competir con el texto. */
.adt-prose li::marker {
	color: var(--adt-ink-faint);
}

.adt-prose h3 {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	margin-top: 1.6em;
}

/* Fecha de vigencia: es un dato de control, no una frase del documento. */
.adt-prose__fecha {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

/* Navegación entre los documentos legales.

   Va bajo el título de la página, dentro de su cabecera, y comparte la regla
   del pie: sólo se enlaza lo que existe. Tres estados y tres pesos de tinta
   —actual en tinta plena, disponible en tinta media, todavía inexistente en
   tinta apagada—, así que el estado no lo lleva sólo el color: el que no
   existe además no responde, y el actual no se enlaza a sí mismo. */

.adt-legalnav {
	margin-top: clamp(1rem, 2vw, 1.4rem);
}

.adt-legalnav__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.1rem, 2.5vw, 1.75rem);
}

.adt-legalnav__item {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

a.adt-legalnav__item {
	color: var(--adt-ink-dim);
	transition: color 0.3s var(--adt-ease);
}

a.adt-legalnav__item:hover {
	color: var(--adt-accent);
}

.adt-legalnav__item--actual {
	color: var(--adt-ink);
}

@media (min-width: 720px) {
	.adt-legalnav__item {
		min-height: 2.25rem;
	}
}

/* --- 19. Pie ------------------------------------------------------------ */

/* Tres grupos repartidos a lo ancho —Explorar, Ayuda, Legal— y debajo la
   firma. La jerarquía la marcan los rótulos y el aire, no cajas ni filetes
   entre columnas: el pie es una superficie más del archivo y no un módulo de
   plantilla.

   Una entrada cuya superficie todavía no existe llega aquí como <span> y no
   como <a> (el porqué, en footer.php). Se distingue por la tinta apagada y,
   sobre todo, porque NO RESPONDE: sin hover, sin cursor de mano y sin anillo
   de foco. La diferencia no la lleva sólo el color. */

.adt-footer {
	border-top: 1px solid var(--adt-line);
	background: var(--adt-bg-sunk);
	margin-top: clamp(2.2rem, 4.4vw, 3.95rem);
}

.adt-footer__inner {
	max-width: var(--adt-wrap);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4.25rem) var(--adt-gutter);
	display: grid;
	gap: clamp(2rem, 3.5vw, 2.75rem);
}

/* En móvil los grupos se apilan; el reparto en tres columnas llega a 720px. */

.adt-footer__grupos {
	display: grid;
	gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

.adt-footer__titulo {
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
	margin-bottom: 0.55rem;
}

.adt-footer__lista {
	display: grid;
	justify-items: start;
}

/* WCAG 2.2 AA 2.5.8 sin engordar el pie. La caja entera es pulsable y las
   cajas se TOCAN entre sí —la lista no lleva gap—, así que ni se solapan dos
   destinos ni queda hueco muerto entre ellos: el paso de la lista es
   exactamente el alto del objetivo. 44px donde se toca con el dedo; 36 en
   escritorio, que sigue por encima de los 24 que pide la norma. */

.adt-footer__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.9375rem;
	color: var(--adt-ink-dim);
}

a.adt-footer__enlace {
	transition: color 0.3s var(--adt-ease);
}

a.adt-footer__enlace:hover {
	color: var(--adt-accent);
}

.adt-footer__enlace--inactivo {
	color: var(--adt-ink-faint);
}

/* La firma cierra el pie, separada por un filete tenue: es marca, no
   navegación. */

.adt-footer__firma {
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.4rem);
	padding-top: clamp(1.4rem, 2.8vw, 2rem);
	border-top: 1px solid var(--adt-line-soft);
}

.adt-footer__brand {
	font-family: var(--adt-font-display);
	font-size: clamp(1.75rem, 5vw, 3rem);
	letter-spacing: -0.02em;
	line-height: 1;
	/* El ganso va junto al nombre y apoyado en su misma línea de base. Va a
	   la izquierda porque su ala señala a la derecha: presenta la marca. */
	display: flex;
	align-items: flex-end;
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.adt-footer__meta {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--adt-ink-faint);
}

@media (min-width: 720px) {
	/* Explorar a la izquierda, Ayuda en el centro, Legal a la derecha. Tres
	   columnas iguales y no `auto`: así el reparto no se mueve porque un
	   rótulo sea más largo que otro. */

	.adt-footer__grupos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--adt-gap);
	}

	.adt-footer__enlace {
		min-height: 2.25rem;
	}

	.adt-footer__firma {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

	.adt-footer__meta {
		text-align: right;
	}
}

/* --- 20. Paginación ----------------------------------------------------- */

.pagination,
.adt-pagelinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--adt-line-soft);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
}

.pagination .page-numbers {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--adt-line);
	transition: border-color 0.3s var(--adt-ease), color 0.3s var(--adt-ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	border-color: var(--adt-ink);
	color: var(--adt-ink);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 21. Búsqueda ------------------------------------------------------- */

.adt-nav__link--buscar {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.adt-nav__lupa {
	width: 0.95em;
	height: 0.95em;
	flex: 0 0 auto;
	/* El trazo del icono es más fino que la letra: que no pese más que ella. */
	opacity: 0.85;
}

/* Panel que baja desde la cabecera. No es una ventana centrada: la búsqueda
   pertenece a la barra, no a un cuadro de diálogo flotante. */
.adt-search {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
}

/* Sin esto el display:flex de arriba ganaría al hidden del HTML. */
.adt-search[hidden] {
	display: none;
}

.adt-search__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 7, 0.82);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.adt-search__panel {
	position: relative;
	background: var(--adt-bg);
	border-bottom: 1px solid var(--adt-line);
}

.adt-search__inner {
	max-width: var(--adt-wrap);
	margin-inline: auto;
	padding: clamp(1.1rem, 2.5vw, 2rem) var(--adt-gutter) clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 1.8vw, 1.35rem);
}

.adt-search__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
}

.adt-search__title {
	font-size: clamp(1.35rem, 3vw, 2.1rem);
	line-height: 1.1;
}

.adt-search__close {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--adt-ink-dim);
	background: transparent;
	border: 1px solid var(--adt-line);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.3s var(--adt-ease), border-color 0.3s var(--adt-ease);
}

.adt-search__close:hover {
	color: var(--adt-ink);
	border-color: var(--adt-ink-dim);
}

.adt-search__pista {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

/* Mientras el panel está abierto, el fondo no se desplaza. */
body.adt-search-abierta {
	overflow: hidden;
}

/* --- Formulario --------------------------------------------------------- */

/* Una línea, no una caja: el campo es un renglón sobre el que se escribe. */
.adt-searchform {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	border-bottom: 1px solid var(--adt-line);
	transition: border-color 0.3s var(--adt-ease);
}

.adt-searchform:focus-within {
	border-bottom-color: var(--adt-accent);
	/* El campo no lleva caja y su :focus quita el outline, así que el foco
	   se dibuja en el filete sobre el que se escribe. Antes sólo cambiaba
	   de color: esta sombra lo duplica a 2px, el mismo grosor que el
	   anillo global de :focus-visible, para que el indicador del buscador
	   pese lo mismo que el del resto del sitio. */
	box-shadow: 0 1px 0 0 var(--adt-accent);
}

.adt-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0 0.8rem;
	font-family: var(--adt-font-display);
	font-size: clamp(1.35rem, 3.5vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--adt-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

.adt-searchform__input::placeholder {
	color: var(--adt-ink-faint);
	opacity: 1;
}

.adt-searchform__input:focus {
	outline: none;
}

.adt-searchform__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.adt-searchform__submit {
	flex: 0 0 auto;
	align-self: center;
	padding: 0.7rem 1.5rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink);
	background: transparent;
	border: 1px solid var(--adt-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.3s var(--adt-ease), color 0.3s var(--adt-ease),
		border-color 0.3s var(--adt-ease);
}

.adt-searchform__submit:hover {
	background: var(--adt-ink);
	border-color: var(--adt-ink);
	color: var(--adt-bg);
}

/* --- Página de resultados ----------------------------------------------- */

.adt-masthead--buscar {
	gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.adt-masthead--buscar .adt-searchform {
	margin-top: 0.4rem;
}

.adt-buscar__pista {
	margin-top: 0.9rem;
	color: var(--adt-ink-faint);
	font-size: 0.9375rem;
	max-width: 46ch;
}

@media (max-width: 559px) {
	/* En móvil el botón se cae y manda el teclado: el campo ocupa el renglón
	   entero y se envía con Intro. */
	.adt-searchform__submit {
		display: none;
	}
}

/* --- 22. Módulo comercial ----------------------------------------------- */

/* Vive dentro de la columna de texto de la ficha, debajo de los créditos, y
   ocupa el aire que quedaba ahí. No es un banner: es del mismo material que
   el resto de la página, sólo que con un borde que lo separa. */
.adt-commerce-card {
	margin-top: clamp(1.1rem, 2vw, 1.6rem);
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	border: 1px solid var(--adt-line);
	background: var(--adt-bg-elev);
	display: flex;
	flex-direction: column;
	gap: clamp(0.8rem, 1.4vw, 1.1rem);
	/* Sin tope se estiraría a los ~700px de la columna y perdería el aire
	   de ficha. */
	max-width: 30rem;
}

.adt-commerce-card__label {
	font-family: var(--adt-font-body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

.adt-commerce-card__datos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.1rem;
}

.adt-commerce-card__precio {
	font-family: var(--adt-font-display);
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--adt-ink);
}

.adt-commerce-card__codigo {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
	white-space: nowrap;
}

/* Clase propia, no .adt-btn: el botón de compra es sólido y no debe arrastrar
   consigo el resto de botones del sitio. */
.adt-commerce-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9rem 1.35rem;
	background: var(--adt-ink);
	color: var(--adt-bg);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.3s var(--adt-ease), color 0.3s var(--adt-ease);
}

.adt-commerce-card__cta:hover {
	background: var(--adt-accent);
	color: var(--adt-bg-sunk);
}

.adt-commerce-card__cta span {
	transition: transform 0.3s var(--adt-ease);
}

.adt-commerce-card__cta:hover span {
	transform: translateX(0.3rem);
}

.adt-commerce-card__nota {
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--adt-ink-faint);
}

/* --- 23. Preferencias de movimiento ------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- 24. Superficies editoriales: migas, ficha de datos y apertura ------ */

.adt-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-top: var(--adt-space-tight);
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

.adt-crumbs__link {
	color: var(--adt-ink-dim);
	transition: color 0.3s var(--adt-ease);
}

.adt-crumbs__link:hover,
.adt-crumbs__link:focus-visible {
	color: var(--adt-ink);
}

.adt-crumbs__sep {
	color: var(--adt-ink-faint);
}

/* El último tramo puede ser largo; que corte en vez de desbordar. */
.adt-crumbs__actual {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 22ch;
}

/* Ficha de datos de una sesión: pares que se apilan en móvil. */
.adt-datos {
	display: grid;
	gap: 0.7rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--adt-line-soft);
}

.adt-datos__par {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem;
}

@media (min-width: 40em) {
	.adt-datos__par {
		grid-template-columns: 9rem 1fr;
		gap: 1rem;
		align-items: baseline;
	}
}

.adt-datos__par dt {
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

.adt-datos__par dd {
	margin: 0;
	color: var(--adt-ink);
}

.adt-datos__par dd a {
	border-bottom: 1px solid var(--adt-line);
}

.adt-datos__par dd a:hover,
.adt-datos__par dd a:focus-visible {
	border-bottom-color: var(--adt-accent);
}

.adt-datos__titulo {
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	margin: var(--adt-space-tight) 0 0.6rem;
}

.adt-datos__texto {
	margin: 0 0 0.6rem;
	color: var(--adt-ink-dim);
}

.adt-datos__texto a {
	color: var(--adt-ink);
	border-bottom: 1px solid var(--adt-line);
}

.adt-datos__texto a:hover,
.adt-datos__texto a:focus-visible {
	border-bottom-color: var(--adt-accent);
}

/* Apertura de una pieza editorial. Sin recorte: la imagen manda su alto. */
.adt-editorial__hero {
	margin: var(--adt-space-tight) auto 0;
}

.adt-editorial__hero .adt-img,
.adt-editorial__hero .adt-ph {
	width: 100%;
	height: auto;
	display: block;
}

.adt-editorial__hero .adt-ph {
	aspect-ratio: 3 / 2;
}


/* --- 25. Mascota: acento de marca --------------------------------------- */

/* El ganso acompaña, no compone. Un solo mecanismo para las cuatro
   superficies: la imagen se dimensiona por ALTO y el ancho lo pone su propia
   proporción. Ni object-fit, ni aspect-ratio, ni un número mágico.

   Eso es posible porque los WebP que se sirven vienen recortados al dibujo,
   sin el margen transparente del lienzo: la caja YA es el dibujo. Y las
   piezas de índice son las variantes de personaje limpio, sin el rótulo
   dibujado dentro, así que tampoco hay nada que esconder. La maquinaria de
   recorte de la versión anterior desaparece entera. */

.adt-mascota {
	display: block;
	height: var(--adt-mascota-h, 4rem);
	width: auto;
	flex: 0 0 auto;
}

/* Home. El acento vive en el BLOQUE EDITORIAL IZQUIERDO, en el hueco que
   queda a la derecha del texto, y sigue FUERA DEL FLUJO.

   Lo de fuera del flujo no es preferencia estética, es aritmética: el hero
   es flex con align-items:flex-end y min-height min(86vh, 900px), y en un
   escritorio de 1440x900 el bloque de texto ya ocupa 743 de los 774px
   disponibles. Cualquier pieza en el flujo —aunque fueran 72px— empujaría
   el hero por encima de su min-height y le cambiaría la proporción. En
   absoluto no se entera nadie: ni la altura del hero, ni el panel de la
   fotografía, ni el titular, ni los botones.

   Tampoco puede provocar scroll lateral: .adt-hero tiene overflow:hidden. Y
   va en z-index 1, encima del velo pero debajo del titular y del crédito,
   que siempre ganan. */

.adt-hero__mascota {
	position: absolute;
	z-index: 1;
	display: none;
	height: auto;
	bottom: 0;
	/* Su borde derecho se para antes del panel de la fotografía: el acento
	   es de la columna editorial y no entra en la de imagen. */
	right: calc(var(--adt-hero-panel) + 0.75rem);
}

/* El hueco libre del bloque izquierdo sólo existe de verdad en pantalla
   ancha: por debajo, la fila de botones se lo come entera. Así que el dibujo
   se dimensiona CON ese hueco y no contra él:

     100%                    el ancho del hero
     - --adt-hero-panel      lo que ocupa el panel de la fotografía
     - (100% - 1520px) / 2   el margen de centrado, cuando el wrap ya topó
     - --adt-gutter          el sangrado del texto
     - 23.5rem               la fila de botones —334px medidos, no
                             estimados— más su aire de respeto

   Si el hueco se encoge, el dibujo se encoge con él, y quedan siempre 30px
   entre el ala y el botón. El max() interior impide que un ancho negativo
   invalide la regla y deje la imagen a su tamaño natural, que sería el único
   modo de que esto rompiera algo. Por debajo de 1280px no se pinta: ahí el
   bloque izquierdo es todo texto y botones, y meter algo sería empujarlos.
   La marca la sigue firmando el ganso del pie. */
@media (min-width: 1280px) {
	.adt-hero__mascota {
		display: block;
		/* EN UNA SOLA LÍNEA A PROPÓSITO. Partida en varias, el minificador de
		   WP Rocket se come el signo de porcentaje de la primera operación,
		   cierra el paréntesis antes de tiempo y deja otro de más al final:
		   la declaración sale inválida, el navegador la descarta ENTERA y el
		   dibujo cae a su tamaño intrínseco —174x224, el mismo en todos los
		   anchos—, que es justo lo que se metía encima del botón de
		   plataformas entre 1280 y 1440 px. Medido en el CSS servido, no
		   supuesto. Este comentario tampoco lleva paréntesis sueltos. */
		width: min(13rem, max(0px, calc(100% - var(--adt-hero-panel) - max((100% - 1520px) / 2, 0px) - var(--adt-gutter) - 23.5rem)));
	}
}

/* Cabecera de índice: remate a la derecha del título. El texto va en su
   propia columna porque el reset anula los márgenes y todo el ritmo del
   encabezado lo da el gap del flex. */

.adt-masthead__texto {
	display: flex;
	flex-direction: column;
	gap: var(--adt-masthead-gap);
	min-width: 0;
}

.adt-masthead--mascota .adt-mascota {
	--adt-mascota-h: clamp(6.5rem, 4.5rem + 12vw, 15.5rem);
	/* En columna la pega al margen derecho; en fila, apoya las patas abajo. */
	align-self: flex-end;
	/* Se apoya en el filete inferior en vez de flotar sobre él. No invade la
	   rejilla: ésta empieza un margen entero más abajo del filete. */
	margin-bottom: calc(var(--adt-masthead-pb) * -1);
}

@media (min-width: 900px) {
	.adt-masthead--mascota {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--adt-gutter);
	}
}

/* Pie: firma pequeña. El alto no pasa de 48px, que es justo el cuerpo de la
   marca, para que la celda no crezca y el pie conserve la proporción que
   tenía antes de que existiera la mascota. */

.adt-footer__mascota {
	--adt-mascota-h: clamp(2.25rem, 4.5vw, 3rem);
}

/* --- 26. Cuentas: acceso, recuperación y ficha ------------------------- */

/* Formularios sobrios, con el mismo aire que el resto. Cajas de verdad y no
   renglones como el buscador: aquí se escriben datos, no una consulta, y un
   campo de contraseña sin borde se lee mal. */

.adt-cuenta {
	max-width: 30rem;
	padding-bottom: var(--adt-space-section);
}

.adt-cuenta__seccion {
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	margin: var(--adt-space-tight) 0 0.9rem;
}

.adt-cuenta__avisos:empty {
	display: none;
}

.adt-cuenta__aviso {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	border-left: 2px solid var(--adt-accent);
	background: var(--adt-bg-elev);
	font-size: 0.9375rem;
}

.adt-cuenta__aviso--error {
	border-left-color: #b4544b;
}

.adt-campo {
	margin-bottom: 1.25rem;
}

.adt-campo--check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: var(--adt-ink-dim);
}

.adt-campo__label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
}

.adt-campo__input {
	width: 100%;
	padding: 0.95rem 1.1rem;
	font-family: var(--adt-font-body);
	font-size: 1rem;
	color: var(--adt-ink);
	background: var(--adt-bg-elev);
	border: 1px solid var(--adt-line);
	border-radius: 0.6rem;
	appearance: none;
	transition: border-color 0.3s var(--adt-ease);
}

.adt-campo__input::placeholder {
	color: var(--adt-ink-faint);
}

.adt-campo__input:focus {
	border-color: var(--adt-accent);
}

.adt-cuenta__pie,
.adt-cuenta__nota {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	color: var(--adt-ink-dim);
}

/* --- 27. Biblioteca y visor ------------------------------------------- */

/* Listas sobrias, sin imagen. Aquí no se pintan assets: lo que se ve es qué
   colecciones son tuyas, no la obra. El estado vacío es el que corre hoy en
   producción, así que se diseña como pantalla y no como excusa. */

.adt-biblioteca,
.adt-ver {
	max-width: 36rem;
	padding-bottom: var(--adt-space-section);
}

.adt-biblioteca__intro {
	margin-bottom: var(--adt-space-tight);
	font-size: 0.9375rem;
	color: var(--adt-ink-dim);
}

.adt-biblioteca__lista,
.adt-ver__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--adt-line-soft);
}

.adt-biblioteca__item,
.adt-ver__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--adt-line-soft);
}

.adt-biblioteca__titulo {
	margin: 0;
	font-family: var(--adt-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--adt-ink);
}

.adt-biblioteca__accion {
	margin: 0;
}

.adt-ver__nombre {
	font-size: 0.9375rem;
	color: var(--adt-ink);
}

.adt-ver__pendiente {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--adt-ink-dim);
}

.adt-estado {
	padding: 2rem 1.5rem;
	border: 1px solid var(--adt-line-soft);
	background: var(--adt-bg-elev);
}

.adt-estado--error {
	border-left: 2px solid #b4544b;
}

.adt-estado__titulo {
	margin: 0 0 0.5rem;
	font-family: var(--adt-font-display);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--adt-ink);
}

.adt-estado__texto {
	margin: 0;
	max-width: 32rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--adt-ink-dim);
}

.adt-biblioteca__pie,
.adt-ver__pie {
	margin-top: 1.75rem;
	font-size: 0.9375rem;
	color: var(--adt-ink-dim);
}
/* --- 28. Precio de origen (ficha de colección) -------------------------- */

/* Hermana de la sección 22 y deliberadamente distinta, porque los dos datos
   lo son: aquella pinta una oferta viva que dice el proveedor —con botón y
   destino de compra— y ésta un precio leído en la ficha de la que se importó
   la colección. Se distinguen a la vista igual que en el código: la comercial
   es una caja cerrada con un botón sólido; ésta es una anotación al margen,
   con la barra de acento a la izquierda que el sitio ya usa para lo
   documental. Si alguna vez se parecen, algo se ha roto. */
.adt-origen {
	margin-top: clamp(1.1rem, 2vw, 1.6rem);
	padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(1rem, 1.9vw, 1.35rem);
	border: 1px solid var(--adt-line-soft);
	border-left: 2px solid var(--adt-accent);
	background: var(--adt-bg-elev);
	/* Mismo tope que la tarjeta comercial: sin él se estira a los ~700 px de
	   la columna y deja de leerse como anotación. */
	max-width: 30rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.adt-origen__label {
	margin: 0;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--adt-ink-faint);
}

.adt-origen__cifras {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.85rem;
}

/* El tachado va delante y pequeño: es el dato que ya no rige. */
.adt-origen__antes {
	font-family: var(--adt-font-display);
	font-size: 1.0625rem;
	line-height: 1;
	color: var(--adt-ink-faint);
}

.adt-origen__ahora {
	font-family: var(--adt-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--adt-ink);
}

.adt-origen__moneda {
	margin-left: 0.3rem;
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	color: var(--adt-ink-faint);
	vertical-align: 0.35em;
}

/* Sin mayúsculas ni espaciado de rótulo: es una frase y tiene que leerse como
   tal, porque lo que hace es nombrar una fuente, no prometer nada. */
.adt-origen__nota {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--adt-ink-faint);
}

/* El CTA. Mismo material que el botón de la tarjeta comercial —sólido, en
   tinta plena, versalitas, sin radio— porque es el mismo tipo de pieza y el
   sitio ya tenía decidido cómo se ve un botón de acción. Clase propia y no
   la de aquella: ésta no sale del CatalogProvider y el smoke F8 cuenta la
   otra para comprobar que el comercio sigue apagado.

   Ocupa todo el ancho de la banda sin pedirlo: .adt-origen es una columna
   flex y sus hijos se estiran solos. */
.adt-origen__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.35rem;
	padding: 0.9rem 1.35rem;
	background: var(--adt-ink);
	color: var(--adt-bg);
	font-family: var(--adt-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.3s var(--adt-ease), color 0.3s var(--adt-ease);
}

.adt-origen__cta:hover {
	background: var(--adt-accent);
	color: var(--adt-bg-sunk);
}

/* --- 29. Centro de ayuda ------------------------------------------------ */

/* Tres bloques de pregunta y respuesta, y el formulario debajo. No son
   tarjetas con caja: en este sitio la separación la hacen el aire y un filete,
   no un borde alrededor de cada cosa. */

.adt-ayuda__bloque {
	padding-top: clamp(1.6rem, 3vw, 2.4rem);
	border-top: 1px solid var(--adt-line-soft);
}

.adt-ayuda__bloque:first-of-type {
	padding-top: 0;
	border-top: 0;
}

/* El ritmo de la prosa lo pone un selector de hijo DIRECTO de .adt-prose, que
   aquí ya no alcanza porque el contenido cuelga de la sección. Se repite para
   los hijos del bloque y el interior vuelve a respirar igual. */
.adt-ayuda__bloque > * + * {
	margin-top: 1.35em;
}

.adt-ayuda__bloque > h2:first-child {
	margin-top: 0;
}

.adt-ayuda__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

/* .adt-prose subraya sus enlaces con un filete inferior. En un botón eso
   parte el borde redondo por abajo, así que se le devuelve el color que
   tienen los otros tres lados, también al pasar por encima. */
.adt-prose a.adt-btn,
.adt-prose a.adt-btn:hover {
	border-bottom-color: var(--adt-ink);
}

.adt-prose a.adt-btn--ghost {
	border-bottom-color: var(--adt-line);
}

.adt-prose a.adt-btn--ghost:hover {
	border-bottom-color: var(--adt-ink);
}

/* --- El formulario ------------------------------------------------------ */

.adt-soporte {
	max-width: 30rem;
	padding-top: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--adt-line);
}

.adt-soporte__titulo {
	font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.adt-soporte__lede {
	margin: 0.6rem 0 clamp(1.5rem, 3vw, 2rem);
	color: var(--adt-ink-dim);
	font-size: 1.0625rem;
}

/* Texto de apoyo del campo: dice qué se espera sin convertir la etiqueta en
   una frase. Va debajo y lo referencia aria-describedby. */
.adt-campo__ayuda {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	color: var(--adt-ink-faint);
}

.adt-campo__area {
	min-height: 9rem;
	line-height: 1.6;
	resize: vertical;
}

/* El señuelo: fuera de la pantalla y fuera del tabulador. No se usa
   display:none porque hay robots que lo detectan y se saltan justo esos
   campos.

   Se coloca con el mismo recurso que .adt-skip —absoluto y a la izquierda—
   y SIN width ni height en px: de la sección 26 al final del fichero no puede
   quedar un ancho fijo, y las suites F7A y F7B lo comprueban. */
.adt-soporte__senuelo {
	position: absolute;
	left: -9999px;
	top: 0;
}

.adt-soporte__nota {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--adt-ink-faint);
}

.adt-soporte__nota a {
	color: var(--adt-ink-dim);
	border-bottom: 1px solid var(--adt-line);
	transition: border-color 0.3s var(--adt-ease);
}

.adt-soporte__nota a:hover {
	border-bottom-color: var(--adt-accent);
}

/* --- 30. Contacto ------------------------------------------------------- */

/* Una acción y dos desvíos. El botón abre la aplicación de correo de quien
   mira; debajo, la dirección en texto por si el navegador no tiene ninguna
   configurada y hay que copiarla a mano. */

.adt-contacto {
	padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	border-top: 1px solid var(--adt-line);
}

.adt-contacto__accion {
	margin-bottom: 0.9rem;
}

.adt-contacto__nota {
	font-size: 0.8125rem;
	color: var(--adt-ink-faint);
}

.adt-contacto__directo {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--adt-ink-dim);
	font-size: 1.0625rem;
}

/* La dirección no puede desbordar en una pantalla estrecha: si no cabe,
   parte por donde haga falta en vez de empujar la página a lo ancho. */
.adt-contacto__correo {
	color: var(--adt-ink);
	overflow-wrap: anywhere;
	border-bottom: 1px solid var(--adt-ink-faint);
	transition: border-color 0.3s var(--adt-ease);
}

.adt-contacto__correo:hover {
	border-bottom-color: var(--adt-accent);
}

/* Los dos desvíos: ayuda y derechos. Mismo recurso que el resto del sitio
   —aire y un filete—, sin cajas alrededor. */

.adt-contacto__otros {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.adt-contacto__bloque {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--adt-line-soft);
}

.adt-contacto__bloque:first-child {
	margin-top: 0;
}

.adt-contacto__bloque h2 {
	color: var(--adt-ink);
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	margin-bottom: 0.7rem;
}

.adt-contacto__bloque p {
	color: var(--adt-ink-dim);
	line-height: 1.72;
}

.adt-contacto__cta {
	margin-top: 1.1rem;
}

/* --- 31. Acceso y alta de cuenta ---------------------------------------- */

/* Tarjeta oscura, centrada y con aire de sobra: es la pantalla donde alguien
   decide entregar un correo, y tiene que parecer el mismo sitio de siempre.
   El acceso y el alta comparten clase porque son dos caras del mismo paso; lo
   único que cambia entre ellas es cuál de las dos acciones es la principal. */

.adt-acceso {
	max-width: 27rem;
	margin: clamp(2rem, 5vw, 4rem) auto clamp(3rem, 6vw, 5rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--adt-line);
	border-radius: 0.9rem;
	background: var(--adt-bg-elev);
}

.adt-acceso__head {
	margin-bottom: clamp(1.4rem, 3vw, 1.9rem);
}

.adt-acceso__title {
	margin-top: 0.5rem;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
}

.adt-acceso__lede {
	margin-top: 0.7rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--adt-ink-dim);
}

/* --- Los dos botones: sólido el principal, de contorno el secundario ----- */

.adt-acceso__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem 1.35rem;
	border: 1px solid var(--adt-ink);
	border-radius: 0.6rem;
	background: var(--adt-ink);
	color: var(--adt-bg);
	font-family: var(--adt-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background 0.3s var(--adt-ease), color 0.3s var(--adt-ease),
		border-color 0.3s var(--adt-ease);
}

.adt-acceso__btn:hover {
	background: var(--adt-accent);
	border-color: var(--adt-accent);
	color: var(--adt-bg-sunk);
}

.adt-acceso__btn--ghost {
	background: transparent;
	border-color: var(--adt-line);
	color: var(--adt-ink-dim);
}

.adt-acceso__btn--ghost:hover {
	background: transparent;
	border-color: var(--adt-ink);
	color: var(--adt-ink);
}

/* --- Microcopy, legal y separador --------------------------------------- */

.adt-acceso__micro {
	margin-top: 0.85rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--adt-ink-faint);
}

.adt-acceso__legal {
	margin-top: 0.85rem;
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--adt-ink-faint);
}

.adt-acceso__legal a {
	color: var(--adt-ink-dim);
	border-bottom: 1px solid var(--adt-line);
	transition: border-color 0.3s var(--adt-ease);
}

.adt-acceso__legal a:hover {
	border-bottom-color: var(--adt-accent);
}

.adt-acceso__sep {
	margin-block: clamp(1.4rem, 3vw, 1.9rem);
	border: 0;
	border-top: 1px solid var(--adt-line-soft);
}

.adt-acceso__alt-texto {
	margin-bottom: 0.85rem;
	font-size: 0.9375rem;
	color: var(--adt-ink-dim);
}

/* --- Mostrar u ocultar la contraseña ------------------------------------ */

/* El campo y el botón comparten caja. El relleno derecho del campo reserva el
   sitio del botón, así que el texto escrito nunca pasa por debajo. */

.adt-campo__clave {
	display: block;
	position: relative;
}

.adt-campo__clave .adt-campo__input {
	padding-right: 6rem;
}

.adt-campo__ojo {
	position: absolute;
	top: 50%;
	right: 0.45rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	/* 2.5.8: la caja entera es pulsable, no sólo las letras. */
	min-height: 2.6rem;
	padding-inline: 0.7rem;
	border: 0;
	border-radius: 0.4rem;
	background: transparent;
	font-family: var(--adt-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--adt-ink-dim);
	cursor: pointer;
	transition: color 0.3s var(--adt-ease);
}

.adt-campo__ojo:hover {
	color: var(--adt-accent);
}

/* --- Casillas ----------------------------------------------------------- */

.adt-campo--check input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	accent-color: var(--adt-accent);
}

/* La casilla de novedades lleva una frase de dos líneas, no un rótulo corto:
   se alinea por arriba y no por el centro. */
.adt-campo--check-alto {
	align-items: flex-start;
	line-height: 1.5;
}

.adt-campo--check-alto input[type="checkbox"] {
	margin-top: 0.2rem;
}

/* --- 32. Paso previo al desbloqueo -------------------------------------- */

/* Misma familia que la tarjeta de acceso —es el siguiente paso del mismo
   camino— pero sin borde de caja: aquí no hay nada que rellenar, así que no
   tiene por qué parecer un formulario. Lo que manda es el nombre de la obra. */

.adt-desbloqueo {
	max-width: 34rem;
	margin: clamp(2rem, 5vw, 4rem) auto clamp(3rem, 6vw, 5rem);
}

.adt-desbloqueo__head {
	padding-bottom: clamp(1.2rem, 3vw, 1.6rem);
	border-bottom: 1px solid var(--adt-line-soft);
}

.adt-desbloqueo__title {
	margin-top: 0.5rem;
	font-size: clamp(1.5rem, 3.6vw, 1.9rem);
	color: var(--adt-ink-dim);
}

/* El título de la colección, que es el dato que importa en esta pantalla. */
.adt-desbloqueo__obra {
	margin-top: 0.6rem;
	font-family: var(--adt-font-display);
	font-size: clamp(1.9rem, 5.2vw, 2.9rem);
	line-height: 1.15;
	color: var(--adt-ink);
}

.adt-desbloqueo__cuerpo {
	margin-top: clamp(1.4rem, 3vw, 1.9rem);
}

.adt-desbloqueo__cuerpo p {
	margin-top: 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--adt-ink-dim);
}

.adt-desbloqueo__cuerpo p:first-child {
	margin-top: 0;
}

.adt-desbloqueo__salidas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin-top: clamp(1.6rem, 3.5vw, 2.2rem);
	padding-top: clamp(1.2rem, 3vw, 1.6rem);
	border-top: 1px solid var(--adt-line-soft);
	font-size: 0.875rem;
}