/* ==========================================================================
   TecniEasy — capa de diseño editorial sobre Astra
   ========================================================================== */

:root {
	/* Tinta y grises: una sola familia, ligeramente cálida */
	--te-ink:          #14171c;
	--te-ink-soft:     #39414d;
	--te-muted:        #6b7482;
	--te-faint:        #98a0ab;

	/* Superficies */
	--te-bg:           #ffffff;
	--te-surface:      #f7f7f4;
	--te-surface-2:    #eeefe9;
	--te-line:         #e3e3dc;
	--te-line-strong:  #cfcfc6;

	/* Un único acento, desaturado */
	--te-accent:       #1f5f8b;
	--te-accent-hover: #16455f;
	--te-accent-soft:  #eaf1f6;

	/* Sombras teñidas con el tono del acento, no negro puro */
	--te-shadow-sm: 0 1px 2px rgba(20, 38, 54, .06);
	--te-shadow-md: 0 2px 8px rgba(20, 38, 54, .07), 0 1px 2px rgba(20, 38, 54, .05);
	--te-shadow-lg: 0 12px 32px rgba(20, 38, 54, .10), 0 2px 6px rgba(20, 38, 54, .05);

	--te-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--te-sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--te-read: 68ch;
	--te-radius: 6px;
	--te-radius-lg: 12px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body,
.ast-separate-container {
	font-family: var(--te-sans);
	color: var(--te-ink-soft);
	background-color: var(--te-surface);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

/* Titulares en serif: autoridad editorial */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--te-serif);
	color: var(--te-ink);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1, .entry-title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.05rem); letter-spacing: -0.02em; margin-top: 2.4em; }
h3 { font-size: clamp(1.22rem, 1.05rem + 0.6vw, 1.5rem); margin-top: 1.9em; }
h4 { font-size: 1.1rem; }

p { text-wrap: pretty; }

/* Foco visible en todo lo interactivo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--te-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.te-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--te-ink);
	color: #fff;
	padding: .75rem 1.25rem;
	font-family: var(--te-sans);
	font-weight: 600;
	text-decoration: none;
}
.te-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.site-header {
	background-color: var(--te-bg);
	border-bottom: 1px solid var(--te-line);
	box-shadow: none;
}

.site-title,
.site-title a {
	font-family: var(--te-serif);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--te-ink) !important;
}

.main-header-menu .menu-link {
	font-family: var(--te-sans);
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .005em;
	color: var(--te-ink-soft);
	transition: color .2s ease;
}
.main-header-menu .menu-link:hover { color: var(--te-accent); }

/* Página actual marcada en el menú */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
	color: var(--te-ink);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--te-accent);
}

/* --------------------------------------------------------------------------
   Contenedores
   -------------------------------------------------------------------------- */

.site-content > .ast-container { max-width: 1240px; }

/* Astra tenía el ancho fijado en 750px desde el personalizador: demasiado
   estrecho en escritorio. Se amplía a una medida de lectura cómoda. */
body.single .site-content > .ast-container,
body.page  .site-content > .ast-container { max-width: 900px; }

body.blog .site-content > .ast-container,
body.archive .site-content > .ast-container { max-width: 860px; }

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	background-color: var(--te-bg);
	border-radius: var(--te-radius-lg);
	border: none;
}

/* El banner de título de página, que mostraba "Inicio" */
.home .ast-single-entry-banner,
.page-id-6 .ast-single-entry-banner { display: none; }

/* --------------------------------------------------------------------------
   Listado del blog: lista editorial a una columna
   -------------------------------------------------------------------------- */

.blog .ast-separate-container,
.archive .ast-separate-container { background-color: var(--te-surface); }

/* Astra monta una rejilla flex de 3 columnas. Con titulares en serif y sin
   imágenes queda apretada, así que se pasa a una sola columna. */
.blog .site-main .ast-row,
.archive .site-main .ast-row { display: block; margin: 0; }

