/* =====================================================================
   IDEASPARA.ME — SISTEMA DE DISEÑO PROPIO · main.css
   Tema WordPress a medida (standalone). Blog "ideas para X" + curso de
   inglés. Estética: editorial cálida, moderna 2026, ámbar → coral.
   CSS limpio sobre markup propio ip-* (controlamos el HTML): sin peleas
   de cascada, sin !important salvo caso justificado y comentado.

   ÍNDICE
   1.  Design tokens (:root) + modo oscuro (body.ip-dark)
   2.  Reset / base + tipografía de lectura
   3.  Accesibilidad: skip-link + focus-visible
   4.  Layout: contenedor + main
   5.  Header sticky (marca, nav, search, toggles)
   6.  Menú móvil (panel desplegable)
   7.  Botones / CTA de acento
   8.  Pill de categoría
   9.  Hero de portada editorial
   10. Grid + tarjetas ip-card
   11. Single: cabecera, contenido de lectura, TOC, tags, nav post
   12. Sidebar / widgets
   13. Archive / search / 404
   14. Paginación numérica
   15. Comentarios
   16. Footer oscuro cálido + volver-arriba
   17. Microinteracciones: reveal + reduced-motion
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   Paleta cálida "ideas": ámbar → coral. Un único gradiente de acento,
   usado con moderación (marca, CTA, pills, subrayados) para que conserve
   valor de estatus y no sature. Neutros cálidos (no grises fríos) para
   sensación editorial y acogedora.
   --------------------------------------------------------------------- */
:root {
	/* — Acento cálido — */
	--ip-amber: #FFB347;
	--ip-coral: #FF6B6B;
	--ip-coral-deep: #E8474B;                 /* coral oscurecido: contraste AA sobre blanco para texto/enlaces */
	--ip-accent-grad: linear-gradient(135deg, var(--ip-amber) 0%, var(--ip-coral) 100%);
	--ip-accent-glow: rgba(255, 107, 107, 0.30); /* halo coral para sombras de CTA */

	/* — Neutros cálidos — */
	--ip-bg: #FAFAF7;
	--ip-surface: #FFFFFF;
	--ip-surface-2: #F3F1EC;
	--ip-text: #1F1F1D;
	--ip-text-soft: #57534E;
	--ip-text-faint: #79716B;
	--ip-hairline: rgba(31, 31, 29, 0.08);
	--ip-hairline-strong: rgba(31, 31, 29, 0.14);

	/* — Cristal del header sticky — */
	--ip-glass: rgba(255, 255, 255, 0.72);

	/* — Radios generosos — */
	--ip-radius-sm: 10px;
	--ip-radius: 14px;
	--ip-radius-lg: 18px;
	--ip-radius-xl: 24px;
	--ip-radius-pill: 999px;

	/* — Sombras en capas suaves (profundidad realista, no un solo blur) — */
	--ip-shadow-sm: 0 1px 2px rgba(31, 31, 29, 0.05), 0 2px 6px rgba(31, 31, 29, 0.04);
	--ip-shadow: 0 1px 2px rgba(31, 31, 29, 0.05), 0 4px 12px rgba(31, 31, 29, 0.06), 0 12px 28px rgba(31, 31, 29, 0.07);
	--ip-shadow-lg: 0 2px 4px rgba(31, 31, 29, 0.06), 0 10px 24px rgba(31, 31, 29, 0.09), 0 24px 48px rgba(255, 107, 107, 0.10);

	/* — Tipografía de sistema (0 requests, render nativo, rápido LCP) — */
	--ip-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	/* — Escala de espaciado (base 8pt) — */
	--ip-space-1: 4px;
	--ip-space-2: 8px;
	--ip-space-3: 16px;
	--ip-space-4: 24px;
	--ip-space-5: 32px;
	--ip-space-6: 48px;
	--ip-space-7: 64px;

	/* — Anchuras — */
	--ip-container: 1200px;
	--ip-reading: 70ch;

	/* — Movimiento (easing suave con overshoot elegante) — */
	--ip-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ip-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ip-speed: 0.35s;
	--ip-speed-fast: 0.2s;

	color-scheme: light;
}

/* ---- MODO OSCURO PROPIO (body.ip-dark) ----------------------------
   Tokens invertidos: neutros oscuros cálidos (no negros puros, para que
   la lectura nocturna sea suave). El coral se aclara a #FF8A8A para
   mantener contraste AA de enlaces sobre fondo oscuro. Diseñado como
   tema de primera clase, no como parche. ------------------------------ */
body.ip-dark {
	--ip-bg: #17171a;
	--ip-surface: #1f1f23;
	--ip-surface-2: #26262b;
	--ip-text: #f2efe9;
	--ip-text-soft: #c9c4bc;
	--ip-text-faint: #98928a;
	--ip-hairline: rgba(255, 255, 255, 0.09);
	--ip-hairline-strong: rgba(255, 255, 255, 0.16);

	--ip-coral-deep: #FF8A8A;                 /* acento aclarado: AA sobre oscuro */
	--ip-accent-glow: rgba(255, 138, 138, 0.28);
	--ip-glass: rgba(23, 23, 26, 0.72);

	--ip-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.30);
	--ip-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.35);
	--ip-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(255, 107, 107, 0.14);

	color-scheme: dark;
}


/* ---------------------------------------------------------------------
   2. RESET / BASE + TIPOGRAFÍA
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;                  /* deja aire bajo el header sticky al saltar por anclas (TOC) */
}

body {
	margin: 0;
	background-color: var(--ip-bg);
	color: var(--ip-text);
	font-family: var(--ip-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;                        /* garantía anti scroll horizontal */
	transition: background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease);
}

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

a { color: var(--ip-coral-deep); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ip-font);
	color: var(--ip-text);
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;                        /* titulares equilibrados, sin viudas feas */
	margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

::selection { background: var(--ip-amber); color: #1F1F1D; }
body.ip-dark ::selection { background: var(--ip-coral); color: #17171a; }


/* ---------------------------------------------------------------------
   3. ACCESIBILIDAD: SKIP-LINK + FOCUS VISIBLE
   Skip-link oculto que aparece al recibir foco (teclado). Foco visible
   coherente y de alto contraste en todo el sitio (AA).
   --------------------------------------------------------------------- */
.ip-skiplink {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1200;
	transform: translateY(-160%);
	background: var(--ip-text);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--ip-radius-sm);
	font-weight: 700;
	box-shadow: var(--ip-shadow-lg);
	transition: transform var(--ip-speed) var(--ip-ease);
}
.ip-skiplink:focus { transform: translateY(0); outline: 3px solid var(--ip-amber); outline-offset: 2px; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--ip-coral);
	outline-offset: 2px;
	border-radius: 4px;
}


/* ---------------------------------------------------------------------
   4. LAYOUT: CONTENEDOR + MAIN
   --------------------------------------------------------------------- */
.ip-container {
	width: 100%;
	max-width: var(--ip-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 5vw, 40px);
}

.ip-main {
	display: block;
	padding-block: clamp(28px, 5vw, 56px);
	min-height: 60vh;
}


/* ---------------------------------------------------------------------
   5. HEADER STICKY
   Cristal esmerilado (backdrop blur) + hairline inferior. Se mantiene
   ligero y editorial. Grid de 3 zonas: marca | nav | acciones.
   --------------------------------------------------------------------- */
