@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   DoctorX — Páginas interiores
   Hereda el sistema de la portada (home-v2.css) y añade lo propio
   de la lectura larga: prosa, secciones plegables y sumario.
   ═══════════════════════════════════════════════════════════════ */

.dxi-body { background: var(--ink); }

/* ── Cabecera de página ───────────────────────────────────────── */
.dxi-hero {
	position: relative;
	padding: clamp(8rem, 18vh, 12rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
	overflow: hidden;
	border-bottom: 1px solid var(--hairline);
}
.dxi-hero__glow {
	position: absolute;
	inset: -40% -10% auto 25%;
	height: 70vh;
	background: radial-gradient(46% 52% at 62% 40%, rgba(198, 242, 78, .15), transparent 70%);
	filter: blur(28px);
	pointer-events: none;
}
.dxi-hero__inner {
	position: relative;
	max-width: var(--maxw);
	margin-inline: auto;
}

.dxi-crumbs {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: clamp(1.1rem, 2.4vw, 1.8rem);
	font-size: .8125rem;
	color: var(--fg-soft);
}
.dxi-crumbs a {
	text-decoration: none;
	background-image: linear-gradient(var(--acid), var(--acid));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: color .3s var(--ease-out), background-size .4s var(--ease-out);
}
.dxi-crumbs a:hover { color: var(--acid); background-size: 100% 1px; }
.dxi-crumbs span[aria-hidden] { color: rgba(244, 245, 241, .22); }
.dxi-crumbs [aria-current] { color: var(--fg-muted); }

.dxi-hero__title {
	font-size: clamp(2.3rem, 6.4vw, 4.6rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.042em;
	font-variation-settings: 'opsz' 96;
	max-width: 18ch;
}
.dxi-hero__lead {
	margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
	max-width: 52ch;
	font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
	line-height: 1.6;
	color: var(--fg-muted);
}

/* ── Rejilla: sumario + contenido ─────────────────────────────── */
.dxi-layout {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}
.dxi-layout--wide { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }

/* ── Sumario lateral ──────────────────────────────────────────── */
.dxi-toc__inner { position: sticky; top: 7.5rem; }
.dxi-toc__heading {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--fg-soft);
	margin-bottom: 1rem;
}
.dxi-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .1rem;
	border-left: 1px solid var(--hairline);
}
.dxi-toc li { position: relative; }
.dxi-toc a {
	display: block;
	padding: .5rem 0 .5rem 1rem;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--fg-soft);
	text-decoration: none;
	transition: color .3s var(--ease-out), transform .3s var(--ease-out);
}
.dxi-toc li::before {
	content: '';
	position: absolute;
	left: -1px;
	top: .55rem;
	bottom: .55rem;
	width: 1px;
	background: var(--acid);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .4s var(--ease-out);
}
.dxi-toc a:hover { color: var(--fg); transform: translateX(2px); }
.dxi-toc li.is-current::before { transform: scaleY(1); }
.dxi-toc li.is-current a { color: var(--acid); }

/* ── Prosa ────────────────────────────────────────────────────── */
.dxi-content { min-width: 0; }

.dxi-prose {
	color: var(--fg-muted);
	font-size: clamp(1rem, .97rem + .25vw, 1.09rem);
	line-height: 1.76;
}
.dxi-prose > * + * { margin-top: 1.15em; }
.dxi-prose p { max-width: 68ch; }
.dxi-prose p + p { margin-top: 1.45em; }

.dxi-prose h2,
.dxi-prose h3,
.dxi-prose h4 {
	color: var(--fg);
	max-width: 34ch;
	margin-top: 2.2em;
	margin-bottom: .7em;
}
.dxi-prose h2 {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-variation-settings: 'opsz' 72;
	letter-spacing: -.03em;
}
.dxi-prose h3 {
	font-family: var(--sans);
	font-size: clamp(1.06rem, 1.6vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -.014em;
	line-height: 1.35;
}
.dxi-prose h4 {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.dxi-prose strong, .dxi-prose b { color: var(--fg); font-weight: 600; }
.dxi-prose em, .dxi-prose i { font-style: italic; }

.dxi-prose a {
	color: var(--acid);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .35s var(--ease-out), color .3s var(--ease-out);
}
.dxi-prose a:hover { background-size: 0% 1px; color: #D6FF66; }

.dxi-prose ul, .dxi-prose ol {
	max-width: 66ch;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: .6em;
}
.dxi-prose li { position: relative; padding-left: 1.6em; }
.dxi-prose ul > li::before {
	content: '';
	position: absolute;
	left: .1em;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acid-dim);
}
.dxi-prose ol { counter-reset: dxi-ol; }
.dxi-prose ol > li { counter-increment: dxi-ol; }
.dxi-prose ol > li::before {
	content: counter(dxi-ol);
	position: absolute;
	left: 0;
	top: 0;
	font-variant-numeric: tabular-nums;
	font-size: .82em;
	font-weight: 600;
	color: var(--acid-dim);
	line-height: 1.9;
}
.dxi-prose li > ul, .dxi-prose li > ol { margin-top: .5em; }

.dxi-prose blockquote {
	margin: 2em 0;
	padding-left: clamp(1.1rem, 2.4vw, 1.8rem);
	border-left: 1px solid var(--acid);
	font-family: var(--display);
	font-size: clamp(1.2rem, 2.2vw, 1.55rem);
	line-height: 1.36;
	letter-spacing: -.022em;
	color: var(--fg);
	max-width: 46ch;
}

.dxi-prose img {
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	margin-block: 1.6em;
}

.dxi-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	margin-block: 1.6em;
}
.dxi-prose th, .dxi-prose td {
	text-align: left;
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--hairline);
	vertical-align: top;
}
.dxi-prose th { color: var(--fg); font-weight: 600; }

