/*
Theme Name:   IT Rafa
Theme URI:    https://itrafa.com
Description:  Tema hijo de Hello Elementor para itrafa.com. Cuerpo en serif para lectura larga, titulares en sans, metadatos en monoespaciada. Modo oscuro y bloques de codigo como elemento principal.
Author:       Rafael
Template:     hello-elementor
Version:      1.0.0
Text Domain:  itrafa
*/

/* ============================================================================
   TIPOGRAFIA — IBM Plex, autoalojada
   ----------------------------------------------------------------------------
   Superfamilia elegida a proposito: Serif, Sans y Mono comparten esqueleto, asi
   que mezclarlas se ve intencionado y no ensamblado. Subconjunto a los glifos
   que este blog usa (ASCII + Latin-1 + tipografia): 90 KB en 5 ficheros, frente
   a los 265 KB que hoy cuesta solo FontAwesome.

   Autoalojada, sin peticiones a terceros: es lo coherente en un blog sobre
   self-hosting, y quita una dependencia externa del camino critico de render.
   ========================================================================= */

@font-face {
	font-family: 'Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/IBMPlexSerif-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Plex Serif';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/IBMPlexSerif-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/IBMPlexSans-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/IBMPlexMono-600.woff2') format('woff2');
}

/* ============================================================================
   TOKENS DE DISENO
   ----------------------------------------------------------------------------
   Paleta calida (papel y carbon) en vez del gris azulado habitual, con acento
   ambar tomado de los LED de equipo de red. Se lee como un cuaderno de
   ingenieria, no como otro panel de control generico.
   ========================================================================= */

:root {
	--f-body:  'Plex Serif', Georgia, 'Times New Roman', serif;
	--f-head:  'Plex Sans', ui-sans-serif, system-ui, sans-serif;
	--f-mono:  'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Escala de razon 1.25 (tercera mayor). Base 17px: mas comodo que 16 en
	   lectura larga sin llegar a parecer un libro infantil. */
	--t-xs:   0.8125rem;
	--t-sm:   0.9375rem;
	--t-base: 1.0625rem;
	--t-lg:   1.25rem;
	--t-xl:   1.5rem;
	--t-2xl:  1.875rem;
	--t-3xl:  2.375rem;

	--lh-body: 1.72;   /* generoso: son textos tecnicos largos */
	--lh-head: 1.18;

	/* La medida (caracteres por linea) es la variable que mas afecta a la
	   lectura. 42rem ~ 66 caracteres a 17px, dentro del rango optimo de 45-75.
	   Se expresa en REM, no en CH, a proposito: `ch` se resuelve contra el
	   tamano de fuente DEL PROPIO ELEMENTO, asi que un `max-width: 68ch` da
	   680px a un parrafo y 1224px a un h2, y cada encabezado acaba alineado
	   en un sitio distinto. */
	--measure: 42rem;
	--measure-wide: 54rem;   /* codigo, tablas e imagenes: se escanean, no se leen en linea */

	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;

	--r-sm: .375rem; --r-md: .625rem; --r-lg: .875rem;

	/* --- Tema claro: papel calido --- */
	--bg:        #FBF9F5;
	--bg-sunken: #F3EFE7;
	--surface:   #FFFFFF;
	--fg:        #1C1A16;
	--fg-muted:  #6B655B;
	--fg-faint:  #948D80;
	--border:    #E2DCD0;
	--border-str:#CFC7B8;
	/* El azul EXACTO del logo, no un tono aproximado: es lo que hace que
	   marca y sitio se lean como una sola cosa. Da 4,99:1 sobre el papel,
	   por encima del 4,5 que exige AA (y mejor que el 4,52 del ambar que
	   sustituye). El fondo sigue siendo papel calido: lo generico es blanco
	   con azul, no papel con azul. */
	--accent:    #2462E9;
	--accent-bg: #EDF2FD;
	--code-bg:   #F6F2EA;
	--shadow:    0 1px 2px rgba(28,26,22,.04), 0 4px 12px rgba(28,26,22,.05);
}

/* El navegador decide, salvo eleccion explicita del usuario.
   :not([data-theme="light"]) permite que la eleccion manual gane. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:        #14120F;
		--bg-sunken: #0E0D0B;
		--surface:   #1C1A16;
		--fg:        #EAE5DA;
		--fg-muted:  #A29A8B;
		--fg-faint:  #7A7365;
		--border:    #2E2A23;
		--border-str:#413C32;
		--accent:    #7BA6F5;   /* 7,67:1 sobre el carbon */
		--accent-bg: #111A2E;
		--code-bg:   #100F0C;
		--shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
	}
}

:root[data-theme="dark"] {
	--bg:        #14120F;
	--bg-sunken: #0E0D0B;
	--surface:   #1C1A16;
	--fg:        #EAE5DA;
	--fg-muted:  #A29A8B;
	--fg-faint:  #7A7365;
	--border:    #2E2A23;
	--border-str:#413C32;
	--accent:    #7BA6F5;
	--accent-bg: #111A2E;
	--code-bg:   #100F0C;
	--shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
}

/* ============================================================================
   BASE
   ========================================================================= */

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

html {
	scroll-behavior: smooth;
	/* Compensa cualquier cabecera al saltar a un ancla de la tabla de
	   contenidos: sin esto el titulo de destino queda tapado. */
	scroll-padding-top: 2rem;
}

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	background: var(--bg);
	color: var(--fg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Halo calido muy tenue en la parte superior. Un gradiente, no una imagen:
	   da atmosfera sin costar una sola peticion. */
	background-image:
		radial-gradient(ellipse 80% 45% at 50% -15%, var(--accent-bg), transparent 70%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-head);
	font-weight: 600;
	line-height: var(--lh-head);
	letter-spacing: -0.021em;
	color: var(--fg);
	text-wrap: balance;      /* evita titulares con una palabra huerfana */
}

