/*
Theme Name: Portaobjetos
Theme URI: https://ejemplo.org/portaobjetos
Author: Estudio de diseño
Author URI: https://ejemplo.org
Description: Tema responsive para bitácoras y enciclopedias de biología. Cada artículo se presenta como una preparación de microscopio: etiqueta de vidrio, ficha taxonómica y un índice organizado por niveles de aumento. Incluye modo campo oscuro, ficha de especie, glosario emergente y bloques de datos. Textos en español y codificación UTF-8.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portaobjetos
Tags: blog, education, one-column, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   ÍNDICE
   01. Fichas de color y tipografía (tokens)
   02. Base y tipografía
   03. Estructura y contenedores
   04. Cabecera y navegación
   05. Portaobjetos (elemento distintivo)
   06. Listados de artículos
   07. Artículo: ficha, aumentos, contenido
   08. Bloques de contenido y atajos
   09. Barra lateral y widgets
   10. Comentarios y formularios
   11. Paginación, búsqueda y 404
   12. Pie de página
   13. Clases de WordPress
   14. Adaptación a pantallas
   15. Accesibilidad y campo oscuro
   ========================================================================== */

/* 01. FICHAS DE COLOR Y TIPOGRAFÍA
   -------------------------------------------------------------------------- */

:root {
	/* Tinción de hematoxilina y eosina: el par de colorantes con el que se
	   observa casi cualquier tejido animal. De ahí sale toda la paleta. */
	--vidrio: #f3f0f7;
	--vidrio-hondo: #e6dfee;
	--papel: #fbfaFD;
	--hematoxilina: #241a47;
	--hematoxilina-media: #574b7d;
	--hematoxilina-tenue: #8d86a8;
	--eosina: #c4326b;
	--eosina-clara: #f4dbe6;
	--malaquita: #12786a;
	--malaquita-clara: #d6ece7;
	--agar: #d99a2b;
	--agar-clara: #f8ecd4;

	--borde: rgba(36, 26, 71, 0.14);
	--borde-firme: rgba(36, 26, 71, 0.28);
	--sombra-baja: 0 1px 2px rgba(36, 26, 71, 0.06), 0 6px 18px -12px rgba(36, 26, 71, 0.4);
	--sombra-alta: 0 2px 4px rgba(36, 26, 71, 0.08), 0 22px 40px -24px rgba(36, 26, 71, 0.5);

	--fuente-display: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;
	--fuente-texto: "Spectral", Georgia, "Times New Roman", serif;
	--fuente-dato: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--medida: 68ch;
	--ancho: 1180px;
	--radio: 3px;
	--paso: clamp(1rem, 0.6rem + 1.6vw, 1.6rem);
	--transicion: 220ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* 02. BASE Y TIPOGRAFÍA
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background-color: var(--vidrio);
	/* Velo de tinción: el fondo imita el halo desigual de una preparación. */
	background-image:
		radial-gradient(58rem 40rem at 12% -8%, rgba(196, 50, 107, 0.07), transparent 60%),
		radial-gradient(50rem 36rem at 92% 4%, rgba(18, 120, 106, 0.07), transparent 62%);
	background-attachment: fixed;
	color: var(--hematoxilina);
	font-family: var(--fuente-texto);
	font-size: 1.0625rem;
	line-height: 1.72;
	font-variant-numeric: oldstyle-nums;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fuente-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem); }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 1.35em; }

a {
	color: var(--eosina);
	text-decoration-color: rgba(196, 50, 107, 0.35);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--transicion), text-decoration-color var(--transicion);
}

a:hover,
a:focus-visible {
	color: var(--hematoxilina);
	text-decoration-color: var(--hematoxilina);
}

img,
svg,
iframe,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

figure { margin: 2.4rem 0; }

blockquote {
	margin: 2.2rem 0;
	padding: 0.2rem 0 0.2rem 1.6rem;
	border-left: 2px solid var(--eosina);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--hematoxilina-media);
}