.dxi-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88em;
	background: rgba(244, 245, 241, .06);
	padding: .15em .4em;
	border-radius: 5px;
	color: var(--fg);
}
.dxi-prose pre {
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 12px;
	padding: 1.1rem 1.3rem;
	overflow-x: auto;
	font-size: .85rem;
	line-height: 1.6;
	margin-block: 1.6em;
}
.dxi-prose pre code { background: none; padding: 0; }

.dxi-rule {
	border: none;
	border-top: 1px solid var(--hairline);
	margin-block: clamp(2rem, 4vw, 3rem);
}

.dxi-h2 {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-variation-settings: 'opsz' 72;
	margin: 2.2em 0 .7em;
}

/* ── Figuras y vídeo ──────────────────────────────────────────── */
.dxi-figure { margin: clamp(1.8rem, 4vw, 2.8rem) 0; }
.dxi-figure__img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: var(--shadow-md);
}
.dxi-figure figcaption {
	margin-top: .8rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--fg-soft);
	max-width: 60ch;
}

.dxi-video {
	position: relative;
	margin: clamp(1.8rem, 4vw, 2.8rem) 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface);
	box-shadow: var(--shadow-md);
	aspect-ratio: 16 / 9;
}
.dxi-video iframe,
.dxi-video video,
.dxi-video embed,
.dxi-video object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Secciones plegables ──────────────────────────────────────── */
.dxi-sections {
	display: grid;
	border-top: 1px solid var(--hairline);
	margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.dxi-section { border-bottom: 1px solid var(--hairline); }

.dxi-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.2rem, 2.4vw, 1.9rem) 0;
	cursor: pointer;
	list-style: none;
}
.dxi-section__head::-webkit-details-marker { display: none; }

.dxi-section__title {
	font-size: clamp(1.2rem, 2.6vw, 1.85rem);
	font-weight: 500;
	letter-spacing: -.032em;
	font-variation-settings: 'opsz' 96;
	transition: color .35s var(--ease-out), transform .45s var(--ease-out);
	max-width: 40ch;
}
.dxi-section__head:hover .dxi-section__title { color: var(--acid); transform: translateX(.35rem); }

.dxi-section__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--hairline-2);
	border-radius: 50%;
	color: var(--fg-muted);
	transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out), transform .45s var(--ease-out);
}
.dxi-section__icon svg { width: 15px; height: 15px; }
.dxi-section__head:hover .dxi-section__icon {
	border-color: var(--acid);
	color: var(--acid);
}
.dxi-section[open] > .dxi-section__head .dxi-section__icon {
	background: var(--acid);
	border-color: var(--acid);
	color: #0A1000;
	transform: rotate(135deg);
}
.dxi-section[open] > .dxi-section__head .dxi-section__title { color: var(--acid); }

.dxi-section__body { padding-bottom: clamp(1.4rem, 2.8vw, 2.2rem); }

/* Apertura animada sin saltos de maquetación. */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
	.dxi-section::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size .5s var(--ease-out), opacity .4s var(--ease-out), content-visibility .5s allow-discrete;
	}
	.dxi-section[open]::details-content { block-size: auto; opacity: 1; }
}

/* ── Listado de entradas ──────────────────────────────────────── */
.dxi-posts {
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: clamp(1.2rem, 2.6vw, 2rem);
}
.dxi-post__link {
	display: grid;
	gap: .9rem;
	text-decoration: none;
	height: 100%;
}
.dxi-post__media {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface);
	aspect-ratio: 16 / 10;
}
.dxi-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.85) contrast(1.05);
	transition: transform .8s var(--ease-out), filter .5s var(--ease-out);
}
.dxi-post__link:hover .dxi-post__media img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
.dxi-post__body { display: grid; gap: .35rem; }
.dxi-post__date {
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fg-soft);
}
.dxi-post__title {
	font-family: var(--sans);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: -.014em;
	color: var(--fg);
	transition: color .3s var(--ease-out);
}
.dxi-post__link:hover .dxi-post__title { color: var(--acid); }
.dxi-post__excerpt { font-size: .875rem; line-height: 1.55; color: var(--fg-soft); }

