/*
	Theme Name: ListingPro Child — TheBestIn
	Theme URI: https://thebestin.net
	Description: Child theme de ListingPro para thebestin.net. Contiene el design system dark + magenta y overrides de templates.
	Author: TheBestIn
	Author URI: https://thebestin.net
	Template: listingpro
	Version: 1.0.0
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: listingpro-child
	Tags: directory, listing, dark-theme
*/

/* ============================================================
   DESIGN SYSTEM — TheBestIn (Dark + Magenta)
   ============================================================
   Un acento dominante: magenta #FF2D95.
   Base dark casi-negra con hint de azul profundo.
   Textos neutros con alto contraste, muted para secundario.
   Glows sutiles en CTAs, sin carnaval.
   ============================================================ */

:root {
	/* Backgrounds */
	--tb-bg-base:       #0A0A0F;
	--tb-bg-elevated:   #13131A;
	--tb-bg-surface:    #1A1A24;
	--tb-bg-glass:      rgba(255, 255, 255, 0.04);
	--tb-bg-overlay:    rgba(10, 10, 15, 0.85);

	/* Borders */
	--tb-border-subtle: rgba(255, 255, 255, 0.06);
	--tb-border:        rgba(255, 255, 255, 0.10);
	--tb-border-strong: rgba(255, 255, 255, 0.18);

	/* Text */
	--tb-text-primary:  #F5F5F7;
	--tb-text-body:     #D1D5DB;
	--tb-text-muted:    #9CA3AF;
	--tb-text-dim:      #6B7280;

	/* Accent — magenta, un solo tono dominante */
	--tb-accent:        #FF2D95;
	--tb-accent-hover:  #FF4DA5;
	--tb-accent-strong: #E6217E;
	--tb-accent-glow:   rgba(255, 45, 149, 0.35);
	--tb-accent-soft:   rgba(255, 45, 149, 0.10);

	/* Estados (solo uso funcional, no decorativo) */
	--tb-success:       #10B981;
	--tb-warning:       #F59E0B;
	--tb-danger:        #EF4444;

	/* Radios */
	--tb-radius-sm:     6px;
	--tb-radius:        10px;
	--tb-radius-lg:     16px;
	--tb-radius-xl:     24px;
	--tb-radius-full:   9999px;

	/* Elevacion / shadows */
	--tb-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
	--tb-shadow:        0 4px 12px rgba(0, 0, 0, 0.4);
	--tb-shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.55);
	--tb-shadow-glow:   0 0 24px var(--tb-accent-glow);

	/* Transiciones */
	--tb-transition:    200ms cubic-bezier(0.4, 0, 0.2, 1);
	--tb-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   BASE — canvas global dark
   El body y #page son el "lienzo" debajo de todas las secciones.
   Pintarlos de dark elimina los gaps blancos entre secciones que
   no tienen fondo explicito. Las secciones con bg propio (cards,
   widgets Elementor) siguen respetando su color.
   ============================================================ */

html,
body,
#page,
#page.clearfix.mm-page,
#page.mm-slideout {
	background-color: var(--tb-bg-base) !important;
}

body {
	color: var(--tb-text-body);
}

/* ============================================================
   MMENU MOBILE — menu lateral offcanvas dark + magenta
   Target: #menu (plugin Mmenu). Incluye el navbar top con logo,
   los listitems, los botones de submenu y el overlay blocker.
   ============================================================ */

#menu.mm-menu,
#menu .mm-panels,
#menu .mm-panel {
	background: var(--tb-bg-base) !important;
	color: var(--tb-text-body) !important;
}

#menu.mm-menu {
	border-right: 1px solid var(--tb-border-subtle);
}

/* NAVBAR TOP con el logo — reemplaza el verde default del tema */
#menu .mm-navbars_top,
#menu .mm-navbar,
#menu .mm-navbar_size-3 {
	background: var(--tb-bg-elevated) !important;
	border-bottom: 1px solid var(--tb-border-subtle) !important;
	color: var(--tb-text-primary) !important;
	position: relative;
}

/* Glow magenta sutil en el borde inferior del navbar top */
#menu .mm-navbars_top::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 72%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--tb-accent) 50%,
		transparent 100%
	);
	opacity: 0.6;
	pointer-events: none;
	z-index: 2;
}

