/**
 * Tarjeta regalo (Elementor / landing): evita que flexbox encoja el ancho en móvil y tablet.
 *
 * Página con varias secciones (ej. 3): NO hace falta un padre común para toda la página.
 * Solo actúa sobre la sección donde la tarjeta y los iconos van en FILA:
 *
 * 1) Abre Estructura (navegador) y localiza el contenedor cuyos hijos directos son
 *    «iconos / columna flotante» y «tarjeta» (o dos columnas en una fila).
 *    Ese elemento (contenedor interno o la propia sección) → Clases CSS: platea-gc-tarjeta-hero
 *    Las otras secciones no llevan esta clase.
 *
 * 2) Widget o contenedor de la tarjeta azul → platea-gc-tarjeta-visual
 */

.platea-gc-tarjeta-visual,
.elementor-element.platea-gc-tarjeta-visual {
	box-sizing: border-box;
	width: 100%;
	max-width: min(100%, 480px);
	margin-left: auto;
	margin-right: auto;
}

.platea-gc-tarjeta-visual .elementor-widget-container {
	width: 100%;
	max-width: 100%;
}

/* No permitir que un vecino en flex reduzca la tarjeta a una franja estrecha */
@media (max-width: 1024px) {
	.elementor .elementor-element.platea-gc-tarjeta-visual {
		flex: 1 1 100% !important;
		flex-shrink: 0 !important;
		max-width: min(100%, 480px) !important;
		width: 100% !important;
		min-width: min(100%, 260px);
		align-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Centrar el HTML interno (widget Código / HTML) dentro del ancho del widget */
	.elementor .elementor-element.platea-gc-tarjeta-visual .elementor-widget-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-inline: clamp(12px, 4vw, 24px);
		box-sizing: border-box;
	}

	.elementor .elementor-element.platea-gc-tarjeta-visual .elementor-widget-container > * {
		max-width: 100%;
	}

	/* Contenedor Flex de Elementor (tarjeta + iconos en fila): pasar a columna y centrar en el eje horizontal */
	.elementor .elementor-element.platea-gc-tarjeta-hero > .e-con-inner,
	.elementor .elementor-element.platea-gc-tarjeta-hero .e-con-inner {
		flex-direction: column !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}

	/* Secciones clásicas (columnas en fila) */
	.elementor-section.platea-gc-tarjeta-hero > .elementor-container,
	.elementor .elementor-element.platea-gc-tarjeta-hero > .elementor-container {
		flex-direction: column !important;
		align-items: center !important;
	}

	/* Misma sección: fila interior .elementor-row (dos columnas) */
	.elementor-section.platea-gc-tarjeta-hero .elementor-row,
	.elementor .elementor-element.platea-gc-tarjeta-hero .elementor-row {
		flex-direction: column !important;
		align-items: center !important;
	}

	.elementor .elementor-element.platea-gc-tarjeta-hero .platea-gc-tarjeta-visual {
		order: -1;
	}
}