.ip-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--ip-glass);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	backdrop-filter: saturate(170%) blur(16px);
	border-bottom: 1px solid var(--ip-hairline);
}
/* Fallback sólido si el navegador no soporta backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ip-header { background: var(--ip-surface); }
}

.ip-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	min-height: 68px;
	padding-block: 10px;
}

/* Marca */
.ip-brand { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: auto; }
.ip-brand img, .ip-brand .custom-logo { max-height: 46px; width: auto; }
.ip-brand__text {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ip-text);
	background: var(--ip-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: filter var(--ip-speed-fast) var(--ip-ease);
}
.ip-brand__text b { font-weight: 800; }
.ip-brand:hover .ip-brand__text { filter: brightness(1.08); }

/* Navegación principal (desktop) */
.ip-nav { flex: 0 1 auto; }
.ip-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 22px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ip-nav a {
	position: relative;
	display: inline-block;
	padding: 6px 2px;
	color: var(--ip-text);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color var(--ip-speed-fast) var(--ip-ease);
}
/* Subrayado animado (solo transform → sin reflow, CLS 0) */
.ip-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--ip-accent-grad);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ip-speed) var(--ip-ease);
}
.ip-nav a:hover,
.ip-nav .current-menu-item > a,
.ip-nav .current_page_item > a { color: var(--ip-coral-deep); }
.ip-nav a:hover::after,
.ip-nav .current-menu-item > a::after,
.ip-nav .current_page_item > a::after { transform: scaleX(1); }

/* Submenús como tarjetas flotantes */
.ip-nav .sub-menu {
	position: absolute;
	min-width: 200px;
	margin-top: 10px;
	padding: 6px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius);
	box-shadow: var(--ip-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--ip-speed-fast) var(--ip-ease), transform var(--ip-speed-fast) var(--ip-ease), visibility var(--ip-speed-fast);
	z-index: 20;
}
.ip-nav li { position: relative; }
.ip-nav li:hover > .sub-menu,
.ip-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ip-nav .sub-menu a { display: block; padding: 8px 12px; border-radius: var(--ip-radius-sm); font-weight: 500; }
.ip-nav .sub-menu a::after { content: none; }
.ip-nav .sub-menu a:hover { background: var(--ip-surface-2); color: var(--ip-coral-deep); }

/* Búsqueda */
.ip-search { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ip-search input[type="search"],
.ip-search .search-field {
	width: clamp(120px, 16vw, 200px);
	height: 40px;
	padding: 0 14px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline-strong);
	border-radius: var(--ip-radius-pill) 0 0 var(--ip-radius-pill);
	color: var(--ip-text);
	font: inherit;
	font-size: 0.9rem;
	transition: border-color var(--ip-speed-fast) var(--ip-ease), box-shadow var(--ip-speed-fast) var(--ip-ease), width var(--ip-speed) var(--ip-ease);
}
.ip-search input[type="search"]:focus,
.ip-search .search-field:focus {
	outline: none;
	border-color: var(--ip-coral);
	box-shadow: 0 0 0 3px var(--ip-accent-glow);
}
.ip-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	margin-left: -1px;
	background: var(--ip-accent-grad);
	color: #fff;
	border: none;
	border-radius: 0 var(--ip-radius-pill) var(--ip-radius-pill) 0;
	cursor: pointer;
	transition: filter var(--ip-speed-fast) var(--ip-ease);
}
.ip-search button:hover { filter: saturate(1.15) brightness(1.04); }
.ip-search svg { width: 18px; height: 18px; }

/* Toggles (menú móvil + tema) como chips accesibles */
.ip-nav-toggle,
.ip-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	background: var(--ip-surface-2);
	color: var(--ip-text);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius-pill);
	cursor: pointer;
	transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease), transform var(--ip-speed-fast) var(--ip-ease);
}
.ip-nav-toggle:hover,
.ip-theme-toggle:hover { color: var(--ip-coral-deep); transform: translateY(-1px); }
.ip-nav-toggle svg,
.ip-theme-toggle svg { width: 20px; height: 20px; }
.ip-nav-toggle { display: none; }              /* solo visible en móvil (ver §6) */

/* Icono tema: mostrar sol u luna según el modo activo.
   El markup incluye ambos SVG (.ip-icon-sun / .ip-icon-moon); el CSS
   decide cuál se ve, sin depender del JS más que de la clase ip-dark. */
.ip-theme-toggle .ip-icon-moon { display: none; }
.ip-theme-toggle .ip-icon-sun { display: block; }
body.ip-dark .ip-theme-toggle .ip-icon-sun { display: none; }
body.ip-dark .ip-theme-toggle .ip-icon-moon { display: block; }


/* ---------------------------------------------------------------------
   6. MENÚ MÓVIL (panel desplegable)
   El JS alterna aria-expanded en .ip-nav-toggle. Estilamos el panel
   .ip-nav como capa deslizante. Sin scroll horizontal.
   --------------------------------------------------------------------- */
@media (max-width: 1379px) {
	.ip-nav-toggle { display: inline-flex; order: 3; }
	.ip-search { order: 4; }
	.ip-theme-toggle { order: 2; }
	.ip-brand { order: 1; }

	.ip-search input[type="search"],
	.ip-search .search-field { width: clamp(110px, 34vw, 180px); }

	/* Panel de navegación desplegable */
	.ip-nav {
		order: 5;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ip-surface);
		border-bottom: 1px solid var(--ip-hairline);
		box-shadow: var(--ip-shadow);
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transition: max-height var(--ip-speed) var(--ip-ease), opacity var(--ip-speed) var(--ip-ease), visibility var(--ip-speed);
	}
	/* Doble vía de apertura: atributo del botón (hermano previo) Y clase
	   en body que pone theme.js — redundancia deliberada para máxima
	   compatibilidad entre motores. */
	.ip-nav-toggle[aria-expanded="true"] ~ .ip-nav,
	body.ip-menu-open .ip-nav {
		max-height: 80vh;
		overflow-y: auto;
		visibility: visible;
		opacity: 1;
	}
	.ip-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px; }
	.ip-nav li { width: 100%; }
	.ip-nav a { display: block; padding: 14px 16px; border-radius: var(--ip-radius-sm); }
	.ip-nav a::after { content: none; }
	.ip-nav a:hover,
	.ip-nav .current-menu-item > a { background: var(--ip-surface-2); }

	/* Submenús en línea (acordeón visual simple) */
	.ip-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		margin: 0 0 4px;
		padding: 0 0 0 12px;
		background: transparent;
	}
	.ip-header__inner { position: relative; flex-wrap: wrap; }
}

/* Animación del icono hamburguesa → equis (si el markup usa <span> barras).
   Si el markup intercambia SVG por CSS, este bloque es inocuo. */
.ip-nav-toggle[aria-expanded="true"] { background: var(--ip-accent-grad); color: #fff; border-color: transparent; }


/* ---------------------------------------------------------------------
   7. BOTONES / CTA DE ACENTO
   Un patrón de botón reutilizable: gradiente ámbar-coral, elevación en
   hover con halo coral. Estados hover/active/focus definidos.
   --------------------------------------------------------------------- */
.ip-btn,
.ip-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	background: var(--ip-accent-grad);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: none;
	border-radius: var(--ip-radius-pill);
	cursor: pointer;
	box-shadow: 0 4px 14px var(--ip-accent-glow);
	transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), filter var(--ip-speed) var(--ip-ease);
}
.ip-btn:hover,
.ip-hero__cta:hover {
	color: #fff;
	transform: translateY(-2px);
	filter: saturate(1.12) brightness(1.03);
	box-shadow: 0 10px 24px var(--ip-accent-glow);
}
.ip-btn:active,
.ip-hero__cta:active { transform: translateY(0); box-shadow: 0 3px 8px var(--ip-accent-glow); }
.ip-btn svg,
.ip-hero__cta svg { width: 18px; height: 18px; }