/* Logo del top con glow magenta */
#menu .mm-navbar .userimage img,
#menu .mm-navbar img.icon {
	filter: drop-shadow(0 0 16px var(--tb-accent-glow));
}

/* Ocultar Sign In / lpl-button del menu mobile — no hay flujo de
   usuario activo todavia */
#menu .lpl-button,
#menu a.md-trigger,
#menu .lpl-button.md-trigger,
#menu .md-trigger {
	display: none !important;
}

/* Panels (submenus) — mismo bg que el menu principal */
#menu .mm-panel {
	background: var(--tb-bg-base) !important;
}

/* Fix: Mmenu reserva 150px en el top porque el DOM tiene la clase
   mm-menu_navbar_top-3 (3 navbars reservadas) pero solo tenemos UNA
   navbar visible de 80px. Forzamos el offset del panels al alto real. */
#menu.mm-menu.mm-menu_navbar_top-3 .mm-panels,
#menu .mm-panels {
	top: 80px !important;
}

/* Quitar margin y padding extra del listview principal (mobile-menu
   trae margin:20px + padding:15px del tema que ahora sobran) */
#menu .mm-listview.mobile-menu,
#menu ul.mm-listview {
	margin: 0 !important;
	padding: 0 !important;
}

/* Panel navbar (titulo del submenu cuando entras a "Bares", etc.) */
#menu .mm-panel .mm-navbar {
	background: var(--tb-bg-elevated) !important;
	border-bottom: 1px solid var(--tb-border-subtle) !important;
}

#menu .mm-navbar__title,
#menu .mm-navbar .mm-navbar__title {
	color: var(--tb-text-primary) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

/* LISTITEMS — texto y bordes */
#menu .mm-listitem {
	color: var(--tb-text-body) !important;
}

#menu .mm-listitem:after,
#menu .mm-listview > .mm-listitem:after {
	border-color: var(--tb-border-subtle) !important;
	left: 24px !important;
	right: 24px !important;
}

#menu .mm-listitem__text,
#menu .mm-listitem > a,
#menu .mm-listitem > span {
	color: var(--tb-text-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	padding-left: 24px !important;
	transition: color var(--tb-transition), background var(--tb-transition);
}

#menu .mm-listitem > a:hover,
#menu .mm-listitem > a:focus,
#menu .mm-listitem > a:active,
#menu .mm-listitem__text:hover,
#menu .mm-listitem__text:focus {
	color: var(--tb-accent) !important;
	background: var(--tb-accent-soft) !important;
}

/* Subrayado magenta en hover del listitem */
#menu .mm-listitem:hover {
	background: var(--tb-bg-glass);
}

/* Botones siguiente/anterior (flechitas ">") — color magenta */
#menu .mm-btn,
#menu .mm-btn_next,
#menu .mm-btn_prev {
	color: var(--tb-accent) !important;
}

#menu .mm-btn_next:after,
#menu .mm-btn_prev:before {
	border-color: var(--tb-accent) !important;
	border-width: 2px !important;
	opacity: 0.85;
	transition: opacity var(--tb-transition), transform var(--tb-transition);
}

#menu .mm-listitem:hover .mm-btn_next:after {
	opacity: 1;
	transform: translateX(2px) rotate(-45deg);
}

/* Counter (numero de items dentro de un submenu) */
#menu .mm-counter {
	color: var(--tb-text-muted) !important;
	font-size: 12px !important;
	background: var(--tb-bg-glass) !important;
	border: 1px solid var(--tb-border-subtle) !important;
	border-radius: var(--tb-radius-full) !important;
	padding: 2px 10px !important;
}

/* Scrollbar interno — fino y sutil */
#menu .mm-panels,
#menu .mm-panel {
	scrollbar-width: thin;
	scrollbar-color: var(--tb-border) transparent;
}

#menu .mm-panels::-webkit-scrollbar,
#menu .mm-panel::-webkit-scrollbar {
	width: 6px;
}

#menu .mm-panels::-webkit-scrollbar-thumb,
#menu .mm-panel::-webkit-scrollbar-thumb {
	background: var(--tb-border);
	border-radius: var(--tb-radius-full);
}

/* BLOCKER — el overlay oscuro detras del menu cuando esta abierto */
.mm-wrapper__blocker,
.mm-page__blocker,
#mm-blocker {
	background: var(--tb-bg-overlay) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

