/*
 * Andaventura — artículo.
 *
 * Una lectura de 18.5px sobre columna de 720px, con el índice acompañando en
 * escritorio y plegado en móvil. El motion aquí es mínimo: la velocidad y la
 * claridad son el diseño. Los huecos publicitarios reservan su altura.
 */

/* ============================================================== CABECERA */

.av-article__shell {
	width: min(100% - var(--av-gutter) * 2, 860px);
	margin-inline: auto;
}

.av-article__head {
	padding-block: calc(var(--av-header-h) + clamp(1.5rem, 3vw, 3rem)) clamp(1.5rem, 3vw, 2.5rem);
	text-align: left;
}

.av-article__crumbs {
	font-size: 0.78rem;
	color: var(--av-ink-muted);
	margin-bottom: var(--av-s-3);
}

.av-article__crumbs a { color: inherit; }
.av-article__crumbs a:hover { color: var(--av-ink-strong); }
.av-article__crumbs .separator { margin-inline: 0.35em; opacity: 0.6; }
.av-article__crumbs .last { color: var(--av-ink-body); }

.av-article__title {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.028em;
	max-width: 22ch;
}

.av-article__deck {
	margin-top: var(--av-s-2);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.55;
	color: var(--av-ink-muted);
	max-width: 56ch;
}

.av-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--av-s-3);
	font-size: 0.82rem;
	color: var(--av-ink-muted);
}

.av-article__author { color: var(--av-ink-body); font-weight: 600; }
.av-article__updated { color: var(--av-clay); }

/* ================================================================ APERTURA */

.av-article__hero {
	width: min(100% - var(--av-gutter) * 2, 1100px);
	margin: 0 auto var(--av-s-4);
}

.av-article__hero img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 5px;
}

.av-article__hero figcaption {
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: var(--av-ink-muted);
}

/* ================================================================ LAYOUT */

.av-article__layout {
	display: grid;
	grid-template-columns: minmax(200px, 250px) minmax(0, 720px);
	gap: var(--av-s-5);
	justify-content: center;
	width: min(100% - var(--av-gutter) * 2, 1100px);
	margin-inline: auto;
	align-items: start;
}

@media (max-width: 960px) {
	.av-article__layout { grid-template-columns: minmax(0, 720px); }
}

/* =================================================================== TOC */

.av-toc {
	position: sticky;
	top: calc(var(--av-header-h) + var(--av-s-3));
	border-left: 1px solid var(--av-ink-hair);
	padding-left: var(--av-s-2);
}

.av-toc__toggle {
	display: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-ink-strong);
	align-items: center;
	gap: 0.5rem;
}

.av-toc__toggle .av-icon { rotate: 90deg; transition: rotate var(--av-fast) var(--av-ease); }
.av-toc__toggle[aria-expanded='true'] .av-icon { rotate: -90deg; }

.av-toc__list::before {
	content: 'En esta guía';
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	margin-bottom: 0.8rem;
}

.av-toc__item { margin-bottom: 0.15rem; }
.av-toc__item--h3 { padding-left: 0.9rem; }

.av-toc__item a {
	display: block;
	padding: 0.28rem 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--av-ink-muted);
	transition: color var(--av-fast) var(--av-ease);
}

.av-toc__item a:hover { color: var(--av-ink-strong); }
.av-toc__item.is-current > a { color: var(--av-clay); font-weight: 600; }

@media (max-width: 960px) {
	.av-article__aside { order: -1; }
	.av-toc { position: static; border-left: 0; padding-left: 0; border: 1px solid var(--av-ink-hair); border-radius: 5px; padding: 0.9rem 1.1rem; }
	.av-toc__toggle { display: flex; width: 100%; justify-content: space-between; }
	.av-toc__list { display: none; margin-top: 0.8rem; }
	.av-toc__list::before { display: none; }
	.av-toc[data-open] .av-toc__list { display: block; }
}

/* ================================================================ LECTURA */

.av-prose {
	font-size: clamp(1.075rem, 1.05rem + 0.15vw, 1.155rem); /* 17.2–18.5px */
	line-height: 1.75;
	color: var(--av-ink-body);
}

.av-prose > * + * { margin-top: 1.15em; }