h1 { font-size: var(--t-3xl); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--t-2xl); margin: var(--sp-16) 0 var(--sp-4); }
h3 { font-size: var(--t-xl);  margin: var(--sp-12) 0 var(--sp-3); }
h4 { font-size: var(--t-lg);  margin: var(--sp-8)  0 var(--sp-2); }

p { margin: 0 0 var(--sp-6); }
p, li { text-wrap: pretty; }

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color .12s ease;
}
a:hover { text-decoration-thickness: 2px; }

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

img, video { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-12) 0; }

blockquote {
	margin: var(--sp-8) 0;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
	border-left: 3px solid var(--accent);
	color: var(--fg-muted);
	font-style: italic;
}

/* ============================================================================
   MEDIDA DE LECTURA
   ----------------------------------------------------------------------------
   El texto se acota a --measure; el codigo, las tablas y las imagenes pueden
   ensancharse porque se leen de otra forma (se escanean, no se leen en linea).
   ========================================================================= */

/* La medida vive en el CONTENEDOR, que tiene un unico tamano de fuente. Asi
   todos los hijos comparten la misma columna y los encabezados se alinean con
   el texto, que es lo que fallaba al ponerla en cada elemento con `ch`. */
.itr-reading .entry-content,
.itr-reading .page-content,
.itr-toc,
.itr-postnav,
.itr-meta,
/* Titulos: Hello Elementor y el editor de bloques usan estas clases segun la
   plantilla, asi que se cubren las tres para que el H1 comparta columna con el
   cuerpo en lugar de quedar pegado al borde. */
.itr-reading .entry-title,
.itr-reading .page-header,
.itr-reading .wp-block-post-title {
	max-width: var(--measure);
	margin-inline: auto;
}

/* Breakout: el codigo, las tablas y las imagenes salen de la columna de lectura
   y se centran respecto a ella. `margin-left: 50%` los lleva al centro del
   contenedor y `translateX(-50%)` los recentra sobre su propio ancho. */
.itr-reading .entry-content > pre,
.itr-reading .page-content > pre,
.itr-reading .entry-content > figure,
.itr-reading .page-content > figure,
.itr-reading .entry-content > .wp-block-image,
.itr-reading .page-content > .wp-block-image,
.itr-reading .entry-content > .wp-block-table,
.itr-reading .page-content > .wp-block-table,
.itr-reading .entry-content > .wp-block-code,
.itr-reading .page-content > .wp-block-code,
.itr-reading .entry-content > .itr-grid,
.itr-reading .page-content > .itr-grid {
	width: min(var(--measure-wide), calc(100vw - 3rem));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Por debajo del ancho de breakout no hay nada de lo que salirse: la
   transformacion solo introduciria desbordes en movil. */
@media (max-width: 56rem) {
	.entry-content > pre,
.itr-reading .page-content > pre,
.itr-reading .entry-content > figure,
.itr-reading .page-content > figure,
.itr-reading .entry-content > .wp-block-image,
.itr-reading .page-content > .wp-block-image,
.itr-reading .entry-content > .wp-block-table,
.itr-reading .page-content > .wp-block-table,
.itr-reading .entry-content > .wp-block-code,
.itr-reading .page-content > .wp-block-code,
.itr-reading .entry-content > .itr-grid,
.itr-reading .page-content > .itr-grid {
		width: 100%;
		margin-left: 0;
		transform: none;
	}
}

/* ============================================================================
   CODIGO — el elemento de diseno principal de este sitio
   ----------------------------------------------------------------------------
   En un blog de 15 tutoriales, el bloque de codigo es lo que el lector viene a
   buscar. Se trata como pieza central, no como accesorio.
   ========================================================================= */

code, kbd, pre, samp { font-family: var(--f-mono); }

:not(pre) > code {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	padding: .1em .38em;
	font-size: .875em;
	/* Rompe rutas y comandos largos en vez de desbordar el contenedor. */
	word-break: break-word;
}

pre {
	position: relative;
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);   /* franja que lo identifica al escanear */
	border-radius: var(--r-md);
	padding: var(--sp-6);
	margin: var(--sp-8) auto;
	overflow-x: auto;                        /* nunca desborda la pagina */
	font-size: var(--t-sm);
	line-height: 1.62;
	tab-size: 4;
	box-shadow: var(--shadow);
}

pre code { background: none; border: 0; padding: 0; font-size: inherit; }

kbd {
	background: var(--surface);
	border: 1px solid var(--border-str);
	border-bottom-width: 2px;
	border-radius: var(--r-sm);
	padding: .1em .4em;
	font-size: .85em;
}

/* Tablas: se desplazan solas en vez de romper el ancho del documento. */
.wp-block-table, .entry-content table { display: block; overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); text-align: left; }
th { font-family: var(--f-head); font-weight: 600; }

/* ============================================================================
   METADATOS — monoespaciada, para que la identidad venga de la mezcla
   ========================================================================= */

.itr-meta {
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--fg-muted);
	letter-spacing: .01em;
	margin-bottom: var(--sp-8);
}

/* ============================================================================
   TABLA DE CONTENIDOS
   ========================================================================= */

.itr-toc {
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: var(--sp-4) var(--sp-6);
	margin-bottom: var(--sp-12);
}

.itr-toc__title {
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--fg-faint);
	margin: 0 0 var(--sp-3);
}