/* ---------------------------------------------------------------------
   8. PILL DE CATEGORÍA
   Etiqueta de categoría con gradiente. Compacta, uppercase, con halo.
   Reutilizada en card, hero y single.
   --------------------------------------------------------------------- */
.ip-pill {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 13px;
	background: var(--ip-accent-grad);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.5;
	border-radius: var(--ip-radius-pill);
	box-shadow: 0 2px 8px var(--ip-accent-glow);
	transition: transform var(--ip-speed-fast) var(--ip-ease), box-shadow var(--ip-speed-fast) var(--ip-ease), filter var(--ip-speed-fast) var(--ip-ease);
}
.ip-pill:hover {
	color: #fff;
	transform: translateY(-1px);
	filter: saturate(1.15);
	box-shadow: 0 4px 12px var(--ip-accent-glow);
}


/* ---------------------------------------------------------------------
   9. HERO DE PORTADA EDITORIAL
   Post destacado: imagen grande + pill + título potente + excerpt + CTA.
   Título SIEMPRE debajo/junto a la imagen, nunca quemado encima.
   Layout de 2 columnas en desktop, apilado en móvil.
   --------------------------------------------------------------------- */
.ip-hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
	margin-bottom: clamp(36px, 6vw, 64px);
}
.ip-hero__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--ip-radius-xl);
	box-shadow: var(--ip-shadow-lg);
	aspect-ratio: 16 / 10;
}
.ip-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ip-ease);
}
.ip-hero:hover .ip-hero__media img { transform: scale(1.03); }
.ip-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ip-hero__title {
	font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0;
}
.ip-hero__title a { color: inherit; transition: color var(--ip-speed-fast) var(--ip-ease); }
.ip-hero__title a:hover { color: var(--ip-coral-deep); }
.ip-hero__excerpt {
	font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
	line-height: 1.6;
	color: var(--ip-text-soft);
	margin: 0;
	max-width: 52ch;
}
.ip-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	color: var(--ip-text-faint);
	font-size: 0.85rem;
}

@media (max-width: 780px) {
	.ip-hero { grid-template-columns: 1fr; }
	.ip-hero__media { aspect-ratio: 16 / 9; }
}


/* ---------------------------------------------------------------------
   10. GRID + TARJETAS ip-card
   Grid responsive: 3 col desktop / 2 tablet / 1 móvil (auto-fit).
   Card: superficie elevada, hover translateY(-4px) + sombra en capas +
   zoom de imagen scale(1.04) con overflow hidden. Solo transform en
   hover → CLS 0. Sin texto sobre la imagen.
   --------------------------------------------------------------------- */
.ip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 980px) { .ip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ip-grid { grid-template-columns: 1fr; } }

.ip-card {
	display: flex;
	flex-direction: column;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
	overflow: hidden;
	transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), border-color var(--ip-speed) var(--ip-ease);
}
.ip-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ip-shadow-lg);
	border-color: color-mix(in srgb, var(--ip-coral) 28%, transparent);
}

/* Media: contenedor con relación de aspecto fija (reserva espacio → CLS 0) */
.ip-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10.5;
	background: var(--ip-surface-2);
}
.ip-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ip-ease);
}
.ip-card:hover .ip-card__media img { transform: scale(1.04); }
/* Placeholder con gradiente si el post no tiene imagen */
.ip-card__media:empty::after,
.ip-card__media.is-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--ip-surface-2), color-mix(in srgb, var(--ip-amber) 22%, var(--ip-surface-2)));
}

.ip-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 22px 24px;
	flex: 1 1 auto;
}
.ip-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
	margin: 0;
}
/* Título con subrayado de acento que crece al hover (background-size, sin reflow) */
.ip-card__title a {
	color: var(--ip-text);
	background-image: linear-gradient(var(--ip-coral-deep), var(--ip-coral-deep));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	padding-bottom: 1px;
	transition: color var(--ip-speed-fast) var(--ip-ease), background-size var(--ip-speed) var(--ip-ease);
}
.ip-card:hover .ip-card__title a,
.ip-card__title a:hover { color: var(--ip-coral-deep); background-size: 100% 2px; }

.ip-card__excerpt {
	color: var(--ip-text-soft);
	font-size: 0.94rem;
	line-height: 1.6;
	margin: 0;
	flex: 1 1 auto;
}

/* Meta discreta: autor · fecha · lectura */
.ip-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin-top: 2px;
	color: var(--ip-text-faint);
	font-size: 0.8rem;
}
.ip-card__meta > * { display: inline-flex; align-items: center; }
/* Separadores en punto medio entre items de meta */
.ip-card__meta > * + *::before {
	content: "·";
	margin-right: 12px;
	color: var(--ip-text-faint);
}
.ip-meta__author { color: var(--ip-text-soft); font-weight: 600; }
.ip-meta__read {
	padding: 2px 9px;
	background: var(--ip-surface-2);
	border-radius: var(--ip-radius-pill);
}
.ip-meta__read::before { content: none !important; } /* la píldora no lleva separador de punto */


/* ---------------------------------------------------------------------
   11. SINGLE: LECTURA
   Ancho de lectura 70ch, tipografía placentera (17→19px, line-height 1.7),
   jerarquía H2/H3, blockquote, imágenes con radius, tablas, breadcrumb,
   nav post, TOC del plugin, tags.
   --------------------------------------------------------------------- */
.ip-single {
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius-xl);
	box-shadow: var(--ip-shadow-sm);
	padding: clamp(22px, 4vw, 48px);
	margin-inline: auto;
	max-width: 860px;
}

/* Breadcrumb (Yoast) */
.ip-breadcrumb {
	font-size: 0.85rem;
	color: var(--ip-text-faint);
	margin-bottom: 18px;
}
.ip-breadcrumb a { color: var(--ip-text-faint); transition: color var(--ip-speed-fast) var(--ip-ease); }
.ip-breadcrumb a:hover { color: var(--ip-coral-deep); }
.ip-breadcrumb .breadcrumb_last,
.ip-breadcrumb [aria-current] { color: var(--ip-text); font-weight: 600; }

/* Cabecera del artículo */
.ip-single__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 24px;
}
.ip-single__title {
	font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0;
}
.ip-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	color: var(--ip-text-faint);
	font-size: 0.88rem;
}
.ip-single__meta a { color: var(--ip-text-soft); font-weight: 600; }
.ip-single__meta a:hover { color: var(--ip-coral-deep); }

/* Imagen destacada del single */
.ip-single__figure,
.ip-single > figure {
	margin: 0 0 28px;
	border-radius: var(--ip-radius-lg);
	overflow: hidden;
	box-shadow: var(--ip-shadow-sm);
}
.ip-single__figure img { width: 100%; }

/* ---- Cuerpo de lectura (.ip-content .entry-content) ---- */
.ip-content {
	max-width: var(--ip-reading);
	margin-inline: auto;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.7;
	color: var(--ip-text-soft);
}
.ip-content p { margin: 0 0 1.4em; }
.ip-content > *:first-child { margin-top: 0; }

.ip-content h2,
.ip-content h3,
.ip-content h4 {
	color: var(--ip-text);
	line-height: 1.25;
	margin: 1.8em 0 0.55em;
}
.ip-content h2 {
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
	font-weight: 800;
	padding-top: 0.2em;
}
/* Barrita de acento junto al H2 para jerarquía clara */
.ip-content h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	margin-bottom: 0.5em;
	border-radius: 4px;
	background: var(--ip-accent-grad);
}
.ip-content h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); font-weight: 700; }
.ip-content h4 { font-size: 1.15rem; font-weight: 700; }

/* Enlaces del contenido: subrayado fino de acento */
.ip-content a {
	color: var(--ip-coral-deep);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--ip-coral-deep) 42%, transparent);
	transition: text-decoration-color var(--ip-speed-fast) var(--ip-ease);
}
.ip-content a:hover { text-decoration-color: var(--ip-coral-deep); }

