/*
Theme Name: Ecaptor
Theme URI: https://ecaptor.com
Author: Ecaptor
Author URI: https://ecaptor.com
Description: Tema de bloques a medida para ecaptor.com. Sin webfonts, sin jQuery y sin dependencias externas: todo el CSS sale de theme.json y de los patrones. Prioriza Core Web Vitals y SEO técnico.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecaptor
Tags: full-site-editing, block-patterns, blog, business
*/

/*
 * El grueso de los estilos vive en theme.json. Aquí solo lo que theme.json no
 * puede expresar: estados, pseudo-elementos y detalles de accesibilidad.
 */

/* Foco visible y consistente: theme.json no define :focus-visible. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--acento);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Salto al contenido para lectores de pantalla y teclado. */
.ecaptor-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--wp--preset--color--tinta);
	color: #fff;
	text-decoration: none;
}

.ecaptor-skip-link:focus {
	left: 8px;
	top: 8px;
}

/* Botones: theme.json cubre el estado base, no el hover. */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--acento-oscuro);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--acento);
	border-color: var(--wp--preset--color--acento);
	color: #fff;
}

/* Enlaces del cuerpo: subrayado discreto que se refuerza al pasar por encima. */
.entry-content a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* Acordeón de FAQ nativo: sin JS, marcado <details>. */
.ecaptor-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ecaptor-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: var(--wp--preset--spacing--30) 0;
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.ecaptor-faq__item summary::-webkit-details-marker {
	display: none;
}

.ecaptor-faq__item summary::after {
	content: "+";
	font-size: 1.5em;
	line-height: 1;
	color: var(--wp--preset--color--acento);
	flex: none;
}

.ecaptor-faq__item[open] summary::after {
	content: "\2212";
}

.ecaptor-faq__respuesta {
	padding-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--texto-suave);
}

/* Tablas comparativas: deben poder desplazarse sin romper el ancho de página. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	min-width: 100%;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--wp--preset--color--borde);
	padding: 12px 16px;
	text-align: left;
}

.wp-block-table th {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--tinta);
	font-weight: 600;
}

/* Formulario de contacto (patrón ecaptor/formulario-contacto). */
.ecaptor-form label {
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--base);
}

.ecaptor-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	max-width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde-fuerte);
	border-radius: 8px;
}

.ecaptor-form :where(input, textarea):focus {
	border-color: var(--wp--preset--color--acento);
}

.ecaptor-form button {
	width: 100%;
	cursor: pointer;
	border: 0;
}

@media (min-width: 600px) {
	.ecaptor-form button {
		width: auto;
	}
}

/* Respetar la preferencia de movimiento reducido. */
@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;
	}
}

/* =========================================================================
   Gráfico del Plan Captación. Dos versiones, mismo lenguaje visual.
   Paleta validada con el script de comprobación: azul de marca #025cd9 (SEO)
   y cian #0891b2 (anuncios) pasan las seis comprobaciones sobre blanco —banda
   de luminosidad, croma, separación para daltonismo, umbral de visión normal
   y contraste—. Se descartaron los grises: un gris no es un color categórico
   válido, lo marca el validador.
   ====================================================================== */

.ec-graf {
	--ec-seo: #025cd9;
	--ec-ads: #0891b2;
	--ec-total: #0d1330;
	--ec-tinta: #0d1330;
	--ec-suave: #4a5578;
	--ec-tenue: #98a2c0;
	--ec-rejilla: #e3e8f0;
	--ec-superficie: #ffffff;

	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--ec-superficie);
	border: 1px solid var(--ec-rejilla);
	border-radius: 2rem;
}

.ec-graf__cab { margin-bottom: var(--wp--preset--spacing--20); }

.ec-graf__titulo {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--serifa);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ec-tinta);
}

.ec-graf__texto {
	margin: 0;
	max-width: 62ch;
	color: var(--ec-suave);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Leyenda: identidad nunca solo por color, siempre con etiqueta --- */
.ec-graf__leyenda {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.8125rem;
	color: var(--ec-suave);
}

.ec-graf__leyenda li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding-left: 0;
}

.ec-graf__leyenda li::before { content: none; }

.ec-clave { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.ec-clave--seo   { background: var(--ec-seo); }
.ec-clave--ads   { background: var(--ec-ads); }
.ec-clave--total { background: var(--ec-total); height: 3px; border-radius: 2px; }
.ec-clave--min   {
	height: 0;
	border-top: 2px dashed var(--ec-tenue);
	border-radius: 0;
	background: none;
}

/* --- Lienzo --- */
.ec-graf__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ec-rejilla line {
	stroke: var(--ec-rejilla);
	stroke-width: 1;
}

.ec-eje-y text,
.ec-eje-x text {
	fill: var(--ec-tenue);
	font-size: 12px;
	font-family: var(--wp--preset--font-family--mono);
}

.ec-eje-y text { text-anchor: end; }

.ec-eje-titulo {
	fill: var(--ec-tenue);
	font-size: 11px;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Rellenos translúcidos: el de abajo no debe teñir al de arriba. */
.ec-area--ads { fill: var(--ec-ads); fill-opacity: 0.22; }
.ec-area--seo { fill: var(--ec-seo); fill-opacity: 0.20; }

/* Separación de 2 px entre rellenos, del color de la superficie. */
.ec-sep {
	fill: none;
	stroke: var(--ec-superficie);
	stroke-width: 2;
}

.ec-total {
	fill: none;
	stroke: var(--ec-total);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ec-puntos circle,
.ec-punto {
	fill: var(--ec-total);
	stroke: var(--ec-superficie);
	stroke-width: 2;
	cursor: help;
	transition: r 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ec-puntos circle:hover { r: 7; }

.ec-min {
	stroke: var(--ec-tenue);
	stroke-width: 2;
	stroke-dasharray: 6 5;
}

.ec-min-txt {
	fill: var(--ec-suave);
	font-size: 11px;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.ec-etq {
	fill: var(--ec-tinta);
	font-size: 13px;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--mono);
}

.ec-fase text {
	fill: var(--ec-tenue);
	font-size: 11px;
	font-family: var(--wp--preset--font-family--mono);
}

.ec-corte {
	stroke: var(--ec-seo);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	opacity: 0.5;
}

.ec-corte-txt {
	fill: var(--ec-seo);
	font-size: 11px;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* --- Aparición: el trazo del total se dibuja, las áreas se funden. --- */
@media (prefers-reduced-motion: no-preference) {
	.ec-total {
		stroke-dasharray: 1400;
		stroke-dashoffset: 1400;
		animation: ec-trazo 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
	}

	.ec-area, .ec-puntos circle, .ec-punto {
		opacity: 0;
		animation: ec-aparece 0.7s ease-out 1.1s forwards;
	}
}

@keyframes ec-trazo  { to { stroke-dashoffset: 0; } }
@keyframes ec-aparece { to { opacity: 1; } }

/* La opacidad final de las áreas la fija su propia regla de relleno. */
@media (prefers-reduced-motion: no-preference) {
	.ec-area--ads { animation-name: ec-aparece-ads; }
	.ec-area--seo { animation-name: ec-aparece-seo; }
}

@keyframes ec-aparece-ads { to { opacity: 1; } }
@keyframes ec-aparece-seo { to { opacity: 1; } }

/* --- Tabla de datos: alternativa accesible al gráfico --- */
.ec-graf__tabla { margin-top: var(--wp--preset--spacing--20); }

.ec-graf__tabla summary {
	cursor: pointer;
	font-size: 0.8125rem;
	color: var(--ec-seo);
	font-weight: 600;
}

.ec-graf__tabla table {
	width: 100%;
	margin-top: 0.75rem;
	border-collapse: collapse;
	font-size: 0.8125rem;
}

.ec-graf__tabla :where(th, td) {
	border: 1px solid var(--ec-rejilla);
	padding: 6px 10px;
	text-align: right;
}

.ec-graf__tabla thead th {
	background: var(--ec-tinta);
	color: #fff;
	border-color: var(--ec-tinta);
}

.ec-graf__tabla tbody th { text-align: left; font-weight: 600; }

.ec-graf__nota {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	color: var(--ec-tenue);
	line-height: 1.5;
}

/* --- En móvil la versión compacta esconde las etiquetas de fase --- */
@media (max-width: 560px) {
	.ec-graf { padding: var(--wp--preset--spacing--20); border-radius: 1.25rem; }
	.ec-fase text, .ec-corte-txt { display: none; }
	.ec-min-txt { font-size: 13px; }
	.ec-eje-y text, .ec-eje-x text { font-size: 14px; }
}

/* --- Sobre banda marino el gráfico invierte superficie y tintas --- */
.has-marino-background-color .ec-graf {
	--ec-seo: #4a8bf5;
	--ec-ads: #d97706;
	--ec-total: #ffffff;
	--ec-tinta: #ffffff;
	--ec-suave: #c3cbe0;
	--ec-tenue: #8b96b8;
	--ec-rejilla: rgba(255, 255, 255, 0.14);
	--ec-superficie: #090d33;
	border-color: rgba(255, 255, 255, 0.14);
}
}

/* =========================================================================
   SISTEMA DE DISEÑO — formal, sobrio y premium.
   Estructura tomada de la referencia: banda oscura de apertura, etiqueta
   superior en versalitas, titular muy grande con tracking cerrado, subtítulo
   con separadores, prueba social a primera pantalla y alternancia de fondos.
   Se retira todo el tono creativo: sin cursivas manuscritas, sin cortes
   diagonales, sin degradados de color.
   ====================================================================== */

:root {
	--ec-r-card: 20px;
	--ec-r-panel: 28px;
	--ec-transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Etiqueta superior de sección --- */
.ec-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.has-marino-background-color .ec-eyebrow,
.ec-oscuro .ec-eyebrow {
	color: var(--wp--preset--color--acento-vivo);
}

/* --- Subtítulo con separadores verticales, como en la referencia --- */
.ec-pipes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--texto-tenue);
	list-style: none;
	padding: 0;
}

.ec-pipes li { padding-left: 0; display: flex; align-items: center; gap: 1.25rem; }
.ec-pipes li::before { content: none; }
.ec-pipes li + li::before {
	content: "";
	display: block;
	width: 1px;
	height: 1.1em;
	background: currentColor;
	opacity: 0.35;
}

/* --- Banda oscura de apertura --- */
.ec-oscuro {
	background: var(--wp--preset--color--marino);
	color: #fff;
}

.ec-oscuro :where(h1, h2, h3, h4) { color: #fff; }
.ec-oscuro p { color: var(--wp--preset--color--texto-tenue); }
.ec-oscuro strong { color: #fff; }

.ec-oscuro a:not(.wp-element-button) { color: var(--wp--preset--color--acento-vivo); }
.ec-oscuro a:not(.wp-element-button):hover { color: #fff; }

/* Retícula tenue: da profundidad sin recurrir a degradados. */
.ec-oscuro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ec-oscuro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000 30%, transparent 100%);
}

/* --- Tarjeta de prueba social del hero --- */
.ec-prueba {
	background: var(--wp--preset--color--marino-suave);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--ec-r-card);
	padding: var(--wp--preset--spacing--30);
	max-width: 340px;
}

.ec-prueba__nota {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #d7deef;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.ec-prueba__fuente {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
	margin: 0;
}

/* --- Fila de confianza --- */
.ec-confianza {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

.ec-confianza li { padding-left: 0; }
.ec-confianza li::before { content: none; }

/* --- Tarjetas --- */
.ec-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--ec-r-card);
	padding: var(--wp--preset--spacing--30);
	transition: border-color var(--ec-transicion), transform var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ec-card:hover {
	border-color: var(--wp--preset--color--borde-fuerte);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -24px rgba(8, 11, 31, 0.35);
}

.ec-card--destacada {
	border-color: var(--wp--preset--color--acento);
	box-shadow: 0 0 0 1px var(--wp--preset--color--acento);
}

/* --- Numeración grande de proceso --- */
.ec-numeros { list-style: none; padding: 0; margin: 0; counter-reset: ecn; }

.ec-numeros > li {
	counter-increment: ecn;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.ec-numeros > li::before {
	content: "0" counter(ecn);
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--wp--preset--color--borde-fuerte);
	position: static;
	width: auto;
	height: auto;
	border: 0;
	background: none;
	border-radius: 0;
	transform: none;
	transition: color var(--ec-transicion);
}

.ec-numeros > li:hover::before { color: var(--wp--preset--color--acento); }

.ec-oscuro .ec-numeros > li { border-top-color: rgba(255, 255, 255, 0.12); }
.ec-oscuro .ec-numeros > li::before { color: rgba(255, 255, 255, 0.28); }
.ec-oscuro .ec-numeros > li:hover::before { color: var(--wp--preset--color--acento-vivo); }

/* El ::before es un elemento más de la rejilla: sin colocación explícita, el
   párrafo cae en la columna del número y se estrangula. */
.ec-numeros > li::before { grid-column: 1; grid-row: 1 / span 2; }
.ec-numeros > li > * { grid-column: 2; }

.ec-numeros h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--titulo); }
.ec-numeros p { margin: 0; max-width: 60ch; }

@media (max-width: 640px) {
	.ec-numeros > li { grid-template-columns: 1fr; gap: 0.5rem; }
	.ec-numeros > li::before { font-size: 1.75rem; }
}

/* --- Cifras destacadas --- */
.ec-cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	padding: 0;
	margin: 0;
}

.ec-cifras li { padding-left: 0; }
.ec-cifras li::before { content: none; }

.ec-cifras strong {
	display: block;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--wp--preset--color--tinta);
	margin-bottom: 0.4rem;
}

.ec-oscuro .ec-cifras strong { color: #fff; }

.ec-cifras span {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--texto-suave);
}

.ec-oscuro .ec-cifras span { color: var(--wp--preset--color--texto-tenue); }

/* --- Cabecera --- */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
	transition: color var(--ec-transicion);
}

/* Separador tipo barra tras cada enlace, como en la referencia. */
.wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after {
	content: "/";
	margin-left: 0.75rem;
	color: var(--wp--preset--color--borde-fuerte);
	font-weight: 400;
}

/* --- Microinteracciones: contenidas --- */
.wp-block-button__link { transition: background-color var(--ec-transicion), transform var(--ec-transicion); }
.wp-block-button__link:hover { transform: translateY(-1px); }

.entry-content a:where(:not(.wp-element-button)) {
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: text-decoration-color var(--ec-transicion);
}

.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* Botón secundario sobre banda oscura. */
.ec-oscuro .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.ec-oscuro .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--marino);
}

/* --- Listas del cuerpo: marca de verificación azul --- */
.entry-content .wp-block-list:not(.is-style-none):not(.ec-pipes):not(.ec-cifras):not(.ec-numeros):not(.ec-confianza) {
	list-style: none;
	padding-left: 0;
}

.entry-content .wp-block-list:not(.is-style-none):not(.ec-pipes):not(.ec-cifras):not(.ec-numeros):not(.ec-confianza) > li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 0.55em;
}

.entry-content .wp-block-list:not(.is-style-none):not(.ec-pipes):not(.ec-cifras):not(.ec-numeros):not(.ec-confianza) > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.58em;
	width: 14px;
	height: 7px;
	border-left: 2px solid var(--wp--preset--color--acento);
	border-bottom: 2px solid var(--wp--preset--color--acento);
	transform: rotate(-45deg);
}