.av-prose h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 500;
	line-height: 1.18;
	margin-top: 2.2em;
	scroll-margin-top: calc(var(--av-header-h) + 1rem);
}

.av-prose h3 {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	font-weight: 500;
	line-height: 1.25;
	margin-top: 1.8em;
	scroll-margin-top: calc(var(--av-header-h) + 1rem);
}

.av-prose a {
	color: var(--av-ink-strong);
	text-decoration: underline;
	text-decoration-color: var(--av-clay);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--av-fast) var(--av-ease);
}

.av-prose a:hover { text-decoration-thickness: 2px; }

.av-prose ul, .av-prose ol { padding-left: 1.4em; }
.av-prose ul { list-style: disc; }
.av-prose ol { list-style: decimal; }
.av-prose li { margin-top: 0.45em; }
.av-prose li::marker { color: var(--av-clay); }

.av-prose img {
	border-radius: 5px;
	margin-block: 0.5em;
}

.av-prose figure { margin-block: 1.6em; }
.av-prose figcaption { font-size: 0.8rem; color: var(--av-ink-muted); margin-top: 0.5rem; }

.av-prose blockquote {
	border-left: 3px solid var(--av-clay);
	padding: 0.2em 0 0.2em 1.2em;
	font-family: var(--av-display);
	font-size: 1.18em;
	line-height: 1.5;
	color: var(--av-ink-strong);
}

.av-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
	display: block;
	overflow-x: auto;
}

.av-prose th, .av-prose td {
	text-align: left;
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--av-ink-hair);
}

.av-prose th {
	font-weight: 600;
	font-size: 0.82em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
}

.av-prose hr {
	border: 0;
	height: 1px;
	background: var(--av-ink-hair);
	margin-block: 2.4em;
}

/* Aviso / destacado (clase reutilizable desde el editor). */
.av-prose .av-note {
	background: var(--av-ivory-deep);
	border-radius: 5px;
	padding: 1.1em 1.3em;
	font-size: 0.94em;
}

/* ============================================================= PUBLICIDAD */

/*
 * El hueco reserva 280px: el formato auto de AdSense en columna de 720px
 * rara vez pasa de ahí. El contenido no salta cuando llega el anuncio.
 */
.av-ad {
	margin-block: 2.2em;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--av-ivory-deep);
	border-radius: 5px;
	overflow: hidden;
}

.av-ad__note {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	text-align: center;
	padding: 0.5rem 0 0.25rem;
}

/* ================================================================= CIERRE */

.av-article__foot {
	margin-top: var(--av-s-6);
	padding-block: var(--av-s-5);
	border-top: 1px solid var(--av-ink-hair);
	background: var(--av-ivory-deep);
}

.av-authorbox {
	display: flex;
	gap: var(--av-s-3);
	align-items: center;
	max-width: 640px;
}

.av-authorbox__avatar img { border-radius: 50%; width: 64px; height: 64px; }
.av-authorbox__name { font-weight: 600; color: var(--av-ink-strong); }
.av-authorbox__bio { font-size: 0.9rem; line-height: 1.6; color: var(--av-ink-muted); margin-top: 0.25rem; }

.av-related { margin-top: var(--av-s-5); }

.av-related__title {
	font-size: var(--av-t-md);
	font-weight: 400;
	margin-bottom: var(--av-s-3);
}

.av-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--av-s-3);
}

.av-relcard { display: block; }

.av-relcard__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 5px;
	background: var(--av-ivory);
	margin-bottom: 0.7rem;
}

.av-relcard__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--av-ease);
}

@media (hover: hover) and (pointer: fine) {
	.av-relcard:hover .av-relcard__media img { transform: scale(1.04); }
}

.av-relcard__meta {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-clay);
	margin-bottom: 0.25rem;
}

.av-relcard__name {
	font-family: var(--av-display);
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--av-ink-strong);
}

/* ======================================================= LISTADOS Y HUB */

/* Archivo, búsqueda y 404 comparten esqueleto con el cierre del artículo. */

.av-listing { padding-bottom: var(--av-s-6); }

.av-listing__head {
	padding-block: calc(var(--av-header-h) + clamp(1.5rem, 3vw, 3rem)) clamp(1.5rem, 3vw, 2.5rem);
}

.av-listing__title {
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.028em;
	max-width: 26ch;
}