/* Listas */
.ip-content ul, .ip-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.ip-content li { margin: 0.4em 0; }
.ip-content ul li::marker { color: var(--ip-coral-deep); }
.ip-content ol li::marker { color: var(--ip-coral-deep); font-weight: 700; }

/* Imágenes con radius y sombra */
.ip-content img { border-radius: var(--ip-radius); box-shadow: var(--ip-shadow-sm); margin: 0.6em 0; }
.ip-content figure { margin: 1.8em 0; }
.ip-content figcaption { margin-top: 0.6em; font-size: 0.85rem; color: var(--ip-text-faint); text-align: center; }
.ip-content .alignleft { float: left; margin: 0.4em 1.6em 1em 0; max-width: 50%; }
.ip-content .alignright { float: right; margin: 0.4em 0 1em 1.6em; max-width: 50%; }
.ip-content .aligncenter { display: block; margin-inline: auto; }

/* Blockquote elegante con filo de gradiente */
.ip-content blockquote {
	position: relative;
	margin: 1.9em 0;
	padding: 1.2em 1.5em;
	background: var(--ip-surface-2);
	border-left: 4px solid transparent;
	border-image: linear-gradient(180deg, var(--ip-amber), var(--ip-coral)) 1;
	border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
	color: var(--ip-text);
	font-style: italic;
	font-size: 1.05em;
	box-shadow: var(--ip-shadow-sm);
}
.ip-content blockquote p:last-child { margin-bottom: 0; }
.ip-content blockquote cite { display: block; margin-top: 0.6em; font-style: normal; font-weight: 700; font-size: 0.85em; color: var(--ip-text-faint); }

/* Código */
.ip-content code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--ip-surface-2);
	padding: 0.15em 0.45em;
	border-radius: 6px;
}
.ip-content pre {
	overflow-x: auto;
	background: #1f1f23;
	color: #f2efe9;
	padding: 18px 20px;
	border-radius: var(--ip-radius);
	margin: 1.6em 0;
	font-size: 0.9rem;
	line-height: 1.6;
}
.ip-content pre code { background: none; padding: 0; color: inherit; }

/* Regla horizontal decorativa */
.ip-content hr {
	border: none;
	height: 3px;
	width: 88px;
	margin: 2.4em auto;
	border-radius: 3px;
	background: var(--ip-accent-grad);
}

/* Tablas: scrolleables en móvil (envueltas en overflow-x por el markup o de fábrica) */
.ip-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: 0.95em;
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius);
	overflow: hidden;
	display: table;
}
.ip-content thead th {
	background: var(--ip-surface-2);
	color: var(--ip-text);
	font-weight: 700;
	text-align: left;
}
.ip-content th, .ip-content td { padding: 12px 16px; border-bottom: 1px solid var(--ip-hairline); }
.ip-content tbody tr:last-child td { border-bottom: none; }
.ip-content tbody tr:hover { background: color-mix(in srgb, var(--ip-amber) 8%, transparent); }
/* Contenedor scrollable para tablas anchas (si el markup lo añade) */
.ip-content .ip-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- TOC (plugin table-of-contents-plus, #toc_container) ---- */
#toc_container {
	background: var(--ip-surface-2);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius);
	box-shadow: var(--ip-shadow-sm);
	padding: 18px 22px;
	margin: 1.6em auto 2em;
	width: auto;
	max-width: var(--ip-reading);
	font-size: 0.95rem;
}
#toc_container .toc_title {
	font-family: var(--ip-font);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ip-text);
	margin-bottom: 0.5em;
}
#toc_container .toc_title + .toc_toggle,
#toc_container .toc_toggle { font-weight: 500; }
#toc_container .toc_toggle a { color: var(--ip-coral-deep); }
#toc_container ul.toc_list { margin: 0.6em 0 0; padding-left: 1.1em; }
#toc_container ul.toc_list li { margin: 0.4em 0; }
#toc_container ul.toc_list li::marker { color: var(--ip-coral-deep); }
#toc_container ul.toc_list a {
	color: var(--ip-text-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--ip-speed-fast) var(--ip-ease), border-color var(--ip-speed-fast) var(--ip-ease);
}
#toc_container ul.toc_list a:hover {
	color: var(--ip-coral-deep);
	border-bottom-color: color-mix(in srgb, var(--ip-coral-deep) 40%, transparent);
}

/* ---- Tags del artículo ---- */
.ip-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2.2em 0 0;
	padding-top: 1.6em;
	border-top: 1px solid var(--ip-hairline);
}
.ip-tags a {
	padding: 5px 13px;
	background: var(--ip-surface-2);
	color: var(--ip-text-soft);
	font-size: 0.82rem;
	font-weight: 600;
	border-radius: var(--ip-radius-pill);
	transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease);
}
.ip-tags a:hover { background: var(--ip-accent-grad); color: #fff; }

/* ---- Navegación anterior / siguiente post ---- */
.ip-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 2.4em;
}
.ip-post-nav a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius);
	box-shadow: var(--ip-shadow-sm);
	transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), border-color var(--ip-speed) var(--ip-ease);
}
.ip-post-nav a:hover { transform: translateY(-3px); box-shadow: var(--ip-shadow); border-color: color-mix(in srgb, var(--ip-coral) 24%, transparent); }
.ip-post-nav .ip-post-nav__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ip-text-faint); font-weight: 700; }
.ip-post-nav .ip-post-nav__title { color: var(--ip-text); font-weight: 700; line-height: 1.3; }
.ip-post-nav a:hover .ip-post-nav__title { color: var(--ip-coral-deep); }
.ip-post-nav .ip-post-nav--next { text-align: right; align-items: flex-end; }
@media (max-width: 560px) { .ip-post-nav { grid-template-columns: 1fr; } .ip-post-nav .ip-post-nav--next { text-align: left; align-items: flex-start; } }


/* ---------------------------------------------------------------------
   12. SIDEBAR / WIDGETS
   --------------------------------------------------------------------- */
.ip-sidebar { display: flex; flex-direction: column; gap: 24px; }
.ip-sidebar .widget,
.ip-sidebar .ip-widget {
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
	padding: 22px 24px;
}
.ip-sidebar .widget-title,
.ip-sidebar .widgettitle {
	position: relative;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 16px;
	padding-left: 36px;
}
.ip-sidebar .widget-title::before,
.ip-sidebar .widgettitle::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 26px; height: 4px;
	border-radius: 4px;
	background: var(--ip-accent-grad);
}
.ip-sidebar ul { list-style: none; margin: 0; padding: 0; }
.ip-sidebar li { padding: 8px 0; border-bottom: 1px solid var(--ip-hairline); }
.ip-sidebar li:last-child { border-bottom: none; }
.ip-sidebar a { color: var(--ip-text-soft); transition: color var(--ip-speed-fast) var(--ip-ease); }
.ip-sidebar a:hover { color: var(--ip-coral-deep); }


/* ---------------------------------------------------------------------
   13. ARCHIVE / SEARCH / 404
   --------------------------------------------------------------------- */