.ec-oscuro .wp-block-list > li::before { border-color: var(--wp--preset--color--acento-vivo); }

/* --- Tablas --- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; min-width: 100%; }

.wp-block-table :where(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--borde);
	border-left: 0;
	border-right: 0;
	border-top: 0;
	padding: 1rem 1.25rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	background: none;
	color: var(--wp--preset--color--tinta);
	border-bottom: 2px solid var(--wp--preset--color--tinta);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

.wp-block-table tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* --- Acordeón de FAQ, con más aire --- */
.ecaptor-faq__item summary { padding: 1.15rem 0; font-size: 1.0313rem; }

/* --- Móvil --- */
/* overflow-x: hidden convierte el elemento en contenedor de scroll y anula
   position: sticky en todos sus descendientes: era lo que hacía que el
   gráfico del Plan Captación se fuese de pantalla mientras se dibujaba.
   clip recorta igual pero sin crear contenedor de scroll. */
html, body { max-width: 100%; overflow-x: clip; }

@supports not (overflow-x: clip) {
	html, body { overflow-x: hidden; }
}

@media (max-width: 900px) {
	.wp-block-site-logo img { max-width: 132px; height: auto; }
	header .wp-block-button__link { padding: 0.7rem 1.1rem; font-size: 0.875rem; }
	.wp-block-navigation__container > .wp-block-navigation-item::after { content: none; }
}

@media (max-width: 520px) {
	header .wp-block-buttons { display: none; }
	.wp-block-site-logo img { max-width: 118px; }
	.ec-prueba { max-width: none; }
}

/* =========================================================================
   Tarjetas de plan. Tres decisiones que las separan de una tabla de precios
   corriente: separación real entre tarjetas, precio con salto tipográfico
   grande, y el Plan Captación en oscuro para que se lea como producto
   distinto y no como «el caro».
   ====================================================================== */

.ec-planes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--40);
}

.ec-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 22px;
	padding: 2.5rem 2rem 2rem;
	transition: transform var(--ec-transicion), box-shadow var(--ec-transicion), border-color var(--ec-transicion);
}

.ec-plan:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--borde-fuerte);
	box-shadow: 0 28px 60px -32px rgba(8, 11, 31, 0.45);
}

.ec-plan__cab { margin-bottom: 1.75rem; }

.ec-plan__nombre {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--tinta);
}

.ec-plan__sub {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-suave);
}

/* El salto de tamaño del precio es lo que da sensación de producto. */
.ec-plan__precio {
	margin: 0 0 1.75rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-plan__cifra {
	font-size: clamp(2.75rem, 4.5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--wp--preset--color--tinta);
}

.ec-plan__periodo {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--texto-suave);
}

.ec-plan__lista {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ec-plan__lista li {
	position: relative;
	padding-left: 28px;
	color: var(--wp--preset--color--tinta-suave);
}

.ec-plan__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 13px;
	height: 6px;
	border-left: 2px solid var(--wp--preset--color--acento);
	border-bottom: 2px solid var(--wp--preset--color--acento);
	transform: rotate(-45deg);
}

/* El botón queda anclado abajo para que las tres tarjetas cierren a la misma
   altura sin recurrir a alturas fijas. */
.ec-plan__cta {
	margin-top: auto;
	display: block;
	text-align: center;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tinta);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color var(--ec-transicion), transform var(--ec-transicion);
}

.ec-plan__cta:hover {
	background: var(--wp--preset--color--acento);
	color: #fff;
	transform: translateY(-1px);
}

.ec-plan__pie {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-tenue);
}

.ec-plan__pie a { color: var(--wp--preset--color--acento); }

/* --- Producto estrella --- */
.ec-plan--estrella {
	background: var(--wp--preset--color--marino);
	border-color: var(--wp--preset--color--marino);
	color: #fff;
	box-shadow: 0 32px 64px -36px rgba(2, 92, 217, 0.55);
}

.ec-plan--estrella:hover {
	border-color: var(--wp--preset--color--acento);
	box-shadow: 0 36px 72px -34px rgba(2, 92, 217, 0.7);
}