.blog .ast-article-post,
.archive .ast-article-post {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border-radius: 0;
	border-bottom: 1px solid var(--te-line);
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.blog .ast-article-post:last-of-type,
.archive .ast-article-post:last-of-type { border-bottom: none; }

/* Fila: miniatura a la izquierda, texto a la derecha.
   Astra mete la imagen DENTRO de .post-content junto al resto de elementos,
   así que se usa rejilla: la imagen ocupa la columna 1 a lo alto, y todo lo
   demás va a la columna 2. */
.blog .ast-article-inner,
.archive .ast-article-inner { padding: 2.3rem 0; }

.blog .post-content,
.archive .post-content {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	column-gap: 1.9rem;
	align-items: start;
}
.blog .post-content > *:not(.ast-blog-featured-section),
.archive .post-content > *:not(.ast-blog-featured-section) { grid-column: 2; }

.blog .ast-blog-featured-section,
.archive .ast-blog-featured-section {
	grid-column: 1;
	grid-row: 1 / -1;
	margin: 0;
	border-radius: var(--te-radius);
	overflow: hidden;
	background: var(--te-surface-2);
}
/* Misma proporción que las imágenes destacadas (1200x654), para que las
   cabeceras tipográficas no salgan recortadas por el medio. */
.blog .ast-blog-featured-section img,
.archive .ast-blog-featured-section img {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 654;
	height: auto;
	object-fit: cover;
}

/* Sin imagen: una sola columna */
.blog .ast-no-thumb .post-content,
.archive .ast-no-thumb .post-content { grid-template-columns: minmax(0, 1fr); }
.blog .ast-no-thumb .post-content > *,
.archive .ast-no-thumb .post-content > * { grid-column: 1; }
.blog .ast-no-thumb .ast-blog-featured-section,
.archive .ast-no-thumb .ast-blog-featured-section { display: none; }

.blog .entry-title,
.archive .entry-title {
	font-size: clamp(1.3rem, 1.02rem + .95vw, 1.72rem);
	line-height: 1.25;
	margin: .3rem 0 .5rem;
}
.blog .entry-title a,
.archive .entry-title a {
	color: var(--te-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--te-accent), var(--te-accent));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
.blog .entry-title a:hover,
.archive .entry-title a:hover {
	color: var(--te-accent);
	background-size: 100% 2px;
}

/* Etiqueta de categoría: versalitas discretas, no mayúsculas gritonas */
.ast-taxonomy-container a,
.ast-terms-link a {
	font-family: var(--te-sans);
	font-size: .78rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: .06em;
	color: var(--te-accent);
	text-decoration: none;
	transition: color .2s ease;
}
.ast-taxonomy-container a:hover { color: var(--te-accent-hover); }

.blog .entry-content p,
.archive .entry-content p {
	color: var(--te-muted);
	font-size: 1rem;
	line-height: 1.66;
	max-width: 66ch;
	margin-bottom: .7rem;
}

.ast-blog-meta-container,
.entry-meta {
	font-family: var(--te-sans);
	font-size: .82rem;
	color: var(--te-faint);
	font-weight: 400;
}
.ast-blog-meta-container a,
.entry-meta a { color: var(--te-faint); text-decoration: none; }
.ast-blog-meta-container a:hover { color: var(--te-accent); }

/* Enlace "seguir leyendo" */
.blog .read-more a,
.archive .read-more a {
	font-family: var(--te-sans);
	font-size: .9rem;
	font-weight: 600;
	color: var(--te-accent);
	text-decoration: none;
}
.blog .read-more a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* --------------------------------------------------------------------------
   Entrada individual: legibilidad
   -------------------------------------------------------------------------- */

.single .ast-article-single { padding: clamp(1.5rem, 4vw, 3.5rem) !important; }

.single .entry-content > *,
.single .entry-header {
	max-width: var(--te-read);
	margin-left: auto;
	margin-right: auto;
}
.single .entry-content > .alignwide,
.single .entry-content > .alignfull,
.single .entry-content > .wp-block-table,
.single .entry-content > figure { max-width: 100%; }

.single .entry-content {
	font-size: 1.115rem;
	line-height: 1.78;
	color: var(--te-ink-soft);
}

.single .entry-content p { margin-bottom: 1.45em; }

/* Primer párrafo con más peso: entradilla */
.single .entry-content > p:first-of-type {
	font-size: 1.28rem;
	line-height: 1.6;
	color: var(--te-ink);
	font-weight: 400;
}

.single .entry-content strong { color: var(--te-ink); font-weight: 600; }

.single .entry-content a {
	color: var(--te-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: rgba(31, 95, 139, .4);
	transition: text-decoration-color .2s ease, color .2s ease;
}
.single .entry-content a:hover {
	color: var(--te-accent-hover);
	text-decoration-color: var(--te-accent);
}

/* Listas */
.single .entry-content ul,
.single .entry-content ol { margin-bottom: 1.6em; padding-left: 1.3em; }
.single .entry-content li { margin-bottom: .6em; padding-left: .2em; }
.single .entry-content ul li::marker { color: var(--te-accent); }
.single .entry-content ol li::marker { color: var(--te-accent); font-weight: 600; }

/* Nota final de transparencia sobre las fuentes */
.single .entry-content > p > em:only-child {
	display: block;
	font-family: var(--te-sans);
	font-size: .93rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--te-muted);
	background: var(--te-surface);
	border-left: 3px solid var(--te-line-strong);
	padding: 1.1rem 1.3rem;
	margin-top: 2.5rem;
	border-radius: 0 var(--te-radius) var(--te-radius) 0;
}

/* --------------------------------------------------------------------------
   Tablas: pieza clave, las guías las usan mucho
   -------------------------------------------------------------------------- */

.wp-block-table { margin: 2.2rem 0; overflow-x: auto; }

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--te-sans);
	font-size: .96rem;
	line-height: 1.55;
	border: none;
}