.itr-toc__list { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.itr-toc__item { margin-bottom: var(--sp-2); line-height: 1.45; }
.itr-toc__item--h3 { padding-left: var(--sp-4); font-size: var(--t-xs); }
.itr-toc__list a { color: var(--fg-muted); text-decoration: none; }
.itr-toc__list a:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================================
   REJILLA DE ENTRADAS — [itr_posts]
   ========================================================================= */

.itr-grid {
	display: grid;
	gap: var(--sp-8);
	grid-template-columns: repeat(var(--itr-cols, 3), minmax(0, 1fr));
	margin: var(--sp-8) 0;
}

@media (max-width: 900px) { .itr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .itr-grid { grid-template-columns: 1fr; } }

.itr-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.itr-card:hover {
	transform: translateY(-2px);
	border-color: var(--border-str);
	box-shadow: var(--shadow);
}

.itr-card__media { display: block; line-height: 0; }

.itr-card__img {
	width: 100%;
	/* aspect-ratio reserva el hueco ANTES de que cargue la imagen. Sin esto el
	   layout salta (CLS) y, con lazy loading, quedan huecos en blanco: es
	   exactamente el fallo que dejaba 1009 px vacios en la portada anterior. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--bg-sunken);
}

.itr-card__body {
	padding: var(--sp-4) var(--sp-6) var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.itr-card__title { font-size: var(--t-lg); line-height: 1.28; margin: 0; }
.itr-card__title a { color: var(--fg); text-decoration: none; }
.itr-card__title a:hover { color: var(--accent); }

.itr-card__excerpt { font-size: var(--t-sm); line-height: 1.6; color: var(--fg-muted); margin: 0; }

.itr-card__meta {
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--fg-faint);
	margin: var(--sp-2) 0 0;
}

/* ============================================================================
   NAVEGACION ENTRE ENTRADAS
   ========================================================================= */

.itr-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
	margin-top: var(--sp-16);
	padding-top: var(--sp-8);
	border-top: 1px solid var(--border);
}

@media (max-width: 600px) { .itr-postnav { grid-template-columns: 1fr; } }

.itr-postnav__link {
	display: block;
	padding: var(--sp-4) var(--sp-6);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, background .16s ease;
}
.itr-postnav__link:hover { border-color: var(--accent); background: var(--accent-bg); }

.itr-postnav__link--next { text-align: right; grid-column: 2; }
@media (max-width: 600px) { .itr-postnav__link--next { text-align: left; grid-column: 1; } }

.itr-postnav__label {
	display: block;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--fg-faint);
	margin-bottom: var(--sp-1);
}
.itr-postnav__title { display: block; font-family: var(--f-head); font-weight: 600; line-height: 1.3; }

/* ============================================================================
   CONMUTADOR DE TEMA
   ========================================================================= */

.itr-theme-toggle {
	position: fixed;
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 999;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	cursor: pointer;
	font-family: var(--f-mono);
	font-size: 1.05rem;
	background: var(--surface);
	color: var(--fg);
	border: 1px solid var(--border-str);
	box-shadow: var(--shadow);
	transition: border-color .16s ease, transform .16s ease;
}
.itr-theme-toggle:hover { border-color: var(--accent); transform: scale(1.06); }

@media print { .itr-theme-toggle { display: none; } }

/* ============================================================================
   ACCESIBILIDAD
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Enlace de salto: invisible hasta recibir foco de teclado. */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	left: var(--sp-4);
	top: var(--sp-4);
	z-index: 1000;
	background: var(--surface);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--accent);
	border-radius: var(--r-sm);
}

/* ============================================================================
   CABECERA Y PIE (Hello Elementor)
   ----------------------------------------------------------------------------
   El tema padre no estiliza casi nada, asi que sus enlaces heredaban el color
   de acento y la navegacion entera salia en ambar: demasiado peso visual para
   un elemento secundario. Aqui la navegacion es neutra y el ambar se reserva
   para el hover y la pagina activa, que es donde aporta informacion.
   ========================================================================= */

.site-header {
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	padding-block: var(--sp-4);
}

.site-header .site-branding .site-title,
.site-header .site-title a {
	font-family: var(--f-head);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--fg);
	text-decoration: none;
}

.site-header .site-description {
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--fg-faint);
	letter-spacing: .01em;
}

.site-navigation a,
.site-header nav a {
	font-family: var(--f-head);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--fg-muted);
	text-decoration: none;
}

.site-navigation a:hover,
.site-header nav a:hover,
.site-navigation .current-menu-item > a {
	color: var(--accent);
}

.site-footer {
	border-top: 1px solid var(--border);
	margin-top: var(--sp-16);
	padding-block: var(--sp-8);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--fg-faint);
}

/* El aire lateral va en el contenedor EXTERIOR, no en .page-content.
   Si se pone en .page-content, el cuerpo se desplaza 24px respecto al H1
   (que vive fuera, en la cabecera de la entrada) y dejan de alinearse. */
.site-main {
	padding-inline: var(--sp-6);
	padding-block: var(--sp-12) var(--sp-16);
}

/* ============================================================================
   ARMONIZACION CON EL KIT DE ELEMENTOR (solo portada y paginas construidas)
   ----------------------------------------------------------------------------
   El kit heredado del tema anterior usa azules frios que chocan con la paleta
   calida. En vez de reeditar la pagina widget a widget en Elementor —fragil y
   dificil de versionar— se reasignan los colores desde el tema, que si esta en
   git y se revierte con un commit.
   ========================================================================= */

/* Titulares de seccion: eran azul claro sobre papel, con muy poco contraste. */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--f-head);
	color: var(--fg);
	letter-spacing: -0.02em;
}

/* Los separadores del kit son azules; se alinean con el borde del sistema. */
.elementor-widget-divider {
	--divider-color: var(--border);
}

/* Hero: el azul marino del kit es el unico bloque frio de la pagina. Se pasa a
   un carbon calido coherente con el modo oscuro del sitio. */