blockquote cite {
	display: block;
	margin-top: 0.8rem;
	font: 0.75rem/1.4 var(--fuente-dato);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hematoxilina-tenue);
}

code, kbd, pre, samp {
	font-family: var(--fuente-dato);
	font-size: 0.88em;
}

code {
	background: var(--vidrio-hondo);
	padding: 0.12em 0.36em;
	border-radius: var(--radio);
}

pre {
	background: var(--hematoxilina);
	color: var(--vidrio);
	padding: 1.4rem;
	border-radius: var(--radio);
	overflow-x: auto;
	line-height: 1.6;
}

pre code { background: none; color: inherit; }

hr {
	border: 0;
	height: 1px;
	background: var(--borde);
	margin: 3rem 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: 0.95rem;
}

th, td {
	text-align: left;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--borde);
}

th {
	font: 600 0.72rem/1.3 var(--fuente-dato);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
}

ul, ol { padding-left: 1.3rem; margin: 0 0 1.4em; }
li { margin-bottom: 0.4em; }

::selection {
	background: var(--eosina);
	color: #fff;
}

/* Etiquetas de datos: la voz "de laboratorio" del tema. */
.etiqueta-dato {
	font: 500 0.68rem/1.2 var(--fuente-dato);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hematoxilina-tenue);
}

/* 03. ESTRUCTURA Y CONTENEDORES
   -------------------------------------------------------------------------- */

.envoltura {
	width: min(100% - 2.5rem, var(--ancho));
	margin-inline: auto;
}

.sitio-principal {
	padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 5rem;
}

.disposicion {
	display: grid;
	gap: clamp(2.5rem, 1rem + 4vw, 4rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
	.disposicion--con-lateral {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}
}

.progreso-lectura {
	position: fixed;
	inset: 0 auto auto 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--malaquita), var(--eosina));
	z-index: 90;
	transition: width 90ms linear;
}

/* 04. CABECERA Y NAVEGACIÓN
   -------------------------------------------------------------------------- */

.cabecera-sitio {
	position: sticky;
	top: 0;
	z-index: 80;
	background: color-mix(in srgb, var(--vidrio) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--borde);
}

.cabecera-sitio__interior {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	min-height: 4.5rem;
	padding-block: 0.7rem;
}

.marca {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: auto;
	text-decoration: none;
	color: inherit;
}

.marca__sello {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
}

.marca__titulo {
	font-family: var(--fuente-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.marca__lema {
	display: block;
	margin-top: 0.25rem;
	font: 400 0.66rem/1.2 var(--fuente-dato);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hematoxilina-tenue);
}

.marca:hover .marca__titulo { color: var(--eosina); }

.navegacion-principal ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.navegacion-principal li { margin: 0; position: relative; }

.navegacion-principal a {
	font: 500 0.74rem/1 var(--fuente-dato);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hematoxilina);
	text-decoration: none;
	padding: 0.5rem 0;
	display: inline-block;
	border-bottom: 1px solid transparent;
}

.navegacion-principal a:hover,
.navegacion-principal .current-menu-item > a {
	color: var(--eosina);
	border-bottom-color: var(--eosina);
}

/* Submenús */
.navegacion-principal .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 13rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0.6rem 0;
	background: var(--papel);
	border: 1px solid var(--borde);
	box-shadow: var(--sombra-alta);
	border-radius: var(--radio);
}

.navegacion-principal li:hover > .sub-menu,
.navegacion-principal li:focus-within > .sub-menu {
	display: flex;
}

.navegacion-principal .sub-menu a {
	padding: 0.5rem 1rem;
	border-bottom: 0;
}

.acciones-cabecera {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.boton-icono {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--borde);
	border-radius: 50%;
	color: var(--hematoxilina);
	cursor: pointer;
	transition: border-color var(--transicion), color var(--transicion), transform var(--transicion);
}