/* ============================================================
   HIDDEN ELEMENTS — widgets default de ListingPro que no usamos
   ============================================================ */

/* Filtro de categorias default del hero (widget ListingPro pre-armado)
   — el hero custom del mu-plugin lo reemplaza */
.home-categories-area,
.home-categories-area .lp-home-categoires,
.lp-home-banner-contianer .home-categories-area {
	display: none !important;
}

/* Fix click fantasma: .lp-home-banner-contianer es un div hermano del
   #thebestin-ken-burns (ambos hijos de .header-container). Su contenido
   esta todo en display:none (page-header-overlay, lp-home-banner-contianer-inner)
   pero el div mismo tiene width x height ocupando todo el hero y captura
   los clicks antes de que lleguen al boton .hero-cta-btn del hero custom.
   Desactivamos pointer-events en el contenedor entero (no tiene contenido
   visible) asi los clicks pasan al sibling. */
.lp-home-banner-contianer,
.lp-home-banner-contianer::before,
.lp-home-banner-contianer::after {
	pointer-events: none !important;
}

/* Reactivar pointer-events en descendientes si alguno se muestra en el
   futuro (por ahora todos estan display:none, pero por si acaso) */
.lp-home-banner-contianer > * {
	pointer-events: auto;
}

/* ============================================================
   ELEMENTOR SECTION SPACING — reducir paddings gigantes
   El layout Elementor del home tiene wrappers con paddings
   verticales exagerados (150px + 96px en algunos) que crean
   gaps visuales enormes entre secciones. Compactamos todo al
   design system.
   ============================================================ */

/* Wrapper del grid de destinos */
.elementor-element-64ad416a > .e-con-inner {
	padding-top: 48px !important;
	padding-bottom: 40px !important;
}

/* Wrapper del testimonios (parent section) */
.elementor-element-224aa98 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.elementor-element-224aa98 > .e-con-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Section wrapper vacio despues de counters (era el promo box viejo) */
.elementor-element-93c512e {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Mobile — reducir aun mas los paddings del wrapper del grid destinos */
@media (max-width: 991px) {
	.elementor-element-64ad416a > .e-con-inner {
		padding-top: 32px !important;
		padding-bottom: 24px !important;
	}
}

/* Sign In del header — sin flujo de usuario activo */
.lp-join-now,
.lp-join-now .md-trigger,
header .lp-join-now,
.lp-menu-bar .lp-join-now {
	display: none !important;
}

/* ============================================================
   FOOTER — rediseno dark + magenta
   Target: template "footer 10" de ListingPro (.footer10-bottom-area)
   Se usa especificidad alta (footer.footer-style10 ...) y !important
   en las propiedades criticas para ganarle al main.css del padre.
   ============================================================ */

footer.footer-style10,
footer.footer-style10 .footer10-bottom-area,
.footer10-bottom-area,
.footer10-bottom-area.lp-footer-bootom-border {
	background-color: var(--tb-bg-base) !important;
	color: var(--tb-text-body) !important;
	border-top: 1px solid var(--tb-border-subtle);
	position: relative;
}

footer.footer-style10 .footer10-bottom-area,
.footer10-bottom-area.lp-footer-bootom-border {
	padding-top: 72px !important;
	padding-bottom: 40px !important;
}

/* Glow magenta sutil en el borde superior — marca de agua de la marca */
footer.footer-style10 .footer10-bottom-area::before,
.footer10-bottom-area::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: min(720px, 80%);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--tb-accent) 50%,
		transparent 100%
	);
	opacity: 0.7;
	pointer-events: none;
}

/* Texto base del footer */
footer.footer-style10,
footer.footer-style10 p,
footer.footer-style10 span,
footer.footer-style10 li,
.footer10-bottom-area p,
.footer10-bottom-area li,
.footer10-bottom-area span {
	color: var(--tb-text-body) !important;
	line-height: 1.75;
	border-color: transparent !important;
}

/* Links */
footer.footer-style10 a,
.footer10-bottom-area a {
	color: var(--tb-text-muted) !important;
	text-decoration: none !important;
	transition: color var(--tb-transition);
}

footer.footer-style10 a:hover,
footer.footer-style10 a:focus,
.footer10-bottom-area a:hover,
.footer10-bottom-area a:focus {
	color: var(--tb-accent) !important;
}