.dxi-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.dxi-pagination a,
.dxi-pagination span {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	padding: .5rem .8rem;
	border: 1px solid var(--hairline);
	border-radius: 100px;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: var(--fg-muted);
	text-decoration: none;
	transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.dxi-pagination a:hover { border-color: var(--acid); color: var(--acid); }
.dxi-pagination .current { background: var(--acid); border-color: var(--acid); color: #0A1000; font-weight: 600; }

.dxi-cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ── Cierre: llamada a consulta ───────────────────────────────── */
.dxi-next {
	border-top: 1px solid var(--hairline);
	background: var(--ink-2);
	padding: clamp(3rem, 7vw, 5rem) var(--gutter);
}
.dxi-next__inner { max-width: var(--maxw); margin-inline: auto; }
.dxi-next h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-variation-settings: 'opsz' 96;
	margin-bottom: .8rem;
	max-width: 20ch;
}
.dxi-next p { color: var(--fg-muted); max-width: 52ch; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.dxi-next__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ── Adaptación ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
	.dxi-layout { grid-template-columns: minmax(0, 1fr); }
	.dxi-toc__inner { position: static; }
	.dxi-toc {
		border: 1px solid var(--hairline);
		border-radius: 14px;
		padding: 1.2rem 1.3rem;
		background: var(--ink-2);
	}
	.dxi-toc ol { border-left: none; }
	.dxi-toc a { padding-left: 0; }
	.dxi-toc li::before { display: none; }
	.dxi-toc li.is-current a { color: var(--acid); }
}

@media (max-width: 620px) {
	.dxi-hero { padding-top: clamp(6.5rem, 16vh, 9rem); }
	.dxi-next__actions .dx2-btn { flex: 1 1 100%; }
	.dxi-posts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.dxi-section::details-content { transition: none; }
	.dxi-post__media img { transition: none; }
}

@media print {
	.dxi-toc, .dxi-next, .dxi-hero__glow { display: none !important; }
	.dxi-section__body { display: block !important; }
	.dxi-prose { color: #111; }
}

/* ── Entradas del archivo: consulta y respuesta ───────────────── */
.dxi-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: clamp(1rem, 2.2vw, 1.5rem);
	font-size: .8125rem;
	color: var(--fg-soft);
}
.dxi-hero__meta span[aria-hidden] { color: rgba(244, 245, 241, .22); }
.dxi-hero__cats a { color: var(--acid-dim); text-decoration: none; }
.dxi-hero__cats a:hover { color: var(--acid); }

.dxi-qa { position: relative; margin-block: clamp(1.6rem, 3.5vw, 2.6rem); }
.dxi-qa__label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--fg-soft);
	margin-bottom: .9rem;
}
.dxi-qa__source {
	margin-top: 1rem;
	font-size: .75rem;
	color: var(--fg-soft);
	font-variant-numeric: tabular-nums;
}

/* La consulta llega de fuera: se lee como cita. */
.dxi-qa--question {
	padding-left: clamp(1.1rem, 2.4vw, 1.7rem);
	border-left: 1px solid var(--hairline-2);
}
.dxi-qa--question .dxi-prose { color: var(--fg-soft); }
.dxi-qa--question .dxi-prose em { font-style: normal; }

/* La respuesta es la voz de la casa: más presencia. */
.dxi-qa--answer {
	padding-left: clamp(1.1rem, 2.4vw, 1.7rem);
	border-left: 1px solid var(--acid);
}
.dxi-qa--answer .dxi-qa__label { color: var(--acid); }
.dxi-qa--answer .dxi-prose { color: var(--fg-muted); }

/* ── Navegación entre consultas ───────────────────────────────── */
.dxi-adjacent {
	border-top: 1px solid var(--hairline);
	padding: clamp(2rem, 4vw, 3rem) var(--gutter);
}
.dxi-adjacent__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}
.dxi-adjacent__link {
	display: grid;
	gap: .45rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--hairline);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.dxi-adjacent__link:hover {
	border-color: var(--acid);
	background: rgba(198, 242, 78, .04);
	transform: translateY(-2px);
}
.dxi-adjacent__link--next { text-align: right; }
.dxi-adjacent__label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--fg-soft);
}
.dxi-adjacent__title {
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.014em;
	color: var(--fg);
}

/* ── Firma y revisión ─────────────────────────────────────────── */
.dxi-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .7rem;
	margin-top: clamp(1rem, 2.2vw, 1.5rem);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--fg-soft);
}
.dxi-byline span[aria-hidden] { color: rgba(244, 245, 241, .22); }
.dxi-byline strong { color: var(--fg-muted); font-weight: 600; }
.dxi-byline a {
	text-decoration: none;
	background-image: linear-gradient(var(--acid), var(--acid));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .4s var(--ease-out);
}
.dxi-byline a:hover { background-size: 100% 1px; }
.dxi-byline a:hover strong { color: var(--acid); }