.boton-icono:hover {
	border-color: var(--eosina);
	color: var(--eosina);
	transform: rotate(-8deg);
}

.boton-icono svg { width: 1.1rem; height: 1.1rem; }

.alternar-menu { display: none; }

.buscador-desplegable {
	display: none;
	padding: 1rem 0 1.4rem;
	border-top: 1px dashed var(--borde);
}

.buscador-desplegable.esta-abierto { display: block; }

/* 05. PORTAOBJETOS — elemento distintivo
   Cada artículo se presenta como una preparación: vidrio, cubreobjetos y
   una etiqueta esmerilada con el número de registro.
   -------------------------------------------------------------------------- */

.portaobjetos {
	position: relative;
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra-baja);
	overflow: hidden;
	transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}

.portaobjetos__etiqueta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 0;
	background:
		repeating-linear-gradient(135deg, rgba(36, 26, 71, 0.05) 0 2px, transparent 2px 5px),
		var(--vidrio-hondo);
	border-right: 1px solid var(--borde);
}

.portaobjetos__registro {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 500 0.68rem/1 var(--fuente-dato);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
	white-space: nowrap;
}

.portaobjetos__cuerpo {
	position: relative;
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}

/* Cubreobjetos: cuadrado translúcido en la esquina, como el vidrio fino
   que cubre la muestra. */
.portaobjetos__cuerpo::after {
	content: "";
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	width: 3.6rem;
	height: 3.6rem;
	border: 1px solid var(--borde);
	background: linear-gradient(135deg, rgba(196, 50, 107, 0.07), rgba(18, 120, 106, 0.07));
	pointer-events: none;
}

.portaobjetos:hover {
	border-color: var(--borde-firme);
	box-shadow: var(--sombra-alta);
	transform: translateY(-3px);
}

.portaobjetos--destacada {
	grid-template-columns: 4.2rem minmax(0, 1fr);
}

/* 06. LISTADOS DE ARTÍCULOS
   -------------------------------------------------------------------------- */

.rotulo-seccion {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.6rem;
}

.rotulo-seccion::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--borde);
}

.rotulo-seccion h2 {
	margin: 0;
	font: 500 0.72rem/1 var(--fuente-dato);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
}

.rejilla-preparaciones {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	margin-bottom: 3rem;
}

.preparacion__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-bottom: 0.9rem;
}

.preparacion__titulo {
	font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
	margin: 0 0 0.6rem;
	padding-right: 3.5rem;
}

.preparacion__titulo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--eosina), var(--eosina));
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--transicion), color var(--transicion);
}

.preparacion__titulo a:hover {
	color: var(--eosina);
	background-size: 100% 1px;
}

.preparacion__extracto {
	margin: 0 0 1.2rem;
	color: var(--hematoxilina-media);
	font-size: 0.97rem;
}

.preparacion__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.2rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--borde);
}

.preparacion__miniatura {
	margin: -1px -1px 1.4rem;
	overflow: hidden;
}

.preparacion__miniatura img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(0.92);
	transition: transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1), filter var(--transicion);
}

.portaobjetos:hover .preparacion__miniatura img {
	transform: scale(1.03);
	filter: saturate(1.05);
}

.portaobjetos__cuerpo > .preparacion__miniatura:first-child {
	margin-top: calc(-1 * clamp(1.4rem, 1rem + 1.6vw, 2.4rem));
	margin-left: calc(-1 * clamp(1.4rem, 1rem + 1.6vw, 2.4rem));
	margin-right: calc(-1 * clamp(1.4rem, 1rem + 1.6vw, 2.4rem));
}

/* Marcas de rama y nivel */
.marca-rama {
	font: 500 0.66rem/1 var(--fuente-dato);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--malaquita);
	text-decoration: none;
	padding: 0.35rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.marca-rama:hover {
	background: var(--malaquita);
	color: #fff;
}