/* Headings / widget titles — uppercase con subrayado magenta */
footer.footer-style10 h1,
footer.footer-style10 h2,
footer.footer-style10 h3,
footer.footer-style10 h4,
footer.footer-style10 h5,
footer.footer-style10 h6,
footer.footer-style10 .widget-title,
footer.footer-style10 .widgettitle,
.footer10-bottom-area h1,
.footer10-bottom-area h2,
.footer10-bottom-area h3,
.footer10-bottom-area h4,
.footer10-bottom-area h5,
.footer10-bottom-area h6,
.footer10-bottom-area .widget-title,
.footer10-bottom-area .widgettitle {
	color: var(--tb-text-primary) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 18px;
	position: relative;
	padding-bottom: 12px;
}

footer.footer-style10 h1::after,
footer.footer-style10 h2::after,
footer.footer-style10 h3::after,
footer.footer-style10 h4::after,
footer.footer-style10 h5::after,
footer.footer-style10 h6::after,
footer.footer-style10 .widget-title::after,
footer.footer-style10 .widgettitle::after,
.footer10-bottom-area h1::after,
.footer10-bottom-area h2::after,
.footer10-bottom-area h3::after,
.footer10-bottom-area h4::after,
.footer10-bottom-area h5::after,
.footer10-bottom-area h6::after,
.footer10-bottom-area .widget-title::after,
.footer10-bottom-area .widgettitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 32px;
	height: 2px;
	background: var(--tb-accent);
	border-radius: var(--tb-radius-full);
}

/* Logo del footer: quitar la caja negra, dejarlo respirar con glow */
footer.footer-style10 img[src*="logo"],
.footer10-bottom-area img[src*="logo"] {
	max-width: 140px;
	height: auto;
	background: transparent !important;
	filter: drop-shadow(0 0 24px var(--tb-accent-glow));
	transition: filter var(--tb-transition);
}

footer.footer-style10 img[src*="logo"]:hover,
.footer10-bottom-area img[src*="logo"]:hover {
	filter: drop-shadow(0 0 36px var(--tb-accent-glow)) brightness(1.1);
}

/* Fade sutil del parrafo largo (heredado del mu-plugin) actualizado a
   usar la variable de fondo para coherencia visual con el dark. */
footer.footer-style10 .padding-top-60 p,
.footer10-bottom-area .padding-top-60 p {
	max-height: 180px;
	overflow: hidden;
	position: relative;
}

footer.footer-style10 .padding-top-60 p::after,
.footer10-bottom-area .padding-top-60 p::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: linear-gradient(transparent, var(--tb-bg-base));
	pointer-events: none;
}

/* ============================================================
   CTA SECTION — "Descubri lo mejor que Argentina tiene para ofrecer"
   Target: #thebestin-cta (inyectado por el mu-plugin antes del footer)
   ============================================================ */

#thebestin-cta {
	background: var(--tb-bg-base);
	padding: 72px 0 88px;
	overflow: hidden;
	position: relative;
}

/* Glow radial difuso detras de la imagen — reemplaza los cuadrados verde/rojo */
#thebestin-cta::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -8%;
	width: 680px;
	height: 680px;
	transform: translateY(-50%);
	background: radial-gradient(
		circle at center,
		var(--tb-accent-glow) 0%,
		rgba(255, 45, 149, 0.08) 35%,
		transparent 65%
	);
	filter: blur(60px);
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}

/* Separador superior muy sutil del CTA */
#thebestin-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(880px, 70%);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--tb-border) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 1;
}

#thebestin-cta .thebestin-cta-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	gap: 88px;
	position: relative;
	z-index: 2;
}

#thebestin-cta .thebestin-cta-content {
	flex: 1 1 55%;
}

#thebestin-cta .thebestin-cta-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tb-accent);
	margin-bottom: 20px;
	padding: 8px 16px;
	background: var(--tb-accent-soft);
	border: 1px solid rgba(255, 45, 149, 0.25);
	border-radius: var(--tb-radius-full);
}

#thebestin-cta .thebestin-cta-title {
	font-size: 46px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--tb-text-primary);
	margin: 0 0 24px;
}

#thebestin-cta .thebestin-cta-desc {
	font-size: 17px;
	line-height: 1.75;
	color: var(--tb-text-body);
	margin: 0 0 40px;
	max-width: 520px;
}