.ip-archive__head,
.ip-search-head,
.ip-404 {
	margin-bottom: clamp(24px, 4vw, 44px);
}
.ip-archive__head h1,
.ip-search-head h1,
.ip-404 h1 {
	font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 10px;
}
.ip-archive__head p,
.ip-search-head p { color: var(--ip-text-soft); font-size: 1.05rem; max-width: 60ch; }
/* Título con pincelada de acento en la palabra buscada / categoría */
.ip-archive__head .ip-accent,
.ip-search-head .ip-accent {
	background: var(--ip-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Bloque vacío (sin resultados) */
.ip-empty {
	text-align: center;
	padding: clamp(32px, 6vw, 64px) 20px;
	background: var(--ip-surface);
	border: 1px dashed var(--ip-hairline-strong);
	border-radius: var(--ip-radius-lg);
}
.ip-empty p { color: var(--ip-text-soft); font-size: 1.1rem; }

/* 404: buscador + enlaces a categorías top */
.ip-404 { text-align: center; padding-block: clamp(28px, 6vw, 60px); }
.ip-404__code {
	font-size: clamp(4rem, 3rem + 8vw, 8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: var(--ip-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 12px;
}
.ip-404 .ip-search { justify-content: center; margin: 24px auto; }
.ip-404__cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.ip-404__cats a { padding: 8px 18px; background: var(--ip-surface-2); border-radius: var(--ip-radius-pill); color: var(--ip-text-soft); font-weight: 600; transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease); }
.ip-404__cats a:hover { background: var(--ip-accent-grad); color: #fff; }


/* ---------------------------------------------------------------------
   14. PAGINACIÓN NUMÉRICA
   --------------------------------------------------------------------- */
.ip-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(36px, 6vw, 56px);
}
.ip-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius-sm);
	color: var(--ip-text-soft);
	font-weight: 600;
	transition: transform var(--ip-speed) var(--ip-ease), background var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), border-color var(--ip-speed) var(--ip-ease);
}
.ip-pagination a.page-numbers:hover {
	color: #fff;
	background: var(--ip-accent-grad);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px var(--ip-accent-glow);
}
.ip-pagination .page-numbers.current {
	color: #fff;
	background: var(--ip-accent-grad);
	border-color: transparent;
	box-shadow: 0 4px 10px var(--ip-accent-glow);
}
.ip-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.ip-pagination .page-numbers svg { width: 16px; height: 16px; }


/* ---------------------------------------------------------------------
   15. COMENTARIOS
   --------------------------------------------------------------------- */
.ip-single .comment-respond,
.comment-respond {
	margin-top: 2.6em;
	padding: 26px 28px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
}
.comment-reply-title { font-weight: 800; letter-spacing: -0.01em; }
.comment-list { list-style: none; margin: 1.8em 0 0; padding: 0; }
.comment-list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--ip-hairline); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--ip-bg);
	border: 1px solid var(--ip-hairline-strong);
	border-radius: var(--ip-radius-sm);
	color: var(--ip-text);
	font: inherit;
	transition: border-color var(--ip-speed-fast) var(--ip-ease), box-shadow var(--ip-speed-fast) var(--ip-ease);
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--ip-coral);
	box-shadow: 0 0 0 3px var(--ip-accent-glow);
}
.comment-form .submit,
.comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	background: var(--ip-accent-grad);
	color: #fff;
	font-weight: 700;
	border: none;
	border-radius: var(--ip-radius-pill);
	cursor: pointer;
	box-shadow: 0 4px 12px var(--ip-accent-glow);
	transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), filter var(--ip-speed) var(--ip-ease);
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	transform: translateY(-2px);
	filter: saturate(1.12) brightness(1.03);
	box-shadow: 0 8px 20px var(--ip-accent-glow);
}


/* ---------------------------------------------------------------------
   16. FOOTER OSCURO CÁLIDO + VOLVER ARRIBA
   Footer siempre oscuro (independiente del tema): cierra la página con
   peso visual y contraste editorial. 100% propio, sin crédito de terceros.
   --------------------------------------------------------------------- */
.ip-footer {
	position: relative;
	margin-top: clamp(48px, 8vw, 96px);
	background: linear-gradient(180deg, #201d1a 0%, #171513 100%);
	border-top: 1px solid rgba(255, 179, 71, 0.16);
	color: #d6d0c8;
}
.ip-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(24px, 4vw, 48px);
	padding-block: clamp(40px, 6vw, 64px);
}
.ip-footer__brand p { color: #a39c92; margin-top: 12px; max-width: 34ch; line-height: 1.6; }
.ip-footer__brand .ip-brand__text { -webkit-text-fill-color: transparent; }
.ip-footer h2,
.ip-footer .widget-title,
.ip-footer .widgettitle {
	color: #f5efe6;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.ip-footer ul { list-style: none; margin: 0; padding: 0; }
.ip-footer li { padding: 6px 0; }
.ip-footer a { color: #d6d0c8; transition: color var(--ip-speed-fast) var(--ip-ease), padding-left var(--ip-speed-fast) var(--ip-ease); }
.ip-footer a:hover { color: var(--ip-amber); padding-left: 4px; }

.ip-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ip-footer__bottom p { margin: 0; color: #a39c92; font-size: 0.875rem; }
.ip-footer__bottom nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ip-footer__bottom nav a { color: #a39c92; font-size: 0.875rem; }
.ip-footer__bottom nav a:hover { color: var(--ip-amber); }

@media (max-width: 860px) { .ip-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ip-footer__cols { grid-template-columns: 1fr; } .ip-footer__bottom { flex-direction: column; align-items: flex-start; } }

/* Botón volver-arriba flotante con gradiente */
.ip-totop {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 900;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ip-accent-grad);
	color: #fff;
	border: none;
	border-radius: var(--ip-radius-pill);
	box-shadow: var(--ip-shadow-lg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.9);
	transition: opacity var(--ip-speed) var(--ip-ease), transform var(--ip-speed) var(--ip-ease), visibility var(--ip-speed), box-shadow var(--ip-speed) var(--ip-ease);
}
/* El JS añade .is-visible tras 400px de scroll */
.ip-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ip-totop:hover { transform: translateY(-3px) scale(1.05); filter: saturate(1.1) brightness(1.04); }
.ip-totop svg { width: 22px; height: 22px; }


/* ---------------------------------------------------------------------
   17. MICROINTERACCIONES: REVEAL + REDUCED MOTION
   El estado oculto SOLO se aplica cuando el JS marcó html.js-reveal-ready
   (progressive enhancement: sin JS, todo el contenido queda visible).
   --------------------------------------------------------------------- */
html.js-reveal-ready .js-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s var(--ip-ease-out), transform 0.6s var(--ip-ease-out);
	will-change: opacity, transform;
}
html.js-reveal-ready .js-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Respeto total a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;    /* justificado: neutraliza CUALQUIER animación de terceros/plugins */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	html.js-reveal-ready .js-reveal { opacity: 1; transform: none; }
	.ip-card:hover,
	.ip-card:hover .ip-card__media img,
	.ip-hero:hover .ip-hero__media img,
	.ip-pagination a.page-numbers:hover,
	.ip-post-nav a:hover,
	.ip-btn:hover,
	.ip-hero__cta:hover,
	.ip-totop:hover { transform: none; }
}


/* =====================================================================
   18. CLASES BEM DE LAS PLANTILLAS (append)
   El agente de PHP usó una nomenclatura BEM más granular que el contrato.
   Este bloque estila esas clases dentro del MISMO sistema (mismos tokens,
   misma coherencia visual y modo oscuro por herencia de variables).
   No modifica nada anterior; solo añade y afina puntos estructurales
   descubiertos al leer el markup real.
   ===================================================================== */

/* ---- 18.1 Iconos SVG inline ---------------------------------------
   Todos los iconos del tema llevan .ip-icon. Color heredado (currentColor),
   tamaño por atributos width/height del SVG; aquí garantizamos alineación
   y el intercambio de estados sin depender del JS más que de una clase. */
.ip-icon {
	flex: 0 0 auto;
	display: block;
	fill: none;
	stroke: currentColor;
	vertical-align: middle;
	pointer-events: none;                       /* el click siempre lo recibe el botón, no el SVG */
}

/* Menú hamburguesa: se ve "abrir" por defecto; con el menú abierto
   (body.ip-menu-open, que activa el JS junto a aria-expanded) muta a la X. */
.ip-nav-toggle .ip-icon--close { display: none; }
body.ip-menu-open .ip-nav-toggle .ip-icon--open { display: none; }
body.ip-menu-open .ip-nav-toggle .ip-icon--close { display: block; }

/* Toggle de tema: sol en modo claro, luna en modo oscuro (body.ip-dark). */
.ip-theme-toggle .ip-icon--moon { display: none; }
.ip-theme-toggle .ip-icon--sun { display: block; }
body.ip-dark .ip-theme-toggle .ip-icon--sun { display: none; }
body.ip-dark .ip-theme-toggle .ip-icon--moon { display: block; }


/* ---- 18.2 Marca, menú y búsqueda (clases explícitas) --------------- */
.ip-brand__link { display: inline-flex; align-items: center; text-decoration: none; }

/* La <ul> del menú (primary o fallback de categorías). El layout ya viene
   de .ip-nav ul; aquí normalizamos por si la clase se usa aislada. */
.ip-menu { list-style: none; margin: 0; padding: 0; }
.ip-menu--fallback .cat-item { list-style: none; }   /* wp_list_categories emite li.cat-item */

/* Campo e botón de búsqueda (equivalen a los selectores de elemento del §5;
   se declaran explícitos para robustez si cambia el elemento interno). */
.ip-search__input {
	width: clamp(120px, 16vw, 200px);
	height: 40px;
	padding: 0 14px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline-strong);
	border-radius: var(--ip-radius-pill) 0 0 var(--ip-radius-pill);
	color: var(--ip-text);
	font: inherit;
	font-size: 0.9rem;
	transition: border-color var(--ip-speed-fast) var(--ip-ease), box-shadow var(--ip-speed-fast) var(--ip-ease);
}
.ip-search__input:focus {
	outline: none;
	border-color: var(--ip-coral);
	box-shadow: 0 0 0 3px var(--ip-accent-glow);
}
.ip-search__input::placeholder { color: var(--ip-text-faint); opacity: 1; }
.ip-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	margin-left: -1px;
	flex: 0 0 auto;
	background: var(--ip-accent-grad);
	color: #fff;
	border: none;
	border-radius: 0 var(--ip-radius-pill) var(--ip-radius-pill) 0;
	cursor: pointer;
	transition: filter var(--ip-speed-fast) var(--ip-ease);
}
.ip-search__submit:hover { filter: saturate(1.15) brightness(1.04); }
@media (max-width: 860px) {
	.ip-search__input { width: clamp(110px, 34vw, 180px); }
}