.marca-nivel {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font: 500 0.66rem/1 var(--fuente-dato);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
}

.marca-nivel__barras {
	display: inline-flex;
	gap: 2px;
}

.marca-nivel__barras i {
	width: 3px;
	height: 0.7rem;
	background: var(--borde-firme);
	border-radius: 1px;
}

.marca-nivel__barras i.activa { background: var(--agar); }

/* Introducción del portada */
.presentacion {
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	max-width: 46rem;
}

.presentacion__ojo {
	display: inline-block;
	margin-bottom: 1rem;
	font: 500 0.7rem/1 var(--fuente-dato);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--eosina);
}

.presentacion h1 {
	margin-bottom: 1rem;
}

.presentacion h1 em {
	font-style: italic;
	color: var(--eosina);
}

.presentacion p {
	font-size: 1.15rem;
	color: var(--hematoxilina-media);
	max-width: 42rem;
}

/* 07. ARTÍCULO
   -------------------------------------------------------------------------- */

.articulo-cabecera {
	margin-bottom: 2.5rem;
}

.articulo-cabecera__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.2rem;
	margin-bottom: 1.4rem;
}

.articulo-titulo {
	margin-bottom: 1rem;
}

.articulo-entradilla {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--hematoxilina-media);
	max-width: var(--medida);
	margin-bottom: 1.6rem;
}

.articulo-portada {
	margin: 0 0 2.5rem;
}

.articulo-portada img {
	width: 100%;
	border-radius: var(--radio);
}

.articulo-portada figcaption,
.wp-caption-text,
.wp-element-caption {
	margin-top: 0.7rem;
	font: 400 0.78rem/1.5 var(--fuente-dato);
	color: var(--hematoxilina-tenue);
}

/* Ficha de especie: la tarjeta taxonómica */
.ficha-especie {
	margin: 0 0 2.5rem;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-top: 3px solid var(--malaquita);
	border-radius: var(--radio);
	padding: 1.4rem 1.5rem;
}

.ficha-especie__titulo {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font: 500 0.68rem/1 var(--fuente-dato);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--malaquita);
}

.ficha-especie__binomio {
	font-family: var(--fuente-display);
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: var(--hematoxilina);
}

.ficha-especie dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.9rem 1.2rem;
	margin: 0;
}

.ficha-especie dt {
	font: 500 0.62rem/1.2 var(--fuente-dato);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hematoxilina-tenue);
	margin-bottom: 0.2rem;
}

.ficha-especie dd {
	margin: 0;
	font-size: 0.95rem;
}

/* Índice por aumentos: el nivel de encabezado se lee como el revólver de
   objetivos del microscopio (10× para h2, 40× para h3). */
.aumentos {
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.3rem 1.5rem;
	margin: 0 0 2.5rem;
}

.aumentos__titulo {
	margin: 0 0 0.9rem;
	font: 500 0.68rem/1 var(--fuente-dato);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
}

.aumentos ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: aumento;
}

.aumentos li {
	margin: 0;
	border-top: 1px dashed var(--borde);
}

.aumentos li:first-child { border-top: 0; }

.aumentos a {
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr);
	gap: 0.8rem;
	align-items: baseline;
	padding: 0.55rem 0;
	color: var(--hematoxilina);
	text-decoration: none;
}

.aumentos a::before {
	content: attr(data-aumento);
	font: 500 0.66rem/1.5 var(--fuente-dato);
	letter-spacing: 0.08em;
	color: var(--eosina);
}

.aumentos a:hover { color: var(--eosina); }

.aumentos .es-nivel-2 a { padding-left: 1.2rem; font-size: 0.93rem; color: var(--hematoxilina-media); }

/* Cuerpo del artículo */
.contenido-articulo {
	max-width: var(--medida);
	font-size: 1.09rem;
}

.contenido-articulo > * { margin-inline: auto; }

