/*
 * Aliances Experience - capa de marca del blog.
 *
 * La tarjeta se identifica por .elementor-element-post-card, que es la clase
 * que Elementor imprime a partir del id del contenedor: los contenedores v4 no
 * admiten clases sueltas, solo referencias a clases globales.
 *
 * La plantilla de archivo (elementor_library 4161) monta la estructura con
 * contenedores v4 y una rejilla de bucle; la tarjeta (4160) usa widgets v3
 * porque son los unicos que aceptan dynamic tags en imagenes y enlaces. Aqui se
 * les da la marca, colgando de las custom properties --ae-* que emite el Kit.
 *
 * Especificidad: cada regla se ancla en .elementor + la clase del widget, que
 * empata con el CSS por elemento de Elementor y gana por orden de carga.
 */

/* ---------------------------------------------------------------------------
 * Cabecera
 * ------------------------------------------------------------------------ */

.elementor [data-id="blog-title"] {
	font-family: var(--ae-font-heading), serif;
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ae-accent);
}

.elementor [data-id="blog-sub"] {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Rejilla
 * ------------------------------------------------------------------------ */

.elementor .elementor-widget-loop-grid .elementor-grid:has(.elementor-element-post-card) {
	column-gap: 40px;
	row-gap: 56px;
}

/* ---------------------------------------------------------------------------
 * Tarjeta
 * ------------------------------------------------------------------------ */

.elementor .elementor-element-post-card .elementor-widget-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.elementor .elementor-element-post-card [data-id="post-fecha"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ae-body);
}

.elementor .elementor-element-post-card [data-id="post-titulo"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ae-ink);
}

.elementor .elementor-element-post-card [data-id="post-titulo"] a {
	color: inherit;
	text-decoration: none;
	transition: color 300ms ease;
}

.elementor .elementor-element-post-card [data-id="post-titulo"] a:hover {
	color: var(--ae-accent);
}

/*
 * El extracto va en un heading con el tag dinamico y no en el widget de
 * extracto de Elementor: ese ultimo no imprime nada dentro de un loop item, ni
 * con extracto manual guardado.
 */
.elementor .elementor-element-post-card [data-id="post-extracto"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--ae-body);
}

/* --- fila de autor ------------------------------------------------------- */

.elementor .elementor-element-post-card [data-id="post-avatar"] img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
}

.elementor .elementor-element-post-card [data-id="post-autor-nombre"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ae-accent);
}

.elementor .elementor-element-post-card [data-id="post-autor-bio"] .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ae-body);
}

/* ---------------------------------------------------------------------------
 * La primera entrada, a lo ancho
 *
 * Ojo con :first-child: el primer hijo de la rejilla es un <style> que imprime
 * Elementor con el CSS del loop item, asi que hay que ir al primer div.
 *
 * Solo en el listado del blog: los relacionados de una entrada usan la misma
 * rejilla, y la categoria de producto tambien vive en .elementor-location-archive
 * y usa un loop-grid — la regla le partia la parrilla de productos. De ahi el
 * :has(.elementor-element-post-card): la marca de que la tarjeta es del blog.
 *
 * El diseno abre con la ultima entrada en grande: foto a la izquierda y texto a
 * la derecha. Es la misma tarjeta — no hay una segunda plantilla que mantener:
 * se le cambia la retícula al primer hijo de la rejilla.
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.elementor-location-archive .elementor-widget-loop-grid .elementor-grid > div:first-of-type:has(.elementor-element-post-card) {
		grid-column: 1 / -1;
		margin-bottom: 24px;
	}

	.elementor-location-archive .elementor-widget-loop-grid .elementor-grid > div:first-of-type:has(.elementor-element-post-card) .elementor-element-post-card {
		display: grid;
		grid-template-columns: 478px minmax(0, 1fr);
		column-gap: 56px;
		align-items: center;
	}

	.elementor-location-archive .elementor-grid > div:first-of-type:has(.elementor-element-post-card) .elementor-element-post-card .elementor-widget-image {
		grid-row: 1 / 6;
	}

	.elementor-location-archive .elementor-grid > div:first-of-type:has(.elementor-element-post-card) .elementor-element-post-card .elementor-widget-image img {
		aspect-ratio: 478 / 478;
	}

	.elementor-location-archive .elementor-grid > div:first-of-type:has(.elementor-element-post-card) .elementor-element-post-card [data-id="post-titulo"] .elementor-heading-title {
		font-family: var(--ae-font-heading), serif;
		font-weight: 500;
		font-size: 32px;
		line-height: 1.2;
		color: var(--ae-accent);
	}

	/* La fecha solo la lleva la destacada, como en el diseno. */
	.elementor-location-archive .elementor-grid > div:not(:first-of-type) .elementor-element-post-card [data-id="post-fecha"] {
		display: none;
	}
}