/* ---- 18.3 Layouts de 2 columnas (single / page) -------------------
   Rejilla contenido + barra lateral, coherente con .ip-sidebar. La
   columna principal gobierna el ancho; el artículo llena su columna
   (dentro, .ip-content sigue capando la lectura a 70ch). */
.ip-single-layout,
.ip-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 320px);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
.ip-single-layout__main,
.ip-page-layout__main { min-width: 0; }         /* evita desbordes de contenido ancho (tablas, pre) */
.ip-single-layout__main .ip-single,
.ip-page-layout__main .ip-single,
.ip-page-layout__main .ip-page { max-width: none; }

/* La barra lateral es sticky en pantallas amplias (acompaña la lectura). */
@media (min-width: 981px) {
	.ip-single-layout .ip-sidebar,
	.ip-page-layout .ip-sidebar { position: sticky; top: 88px; }
}
/* Sin sidebar activa (body.ip-no-sidebar) o en móvil: una sola columna. */
@media (max-width: 980px) {
	.ip-single-layout,
	.ip-page-layout { grid-template-columns: 1fr; }
}
body.ip-no-sidebar .ip-single-layout,
body.ip-no-sidebar .ip-page-layout { grid-template-columns: 1fr; }
body.ip-no-sidebar .ip-single,
body.ip-no-sidebar .ip-page { margin-inline: auto; max-width: 860px; }

/* Figura de imagen destacada del single/page (contrato usaba __figure;
   el markup real emite .ip-single__media). */
.ip-single__media {
	margin: 0 0 28px;
	border-radius: var(--ip-radius-lg);
	overflow: hidden;
	box-shadow: var(--ip-shadow-sm);
}
.ip-single__media img { width: 100%; display: block; }

/* Separador de la miga de pan */
.ip-breadcrumb__sep { margin-inline: 8px; color: var(--ip-text-faint); }


/* ---- 18.4 Placeholders sin imagen (card / hero) -------------------
   Span que rellena el hueco de la imagen destacada con un degradado
   cálido de marca en lugar de un vacío. */
.ip-card__placeholder,
.ip-hero__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 120% at 15% 15%, color-mix(in srgb, var(--ip-amber) 34%, var(--ip-surface-2)) 0%, transparent 55%),
		linear-gradient(135deg, var(--ip-surface-2) 0%, color-mix(in srgb, var(--ip-coral) 20%, var(--ip-surface-2)) 100%);
}
/* Sello discreto de marca sobre el placeholder */
.ip-card__placeholder::after,
.ip-hero__placeholder::after {
	content: "ideaspara";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: clamp(1rem, 0.8rem + 1.4vw, 1.6rem);
	color: color-mix(in srgb, var(--ip-text) 26%, transparent);
}
.ip-hero__media, .ip-card__media { position: relative; }


/* ---- 18.5 Meta: fecha ---------------------------------------------- */
.ip-meta__date { color: inherit; white-space: nowrap; }