.contenido-articulo h2 {
	margin-top: 3rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--borde);
}

.contenido-articulo h3 { margin-top: 2.2rem; }

.contenido-articulo > p:first-of-type::first-letter {
	float: left;
	font-family: var(--fuente-display);
	font-size: 4.2rem;
	line-height: 0.82;
	padding: 0.1em 0.12em 0 0;
	color: var(--eosina);
}

.enlace-permanente-titulo {
	color: var(--hematoxilina-tenue);
	text-decoration: none;
	opacity: 0;
	font-size: 0.7em;
	margin-left: 0.4rem;
	transition: opacity var(--transicion);
}

.contenido-articulo h2:hover .enlace-permanente-titulo,
.contenido-articulo h3:hover .enlace-permanente-titulo { opacity: 1; }

/* Pie del artículo */
.articulo-pie {
	max-width: var(--medida);
	margin: 3rem auto 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--borde);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	align-items: center;
	justify-content: space-between;
}

.lista-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lista-etiquetas a {
	font: 500 0.66rem/1 var(--fuente-dato);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hematoxilina-media);
	padding: 0.35rem 0.55rem;
	background: var(--vidrio-hondo);
	border-radius: var(--radio);
}

.lista-etiquetas a:hover { background: var(--eosina); color: #fff; }

.navegacion-preparaciones {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin: 3rem 0;
}

.navegacion-preparaciones a {
	display: block;
	padding: 1.1rem 1.3rem;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	text-decoration: none;
	color: var(--hematoxilina);
}

.navegacion-preparaciones a:hover { border-color: var(--eosina); }

.navegacion-preparaciones span {
	display: block;
	margin-bottom: 0.4rem;
	font: 500 0.64rem/1 var(--fuente-dato);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hematoxilina-tenue);
}

.navegacion-preparaciones strong {
	font-family: var(--fuente-display);
	font-size: 1.05rem;
	font-weight: 600;
}

.navegacion-preparaciones .es-siguiente { text-align: right; }

.relacionados { margin: 3.5rem 0 0; }

/* 08. BLOQUES DE CONTENIDO Y ATAJOS
   -------------------------------------------------------------------------- */

.nota-dato,
.nota-alerta,
.nota-campo {
	position: relative;
	margin: 2.2rem 0;
	padding: 1.3rem 1.5rem 1.3rem 1.6rem;
	border-radius: var(--radio);
	font-size: 1rem;
}

.nota-dato {
	background: var(--malaquita-clara);
	border-left: 3px solid var(--malaquita);
}

.nota-alerta {
	background: var(--eosina-clara);
	border-left: 3px solid var(--eosina);
}

.nota-campo {
	background: var(--agar-clara);
	border-left: 3px solid var(--agar);
}