@media (max-width: 1024px) {
	.elementor .elementor-widget-loop-grid .elementor-grid:has(.elementor-element-post-card) {
		column-gap: 28px;
		row-gap: 44px;
	}
}

/* ===========================================================================
 * Entrada de blog  ·  plantillas 4162 (es) y 4487 (ca)
 *
 * Diseno de septiembre de 2026, Figma 527:1310 (marco de 1728 px):
 *
 * - migas pegadas al menu y alineadas con el texto de la columna;
 * - titular como el del indice del blog (Cormorant 600), desde el 23/09/2026;
 * - columna de 856 px entre dos lineas suaves (#FFF5F5, 4 px) y barra
 *   lateral de 359 px, 30 px entre ambas;
 * - la tarjeta de contacto de la barra se queda fija al hacer scroll;
 * - articulos relacionados a todo el ancho, debajo de las dos columnas;
 * - dos rosas de linea de fondo: una a la derecha, a la altura de la barra,
 *   y otra a la izquierda, al final del articulo.
 *
 * Los contenedores son v4 y se apuntan por data-id. Donde hay que ganar a una
 * clase global (ae-section, ae-container, ae-headgroup) el selector repite el
 * atributo, [data-id="x"][data-id], que suma peso sin depender de clases.
 * ======================================================================== */

.elementor [data-id="entrada-main"][data-id] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	/* ae-section trae 120 px arriba; las migas quedan a 29 px del menu,
	   como en la ficha de producto. */
	padding-block-start: 29px;
}

/* --- migas --------------------------------------------------------------- */

/* Misma receta que las migas de la ficha (ae-producto.css, ficha-crumb):
   ancho del contenedor hasta 1600 px, Jost 12 px en versalitas, color de
   texto y subrayado al pasar. */
.elementor .ae-migas {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto clamp(24px, 4vw, 64px);
	padding: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ae-body);
}

.elementor .ae-migas a {
	color: var(--ae-body);
	text-decoration: none;
	transition: color 0.3s ease;
}

.elementor .ae-migas a:hover,
.elementor .ae-migas a:focus-visible {
	color: var(--ae-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* El shortcode no deja espacios alrededor del separador; el margen hace de
   espacio, como el de la ficha. */
.elementor .ae-migas__sep {
	margin-inline: .4em;
	color: inherit;
}

/* --- cabecera ------------------------------------------------------------ */

.elementor [data-id="entrada-head"][data-id] {
	gap: 6px;
	margin-block-end: 80px;
}

/* Mismo titular que el indice del blog (blog-title), a peticion del usuario
   el 23/09/2026; antes era Abhaya Libre ExtraBold del Figma. */
.elementor [data-id="entrada-titulo"] .elementor-heading-title {
	font-family: var(--ae-font-heading), serif;
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ae-accent);
}

.elementor [data-id="entrada-bajada"] .elementor-heading-title {
	max-width: 548px;
	margin-inline: auto;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 26px;
	text-align: center;
	color: var(--ae-body);
}

/* --- las dos columnas ---------------------------------------------------- */

.elementor [data-id="entrada-row"][data-id] {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 359px;
	column-gap: 30px;
	/* stretch: la barra mide lo que el articulo, y la tarjeta tiene recorrido
	   para quedarse fija. */
	align-items: stretch;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: 0;
}

.elementor [data-id="entrada-col"][data-id] {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
	padding-block: 0;
	padding-inline: 30px 37px;
	border-inline: 4px solid #FFF5F5;
}

/* Foto destacada: 856 x 451, radio 5 y un velo blanco que aclara los bordes. */
.elementor [data-id="entrada-img"] {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}

.elementor [data-id="entrada-img"] img {
	display: block;
	width: 100%;
	aspect-ratio: 856 / 451;
	object-fit: cover;
	border-radius: 5px;
}

.elementor [data-id="entrada-img"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.42));
	pointer-events: none;
}

/* El cuerpo del articulo: lo escribe quien redacta, asi que se estila por
   etiqueta y no por clase. */
.elementor .elementor-widget-theme-post-content {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: var(--ae-body);
}

.elementor .elementor-widget-theme-post-content h2 {
	margin: 40px 0 16px;
	font-family: var(--ae-font-display), serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--ae-accent);
}

