/*
Theme Name:   Clima Eficiente
Theme URI:    https://climaeficiente.net
Description:  Tema hijo de Kadence. Concepto «termografía»: base oscura, gradiente térmico frío→calor como identidad, titulares en Newsreader, datos en monoespaciada. Tokens y justificación en design-system/MASTER.md.
Author:       Equipo Clima Eficiente
Template:     kadence
Version:      2.0.0
Text Domain:  clima-eficiente
*/

/* ==========================================================================
   1. Fuentes autoalojadas
   El CDN de Google enviaría la IP del visitante a un tercero (RGPD) y añadiría
   una conexión externa que penaliza el LCP.
   ========================================================================== */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/newsreader-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/newsreader-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/inter-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Tokens — todos los contrastes verificados sobre #0C0C0E
   ========================================================================== */

:root {
	--ce-fondo: #0c0c0e;
	--ce-superficie: #17171a;   /* tarjetas */
	--ce-superficie-alta: #1f1f23;
	--ce-texto: #e4e4e7;        /* 15,40:1 — no blanco puro: cansa menos en textos largos */
	--ce-texto-suave: #a1a1aa;  /*  7,63:1 */
	--ce-borde: #27272a;
	--ce-borde-fuerte: #3f3f46;

	/* Los dos extremos del gradiente térmico. Sobre oscuro sí admiten saturación:
	   el naranja vivo que suspendía sobre blanco (3,41:1) aquí da 6,97:1. */
	--ce-calor: #f97316;        /*  6,97:1 */
	--ce-calor-claro: #fb923c;  /*  8,63:1 — hover */
	--ce-frio: #2dd4bf;         /* 10,50:1 */
	--ce-termico: linear-gradient(90deg, #2dd4bf 0%, #38bdf8 22%, #a78bfa 42%, #f97316 78%, #fbbf24 100%);

	--ce-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--ce-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ce-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--ce-lectura: 720px;
	--ce-ancho: 1240px;

	--ce-e1: 8px;
	--ce-e2: 16px;
	--ce-e3: 24px;
	--ce-e4: 32px;
	--ce-e5: 48px;
	--ce-e6: 64px;
	--ce-e7: 96px;
	--ce-e8: 140px;

	--ce-radio: 4px;
	--ce-transicion: 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* Kadence pinta casi todo con estas variables: redefinirlas recolorea el tema
   entero sin pelearse con la especificidad de sus selectores. */
:root {
	--global-palette1: var(--ce-calor);
	--global-palette2: var(--ce-calor-claro);
	--global-palette3: var(--ce-texto);
	--global-palette4: var(--ce-texto);
	--global-palette5: var(--ce-texto-suave);
	--global-palette6: var(--ce-borde);
	--global-palette7: var(--ce-superficie-alta);
	--global-palette8: var(--ce-superficie);
	--global-palette9: var(--ce-fondo);

	--global-body-font-family: var(--ce-sans);
	--global-heading-font-family: var(--ce-serif);
	--global-content-width: var(--ce-lectura);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

html {
	color-scheme: dark;
}

body {
	background-color: var(--ce-fondo);
	color: var(--ce-texto);
	font-family: var(--ce-sans);
	font-size: 1.125rem;
	/* Sobre oscuro el texto «engorda» ópticamente: un pelo más de interlineado
	   y nada de antialiasing agresivo lo compensan. */
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ce-calor);
	color: #0c0c0e;
}

h1, h2, h3, h4,
.entry-title,
.wp-block-heading {
	font-family: var(--ce-serif);
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1, .entry-title {
	font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.1rem);
	line-height: 1.08;
}

h2, .entry-content h2 {
	font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem);
	line-height: 1.2;
	margin-top: var(--ce-e6);
	margin-bottom: var(--ce-e2);
}

h3, .entry-content h3 {
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 600;
	margin-top: var(--ce-e4);
	margin-bottom: var(--ce-e1);
}

/* Etiqueta monoespaciada: el recurso que da aire de informe técnico.
   Se usa en categorías, metadatos, unidades y numeración de secciones. */
.ce-etiqueta {
	font-family: var(--ce-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
}

/* Barra del gradiente térmico. Es la firma visual del sitio. */
.ce-barra-termica {
	height: 3px;
	background: var(--ce-termico);
	border: 0;
	margin: 0;
	width: 100%;
}

/* ==========================================================================
   4. Contenido del artículo
   ========================================================================== */

.entry-content {
	max-width: var(--ce-lectura);
	margin-inline: auto;
}

.entry-content > * + * {
	margin-top: var(--ce-e3);
}

.entry-content p {
	/* ~72 caracteres por línea: el óptimo de legibilidad en textos largos. */
	max-width: 66ch;
	color: var(--ce-texto);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--ce-e3);
}

.entry-content li + li {
	margin-top: var(--ce-e1);
}

.entry-content li::marker {
	color: var(--ce-calor);
	font-family: var(--ce-mono);
	font-size: 0.9em;
}

/* Enlaces subrayados a propósito: el color por sí solo no es accesible. */
.entry-content a {
	color: var(--ce-calor);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--ce-calor) 45%, transparent);
	transition: color var(--ce-transicion), text-decoration-color var(--ce-transicion);
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--ce-calor-claro);
	text-decoration-color: currentColor;
}

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