.wp-block-table th {
	background: var(--te-ink);
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .03em;
	text-transform: none;
	text-align: left;
	padding: .85rem 1rem;
	border: none;
	white-space: nowrap;
}
.wp-block-table th:first-child { border-top-left-radius: var(--te-radius); }
.wp-block-table th:last-child  { border-top-right-radius: var(--te-radius); }

.wp-block-table td {
	padding: .85rem 1rem;
	border: none;
	border-bottom: 1px solid var(--te-line);
	vertical-align: top;
	color: var(--te-ink-soft);
}

.wp-block-table tbody tr:nth-child(even) { background: var(--te-surface); }
.wp-block-table tbody tr:hover { background: var(--te-accent-soft); }
.wp-block-table td strong { color: var(--te-ink); }

.wp-block-table figcaption,
.wp-element-caption {
	font-family: var(--te-sans);
	font-size: .84rem;
	color: var(--te-faint);
	margin-top: .7rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Índice de contenidos
   -------------------------------------------------------------------------- */

#ez-toc-container,
.ez-toc-container {
	background: var(--te-surface) !important;
	border: none !important;
	border-left: 3px solid var(--te-accent) !important;
	border-radius: 0 var(--te-radius) var(--te-radius) 0 !important;
	box-shadow: none !important;
	padding: 1.3rem 1.5rem !important;
	max-width: var(--te-read);
	margin-left: auto !important;
	margin-right: auto !important;
}
#ez-toc-container .ez-toc-title {
	font-family: var(--te-sans) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	font-variant: small-caps;
	letter-spacing: .08em;
	color: var(--te-muted) !important;
}
#ez-toc-container a {
	font-family: var(--te-sans);
	color: var(--te-ink-soft) !important;
	text-decoration: none !important;
	font-size: .95rem;
	transition: color .2s ease;
}
#ez-toc-container a:hover { color: var(--te-accent) !important; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="url"], textarea {
	font-family: var(--te-sans);
	border: 1px solid var(--te-line-strong);
	border-radius: var(--te-radius);
	padding: .8rem 1rem;
	background: var(--te-bg);
	color: var(--te-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	border-color: var(--te-accent);
	box-shadow: 0 0 0 3px var(--te-accent-soft);
	outline: none;
}

button, .wp-block-button__link, input[type="submit"], .ast-button {
	font-family: var(--te-sans) !important;
	font-weight: 600 !important;
	letter-spacing: .005em;
	border-radius: var(--te-radius) !important;
	background: var(--te-accent) !important;
	border: none !important;
	color: #fff !important;
	padding: .8rem 1.6rem !important;
	box-shadow: var(--te-shadow-sm);
	transition: background .2s ease, transform .12s ease, box-shadow .2s ease;
}
button:hover, .wp-block-button__link:hover, input[type="submit"]:hover, .ast-button:hover {
	background: var(--te-accent-hover) !important;
	box-shadow: var(--te-shadow-md);
}
button:active, .wp-block-button__link:active, input[type="submit"]:active {
	transform: translateY(1px);
	box-shadow: var(--te-shadow-sm);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.site-footer,
.ast-small-footer {
	background: var(--te-ink);
	color: var(--te-faint);
	font-family: var(--te-sans);
	font-size: .9rem;
}
.site-footer a, .ast-small-footer a {
	color: #c8cdd4;
	text-decoration: none;
	transition: color .2s ease;
}
.site-footer a:hover, .ast-small-footer a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Respeto por quien prefiere menos movimiento
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   Portada
   ========================================================================== */

.home .ast-separate-container .ast-article-single { padding: 0 !important; }
body.home .site-content > .ast-container { max-width: 1120px; }

/* El banner de Astra que mostraba "BIENVENIDO / Inicio" */
.home .ast-single-entry-banner,
.home .entry-header,
.home .ast-archive-description { display: none !important; }

/* --- Héroe ------------------------------------------------------------- */

.te-hero {
	padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
	max-width: 46rem;
	margin-left: 0;
}

.te-eyebrow {
	font-family: var(--te-sans);
	font-size: .8rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: .09em;
	color: var(--te-accent);
	margin-bottom: .9rem;
}

.te-hero__title {
	font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4rem) !important;
	line-height: 1.06;
	letter-spacing: -0.035em;
	font-weight: 600;
	margin: 0 0 1.1rem;
}

.te-hero__sub {
	font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem);
	line-height: 1.6;
	color: var(--te-muted);
	max-width: 36rem;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 2rem;
}

.te-hero > * { margin-left: 0 !important; margin-right: auto !important; }
.te-hero__cta { gap: .75rem; justify-content: flex-start; }

.te-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--te-ink) !important;
	box-shadow: inset 0 0 0 1px var(--te-line-strong) !important;
}
.te-btn-ghost .wp-block-button__link:hover {
	background: var(--te-surface) !important;
	box-shadow: inset 0 0 0 1px var(--te-ink) !important;
}

/* --- Reglas y títulos de sección --------------------------------------- */