/* ---- 18.6 Paginación intra-entrada (wp_link_pages) ----------------- */
.ip-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 2em 0 0;
	padding-top: 1.4em;
	border-top: 1px solid var(--ip-hairline);
	font-size: 0.95rem;
}
.ip-page-links__label { font-weight: 700; color: var(--ip-text); margin-right: 4px; }
.ip-page-links a,
.ip-page-links > span:not(.ip-page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: var(--ip-radius-sm);
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	color: var(--ip-text-soft);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease), transform var(--ip-speed-fast) var(--ip-ease);
}
.ip-page-links a:hover { color: #fff; background: var(--ip-accent-grad); border-color: transparent; transform: translateY(-1px); }
.ip-page-links > span:not(.ip-page-links__label) { background: var(--ip-accent-grad); color: #fff; border-color: transparent; } /* página actual */


/* ---- 18.7 Etiquetas del artículo (label + .ip-tag) ----------------- */
.ip-tags__label {
	display: inline-flex;
	align-items: center;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ip-text);
	margin-right: 2px;
}
.ip-tag {
	display: inline-block;
	padding: 5px 13px;
	background: var(--ip-surface-2);
	color: var(--ip-text-soft);
	font-size: 0.82rem;
	font-weight: 600;
	border-radius: var(--ip-radius-pill);
	text-decoration: none;
	transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease), transform var(--ip-speed-fast) var(--ip-ease);
}
.ip-tag:hover { background: var(--ip-accent-grad); color: #fff; transform: translateY(-1px); }


/* ---- 18.8 Navegación entre entradas (clases reales) ----------------
   El enlace lleva .ip-post-nav__link + modificador __prev / __next.
   (Afina lo definido en §11, que apuntaba al <a> genérico.) */
.ip-post-nav__link { text-decoration: none; }
.ip-post-nav__prev { align-items: flex-start; text-align: left; }
.ip-post-nav__next { align-items: flex-end; text-align: right; }
.ip-post-nav__next .ip-post-nav__label::before { content: ""; }
@media (max-width: 560px) {
	.ip-post-nav__next { align-items: flex-start; text-align: left; }
}


/* ---- 18.9 Archivo: título, descripción y contador ------------------ */
.ip-archive__title {
	font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 10px;
}
.ip-archive__desc {
	color: var(--ip-text-soft);
	font-size: 1.05rem;
	max-width: 62ch;
	line-height: 1.6;
}
.ip-archive__desc p { margin: 0.4em 0; }
.ip-archive__count {
	display: inline-block;
	margin-top: 12px;
	padding: 4px 14px;
	background: var(--ip-surface-2);
	border-radius: var(--ip-radius-pill);
	color: var(--ip-text-soft);
	font-size: 0.85rem;
	font-weight: 600;
}


/* ---- 18.10 Estado vacío (sin entradas / sin resultados) ------------ */
.ip-empty__title {
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
.ip-empty__text { color: var(--ip-text-soft); font-size: 1.05rem; margin-bottom: 20px; }
.ip-empty .ip-search { justify-content: center; margin-inline: auto; max-width: 360px; }


/* ---- 18.11 Página 404 (clases reales) ------------------------------
   .ip-404__cats es un contenedor en bloque (título + lista); la lista
   .ip-404__cats-list es la que se muestra como fila de pills. Reajusta
   el flex genérico del §13 para no afectar al <h2>. */
.ip-404__title {
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 12px;
}
.ip-404__text {
	color: var(--ip-text-soft);
	font-size: 1.08rem;
	line-height: 1.6;
	max-width: 56ch;
	margin-inline: auto;
}
.ip-404__search { display: flex; justify-content: center; margin: 26px auto; }
.ip-404__search .ip-search { margin: 0; }
.ip-404__home { margin-top: 26px; }
.ip-404__cats { display: block; margin-top: 32px; }   /* anula el flex del §13 en este contenedor */
.ip-404__cats-title {
	font-size: 0.9rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ip-text-faint);
	margin-bottom: 14px;
}
.ip-404__cats-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.ip-404__cats-list li { margin: 0; }
.ip-404__cats-list a {
	display: inline-block;
	padding: 8px 18px;
	background: var(--ip-surface-2);
	color: var(--ip-text-soft);
	font-weight: 600;
	border-radius: var(--ip-radius-pill);
	text-decoration: none;
	transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease);
}
.ip-404__cats-list a:hover { background: var(--ip-accent-grad); color: #fff; }


/* ---- 18.12 Comentarios (contenedor propio .ip-comments) ------------ */
.ip-comments {
	margin-top: 2.6em;
	padding-top: 2em;
	border-top: 1px solid var(--ip-hairline);
}
.ip-comments__title {
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 1em;
}
.ip-comments__list {
	list-style: none;
	margin: 0 0 1.8em;
	padding: 0;
}
.ip-comments__list .children { list-style: none; margin: 0; padding-left: clamp(16px, 4vw, 40px); }
.ip-comments__list .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--ip-hairline);
}
.ip-comments__list .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ip-comments__list .comment-author .avatar { border-radius: var(--ip-radius-pill); }
.ip-comments__list .comment-metadata { font-size: 0.8rem; color: var(--ip-text-faint); }
.ip-comments__list .comment-metadata a { color: var(--ip-text-faint); }
.ip-comments__list .reply a {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ip-coral-deep);
}
.ip-comments__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 1.6em 0;
}
.ip-comments__nav a,
.ip-comments__nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--ip-radius-sm);
	background: var(--ip-surface);
	border: 1px solid var(--ip-hairline);
	color: var(--ip-text-soft);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--ip-speed-fast) var(--ip-ease), color var(--ip-speed-fast) var(--ip-ease);
}
.ip-comments__nav a:hover { background: var(--ip-accent-grad); color: #fff; border-color: transparent; }
.ip-comments__nav .current { background: var(--ip-accent-grad); color: #fff; border-color: transparent; }
.ip-comments__closed {
	padding: 14px 18px;
	background: var(--ip-surface-2);
	border-radius: var(--ip-radius-sm);
	color: var(--ip-text-faint);
	font-size: 0.9rem;
	text-align: center;
}

/* Formulario de comentarios: campos con clase propia */
.ip-comment-form__notes {
	color: var(--ip-text-faint);
	font-size: 0.88rem;
	margin-bottom: 1em;
}
.ip-comment-form__field { margin-bottom: 16px; }
.ip-comment-form__field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ip-text);
}
.ip-comment-form__field input,
.ip-comment-form__field textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--ip-bg);
	border: 1px solid var(--ip-hairline-strong);
	border-radius: var(--ip-radius-sm);
	color: var(--ip-text);
	font: inherit;
	transition: border-color var(--ip-speed-fast) var(--ip-ease), box-shadow var(--ip-speed-fast) var(--ip-ease);
}
.ip-comment-form__field input:focus,
.ip-comment-form__field textarea:focus {
	outline: none;
	border-color: var(--ip-coral);
	box-shadow: 0 0 0 3px var(--ip-accent-glow);
}
.ip-comment-form__field textarea { min-height: 140px; resize: vertical; }
.ip-comment-form__field--full { width: 100%; }
/* Los campos autor/email/url del layout por defecto en dos columnas cuando caben */
@media (min-width: 620px) {
	.ip-comment-form .comment-form-author,
	.ip-comment-form .comment-form-email { display: inline-block; width: calc(50% - 8px); }
	.ip-comment-form .comment-form-author { margin-right: 12px; }
}


/* ---- 18.13 Footer: columnas, copy, tagline y títulos de widget ----- */
.ip-footer__col :where(ul) { list-style: none; margin: 0; padding: 0; }
.ip-footer__col--1 { /* gancho de columna, ancho lo da la rejilla del §16 */ }
.ip-footer__col--2 { }
.ip-footer__col--3 { }
.ip-footer__copy { margin: 0; color: #a39c92; font-size: 0.875rem; }
.ip-footer__tagline { color: #a39c92; margin-top: 12px; max-width: 34ch; line-height: 1.6; }

/* Título de widget (área lateral y pie usan la misma clase .ip-widget__title) */
.ip-widget { margin-bottom: 4px; }
.ip-widget__title {
	position: relative;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 16px;
}
/* En la barra lateral: barrita de acento a la izquierda */
.ip-sidebar .ip-widget__title { padding-left: 36px; }
.ip-sidebar .ip-widget__title::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 26px; height: 4px;
	border-radius: 4px;
	background: var(--ip-accent-grad);
}
/* En el pie: mayúsculas y color claro sobre el fondo oscuro */
.ip-footer .ip-widget__title {
	color: #f5efe6;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding-left: 0;
}
.ip-footer .ip-widget__title::before { content: none; }


/* ---- 18.14 Reajuste estructural de la paginación numérica ----------
   the_posts_pagination envuelve los .page-numbers en un .nav-links y
   antepone un <h2.screen-reader-text>. La fila flex debe vivir en
   .nav-links, no en el <nav>. */
nav.ip-pagination { display: block; text-align: center; }
nav.ip-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}


/* ---- 18.15 Modo oscuro: matices para el append --------------------
   Casi todo hereda de las variables invertidas. Solo se afinan piezas
   con color literal o que ganan con un fondo algo más elevado. */
body.ip-dark .ip-search__input,
body.ip-dark .ip-comment-form__field input,
body.ip-dark .ip-comment-form__field textarea { background: var(--ip-surface-2); }
body.ip-dark .ip-tag,
body.ip-dark .ip-404__cats-list a,
body.ip-dark .ip-page-links a,
body.ip-dark .ip-page-links > span:not(.ip-page-links__label),
body.ip-dark .ip-comments__nav a { background: var(--ip-surface-2); }
body.ip-dark .ip-card__placeholder::after,
body.ip-dark .ip-hero__placeholder::after { color: color-mix(in srgb, var(--ip-text) 30%, transparent); }

