/* ==========================================================================
   Home — hub
   Se carga SOLO en la portada (ver functions.php). El resto del sitio no paga
   este CSS.

   Concepto «termografía»: retícula deliberadamente rota, datos enormes como
   elemento gráfico y el gradiente frío→calor como hilo conductor.
   ========================================================================== */

/* .ce-contenedor y --marco viven en style.css: los usa todo el sitio, no solo
   la portada. Aquí solo se consumen. */

/* --------------------------------------------------------------------- hero */

.ce-hero {
	position: relative;
	padding-block: clamp(var(--ce-e6), 9vw, var(--ce-e8)) var(--ce-e8);
	overflow: hidden;
}

/* Resplandor térmico de fondo. Puro CSS: ni imagen ni JS. */
.ce-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 70vw;
	height: 70vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(circle, rgb(249 115 22 / 13%) 0%, transparent 62%);
	pointer-events: none;
	z-index: 0;
}

.ce-hero > * {
	position: relative;
	z-index: 1;
}

.ce-hero__reticula {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(var(--ce-e4), 5vw, var(--ce-e7));
	align-items: center;
}

.ce-hero__etiqueta {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-e1);
	font-family: var(--ce-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ce-calor);
	margin-bottom: var(--ce-e3);
}

.ce-hero__etiqueta::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--ce-termico);
}

.ce-hero h1 {
	/* El titular es el elemento gráfico principal: grande y muy apretado. */
	font-size: clamp(2.8rem, 1.5rem + 6.2vw, 5.6rem);
	line-height: 0.94;
	letter-spacing: -0.04em;
	margin: 0 0 var(--ce-e3);
	text-wrap: balance;
}

.ce-hero h1 em {
	font-style: italic;
	/* El degradado solo en la palabra que carga el concepto. */
	background: var(--ce-termico);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ce-hero__entrada {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	color: var(--ce-texto-suave);
	max-width: 46ch;
	margin: 0 0 var(--ce-e4);
}

.ce-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-e2);
	align-items: center;
}

/* Imagen que sangra por el borde derecho: rompe el marco a propósito. */
.ce-hero__imagen {
	position: relative;
	margin-right: calc(var(--marco) * -1);
	border-radius: var(--ce-radio) 0 0 var(--ce-radio);
	overflow: hidden;
	aspect-ratio: 4 / 3;   /* reserva el espacio: sin salto de layout */
	background: var(--ce-superficie);
}

.ce-hero__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cifras del hero */
.ce-cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ce-e3);
	margin-top: clamp(var(--ce-e5), 6vw, var(--ce-e7));
	padding-top: var(--ce-e4);
	border-top: 1px solid var(--ce-borde);
}

.ce-cifra__valor {
	font-family: var(--ce-serif);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	display: block;
}