.elementor-element:has(> .elementor-widget-wrap) [class*="elementor-background"],
.page-content .elementor-section[data-settings*="background"],
.page-content > .elementor-element > .e-con-inner {
	/* No forzamos nada aqui: el fondo del hero se ajusta abajo por variable. */
}

/* Formulario de suscripcion: era un rectangulo azul plano sin relacion con
   nada. Pasa a tarjeta sobre superficie, como el resto de bloques. */
.page-content form,
.page-content .elementor-widget-html form {
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-8);
}

.page-content input[type="email"],
.page-content input[type="text"] {
	font-family: var(--f-body);
	font-size: var(--t-base);
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	background: var(--surface);
	color: var(--fg);
	border: 1px solid var(--border-str);
	border-radius: var(--r-sm);
}

.page-content input[type="submit"],
.page-content button[type="submit"] {
	font-family: var(--f-head);
	font-weight: 600;
	font-size: var(--t-sm);
	padding: var(--sp-3) var(--sp-6);
	margin-top: var(--sp-3);
	background: var(--accent);
	color: var(--bg);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: filter .16s ease;
}
.page-content input[type="submit"]:hover,
.page-content button[type="submit"]:hover { filter: brightness(1.08); }

/* Las tarjetas de la portada no necesitan el ancho de breakout: ya viven en
   un contenedor a ancho completo. */
.itr-grid { max-width: 72rem; margin-inline: auto; }

/* NO se tocan aqui los colores globales de Elementor.
   ----------------------------------------------------------------------------
   Antes este bloque los reasignaba a la paleta del tema, y el efecto secundario
   era grave: cambiar el acento en Ajustes del sitio > Colores globales no hacia
   nada, porque este CSS cargaba despues y ganaba. Un ajuste que parece editable
   desde la interfaz y no lo es.
   Los valores viven ahora en el propio kit (`system_colors`), que es donde
   Elementor los lee y donde se pueden cambiar sin tocar codigo. Aqui solo
   quedan los del CROMO del tema (cabecera, pie, tarjetas, tipografia), que
   Elementor no controla.
   En modo oscuro el tema sigue mandando: Elementor no tiene equivalente. */

/* ============================================================================
   FORMULARIO EMBEBIDO DE ACUMBAMAIL (clases .bee-*)
   ----------------------------------------------------------------------------
   Lo inyecta JavaScript de terceros con su propio azul corporativo, que era el
   unico bloque frio que quedaba en la pagina. No se puede cambiar desde el JSON
   de Elementor porque el marcado no existe hasta que corre su script, asi que
   se neutraliza por CSS. Si algun dia cambian sus clases, lo peor que pasa es
   que vuelva a verse su azul: no rompe nada.
   ========================================================================= */

.bee-row,
.bee-row-content,
[class*="bee-form-row"] {
	background: var(--bg-sunken) !important;
	border-radius: var(--r-lg);
}

.bee-row input[type="text"],
.bee-row input[type="email"],
[class*="bee-form"] input {
	font-family: var(--f-body) !important;
	background: var(--surface) !important;
	color: var(--fg) !important;
	border: 1px solid var(--border-str) !important;
	border-radius: var(--r-sm) !important;
}

.bee-row button,
.bee-row input[type="submit"],
[class*="bee-form"] button {
	font-family: var(--f-head) !important;
	font-weight: 600 !important;
	background: var(--accent) !important;
	color: var(--bg) !important;
	border: 0 !important;
	border-radius: var(--r-sm) !important;
	cursor: pointer;
}

.bee-row label,
[class*="bee-form"] label {
	font-family: var(--f-mono) !important;
	font-size: var(--t-xs) !important;
	color: var(--fg-muted) !important;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ============================================================================
   PAGINAS INTERIORES (Sobre mi, Contacto...)
   ----------------------------------------------------------------------------
   Construidas con Elementor pero con contenido de lectura. Elementor impone
   sus propios anchos a los contenedores, asi que la medida hay que aplicarla
   tambien a sus wrappers o el texto sigue a 1392px (unos 150 caracteres por
   linea, el doble del rango legible).
   ========================================================================= */

.itr-reading .page-content .elementor-widget-text-editor,
.itr-reading .page-content .elementor-widget-heading,
.itr-reading .page-content .elementor-widget-button {
	max-width: var(--measure);
	margin-inline: auto;
}

/* La imagen compuesta de certificaciones y la foto de perfil se salen de la
   columna de texto: son elementos que se miran, no que se leen. */
.itr-reading .page-content .elementor-widget-image {
	max-width: var(--measure-wide);
	margin-inline: auto;
}

.itr-reading .page-content .elementor-widget-image img {
	display: block;
	margin-inline: auto;
	border-radius: var(--r-md);
}

/* Foto de perfil: la original llega recortada sobre fondo blanco, que sobre
   papel calido se ve como un recuadro. Se redondea y se le da un borde suave
   para que se lea como retrato y no como imagen pegada. */
.itr-reading .page-content .elementor-widget-image img[src*="removebg"],
.itr-reading .page-content .elementor-widget-image img[width="150"] {
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-sunken);
}

/* Las listas de estas paginas heredaban el ancho completo. */
.itr-reading .page-content ul,
.itr-reading .page-content ol {
	max-width: var(--measure);
	margin-inline: auto;
	padding-left: var(--sp-6);
}

/* Hello Elementor resetea las listas a `margin: 0`, pero deja los parrafos
   con 24px abajo. Resultado: el parrafo que sigue a una lista queda pegado
   al ultimo punto y se lee como si formara parte de ella. Se les da el mismo
   ritmo vertical que a un parrafo. */
.itr-reading .entry-content ul,
.itr-reading .entry-content ol,
.itr-reading .page-content ul,
.itr-reading .page-content ol {
	margin-block: 0 var(--sp-6);
}