/* ============================================================
   19. Fix determinista del fondo en modo oscuro
   El navegador no re-resuelve var(--ip-bg) en background-color del
   body al conmutar la clase; fijamos el literal en body/html.ip-dark
   (especificidad 0,1,1 > body). El resto de superficies ya funcionan
   por token. Transición suave al alternar tema.
   ============================================================ */
html.ip-dark { background-color: #17171a; }
body.ip-dark { background-color: #17171a; color: #f2efe9; }
html { background-color: #FAFAF7; }
body, html { transition: background-color .3s var(--ip-ease, ease); }
@media (prefers-reduced-motion: reduce) { body, html { transition: none; } }

/* ============================================================
   20. Mejoras cognitivas (auditoría psicológica)
   Propuesta de valor, rescate del acento (Von Restorff),
   prueba social, banda de curso, jerarquía de sección.
   ============================================================ */

/* Contraste AA de la meta discreta (#6B635C ~5:1 sobre #FAFAF7) */
:root { --ip-text-faint: #6B635C; }

/* 20.1 Intro / propuesta de valor del home (H1 real del sitio) */
.ip-intro { max-width: 62ch; margin: clamp(8px, 2vw, 20px) 0 clamp(26px, 4vw, 40px); }
.ip-intro__title {
	font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem);
	font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 0;
}
.ip-intro__title span {
	background: var(--ip-accent-grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.ip-intro__sub {
	margin: 12px 0 0; max-width: 56ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	color: var(--ip-text-soft); line-height: 1.6;
}

/* 20.2 Von Restorff: el gradiente sólido se reserva a hero-pill y CTAs.
   Las pills de tarjeta pasan a contorno neutro y solo se "encienden" al hover. */
.ip-card .ip-pill {
	background: transparent;
	color: var(--ip-coral-deep);
	border: 1px solid color-mix(in srgb, var(--ip-coral) 34%, transparent);
	box-shadow: none;
}
.ip-card:hover .ip-pill,
.ip-card:focus-within .ip-pill {
	background: var(--ip-accent-grad);
	color: #fff; border-color: transparent;
}
body.ip-dark .ip-card .ip-pill { color: var(--ip-coral-deep); }

/* 20.3 Flecha del CTA del hero (dirección implícita) */
.ip-hero__cta { display: inline-flex; align-items: center; gap: 0.5em; }
.ip-hero__cta svg { transition: transform 0.25s var(--ip-ease); }
.ip-hero__cta:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ip-hero__cta:hover svg { transform: none; } }

/* 20.4 Prueba social / frescura en la meta */
.ip-meta__comments::before,
.ip-meta__updated::before { content: "·"; margin: 0 0.5em; color: var(--ip-text-faint); }
.ip-meta__updated { color: var(--ip-coral-deep); font-weight: 600; }

/* 20.5 Banda del curso de inglés (segunda vía de conversión) */
.ip-promo {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 20px; margin: clamp(28px, 5vw, 48px) 0; padding: clamp(22px, 4vw, 34px);
	border-radius: var(--ip-radius-xl);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--ip-amber) 16%, var(--ip-surface)),
		color-mix(in srgb, var(--ip-coral) 12%, var(--ip-surface)));
	border: 1px solid color-mix(in srgb, var(--ip-coral) 20%, transparent);
}
.ip-promo__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; margin: 0; }
.ip-promo__sub { color: var(--ip-text-soft); margin: 0.3em 0 0; }
body.ip-dark .ip-promo {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--ip-amber) 14%, var(--ip-surface)),
		color-mix(in srgb, var(--ip-coral) 12%, var(--ip-surface-2)));
}

/* 20.6 Título de sección (reduce carga cognitiva, da "olor" de destino) */
.ip-section-title {
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	font-weight: 800; letter-spacing: -0.02em; margin: 0 0 clamp(16px, 3vw, 24px);
}
.ip-section-title::after {
	content: ""; display: block; width: 44px; height: 4px; margin-top: 0.4em;
	border-radius: 4px; background: var(--ip-accent-grad);
}

/* 20.7 Affordance de lectura en la tarjeta ("Leer →") */
.ip-card__more {
	display: inline-block; margin-top: 8px;
	font-size: 0.85rem; font-weight: 700; color: var(--ip-coral-deep);
	opacity: 0.55; transform: translateX(0);
	transition: opacity 0.25s var(--ip-ease), transform 0.25s var(--ip-ease);
}
.ip-card:hover .ip-card__more,
.ip-card:focus-within .ip-card__more { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.ip-card:hover .ip-card__more { transform: none; }
}

/* ============================================================
   21. Fixes de revisión visual (logo, menú, contraste global)
   ============================================================ */

/* 21.1 Logo SVG del tema con swap claro/oscuro (sustituye al JPG
   del Customizer con caja blanca). */
.ip-brand__link { display: inline-flex; align-items: center; }
.ip-brand__logo { display: block; height: 44px; width: auto; }
.ip-brand__logo--dark { display: none; }
body.ip-dark .ip-brand__logo--light { display: none; }
body.ip-dark .ip-brand__logo--dark { display: block; }

/* 21.2 Menú: los items nunca parten en varias líneas; en anchos medios
   se compacta la búsqueda y el logo antes de colapsar a hamburguesa
   (que ahora entra a <1280px, donde 6 items largos ya no caben). */
.ip-nav a { white-space: nowrap; }
.ip-search__input { width: clamp(140px, 13vw, 230px); }
@media (min-width: 1380px) and (max-width: 1560px) {
	.ip-header__inner { gap: 14px; }
	.ip-nav ul { gap: clamp(6px, 0.9vw, 14px); }
	.ip-brand__logo { height: 38px; }
	.ip-search__input { width: clamp(120px, 11vw, 180px); }
}
@media (max-width: 1379px) {
	.ip-brand__logo { height: 38px; }
}
@media (max-width: 480px) {
	.ip-brand__logo { height: 32px; }
}

/* 21.3 Red de seguridad de contraste: cualquier enlace SIN clase
   (contenido antiguo, widgets de plugins, HTML heredado) hereda el
   acento de marca en vez del azul por defecto del navegador.
   :where() = especificidad 0: nunca pisa componentes ya estilados. */
:where(a:not([class])) { color: var(--ip-coral-deep); }
:where(a:not([class])):hover { color: var(--ip-coral); }
:where(a:not([class])):visited { color: var(--ip-coral-deep); }
body.ip-dark :where(a:not([class])),
body.ip-dark :where(a:not([class])):visited { color: #FF8A8A; }
body.ip-dark :where(a:not([class])):hover { color: var(--ip-amber); }

/* Elementos de formulario heredados (inputs de plugins) legibles en oscuro */
body.ip-dark :where(input:not([class]), textarea:not([class]), select:not([class])) {
	background: var(--ip-surface-2);
	color: var(--ip-text);
	border-color: var(--ip-hairline);
}

/* ============================================================
   22. Refuerzos finales de revisión
   ============================================================ */
/* Header oscuro con literal (a prueba de motores que congelan var()
   en hojas enlazadas; mismo valor que --ip-glass oscuro). */
body.ip-dark .ip-header { background: rgba(23, 23, 26, 0.72); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body.ip-dark .ip-header { background: #1f1f23; }
}
/* Cue "Leer →" con contraste AA real (la opacidad 0.55 lo bajaba a 3.9:1) */
.ip-card__more { opacity: 0.9; }
.ip-card:hover .ip-card__more,
.ip-card:focus-within .ip-card__more { opacity: 1; }