.nota-dato__rotulo,
.nota-alerta__rotulo,
.nota-campo__rotulo {
	display: block;
	margin-bottom: 0.5rem;
	font: 500 0.66rem/1 var(--fuente-dato);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.nota-dato__rotulo { color: var(--malaquita); }
.nota-alerta__rotulo { color: var(--eosina); }
.nota-campo__rotulo { color: #a3701a; }

.nota-dato p:last-child,
.nota-alerta p:last-child,
.nota-campo p:last-child { margin-bottom: 0; }

/* Término de glosario */
.termino {
	position: relative;
	border-bottom: 1px dotted var(--malaquita);
	color: inherit;
	cursor: help;
}

.termino__definicion {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: min(20rem, 70vw);
	padding: 0.8rem 0.95rem;
	background: var(--hematoxilina);
	color: var(--vidrio);
	font: 400 0.85rem/1.5 var(--fuente-texto);
	border-radius: var(--radio);
	box-shadow: var(--sombra-alta);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
	z-index: 20;
}

.termino:hover .termino__definicion,
.termino:focus-visible .termino__definicion {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.escala-grafica {
	display: inline-flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 1.5rem 0;
	font: 500 0.66rem/1 var(--fuente-dato);
	letter-spacing: 0.12em;
	color: var(--hematoxilina-media);
}

.escala-grafica::before {
	content: "";
	display: block;
	width: 6rem;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--hematoxilina) 0 1rem, var(--vidrio) 1rem 2rem);
	border: 1px solid var(--hematoxilina);
}

/* 09. BARRA LATERAL Y WIDGETS
   -------------------------------------------------------------------------- */

.barra-lateral {
	display: grid;
	gap: 1.6rem;
	align-content: start;
}

@media (min-width: 62rem) {
	.barra-lateral { position: sticky; top: 6rem; }
}

.widget {
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.3rem 1.4rem;
	font-size: 0.95rem;
}

.widget-title,
.widget h2 {
	margin: 0 0 0.9rem;
	font: 500 0.68rem/1 var(--fuente-dato);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	padding: 0.45rem 0;
	border-top: 1px dashed var(--borde);
}

.widget li:first-child { border-top: 0; }

.widget a { text-decoration: none; color: var(--hematoxilina); }
.widget a:hover { color: var(--eosina); }

.tarjeta-autoria {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.4rem;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	margin: 3rem 0 0;
}

.tarjeta-autoria img { border-radius: 50%; flex: none; }

.tarjeta-autoria h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.tarjeta-autoria p { margin: 0; font-size: 0.93rem; color: var(--hematoxilina-media); }

/* 10. COMENTARIOS Y FORMULARIOS
   -------------------------------------------------------------------------- */

.zona-comentarios {
	max-width: var(--medida);
	margin: 3.5rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--borde);
}

.lista-comentarios,
.lista-comentarios .children {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lista-comentarios .children { padding-left: 1.5rem; border-left: 1px solid var(--borde); margin-top: 1.2rem; }

.lista-comentarios li { margin-bottom: 1.6rem; }

.comentario-cuerpo {
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.2rem 1.3rem;
}

.comentario-encabezado {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.7rem;
}

.comentario-encabezado img { border-radius: 50%; }

.comentario-autor { font-weight: 600; font-family: var(--fuente-display); }

.comentario-fecha,
.comment-reply-link {
	font: 500 0.66rem/1 var(--fuente-dato);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hematoxilina-tenue);
	text-decoration: none;
}

.comment-reply-link:hover { color: var(--eosina); }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font-family: var(--fuente-texto);
	font-size: 1rem;
	color: var(--hematoxilina);
	background: var(--papel);
	border: 1px solid var(--borde-firme);
	border-radius: var(--radio);
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--eosina);
	box-shadow: 0 0 0 3px rgba(196, 50, 107, 0.16);
}

label {
	display: block;
	margin-bottom: 0.35rem;
	font: 500 0.66rem/1.2 var(--fuente-dato);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hematoxilina-media);
}

.comment-form p { margin-bottom: 1.1rem; }

button,
input[type="submit"],
.boton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.4rem;
	font: 500 0.72rem/1 var(--fuente-dato);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--hematoxilina);
	border: 1px solid var(--hematoxilina);
	border-radius: var(--radio);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

button:hover,
input[type="submit"]:hover,
.boton:hover {
	background: var(--eosina);
	border-color: var(--eosina);
	color: #fff;
}

.boton-icono:hover { background: transparent; }

/* 11. PAGINACIÓN, BÚSQUEDA Y 404
   -------------------------------------------------------------------------- */

.paginacion {
	margin: 2.5rem 0 0;
}

.paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.paginacion .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	font: 500 0.74rem/1 var(--fuente-dato);
	color: var(--hematoxilina);
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	text-decoration: none;
}

.paginacion .page-numbers:hover,
.paginacion .page-numbers.current {
	background: var(--hematoxilina);
	border-color: var(--hematoxilina);
	color: var(--vidrio);
}