/* Las anidadas no: dentro de un <li> el hueco extra rompe el bloque.
   El selector repite el contenedor a proposito. Con `.itr-reading li > ul`
   la especificidad (0,1,2) perdia contra la regla de arriba (0,2,1) y las
   anidadas heredaban el margen de las sueltas. */
.itr-reading .entry-content li > ul,
.itr-reading .entry-content li > ol,
.itr-reading .page-content li > ul,
.itr-reading .page-content li > ol {
	margin-block: var(--sp-2) 0;
}

/* ============================================================================
   SELECTOR DE IDIOMA
   ========================================================================= */

.itr-langs {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: .06em;
}

.itr-langs .itr-lang {
	color: var(--fg-faint);
	text-decoration: none;
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--r-sm);
}
.itr-langs .itr-lang:hover { color: var(--accent); }

/* El idioma activo se marca con peso y color, no con un fondo: en una barra de
   navegacion de texto un rectangulo relleno pesa demasiado. */
.itr-langs-item .itr-langs a.itr-lang--current {
	color: var(--fg);
	font-weight: 600;
}

.itr-lang-sep { color: var(--border-str); }

/* ============================================================================
   LOGO
   ----------------------------------------------------------------------------
   Dos imagenes superpuestas en el flujo: la clara y la oscura. Se conmutan por
   CSS segun el tema. width/height van en el HTML para que el hueco este
   reservado antes de que cargue y el layout no salte.
   ========================================================================= */

.itr-logo {
	display: inline-block;
	line-height: 0;
}

/* Se apunta a `.custom-logo`, que es lo que emiten de verdad la cabecera y el
   pie dinamicos del tema padre. La regla original solo cubria `.itr-logo__img`,
   un marcado propio que dejo de usarse, asi que el logo se pintaba a su tamano
   natural: 1592x433 estirado al ancho del contenedor.
   Sin acotar a `.site-header`: la primera correccion lo hizo y dejo el pie
   fuera, que usa exactamente el mismo marcado. La regla va por el elemento,
   no por donde este colocado, para que cubra tambien cualquier ubicacion
   futura. */
.itr-logo__img,
.site-logo img,
.custom-logo {
	display: block;
	width: auto;
	height: 44px;
	max-width: 100%;
}

/* En el pie hay mas aire y el logo es el cierre de la pagina, no un elemento
   de navegacion: admite algo mas de presencia sin estorbar. */
.site-footer .site-logo img,
.site-footer .custom-logo { height: 56px; }

@media (max-width: 600px) {
	.itr-logo__img,
	.site-logo img,
	.custom-logo { height: 36px; }

	.site-footer .site-logo img,
	.site-footer .custom-logo { height: 44px; }
}

/* El intercambio claro/oscuro lo hace <picture media>, no CSS: asi ninguna
   regla de otro plugin puede ganarle por especificidad. */

/* Con logo, el titulo en texto sobra: seria la misma marca dos veces. */
.site-header .site-title { display: none; }

/* ============================================================================
   NOTA DE ACTUALIZACION
   ----------------------------------------------------------------------------
   Para posts que se conservan como pieza de su momento pero cuyo contexto ha
   cambiado. Se distingue del cuerpo sin gritar: fondo hundido y franja de
   acento, el mismo lenguaje visual que los bloques de codigo.
   ========================================================================= */

.itr-nota {
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-md);
	padding: var(--sp-6) var(--sp-6) var(--sp-2);
	margin-bottom: var(--sp-12);
	font-size: var(--t-sm);
}

.itr-nota p { line-height: 1.65; }
.itr-nota p:last-child { margin-bottom: var(--sp-4); }

/* ============================================================================
   SUSCRIPCION
   ----------------------------------------------------------------------------
   Va al final de la entrada. Se distingue del cuerpo pero sin gritar: es una
   invitacion, no un anuncio. Comparte el lenguaje visual del resto del sitio
   (fondo hundido, borde, radio) en lugar de inventar uno propio.
   ========================================================================= */

.itr-suscripcion {
	max-width: var(--measure);
	margin: var(--sp-16) auto 0;
	padding: var(--sp-8) var(--sp-8) var(--sp-6);
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	text-align: center;
}

.itr-suscripcion__titulo {
	font-size: var(--t-xl);
	margin: 0 0 var(--sp-2);
	letter-spacing: -0.02em;
}

.itr-suscripcion__texto {
	font-size: var(--t-sm);
	line-height: 1.6;
	color: var(--fg-muted);
	margin: 0 auto var(--sp-6);
	max-width: 34rem;
}

.itr-suscripcion__nota {
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--fg-faint);
	margin: var(--sp-4) 0 0;
	line-height: 1.5;
}

/* --- El formulario que inyecta Acumbamail (clases .bee-*) --- */

.itr-suscripcion__form { margin-inline: auto; max-width: 30rem; }

/* Su marcado trae fondos y anchos propios que rompen el bloque.
   OJO con el alcance: Acumbamail oculta sus campos trampa antispam dandoles
   tamano cero, asi que un "width: 100% !important" con comodin los vuelve
   visibles y deja el formulario con cuatro campos y sin proteccion. Por eso
   se excluyen explicitamente. */