.ec-plan--estrella .ec-plan__nombre,
.ec-plan--estrella .ec-plan__cifra { color: #fff; }

.ec-plan--estrella .ec-plan__sub,
.ec-plan--estrella .ec-plan__periodo { color: #a9b4d4; }

.ec-plan--estrella .ec-plan__precio { border-bottom-color: rgba(255, 255, 255, 0.14); }

.ec-plan--estrella .ec-plan__lista li { color: #e2e7f4; }
.ec-plan--estrella .ec-plan__lista li::before { border-color: var(--wp--preset--color--acento-vivo); }

.ec-plan--estrella .ec-plan__cta {
	background: var(--wp--preset--color--acento);
}

.ec-plan--estrella .ec-plan__cta:hover { background: #fff; color: var(--wp--preset--color--marino); }

.ec-plan--estrella .ec-plan__pie { color: #8b96b8; }
.ec-plan--estrella .ec-plan__pie a { color: var(--wp--preset--color--acento-vivo); }

.ec-plan__distintivo {
	position: absolute;
	top: -0.75rem;
	left: 2rem;
	background: var(--wp--preset--color--acento);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
}

/* La garantía es el argumento del plan: va destacada, no en la lista. */
.ec-plan__garantia {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: 14px;
	background: rgba(2, 92, 217, 0.16);
	border: 1px solid rgba(59, 139, 255, 0.32);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #e2e7f4;
}

.ec-plan__garantia strong { color: #fff; display: block; }

/* --- Complementos --- */
.ec-complementos { margin-top: var(--wp--preset--spacing--40); }

.ec-complementos__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--20);
}

.ec-complemento {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 18px;
	padding: 1.75rem;
}

.ec-complemento h4 {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ec-complemento h4 span {
	color: var(--wp--preset--color--acento);
	font-weight: 700;
	white-space: nowrap;
}

.ec-complemento p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--texto-suave);
}

.ec-complementos__nota {
	margin-top: var(--wp--preset--spacing--20);
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
}

@media (max-width: 1000px) {
	.ec-planes { grid-template-columns: 1fr; gap: 2rem; }
	.ec-plan--estrella { order: -1; }
}

@media (max-width: 700px) {
	.ec-complementos__lista { grid-template-columns: 1fr; }
	.ec-plan { padding: 2rem 1.5rem 1.5rem; }
}

/* El periodo del precio no debe partirse en tres líneas. */
.ec-plan__periodo { white-space: nowrap; }

/* Con tres tarjetas a ancho amplio, el nombre del plan cabe en una línea. */
.ec-plan__nombre { text-wrap: balance; }
.ec-plan__sub { text-wrap: pretty; }

/* Secciones a ancho amplio con el texto acotado: los titulares arrancan en el
   mismo margen que las tarjetas, y las líneas no se hacen ilegibles de largas. */
.ec-seccion > :where(h2, h3, h4, p, ul, ol, figure.wp-block-table, details) {
	max-width: 72ch;
}

.ec-seccion > .ec-eyebrow { max-width: none; }
.ec-seccion > .wp-block-columns,
.ec-seccion > .wp-block-gallery,
.ec-seccion > .ec-cifras,
.ec-seccion > .ec-numeros { max-width: none; }

.ec-seccion > h2 { max-width: 20ch; }

/* =========================================================================
   Apariciones al entrar en pantalla. El estado inicial solo se aplica cuando
   el JS ha arrancado (clase en <html>), para que sin JavaScript el contenido
   se vea siempre.
   ====================================================================== */

.ec-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.ec-js [data-reveal].es-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ec-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Cabecera de cristal. Arriba del todo es transparente y se funde con lo que
   haya debajo —el hero marino o la apertura en blanco—; al bajar se convierte en
   un cristal esmerilado que deja pasar el contenido desenfocado. El tono lo marca
   la clase que functions.php pone en el <body> según cómo abra la página. */
/* El `sticky` va en el envoltorio que genera la plantilla, no en la cabecera:
   ese <header class="wp-block-template-part"> mide lo mismo que su contenido,
   así que un hijo pegajoso se despegaría a los 74 px. El bloque contenedor tiene
   que ser .wp-site-blocks, que abarca la página entera. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* Marino en todas las páginas. Arriba del todo es sólido, así que en las que
   abren con hero se funde con él; al bajar se convierte en cristal esmerilado
   y el contenido pasa por debajo desenfocado. */
.ec-cab {
	background: var(--wp--preset--color--marino);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ec-transicion), background-color var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ec-cab.es-compacta {
	background: rgba(8, 11, 31, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
	backdrop-filter: saturate(170%) blur(18px);
	-webkit-backdrop-filter: saturate(170%) blur(18px);
}

/*
 * Con el menú móvil abierto, la cabecera NO puede llevar backdrop-filter.
 * Un elemento con `backdrop-filter` se convierte en bloque contenedor de sus
 * descendientes `position: fixed`, así que el panel del menú —que es hijo de
 * la cabecera— dejaba de medirse contra la ventana y pasaba a medirse contra
 * la propia cabecera: 52 px de alto. Solo se veía la primera opción, y solo
 * al haber bajado, que es cuando entra `.es-compacta`. Arriba del todo no
 * había filtro y por eso ahí funcionaba.
 *
 * `has-modal-open` la pone el propio núcleo en <html> al abrir el menú.
 */
.has-modal-open .ec-cab.es-compacta {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* El logotipo solo existe en versión oscura; se blanquea por CSS en lugar de
   subir un segundo archivo, igual que ya se hace en el pie. */
.ec-cab .wp-block-site-logo img,
.ecaptor-logo-pie img { filter: brightness(0) invert(1); }

.ec-cab .wp-block-navigation .wp-block-navigation-item__content { color: #dfe5f3; }
.ec-cab .wp-block-navigation .wp-block-navigation-item__content:hover,
.ec-cab .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: #fff; }
.ec-cab .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after { color: rgba(255, 255, 255, 0.24); }
.ec-cab .wp-block-navigation__responsive-container-open { color: #fff; }

/* --- Menú de móvil --- */

/* El desplegable de móvil ocupa la pantalla entera y va en marino.
   
   El selector lleva el `:not(.has-background)` a propósito: core define
   `.wp-block-navigation:not(.has-background) …{background-color:#fff}`, que con
   el `:not()` suma especificidad (0,4,0) y ganaba a una regla más corta. El
   resultado era un panel blanco con los enlaces también en blanco, es decir,
   un menú que abría y no se veía. */
.ec-cab .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.ec-cab .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--marino);
	color: #fff;
}
.ec-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff; }
.ec-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after { content: none; }
.ec-cab .wp-block-navigation__responsive-container-close { color: #fff; }

/* Sin la barra blanca, el hero empieza justo debajo: el relleno superior sobra. */
.ec-hero { padding-top: clamp(2rem, 4.5vw, 4rem); }

/* =========================================================================
   PORTADA A MEDIDA. Maquetación propia, sin depender del sistema de bloques:
   es una página comercial, no una página de posicionamiento.
   ====================================================================== */

.ec-portada { --ec-wrap: 1280px; }

/* Valor por defecto en la raíz. Estaba declarado solo dentro de .ec-portada,
   así que en cualquier otro contexto `min()` recibía un valor inválido, la
   anchura entera se descartaba y el contenido se iba al borde de la pantalla.
   Los componentes que quieran otra medida la redefinen sobre sí mismos. */
:root { --ec-wrap: 1280px; }

.ec-wrap {
	width: min(var(--ec-wrap), 100% - 3rem);
	margin-inline: auto;
}

@media (max-width: 640px) { .ec-wrap { width: min(var(--ec-wrap), 100% - 2rem); } }

/* --- Apertura --- */
.ec-hero {
	position: relative;
	background: var(--wp--preset--color--marino);
	color: #fff;
	padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 4.5vw, 4rem);
	overflow: hidden;
	isolation: isolate;
}

.ec-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 76px 76px;
	mask-image: radial-gradient(ellipse 75% 65% at 25% 10%, #000 25%, transparent 95%);
}

.ec-hero__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.ec-hero__titular {
	margin: 0;
	font-size: clamp(2.6rem, 6.4vw, 5.25rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: #fff;
	text-wrap: balance;
}

.ec-hero__titular em {
	font-style: normal;
	color: var(--wp--preset--color--acento-vivo);
}

.ec-hero__entrada {
	margin: clamp(1.25rem, 2.4vw, 1.9rem) 0 0;
	max-width: 52ch;
	font-size: clamp(1.05rem, 1.4vw, 1.24rem);
	line-height: 1.65;
	color: #a9b4d4;
}

.ec-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.ec-hero .ec-pipes { margin-top: 2rem; color: #7f8bb0; font-size: 0.9375rem; }

.ec-hero__lateral { display: grid; gap: 1.25rem; }

.ec-testimonio {
	margin: 0;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 20px;
	padding: 1.75rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Las estrellas van en el verde de Trustpilot: identifican la fuente sin
   necesidad de meter el logotipo. */
.ec-testimonio__estrellas {
	color: #00b67a;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	line-height: 1;
	margin-bottom: 0.9rem;
}

/* La cita es lo único que crece: el resto de la tarjeta es atribución. */
.ec-testimonio blockquote {
	margin: 0 0 1.15rem;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #dde3f2;
}

.ec-testimonio blockquote::before { content: "«"; }
.ec-testimonio blockquote::after { content: "»"; }

.ec-testimonio figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.11);
}

/* El nombre llega de Trustpilot en mayúsculas y truncado. Se respeta tal cual
   —es la atribución— pero en cuerpo pequeño, para que no compita con la cita. */
.ec-testimonio__quien {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: #c3cbe4;
	overflow-wrap: anywhere;
}

.ec-testimonio__fuente {
	font-size: 0.75rem;
	color: #7f8bb0;
	line-height: 1.35;
	white-space: nowrap;
}

.ec-testimonio__fuente a { color: #9aa5c6; text-decoration: underline; text-underline-offset: 2px; }
.ec-testimonio__fuente a:hover,
.ec-testimonio__fuente a:focus-visible { color: #fff; }

.ec-hero__dato {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	padding: 1.25rem 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 20px;
}

.ec-hero__dato strong {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	color: var(--wp--preset--color--acento-vivo);
}

.ec-hero__dato strong span {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	color: #7f8bb0;
}

.ec-hero__dato span { font-size: 0.875rem; color: #a9b4d4; line-height: 1.4; }

.ec-hero__pie {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ec-hero__pie .ec-eyebrow { color: #6f7ba3; margin-bottom: 1rem; }

@media (max-width: 900px) {
	.ec-hero__rejilla { grid-template-columns: 1fr; }
	.ec-hero__lateral { grid-template-columns: 1fr; }
}

/* --- Secciones --- */
.ec-sec { padding: clamp(2.75rem, 4.5vw, 4.5rem) 0; }
.ec-sec--claro { background: var(--wp--preset--color--superficie); }

.ec-sec--oscuro {
	background: var(--wp--preset--color--marino);
	color: #fff;
}

.ec-sec--oscuro :where(h2, h3) { color: #fff; }
.ec-sec--oscuro p { color: #a9b4d4; }

.ec-sec__cab { max-width: 46rem; margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }

.ec-sec h2 {
	margin: 0;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.ec-sec__entrada {
	margin: 1.15rem 0 0;
	max-width: 58ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--texto-suave);
}

.ec-sec__cierre { margin-top: 2rem; font-weight: 500; }

/* --- Botones --- */
.ec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.9rem;
	border-radius: 999px;
	font-size: 0.9688rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--ec-transicion), color var(--ec-transicion),
	            border-color var(--ec-transicion), transform var(--ec-transicion);
}

.ec-btn--primario { background: var(--wp--preset--color--acento); color: #fff; }
.ec-btn--primario:hover { background: var(--wp--preset--color--acento-oscuro); color: #fff; transform: translateY(-1px); }

.ec-btn--fantasma { border-color: rgba(255, 255, 255, 0.26); color: #fff; }
.ec-btn--fantasma:hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--marino); transform: translateY(-1px); }

/* --- Tres cajas --- */
.ec-tresc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.ec-caja {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 20px;
	padding: 2rem;
	transition: border-color var(--ec-transicion), transform var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ec-caja:hover {
	border-color: var(--wp--preset--color--borde-fuerte);
	transform: translateY(-3px);
	box-shadow: 0 24px 50px -34px rgba(8, 11, 31, 0.4);
}

.ec-caja__num {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--acento);
	margin-bottom: 1.25rem;
}

.ec-caja h3 { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.ec-caja p { margin: 0; font-size: 0.9688rem; line-height: 1.65; color: var(--wp--preset--color--texto-suave); }

@media (max-width: 860px) { .ec-tresc { grid-template-columns: 1fr; } }

/* --- Bloque partido --- */
.ec-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

@media (max-width: 900px) { .ec-split { grid-template-columns: 1fr; } }

.ec-metricas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }

.ec-metricas li {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 1.25rem;
	align-items: baseline;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ec-metricas li:last-child { border-bottom: 0; padding-bottom: 0; }

.ec-metricas strong {
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--wp--preset--color--acento-vivo);
}

.ec-metricas span { font-size: 0.9688rem; line-height: 1.6; color: #a9b4d4; }

.ec-grafico-marco { margin-top: clamp(3rem, 5vw, 4.5rem); }
.ec-grafico-marco .ec-graf { margin: 0; }

/* --- Proceso --- */
.ec-pasos { list-style: none; margin: 0; padding: 0; counter-reset: ecp; }

.ec-pasos li {
	counter-increment: ecp;
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 2rem;
	padding: 2.25rem 0;
	border-top: 1px solid var(--wp--preset--color--borde);
	transition: border-color var(--ec-transicion);
}

.ec-pasos li::before {
	content: "0" counter(ecp);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--wp--preset--color--borde-fuerte);
	transition: color var(--ec-transicion);
}

.ec-pasos li:hover::before { color: var(--wp--preset--color--acento); }
.ec-pasos li:hover { border-top-color: var(--wp--preset--color--acento); }

.ec-pasos h3 { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.025em; }
.ec-pasos p { margin: 0; max-width: 58ch; color: var(--wp--preset--color--texto-suave); }

@media (max-width: 640px) {
	.ec-pasos li { grid-template-columns: 1fr; gap: 0.75rem; }
	.ec-pasos li::before { font-size: 1.75rem; }
}

/* --- Galería --- */
.ec-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.ec-galeria__item {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--base);
	transition: transform var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ec-galeria__item:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -30px rgba(8, 11, 31, 0.45); }
.ec-galeria__item img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) { .ec-galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ec-galeria { grid-template-columns: 1fr; } }

/* --- Sectores --- */
.ec-sectores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.ec-sectores li { border-bottom: 1px solid var(--wp--preset--color--borde); }

.ec-sectores a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.4rem 1.25rem 1.4rem 0;
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	transition: color var(--ec-transicion), padding var(--ec-transicion);
}

.ec-sectores a span { color: var(--wp--preset--color--borde-fuerte); transition: transform var(--ec-transicion), color var(--ec-transicion); }
.ec-sectores a:hover { color: var(--wp--preset--color--acento); padding-left: 0.75rem; }
.ec-sectores a:hover span { color: var(--wp--preset--color--acento); transform: translateX(4px); }

@media (min-width: 761px) { .ec-sectores li:nth-child(odd) a { padding-right: 2.5rem; } }
@media (max-width: 760px) { .ec-sectores { grid-template-columns: 1fr; } }

/* --- Lista de no encaje --- */
.ec-nolista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }

.ec-nolista li {
	position: relative;
	padding-left: 2.25rem;
	font-size: 1.0313rem;
	line-height: 1.65;
	color: var(--wp--preset--color--texto-suave);
}

.ec-nolista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 14px;
	height: 2px;
	background: var(--wp--preset--color--borde-fuerte);
}

/* El ::before cuenta como elemento de la rejilla: sin colocación explícita el
   párrafo cae en la columna del número. Mismo caso que en .ec-numeros. */
.ec-pasos li::before { grid-column: 1; grid-row: 1 / span 2; }
.ec-pasos li > * { grid-column: 2; }

@media (max-width: 640px) {
	.ec-pasos li::before,
	.ec-pasos li > * { grid-column: 1; grid-row: auto; }
}

/* =========================================================================
   Acceso directo a WhatsApp. Se imprime al final del documento, así que sin
   estos estilos el SVG se dibuja a tamaño natural dentro del pie.
   ====================================================================== */

.ecaptor-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--whatsapp);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px -10px rgba(8, 11, 31, 0.5);
	transition: transform var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ecaptor-whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -12px rgba(8, 11, 31, 0.55);
}

.ecaptor-whatsapp svg {
	width: 28px;
	height: 28px;
	flex: none;
	fill: #fff;
}

@media (max-width: 520px) {
	.ecaptor-whatsapp { width: 48px; height: 48px; right: 14px; bottom: 14px; }
	.ecaptor-whatsapp svg { width: 25px; height: 25px; }
}

@media print { .ecaptor-whatsapp { display: none; } }

/* =========================================================================
   Plan Captación — gráfico guiado por scroll.
   La sección mide varias pantallas y el contenido queda fijado dentro. Por
   debajo de 900 px y con movimiento reducido se degrada a una sección normal
   con el gráfico completo y las tres fases visibles.
   ====================================================================== */

.ec-scroll {
	position: relative;
	background: var(--wp--preset--color--marino);
	color: #fff;
	height: 320vh;
}

.ec-scroll__pista {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.ec-scroll__pista::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 76px 76px;
	mask-image: radial-gradient(ellipse 70% 60% at 70% 50%, #000 20%, transparent 90%);
	pointer-events: none;
}

.ec-scroll__rejilla {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
	width: min(1280px, 100% - 3rem);
}

.ec-scroll__titular {
	margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
	font-size: clamp(1.8rem, 3.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
}

/* --- Fases --- */
.ec-fases { position: relative; min-height: 15.5rem; }

.ec-fase {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.ec-fase.es-activa { opacity: 1; transform: none; pointer-events: auto; }

.ec-fase__rango {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento-vivo);
	margin-bottom: 0.9rem;
}

.ec-fase h3 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	color: #fff;
}

.ec-fase p { margin: 0; font-size: 1.0313rem; line-height: 1.65; color: #a9b4d4; max-width: 46ch; }

.ec-scroll__pie {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #6f7ba3;
	max-width: 46ch;
}

/* --- Lienzo --- */
.ec-scroll__lienzo {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	padding: clamp(1.25rem, 2.2vw, 2rem);
}

.ec-scroll__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	color: #a9b4d4;
}

.ec-scroll__leyenda span { display: inline-flex; align-items: center; gap: 0.45rem; }

.ec-k { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ec-k--total { background: #fff; height: 3px; border-radius: 2px; }
.ec-k--seo   { background: #3b8bff; }
.ec-k--ads   { background: #22b8cf; }
.ec-k--min   { height: 0; border-top: 2px dashed #6f7ba3; border-radius: 0; }

.ec-svg { display: block; width: 100%; height: auto; }

.ec-svg__rejilla line { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }

.ec-svg__ejey text,
.ec-svg__ejex text {
	fill: #6f7ba3;
	font-size: 12px;
	font-family: var(--wp--preset--font-family--mono);
}

.ec-svg__ejey text { text-anchor: end; }

.ec-svg__ads { fill: #22b8cf; fill-opacity: 0.28; }
.ec-svg__seo { fill: #3b8bff; fill-opacity: 0.3; }

.ec-svg__sep { fill: none; stroke: #080b1f; stroke-width: 2; stroke-opacity: 0.55; }

.ec-svg__total {
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ec-svg__min { stroke: #6f7ba3; stroke-width: 2; stroke-dasharray: 6 5; }

.ec-svg__mintxt,
.ec-svg__valor {
	font-family: var(--wp--preset--font-family--mono);
	fill: #a9b4d4;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ec-svg__valor { fill: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-transform: none; }

.ec-svg__punto {
	fill: #fff;
	stroke: var(--wp--preset--color--acento);
	stroke-width: 3;
	transition: cx 180ms linear, cy 180ms linear;
}

.ec-scroll__marcador {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: #a9b4d4;
}

.ec-scroll__marcador span:first-child {
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Degradación: sin scroll, sección normal --- */
.ec-scroll.es-estatica { height: auto; }

.ec-scroll.es-estatica .ec-scroll__pista {
	position: static;
	height: auto;
	padding: clamp(4rem, 8vw, 7rem) 0;
}

.ec-scroll.es-estatica .ec-fases { min-height: 0; display: grid; gap: 2.5rem; }
.ec-scroll.es-estatica .ec-fase { position: static; opacity: 1; transform: none; }
.ec-scroll.es-estatica .ec-svg__punto,
.ec-scroll.es-estatica .ec-svg__valor,
.ec-scroll.es-estatica .ec-scroll__marcador { display: none; }

@media (max-width: 900px) {
	.ec-scroll { height: auto; }
	.ec-scroll__pista { position: static; height: auto; padding: clamp(3.5rem, 8vw, 6rem) 0; }
	.ec-scroll__rejilla { grid-template-columns: 1fr; }
	.ec-fases { min-height: 0; display: grid; gap: 2.25rem; }
	.ec-fase { position: static; opacity: 1; transform: none; }
}

/* Sin JavaScript el recorte deja el gráfico casi vacío: se anula. */
html:not(.ec-js) #ecClip rect { width: 900px; }
html:not(.ec-js) .ec-scroll { height: auto; }
html:not(.ec-js) .ec-scroll__pista { position: static; height: auto; padding: 5rem 0; }
html:not(.ec-js) .ec-fases { min-height: 0; display: grid; gap: 2.25rem; }
html:not(.ec-js) .ec-fase { position: static; opacity: 1; transform: none; }

/* =========================================================================
   WordPress aplica el espaciado de bloques entre los hijos directos del
   documento, así que quedaba un hueco de 2 rem entre la cabecera y el hero,
   y otro antes del pie. Las secciones ya traen su propio espaciado interno.
   ====================================================================== */

.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* =========================================================================
   PÁGINA DEL PLAN CAPTACIÓN.
   La página vendía como artículo: 10 pantallas de texto en una columna, una
   sola banda de color y dos llamadas a la acción. Estos componentes existen
   para dar ritmo y jerarquía en dos niveles.
   ====================================================================== */

/* --- Franja de cifras bajo el hero --- */
.ec-franja {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--wp--preset--color--borde);
	border-block: 1px solid var(--wp--preset--color--borde);
}

.ec-franja > div {
	background: var(--wp--preset--color--base);
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);
}

.ec-franja strong {
	display: block;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--wp--preset--color--tinta);
	margin-bottom: 0.6rem;
}

.ec-franja span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-suave);
}

@media (max-width: 860px) { .ec-franja { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ec-franja { grid-template-columns: 1fr; } }

/* --- Gráfico grande --- */
.ec-gr {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	padding: clamp(1.25rem, 2.4vw, 2.25rem);
}

.ec-gr__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	color: #a9b4d4;
}

.ec-gr__leyenda span { display: inline-flex; align-items: center; gap: 0.5rem; }

.ec-gr__svg { display: block; width: 100%; height: auto; overflow: visible; }

.ec-gr__rejilla line { stroke: rgba(255, 255, 255, 0.09); }

.ec-gr__ejey text,
.ec-gr__ejex text {
	fill: #6f7ba3;
	font-size: 13px;
	font-family: var(--wp--preset--font-family--mono);
}

.ec-gr__ejey text { text-anchor: end; }

.ec-gr__ads { fill: #22b8cf; fill-opacity: 0.3; }
.ec-gr__seo { fill: #3b8bff; fill-opacity: 0.32; }
.ec-gr__sep { fill: none; stroke: #080b1f; stroke-width: 2; stroke-opacity: 0.5; }

.ec-gr__total {
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ec-gr__min { stroke: #6f7ba3; stroke-width: 2; stroke-dasharray: 7 6; }

.ec-gr__mintxt {
	fill: #a9b4d4;
	font-size: 12px;
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ec-gr__puntos circle { fill: #fff; stroke: var(--wp--preset--color--marino); stroke-width: 2.5; }
.ec-gr__ultimo { fill: var(--wp--preset--color--acento-vivo) !important; stroke: #fff !important; }

.ec-gr__valores text {
	fill: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-anchor: middle;
}

.ec-gr__final { fill: var(--wp--preset--color--acento-vivo) !important; font-size: 19px !important; }

.ec-gr__tramos line { stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }

.ec-gr__tramos text {
	fill: #8b96b8;
	font-size: 12px;
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.04em;
}

.ec-gr__nota {
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #6f7ba3;
	max-width: 78ch;
}

/* En pantallas pequeñas sobran etiquetas: se ocultan las de fase y los valores
   intermedios, en vez de comprimir el gráfico hasta hacerlo ilegible. */
@media (max-width: 760px) {
	.ec-gr__tramos, .ec-gr__ejex { display: none; }
	.ec-gr__valores text { font-size: 22px; }
	.ec-gr__valores text:nth-child(even) { display: none; }
	.ec-gr__ejey text { font-size: 20px; }
	.ec-gr__mintxt { font-size: 18px; }
	.ec-gr__leyenda { font-size: 0.8125rem; gap: 0.5rem 1rem; }
}

/* --- Bloque de la garantía --- */
.ec-garantia__cifra {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.ec-garantia__ocho {
	font-size: clamp(6rem, 13vw, 11rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.82;
	color: var(--wp--preset--color--acento);
	flex: none;
}

.ec-garantia__frase {
	margin: 0;
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--tinta);
	max-width: 22ch;
}

.ec-garantia__frase small {
	display: block;
	margin-top: 0.9rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto-suave);
	max-width: 46ch;
}

.ec-condiciones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	counter-reset: eccond;
}

.ec-condiciones li {
	counter-increment: eccond;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 16px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-suave);
	transition: border-color var(--ec-transicion), transform var(--ec-transicion);
}

.ec-condiciones li:hover { border-color: var(--wp--preset--color--acento); transform: translateY(-2px); }

.ec-condiciones li::before {
	content: "0" counter(eccond);
	display: block;
	margin-bottom: 0.85rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--acento);
	position: static;
	width: auto;
	height: auto;
	border: 0;
	background: none;
	transform: none;
}

@media (max-width: 1080px) { .ec-condiciones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ec-condiciones { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .ec-garantia__cifra { flex-direction: column; gap: 0.5rem; } }

/* Letra pequeña: accesible en un clic, sin frenar la lectura. */
.ec-letra {
	margin-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--borde);
	padding-top: 1.5rem;
}

.ec-letra > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--acento);
}

.ec-letra > summary::-webkit-details-marker { display: none; }

.ec-letra > summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 400;
}

.ec-letra[open] > summary::after { content: "\2212"; }

.ec-letra__cuerpo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin-top: 1.75rem;
}

.ec-letra__cuerpo h3 {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ec-letra__cuerpo p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--preset--color--texto-suave);
}

@media (max-width: 700px) { .ec-letra__cuerpo { grid-template-columns: 1fr; gap: 1.5rem; } }

/* --- Línea de tiempo de los 12 meses --- */
.ec-linea {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	counter-reset: eclin;
}

.ec-linea li {
	counter-increment: eclin;
	position: relative;
	padding: 2.5rem 1.5rem 0 0;
	border-top: 2px solid var(--wp--preset--color--borde);
}

.ec-linea li::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--borde-fuerte);
	transition: border-color var(--ec-transicion), background-color var(--ec-transicion);
}

.ec-linea li:hover::before { background: var(--wp--preset--color--acento); border-color: var(--wp--preset--color--acento); }
.ec-linea li:hover { border-top-color: var(--wp--preset--color--acento); }

.ec-linea__rango {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
	margin-bottom: 0.75rem;
}

.ec-linea h3 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.ec-linea p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--texto-suave); }

@media (max-width: 900px) { .ec-linea { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; } }
@media (max-width: 560px) { .ec-linea { grid-template-columns: 1fr; } }

/* --- Dos tarjetas enfrentadas --- */
.ec-frente { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

.ec-frente > div {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 20px;
	border: 1px solid var(--wp--preset--color--borde);
}

.ec-frente > div:last-child {
	background: var(--wp--preset--color--marino);
	border-color: var(--wp--preset--color--marino);
	color: #fff;
}

.ec-frente h3 { margin: 0 0 1.25rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; }
.ec-frente > div:last-child h3 { color: #fff; }

.ec-frente ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ec-frente li { font-size: 0.9375rem; line-height: 1.55; padding-left: 1.6rem; position: relative; color: var(--wp--preset--color--texto-suave); }
.ec-frente > div:last-child li { color: #c3cbe0; }

.ec-frente > div:first-child li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 2px;
	background: var(--wp--preset--color--borde-fuerte);
}

.ec-frente > div:last-child li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--wp--preset--color--acento-vivo);
	border-bottom: 2px solid var(--wp--preset--color--acento-vivo);
	transform: rotate(-45deg);
}

@media (max-width: 800px) { .ec-frente { grid-template-columns: 1fr; } }

/* --- Dos columnas de encaje --- */
.ec-encaje { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.ec-encaje h3 { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.ec-encaje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ec-encaje li { font-size: 1rem; line-height: 1.6; padding-left: 1.75rem; position: relative; color: var(--wp--preset--color--texto-suave); }

.ec-encaje__si li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 13px;
	height: 6px;
	border-left: 2px solid var(--wp--preset--color--acento);
	border-bottom: 2px solid var(--wp--preset--color--acento);
	transform: rotate(-45deg);
}

.ec-encaje__no li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.68em;
	width: 13px;
	height: 2px;
	background: var(--wp--preset--color--borde-fuerte);
}

@media (max-width: 700px) { .ec-encaje { grid-template-columns: 1fr; } }

/* Botón secundario sobre fondo claro: el fantasma por defecto asume banda oscura. */
.ec-btn--oscuro {
	border-color: var(--wp--preset--color--borde-fuerte);
	color: var(--wp--preset--color--tinta);
}

.ec-btn--oscuro:hover {
	background: var(--wp--preset--color--tinta);
	border-color: var(--wp--preset--color--tinta);
	color: #fff;
}

/* Subtítulo de sección, entre el H2 y el cuerpo. */
.ec-sub {
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 0.75rem;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -0.025em;
}

/* Acordeón de preguntas: contenedor con separadores. */
.ec-faqs { border-top: 1px solid var(--wp--preset--color--borde); }

/* --- Fases del gráfico, explicadas debajo en lugar de dentro --- */
.ec-gr__fases {
	list-style: none;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	counter-reset: ecgf;
}

.ec-gr__fases li { counter-increment: ecgf; padding-left: 0; }

.ec-gr__fases li::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-bottom: 1rem;
	border-radius: 2px;
	background: var(--wp--preset--color--acento-vivo);
	position: static;
	border: 0;
	transform: none;
}

.ec-gr__fases li:first-child::before  { background: #22b8cf; }
.ec-gr__fases li:nth-child(2)::before { background: #3b8bff; width: 44px; }
.ec-gr__fases li:last-child::before   { background: #fff; width: 60px; }

.ec-gr__rango {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8b96b8;
	margin-bottom: 0.6rem;
}

.ec-gr__fases h3 {
	margin: 0 0 0.55rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #fff;
}

.ec-gr__fases p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #a9b4d4;
}

@media (max-width: 860px) {
	.ec-gr__fases { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Cierre del primer año, integrado al final de la sección de encaje en lugar
   de ocupar una sección propia. */
.ec-cierre-ano {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--borde);
}

.ec-cierre-ano h3 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; }
.ec-cierre-ano p { margin: 0 0 1.5rem; font-size: 1.0313rem; line-height: 1.7; color: var(--wp--preset--color--texto-suave); }

@media (max-width: 800px) { .ec-cierre-ano { grid-template-columns: 1fr; } }

/* =========================================================================
   PÁGINA DE PRECIOS. Sin hero: quien llega aquí viene a ver las tarifas, así
   que la apertura es compacta y las tarjetas salen en la primera pantalla.
   ====================================================================== */

.ec-abre { padding: clamp(3rem, 6vw, 5rem) 0 0; }

.ec-abre__titular {
	margin: 0;
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--tinta);
	max-width: 18ch;
	text-wrap: balance;
}

.ec-abre__titular em { font-style: normal; color: var(--wp--preset--color--acento); }

.ec-abre__entrada {
	margin: 1.35rem 0 0;
	max-width: 56ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--texto-suave);
}

/* La sección de tarjetas va pegada a la apertura. */
.ec-sec--sin-tapa { padding-top: clamp(2rem, 3.5vw, 3rem); }

/* --- Comparativa entre planes --- */
.ec-comp { overflow-x: auto; }

.ec-comp table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background: var(--wp--preset--color--base);
	border-radius: 18px;
	overflow: hidden;
}

.ec-comp thead th {
	padding: 1.4rem 1.15rem;
	text-align: left;
	vertical-align: bottom;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--base);
	border-bottom: 2px solid var(--wp--preset--color--tinta);
	text-transform: none;
}

.ec-comp thead th span {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--texto-suave);
}

.ec-comp tbody th {
	text-align: left;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tinta-suave);
	padding: 0.95rem 1.15rem;
	border-bottom: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--base);
}

.ec-comp td {
	padding: 0.95rem 1.15rem;
	border-bottom: 1px solid var(--wp--preset--color--borde);
	font-size: 0.9063rem;
	color: var(--wp--preset--color--texto-suave);
	background: var(--wp--preset--color--base);
	white-space: nowrap;
}

.ec-comp tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* La columna del plan estrella se realza sin recurrir a otro color de fondo. */
.ec-comp__destacada {
	background: var(--wp--preset--color--acento-claro) !important;
	color: var(--wp--preset--color--tinta) !important;
	font-weight: 500;
}

.ec-comp thead th.ec-comp__destacada { border-bottom-color: var(--wp--preset--color--acento); }
.ec-comp thead th.ec-comp__destacada span { color: var(--wp--preset--color--acento); font-weight: 600; }

.ec-comp__si,
.ec-comp__no { display: inline-block; }

.ec-comp__si {
	width: 14px;
	height: 7px;
	border-left: 2px solid var(--wp--preset--color--acento);
	border-bottom: 2px solid var(--wp--preset--color--acento);
	transform: rotate(-45deg) translateY(-2px);
}

.ec-comp__no {
	width: 13px;
	height: 2px;
	background: var(--wp--preset--color--borde-fuerte);
	vertical-align: middle;
}

/* --- Lo que no se factura aparte --- */
.ec-costes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--borde); }