.te-rule {
	border: none;
	border-top: 1px solid var(--te-line);
	margin: 0 clamp(1.2rem, 4vw, 3.5rem);
	max-width: none;
	opacity: 1;
}

.te-section-title {
	font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem) !important;
	margin: clamp(2.6rem, 5vw, 3.8rem) clamp(1.2rem, 4vw, 3.5rem) 1.6rem !important;
}

.te-more {
	margin: 1.6rem clamp(1.2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}
.te-more a {
	font-family: var(--te-sans);
	font-weight: 600;
	font-size: .97rem;
	color: var(--te-accent);
	text-decoration: none;
	transition: color .2s ease;
}
.te-more a:hover { color: var(--te-accent-hover); text-decoration: underline; text-underline-offset: .22em; }

/* --- Últimas entradas --------------------------------------------------- */

.te-latest {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 3rem;
	margin: 0 clamp(1.2rem, 4vw, 3.5rem);
	padding: 0;
	list-style: none;
}
.te-latest li {
	padding: 1.5rem 0;
	border-top: 1px solid var(--te-line);
	margin: 0;
}
.te-latest li:first-child,
.te-latest li:nth-child(2) { border-top: none; padding-top: 0; }

.te-latest .wp-block-latest-posts__post-title {
	display: block;
	font-family: var(--te-serif);
	font-size: 1.24rem;
	font-weight: 600;
	line-height: 1.26;
	letter-spacing: -0.015em;
	color: var(--te-ink);
	text-decoration: none;
	margin-bottom: .45rem;
	transition: color .2s ease;
}
.te-latest .wp-block-latest-posts__post-title:hover { color: var(--te-accent); }

.te-latest .wp-block-latest-posts__post-date {
	display: block;
	font-family: var(--te-sans);
	font-size: .78rem;
	color: var(--te-faint);
	margin-bottom: .5rem;
	order: -1;
}

.te-latest .wp-block-latest-posts__post-excerpt {
	font-family: var(--te-sans);
	font-size: .96rem;
	line-height: 1.6;
	color: var(--te-muted);
	margin: 0;
}

/* --- Temas: rejilla asimétrica, no tres columnas iguales ---------------- */

.te-topics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--te-line);
	border-top: 1px solid var(--te-line);
	border-bottom: 1px solid var(--te-line);
	margin: 0 clamp(1.2rem, 4vw, 3.5rem);
}
.te-topic { margin: 0 !important; background: var(--te-bg); }
.te-topic--wide { grid-column: span 2; }

.te-topic a {
	display: block;
	padding: 1.7rem 1.8rem;
	text-decoration: none;
	height: 100%;
	transition: background .25s ease;
}
.te-topic a:hover { background: var(--te-accent-soft); }

.te-topic strong {
	display: block;
	font-family: var(--te-serif);
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--te-ink);
	margin-bottom: .4rem;
}
.te-topic span {
	display: block;
	font-family: var(--te-sans);
	font-size: .95rem;
	line-height: 1.6;
	color: var(--te-muted);
	max-width: 46ch;
}
.te-topic a:hover strong { color: var(--te-accent); }

/* --- Cómo se hacen las guías -------------------------------------------- */

.te-method { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.te-method > p { margin: 0 clamp(1.2rem, 4vw, 3.5rem) 1.4rem; max-width: 58ch; color: var(--te-ink-soft); }

.te-method__list {
	margin: 0 clamp(1.2rem, 4vw, 3.5rem) !important;
	padding-left: 1.15rem;
	max-width: 62ch;
}
.te-method__list li { margin-bottom: .85rem; color: var(--te-ink-soft); line-height: 1.66; }
.te-method__list li::marker { color: var(--te-accent); }
.te-method__list strong { color: var(--te-ink); }

@media (max-width: 40rem) {
	.te-topics { grid-template-columns: 1fr; }
	.te-topic--wide { grid-column: span 1; }
	.te-latest li:nth-child(2) { border-top: 1px solid var(--te-line); padding-top: 1.5rem; }
}


/* Astra aplica subrayado a todo enlace dentro de .entry-content y gana en
   especificidad. Se refuerzan los selectores de la portada. */
.entry-content .te-topic a,
.entry-content .te-latest a,
.entry-content .te-more a,
.entry-content .te-hero__cta a { text-decoration: none; }

.entry-content .te-topic a:hover { text-decoration: none; }
.entry-content .te-more a:hover { text-decoration: underline; text-underline-offset: .22em; }

.entry-content .te-topic strong {
	display: block;
	font-family: var(--te-serif);
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--te-ink);
	margin-bottom: .4rem;
	transition: color .2s ease;
}
.entry-content .te-topic span {
	display: block;
	font-family: var(--te-sans);
	font-size: .95rem;
	line-height: 1.6;
	color: var(--te-muted);
	max-width: 46ch;
}
.entry-content .te-topic a:hover strong { color: var(--te-accent); }