.ce-cifra__etiqueta {
	font-family: var(--ce-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
	margin-top: var(--ce-e1);
	display: block;
}

/* -------------------------------------------------------------- calculadora */

.ce-calculadora-zona {
	margin-top: calc(var(--ce-e6) * -1);   /* solapa el hero */
	position: relative;
	z-index: 2;
}

/* Los estilos compartidos de la calculadora están en
   assets/css/calculadora.css, porque los reutiliza el shortcode
   [ce_calculadora] en los artículos. */

/* Continuación hacia /calculadora/, justo debajo del formulario.
   Formato de invitación y no de nota al pie: es el enlace interno con más
   recorrido del sitio y quien acaba de ver salir los kW es justo quien quiere
   seguir. Por eso el enlace es grande, en serif, y no un «leer más» gris. */
.ce-calc-mas {
	margin: var(--ce-e3) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45em;
	line-height: 1.5;
}

.ce-calc-mas > span {
	color: var(--ce-texto-suave);
	font-size: 0.95rem;
}

.ce-calc-mas__enlace {
	font-family: var(--ce-serif);
	font-size: 1.15rem;
	color: var(--ce-texto);
	text-decoration: none;
	border-bottom: 1px solid var(--ce-borde-fuerte);
	padding-bottom: 2px;
	transition: var(--ce-transicion);
}

.ce-calc-mas__enlace::after {
	content: " →";
	color: var(--ce-calor);
}

.ce-calc-mas__enlace:hover,
.ce-calc-mas__enlace:focus-visible {
	color: var(--ce-calor-claro);
	border-bottom-color: var(--ce-calor);
}

/* ------------------------------------------------------------------ pilar */

.ce-seccion {
	padding-block: clamp(var(--ce-e6), 8vw, var(--ce-e8));
}

.ce-seccion__titulo {
	font-family: var(--ce-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
	display: flex;
	align-items: center;
	gap: var(--ce-e2);
	margin-bottom: var(--ce-e4);
}

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

.ce-pilar {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(var(--ce-e4), 4vw, var(--ce-e6));
	align-items: center;
}

.ce-pilar__imagen {
	aspect-ratio: 4 / 5;
	border-radius: var(--ce-radio);
	overflow: hidden;
	background: var(--ce-superficie);
}

.ce-pilar__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ce-pilar h2 {
	font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.02;
	margin: var(--ce-e2) 0 var(--ce-e3);
}

.ce-pilar h2 a {
	color: #fff;
	text-decoration: none;
}

.ce-pilar h2 a:hover {
	color: var(--ce-calor);
}

.ce-pilar p {
	color: var(--ce-texto-suave);
	max-width: 50ch;
}

/* ------------------------------------------------- bloques por intención */

.ce-intenciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(var(--ce-e3), 3vw, var(--ce-e5));
	align-items: start;
}

/* Aquí había un desalineado vertical deliberado (la tarjeta par caía más abajo)
   como recurso editorial. Se retira: se leía como un fallo de maquetación, no
   como una decisión. Para recuperarlo basta con devolver el margen superior a
   `.ce-intenciones > :nth-child(even)`. */

.ce-intencion {
	background: var(--ce-superficie);
	border: 1px solid var(--ce-borde);
	border-radius: var(--ce-radio);
	padding: clamp(var(--ce-e3), 3vw, var(--ce-e5));
	transition: border-color var(--ce-transicion), transform var(--ce-transicion);
}

.ce-intencion:hover {
	border-color: var(--ce-borde-fuerte);
	transform: translateY(-4px);
}

/* Imagen de cabecera del bloque. Sangra hasta los bordes de la tarjeta. */
.ce-intencion__imagen {
	margin: calc(clamp(var(--ce-e3), 3vw, var(--ce-e5)) * -1);
	margin-bottom: var(--ce-e3);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ce-superficie-alta);
}

.ce-intencion__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Bajar la saturación integra fotos dispares en la paleta del sitio;
	   al pasar el ratón recuperan color. */
	filter: saturate(0.75) contrast(1.05);
	transition: filter var(--ce-transicion), transform 400ms var(--ce-transicion);
}

.ce-intencion:hover .ce-intencion__imagen img {
	filter: saturate(1) contrast(1.05);
	transform: scale(1.03);
}

.ce-intencion__dato {
	font-family: var(--ce-serif);
	font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--ce-termico);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: block;
	margin-block: var(--ce-e2) var(--ce-e3);
}

.ce-intencion h3 {
	font-size: 1.35rem;
	margin: 0 0 var(--ce-e2);
}

.ce-intencion p {
	color: var(--ce-texto-suave);
	margin: 0 0 var(--ce-e3);
}

.ce-enlaces {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ce-borde);
}

.ce-enlaces li {
	border-bottom: 1px solid var(--ce-borde);
}

.ce-enlaces a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ce-e2);
	padding: 13px 0;
	color: var(--ce-texto);
	text-decoration: none;
	font-size: 0.98rem;
	min-height: 44px;
	transition: color var(--ce-transicion), padding-left var(--ce-transicion);
}

.ce-enlaces a::after {
	content: "→";
	color: var(--ce-texto-suave);
	font-family: var(--ce-mono);
	transition: transform var(--ce-transicion), color var(--ce-transicion);
}

.ce-enlaces a:hover {
	color: var(--ce-calor);
	padding-left: var(--ce-e1);
}

.ce-enlaces a:hover::after {
	color: var(--ce-calor);
	transform: translateX(4px);
}

/* ----------------------------------------------------- retícula de áreas */

/* Las áreas son SIEMPRE 7 (la taxonomía oficial), así que aquí no vale
   `auto-fit`: encajaba 6 en la primera fila y dejaba la séptima sola con un
   hueco enorme al lado. Con número fijo de elementos, las columnas se eligen a
   mano para que ninguna fila quede coja: 7 en una línea cuando cabe, 4+3 en
   tableta y una lista en móvil. Si algún día cambia el número de categorías,
   hay que revisar estos tres valores. */
.ce-areas {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--ce-borde);
	border: 1px solid var(--ce-borde);
}