.av-listing__desc { margin-top: var(--av-s-2); color: var(--av-ink-muted); max-width: 60ch; }
.av-listing__search { margin-top: var(--av-s-3); max-width: 480px; }

.av-listing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--av-s-4) var(--av-s-3);
}

.av-relcard__excerpt {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--av-ink-muted);
}

.av-listing__pages { margin-top: var(--av-s-5); }
.av-listing__pages .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.av-listing__pages a,
.av-listing__pages .current {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.8rem;
	border: 1px solid var(--av-ink-hair);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	transition: border-color var(--av-fast) var(--av-ease), background-color var(--av-fast) var(--av-ease);
}

.av-listing__pages .current { background: var(--av-ink); color: var(--av-ivory); border-color: var(--av-ink); }
.av-listing__pages a:hover { border-color: var(--av-ink); }

.av-listing__none { color: var(--av-ink-muted); max-width: 50ch; }

/* Buscador del theme. */
.av-search__form { display: flex; gap: 0.5rem; }

.av-search__input {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--av-ink-hair);
	border-radius: 999px;
	background: var(--av-white);
	color: var(--av-ink-strong);
}

.av-search__input:focus-visible { outline: 2px solid var(--av-clay); outline-offset: 2px; }

/* 404 */
.av-404__code {
	font-family: var(--av-display);
	font-size: clamp(4rem, 10vw, 8rem);
	line-height: 1;
	color: var(--av-ink-hair);
}

.av-404__hubs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--av-s-3); }

/* HUB */
.av-hub__head { padding-block: calc(var(--av-header-h) + clamp(1.5rem, 3vw, 3rem)) clamp(1rem, 2vw, 2rem); }

.av-hub__title {
	font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.av-hub__deck {
	margin-top: var(--av-s-2);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.55;
	color: var(--av-ink-muted);
	max-width: 56ch;
}

.av-hub__hero { margin-block: var(--av-s-3) var(--av-s-4); }
.av-hub__hero img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 5px; }

.av-hub__body { width: min(100% - var(--av-gutter) * 2, 860px); }
.av-hub__guides { margin-top: var(--av-s-5); padding-top: var(--av-s-4); border-top: 1px solid var(--av-ink-hair); }

/* Pastilla de hub (compartida con el hero, pero esta hoja no depende de él). */
.av-corona__pill {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--av-ink-hair);
	background: var(--av-white);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-ink-body);
	transition: color var(--av-fast) var(--av-ease), border-color var(--av-fast) var(--av-ease);
}

@media (hover: hover) and (pointer: fine) {
	.av-corona__pill:hover { color: var(--av-ink-strong); border-color: var(--av-ink); }
}

/* ============================================ PÁGINAS DE TEXTO CORRIDO
   Legales, marca y contacto. Los hubs no pasan por aquí: componen con
   bloques propios. Reutilizan la caja y la tipografía del artículo, sin
   el aparato editorial (deck, autor, índice, publicidad). */

.av-page__shell {
	width: min(100% - var(--av-gutter) * 2, 760px);
	margin-inline: auto;
}

.av-page__head {
	padding-block: calc(var(--av-header-h) + clamp(1.5rem, 3vw, 3rem)) clamp(1.25rem, 2.5vw, 2rem);
}

.av-page__title {
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.028em;
	max-width: 22ch;
	margin-top: 0.35em;
}

.av-page__body {
	width: min(100% - var(--av-gutter) * 2, 760px);
	margin-inline: auto;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Un documento legal es una jerarquía numerada: los h2 necesitan aire
   por encima y una separación visible de la sección anterior. */
.av-page__body h2 {
	margin-top: 2.4em;
	padding-top: 1.4em;
	border-top: 1px solid var(--av-ink-hair);
}

.av-page__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.av-page__body h3 { margin-top: 1.9em; }

/* Tablas de la política de cookies: cabecera lateral en las fichas de
   tratamiento y scroll propio cuando no caben. */
.av-page__body table {
	display: block;
	overflow-x: auto;
	white-space: normal;
}

.av-page__body th {
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

.av-page__body td { vertical-align: top; }

.av-page__body code {
	font-size: 0.9em;
	background: var(--av-ivory-deep);
	padding: 0.12em 0.38em;
	border-radius: 3px;
}