.ec-costes li {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: baseline;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-costes__que { font-size: 1rem; font-weight: 500; color: var(--wp--preset--color--tinta); }
.ec-costes__fuera { font-size: 0.9375rem; color: var(--wp--preset--color--texto-tenue); }

.ec-costes__aqui {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
	white-space: nowrap;
}

.ec-costes__cierre {
	margin-top: 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--texto-suave);
	max-width: 62ch;
}

@media (max-width: 620px) {
	.ec-costes li { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
	.ec-costes__fuera { grid-column: 1; }
	.ec-costes__aqui { grid-row: 1; grid-column: 2; }
}

/* --- Frente al mercado --- */
.ec-mercado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.ec-mercado article {
	padding: 1.75rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	transition: border-color var(--ec-transicion), transform var(--ec-transicion);
}

.ec-mercado article:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-3px); }

.ec-mercado__nuestro {
	background: var(--wp--preset--color--acento);
	border-color: var(--wp--preset--color--acento) !important;
}

.ec-mercado h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }

.ec-mercado__precio {
	margin: 0 0 0.85rem;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	color: #fff;
}

.ec-mercado__nota { margin: 0 0 1.25rem; font-size: 0.9063rem; line-height: 1.55; color: #a9b4d4; }
.ec-mercado__nuestro .ec-mercado__nota { color: rgba(255, 255, 255, 0.88); }

.ec-mercado__plazo {
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8b96b8;
}

.ec-mercado__nuestro .ec-mercado__plazo { color: #fff; border-top-color: rgba(255, 255, 255, 0.3); }

@media (max-width: 1000px) { .ec-mercado { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ec-mercado { grid-template-columns: 1fr; } }

/* Texto solo para lectores de pantalla. */
.ec-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Ocho conceptos a ancho completo ocupaban una pantalla entera para decir algo
   que se lee de un vistazo. En dos columnas cabe en la mitad. */
@media (min-width: 800px) {
	.ec-costes {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 3rem;
		border-top: 0;
	}

	.ec-costes li { grid-template-columns: minmax(0, 1fr) auto; }
	.ec-costes li:nth-child(-n+2) { border-top: 1px solid var(--wp--preset--color--borde); }
	.ec-costes__fuera { grid-column: 1; grid-row: 2; margin-top: 0.15rem; }
	.ec-costes__aqui { grid-column: 2; grid-row: 1; }
}

/* --- Hero de prueba con fondo de shader --- */

/* El lienzo se dibuja a media resolución y se estira por CSS: el shader es
   niebla difusa, así que no se aprecia el escalado. */
.ec-hero__shader {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 900ms ease;
}

/* La clase la pone hero-shader.js cuando WebGL ya está pintando. Sin ella el
   lienzo queda invisible y se ve el degradado de siempre. */
.ec-hero__shader.es-activo { opacity: 1; }

/* La retícula y el halo azul sobran cuando el shader ya aporta textura. */
.ec-hero--shader .ec-hero__fondo {
	background-image: url("assets/imagenes/hero-shader.webp");
	background-size: cover;
	background-position: center;
	mask-image: none;
}

.ec-hero--shader .ec-hero__fondo::after { content: none; }

/* Velo que oscurece el shader bajo la columna de texto: sin él, la niebla sube
   demasiado y el titular pierde contraste. */
.ec-hero--shader .ec-hero__fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(8, 11, 31, 0.94) 0%,
		rgba(8, 11, 31, 0.82) 34%,
		rgba(8, 11, 31, 0.42) 62%,
		rgba(8, 11, 31, 0.28) 100%
	);
}

/* Con movimiento reducido el lienzo desaparece y queda el fotograma estático,
   que es la misma imagen quieta. */
@media (prefers-reduced-motion: reduce) {
	.ec-hero__shader { display: none; }
}

/* En móvil la reseña empuja hacia abajo los botones y las cifras sin aportar
   nada por encima del pliegue: se queda el dato de los +100 negocios, que dice
   lo mismo en una línea. */
@media (max-width: 899px) {
	.ec-hero .ec-testimonio { display: none; }
}

/* --- Trabajos publicados --------------------------------------------------
   Antes eran seis capturas sueltas sin pie ni alt: no se sabía de quién era
   ninguna. Ahora cada una es una tarjeta con el dominio real y enlace a la web
   del cliente, que es la prueba que de verdad convence. */

.ec-casos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El contenedor estira al enlace. Con `height: 100%` en el hijo, el porcentaje
   se resuelve contra el contenido y no contra la pista de la rejilla, y la
   tarjeta se derrama sobre la fila siguiente. */
.ec-caso { display: flex; margin: 0; }

.ec-caso__enlace {
	display: flex;
	flex-direction: column;
	flex: 1;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--ec-transicion), box-shadow var(--ec-transicion), border-color var(--ec-transicion);
}

/* La guía de UX avisa de que el hover no existe en pantallas táctiles: el mismo
   tratamiento se aplica al foco de teclado, y el enlace es la tarjeta entera,
   así que el área de pulsación supera de sobra los 44 px. */
.ec-caso__enlace:hover,
.ec-caso__enlace:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--acento);
	box-shadow: 0 26px 54px -30px rgba(8, 11, 31, 0.45);
}

.ec-caso__enlace:focus-visible {
	outline: 2px solid var(--wp--preset--color--acento);
	outline-offset: 3px;
}

/* Relación de aspecto fija: las capturas van de 1200×575 a 1200×779 y sin esto
   la rejilla daba saltos al cargar. */
.ec-caso__marco {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--superficie);
}

.ec-caso__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 600ms ease;
}

.ec-caso__enlace:hover .ec-caso__img { transform: scale(1.04); }

.ec-caso__pie {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.95rem 1.1rem;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.ec-caso__dominio {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tinta);
	overflow-wrap: anywhere;
}

.ec-caso__sector {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--acento-claro);
	color: var(--wp--preset--color--acento-oscuro);
	white-space: nowrap;
}

.ec-caso__ver {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-suave);
	white-space: nowrap;
	transition: color var(--ec-transicion);
}

.ec-caso__enlace:hover .ec-caso__ver { color: var(--wp--preset--color--acento); }

.ec-caso__nota {
	display: block;
	padding: 0 1.1rem 1.05rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--texto-suave);
}

@media (max-width: 860px) { .ec-casos { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 520px) { .ec-casos { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.ec-caso__enlace, .ec-caso__img { transition: none; }
	.ec-caso__enlace:hover { transform: none; }
	.ec-caso__enlace:hover .ec-caso__img { transform: none; }
}

/* =========================================================================
   PIE DE PÁGINA. Composición adaptada de un componente React/Tailwind: panel
   de cristal sobre resplandores, cuatro columnas y barra legal. Los rosas del
   original van al azul de marca, y los iconos son SVG en línea en lugar de una
   librería entera.
   ====================================================================== */

.ec-pie {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--marino);
	color: #c3cbe4;
	padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 3vw, 2.75rem);
}


/* --- Panel de cristal --- */