.itr-suscripcion .bee-row,
.itr-suscripcion .bee-row-content,
.itr-suscripcion [class*="bee-"]:not([class*="bee-field-id_"]) {
	background: transparent !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Los campos trampa: fuera de la vista y fuera del orden de tabulacion.
   Se ocultan por posicion y no con display:none, porque algunos filtros
   antispam consideran sospechoso un campo con display:none. */
.itr-suscripcion [class*="bee-field-id_"] {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* En pantallas anchas, campo y boton en linea; apilados en movil. */
.itr-suscripcion form {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	justify-content: center;
}

.itr-suscripcion input[type="email"],
.itr-suscripcion input[type="text"] {
	flex: 1 1 16rem;
	min-width: 0;
	font-family: var(--f-body) !important;
	font-size: var(--t-base) !important;
	padding: var(--sp-3) var(--sp-4) !important;
	background: var(--surface) !important;
	color: var(--fg) !important;
	border: 1px solid var(--border-str) !important;
	border-radius: var(--r-sm) !important;
}

.itr-suscripcion input::placeholder { color: var(--fg-faint); }

.itr-suscripcion input[type="submit"],
.itr-suscripcion button {
	flex: 0 0 auto;
	font-family: var(--f-head) !important;
	font-weight: 600 !important;
	font-size: var(--t-sm) !important;
	padding: var(--sp-3) var(--sp-6) !important;
	background: var(--accent) !important;
	color: var(--bg) !important;
	border: 0 !important;
	border-radius: var(--r-sm) !important;
	cursor: pointer;
	transition: filter .16s ease;
}
.itr-suscripcion input[type="submit"]:hover,
.itr-suscripcion button:hover { filter: brightness(1.08); }

/* Las etiquetas de Acumbamail duplican lo que ya dice el titular. */
.itr-suscripcion label { display: none !important; }

/* Los campos trampa antispam deben seguir ocultos pase lo que pase. */
.itr-suscripcion input[type="checkbox"],
.itr-suscripcion [style*="display: none"],
.itr-suscripcion [style*="display:none"] { display: none !important; }

/* Acumbamail dibuja su propia caja dentro de la nuestra: doble borde y doble
   fondo. Se aplana todo salvo los campos trampa, que deben seguir ocultos. */
.itr-suscripcion form,
.itr-suscripcion form > *:not([class*="bee-field-id_"]),
.itr-suscripcion [class*="bee-row"],
.itr-suscripcion [class*="bee-form"] {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ============================================================================
   ARCHIVO DE CATEGORIA, ETIQUETA Y AUTOR
   ========================================================================= */

/* La plantilla de Hello Elementor pintaba cada entrada a ancho completo con
   su destacada en tamano `large`: 577 px por entrada y 7.735 px de pagina
   para diez. Aqui se reutiliza la rejilla de la portada. */
.itr-archivo {
	max-width: var(--measure-wide);
	margin-inline: auto;
}

.itr-archivo .itr-grid {
	margin-block: var(--sp-8) 0;
}

.itr-archivo__vacio {
	color: var(--fg-muted);
	font-family: var(--f-mono);
	font-size: var(--t-sm);
	text-align: center;
	padding-block: var(--sp-12);
}

/* La cabecera del archivo comparte medida con las tarjetas, no con el texto
   de lectura: si no, el titulo queda descentrado respecto a la rejilla. */
body.archive .page-header {
	max-width: var(--measure-wide);
	margin-inline: auto;
}

body.archive .page-header .archive-description {
	max-width: var(--measure);
	color: var(--fg-muted);
}

.itr-paginacion {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	max-width: var(--measure-wide);
	margin: var(--sp-12) auto 0;
	padding-top: var(--sp-6);
	border-top: 1px solid var(--border);
	font-family: var(--f-mono);
	font-size: var(--t-sm);
}

.itr-paginacion a {
	text-decoration: none;
	color: var(--accent);
}

.itr-paginacion a:hover {
	text-decoration: underline;
}

/* Sin enlace, el div vacio seguiria ocupando su hueco del flex y descolocaria
   el que si existe. */
.itr-paginacion > div:empty {
	display: none;
}

/* ============================================================================
   SELECTOR DE IDIOMA: ICONO
   ========================================================================= */

/* Bandera + codigo. La bandera da el reconocimiento inmediato; el codigo
   evita depender de que el visitante identifique el pais, y es lo que lee un
   lector de pantalla. */
.itr-langs { display: inline-flex; align-items: center; gap: var(--sp-2); }

.itr-lang-sep { color: var(--fg-faint); }

/* Tres clases a proposito. El tema fija `display:block` con
   `.site-navigation ul.menu li a`, que es (0,2,3); un `.itr-langs a.itr-lang`
   es (0,2,1) y pierde, dejando la bandera apilada sobre el codigo. Con
   `.itr-langs-item .itr-langs a.itr-lang` (0,3,1) gana el conteo de clases,
   que es lo que se compara primero. */
.itr-langs-item .itr-langs a.itr-lang {
	display: inline-flex;
	align-items: center;
	/* nowrap explicito: el <li> del menu es estrecho y sin esto la bandera y
	   el codigo se apilan en vertical. */
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: var(--sp-2);
	text-decoration: none;
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--r-sm);
	opacity: .55;
	transition: opacity .15s ease, background .15s ease;
}

.itr-langs-item .itr-langs a.itr-lang:hover,
.itr-langs-item .itr-langs a.itr-lang:focus-visible { opacity: 1; }

/* El idioma activo se marca por opacidad y fondo, no por color: asi el
   selector no compite con el acento del sitio. */
.itr-langs-item .itr-langs a.itr-lang--current {
	opacity: 1;
	background: var(--bg-sunken);
	font-weight: 600;
}

.itr-lang__bandera {
	display: block;
	border-radius: 2px;
	/* Sin borde, una bandera clara sobre papel claro pierde su silueta. */
	box-shadow: 0 0 0 1px rgba(0,0,0,.16);
	flex: 0 0 auto;
}

/* ============================================================================
   PERFILES SOCIALES EN EL PIE
   ========================================================================= */

.itr-social {
	display: flex;
	gap: var(--sp-4);
	margin: var(--sp-6) 0 0;
	padding: 0;
	justify-content: center;
}

.itr-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--fg-muted);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.itr-social a:hover,
.itr-social a:focus-visible {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-bg);
}