/* Los apartados numerados: negrita del mismo gris que el texto, sin aire
   debajo, porque el parrafo que explican va pegado. */
.elementor .elementor-widget-theme-post-content h3 {
	margin: 26px 0 0;
	font-family: var(--ae-font-body), sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 26px;
	color: var(--ae-body);
}

.elementor .elementor-widget-theme-post-content p {
	margin-bottom: 26px;
}

/* Un parrafo dentro de un punto de lista no suma margen. Pasa con el contenido
   importado o convertido a bloques, que deja <li><p>...</p></li>: cada punto
   heredaba 16 px arriba y 26 abajo y la lista se deshacia. */
.elementor .elementor-widget-theme-post-content li > p {
	margin: 0;
}

.elementor .elementor-widget-theme-post-content li + li {
	margin-top: 6px;
}

.elementor .elementor-widget-theme-post-content strong {
	color: var(--ae-body);
	font-weight: 700;
}

.elementor .elementor-widget-theme-post-content a {
	color: var(--ae-accent);
	text-underline-offset: 4px;
}

/* La banda de contacto dentro del articulo (Figma 537:683): foto con radio
   11 y un velo blanco que se come la mitad izquierda, caja translucida y el
   boton en el rosa de la barra lateral. */
.elementor .elementor-widget-theme-post-content .ae-cta-alianzas--banda {
	min-height: 278px;
	margin-block: 40px;
	padding: 44px 41px;
	border-radius: 11px;
	overflow: hidden;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.61) 35.6%, rgba(255, 255, 255, 0) 53.8%),
		var(--ae-cta-img);
	background-size: cover;
	background-position: center;
}

.elementor .elementor-widget-theme-post-content .ae-cta-alianzas--banda .ae-cta-alianzas__cuerpo {
	justify-content: center;
	width: 412px;
	max-width: 100%;
	min-height: 195px;
	padding: 28px;
	background: rgba(255, 255, 255, 0.62);
}

.elementor .elementor-widget-theme-post-content .ae-cta-alianzas--banda .ae-cta-alianzas__titulo {
	margin: 0;
	font-family: var(--ae-font-display), serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 0.93;
	letter-spacing: 1px;
	color: #C68F8F;
}

.elementor .elementor-widget-theme-post-content .ae-cta-alianzas__boton,
.elementor [data-id="side-cta"] .ae-cta-alianzas__boton {
	display: block;
	width: 272px;
	max-width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: 5px;
	background: #D6ABA6;
	box-shadow: 0 0 7.8px rgba(255, 255, 255, 0.46);
	font-family: var(--ae-font-body), sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	color: #fff;
	transition: background-color 250ms ease;
}

.elementor .elementor-widget-theme-post-content .ae-cta-alianzas__boton:hover,
.elementor .elementor-widget-theme-post-content .ae-cta-alianzas__boton:focus-visible,
.elementor [data-id="side-cta"] .ae-cta-alianzas__boton:hover,
.elementor [data-id="side-cta"] .ae-cta-alianzas__boton:focus-visible {
	background: #C99791;
	color: #fff;
}

/* --- barra lateral ------------------------------------------------------- */

.elementor [data-id="entrada-side"][data-id] {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: static;
	min-width: 0;
	padding: 0;
}

.elementor [data-id="side-autor"][data-id] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	max-width: 330px;
	margin-block-end: 38px;
	padding: 0 0 25px;
	border-bottom: 1px solid rgba(161, 99, 99, 0.69);
}

.elementor [data-id="side-avatar"] img {
	width: 47px;
	height: 47px;
	border-radius: 50%;
	object-fit: cover;
}

.elementor [data-id="side-autor-txt"][data-id] {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.elementor [data-id="side-autor-nombre"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ae-accent);
}

.elementor [data-id="side-autor-bio"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 26px;
	color: var(--ae-body);
}

.elementor [data-id="side-ultimas-tit"] .elementor-heading-title {
	margin-block-end: 16px;
	font-family: var(--ae-font-display), serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--ae-accent);
}

.elementor .ae-ultimas {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor .ae-ultimas__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
}

.elementor .ae-ultimas__titulo {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 26px;
	color: var(--ae-body);
	text-decoration: none;
	transition: color 300ms ease;
}

.elementor .ae-ultimas__titulo:hover {
	color: var(--ae-accent);
}

.elementor .ae-ultimas__meta {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	line-height: 26px;
	color: #A7A7A7;
}