@media (max-width: 1180px) {
	.ce-areas {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ce-area {
	background: var(--ce-fondo);
	padding: var(--ce-e3);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-e2);
	min-height: 168px;
	transition: background var(--ce-transicion);
}

.ce-area:hover {
	background: var(--ce-superficie);
}

.ce-area__numero {
	font-family: var(--ce-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--ce-texto-suave);
}

/* Cada área toma un punto del gradiente según su posición: la retícula
   completa recorre la escala térmica de frío a calor. */
.ce-area__barra {
	height: 3px;
	width: 100%;
	background: var(--ce-termico);
	background-size: 700% 100%;
}

.ce-area:nth-child(1) .ce-area__barra { background-position:   0% 0; }
.ce-area:nth-child(2) .ce-area__barra { background-position:  16% 0; }
.ce-area:nth-child(3) .ce-area__barra { background-position:  33% 0; }
.ce-area:nth-child(4) .ce-area__barra { background-position:  50% 0; }
.ce-area:nth-child(5) .ce-area__barra { background-position:  66% 0; }
.ce-area:nth-child(6) .ce-area__barra { background-position:  83% 0; }
.ce-area:nth-child(7) .ce-area__barra { background-position: 100% 0; }

.ce-area__nombre {
	font-family: var(--ce-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ce-texto);
	line-height: 1.2;
	margin-top: auto;
}

.ce-area:hover .ce-area__nombre {
	color: #fff;
}

.ce-area__cuenta {
	font-family: var(--ce-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
}

/* ------------------------------------------------------------ manifiesto */

.ce-manifiesto {
	padding-block: clamp(var(--ce-e6), 10vw, var(--ce-e8));
	border-block: 1px solid var(--ce-borde);
	position: relative;
	overflow: hidden;
}

/* Imagen de fondo del manifiesto, muy atenuada: el texto va encima y su
   contraste no puede depender de la foto. Con máscara para que se disuelva. */
.ce-manifiesto__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.22;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}

.ce-manifiesto__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ce-manifiesto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse at 20% 50%, rgb(45 212 191 / 8%) 0%, transparent 55%),
		linear-gradient(90deg, var(--ce-fondo) 12%, color-mix(in srgb, var(--ce-fondo) 55%, transparent) 65%);
	pointer-events: none;
}

.ce-manifiesto .ce-contenedor {
	position: relative;
	z-index: 2;
}

.ce-manifiesto blockquote {
	position: relative;
	font-family: var(--ce-serif);
	font-style: italic;
	font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 var(--ce-e4);
	max-width: 18ch;
	border: 0;
	padding: 0;
}

.ce-manifiesto p {
	position: relative;
	color: var(--ce-texto-suave);
	max-width: 54ch;
	margin: 0;
}

/* ------------------------------------------------------------------- CTA */

.ce-cta {
	margin-block: clamp(var(--ce-e6), 8vw, var(--ce-e8));
	border: 1px solid var(--ce-borde);
	border-radius: var(--ce-radio);
	overflow: hidden;
	background: var(--ce-superficie);
}

.ce-cta__cuerpo {
	padding: clamp(var(--ce-e4), 4vw, var(--ce-e6));
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-e4);
	align-items: center;
	justify-content: space-between;
}

.ce-cta h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
	margin: 0 0 var(--ce-e1);
	line-height: 1.1;
}

.ce-cta p {
	color: var(--ce-texto-suave);
	margin: 0;
	max-width: 44ch;
}

/* ------------------------------------------------------------------ pie */

.ce-pie {
	border-top: 1px solid var(--ce-borde);
	padding-block: var(--ce-e5);
	color: var(--ce-texto-suave);
	font-size: 0.9rem;
}

.ce-pie__filas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-e3);
	justify-content: space-between;
	align-items: center;
}

.ce-pie a {
	color: var(--ce-texto-suave);
	text-decoration: none;
}

.ce-pie a:hover {
	color: var(--ce-calor);
}

/* ---------------------------------------------------------------- móvil */

@media (max-width: 900px) {
	.ce-hero__reticula,
	.ce-pilar {
		grid-template-columns: 1fr;
	}

	/* En móvil, las 7 áreas en columna: cualquier reparto en 2 o 3 deja
	   una fila coja. */
	.ce-areas {
		grid-template-columns: 1fr;
	}

	.ce-hero__imagen {
		margin-right: 0;
		border-radius: var(--ce-radio);
		aspect-ratio: 16 / 10;
		order: -1;
	}

	.ce-calculadora-zona {
		margin-top: var(--ce-e5);
	}
}