/*
 * Puente entre Elementor y el tema.
 *
 * Elementor trae su propia rejilla, su propio ancho y sus propios margenes. Sin
 * este archivo, una seccion de Elementor y una del tema no encajarian.
 *
 * Regla general: aqui solo se corrige lo que choca. El aspecto de los widgets
 * propios vive en main.css, junto al resto del sistema.
 */

/* Los widgets del tema ya llevan su propio aire; el margen de fabrica de
   Elementor duplicaria el espacio. */
.elementor-widget-wh-hero,
.elementor-widget-wh-cta { --wh-widget-flush: 1; }

/* El hero ocupa todo el ancho de la ventana. Se descuenta la barra de
   desplazamiento porque 50vw la incluye y el contenido no: sin esa correccion
   el hero sobresale unos pixeles y aparece una barra horizontal. */
.elementor-widget-container > .wh-hero {
	margin-inline: calc(50% - 50vw + var(--wh-sbw) / 2);
	width: calc(100vw - var(--wh-sbw));
}

/* El contenedor de Elementor hereda el ancho del tema para que la cabecera, el
   contenido y el pie compartan la misma linea vertical. */
.e-con,
.elementor-section.elementor-section-boxed > .elementor-container {
	--container-max-width: var(--wh-width);
}

/* ---- Dos columnas ------------------------------------------------
   Elementor no aplica el ancho que se le indica a un contenedor hijo dentro de
   una fila, asi que las dos columnas terminaban apilandose. El reparto lo hace
   aqui el tema.

   Las declaraciones llevan !important a proposito: Elementor genera para cada
   elemento una regla con su propio identificador, de especificidad mas alta que
   cualquier selector razonable que se pueda escribir desde el tema. */
/* Un contenedor "boxed" de Elementor no contiene a sus hijos directamente:
   intercala un envoltorio .e-con-inner que es quien los agrupa. Por eso la
   fila se declara sobre ese envoltorio cuando existe, y sobre el propio
   contenedor cuando es "full". */
.wh-duo > .e-con-inner,
.wh-duo.e-con-full {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.wh-duo > .e-con-inner > .elementor-element,
.wh-duo.e-con-full > .elementor-element {
	/* Crece y encoge desde una base de 22rem: por debajo de ese ancho las dos
	   columnas pasan a una sola sin necesidad de consulta de medios. */
	flex: 1 1 22rem !important;
	width: auto !important;
	min-width: 0;
}

@media (max-width: 61.99rem) {
	.wh-duo > .e-con-inner,
	.wh-duo.e-con-full { gap: 2.5rem; }
}

.e-con-full,
.e-con > .e-con-inner { max-width: var(--wh-width); }

/* Elementor pone la tipografia de su kit en los titulos; el tema quiere la
   suya, que es la que genera el Customizer. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4 {
	font-family: var(--wh-font-display);
	font-weight: var(--wh-wght-display);
	letter-spacing: -0.022em;
}

.elementor-widget-text-editor { color: var(--wh-muted); }
.elementor-widget-text-editor a { color: var(--wh-sky); }

/* Los botones nativos de Elementor adoptan la forma de los del tema, para que
   una pagina construida a medias no muestre dos estilos de boton. */
.elementor-button {
	border-radius: var(--wh-radius-pill);
	font-family: var(--wh-font-display);
	font-weight: 600;
}
.elementor-button:not(.elementor-button--custom) {
	background-color: var(--wh-primary);
	color: var(--wh-on-primary);
}

/* Imagenes y separadores */
.elementor-widget-image img { border-radius: var(--wh-radius); }
.elementor-divider-separator { border-color: rgba(var(--wh-line-rgb) / .6) !important; }

/* Dentro del editor, los widgets vacios necesitan alto minimo para poder
   seleccionarse; en el front no deben ocupar nada. */
.elementor-editor-active .wh-grid:empty,
.elementor-editor-active .wh-faq:empty { min-height: 5rem; }

/* Aviso de widget sin configurar, visible solo mientras se edita. */
.elementor-editor-active .wh-empty {
	padding: 1.5rem;
	border: 1px dashed rgba(var(--wh-sky-rgb) / .4);
	border-radius: var(--wh-radius);
	color: var(--wh-muted);
	text-align: center;
}
body:not(.elementor-editor-active) .wh-empty { display: none; }

/* Elementor aplica overflow hidden a las secciones, lo que recorta los
   resplandores del tema. Se devuelve el desbordamiento donde hace falta. */
.e-con:has(> .e-con-inner > .elementor-widget-wh-hero),
.e-con:has(> .e-con-inner > .elementor-widget-wh-cta) { overflow: visible; }

/* El lienzo del editor no tiene la clase del body del front: se le dan los
   colores base para que no se edite sobre blanco un tema oscuro. */
.elementor-editor-active .elementor-element-overlay { --wh-editor: 1; }