.itr-social svg { display: block; }

/* ============================================================================
   CABECERA EN FILA
   ----------------------------------------------------------------------------
   Hello Elementor apila marca y menu con el ajuste `default`, y eso dejaba
   vacia la mitad derecha de la cabecera. Se pasa a fila: marca a la
   izquierda, navegacion a la derecha.
   ========================================================================= */

.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	flex-wrap: wrap;
}

.site-header .site-branding { flex: 0 1 auto; }

.site-header .site-navigation { flex: 1 1 auto; }

.site-header .site-navigation ul.menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-5);
	margin: 0;
	padding: 0;
}

/* El eslogan ya no cabe al lado del menu en una sola fila y compite con el.
   El logo dice el nombre; el eslogan sigue en el pie. */
.site-header .site-description { display: none; }

/* Las redes en cabecera: mas pequenas y sin circulo, para que no compitan
   con los enlaces del menu. El circulo se queda solo en el pie. */
.itr-social--cabecera { gap: var(--sp-2); margin: 0; }

.itr-social--cabecera a {
	width: 30px;
	height: 30px;
	border: 0;
}

.itr-social--cabecera svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
	.site-header .header-inner { gap: var(--sp-4); }
	.site-header .site-navigation ul.menu { gap: var(--sp-1) var(--sp-4); }
}

/* El contenedor `boxed` del tema estrangulaba la cabecera: con el menu ya en
   fila, marca + 10 elementos + redes no caben y el menu saltaba a una segunda
   linea, volviendo a la altura que queriamos quitar. Se le da el ancho real
   de la ventana con margenes propios. */
.site-header .header-inner {
	max-width: min(1500px, calc(100vw - var(--sp-12)));
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--sp-6);
}

.site-header .site-navigation ul.menu {
	font-size: var(--t-xs);
	gap: var(--sp-1) var(--sp-4);
}

@media (max-width: 1280px) {
	.site-header .site-navigation ul.menu { gap: var(--sp-1) var(--sp-3); }
}

/* ----------------------------------------------------------------------------
   El grupo de utilidades de la cabecera
   ----------------------------------------------------------------------------
   Idioma y redes no son secciones del sitio, son controles. Sin separarlos, se
   leian como dos elementos mas del menu pegados al final. Un filete fino los
   agrupa aparte sin anadir peso visual. */

.site-header .itr-langs-item {
	margin-left: var(--sp-4);
	/* El filete y el fondo del idioma activo no deben tocarse: sin este aire
	   la linea parece el borde izquierdo de la pildora. */
	padding-left: var(--sp-6);
	border-left: 1px solid var(--border);
}

.site-header .itr-social-item {
	padding-left: var(--sp-3);
}

/* Iconos al mismo peso optico que el texto del menu: mismo color de reposo,
   mismo acento al pasar por encima. Antes competian en gris oscuro. */
.itr-social--cabecera a { color: var(--fg-muted); }

.itr-social--cabecera a:hover,
.itr-social--cabecera a:focus-visible {
	color: var(--accent);
	background: none;
}

@media (max-width: 1280px) {
	.site-header .itr-langs-item { margin-left: var(--sp-2); padding-left: var(--sp-3); }
}

/* ----------------------------------------------------------------------------
   Superficies oscuras dentro del tema claro
   ----------------------------------------------------------------------------
   El heroe es oscuro SIEMPRE, en los dos temas de la pagina. Y ningun azul
   sirve a la vez para el papel crema y para ese carbon: el que da 4,99:1 sobre
   papel se queda en 3,31:1 sobre el heroe, y el que funciona en el heroe baja
   a 2,93:1 sobre papel. No es falta de opciones, es fisica del contraste.

   Asi que la superficie oscura usa los tokens del tema oscuro. Se marca con
   una CLASE y no con el ID que genera Elementor, para que sobreviva a que la
   seccion se rehaga: en Elementor, Avanzado > Clases CSS > itr-superficie-oscura.
   ========================================================================= */

.itr-superficie-oscura,
/* El ID que Elementor genera hoy para el heroe. Va DESPUES de la clase a
   proposito: si algun dia rehaces la seccion, el ID deja de existir y basta
   con ponerle la clase desde Elementor (Avanzado > Clases CSS) para que siga
   funcionando, sin tocar este fichero. */
.elementor-element-af2c62d {
	--accent:    #7BA6F5;   /* 7,13:1 sobre #1C1A16, frente a 3,31:1 del azul del logo */
	--accent-bg: #111A2E;
	--e-global-color-accent: #7BA6F5;
}

/* ============================================================================
   COMPARTIR
   ----------------------------------------------------------------------------
   Cierra el articulo sin competir con el. Va despues del texto y antes de la
   navegacion, separado por una regla fina: el lector que ha terminado lo
   encuentra sin que estorbe al que aun esta leyendo.

   No hay contadores de veces compartido a proposito. Un contador a cero resta
   credibilidad, y para saberlo habria que preguntarselo a cada red en cada
   carga, que es justo la peticion externa que este bloque evita.
   ========================================================================= */

.itr-compartir {
	margin-block: var(--sp-8) 0;
	padding-top: var(--sp-6);
	border-top: 1px solid var(--border);
}