.entry-content .te-latest .wp-block-latest-posts__post-title { color: var(--te-ink); }
.entry-content .te-latest .wp-block-latest-posts__post-title:hover { color: var(--te-accent); }

@media (max-width: 52rem) {
	.te-latest { grid-template-columns: 1fr; }
	.te-latest li:nth-child(2) { border-top: 1px solid var(--te-line); padding-top: 1.5rem; }
}

/* ==========================================================================
   Movimiento
   Reglas: solo transform y opacity. Nada por encima de 300 ms en interfaz.
   Nada de movimiento sobre el texto que se está leyendo.
   ========================================================================== */

:root {
	--te-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--te-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* --- Barra de progreso de lectura --------------------------------------
   Propósito: indicación de estado. Cuánto queda del artículo.
   La escala la mueve un listener de scroll: se probaron las animaciones
   guiadas por scroll de CSS y la línea de tiempo no se activaba en este
   tema, además de no existir en Safari ni Firefox. */

.te-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--te-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 999;
	pointer-events: none;
	will-change: transform;
}

/* --- Entrada al aparecer en pantalla ------------------------------------
   Propósito: evitar que los bloques aparezcan de golpe al desplazarse.
   Solo en superficies de navegación: portada, listado y archivos.
   Nunca sobre el cuerpo de un artículo, que es lo que se está leyendo.
   Las reglas solo actúan si el script marcó <html> con .te-js, así que sin
   JavaScript todo se ve normal en lugar de quedarse invisible. */

.te-js .te-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 360ms var(--te-ease-out), transform 360ms var(--te-ease-out);
}
.te-js .te-reveal.te-in {
	opacity: 1;
	transform: translateY(0);
}

/* Escalonado: la segunda columna entra un pelín después */
.te-js .te-latest li:nth-child(2n).te-reveal,
.te-js .te-topic:nth-child(2n).te-reveal { transition-delay: 55ms; }

/* --- Reacción al pasar el ratón -----------------------------------------
   Nivel "decenas de veces al día": movimiento casi imperceptible.
   Con gating de puntero: en táctil un toque dispara un hover falso. */

@media (hover: hover) and (pointer: fine) {

	.blog .ast-article-post,
	.archive .ast-article-post { transition: background-color 150ms ease; }
	.blog .ast-article-post:hover,
	.archive .ast-article-post:hover { background-color: rgba(31, 95, 139, .035) !important; }

	.blog .post-thumb img,
	.archive .post-thumb img { transition: transform 280ms var(--te-ease-out); }
	.blog .ast-article-post:hover .post-thumb img,
	.archive .ast-article-post:hover .post-thumb img { transform: scale(1.03); }

	/* Tarjetas de tema: la flecha asoma */
	.entry-content .te-topic a { position: relative; }
	.entry-content .te-topic a::after {
		content: "\2192";
		position: absolute;
		top: 1.7rem;
		right: 1.8rem;
		font-family: var(--te-sans);
		color: var(--te-accent);
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity 180ms ease, transform 180ms var(--te-ease-out);
	}
	.entry-content .te-topic a:hover::after { opacity: 1; transform: translateX(0); }

	.te-more a { display: inline-block; transition: color 200ms ease, transform 180ms var(--te-ease-out); }
	.te-more a:hover { transform: translateX(2px); }
}

/* Respuesta al pulsar: confirma que la interfaz te ha oído */
.entry-content .te-topic a { transition: background-color 250ms ease, transform 100ms ease; }
.entry-content .te-topic a:active { transform: translateY(1px); }

.blog .entry-title a,
.archive .entry-title a {
	transition: background-size 280ms var(--te-ease-out), color 180ms ease;
}

/* --- Menos movimiento para quien lo pide -------------------------------
   Menos y más suave, no cero: se conserva la aparición por opacidad, que
   ayuda a entender que hay contenido nuevo, y se quita el desplazamiento. */

@media (prefers-reduced-motion: reduce) {
	.te-js .te-reveal {
		transform: none;
		transition: opacity 250ms ease;
	}
	.te-js .te-reveal.te-in { transform: none; }
	.blog .ast-article-post:hover .post-thumb img,
	.archive .ast-article-post:hover .post-thumb img { transform: none; }
	.te-more a:hover { transform: none; }
	.entry-content .te-topic a:hover::after { transform: none; }
	.te-progress { display: none; }
}

/* --- Imagen destacada de la entrada -------------------------------------
   Astra la tenía desactivada; se inserta desde el plugin de diseño. */

.te-destacada-marco {
	margin: 0 0 2.4rem;
	max-width: 100% !important;
	border-radius: var(--te-radius-lg);
	overflow: hidden;
	background: var(--te-surface-2);
}

.te-destacada-marco img,
img.te-destacada {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 654;
	object-fit: cover;
}

.te-destacada-marco figcaption {
	font-family: var(--te-sans);
	font-size: .84rem;
	color: var(--te-faint);
	padding: .7rem .2rem 0;
	line-height: 1.5;
}