.ec-pie__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding: clamp(1.75rem, 3.5vw, 3rem);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ec-pie__panel-texto { flex: 1 1 26rem; }

.ec-pie__panel h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ec-pie__panel p {
	margin: 0.85rem 0 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.6;
	color: #aab4d2;
}

.ec-pie__panel-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* --- Rejilla de columnas --- */

.ec-pie__rejilla {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
	gap: clamp(1.75rem, 3vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.ec-pie__marca .wp-block-site-logo img,
.ec-pie__marca .custom-logo { max-width: 140px; height: auto; }

.ec-pie__lema {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #9aa5c6;
	max-width: 34ch;
}

.ec-pie__canales,
.ec-pie__col ul,
.ec-pie__contacto {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-pie__canales { margin-top: 1.5rem; display: grid; gap: 0.65rem; }

.ec-pie__col .ec-eyebrow { color: var(--wp--preset--color--acento-vivo); margin-bottom: 1.15rem; }

.ec-pie__col ul { display: grid; gap: 0.6rem; }

.ec-pie a {
	color: #c3cbe4;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--ec-transicion);
}

.ec-pie a:hover,
.ec-pie a:focus-visible { color: #fff; }

.ec-pie a:focus-visible {
	outline: 2px solid var(--wp--preset--color--acento-vivo);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- Filas con icono --- */

.ec-pie__canales a,
.ec-pie__contacto a,
.ec-pie__dato {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: #c3cbe4;
}

.ec-pie__contacto { display: grid; gap: 0.85rem; }

.ec-pie__icono {
	flex: 0 0 auto;
	color: var(--wp--preset--color--acento-vivo);
	transition: color var(--ec-transicion);
}

.ec-pie__canales a:hover .ec-pie__icono,
.ec-pie__contacto a:hover .ec-pie__icono { color: #fff; }

.ec-pie__dato address { font-style: normal; margin: 0; }

/* --- Punto pulsante --- */

.ec-pie__vivo {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 1.4rem 0 0;
	font-size: 0.875rem;
	color: #9aa5c6;
}

.ec-pie__punto { position: relative; display: inline-flex; width: 8px; height: 8px; }

.ec-pie__punto i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--acento-vivo);
}

.ec-pie__punto i:first-child {
	opacity: 0.75;
	animation: ec-latido 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ec-latido {
	75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* --- Barra legal --- */

.ec-pie__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ec-pie__barra p { margin: 0; font-size: 0.8125rem; color: #8b96b8; }
.ec-pie__barra a { font-size: 0.8125rem; }

/* --- Adaptación --- */

@media (max-width: 1080px) {
	.ec-pie__rejilla { grid-template-columns: 1fr 1fr; }
	.ec-pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.ec-pie__rejilla { grid-template-columns: 1fr; }
	.ec-pie__panel-acciones .ec-btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ec-pie__punto i:first-child { animation: none; }
}

/* `--ec-wrap` estaba declarada solo en .ec-portada, así que en el pie la
   anchura de .ec-wrap era inválida y el contenido se iba al borde. */
.ec-pie { --ec-wrap: 1280px; }

/* El logotipo solo existe en versión oscura. Antes lo blanqueaba la clase
   .ecaptor-logo-pie del marcado de bloques, que ya no se usa. */
.ec-pie__marca img { filter: brightness(0) invert(1); }

/* =========================================================================
   PÁGINAS LEGALES. Un aviso legal se lee para buscar un dato concreto, no de
   principio a fin: prima la medida corta, la jerarquía clara y los anclajes.
   ====================================================================== */

.ec-legal__abre {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-legal__abre .wp-block-post-title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.ec-legal__abre .wp-block-post-excerpt {
	margin-top: 1rem;
	color: var(--wp--preset--color--texto-suave);
}

.ec-legal__cuerpo { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }

/* Medida de unos 70 caracteres a tamaño de cuerpo. En `rem` y no en `ch`,
   porque `ch` se calcula sobre la letra del propio elemento: 68ch en un h2 de
   2 rem son casi 1.500 px, y el titular se salía de la columna. */
.ec-legal__cuerpo .wp-block-post-content > * {
	max-width: 46rem;
	margin-inline: auto;
}

.ec-legal__cuerpo h2 {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--borde);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: -0.015em;
}

.ec-legal__cuerpo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ec-legal__cuerpo h3 {
	margin-top: 2.25rem;
	font-size: 1.125rem;
	color: var(--wp--preset--color--tinta);
}

.ec-legal__cuerpo p,
.ec-legal__cuerpo li { line-height: 1.7; }

/* Ficha de datos del titular: pares dato/valor, no párrafos corridos. */
.ec-legal__ficha {
	max-width: 46rem;
	margin: 1.5rem 0 0;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
	background: var(--wp--preset--color--superficie);
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.7rem 1.5rem;
	font-size: 0.9375rem;
}

.ec-legal__ficha dt { color: var(--wp--preset--color--texto-suave); }
.ec-legal__ficha dd { margin: 0; font-weight: 500; }

@media (max-width: 560px) {
	.ec-legal__ficha { grid-template-columns: 1fr; gap: 0.15rem 0; }
	.ec-legal__ficha dd { margin-bottom: 0.85rem; }
}

/* Índice de secciones, para no hacer scroll a ciegas. */
.ec-legal__indice {
	max-width: 46rem;
	margin: 0 0 3rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--acento);
	background: var(--wp--preset--color--superficie);
	border-radius: 0 10px 10px 0;
}

.ec-legal__indice p { margin: 0 0 0.75rem; font-weight: 600; font-size: 0.9375rem; }
.ec-legal__indice ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9375rem; }

.ec-legal__fecha {
	max-width: 46rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--borde);
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
}

/* --- Banner de cookies ---------------------------------------------------
   Fijo abajo y sin empujar nada: aparece después del primer pintado y no puede
   provocar desplazamiento de diseño. */

.ec-cookies {
	position: fixed;
	z-index: 90;
	inset: auto 0 0 0;
	padding: 0.75rem;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 300ms ease, transform 300ms ease;
}

.ec-cookies.es-visible { opacity: 1; transform: none; }

/* Una sola fila en escritorio: el aviso ocupa lo mínimo para no tapar la web
   que el visitante ha venido a ver. */
.ec-cookies__caja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	max-width: 58rem;
	margin-inline: auto;
	padding: 0.9rem 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 14px;
	background: rgba(8, 11, 31, 0.97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
	color: #c3cbe4;
}

.ec-cookies__texto { flex: 1 1 20rem; }
.ec-cookies p { margin: 0; font-size: 0.875rem; line-height: 1.5; }
.ec-cookies a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.ec-cookies__botones {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ec-cookies__botones .ec-btn {
	padding: 0.6rem 1.1rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

/* Rechazar tiene que costar lo mismo que aceptar: mismo tamaño, mismo peso y
   mismo tipo de botón. Solo cambia el color de fondo. */
.ec-btn--par { background: #232e59; }
.ec-btn--par:hover { background: #2d3a6b; }

/* «Configurar» no es una decisión de consentimiento, así que puede ser más
   discreto, pero sobre fondo oscuro: el estilo fantasma del tema es para claro. */
.ec-cookies__mas {
	background: transparent;
	color: #c3cbe4;
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.ec-cookies__mas:hover,
.ec-cookies__mas:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.45); }

.ec-cookies__panel {
	flex: 1 1 100%;
	margin-top: 0.35rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ec-cookies__panel ul { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 1rem; }

.ec-cookies__panel li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
}

.ec-cookies__panel strong { display: block; color: #fff; font-size: 0.9375rem; }
.ec-cookies__panel span { font-size: 0.8125rem; line-height: 1.5; color: #9aa5c6; }
.ec-cookies__fija { flex: 0 0 auto; font-size: 0.75rem; color: #7f8bb0; white-space: nowrap; }

.ec-cookies__interruptor { flex: 0 0 auto; position: relative; width: 44px; height: 26px; cursor: pointer; }

/* La casilla real sigue ahí, solo que invisible: el teclado y los lectores de
   pantalla la usan igual. */
.ec-cookies__interruptor input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.ec-cookies__interruptor > span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #2a3358;
	transition: background var(--ec-transicion);
	pointer-events: none;
}

.ec-cookies__interruptor > span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--ec-transicion);
}

.ec-cookies__interruptor input:checked + span { background: var(--wp--preset--color--acento); }
.ec-cookies__interruptor input:checked + span::after { transform: translateX(18px); }
.ec-cookies__interruptor input:focus-visible + span { outline: 2px solid var(--wp--preset--color--acento-vivo); outline-offset: 3px; }

@media (max-width: 600px) {
	.ec-cookies__botones { width: 100%; }
	.ec-cookies__botones .ec-btn { flex: 1 1 8rem; justify-content: center; }
	.ec-cookies__panel li { flex-wrap: wrap; }
}

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

.ec-pie__legales { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }

/* --- Tablas de la política de cookies --- */

.ec-tabla-cookies {
	max-width: 46rem;
	margin: 1.5rem auto 0;
	overflow-x: auto; /* en móvil la tabla desliza; la página no */
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
}

.ec-tabla-cookies table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.875rem; }

.ec-tabla-cookies th,
.ec-tabla-cookies td {
	padding: 0.8rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--borde);
	line-height: 1.5;
}

.ec-tabla-cookies thead th {
	background: var(--wp--preset--color--superficie);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave);
	white-space: nowrap;
}

.ec-tabla-cookies tbody th { font-weight: 600; white-space: nowrap; }
.ec-tabla-cookies tr:last-child th,
.ec-tabla-cookies tr:last-child td { border-bottom: 0; }

/* =========================================================================
   PORTADA: dos superficies y un capítulo oscuro (30-jul-2026)

   Antes alternaban blanco y #eef1f9. La diferencia entre ambos es de un 4 % de
   luminosidad: no se percibía, así que no separaba nada y sobraba una
   superficie. El gris pasa a ser fondo de tarjeta, no de banda.

   Al quitar el cambio de fondo hay que reponer la separación por otra vía, o
   nueve secciones seguidas de blanco se leen como un muro: filete sobre la
   cabecera, más aire entre secciones y menos dentro.
   ====================================================================== */

/* El filete ya separa, así que el aire puede ser menor que si tuviera que
   hacer el trabajo él solo. */
.ec-portada .ec-sec { padding: clamp(2.75rem, 4.8vw, 4.75rem) 0; }

/* Filete a ancho de contenedor sobre la cabecera de cada sección. Es lo que
   ahora marca dónde empieza cada bloque, en lugar del cambio de fondo. Va en
   el .ec-wrap y no en la cabecera, que está limitada a 46 rem para que el
   titular no se estire. */
.ec-portada .ec-sec > .ec-wrap { position: relative; padding-top: 2.5rem; }

.ec-portada .ec-sec > .ec-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--wp--preset--color--borde);
}

/* El gris recuperado como fondo de tarjeta: el ritmo lo marcan los bloques de
   contenido, no el fondo de página. */
.ec-portada .ec-caja { background: var(--wp--preset--color--superficie); }
.ec-portada .ec-caja:hover { background: var(--wp--preset--color--base); }

/* --- El capítulo oscuro --------------------------------------------------
   De 320vh a 190vh: eran 2.880 px, el 29 % de la página. Y entra y sale con
   un degradado en lugar de un corte, para que se lea como un capítulo y no
   como un bloque pegado. */

.ec-scroll { height: 190vh; }

/* Corte limpio: ni degradado ni esquinas. El degradado blanco sobre el marino
   se veía sucio —a media opacidad no es ni una cosa ni la otra— y el redondeo a
   sangre solo asomaba en dos esquinas diminutas. El borde duro es lo que hace
   la mayoría de webs editoriales y es lo que no puede quedar mal. */
.ec-scroll { overflow: clip; } /* recorta el aura sin anular el `sticky` */

/* =========================================================================
   HUB DE SECTORES. Página de navegación, no de lectura larga: en oscuro, con
   los ocho sectores en rejilla para que se elija en un vistazo. Las ocho
   fichas a las que enlaza siguen en claro, que es lo que conviene a mil y pico
   palabras de texto por página.
   ====================================================================== */

.ec-hub {
	--ec-wrap: 1280px;
	background: var(--wp--preset--color--marino);
	color: #c3cbe4;
}

.ec-hub__abre {
	position: relative;
	padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
	overflow: hidden;
}


.ec-hub__abre h1 {
	margin: 0;
	font-size: clamp(2.4rem, 5.4vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #fff;
}

.ec-hub__abre h1 em { font-style: normal; color: var(--wp--preset--color--acento-vivo); }

.ec-hub__entrada {
	max-width: 52ch;
	margin: 1.5rem 0 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	color: #a9b4d4;
}

.ec-hub .ec-pipes { margin-top: 1.75rem; color: #7f8bb0; font-size: 0.9375rem; }

.ec-hub__sec { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }

/* Realce en marino-suave: distingue tramos sin salir del oscuro. */
.ec-hub__sec--realce { background: var(--wp--preset--color--marino-suave); }

.ec-hub__cab { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.ec-hub__cab h2 {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}

.ec-hub__cab p { margin: 0.9rem 0 0; color: #a9b4d4; line-height: 1.6; }

.ec-hub__nota { margin: 1.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: #7f8bb0; }
.ec-hub__nota a,
.ec-hub__entrada a { color: var(--wp--preset--color--acento-vivo); }

/* --- Rejilla de los ocho sectores --- */

.ec-sect {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-sect > li { display: flex; margin: 0; }

.ec-sect a {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.035);
	text-decoration: none;
	color: inherit;
	transition: background var(--ec-transicion), border-color var(--ec-transicion), transform var(--ec-transicion);
}

/* El hover no existe en pantalla táctil: el mismo tratamiento va al foco, y el
   enlace es la tarjeta entera, muy por encima de los 44 px de área mínima. */
.ec-sect a:hover,
.ec-sect a:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--wp--preset--color--acento);
	transform: translateY(-3px);
}

.ec-sect a:focus-visible { outline: 2px solid var(--wp--preset--color--acento-vivo); outline-offset: 3px; }

.ec-sect h3 {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
	line-height: 1.25;
	color: #fff;
}

.ec-sect__rasgo { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.5; color: #98a1bd; }

.ec-sect__datos {
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	display: grid;
	gap: 0.4rem;
}

.ec-sect__datos > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.ec-sect__datos dt { font-size: 0.75rem; color: #7f8bb0; }
.ec-sect__datos dd { margin: 0; font-size: 0.8125rem; font-weight: 600; color: #dfe5f3; }

.ec-sect__ir {
	margin-top: 1.1rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--acento-vivo);
}

.ec-sect__ir span { transition: transform var(--ec-transicion); display: inline-block; }
.ec-sect a:hover .ec-sect__ir span { transform: translateX(3px); }

@media (max-width: 1100px) { .ec-sect { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ec-sect { grid-template-columns: 1fr; } }

/* --- Las dos vías --- */

.ec-hub__vias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.ec-via {
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.035);
}

/* La recomendada se distingue por borde y halo, no por tamaño: dos tarjetas de
   alturas distintas se leen como un error de maquetación. */
.ec-via--principal {
	border-color: rgba(59, 139, 255, 0.5);
	background: linear-gradient(160deg, rgba(2, 92, 217, 0.16), rgba(255, 255, 255, 0.03));
}

.ec-via h3 { margin: 0.5rem 0 0; font-size: 1.5rem; color: #fff; }

.ec-via p.ec-via__precio {
	margin: 0.4rem 0 1.25rem;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff;
}

.ec-via p.ec-via__precio span { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: #7f8bb0; }

.ec-via p { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.6; color: #a9b4d4; }

.ec-via__garantia {
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

.ec-via__garantia strong { color: #fff; }
.ec-via p.ec-via__quien { color: #7f8bb0; font-size: 0.875rem; }
.ec-via .ec-btn { margin-top: 0.5rem; }

@media (max-width: 800px) { .ec-hub__vias { grid-template-columns: 1fr; } }

/* --- Tabla comparativa --- */

.ec-hub__tabla {
	overflow-x: auto; /* la tabla desliza en móvil; la página no */
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
}

.ec-hub__tabla table { width: 100%; min-width: 34rem; border-collapse: collapse; }

.ec-hub__tabla th,
.ec-hub__tabla td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.9375rem;
}

.ec-hub__tabla thead th {
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #98a1bd;
	white-space: nowrap;
}

.ec-hub__tabla tbody th { font-weight: 600; }
.ec-hub__tabla tbody th a { color: #fff; text-decoration: none; }
.ec-hub__tabla tbody th a:hover { color: var(--wp--preset--color--acento-vivo); text-decoration: underline; }
.ec-hub__tabla tbody td { color: #c3cbe4; }
.ec-hub__tabla tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.ec-hub__tabla tr:last-child th,
.ec-hub__tabla tr:last-child td { border-bottom: 0; }

/* --- Encaje --- */

.ec-hub__encaje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.75rem, 4vw, 4rem); }
.ec-hub__encaje h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.12; color: #fff; letter-spacing: -0.02em; }
.ec-hub__encaje > div > p { margin: 0.9rem 0 0; color: #a9b4d4; }
.ec-hub .ec-nolista li { color: #a9b4d4; }
.ec-hub .ec-nolista a { color: var(--wp--preset--color--acento-vivo); }

@media (max-width: 860px) { .ec-hub__encaje { grid-template-columns: 1fr; } }

/* --- Acordeón sobre oscuro --- */

.ec-hub .ecaptor-faq__item { border-color: rgba(255, 255, 255, 0.1); }
.ec-hub .ecaptor-faq__item summary { color: #fff; }
.ec-hub .ecaptor-faq__respuesta { color: #a9b4d4; }

/* Segunda línea en azul, mismo recurso que el titular del hero. */
.ec-portada .ec-sec h2 em {
	font-style: normal;
	color: var(--wp--preset--color--acento);
}

/* =========================================================================
   FONDO DE LAS BANDAS OSCURAS

   Una sola utilidad en lugar de los tres halos que había puestos a mano, cada
   uno distinto. Degradados radiales, sin `filter: blur`: desenfocar una capa
   del tamaño de la pantalla obliga al navegador a rasterizarla, y un radial da
   el mismo resultado difuso por nada.
   ====================================================================== */

.ec-aura { position: relative; isolation: isolate; overflow: hidden; }

.ec-aura::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(46rem 28rem at 18% 0%, rgba(2, 92, 217, 0.28), transparent 68%),
		radial-gradient(38rem 24rem at 88% 92%, rgba(59, 139, 255, 0.16), transparent 70%),
		radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}

/* --- El gradiente que sigue al gráfico ---------------------------------- */

/* Pegajosa como la pista, no anclada a los 1.710 px de la sección: si se ancla
   al bloque entero, la luz se sale de la ventana en cuanto se baja. */
.ec-scroll__aura {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -100vh;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ec-scroll__aura span {
	position: absolute;
	inset: 0;
	display: block;
}

/* Cian a la izquierda: es el color de los anuncios en el gráfico, que son los
   que sostienen los primeros meses. */
.ec-scroll__aura--ads {
	opacity: calc(1 - var(--ec-p, 0));
	background:
		radial-gradient(50rem 34rem at 20% 36%, rgba(8, 145, 178, 0.34), transparent 68%),
		radial-gradient(34rem 24rem at 34% 96%, rgba(8, 145, 178, 0.14), transparent 70%);
}

/* Azul de marca a la derecha: el posicionamiento, que acaba mandando. */
.ec-scroll__aura--seo {
	opacity: var(--ec-p, 0);
	background:
		radial-gradient(52rem 34rem at 74% 32%, rgba(2, 92, 217, 0.42), transparent 68%),
		radial-gradient(34rem 24rem at 62% 98%, rgba(59, 139, 255, 0.16), transparent 70%);
}

/* Viñeteado común, para que el gráfico no compita con los bordes. */
.ec-scroll__aura::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(130% 95% at 55% 50%, transparent 62%, rgba(3, 5, 16, 0.45) 100%);
}

/* El contenido va por encima de las dos capas. */
.ec-scroll__pista { position: sticky; z-index: 1; }

/* Las bandas oscuras sueltas heredan el mismo fondo sin tocar su marcado. */
.ec-sec--oscuro { position: relative; isolation: isolate; overflow: hidden; }

.ec-sec--oscuro::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(44rem 26rem at 20% 0%, rgba(2, 92, 217, 0.22), transparent 68%),
		radial-gradient(34rem 22rem at 86% 96%, rgba(59, 139, 255, 0.12), transparent 72%);
}

/* El hero de la portada ya tiene el shader: dos tratamientos superpuestos
   ensucian, así que ahí el aura se apaga. */
.ec-hero--shader.ec-aura::after { content: none; }

/* Las tarjetas de trabajos toman el gris, igual que las de «todo incluido»:
   la sección gana identidad propia sin abrir una segunda banda oscura, que
   volvería a la alternancia que acabamos de quitar. */
.ec-portada .ec-caso__enlace { background: var(--wp--preset--color--superficie); }
.ec-portada .ec-caso__marco { background: var(--wp--preset--color--borde); }
.ec-portada .ec-caso__enlace:hover,
.ec-portada .ec-caso__enlace:focus-visible { background: var(--wp--preset--color--base); }

/* =========================================================================
   HUB DEL BLOG. Índice, no lectura larga: en claro, con los temas y los
   artículos en rejilla. La banda oscura queda para el cierre comercial.
   ====================================================================== */

.ec-blog { --ec-wrap: 1280px; }

.ec-blog__abre {
	padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(1.5rem, 2.5vw, 2.25rem);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-blog__abre h1 {
	margin: 0;
	font-size: clamp(2.2rem, 4.8vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ec-blog__abre h1 em { font-style: normal; color: var(--wp--preset--color--acento); }

.ec-blog__entrada {
	max-width: 62ch;
	margin: 1.4rem 0 0;
	font-size: clamp(1rem, 1.35vw, 1.1875rem);
	line-height: 1.65;
	color: var(--wp--preset--color--texto-suave);
}

/* Las tarjetas de criterio no llevan numeración: no son pasos. */
.ec-blog .ec-caja h2 { margin: 0 0 0.6rem; font-size: 1.125rem; }
.ec-blog .ec-caja p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--texto-suave); }
.ec-blog .ec-caja { background: var(--wp--preset--color--superficie); }

/* --- Temas --- */

.ec-temas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-temas > li {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--acento);
}

.ec-temas h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.ec-temas p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--texto-suave); }
.ec-temas__ir { margin-top: 0.9rem !important; font-size: 0.875rem; }
.ec-temas__ir a { color: var(--wp--preset--color--acento); }

@media (max-width: 1000px) { .ec-temas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ec-temas { grid-template-columns: 1fr; } }

/* --- Artículos --- */

.ec-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-posts > li { display: flex; margin: 0; }

.ec-posts article {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	background: var(--wp--preset--color--superficie);
	transition: border-color var(--ec-transicion), transform var(--ec-transicion), background var(--ec-transicion);
}

.ec-posts article:hover {
	border-color: var(--wp--preset--color--acento);
	background: var(--wp--preset--color--base);
	transform: translateY(-3px);
}

.ec-posts__cat {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
}

.ec-posts h3 { margin: 0 0 0.75rem; font-size: 1.125rem; line-height: 1.3; }
.ec-posts h3 a { color: inherit; text-decoration: none; }
.ec-posts h3 a:hover { color: var(--wp--preset--color--acento); }

/* El enlace del titular cubre la tarjeta entera: en táctil no hay hover que
   indique qué es pulsable, así que el área tiene que ser toda. */
.ec-posts h3 a::after { content: ""; position: absolute; inset: 0; }
.ec-posts article { position: relative; }

.ec-posts__pie { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--texto-suave); }
.ec-posts__fecha { margin: auto 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--texto-tenue); }

@media (max-width: 1000px) { .ec-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ec-posts { grid-template-columns: 1fr; } }

/* =========================================================================
   ARTÍCULO DE BLOG. Índice fijo a la izquierda, cuerpo a medida de lectura.
   El contenido sigue siendo bloques editables: esto es solo el envoltorio.
   ====================================================================== */

.ec-art { --ec-wrap: 1160px; }

/* --- Cabecera --- */

.ec-art__cab {
	padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-tenue);
}

.ec-migas a { color: var(--wp--preset--color--texto-suave); text-decoration: none; }
.ec-migas a:hover { color: var(--wp--preset--color--acento); text-decoration: underline; }
.ec-migas [aria-current] { color: var(--wp--preset--color--texto-tenue); }

.ec-art__cab .ec-eyebrow { margin-bottom: 0.9rem; }
.ec-art__cab .ec-eyebrow a { color: inherit; text-decoration: none; }
.ec-art__cab .ec-eyebrow a:hover { text-decoration: underline; }

.ec-art__cab h1 {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(2.1rem, 4.4vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

/* La entradilla es lo que hoy no existía: el artículo saltaba del titular a un
   h2 sin nada en medio. */
.ec-art__entrada {
	max-width: 58ch;
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	color: var(--wp--preset--color--texto-suave);
}

.ec-art__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-tenue);
}

/* --- Rejilla: índice + cuerpo --- */

.ec-art__rejilla {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	padding-block: clamp(2.25rem, 4.5vw, 3.75rem) clamp(2.5rem, 5vw, 4.5rem);
}

/* Sin índice, el cuerpo se centra igual en lugar de irse a la izquierda. */
.ec-art__rejilla > .ec-art__cuerpo:only-child { grid-column: 1 / -1; max-width: 40rem; margin-inline: auto; }

/* Cuarenta rem a 18 px son unas 70 letras por línea. Antes eran 780 px y 95. */
.ec-art__cuerpo { max-width: 40rem; }

/* --- Índice lateral --- */

.ec-indice {
	position: sticky;
	top: 6rem;
	font-size: 0.875rem;
}

/* El índice va siempre abierto. Un <details> cerrado deja el contenedor en 35 px
   de alto y la columna pegajosa se queda sin caja, así que en móvil no se
   pliega: se acota la altura y se desplaza dentro. Sale más fiable que jugar
   con el atributo `open`, y funciona igual con JavaScript desactivado. */
@media (min-width: 1101px) {
	.ec-indice summary { pointer-events: none; }
}

.ec-indice summary {
	margin-bottom: 1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
	cursor: default;
	list-style: none;
}

.ec-indice summary::-webkit-details-marker { display: none; }

.ec-indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.15rem;
	border-left: 1px solid var(--wp--preset--color--borde);
}

.ec-indice li { margin: 0; }

.ec-indice a {
	display: block;
	padding: 0.4rem 0 0.4rem 1rem;
	margin-left: -1px;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--texto-suave);
	text-decoration: none;
	line-height: 1.35;
	transition: color var(--ec-transicion), border-color var(--ec-transicion);
}

.ec-indice a:hover { color: var(--wp--preset--color--tinta); }

/* La clase la pone interacciones.js según el apartado visible. */
.ec-indice a.es-activo {
	color: var(--wp--preset--color--acento);
	border-left-color: var(--wp--preset--color--acento);
	font-weight: 500;
}

@media (max-width: 1100px) {
	.ec-art__rejilla { grid-template-columns: minmax(0, 1fr); }
	.ec-art__cuerpo { max-width: 40rem; margin-inline: auto; }

	/* En pantalla estrecha el índice se pliega y va sobre el texto. */
	.ec-indice {
		position: static;
		max-width: 40rem;
		margin-inline: auto;
		padding: 1rem 1.25rem;
		border: 1px solid var(--wp--preset--color--borde);
		border-radius: 12px;
		background: var(--wp--preset--color--superficie);
	}

	.ec-indice summary { margin-bottom: 0.9rem; }

	/* Ocho apartados serían 610 px de índice antes del primer párrafo. */
	.ec-indice nav { max-height: 11rem; overflow-y: auto; }
	.ec-indice ol { border-left: 0; }
	.ec-indice a { padding-left: 0; border-left: 0; }
}

/* --- Ritmo del cuerpo --- */

.ec-art__cuerpo > h2 {
	margin-top: 3.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--borde);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	scroll-margin-top: 6rem; /* que el índice no deje el titular bajo la cabecera */
}

.ec-art__cuerpo > h3 { margin-top: 2.25rem; font-size: 1.1875rem; }
.ec-art__cuerpo > p { line-height: 1.7; }

.ec-art__cuerpo code {
	padding: 0.15em 0.4em;
	border-radius: 5px;
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borde);
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Tablas -------------------------------------------------------------
   El tema activa `should_load_separate_core_block_assets`, así que WordPress
   imprime su CSS de bloque EN LÍNEA y después de esta hoja. A igualdad de
   especificidad gana el suyo: por eso el relleno era de 6,5 px y los bordes
   salían en #1c2340. Estas reglas suben un nivel para ganarle, y replican el
   tratamiento que ya usan la tabla de sectores y la de cookies. */

.ec-lectura .wp-block-table {
	max-width: none;
	margin-block: 2rem;
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 12px;
}

.ec-lectura .wp-block-table table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.ec-lectura .wp-block-table :where(th, td) {
	padding: 0.85rem 1.1rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-lectura .wp-block-table thead { border-bottom: 0; }

.ec-lectura .wp-block-table thead th {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto-suave);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ec-lectura .wp-block-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.ec-lectura .wp-block-table tbody tr:hover { background: rgba(2, 92, 217, 0.03); }

/* Las tablas anchas pueden salirse de la medida de lectura: es contenido de
   consulta, no de lectura corrida. */
.ec-lectura .wp-block-table.alignwide { width: 100%; }

/* --- Relacionados --- */

.ec-art__mas {
	padding-block: clamp(2.5rem, 4.5vw, 4rem);
	border-top: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--base);
}

.ec-art__mas .ec-posts { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 700px) { .ec-art__mas .ec-posts { grid-template-columns: 1fr; } }



/* =========================================================================
   LAS DOS VÍAS EN LA FICHA DE SECTOR

   Es el CTA principal de esas páginas, pero va dentro del artículo, no como
   banda aparte: en claro, dentro de la columna de lectura y con el mismo
   lenguaje de tarjetas del resto de la web.
   ====================================================================== */

.ec-vias {
	margin-block: clamp(2.5rem, 4.5vw, 3.5rem);
	padding: clamp(1.5rem, 2.8vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 18px;
	background: var(--wp--preset--color--superficie);
}

.ec-vias .ec-eyebrow { margin-bottom: 0.65rem; }

.ec-vias__titular {
	margin: 0;
	font-size: clamp(1.35rem, 2.1vw, 1.7rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* El titular del bloque no debe heredar el filete que llevan los h2 del
   artículo: aquí abre una tarjeta, no un apartado. */
.entry-content .ec-vias__titular,
.wp-block-post-content .ec-vias__titular {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ec-vias__entrada {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--texto-suave);
}

.ec-vias__par {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}

.ec-vias__op {
	display: flex;
	flex-direction: column;
	padding: 1.35rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

/* La recomendada se distingue por color de borde, no por tamaño: dos tarjetas
   de altura distinta se leen como un fallo de maquetación. */
.ec-vias__op--principal {
	border-color: var(--wp--preset--color--acento);
	box-shadow: 0 0 0 1px var(--wp--preset--color--acento);
}

.ec-vias__etq {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
}

.ec-vias__op--principal .ec-vias__etq { color: var(--wp--preset--color--acento); }

.ec-vias__op h3 {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.ec-vias p.ec-vias__precio {
	margin: 0.35rem 0 1rem;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--wp--preset--color--tinta);
}

.ec-vias p.ec-vias__precio span {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto-tenue);
}

/* Lista propia: la marca azul del artículo es demasiado peso dentro de una
   tarjeta de este tamaño. */
.ec-vias__op ul {
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
}

.ec-vias__op li {
	position: relative;
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-suave);
}

.ec-vias__op li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
}

.ec-vias__op--principal li::before { background: var(--wp--preset--color--acento); }
.ec-vias__op:not(.ec-vias__op--principal) li::before { background: var(--wp--preset--color--borde-fuerte); }

.ec-vias__nota {
	margin: 0 0 1.25rem;
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	background: var(--wp--preset--color--superficie);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-suave);
}

.ec-vias__nota strong { color: var(--wp--preset--color--tinta); }

.ec-vias__op .ec-btn {
	margin-top: auto;
	justify-content: center;
	text-align: center;
	font-size: 0.875rem;
	padding: 0.7rem 1rem;
}

.ec-vias__pie {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-tenue);
}

@media (max-width: 720px) { .ec-vias__par { grid-template-columns: 1fr; } }

/* `ec-btn--fantasma` está pensado para banda oscura: texto y borde en blanco.
   Dentro de la tarjeta clara desaparecía, igual que le pasó al «Configurar»
   del banner de cookies. */
.ec-vias .ec-btn--fantasma {
	color: var(--wp--preset--color--tinta);
	border-color: var(--wp--preset--color--borde-fuerte);
	background: transparent;
}

.ec-vias .ec-btn--fantasma:hover,
.ec-vias .ec-btn--fantasma:focus-visible {
	color: var(--wp--preset--color--acento);
	border-color: var(--wp--preset--color--acento);
	background: var(--wp--preset--color--acento-claro);
}


/* =========================================================================
   PÁGINA DE EJEMPLOS

   La galería en perspectiva es el fondo del hero y, a la vez, el listado: cada
   captura enlaza a la web del cliente y muestra su dominio al pasar por encima.
   Portado de un componente React con `motion`; aquí el giro lo mueve --ec-p,
   que publica el escritor de avance compartido de interacciones.js. Solo se
   transforman `transform` y `opacity`.

   La inclinación es de 55° y no de 75° como el original: a 75 las capturas se
   ven de canto y no se distingue ninguna web, que es lo que hay que enseñar.
   ====================================================================== */

.ec-ejemplos__hero {
	position: relative;
	height: 320vh; /* el recorrido de más es lo que se convierte en --ec-p */
	background: var(--wp--preset--color--marino);
}

.ec-ejemplos__pista {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}


/* --- La galería --- */

/* La perspectiva va aquí, en el padre directo de la rejilla. Si se declara en
   un abuelo, los elementos intermedios la aplanan salvo que lleven
   `transform-style: preserve-3d`: el giro se convierte entonces en un simple
   aplastamiento vertical, que es lo que se veía. */
.ec-galeria3d {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	padding-top: 12vh;
	perspective: 1400px;
	perspective-origin: 50% 20%;
	transform-style: preserve-3d;
}

.ec-galeria3d__rejilla,
.ec-galeria3d__col > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-galeria3d__rejilla {
	width: min(1320px, 100% - 3rem);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
	align-self: start;
	/* El valor de reserva es 1, no 0: sin JavaScript la variable no se define
	   nunca, y con 0 la galería se quedaría inclinada para siempre y sin poder
	   pulsarse. Con 1 arranca recta y usable; el script la inclina. */
	transform-origin: 50% 0%;
	/* Además de enderezarse, la rejilla sube: así las seis filas de cada
	   columna pasan por delante y todas las capturas quedan alcanzables. */
	/* Arranca subida un 24 %: sin ese desplazamiento el centro de la rejilla
	   cae al borde inferior de la ventana y del plano inclinado solo asoma una
	   franja. Al avanzar sigue subiendo, para que las seis filas pasen por
	   delante y todas las capturas queden alcanzables. */
	/* Sin `scale`: el original ampliaba un 15 % y, sumado a que la perspectiva
	   ya agranda el borde cercano, las capturas salían enormes. La rejilla sube
	   conforme se endereza para que las seis filas pasen por delante. */
	/* Sin `scale`: el original ampliaba un 15 % y, sumado a que la perspectiva
	   ya agranda el borde cercano, las capturas salían enormes. La rejilla sube
	   conforme se endereza. */
	transform:
		translateY(calc(var(--ec-p, 1) * -38%))
		rotateX(calc((1 - var(--ec-p, 1)) * 55deg));
}

/* `will-change` reserva memoria de GPU mientras está declarado: solo mientras
   la sección se ve. La clase la pone y la quita el escritor de avance. */
.ec-ejemplos__hero.es-animando .ec-galeria3d__rejilla { will-change: transform; }

.ec-galeria3d__col > ul { display: grid; gap: 0.85rem; }

/* Velocidades distintas por columna: es lo que vende la profundidad. */
.ec-galeria3d__col[data-col="0"] { transform: translateY(calc((1 - var(--ec-p, 1)) * -3%)); }
.ec-galeria3d__col[data-col="1"] { margin-top: -7%; transform: translateY(calc((1 - var(--ec-p, 1)) * 5%)); }
.ec-galeria3d__col[data-col="2"] { transform: translateY(calc((1 - var(--ec-p, 1)) * -3%)); }

.ec-galeria3d a {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
	transition: transform var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ec-galeria3d img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}

/* El dominio aparece al pasar por encima. También con el foco de teclado: en
   pantalla táctil no hay hover, y sin esto la captura sería un enlace mudo. */
.ec-galeria3d__dom {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.8rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(to top, rgba(8, 11, 31, 0.94), rgba(8, 11, 31, 0.4) 70%, transparent);
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity var(--ec-transicion), transform var(--ec-transicion);
}

.ec-galeria3d a:hover,
.ec-galeria3d a:focus-visible {
	transform: translateZ(30px);
	box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.9);
}

.ec-galeria3d a:hover .ec-galeria3d__dom,
.ec-galeria3d a:focus-visible .ec-galeria3d__dom { opacity: 1; transform: none; }

.ec-galeria3d a:focus-visible { outline: 2px solid var(--wp--preset--color--acento-vivo); outline-offset: 3px; }

/* --- El texto encima --- */

.ec-ejemplos__velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Opaco hasta la mitad de la ventana, que es donde cae el centro del
	   titular, y se abre a partir de ahí: la galería aparece por debajo del
	   titular en lugar de pasarle por detrás. */
	background:
		linear-gradient(to bottom,
			rgba(8, 11, 31, 0.98) 0%,
			rgba(8, 11, 31, 0.9) 18%,
			rgba(8, 11, 31, 0.5) 46%,
			rgba(8, 11, 31, 0.25) 74%,
			rgba(8, 11, 31, 0.6) 100%),
		radial-gradient(60rem 34rem at 22% 12%, rgba(2, 92, 217, 0.3), transparent 70%);
	/* Se retira conforme la galería se endereza, para que quede protagonista. */
	opacity: calc(1 - var(--ec-p, 1) * 0.45);
}

.ec-ejemplos__texto {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	color: #fff;
	/* No debe tapar los enlaces de la galería que quedan debajo. */
	pointer-events: none;
	opacity: calc(1 - var(--ec-p, 1) * 1.6);
}

.ec-ejemplos__texto a,
.ec-ejemplos__texto .ec-btn { pointer-events: auto; }

.ec-ejemplos__texto h1 {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #fff;
}

.ec-ejemplos__texto h1 em { font-style: normal; color: var(--wp--preset--color--acento-vivo); }

.ec-ejemplos__lema {
	max-width: 44ch;
	margin: 1.25rem 0 1.75rem;
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.6;
	color: #c3cbe4;
}

/* --- Texto de apoyo e índice --- */

.ec-ejemplos__entrada { max-width: 46rem; }

.ec-ejemplos__entrada p {
	margin: 0 0 1rem;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.65;
	color: var(--wp--preset--color--texto-suave);
}

.ec-ejemplos__entrada p:last-child { margin-bottom: 0; }

.ec-indice-webs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.4rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-indice-webs li { margin: 0; }

.ec-indice-webs a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.ec-indice-webs a:hover { color: var(--wp--preset--color--acento); border-bottom-color: var(--wp--preset--color--acento); }
.ec-indice-webs span { color: var(--wp--preset--color--texto-tenue); }

@media (max-width: 900px) { .ec-indice-webs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ec-indice-webs { grid-template-columns: 1fr; } }

/* --- Sin 3D: móvil y movimiento reducido ---
   Dieciocho imágenes con transformaciones 3D es lo peor que se le puede pedir
   a la GPU de un teléfono, y una galería que gira provoca mareo a quien pide
   movimiento reducido. En ambos casos: rejilla plana, dominio siempre visible
   —sin hover no habría forma de saber qué web es cada una— y el texto arriba
   en flujo normal. */

/* El 3D funciona igual en móvil que en escritorio; solo se apaga con
   movimiento reducido, que es una petición explícita del visitante. Para que
   una GPU de teléfono lo aguante, la galería baja a dos columnas y las capturas
   se sirven más pequeñas: el coste de una transformación 3D lo marca el número
   de píxeles a componer, no el de imágenes. */
@media (prefers-reduced-motion: reduce) {
	.ec-ejemplos__hero { height: auto; }

	.ec-ejemplos__pista {
		position: static;
		height: auto;
		overflow: visible;
		perspective: none;
		padding-block: clamp(2.5rem, 5vw, 4rem);
	}

	.ec-galeria3d { position: static; padding-top: 2rem; perspective: none; transform-style: flat; }
	.ec-galeria3d__rejilla { transform: none !important; }
	.ec-galeria3d__col { transform: none !important; margin-top: 0 !important; }
	.ec-galeria3d a:hover { transform: none; }

	.ec-galeria3d__dom { position: static; opacity: 1; transform: none; background: none; color: var(--wp--preset--color--texto-suave); padding: 0.5rem 0 0; }
	.ec-galeria3d a { overflow: visible; border-radius: 0; box-shadow: none; }
	.ec-galeria3d img { border-radius: 10px; }

	.ec-ejemplos__velo { display: none; }

	.ec-ejemplos__texto {
		position: static;
		display: block;
		opacity: 1;
		color: var(--wp--preset--color--tinta);
	}

	.ec-ejemplos__texto h1 { color: var(--wp--preset--color--tinta); }
	.ec-ejemplos__texto .ec-eyebrow { color: var(--wp--preset--color--acento); }
	.ec-ejemplos__lema { color: var(--wp--preset--color--texto-suave); }
	.ec-ejemplos__hero { background: var(--wp--preset--color--base); }
}

/* En pantalla estrecha, dos columnas y menos separación: tres columnas de
   200 px no dejan ver ninguna web. El texto del hero pasa a ocupar el ancho
   completo, con más velo detrás para que se lea sobre las capturas. */
@media (max-width: 860px) {
	.ec-galeria3d__rejilla { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
	.ec-galeria3d__col > ul { gap: 0.6rem; }
	.ec-galeria3d__col[data-col="2"] { display: none; }
	/* Menos margen que en escritorio: en una pantalla de 844 px, 30vh dejaba
	   la galería casi fuera de la primera vista. */
	.ec-galeria3d { padding-top: 13vh; }

	.ec-ejemplos__hero { height: 260vh; }

	.ec-ejemplos__texto h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.ec-ejemplos__lema { font-size: 1rem; }

	/* Con la galería más arriba, el velo tiene que cerrar antes para que el
	   titular no compita con las capturas. */
	.ec-ejemplos__velo {
		background:
			linear-gradient(to bottom,
				rgba(8, 11, 31, 0.97) 0%,
				rgba(8, 11, 31, 0.92) 34%,
				rgba(8, 11, 31, 0.5) 56%,
				rgba(8, 11, 31, 0.28) 80%,
				rgba(8, 11, 31, 0.62) 100%);
	}

	/* Sin hover en táctil: el dominio siempre a la vista. */
	.ec-galeria3d__dom { opacity: 1; transform: none; font-size: 0.6875rem; padding: 0.4rem 0.5rem; }

	.ec-ejemplos__cont > ul { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

/* --- La página entera en oscuro ---
   Las capturas de los clientes son claras y muy variadas: sobre marino
   destacan como piezas iluminadas, y la galería del hero deja de ser una isla
   oscura dentro de una página clara. */

.ec-ejemplos { background: var(--wp--preset--color--marino); color: #c3cbe4; }

.ec-ejemplos .ec-sec :where(h2, h3) { color: #fff; }
.ec-ejemplos .ec-sec__cab .ec-eyebrow { color: var(--wp--preset--color--acento-vivo); }
.ec-ejemplos .ec-ejemplos__entrada p { color: #a9b4d4; }
.ec-ejemplos .ec-ejemplos__entrada a { color: var(--wp--preset--color--acento-vivo); }

.ec-ejemplos .ec-indice-webs a {
	color: #dfe5f3;
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.ec-ejemplos .ec-indice-webs a:hover {
	color: var(--wp--preset--color--acento-vivo);
	border-bottom-color: var(--wp--preset--color--acento-vivo);
}

.ec-ejemplos .ec-indice-webs span { color: #7f8bb0; }

/* El cierre ya era oscuro: pierde el borde que lo separaba del claro. */
.ec-ejemplos .ec-sec--oscuro { background: var(--wp--preset--color--marino-suave); }

/* En plano, el texto del hero también va sobre oscuro. */
@media (prefers-reduced-motion: reduce) {
	.ec-ejemplos__hero { background: var(--wp--preset--color--marino); }
	.ec-ejemplos__texto { color: #c3cbe4; }
	.ec-ejemplos__texto h1 { color: #fff; }
	.ec-ejemplos__texto .ec-eyebrow { color: var(--wp--preset--color--acento-vivo); }
	.ec-ejemplos__lema { color: #a9b4d4; }
	.ec-galeria3d__dom { color: #98a1bd; }
}

/* Las filas de relleno no son enlaces y no deben responder al puntero. */
.ec-galeria3d__relleno { pointer-events: none; }

.ec-galeria3d__relleno img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
}

/* Con la galería en plano no hacen falta: no hay titular tapando nada. */
@media (prefers-reduced-motion: reduce) {
	.ec-galeria3d__relleno { display: none; }
}

/* --- La galería continúa en plano ---
   Mismas medidas que la rejilla del hero para que se lea como continuación y
   no como una sección nueva: mismo ancho, mismas columnas y mismo hueco. */

.ec-ejemplos__cont {
	background: var(--wp--preset--color--marino);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}


.ec-ejemplos__cont > ul {
	width: min(1320px, 100% - 3rem);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
}

.ec-ejemplos__cont li { margin: 0; }

.ec-ejemplos__cont a {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
	transition: transform var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ec-ejemplos__cont img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}

.ec-ejemplos__cont a:hover,
.ec-ejemplos__cont a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.9);
}

.ec-ejemplos__cont a:focus-visible { outline: 2px solid var(--wp--preset--color--acento-vivo); outline-offset: 3px; }

.ec-ejemplos__cont a:hover .ec-galeria3d__dom,
.ec-ejemplos__cont a:focus-visible .ec-galeria3d__dom { opacity: 1; transform: none; }

@media (max-width: 620px) {
	.ec-ejemplos__cont > ul { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
	/* Sin hover en táctil: el dominio va siempre visible, como en la galería. */
	.ec-ejemplos__cont .ec-galeria3d__dom { opacity: 1; transform: none; }
}

/* En esta página el split va a dos columnas como el resto, pero el titular
   necesita algo menos de peso: compite con la galería que tiene justo encima. */
.ec-ejemplos .ec-split h2 em { font-style: normal; color: var(--wp--preset--color--acento-vivo); }
.ec-ejemplos .ec-ejemplos__entrada { max-width: none; }

/* Cuatro rasgos compartidos. Rejilla propia y no `.ec-tresc`, que es de tres. */
.ec-comparten {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-comparten li {
	margin: 0;
	padding: 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.035);
}

.ec-comparten h3 { margin: 0 0 0.55rem; font-size: 1rem; line-height: 1.3; color: #fff; }
.ec-comparten p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #98a1bd; }

@media (max-width: 900px) { .ec-comparten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ec-comparten { grid-template-columns: 1fr; } }

.ec-ejemplos .ec-sec__cab { max-width: 46rem; }
.ec-ejemplos .ec-sec__cab h2 em { font-style: normal; color: var(--wp--preset--color--acento-vivo); }
.ec-ejemplos .ec-sec__entrada { color: #a9b4d4; }
.ec-ejemplos .ec-sec__entrada a { color: var(--wp--preset--color--acento-vivo); }

.ec-indice-webs__cab {
	margin: clamp(2rem, 3.5vw, 2.75rem) 0 1rem;
	font-size: 0.9375rem;
	color: #98a1bd;
}

.ec-comparten { margin-top: clamp(1.5rem, 2.5vw, 2rem); }

/* =========================================================================
   HUB DE SERVICIOS. Reparte enlaces internos hacia las nueve páginas de
   servicio. No lleva tarjetas de plan: eso es /precios/, y repetirlo aquí es
   lo que hacía que las dos páginas parecieran la misma.
   ====================================================================== */


/* --- Qué te encaja --- */

.ec-servicios__casos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-servicios__casos li {
	margin: 0;
	padding-top: 1.1rem;
	border-top: 2px solid var(--wp--preset--color--acento);
}

.ec-servicios__casos strong { display: block; margin-bottom: 0.4rem; font-size: 1rem; }
.ec-servicios__casos p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--texto-suave); }

@media (max-width: 700px) { .ec-servicios__casos { grid-template-columns: 1fr; } }

/* --- Índice del hero de servicios --- */

.ec-servicios__resumen {
	padding: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.045);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ec-servicios__resumen ol {
	counter-reset: ec-area;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

.ec-servicios__resumen li {
	counter-increment: ec-area;
	position: relative;
	margin: 0;
	padding-left: 2.1rem;
}

.ec-servicios__resumen li::before {
	content: counter(ec-area, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--acento-vivo);
}

.ec-servicios__resumen a { display: block; color: #fff; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.ec-servicios__resumen a:hover { color: var(--wp--preset--color--acento-vivo); }
.ec-servicios__resumen span { display: block; margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.45; color: #98a1bd; }

/* --- Las tres áreas --- */

.ec-areas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.ec-area {
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 18px;
	background: var(--wp--preset--color--superficie);
	scroll-margin-top: 6rem;
}

.ec-area__num {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--acento);
}

.ec-area h3 { margin: 0 0 0.6rem; font-size: 1.3rem; letter-spacing: -0.015em; }
.ec-area__texto { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--texto-suave); }

.ec-area ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.ec-area li { margin: 0; }

.ec-area li a {
	display: block;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 11px;
	background: var(--wp--preset--color--base);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ec-transicion), transform var(--ec-transicion);
}

.ec-area li a:hover,
.ec-area li a:focus-visible { border-color: var(--wp--preset--color--acento); transform: translateY(-2px); }
.ec-area li a:focus-visible { outline: 2px solid var(--wp--preset--color--acento); outline-offset: 3px; }

.ec-area li strong { display: block; font-size: 0.9375rem; margin-bottom: 0.15rem; }
.ec-area li span { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--texto-suave); }

@media (max-width: 1000px) { .ec-areas { grid-template-columns: 1fr; } }

/* =========================================================================
   PÁGINAS DE SERVICIO. Siete páginas comparten esta maqueta: hero compacto,
   índice lateral y medida de lectura. El contenido sigue en bloques, así que
   se edita desde el escritorio como hasta ahora.
   ====================================================================== */

.ec-servicio { --ec-wrap: 1160px; }

/* Hero más bajo que el de portada: aquí el titular es la promesa, no un
   escaparate, y el contenido empieza enseguida. */
.ec-hero--compacto {
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.25rem, 4vw, 3.5rem);
}

.ec-hero--compacto .ec-migas { margin-bottom: 1.5rem; }
.ec-hero--compacto .ec-migas a { color: #a9b4d4; }
.ec-hero--compacto .ec-migas a:hover { color: #fff; }
.ec-hero--compacto .ec-migas [aria-current] { color: #7f8bb0; }

.ec-hero--compacto .ec-hero__titular {
	max-width: 20ch;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
}

.ec-hero--compacto .ec-hero__entrada { max-width: 54ch; margin-top: 1.1rem; }
.ec-hero--compacto .ec-hero__acciones { margin-top: 1.75rem; }

/* La rejilla de índice y cuerpo es la misma que la del artículo; solo cambia
   el aire de arriba, porque aquí viene después de un hero y no de una ficha. */
.ec-servicio .ec-art__rejilla { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem); }

/* Muestra de tres webs dentro de una página de servicio. Sale de la medida de
   lectura: son imágenes, no texto corrido. */
.ec-lectura .ec-muestra { max-width: none; margin-block: 2rem; }
.ec-lectura .ec-muestra .ec-casos { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ec-muestra__pie { margin: 1.25rem 0 0; font-size: 0.9375rem; }

@media (max-width: 820px) { .ec-lectura .ec-muestra .ec-casos { grid-template-columns: 1fr; } }

/* Descarga de recurso dentro de un artículo. */
.ec-descarga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 2rem 0;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-left: 3px solid var(--wp--preset--color--acento);
	border-radius: 0 12px 12px 0;
	background: var(--wp--preset--color--superficie);
}

.ec-descarga a { font-weight: 600; color: var(--wp--preset--color--acento); text-decoration: none; }
.ec-descarga a span { margin-left: 0.35rem; }
.ec-descarga a:hover { text-decoration: underline; }
.ec-descarga > span { font-size: 0.875rem; color: var(--wp--preset--color--texto-suave); }

/* --- Planes en versión reducida ---
   El bloque completo de tarjetas ocupa una pantalla entera y se sale de la
   medida de lectura: dentro de una página de servicio es demasiado. Esto son
   tres líneas y un enlace a /precios/, que es donde se venden los planes. */

.ec-planes-min {
	margin: 2.25rem 0;
	padding: 1.5rem 1.65rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 16px;
	background: var(--wp--preset--color--superficie);
}

.ec-planes-min ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }

.ec-planes-min li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 1rem;
	align-items: baseline;
	margin: 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.ec-planes-min li:last-child { padding-bottom: 0; border-bottom: 0; }

.ec-planes-min__que { font-weight: 600; font-size: 0.9375rem; }

.ec-planes-min__precio {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.ec-planes-min__precio small { font-size: 0.75rem; font-weight: 500; color: var(--wp--preset--color--texto-tenue); }

.ec-planes-min__nota {
	grid-column: 1;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--texto-suave);
}

.ec-planes-min__pie { margin: 1.1rem 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--texto-tenue); }
.ec-planes-min__pie a { color: var(--wp--preset--color--acento); }

/* En la muestra de tres, las tarjetas caben en unos 200 px y el dominio se
   partía por la mitad de la palabra. Se apila el pie para que disponga del
   ancho completo y se deja de romper por cualquier punto. */
.ec-muestra .ec-caso__pie {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}

.ec-muestra .ec-caso__dominio {
	font-size: 0.8125rem;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.ec-muestra .ec-caso__ver { margin-left: 0; font-size: 0.75rem; }

/* --- Desplegable de móvil, con algo de diseño ---------------------------
   El panel ocupa la pantalla entera, así que hay sitio para tratarlo como una
   página y no como una lista: halo de marca al fondo, enlaces grandes con
   filete, numeración y la llamada a la acción abajo.

   Los selectores llevan `.wp-block-navigation` de más a propósito: core define
   estas mismas propiedades con la misma especificidad y su CSS se imprime en
   línea después del del tema, así que con un selector más corto ganaba él y el
   relleno de los enlaces se quedaba en cero. */

.ec-cab .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem 1.5rem 2rem;
	background:
		radial-gradient(38rem 26rem at 15% 0%, rgba(2, 92, 217, 0.32), transparent 68%),
		radial-gradient(30rem 22rem at 92% 96%, rgba(59, 139, 255, 0.18), transparent 70%),
		var(--wp--preset--color--marino);
}

.ec-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

.ec-cab .wp-block-navigation .is-menu-open .wp-block-navigation__container {
	counter-reset: ec-nav;
	gap: 0 !important;
	width: 100%;
}

.ec-cab .wp-block-navigation .is-menu-open .wp-block-navigation-item {
	counter-increment: ec-nav;
	position: relative;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.ec-cab .wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.95rem 0 0.95rem 2.4rem;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Numeración: da orden a una lista de siete y llena el vacío de la izquierda. */
.ec-cab .wp-block-navigation .is-menu-open .wp-block-navigation-item::before {
	content: counter(ec-nav, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--acento-vivo);
}

/* La llamada a la acción no es una entrada más del menú. */
.ec-cab .wp-block-navigation .is-menu-open .ec-nav-cta { border-bottom: 0; margin-top: 1.75rem; }
.ec-cab .wp-block-navigation .is-menu-open .ec-nav-cta::before { content: none; }

.ec-cab .wp-block-navigation .is-menu-open .ec-nav-cta .wp-block-navigation-item__content {
	padding: 0.95rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--acento);
	color: #fff;
	font-size: 1rem;
	text-align: center;
}

.ec-cab .wp-block-navigation .is-menu-open .ec-nav-cta .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--acento-oscuro); }

.ec-cab .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: 1.5rem;
	padding: 0.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

/* En escritorio la llamada a la acción ya está en la barra, al lado del menú. */
@media (min-width: 601px) { .ec-cab .ec-nav-cta { display: none; } }

/* =========================================================================
   CONTACTO. Página de conversión: el formulario manda y a su lado va lo que
   quita fricción —qué pasa después, canales directos y a dónde mirar antes.
   ====================================================================== */

.ec-contacto { --ec-wrap: 1160px; }

.ec-contacto__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.ec-contacto__form {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 18px;
	background: var(--wp--preset--color--superficie);
}

.ec-contacto__titulo { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.02em; }
.ec-contacto__ayuda { margin: 0.6rem 0 1.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--texto-suave); }

/* --- Campos --- */

.ecaptor-form .ec-form__par { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.ec-form__trampa { position: absolute; left: -9999px; }

.ec-form__campo { margin: 0 0 1.1rem; }

.ec-form__campo label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--texto-suave);
}

.ec-form__campo label span { color: var(--wp--preset--color--acento); }

/*
 * `box-sizing` no está declarado en ninguna parte del tema, así que los campos
 * heredaban `content-box`: con `width: 100%` más relleno y borde, cada uno se
 * salía ~29 px de su columna y se solapaban entre sí.
 */
.ecaptor-form :where(input, select, textarea) { box-sizing: border-box; }

.ecaptor-form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--borde-fuerte);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tinta);
	transition: border-color var(--ec-transicion), box-shadow var(--ec-transicion);
}

.ecaptor-form :where(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--acento);
	box-shadow: 0 0 0 3px rgba(2, 92, 217, 0.16);
}

.ecaptor-form ::placeholder { color: var(--wp--preset--color--texto-tenue); }
.ecaptor-form textarea { resize: vertical; min-height: 7rem; }

/* La casilla de consentimiento: obligatoria y con área de pulsación amplia. */
.ec-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0.5rem 0 1.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texto-suave);
}

.ec-form__consent input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.1rem;
	accent-color: var(--wp--preset--color--acento);
}

