/*
 * Neutraliza el DOM de Elementor para que el layout y la tipografía los
 * ponga components.css (lección de Royal Media, elementor/README.md).
 *
 * El Kit ya deja en 0 el padding por defecto de los containers y el espacio
 * entre widgets (`wp syncrasy kit apply`). Lo que queda:
 *
 * - Dirección de los containers. Elementor la fija con `.e-con-full.e-flex`
 *   (dos clases) y a una clase nuestra no le alcanza. Acá se toma con la misma
 *   especificidad y, como esta hoja va después, gana. Los componentes eligen
 *   la dirección con la variable --sy-dir, sin pelear especificidad.
 * - Título: Elementor le pone line-height: 1. Hereda del envoltorio, que es
 *   donde está la clase del diseño (.sy-h2, .sy-eyebrow…).
 * - Botón: Elementor trae fondo gris, padding y radio propios. Se vacían y el
 *   botón toma las variables de .sy-btn.
 */

/* --- Containers ------------------------------------------------------------- */

/*
 * Las variables de layout no se heredan: si la banda CTA es una fila, su
 * columna de texto no tiene que volverse fila también.
 */
@property --sy-dir {
	syntax: "*";
	inherits: false;
}

@property --sy-wrap-mode {
	syntax: "*";
	inherits: false;
}

@property --sy-max-w {
	syntax: "*";
	inherits: false;
}

.e-con.sy-node {
	flex-direction: var(--sy-dir, column);
	flex-wrap: var(--sy-wrap-mode, nowrap);
	min-width: 0;
}

/*
 * Elementor deja a cada widget dentro de un container con max-width: 100%,
 * con la clase duplicada a propósito (`.elementor.elementor .e-con>…`, cuatro
 * clases). Se iguala esa especificidad; una clase nuestra que quiera limitar el
 * ancho de un widget usa --sy-max-w.
 */
.elementor.elementor .e-con > .elementor-widget {
	max-width: var(--sy-max-w, 100%);
}

/* --- Título y texto ---------------------------------------------------------- */

.elementor-widget-heading .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
}

.elementor-widget-heading .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.elementor-widget-text-editor p {
	margin: 0 0 1em;
}

.elementor-widget-text-editor > :last-child,
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* --- Icono (tiles) ---------------------------------------------------------- */

/* El widget de icono trae 50px y gris; en un tile el tamaño y el color los da el tile. */
.elementor-widget-icon[class*="sy-"] .elementor-icon-wrapper,
.elementor-widget-icon[class*="sy-"] .elementor-icon {
	display: block;
	font-size: inherit;
	line-height: 0;
	color: inherit;
	fill: currentColor;
}

/* --- Imagen ----------------------------------------------------------------- */

.elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Botón ------------------------------------------------------------------ */

.sy-btn .elementor-button {
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	fill: currentColor;
	transition: none;
}

.sy-btn .elementor-button-content-wrapper {
	display: contents;
}

.sy-btn .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}