#thebestin-cta .thebestin-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tb-accent);
	color: #fff !important;
	padding: 18px 44px;
	border-radius: var(--tb-radius-full);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all var(--tb-transition);
	box-shadow:
		0 6px 24px var(--tb-accent-glow),
		0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	border: none;
	position: relative;
}

#thebestin-cta .thebestin-cta-btn:hover,
#thebestin-cta .thebestin-cta-btn:focus {
	background: var(--tb-accent-hover);
	transform: translateY(-2px);
	box-shadow:
		0 12px 40px var(--tb-accent-glow),
		0 0 0 4px var(--tb-accent-soft),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	color: #fff !important;
	text-decoration: none !important;
}

#thebestin-cta .thebestin-cta-visual {
	flex: 1 1 45%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 360px;
}

#thebestin-cta .thebestin-cta-img-wrap {
	position: relative;
	z-index: 2;
}

#thebestin-cta .thebestin-cta-img-wrap::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--tb-radius-lg);
	padding: 1px;
	background: linear-gradient(
		135deg,
		var(--tb-accent) 0%,
		transparent 40%,
		transparent 60%,
		rgba(255, 45, 149, 0.4) 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

#thebestin-cta .thebestin-cta-img-wrap img {
	display: block;
	width: 100%;
	max-width: 500px;
	height: 380px;
	object-fit: cover;
	border-radius: var(--tb-radius-lg);
	box-shadow:
		0 24px 64px rgba(0, 0, 0, 0.6),
		0 0 0 1px var(--tb-border);
}

/* Ocultar los cuadrados verde y rojo viejos — el glow del ::before los reemplaza */
#thebestin-cta .thebestin-cta-shape-1,
#thebestin-cta .thebestin-cta-shape-2 {
	display: none !important;
}

@media (max-width: 991px) {
	#thebestin-cta {
		padding: 48px 0 56px;
	}

	#thebestin-cta::before {
		width: 420px;
		height: 420px;
		right: -20%;
	}

	#thebestin-cta .thebestin-cta-inner {
		flex-direction: column;
		text-align: center;
		gap: 48px;
		padding: 0 24px;
	}

	#thebestin-cta .thebestin-cta-title {
		font-size: 32px;
	}

	#thebestin-cta .thebestin-cta-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	#thebestin-cta .thebestin-cta-visual {
		max-width: 360px;
		width: 100%;
		margin: 0 auto;
		min-height: 280px;
	}

	#thebestin-cta .thebestin-cta-img-wrap img {
		height: 280px;
		max-width: 360px;
	}
}

/* ============================================================
   TESTIMONIALS — cards glassmorphism dark + magenta
   Target: section Elementor id c23c787 (grid de 4 testimonios con
   widget eael-fancy-text rotando frases). La seccion vivia en el
   mu-plugin con fondo light #f7f8fa — ahora dark con glow ambient
   magenta detras.
   ============================================================ */

.elementor-element-c23c787 {
	background: var(--tb-bg-base) !important;
	padding: 64px 0 !important;
	position: relative;
	overflow: hidden;
}

/* Glow ambient radial detras de la seccion */
.elementor-element-c23c787::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 500px;
	background: radial-gradient(
		ellipse at center,
		var(--tb-accent-glow) 0%,
		rgba(255, 45, 149, 0.06) 40%,
		transparent 70%
	);
	filter: blur(80px);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

/* Elevar el contenido encima del glow */
.elementor-element-c23c787 > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* CARDS — glassmorphism con border sutil */
.elementor-element-c23c787 > .e-con-inner > .e-con {
	background: var(--tb-bg-glass) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
	backdrop-filter: blur(24px) saturate(1.2) !important;
	border: 1px solid var(--tb-border) !important;
	border-radius: var(--tb-radius-lg) !important;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		0 0 0 1px var(--tb-border-subtle) inset !important;
	padding: 40px 28px 32px !important;
	text-align: center !important;
	transition:
		transform var(--tb-transition),
		border-color var(--tb-transition),
		box-shadow var(--tb-transition) !important;
	position: relative;
}

.elementor-element-c23c787 > .e-con-inner > .e-con:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 45, 149, 0.35) !important;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.55),
		0 0 48px var(--tb-accent-glow),
		0 0 0 1px rgba(255, 45, 149, 0.18) inset !important;
}