/*
 * Tarjeta de contacto (Figma 527:1519): la foto ocupa toda la tarjeta con un
 * velo blanco en diagonal desde arriba, y encima van el logo, el titular y el
 * boton. Se queda fija bajo la cabecera, que tambien es sticky y mide 242 px.
 *
 * El encuadre de la foto es el del diseno: 148 % de ancho anclada a la derecha
 * y 156 % de alto al 65 %, que deja a la vista el estuche con el anillo.
 */
.elementor [data-id="side-cta"] {
	position: sticky;
	top: calc(var(--ae-header-h, 242px) + 24px);
	margin-block-start: 31px;
}

.elementor [data-id="side-cta"] .ae-cta-alianzas--tarjeta {
	position: relative;
	display: block;
	width: 100%;
	max-width: 325px;
	aspect-ratio: 325 / 385;
	overflow: hidden;
	border-radius: 13px;
	background: var(--ae-tint);
}

.elementor [data-id="side-cta"] .ae-cta-alianzas__foto {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background-image:
		linear-gradient(196.8deg, rgba(255, 255, 255, 0.73) 25.9%, rgba(255, 255, 255, 0) 46%),
		var(--ae-cta-img);
	background-repeat: no-repeat;
	background-size: 100% 100%, 148% 156.36%;
	background-position: 0 0, 100% 65.5%;
}

.elementor [data-id="side-cta"] .ae-cta-alianzas--tarjeta::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 19px;
	left: 14px;
	width: 104px;
	height: 32px;
	background: url("/wp-content/uploads/2026/08/aliances-experience-by-ros-joiers-logo.webp") left center / contain no-repeat;
}

.elementor [data-id="side-cta"] .ae-cta-alianzas__cuerpo {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	padding: 61px 25px 28px 28px;
	background: none;
	text-align: center;
}

.elementor [data-id="side-cta"] .ae-cta-alianzas__titulo {
	margin: 0;
	padding-inline: 22px;
	font-family: var(--ae-font-display), serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 0.93;
	letter-spacing: 1px;
	color: #A96C6C;
}

/* El diseno no lleva texto en la tarjeta: si alguien lo pasa en el shortcode,
   no se pinta aqui. */
.elementor [data-id="side-cta"] .ae-cta-alianzas__texto {
	display: none;
}

.elementor [data-id="side-cta"] .ae-cta-alianzas__boton {
	width: 100%;
	padding-block: 13.5px;
}

/* --- articulos relacionados ---------------------------------------------- */

/* Elementor fija max-width: 100% a los widgets de un contenedor con 0,3,0
   (.elementor.elementor .e-con > .elementor-widget): sin este peso las migas
   se encogian al centro y los relacionados se abrian a todo el ancho. */
.elementor.elementor [data-id="entrada-migas"][data-id] {
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
}

.elementor.elementor [data-id="rel-tit-blog"][data-id],
.elementor.elementor [data-id="rel-grid-blog"][data-id] {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
}

.elementor [data-id="rel-tit-blog"] {
	margin-block-start: 60px;
}

.elementor [data-id="rel-tit-blog"] .elementor-heading-title {
	margin-bottom: 26px;
	font-family: var(--ae-font-display), serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--ae-accent);
}

.elementor [data-id="rel-grid-blog"] .elementor-grid {
	max-width: 1278px;
}

.elementor .elementor-widget-loop-grid[data-id="rel-grid-blog"] .elementor-grid:has(.elementor-element-post-card) {
	column-gap: 55px;
	row-gap: 40px;
}

/* Tarjeta de relacionado: sin fecha ni autor, foto 389 x 250 con un velo
   blanco de arriba abajo, titular en negrita y extracto de tres lineas. */
.elementor [data-id="rel-grid-blog"] .elementor-element-post-card [data-id="post-fecha"],
.elementor [data-id="rel-grid-blog"] .elementor-element-post-card [data-id="post-autor"] {
	display: none;
}

.elementor [data-id="rel-grid-blog"] .elementor-element-post-card [data-id="post-img"] {
	position: relative;
	overflow: hidden;
	margin-block-end: 23px;
}

.elementor [data-id="rel-grid-blog"] .elementor-element-post-card [data-id="post-img"] img {
	aspect-ratio: 389 / 250;
}

.elementor [data-id="rel-grid-blog"] .elementor-element-post-card [data-id="post-img"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.32));
	pointer-events: none;
}

.elementor [data-id="rel-grid-blog"] .elementor-element-post-card [data-id="post-titulo"] .elementor-heading-title {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	color: var(--ae-body);
}