.itr-compartir__titulo {
	margin: 0 0 var(--sp-3);
	font-family: var(--f-head);
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.itr-compartir__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mismo tamano para enlaces y botones: los dos son la misma accion para quien
   lee, aunque uno navegue y el otro ejecute JavaScript. */
.itr-compartir__enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: none;
	color: var(--fg-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* El `display` de la clase pisa el `display:none` que el navegador aplica a
   [hidden], asi que los dos botones que dependen de JavaScript se veian aunque
   estuvieran marcados como ocultos: un boton que no hace nada. Hay que
   declararlo a mano. */
.itr-compartir__enlace[hidden] { display: none; }

.itr-compartir__enlace svg { width: 19px; height: 19px; }

.itr-compartir__enlace:hover,
.itr-compartir__enlace:focus-visible {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-bg);
}

/* Confirmacion de copiado: el color dice lo mismo que el aria-label, para quien
   no usa lector de pantalla. */
.itr-compartir__copiar.esta-copiado {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-bg);
}

@media (prefers-reduced-motion: reduce) {
	.itr-compartir__enlace { transition: none; }
}

/* ============================================================================
   CONTRASTE — CORRECCIONES MEDIDAS
   ----------------------------------------------------------------------------
   Todo lo de aqui sale de medir el contraste real en el navegador, en los dos
   temas, no de mirar los colores a ojo. El minimo que se persigue es 4,5:1 para
   texto normal y 3:1 para texto grande, que es lo que pide WCAG en nivel AA.
   ========================================================================= */

/* --fg-faint se quedaba corto en los dos temas: 3,7:1 en oscuro y 3,29:1 en
   claro sobre las tarjetas, donde se usa para fechas y tiempo de lectura.
   Los nuevos valores dan 4,94 y 4,80. */
/* #78725F pasaba sobre papel y sobre blanco pero se quedaba en 4,19 sobre el
   fondo hundido de la tabla de contenidos. #6F6A5E cubre los tres. */
:root { --fg-faint: #6F6A5E; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --fg-faint: #8F887A; }
}
:root[data-theme="dark"] { --fg-faint: #8F887A; }

/* --------------------------------------------------------------------------
   Colores globales de Elementor en modo oscuro.

   Elementor guarda su paleta como hex fijos en el kit (primary #1C1A16, text
   #6B655B) y no sabe nada de modo oscuro, asi que TODO texto suyo que use un
   color global queda ilegible: los titulos de seccion de la portada daban
   1,08:1 sobre el fondo. No es cosa de esos tres titulos, es sistemico.

   Se redefinen sus variables, que es justamente para lo que existen. Se hace
   sobre `body` y excluyendo el editor: definirlas en :root deshabilitaba el
   selector de color de los Ajustes del Sitio, que ya nos paso una vez.
   -------------------------------------------------------------------------- */

/* La guarda :not([data-theme="light"]) NO es opcional. Sin ella, quien tiene el
   sistema en oscuro y pulsa el interruptor del sitio para verlo en claro se
   encuentra el texto claro sobre fondo claro: la media query sigue activa
   aunque el tema visible sea el otro. Son cuatro combinaciones, no dos, y esa
   cuarta es la que se escapa si solo se prueba la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body:not(.elementor-editor-active):not(.elementor-editor-preview) {
		--e-global-color-primary:   #EAE5DA;
		--e-global-color-secondary: #A29A8B;
		--e-global-color-text:      #A29A8B;
	}
}

:root[data-theme="dark"] body:not(.elementor-editor-active):not(.elementor-editor-preview),
[data-theme="dark"] body:not(.elementor-editor-active):not(.elementor-editor-preview) {
	--e-global-color-primary:   #EAE5DA;
	--e-global-color-secondary: #A29A8B;
	--e-global-color-text:      #A29A8B;
}

/* Sobre el acento claro (#7BA6F5) el texto del boton tiene que ser oscuro:
   en blanco daba 2,44:1. Con el fondo del tema, 7,67.
   No se acota al modo oscuro: el hero es una superficie oscura en los DOS
   temas, asi que en claro el boton usaba tambien el azul claro y fallaba
   igual. La regla va por donde esta el boton, no por el tema activo. */
.itr-superficie-oscura .elementor-button,
.itr-superficie-oscura .elementor-button-text,
.elementor-element-af2c62d .elementor-button,
.elementor-element-af2c62d .elementor-button-text { color: #14120F; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .elementor-button,
	:root:not([data-theme="light"]) .elementor-button-text { color: #14120F; }
}
:root[data-theme="dark"] .elementor-button,
:root[data-theme="dark"] .elementor-button-text { color: #14120F; }

/* --------------------------------------------------------------------------
   Menu desplegable de movil y tableta.

   Hello Elementor lo pinta con colores claros escritos a pelo: fondo #fff,
   texto #55595c, bordes #eee y el boton de hamburguesa en gris oscuro sobre un
   velo negro al 5%. Nada de eso conoce el modo oscuro, asi que al abrir el menu
   en un movil con tema oscuro aparece un panel blanco.

   No se ve en escritorio, que es donde se suele mirar, y por eso paso
   desapercibido hasta medir el contraste elemento por elemento.
   -------------------------------------------------------------------------- */

.site-navigation-dropdown ul.menu,
.site-navigation-dropdown ul.menu li a,
.site-navigation ul.menu li ul {
	background: var(--surface);
	color: var(--fg);
}

.site-navigation-dropdown ul.menu li a {
	/* La sombra interior hacia dentro hacia de separador; con el token se ve
	   igual en los dos temas. */
	box-shadow: inset 0 -1px 0 var(--border);
}

.site-navigation ul.menu li ul li { border-block-end-color: var(--border); }

.site-navigation-dropdown ul.menu li.current-menu-item a {
	background: var(--accent-bg);
	color: var(--accent);
}

.site-navigation-toggle-holder .site-navigation-toggle {
	background-color: var(--bg-sunken);
	color: var(--fg);
}

/* La flecha de los submenus tambien venia fija en #666. */
.site-navigation ul.menu li.menu-item-has-children:after { color: var(--fg-muted); }