/* ICONO DE COMILLAS */
.elementor-element-c23c787 .elementor-icon-wrapper {
	display: flex !important;
	justify-content: center !important;
	margin-bottom: 24px !important;
}

.elementor-element-c23c787 .elementor-icon {
	width: 56px !important;
	height: 56px !important;
	background: var(--tb-accent-soft) !important;
	border: 1px solid rgba(255, 45, 149, 0.25) !important;
	border-radius: var(--tb-radius) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 0 28px var(--tb-accent-glow);
	transition: transform var(--tb-transition);
}

.elementor-element-c23c787 > .e-con-inner > .e-con:hover .elementor-icon {
	transform: scale(1.08);
}

.elementor-element-c23c787 .elementor-icon svg {
	fill: var(--tb-accent) !important;
	color: var(--tb-accent) !important;
	width: 22px !important;
	height: 22px !important;
}

/* TEXTO DEL TESTIMONIO (fancy-text) */
.elementor-element-c23c787 .eael-fancy-text-container,
.elementor-element-c23c787 .eael-fancy-text-strings,
.elementor-element-c23c787 .eael-fancy-text-prefix {
	color: var(--tb-text-body) !important;
	font-size: 15px !important;
	font-style: italic !important;
	line-height: 1.75 !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	display: block !important;
}

.elementor-element-c23c787 .eael-fancy-text-container {
	min-height: 88px;
}

@media (max-width: 991px) {
	.elementor-element-c23c787 .eael-fancy-text-container {
		min-height: auto !important;
	}
}

/* AVATAR — circular con ring magenta */
.elementor-element-c23c787 .elementor-widget-image {
	margin: 24px 0 16px !important;
}

.elementor-element-c23c787 .elementor-widget-image img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid var(--tb-border) !important;
	box-shadow:
		0 0 0 4px var(--tb-accent-soft),
		0 6px 24px var(--tb-accent-glow) !important;
	transition: transform var(--tb-transition);
}

.elementor-element-c23c787 > .e-con-inner > .e-con:hover .elementor-widget-image img {
	transform: scale(1.05);
}

.elementor-element-c23c787 .elementor-image {
	display: flex !important;
	justify-content: center !important;
}

/* NOMBRE DEL CLIENTE */
.elementor-element-c23c787 .elementor-widget-heading h2,
.elementor-element-c23c787 .elementor-widget-heading h3,
.elementor-element-c23c787 .elementor-widget-heading h4 {
	color: var(--tb-text-primary) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	margin: 0 !important;
	font-style: normal !important;
}

@media (max-width: 991px) {
	.elementor-element-224aa98 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor-element-c23c787 {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		padding: 48px 16px !important;
		box-sizing: border-box !important;
	}

	.elementor-element-c23c787::before {
		width: 100%;
		height: 400px;
	}

	/* Gap entre las cards de testimonios en mobile (antes quedaban pegadas) */
	.elementor-element-c23c787 > .e-con-inner {
		gap: 16px !important;
	}

	.elementor-element-c23c787 > .e-con-inner > .e-con {
		padding: 26px 20px 22px !important;
	}

	/* Reducir tamano de avatar en mobile */
	.elementor-element-c23c787 .elementor-widget-image img {
		width: 52px !important;
		height: 52px !important;
	}

	/* Icono de comilla mas chico en mobile */
	.elementor-element-c23c787 .elementor-icon {
		width: 48px !important;
		height: 48px !important;
	}

	.elementor-element-c23c787 .elementor-icon svg {
		width: 18px !important;
		height: 18px !important;
	}
}

/* ============================================================
   METRICS / COUNTERS — seccion de metricas premium dark
   Target: section Elementor id ad2e3c7 (grid 4 counters con
   iconos + numeros + labels). Pasa del azul marino #1a1a2e del
   mu-plugin al dark coherente del design system.
   ============================================================ */

.elementor-element-ad2e3c7 {
	background: var(--tb-bg-base) !important;
	padding: 56px 0 !important;
	position: relative;
}

/* Accent lines sutiles en top y bottom del section — separador elegante */
.elementor-element-ad2e3c7::before,
.elementor-element-ad2e3c7::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: min(720px, 60%);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--tb-border) 50%,
		transparent 100%
	);
	pointer-events: none;
}