.entry-content strong {
	font-weight: 600;
	color: #fff;
}

.entry-meta,
.entry-taxonomies {
	font-family: var(--ce-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
}

/* ==========================================================================
   5. Piezas editoriales
   ========================================================================== */

/* Cita → caja de dato clave, con la barra térmica como filo izquierdo. */
.entry-content .wp-block-quote {
	position: relative;
	background: var(--ce-superficie);
	border: 1px solid var(--ce-borde);
	border-left: 0;
	border-radius: 0 var(--ce-radio) var(--ce-radio) 0;
	padding: var(--ce-e3) var(--ce-e4);
	margin-block: var(--ce-e5);
	font-style: normal;
	overflow: hidden;
}

.entry-content .wp-block-quote::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--ce-termico);
}

.entry-content .wp-block-quote p {
	margin: 0;
	max-width: none;
}

.entry-content .wp-block-quote p + p {
	margin-top: var(--ce-e2);
}

/* Tablas comparativas: las llevan casi todos los artículos de /comparativas/. */
.entry-content .wp-block-table {
	margin-block: var(--ce-e5);
	overflow-x: auto;
}

.entry-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.98rem;
	background: var(--ce-superficie);
	border: 1px solid var(--ce-borde);
}

.entry-content .wp-block-table th {
	background: var(--ce-superficie-alta);
	font-family: var(--ce-mono);
	font-weight: 500;
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: var(--ce-e2);
	border-bottom: 1px solid var(--ce-borde);
	vertical-align: top;
}

.entry-content .wp-block-table tr:last-child td {
	border-bottom: none;
}

.entry-content .wp-block-separator {
	border: none;
	height: 1px;
	background: var(--ce-borde);
	margin-block: var(--ce-e6);
	max-width: var(--ce-lectura);
}

.entry-content figure img {
	border-radius: var(--ce-radio);
	height: auto;
}

.entry-content figcaption {
	font-family: var(--ce-mono);
	font-size: 0.78rem;
	color: var(--ce-texto-suave);
	text-align: left;
	margin-top: var(--ce-e1);
}

/* ==========================================================================
   6. Tarjetas de los listados de categoría
   ========================================================================== */

.loop-entry.entry {
	background: var(--ce-superficie);
	border: 1px solid var(--ce-borde);
	border-radius: var(--ce-radio);
	overflow: hidden;
	transition: border-color var(--ce-transicion), transform var(--ce-transicion);
}

.loop-entry.entry:hover {
	border-color: var(--ce-borde-fuerte);
	transform: translateY(-3px);
}

.loop-entry .entry-title {
	font-size: 1.25rem;
	line-height: 1.25;
}

.loop-entry .entry-title a {
	color: var(--ce-texto);
	text-decoration: none;
}

.loop-entry .entry-title a:hover {
	color: var(--ce-calor);
}

/* Reserva de espacio para la imagen: evita saltos de layout (CLS). */
.loop-entry .post-thumbnail img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* ==========================================================================
   7. Cabecera y navegación
   ========================================================================== */

.site-header {
	background: color-mix(in srgb, var(--ce-fondo) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ce-borde);
}