.formulario-busqueda {
	display: flex;
	gap: 0.6rem;
	align-items: stretch;
}

.formulario-busqueda input[type="search"] { flex: 1; }

.sin-resultados {
	background: var(--papel);
	border: 1px dashed var(--borde-firme);
	border-radius: var(--radio);
	padding: clamp(1.6rem, 1rem + 2vw, 3rem);
	max-width: 40rem;
}

.pagina-404 {
	text-align: center;
	max-width: 34rem;
	margin-inline: auto;
	padding: clamp(2rem, 1rem + 4vw, 5rem) 0;
}

.pagina-404 svg { margin: 0 auto 2rem; }

/* 12. PIE DE PÁGINA
   -------------------------------------------------------------------------- */

.pie-sitio {
	background: var(--hematoxilina);
	color: var(--vidrio-hondo);
	padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 2rem;
}

.pie-sitio a { color: var(--vidrio); text-decoration-color: rgba(255, 255, 255, 0.35); }
.pie-sitio a:hover { color: #fff; text-decoration-color: #fff; }

.pie-sitio__rejilla {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	padding-bottom: 2.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.pie-sitio h2,
.pie-sitio .widget-title {
	font: 500 0.68rem/1 var(--fuente-dato);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 0.9rem;
}

.pie-sitio .widget {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

.pie-sitio .widget li { border-color: rgba(255, 255, 255, 0.14); }
.pie-sitio .widget a { color: var(--vidrio-hondo); }

.pie-sitio__cierre {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.6rem;
	font: 400 0.72rem/1.5 var(--fuente-dato);
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
}

.pie-sitio__firma {
	font-family: var(--fuente-display);
	font-size: 1.3rem;
	color: #fff;
	margin: 0 0 0.6rem;
	letter-spacing: -0.01em;
}

/* 13. CLASES DE WORDPRESS
   -------------------------------------------------------------------------- */

.alignleft { float: left; margin: 0.4rem 1.8rem 1.2rem 0; }
.alignright { float: right; margin: 0.4rem 0 1.2rem 1.8rem; }
.aligncenter { margin-inline: auto; }

.alignwide {
	width: min(100vw - 3rem, 76rem);
	max-width: none;
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.wp-caption { max-width: 100%; }

.sticky .portaobjetos { border-color: var(--eosina); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.saltar-al-contenido {
	position: absolute;
	left: 1rem;
	top: -100%;
	z-index: 200;
	padding: 0.8rem 1.2rem;
	background: var(--hematoxilina);
	color: #fff;
	border-radius: var(--radio);
	text-decoration: none;
	transition: top var(--transicion);
}

.saltar-al-contenido:focus { top: 1rem; color: #fff; }

.gallery {
	display: grid;
	gap: 0.8rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	margin: 2rem 0;
}

.gallery-item { margin: 0; }

.bypostauthor > .comentario-cuerpo { border-left: 3px solid var(--malaquita); }

/* 14. ADAPTACIÓN A PANTALLAS
   -------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
	.alternar-menu { display: grid; }

	.navegacion-principal {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--papel);
		border-bottom: 1px solid var(--borde);
		box-shadow: var(--sombra-alta);
		padding: 1rem 1.25rem 1.6rem;
	}

	.navegacion-principal.esta-abierta { display: block; }

	.navegacion-principal ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.navegacion-principal li { border-top: 1px dashed var(--borde); }
	.navegacion-principal li:first-child { border-top: 0; }

	.navegacion-principal a {
		display: block;
		padding: 0.85rem 0;
		font-size: 0.8rem;
	}

	.navegacion-principal .sub-menu {
		display: block;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 0.5rem 1rem;
		background: none;
		min-width: 0;
	}

	.navegacion-principal .sub-menu a { padding: 0.6rem 0; }
}

@media (max-width: 40rem) {
	body { font-size: 1rem; }

	.portaobjetos,
	.portaobjetos--destacada {
		grid-template-columns: minmax(0, 1fr);
	}

	.portaobjetos__etiqueta {
		border-right: 0;
		border-bottom: 1px solid var(--borde);
		padding: 0.55rem 1rem;
		justify-content: flex-start;
	}

	.portaobjetos__registro {
		writing-mode: horizontal-tb;
		transform: none;
		letter-spacing: 0.2em;
	}

	.portaobjetos__cuerpo::after { display: none; }
	.preparacion__titulo { padding-right: 0; }
	.contenido-articulo > p:first-of-type::first-letter { font-size: 3.4rem; }
	.articulo-pie { flex-direction: column; align-items: flex-start; }
	.navegacion-preparaciones .es-siguiente { text-align: left; }
	.alignleft, .alignright { float: none; margin: 1.5rem 0; }
}

/* 15. ACCESIBILIDAD Y CAMPO OSCURO
   -------------------------------------------------------------------------- */

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

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

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

/* Campo oscuro: en microscopía, la muestra se ilumina de lado y resalta
   sobre un fondo negro. Aquí es el modo de lectura nocturna. */
[data-tema="oscuro"] {
	--vidrio: #131120;
	--vidrio-hondo: #1e1b2e;
	--papel: #191627;
	--hematoxilina: #ece7f6;
	--hematoxilina-media: #b0a8c8;
	--hematoxilina-tenue: #857c9e;
	--eosina: #ff7aa8;
	--eosina-clara: rgba(255, 122, 168, 0.13);
	--malaquita: #45d3b6;
	--malaquita-clara: rgba(69, 211, 182, 0.12);
	--agar: #f0b657;
	--agar-clara: rgba(240, 182, 87, 0.12);
	--borde: rgba(236, 231, 246, 0.14);
	--borde-firme: rgba(236, 231, 246, 0.3);
	--sombra-baja: 0 1px 2px rgba(0, 0, 0, 0.5);
	--sombra-alta: 0 20px 40px -24px rgba(0, 0, 0, 0.9);
}

[data-tema="oscuro"] body {
	background-image:
		radial-gradient(58rem 40rem at 12% -8%, rgba(255, 122, 168, 0.1), transparent 60%),
		radial-gradient(50rem 36rem at 92% 4%, rgba(69, 211, 182, 0.1), transparent 62%);
}

[data-tema="oscuro"] .nota-campo__rotulo { color: var(--agar); }

[data-tema="oscuro"] button,
[data-tema="oscuro"] input[type="submit"],
[data-tema="oscuro"] .boton {
	background: var(--eosina);
	border-color: var(--eosina);
	color: #17121f;
}

[data-tema="oscuro"] .pie-sitio {
	background: #0e0c17;
	border-top: 1px solid var(--borde);
}

[data-tema="oscuro"] .termino__definicion {
	background: #0e0c17;
	border: 1px solid var(--borde);
}

[data-tema="oscuro"] pre { background: #0e0c17; }

[data-tema="oscuro"] .paginacion .page-numbers:hover,
[data-tema="oscuro"] .paginacion .page-numbers.current {
	background: var(--eosina);
	border-color: var(--eosina);
	color: #17121f;
}

/* 16. AJUSTES FINALES
   -------------------------------------------------------------------------- */

.taxon { font-style: italic; }

.taxon__autoria {
	font: 400 0.78em/1.4 var(--fuente-dato);
	color: var(--hematoxilina-tenue);
}

.aumentos a.esta-a-la-vista {
	color: var(--eosina);
	font-weight: 600;
}

.pie-sitio ul,
.menu-pie {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pie-sitio li {
	padding: 0.35rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pie-sitio li:first-child { border-top: 0; }

.marca__sello { color: var(--eosina); }

.widget .formulario-busqueda { flex-direction: column; }
.widget .formulario-busqueda button { justify-content: center; }