/* Miniatura: movimiento al pasar el ratón y apilado en móvil */
@media (hover: hover) and (pointer: fine) {
	.blog .ast-blog-featured-section img,
	.archive .ast-blog-featured-section img { transition: transform 280ms var(--te-ease-out); }
	.blog .ast-article-post:hover .ast-blog-featured-section img,
	.archive .ast-article-post:hover .ast-blog-featured-section img { transform: scale(1.03); }
}

@media (max-width: 44rem) {
	.blog .post-content,
	.archive .post-content { grid-template-columns: minmax(0, 1fr); }
	.blog .post-content > *,
	.archive .post-content > * { grid-column: 1 !important; }
	.blog .ast-blog-featured-section,
	.archive .ast-blog-featured-section { grid-row: auto; margin-bottom: 1rem; }
	.blog .ast-blog-featured-section img,
	.archive .ast-blog-featured-section img { aspect-ratio: 1200 / 654; height: auto; }
}

}

/* --- Seguir leyendo ------------------------------------------------------ */

.te-seguir-leyendo {
	margin-top: 3rem !important;
	padding-top: 1.8rem;
	border-top: 1px solid var(--te-line);
	max-width: var(--te-read);
}
.te-seguir-leyendo h2 {
	font-family: var(--te-sans) !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	font-variant: small-caps;
	letter-spacing: .08em;
	color: var(--te-muted) !important;
	margin: 0 0 .9rem !important;
}
.te-seguir-leyendo ul { margin: 0 !important; padding-left: 0 !important; list-style: none; }
.te-seguir-leyendo li { margin-bottom: .55rem !important; padding-left: 0 !important; }
.te-seguir-leyendo li::marker { content: none; }
.entry-content .te-seguir-leyendo a {
	font-family: var(--te-serif);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--te-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--te-accent), var(--te-accent));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 260ms var(--te-ease-out), color 180ms ease;
}
.entry-content .te-seguir-leyendo a:hover {
	color: var(--te-accent);
	background-size: 100% 1px;
}

/* ==========================================================================
   Índice filtrable de guías
   ========================================================================== */

.te-indice { max-width: 100%; }

/* --- Barra de búsqueda y filtros ---------------------------------------- */

.te-indice__barra {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--te-bg);
	padding: 1.2rem 0 1rem;
	margin-bottom: .4rem;
	border-bottom: 1px solid var(--te-line);
}

.te-indice__campo {
	display: flex;
	align-items: center;
	gap: .65rem;
	background: var(--te-surface);
	border: 1px solid var(--te-line);
	border-radius: 999px;
	padding: .2rem .5rem .2rem 1rem;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.te-indice__campo:focus-within {
	background: var(--te-bg);
	border-color: var(--te-accent);
	box-shadow: 0 0 0 3px var(--te-accent-soft);
}

.te-indice__lupa {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--te-faint);
}
.te-indice__campo:focus-within .te-indice__lupa { color: var(--te-accent); }

.te-indice__buscar {
	flex: 1 1 auto;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: .7rem 0 !important;
	font-family: var(--te-sans);
	font-size: 1.02rem;
	color: var(--te-ink);
	min-width: 0;
}
.te-indice__buscar:focus { outline: none; box-shadow: none !important; }
.te-indice__buscar::-webkit-search-cancel-button { display: none; }

.te-indice__limpiar {
	flex: 0 0 auto;
	background: transparent !important;
	border: none !important;
	color: var(--te-muted) !important;
	font-size: 1.5rem !important;
	line-height: 1;
	padding: .2rem .6rem !important;
	box-shadow: none !important;
	cursor: pointer;
}
.te-indice__limpiar:hover { color: var(--te-ink) !important; background: transparent !important; }

.te-indice__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: .9rem;
}