.elementor-element-ad2e3c7::before {
	top: 0;
}

.elementor-element-ad2e3c7::after {
	bottom: 0;
}

/* CARDS — glassmorphism coherente con los testimonios */
.elementor-element-ad2e3c7 > .e-con-inner > .e-con {
	background: var(--tb-bg-glass) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
	backdrop-filter: blur(20px) saturate(1.2) !important;
	border: 1px solid var(--tb-border) !important;
	border-radius: var(--tb-radius-lg) !important;
	padding: 36px 24px 32px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	grid-template-rows: none !important;
	transition:
		background var(--tb-transition),
		border-color var(--tb-transition),
		transform var(--tb-transition),
		box-shadow var(--tb-transition) !important;
}

.elementor-element-ad2e3c7 > .e-con-inner > .e-con:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 45, 149, 0.3) !important;
	transform: translateY(-4px);
	box-shadow:
		0 20px 48px rgba(0, 0, 0, 0.5),
		0 0 36px var(--tb-accent-glow) !important;
}

/* ICONOS — pill magenta soft con halo */
.elementor-element-ad2e3c7 .elementor-icon-wrapper {
	display: flex !important;
	justify-content: center !important;
	margin-bottom: 20px !important;
}

.elementor-element-ad2e3c7 .elementor-icon {
	width: 60px !important;
	height: 60px !important;
	background: var(--tb-accent-soft) !important;
	border: 1px solid rgba(255, 45, 149, 0.25) !important;
	border-radius: var(--tb-radius) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 0 28px var(--tb-accent-glow);
	transition: transform var(--tb-transition);
}

.elementor-element-ad2e3c7 > .e-con-inner > .e-con:hover .elementor-icon {
	transform: scale(1.08);
}

.elementor-element-ad2e3c7 .elementor-icon i,
.elementor-element-ad2e3c7 .elementor-icon svg {
	color: var(--tb-accent) !important;
	fill: var(--tb-accent) !important;
	font-size: 24px !important;
}

/* NUMEROS — blanco grande con + en magenta */
.elementor-element-ad2e3c7 .elementor-counter-number-wrapper {
	display: flex !important;
	justify-content: center !important;
	align-items: baseline !important;
	gap: 2px !important;
	margin-bottom: 8px !important;
}

.elementor-element-ad2e3c7 .elementor-counter-number {
	color: var(--tb-text-primary) !important;
	font-size: 48px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
}

.elementor-element-ad2e3c7 .elementor-counter-number-prefix,
.elementor-element-ad2e3c7 .elementor-counter-number-suffix {
	color: var(--tb-accent) !important;
	font-size: 36px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	text-shadow: 0 0 20px var(--tb-accent-glow);
}

/* LABELS — uppercase muted con spacing */
.elementor-element-ad2e3c7 .elementor-counter-title {
	color: var(--tb-text-muted) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	margin-bottom: 0 !important;
}

/* Ocultar fancy text roto debajo de cada contador */
.elementor-element-ad2e3c7 .elementor-widget-eael-fancy-text {
	display: none !important;
}

@media (max-width: 991px) {
	.elementor-element-ad2e3c7 {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		padding: 40px 16px !important;
		box-sizing: border-box !important;
	}

	.elementor-element-ad2e3c7 > .e-con-inner {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}

	.elementor-element-ad2e3c7 > .e-con-inner > .e-con {
		padding: 28px 16px 24px !important;
	}

	.elementor-element-ad2e3c7 > .e-con-inner > .e-con > .elementor-element {
		align-self: center !important;
		width: 100% !important;
		text-align: center !important;
	}

	.elementor-element-ad2e3c7 .elementor-counter-number {
		font-size: 34px !important;
	}

	.elementor-element-ad2e3c7 .elementor-counter-number-prefix,
	.elementor-element-ad2e3c7 .elementor-counter-number-suffix {
		font-size: 26px !important;
	}

	.elementor-element-ad2e3c7 .elementor-counter-title {
		font-size: 11px !important;
		letter-spacing: 0.12em !important;
	}

	.elementor-element-ad2e3c7 .elementor-icon {
		width: 52px !important;
		height: 52px !important;
	}

	.elementor-element-ad2e3c7 .elementor-icon i,
	.elementor-element-ad2e3c7 .elementor-icon svg {
		font-size: 20px !important;
	}
}