.site-header .site-header-row {
	padding-block: 0;
}

.site-branding .site-title {
	font-family: var(--ce-serif);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	margin: 0;
	color: #fff;
}

/* Las etiquetas del menú van acortadas («Ayudas», no «Ayudas y precios»):
   con las 7 completas el menú envolvía a dos filas. Ver MENU_CORTO en config.py. */
.header-navigation .menu-item > a {
	font-family: var(--ce-sans);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	white-space: nowrap;
	color: var(--ce-texto-suave);
	min-height: 44px;   /* área táctil mínima */
	display: inline-flex;
	align-items: center;
}

.header-navigation .menu-item > a:hover,
.header-navigation .current-menu-item > a {
	color: var(--ce-calor);
}

.header-navigation .current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--ce-calor);
}

/* ==========================================================================
   8. Botones
   ========================================================================== */

.wp-block-button__link,
.button,
button.button,
.ce-boton {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-e1);
	background-color: var(--ce-calor);
	color: #0c0c0e;
	font-family: var(--ce-sans);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	border: 0;
	border-radius: var(--ce-radio);
	padding: 14px var(--ce-e3);
	min-height: 44px;
	cursor: pointer;
	transition: background-color var(--ce-transicion), transform var(--ce-transicion);
}

.wp-block-button__link:hover,
.button:hover,
.ce-boton:hover {
	background-color: var(--ce-calor-claro);
	color: #0c0c0e;
	transform: translateY(-1px);
}

.ce-boton--fantasma {
	background: transparent;
	color: var(--ce-texto);
	border: 1px solid var(--ce-borde-fuerte);
}

.ce-boton--fantasma:hover {
	background: var(--ce-superficie);
	color: #fff;
	border-color: var(--ce-texto-suave);
}

/* ==========================================================================
   8b. Franja legal del pie
   La imprime functions.php en wp_footer, así aparece en todas las páginas sin
   depender de la configuración del pie de Kadence.
   ========================================================================== */

/* El crédito de Kadence se vacía desde functions.php; su contenedor se queda
   vacío y sin esto dejaría un hueco de relleno bajo el pie. */
.site-info .footer-html:empty,
.site-info .footer-html-inner:empty {
	display: none;
}

.ce-legal {
	border-top: 1px solid var(--ce-borde);
	background: var(--ce-fondo);
	padding: var(--ce-e3) clamp(20px, 5vw, 64px);
	font-size: 0.85rem;
	color: var(--ce-texto-suave);
}

.ce-legal__cuerpo {
	max-width: var(--ce-ancho);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-e2) var(--ce-e3);
	align-items: center;
	justify-content: space-between;
}

.ce-legal nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.ce-legal a {
	color: var(--ce-texto-suave);
	text-decoration: none;
	/* Área táctil suficiente sin engordar la franja. */
	padding: 6px 4px;
}

.ce-legal a:hover,
.ce-legal a:focus-visible {
	color: var(--ce-calor);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media print {
	.ce-legal {
		display: none;
	}
}

/* ==========================================================================
   9. Movimiento
   Solo CSS. La clase la añade un IntersectionObserver (assets/js/reveal.js).
   ========================================================================== */

.ce-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 420ms ease-out, transform 420ms ease-out;
}

.ce-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ce-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   10. Móvil
   ========================================================================== */

@media (max-width: 767px) {
	body {
		font-size: 1.0625rem;
	}

	.entry-content {
		padding-inline: 20px;
	}

	.entry-content h2 {
		margin-top: var(--ce-e5);
	}
}

/* Impresión: en este nicho la gente imprime comparativas y presupuestos.
   Se invierte a claro porque nadie quiere gastar un cartucho en fondo negro. */
@media print {
	:root {
		--ce-fondo: #fff;
		--ce-texto: #111;
		--ce-texto-suave: #555;
		--ce-calor: #b45309;
	}

	.site-header,
	.site-footer,
	.entry-meta,
	.ce-solo-pantalla {
		display: none !important;
	}

	body {
		background: #fff;
		color: #111;
		font-size: 11pt;
	}

	h1, h2, h3, .entry-content strong {
		color: #000;
	}

	.entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}