.te-pastilla {
	font-family: var(--te-sans) !important;
	font-size: .84rem !important;
	font-weight: 500 !important;
	color: var(--te-ink-soft) !important;
	background: var(--te-surface) !important;
	border: 1px solid var(--te-line) !important;
	border-radius: 999px !important;
	padding: .42rem .85rem !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.te-pastilla span {
	font-variant-numeric: tabular-nums;
	color: var(--te-faint);
	margin-left: .25rem;
	font-size: .92em;
}
.te-pastilla:hover {
	background: var(--te-bg) !important;
	border-color: var(--te-line-strong) !important;
	color: var(--te-ink) !important;
}
.te-pastilla.is-activa {
	background: var(--te-ink) !important;
	border-color: var(--te-ink) !important;
	color: #fff !important;
}
.te-pastilla.is-activa span { color: rgba(255,255,255,.62); }
.te-pastilla:disabled { opacity: .35; cursor: default; }

/* --- Contador y lista ---------------------------------------------------- */

.te-indice__contador {
	font-family: var(--te-sans);
	font-size: .82rem;
	color: var(--te-faint);
	margin: 1rem 0 .2rem !important;
}

.te-indice__lista {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.te-indice__item {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--te-line);
}
.te-indice__item:last-child { border-bottom: none; }
.te-indice__item[hidden] { display: none; }

.entry-content .te-indice__item a {
	display: block;
	padding: 1.25rem .6rem;
	text-decoration: none !important;
	border-radius: var(--te-radius);
	transition: background .18s ease;
}
.entry-content .te-indice__item a:hover { background: var(--te-surface); }

.te-indice__cat {
	display: block;
	font-family: var(--te-sans);
	font-size: .74rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: .06em;
	color: var(--te-accent);
	margin-bottom: .22rem;
}

.te-indice__titulo {
	display: block;
	font-family: var(--te-serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.26;
	letter-spacing: -0.015em;
	color: var(--te-ink);
	margin-bottom: .3rem;
}
.entry-content .te-indice__item a:hover .te-indice__titulo { color: var(--te-accent); }

.te-indice__extracto {
	display: block;
	font-family: var(--te-sans);
	font-size: .95rem;
	line-height: 1.6;
	color: var(--te-muted);
	max-width: 72ch;
}

/* Resaltado de coincidencias */
.te-indice mark {
	background: rgba(31, 95, 139, .14);
	color: inherit;
	padding: 0 .1em;
	border-radius: 2px;
}

.te-indice__vacio {
	font-family: var(--te-sans);
	color: var(--te-muted);
	background: var(--te-surface);
	border-left: 3px solid var(--te-line-strong);
	padding: 1.1rem 1.3rem;
	border-radius: 0 var(--te-radius) var(--te-radius) 0;
	margin-top: 1.5rem !important;
}

@media (max-width: 40rem) {
	.te-indice__barra { position: static; }
	.te-indice__filtros { gap: .4rem; }
	.te-pastilla { font-size: .8rem !important; padding: .38rem .7rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	.te-indice__item a,
	.te-pastilla { transition: none; }
}

/* ==========================================================================
   Diagramas propios en SVG
   ========================================================================== */

.te-svg {
	margin: 2.4rem 0 !important;
	max-width: 100% !important;
}
.te-svg svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.te-svg figcaption {
	font-family: var(--te-sans);
	font-size: .84rem;
	line-height: 1.5;
	color: var(--te-faint);
	margin-top: .85rem;
	max-width: 62ch;
}

/* Paleta compartida por todos los diagramas */
.te-svg-4k     { fill: var(--te-accent); opacity: .16; stroke: var(--te-accent); stroke-width: 1.5; }
.te-svg-1440   { fill: var(--te-accent); opacity: .3;  stroke: var(--te-accent); stroke-width: 1.5; }
.te-svg-1080   { fill: var(--te-accent); opacity: .85; stroke: var(--te-accent); stroke-width: 1.5; }

.te-svg-et {
	font-family: var(--te-sans);
	font-size: 15px;
	font-weight: 600;
	fill: var(--te-ink);
}
.te-svg-et--oscura { fill: #fff; }

.te-svg-num {
	font-family: var(--te-sans);
	font-size: 12.5px;
	fill: var(--te-muted);
	font-variant-numeric: tabular-nums;
}
.te-svg-num--oscura { fill: rgba(255,255,255,.82); }

.te-svg-mult {
	font-family: var(--te-sans);
	font-size: 13px;
	font-weight: 600;
	fill: var(--te-ink-soft);
	font-variant-numeric: tabular-nums;
}

.te-svg-linea { stroke: var(--te-line-strong); stroke-width: 1; }

/* Barras y ejes */
.te-svg-eje line       { stroke: var(--te-line-strong); stroke-width: 1; }
.te-svg-tick text,
.te-svg-tick           { font-family: var(--te-sans); font-size: 11px; fill: var(--te-faint); text-anchor: middle; }
.te-svg-fila           { font-family: var(--te-sans); font-size: 12.5px; font-weight: 600; fill: var(--te-ink-soft); text-anchor: end; }
.te-svg-val            { font-family: var(--te-sans); font-size: 11.5px; fill: var(--te-faint); font-variant-numeric: tabular-nums; }
.te-svg-b4k            { fill: var(--te-accent); opacity: .28; }
.te-svg-b8k            { fill: var(--te-accent); }
.te-svg-ref            { stroke: var(--te-ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; }
.te-svg-ref-et         { font-family: var(--te-sans); font-size: 11px; fill: var(--te-muted); }
.te-svg-leyenda text   { font-family: var(--te-sans); font-size: 11.5px; fill: var(--te-muted); }

/* Esquemas de paneles */
.te-svg-tit            { font-family: var(--te-sans); font-size: 13px; font-weight: 600; fill: var(--te-ink); }
.te-svg-cap            { font-family: var(--te-sans); font-size: 11px; fill: var(--te-muted); }
.te-svg-luz            { fill: #f2c94c; opacity: .75; rx: 3; }
.te-svg-nada           { fill: none; stroke: var(--te-line-strong); stroke-width: 1; stroke-dasharray: 4 4; rx: 3; }
.te-svg-persiana       { fill: var(--te-accent); opacity: .22; rx: 3; }
.te-svg-rayo line      { stroke: #e0b33a; stroke-width: 1.2; opacity: .7; }
.te-svg-pix-on         { fill: var(--te-accent); opacity: .5; }
.te-svg-pix-gris       { fill: #4a5560; }
.te-svg-pix-off        { fill: #05070a; }
.te-svg-et-pix         { font-family: var(--te-sans); font-size: 12px; font-weight: 600; fill: #fff; }
.te-svg-et-pix--peq    { font-size: 10px; font-weight: 400; opacity: .8; }
.te-svg-et-pix--clara  { fill: #cfd6de; }

@media (max-width: 34rem) {
	.te-svg-cap, .te-svg-tick, .te-svg-val, .te-svg-ref-et { font-size: 13px; }
	.te-svg-fila { font-size: 14px; }
}

/* Esquema de piezas */
.te-svg-placa        { fill: var(--te-surface); stroke: var(--te-line); stroke-width: 1; }
.te-svg-placa-et     { font-family: var(--te-sans); font-size: 11.5px; font-weight: 600; fill: var(--te-muted); }
.te-svg-caja rect    { fill: var(--te-bg); stroke: var(--te-accent); stroke-width: 1.4; }
.te-svg-caja--aux rect { stroke: var(--te-line-strong); }
.te-svg-caja-t       { font-family: var(--te-sans); font-size: 13px; font-weight: 600; fill: var(--te-ink); text-anchor: middle; }
.te-svg-caja-s       { font-family: var(--te-sans); font-size: 10.5px; fill: var(--te-muted); text-anchor: middle; }
.te-svg-flecha path  { stroke: var(--te-accent); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.te-svg-flecha-et    { font-family: var(--te-sans); font-size: 10px; fill: var(--te-faint); }

/* Barras de velocidad */
.te-svg-b-lento      { fill: var(--te-line-strong); }
.te-svg-b-medio      { fill: var(--te-accent); opacity: .45; }
.te-svg-val-dentro   { font-family: var(--te-sans); font-size: 11px; font-weight: 600; fill: #fff; transform: translate(8px, 11px); }
.te-svg-val-dentro--peq { font-size: 9.5px; font-weight: 400; }

/* Sensores a escala */
.te-svg-sensor rect  { stroke: var(--te-accent); stroke-width: 1.2; }
.s-ff                { fill: var(--te-accent); opacity: .10; }
.s-apsc              { fill: var(--te-accent); opacity: .16; }
.s-mft               { fill: var(--te-accent); opacity: .24; }
.s-1                 { fill: var(--te-accent); opacity: .36; }
.s-movil-alta        { fill: var(--te-accent); opacity: .55; }
.s-movil             { fill: var(--te-accent); opacity: .95; }
.te-svg-sen-et text  { font-family: var(--te-sans); font-size: 11.5px; font-weight: 600; fill: var(--te-ink-soft); }

/* Carriles de memoria */
.te-svg-carril path        { stroke: var(--te-accent); stroke-width: 3; opacity: .35; }
.te-svg-carril--doble path { stroke-width: 3; opacity: .85; }
.te-svg-caja-t--peq        { font-size: 11px; }
.te-svg-caja-s--fuerte     { fill: var(--te-accent); font-weight: 600; }
.te-svg-cap--fuerte        { fill: var(--te-ink); font-weight: 600; }

/* Densidad */
.te-svg-eje-v        { stroke: var(--te-line-strong); stroke-width: 1; }
.te-svg-umbral       { stroke: var(--te-ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .5; }
.te-svg-b-flojo      { fill: #c8735e; opacity: .75; }

/* Reconstrucción */
.te-svg-realim       { stroke: var(--te-accent); stroke-width: 1.4; fill: none; stroke-dasharray: 4 3; stroke-linecap: round; stroke-linejoin: round; }

/* Megapíxeles */
.te-svg-sensor-caja       { fill: var(--te-surface); stroke: var(--te-line-strong); stroke-width: 1.2; }
.te-svg-rejilla-fina path   { stroke: var(--te-line); stroke-width: .7; }
.te-svg-rejilla-gruesa path { stroke: var(--te-line-strong); stroke-width: 1.2; }
.te-svg-gota circle         { fill: #e0b33a; }
.te-svg-gota--poca circle   { fill: #e0b33a; opacity: .85; }

/* Listado: sin miniatura cuando la imagen es una cabecera tipográfica
   (repetiría el título y a ese tamaño no se lee). */
.blog .te-cabecera-generada .post-content,
.archive .te-cabecera-generada .post-content { grid-template-columns: minmax(0, 1fr); }
.blog .te-cabecera-generada .post-content > *,
.archive .te-cabecera-generada .post-content > * { grid-column: 1; }
.blog .te-cabecera-generada .ast-blog-featured-section,
.archive .te-cabecera-generada .ast-blog-featured-section { display: none; }