/* ==========================================================================
   Boozdiseñas - Panel de Cliente
   CTA de WhatsApp (shortcode [bpc_whatsapp_cta]) — sección grande con
   degradado, invitando a escribir por WhatsApp. Archivo del sitio PÚBLICO
   (no del panel), se carga sin condición igual que el resto de CSS
   público del plugin (header-footer-publico.css, promo-galeria.css,
   noticias-carrusel.css) porque Elementor no permite detectar de forma
   confiable si un widget de Shortcode está en la página.

   El número/mensaje de WhatsApp del botón se arman en PHP a partir de
   BPC_Settings::whatsapp_url() (class-bpc-header-footer.php) — el mismo
   ajuste que el cliente cambia en el panel, en Header y Footer. Si no hay
   número configurado todavía, el shortcode no imprime nada (no se llega a
   cargar este CSS en vano en ese caso, pero el archivo igual se enqueue
   siempre por lo dicho arriba sobre Elementor).
   ========================================================================== */

.bpc-pub-whatsapp-cta {
	--bpc-wa-verde: #25D366;
	--bpc-wa-verde-hover: #20BA56;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	background: linear-gradient( 135deg, #ff6b6b 0%, #ff4757 100% );
	padding: 80px 20px;
	text-align: center;
	border-radius: 32px;
	color: #ffffff;
	position: relative;
	/* Sin overflow:hidden aquí a propósito: así el megáfono 3D (que se
	   sobrepone arriba, ver .bpc-pub-whatsapp-cta__megaphone) puede
	   sobresalir del recuadro. Lo que sí debe quedar recortado son las
	   formas de fondo — por eso viven en su propio contenedor
	   (.bpc-pub-whatsapp-cta__bg-shapes) que es el que lleva
	   overflow:hidden, no esta sección. */
	max-width: 1000px;
	margin: 80px auto 40px;
	box-shadow: 0 20px 40px rgba( 255, 71, 87, 0.15 );
}
.bpc-pub-whatsapp-cta *,
.bpc-pub-whatsapp-cta *::before,
.bpc-pub-whatsapp-cta *::after {
	box-sizing: border-box;
}

/* Tamaño base de los íconos (bpc_icon()) — panel.css (donde normalmente
   viven estas reglas) solo se carga en el panel de administración, nunca
   en el sitio público, así que cada CSS público que use bpc_icon() las
   repite. */
.bpc-icon { width: 20px; height: 20px; flex-shrink: 0; }
.bpc-icon--sm { width: 16px; height: 16px; }
.bpc-icon--lg { width: 26px; height: 26px; }

/* Formas decorativas de fondo, para darle profundidad. Van en su propio
   contenedor absoluto que recorta (overflow:hidden) para no salirse de
   las esquinas redondeadas — la sección misma ya no puede recortar
   porque el megáfono 3D necesita salirse de ella. */
.bpc-pub-whatsapp-cta__bg-shapes {
	position: absolute;
	inset: 0;
	border-radius: 32px;
	overflow: hidden;
	z-index: 1;
}
.bpc-pub-whatsapp-cta__shape {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient( 135deg, rgba( 255, 255, 255, 0.1 ), rgba( 255, 255, 255, 0 ) );
}
.bpc-pub-whatsapp-cta__shape--1 { width: 300px; height: 300px; top: -100px; left: -100px; }
.bpc-pub-whatsapp-cta__shape--2 { width: 200px; height: 200px; bottom: -50px; right: -50px; }

/* Imagen 3D flotando, sobresaliendo del borde superior derecho. */
.bpc-pub-whatsapp-cta__megaphone {
	position: absolute;
	top: -70px;
	right: 40px;
	width: 180px;
	z-index: 5;
	/* drop-shadow (no box-shadow) porque sigue la silueta real del PNG
	   transparente, no un rectángulo. */
	filter: drop-shadow( 0 20px 20px rgba( 0, 0, 0, 0.25 ) );
	animation: bpc-wa-float 4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes bpc-wa-float {
	0% { transform: translateY( 0 ) rotate( 0deg ); }
	50% { transform: translateY( -12px ) rotate( 3deg ); }
	100% { transform: translateY( 0 ) rotate( 0deg ); }
}

.bpc-pub-whatsapp-cta__content {
	position: relative;
	z-index: 2;
}
.bpc-pub-whatsapp-cta__title {
	font-size: clamp( 1.5rem, 4vw, 2.25rem );
	font-weight: 800;
	margin: 0 0 16px;
	letter-spacing: -0.03em;
	line-height: 1.2;
}
.bpc-pub-whatsapp-cta__text {
	font-size: 1.15rem;
	font-weight: 400;
	opacity: 0.9;
	margin: 0 0 35px;
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}
.bpc-pub-whatsapp-cta__button {
	display: inline-flex;
	align-items: center;
	background: var( --bpc-wa-verde );
	color: #ffffff;
	padding: 16px 36px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.1rem;
	transition: transform 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), box-shadow 0.4s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), background 0.4s ease;
	box-shadow: 0 10px 24px rgba( 37, 211, 102, 0.3 );
	animation: bpc-wa-pulse 2.5s infinite;
}
.bpc-pub-whatsapp-cta__button:hover {
	transform: translateY( -4px ) scale( 1.03 );
	box-shadow: 0 15px 32px rgba( 37, 211, 102, 0.4 );
	background: var( --bpc-wa-verde-hover );
}
.bpc-pub-whatsapp-cta__button .bpc-icon {
	margin-right: 12px;
	width: 24px;
	height: 24px;
}

@keyframes bpc-wa-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 37, 211, 102, 0.5 ); }
	70% { box-shadow: 0 0 0 15px rgba( 37, 211, 102, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 37, 211, 102, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bpc-pub-whatsapp-cta__button,
	.bpc-pub-whatsapp-cta__megaphone { animation: none; }
}

@media ( max-width: 768px ) {
	.bpc-pub-whatsapp-cta__megaphone {
		width: 130px;
		top: -50px;
		right: 10px;
	}
}

@media ( max-width: 480px ) {
	.bpc-pub-whatsapp-cta {
		padding: 60px 20px;
		margin: 60px 15px 20px;
		border-radius: 24px;
	}
	.bpc-pub-whatsapp-cta__megaphone {
		width: 100px;
		top: -40px;
		right: -5px;
	}
	.bpc-pub-whatsapp-cta__button {
		padding: 14px 28px;
		font-size: 1rem;
	}
}