.ec-form__consent a { color: var(--wp--preset--color--acento); }

.ecaptor-form button { width: 100%; justify-content: center; }

.ec-contacto__micro {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--texto-tenue);
}

.ec-contacto__micro a { color: var(--wp--preset--color--acento); }

/* --- Mensaje de envío correcto --- */

.ec-contacto__ok { text-align: left; }
.ec-contacto__ok h2 { margin: 0.5rem 0 0.75rem; font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; }
.ec-contacto__ok p { margin: 0 0 1.5rem; color: var(--wp--preset--color--texto-suave); }

/* --- Columna lateral --- */

.ec-contacto__lado { display: grid; gap: 1.25rem; }

.ec-contacto__pasos ol {
	counter-reset: ec-paso;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.1rem;
}

.ec-contacto__pasos li {
	counter-increment: ec-paso;
	position: relative;
	margin: 0;
	padding-left: 2.4rem;
}

.ec-contacto__pasos li::before {
	content: counter(ec-paso);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.ec-contacto__pasos strong { display: block; font-size: 0.9375rem; }
.ec-contacto__pasos span { display: block; margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--texto-suave); }

.ec-contacto__directo,
.ec-contacto__antes {
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
}

.ec-contacto__directo ul { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.ec-contacto__directo li { margin: 0; }
.ec-contacto__directo a { text-decoration: none; color: inherit; }
.ec-contacto__directo strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--tinta); }
.ec-contacto__directo a:hover strong { color: var(--wp--preset--color--acento); }
.ec-contacto__directo span { display: block; font-size: 0.8125rem; color: var(--wp--preset--color--texto-tenue); }

.ec-contacto__antes p { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--texto-suave); }
.ec-contacto__antes a { color: var(--wp--preset--color--acento); }

@media (max-width: 900px) {
	.ec-contacto__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.ecaptor-form .ec-form__par { grid-template-columns: 1fr; }
}