.elementor [data-id="rel-grid-blog"] .elementor-element-post-card .elementor-widget-theme-post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: var(--ae-body);
}

/* --- las rosas de fondo -------------------------------------------------- */

/*
 * Dos dibujos de linea del Figma (OBJECTS, 457 x 617) girados 26 grados: el
 * de la derecha, espejado, a la altura de la barra lateral; el de la
 * izquierda, anclado al final del articulo para que caiga siempre en el cuerpo
 * sea cual sea su largo. Van detras del contenido (isolation en la fila) y el
 * desbordamiento lateral lo recorta el body.
 */
@media (min-width: 1025px) {
	.elementor [data-id="entrada-row"][data-id]::before,
	.elementor [data-id="entrada-row"][data-id]::after {
		content: "";
		position: absolute;
		z-index: -1;
		width: 457px;
		height: 617px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	.elementor [data-id="entrada-row"][data-id]::after {
		top: 188px;
		right: -240px;
		background-image: url("/wp-content/uploads/ae-blog-flor-derecha.svg");
		transform: rotate(-26.26deg) scaleX(-1);
	}

	.elementor [data-id="entrada-row"][data-id]::before {
		bottom: 92px;
		left: -252px;
		background-image: url("/wp-content/uploads/ae-blog-flor-izquierda.svg");
		transform: rotate(26.26deg);
	}
}

/* --- tablet y movil ------------------------------------------------------ */

/* En movil la ficha deja las migas a 15 px del menu. */
@media (max-width: 767px) {
	.elementor [data-id="entrada-main"][data-id] {
		padding-block-start: 15px;
	}
}

@media (max-width: 1024px) {

	.elementor [data-id="entrada-head"][data-id] {
		margin-block-end: 44px;
	}

	.elementor [data-id="entrada-row"][data-id] {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.elementor [data-id="entrada-col"][data-id] {
		padding-inline: 0;
		border-inline: 0;
	}

	.elementor [data-id="side-cta"] {
		position: static;
	}

	.elementor .elementor-widget-theme-post-content .ae-cta-alianzas--banda {
		padding: 20px;
	}

	.elementor .elementor-widget-theme-post-content .ae-cta-alianzas--banda .ae-cta-alianzas__titulo {
		font-size: 28px;
	}

	.elementor [data-id="rel-tit-blog"] {
		margin-block-start: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * Botones dentro del contenido de la entrada
 *
 * Las entradas que vienen de PrestaShop traen los botones como
 * <a class="btn btn-default" style="background-color:#d0121a;color:#fff">,
 * a veces metidos en <span style="background-color:..."> y <strong>: salian
 * como una etiqueta roja, azul o negra. Aqui toman el boton de la web
 * (ae-btn + ae-btn-solid): acento, texto blanco, 250 x 60 y el hover rosado.
 * Los estilos en linea obligan al !important en fondo, borde y color. Vale
 * tambien para el bloque Botones de Gutenberg, asi un boton nuevo sale igual.
 * ------------------------------------------------------------------------ */

.elementor .elementor-widget-theme-post-content a.btn,
.elementor .elementor-widget-theme-post-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 250px;
	max-width: 100%;
	min-height: 60px;
	padding: 18px 32px;
	border: 1px solid var(--ae-accent) !important;
	border-radius: 0;
	background: var(--ae-accent) !important;
	box-sizing: border-box;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* Lo que va dentro del enlace (<span style="color">, <strong>) sigue al boton. */
.elementor .elementor-widget-theme-post-content a.btn *,
.elementor .elementor-widget-theme-post-content .wp-block-button__link * {
	font-weight: inherit;
	color: inherit !important;
	background: none !important;
}

.elementor .elementor-widget-theme-post-content a.btn:hover,
.elementor .elementor-widget-theme-post-content a.btn:focus-visible,
.elementor .elementor-widget-theme-post-content .wp-block-button__link:hover,
.elementor .elementor-widget-theme-post-content .wp-block-button__link:focus-visible {
	border-color: var(--ae-accent) !important;
	background: #F3DBDB !important;
	color: var(--ae-accent) !important;
}

/* Los envoltorios heredados pintaban una caja de color alrededor del boton. */
.elementor .elementor-widget-theme-post-content span[style*="background"]:has(a.btn) {
	background: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .elementor-widget-theme-post-content a.btn,
	.elementor .elementor-widget-theme-post-content .wp-block-button__link {
		transition: none;
	}
}