/* =============================================================================
   PUENTE ELEMENTOR
   =============================================================================

   Lo mismo que el bloque PUENTE GUTENBERG del final de home.css, pero para el
   otro constructor: corregir los envoltorios y los margenes que Elementor añade
   de su cosecha alrededor de nuestras secciones.

   Ninguna regla de aqui es diseño. Si algun dia se abandona Elementor, este
   archivo entero se borra y no hay que tocar nada mas.
   ========================================================================== */

/* --- 1 · El widget no mete caja propia -------------------------------------- */

/* Elementor envuelve cada widget en dos divs. Nuestras secciones ya traen su
   propio contenedor (.wt-container) y su propio relleno vertical, asi que los
   envoltorios tienen que ser transparentes. */
.elementor-widget[class*="elementor-widget-wt-"] > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* Elementor separa widgets con 20px por debajo. Nuestras bandas se tocan. */
.elementor-widget[class*="elementor-widget-wt-"]:not(:last-child) {
	margin-block-end: 0;
}

/* --- 2 · A sangre ----------------------------------------------------------- */

/*
 * Las secciones son bandas a sangre con fondo propio. Si el contenedor de
 * Elementor esta en «Boxed», el fondo se quedaria recortado a 1280.
 *
 * LO RECOMENDADO sigue siendo poner el contenedor en Full Width con relleno 0.
 * Esta regla es la red para cuando no se hace, y tiene que ser exacta.
 *
 * -----------------------------------------------------------------------------
 * OJO CON 100vw: NO es el ancho de la ventana
 * -----------------------------------------------------------------------------
 * 100vw incluye la barra de desplazamiento. La primera version usaba
 * `width: 100vw; margin-inline: calc(50% - 50vw)` y el resultado, medido en la
 * pagina /test/ a 1440, era que cada seccion salia de 1440 dentro de una
 * ventana util de 1425: sobraban 15 px y todas quedaban desplazadas 7 px a la
 * izquierda. El overflow-x lo escondia, asi que no se veia el desbordamiento
 * —pero el contenido estaba descentrado respecto al resto del sitio.
 *
 * La solucion es descontar la barra. Su ancho no existe en CSS, asi que lo mide
 * assets/elementor-frontend.js y lo deja en --wt-sbw. El 0px de reserva hace
 * que, si el JS no llega a ejecutarse, la regla se comporte como antes en lugar
 * de romperse.
 */
.e-con-boxed > .e-con-inner > .elementor-element[class*="elementor-widget-wt-"],
.elementor-section-boxed > .elementor-container [class*="elementor-widget-wt-"].elementor-widget {
	width: calc(100vw - var(--wt-sbw, 0px));
	max-width: calc(100vw - var(--wt-sbw, 0px));
	margin-inline: calc(50% - 50vw + (var(--wt-sbw, 0px) / 2));
}

/*
 * clip y no hidden: hidden convierte al elemento en contenedor de scroll y eso
 * rompe cualquier position: sticky que haya dentro —hoy la cabecera, mañana lo
 * que sea—. clip recorta sin crear contexto de desplazamiento.
 */
.elementor-page body,
body.elementor-page {
	overflow-x: clip;
}

/* --- 3 · El hero dentro del editor ------------------------------------------ */

/*
 * En el lienzo, Elementor dibuja un contorno y un asa sobre el widget al pasar
 * el raton. Sobre el hero, que ocupa toda la pantalla, el asa acaba encima del
 * titular. Se baja para que no tape el texto que se esta editando.
 */
.elementor-editor-active .elementor-widget-wt-hero > .elementor-element-overlay .elementor-editor-element-settings {
	top: 12px;
	inset-inline-end: 12px;
}

/*
 * El paralaje sigue el puntero, y en el editor el puntero esta editando. Se
 * desactiva el movimiento dentro del lienzo: el arte se ve colocado, que es lo
 * que hace falta para maquetar.
 */
.elementor-editor-active .wt-hero__art > * {
	transform: none !important;
}

/* --- 4 · Tipografia -------------------------------------------------------- */

/*
 * Con «Default Fonts» y «Default Colors» desactivados en los ajustes de
 * Elementor, el kit no inyecta nada y manda tokens.css. Esta regla es solo un
 * seguro por si alguien los vuelve a activar sin darse cuenta: dentro de
 * nuestras secciones, la tipografia es la del sistema.
 */
[class*="elementor-widget-wt-"] h1,
[class*="elementor-widget-wt-"] h2,
[class*="elementor-widget-wt-"] h3 {
	font-family: var(--wt-font-display);
}

[class*="elementor-widget-wt-"] p,
[class*="elementor-widget-wt-"] li {
	color: inherit;
}

/* --- 5 · Los <figure> de nuestros widgets ----------------------------------- */

/*
 * Elementor pone a cero el margen de CUALQUIER <figure> que viva dentro de un
 * widget:
 *
 *   .elementor .elementor-widget:not(.elementor-widget-text-editor)
 *   :not(.elementor-widget-theme-post-content) figure { margin: 0 }
 *
 * Los dos :not() cuentan como clase, asi que ese selector pesa (0,4,1). Y su
 * hoja (frontend.min.css) se encola DESPUES de las del theme, de modo que una
 * regla nuestra que solo empate en peso tampoco gana. Resultado: el margen que
 * home.css le da a .wt-player no llegaba a aplicarse y el reproductor salia
 * pegado al titular de la seccion.
 *
 * De todas las figuras de nuestros widgets esta es la unica que quiere un
 * margen distinto de cero —las de About ya declaran `margin: 0`—, asi que aqui
 * se repesca solo esa. El valor NO se escribe aqui: se lee de la variable que
 * define home.css, que es donde vive el diseno.
 *
 * El selector lleva tambien .elementor-widget-container para no depender de
 * ganar un empate por orden de carga.
 */
.elementor .elementor-widget[class*="elementor-widget-wt-"] > .elementor-widget-container figure.wt-player {
	margin: var(--wt-player-gap, 48px) 0 0;
}