/* ==========================================================================
   Boozdiseñas - Panel de Cliente
   Diseño PÚBLICO por defecto de los bloques promocionales (shortcode
   [bpc_promo]). Archivo del sitio público, no del panel de administración
   (ver assets/css/panel.css para eso) — se carga en el front-end completo
   (igual que noticias-carrusel.css) porque Elementor guarda el contenido de
   sus widgets de Shortcode en un meta interno que has_shortcode() no puede
   inspeccionar de forma confiable.

   IMPORTANTE: estas mismas clases se reutilizan tal cual dentro de la vista
   previa en vivo del editor del panel (templates/promo-editor.php), así que
   este archivo también se carga ahí (ver templates/partials/header.php).
   Cualquier cambio aquí se refleja automáticamente tanto en el sitio público
   como en la vista previa — son el mismo diseño, no hay que mantener dos
   copias sincronizadas a mano.
   ========================================================================== */

.bpc-promo-galeria-seccion {
	width: 100%;
	/* v1.13.1: bajado de 1200px a 960px — Irvin pidió que el CONTENIDO de
	   ambos bloques promocionales (este y .bpc-promo-valores__contenedor,
	   ver más abajo) se viera más compacto, con más aire alrededor,
	   tomando como referencia de tamaño otra sección ya maquetada a mano
	   en su sitio ("Cómo funciona", 4 pasos numerados) — no es que el
	   contenido deba copiar ese diseño, solo su proporción de ancho
	   respecto a la pantalla. El fondo/sección de Elementor que envuelve
	   el shortcode sigue siendo tan ancho como Irvin lo configure ahí; lo
	   que se angostó es únicamente este contenedor interno. */
	max-width: 960px;
	margin: 0 auto;
}

.bpc-promo-galeria-seccion__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 28px;
}
.bpc-promo-galeria-seccion__titulo {
	margin: 0 0 8px;
	font-size: clamp( 1.4rem, 1.1rem + 1.2vw, 2rem );
	font-weight: 700;
	line-height: 1.25;
}
.bpc-promo-galeria-seccion__subtitulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.72;
}

.bpc-promo-galeria {
	--bpc-pg-radius: 16px;
	--bpc-pg-gap: 14px;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	/* Límite fijo (no "auto"): así las filas nunca se estiran para llenar
	   el alto del contenedor que le dé el theme/Elementor a su alrededor
	   (un problema real de CSS Grid: si el padre tiene más alto del que
	   ocupa el contenido, "auto" puede repartir ese sobrante entre las
	   filas y las casillas se ven infladas/"estiradas"). align-content:
	   start es la segunda barrera para el mismo problema: le dice a la
	   cuadrícula que no reparta espacio extra entre filas bajo ninguna
	   circunstancia. */
	grid-auto-rows: minmax( 160px, 240px );
	align-content: start;
	gap: var( --bpc-pg-gap );
	width: 100%;
}

.bpc-promo-galeria__item {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	border-radius: var( --bpc-pg-radius );
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 1px 2px rgba( 20, 16, 50, 0 );
	transition: box-shadow 0.35s ease;
}
.bpc-promo-galeria__item:hover {
	box-shadow: 0 14px 30px rgba( 20, 16, 50, 0.22 );
}

/* La foto (o el degradado de respaldo) vive en su PROPIO elemento,
   separado de .bpc-promo-galeria__item, para poder animarla al pasar el
   cursor sin mover ni recortar el recuadro que la contiene: el item se
   queda quieto (overflow:hidden lo recorta), la imagen de adentro es la
   que crece un poco. Así la cuadrícula nunca se desarma con el hover. */
.bpc-promo-galeria__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #E7E8F2;
	transform: scale( 1 );
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}
.bpc-promo-galeria__item:hover .bpc-promo-galeria__img {
	transform: scale( 1.08 );
}
@media ( prefers-reduced-motion: reduce ) {
	.bpc-promo-galeria__img,
	.bpc-promo-galeria__item { transition: none; }
}

/* Orden de las 6 casillas tal como las devuelve BPC_CPT::promo_bloques():
   destacado, item-2, item-3, item-4, item-5, item-6. La destacada ocupa
   la primera columna y dos filas de alto; el resto arma una parrilla de
   2x2 a su derecha, y la sexta casilla queda sola debajo de la destacada. */
.bpc-promo-galeria__item--destacado { grid-column: 1; grid-row: 1 / span 2; }
.bpc-promo-galeria__item:nth-child( 2 ) { grid-column: 2; grid-row: 1; }
.bpc-promo-galeria__item:nth-child( 3 ) { grid-column: 3; grid-row: 1; }
.bpc-promo-galeria__item:nth-child( 4 ) { grid-column: 2; grid-row: 2; }
.bpc-promo-galeria__item:nth-child( 5 ) { grid-column: 3; grid-row: 2; }
.bpc-promo-galeria__item:nth-child( 6 ) { grid-column: 1; grid-row: 3; }

.bpc-promo-galeria__caption {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 16px 16px 14px;
	background: linear-gradient( to top, rgba( 10, 8, 30, 0.78 ), rgba( 10, 8, 30, 0 ) 70% );
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
}
.bpc-promo-galeria__item--destacado .bpc-promo-galeria__caption {
	padding: 22px 22px 20px;
	font-size: 1.05rem;
}

@media ( max-width: 760px ) {
	.bpc-promo-galeria {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.bpc-promo-galeria__item,
	.bpc-promo-galeria__item--destacado,
	.bpc-promo-galeria__item:nth-child( 2 ),
	.bpc-promo-galeria__item:nth-child( 3 ),
	.bpc-promo-galeria__item:nth-child( 4 ),
	.bpc-promo-galeria__item:nth-child( 5 ),
	.bpc-promo-galeria__item:nth-child( 6 ) {
		grid-column: 1;
		grid-row: auto;
		min-height: 220px;
	}
}

/* ---------- Bloques tipo "simple" (una imagen + un texto) ---------- */
.bpc-promo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 720px;
}
.bpc-promo img {
	width: 100%;
	border-radius: 16px;
	display: block;
}
.bpc-promo__texto {
	font-size: 1rem;
	line-height: 1.6;
	color: inherit;
}
.bpc-promo__texto p { margin: 0 0 12px; }
.bpc-promo__texto p:last-child { margin-bottom: 0; }

/* ---------- Bloques tipo "valores" (etiqueta + título/subtítulo +
   tarjetas con ícono, ej. "Por qué elegirnos") ---------- */

/* 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 (mismo patrón que whatsapp-cta.css/cta-whatsapp.css). */
.bpc-promo-valores-seccion .bpc-icon { width: 20px; height: 20px; flex-shrink: 0; }
.bpc-promo-valores-seccion .bpc-icon--sm { width: 16px; height: 16px; }
.bpc-promo-valores-seccion .bpc-icon--lg { width: 26px; height: 26px; }

.bpc-promo-valores-seccion {
	position: relative;
	width: 100%;
	/* El FONDO de color ocupa todo el ancho que le dé el contenedor de
	   Elementor (pedido explícito del cliente, v1.12.1) — incluso si
	   Irvin pone la sección de Elementor en "ancho completo"
	   (edge-to-edge del navegador). El CONTENIDO (título, tarjetas) NO
	   sigue ese mismo ancho: vive adentro de .bpc-promo-valores__contenedor,
	   que sí tiene un límite de ancho "convencional" y queda centrado —
	   así el fondo puede ser tan ancho como se quiera sin que el
	   texto/las tarjetas terminen estirados de punta a punta de la
	   pantalla (v1.12.2). Ver .bpc-promo-galeria-seccion (mismo
	   max-width) — mismo ancho "de contenido" para los dos bloques
	   promocionales, por consistencia entre ellos. Bajado de 1200px a
	   960px en v1.13.1 (pedido explícito de Irvin: contenido más
	   compacto, con más aire a los lados — ver el comentario en
	   .bpc-promo-galeria-seccion para el detalle completo).
	   overflow:hidden (v1.12.3): antes NO se recortaba a propósito para
	   que la imagen decorativa sobresaliera del borde como un adorno —
	   ahora que la imagen es parte del fondo (ver
	   .bpc-promo-valores__imagen-decorativa más abajo) puede recortarse
	   sin problema a las esquinas redondeadas.
	   Los 3 colores (fondo/letras/acento) los elige el cliente desde el
	   panel — llegan como variables CSS inline en el propio elemento
	   (style="--bpc-valores-fondo:...", ver BPC_CPT::shortcode_promo()),
	   con el color de fábrica como respaldo si por algo faltara. */
	overflow: hidden;
	padding: 56px 40px;
	border-radius: 24px;
	background: linear-gradient( 135deg, var( --bpc-valores-fondo, #211E52 ), color-mix( in srgb, var( --bpc-valores-fondo, #211E52 ) 100%, black 30% ) );
	color: var( --bpc-valores-texto, #fff );
	font-family: inherit;
}
.bpc-promo-valores-seccion *,
.bpc-promo-valores-seccion *::before,
.bpc-promo-valores-seccion *::after {
	box-sizing: border-box;
}

/* Imagen decorativa: se ve como parte del fondo (semitransparente,
   detrás del texto), no como una insignia flotando encima — al
   contrario del megáfono de [bpc_whatsapp_cta], que sí es un adorno
   que sobresale. Un PNG con transparencia funciona mejor aquí (la
   parte transparente deja ver el degradado de fondo).
   Cubre el 100% del fondo (v1.12.4, corrección sobre v1.12.3: la
   primera versión la dejaba encajonada en el 55% derecho con
   object-fit:contain — se veía como una franja a la derecha en vez de
   cubrir toda la sección; el cliente lo confirmó viéndolo en su sitio
   en vivo con una foto real). object-fit:cover + inset:0 hace que la
   imagen llene TODA la sección (no solo un lado), recortando lo que
   sobre en vez de dejar franjas vacías. */
.bpc-promo-valores__imagen-decorativa {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.16;
	z-index: 0;
	pointer-events: none;
}

.bpc-promo-valores__contenedor {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.bpc-promo-valores__header {
	position: relative;
	max-width: 640px;
	margin: 0 0 36px;
}
.bpc-promo-valores__etiqueta {
	display: inline-block;
	padding: 6px 16px;
	border: 1px dashed color-mix( in srgb, var( --bpc-valores-texto, #fff ) 40%, transparent );
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.bpc-promo-valores__titulo {
	margin: 0 0 12px;
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.4rem );
	font-weight: 800;
	line-height: 1.2;
}
.bpc-promo-valores__subtitulo {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	opacity: 0.72;
}

.bpc-promo-valores__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 18px;
}
.bpc-promo-valores__tarjeta {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 16px;
	padding: 26px 22px;
	transition: transform 0.35s ease, background 0.35s ease;
}
.bpc-promo-valores__tarjeta:hover {
	transform: translateY( -4px );
	background: rgba( 255, 255, 255, 0.08 );
}
.bpc-promo-valores__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient( 135deg, var( --bpc-valores-acento, #E3A530 ), color-mix( in srgb, var( --bpc-valores-acento, #E3A530 ) 100%, black 25% ) );
	color: #17153A;
	margin-bottom: 16px;
}
.bpc-promo-valores__icono .bpc-icon { width: 22px; height: 22px; }
.bpc-promo-valores__tarjeta-titulo {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	/* Sin color propio: hereda de .bpc-promo-valores-seccion (color:
	   var(--bpc-valores-texto)), así el color de letras elegido por el
	   cliente se aplica en todo el bloque desde un solo lugar. */
}
.bpc-promo-valores__tarjeta-texto {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	opacity: 0.72;
}

@media ( prefers-reduced-motion: reduce ) {
	.bpc-promo-valores__tarjeta { transition: none; }
}

@media ( max-width: 760px ) {
	.bpc-promo-valores-seccion { padding: 44px 24px; }
	.bpc-promo-valores__grid { grid-template-columns: 1fr; }
	/* La imagen ya cubre el 100% del fondo desde v1.12.4 (no solo un
	   lado) — en móvil, con menos aire alrededor del texto, se baja un
	   poco más la opacidad para que el texto siga leyéndose cómodo. */
	.bpc-promo-valores__imagen-decorativa { opacity: 0.1; }
}

/* ---------- Bloques tipo "servicios" (ej. "Nuestros Servicios") ----------
   v1.16.0. A diferencia de 'valores' (fondo de color, tarjetas oscuras),
   este bloque es deliberadamente claro y sin degradados — mismo lenguaje
   "limpio, moderno y minimalista" que ya se usó en la cabecera (v1.14.1) y
   el carrusel de testimonios (v1.15.0): sombra casi imperceptible en vez
   de bordes/sombras marcadas, un solo acento de color por tarjeta (el
   cuadro del ícono, no toda la tarjeta). Sin colores personalizables ni
   imagen decorativa a propósito, para mantener el editor simple — si
   Irvin pide poder cambiarlos más adelante, se agregan igual que en
   'valores'. */
.bpc-promo-servicios-seccion .bpc-icon { width: 20px; height: 20px; flex-shrink: 0; }
.bpc-promo-servicios-seccion .bpc-icon--sm { width: 16px; height: 16px; }
.bpc-promo-servicios-seccion .bpc-icon--lg { width: 24px; height: 24px; }

.bpc-promo-servicios-seccion {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}
.bpc-promo-servicios-seccion *,
.bpc-promo-servicios-seccion *::before,
.bpc-promo-servicios-seccion *::after {
	box-sizing: border-box;
}

.bpc-promo-servicios__header {
	max-width: 640px;
	margin: 0 auto 44px;
	text-align: center;
}
.bpc-promo-servicios__titulo {
	margin: 0 0 12px;
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.4rem );
	font-weight: 800;
	line-height: 1.2;
}
.bpc-promo-servicios__subtitulo {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: inherit;
	opacity: 0.66;
}

.bpc-promo-servicios__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}
.bpc-promo-servicios__tarjeta {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba( 15, 23, 42, 0.07 );
	border-radius: 20px;
	padding: 30px 26px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 8px 24px rgba( 15, 23, 42, 0.05 );
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.4s ease, border-color 0.3s ease;
	/* --bpc-servicio-acento llega inline por tarjeta (mismo tono que el
	   ícono, ver BPC_CPT::shortcode_promo() / paleta_servicios_iconos()) —
	   así el efecto de cursor usa el color propio de cada tarjeta en vez
	   de un acento genérico igual para las seis. */
}
.bpc-promo-servicios__tarjeta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var( --bpc-servicio-acento, #6366F1 );
	transform: translateX( -50% );
	transition: width 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.bpc-promo-servicios__tarjeta:hover {
	transform: translateY( -6px );
	border-color: rgba( 15, 23, 42, 0.1 );
	box-shadow:
		0 18px 34px -14px color-mix( in srgb, var( --bpc-servicio-acento, #6366F1 ) 55%, transparent ),
		0 4px 10px rgba( 15, 23, 42, 0.06 );
}
.bpc-promo-servicios__tarjeta:hover::before {
	width: 56px;
}
.bpc-promo-servicios__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	margin-bottom: 18px;
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
	/* El fondo/color de cada ícono llegan inline por tarjeta (ver
	   BPC_CPT::shortcode_promo() / paleta_servicios_iconos()) — se
	   reparten en orden, no los elige el cliente uno por uno. */
}
.bpc-promo-servicios__tarjeta:hover .bpc-promo-servicios__icono {
	transform: scale( 1.08 ) rotate( -4deg );
}
.bpc-promo-servicios__tarjeta-titulo {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
}
.bpc-promo-servicios__tarjeta-texto {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: inherit;
	opacity: 0.66;
}

@media ( prefers-reduced-motion: reduce ) {
	.bpc-promo-servicios__tarjeta,
	.bpc-promo-servicios__tarjeta::before,
	.bpc-promo-servicios__icono { transition: none; }
	.bpc-promo-servicios__tarjeta:hover { transform: none; }
	.bpc-promo-servicios__tarjeta:hover .bpc-promo-servicios__icono { transform: none; }
}

@media ( max-width: 900px ) {
	.bpc-promo-servicios__grid { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 560px ) {
	.bpc-promo-servicios__grid { grid-template-columns: 1fr; }
}

/* ---------- Bloque tipo "historia" (Nuestra Historia) ----------
   v1.18.0. Título + un párrafo largo + 2 "puntos destacados" fijos a un
   lado, una foto real (no decorativa, la sube el cliente igual que un
   bloque 'simple') al otro — Irvin mandó una captura de referencia de
   este mismo layout (dos columnas, foto grande a la derecha) para contar
   la historia detrás de la marca con una foto suya o de su equipo. Fondo
   claro, sin degradados ni tarjeta propia — mismo criterio "limpio y
   minimalista" que 'servicios', el acento de color es el único toque de
   marca (mismo ámbar #E3A530 que ya usa 'valores' para sus cuadros de
   ícono, así el bloque se siente de la misma familia visual). */
.bpc-promo-historia-seccion .bpc-icon { width: 24px; height: 24px; flex-shrink: 0; }
.bpc-promo-historia-seccion .bpc-icon--lg { width: 32px; height: 32px; }

.bpc-promo-historia-seccion {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}
.bpc-promo-historia-seccion *,
.bpc-promo-historia-seccion *::before,
.bpc-promo-historia-seccion *::after {
	box-sizing: border-box;
}

.bpc-promo-historia__grid {
	display: grid;
	grid-template-columns: 1fr 0.92fr;
	align-items: center;
	gap: 56px;
}

.bpc-promo-historia__titulo {
	margin: 0 0 18px;
	font-size: clamp( 1.8rem, 1.3rem + 2vw, 2.6rem );
	font-weight: 800;
	line-height: 1.18;
	color: inherit;
}

.bpc-promo-historia__parrafo {
	color: inherit;
}
.bpc-promo-historia__parrafo p {
	margin: 0 0 1em;
	font-size: 1.02rem;
	line-height: 1.7;
	opacity: 0.75;
}
.bpc-promo-historia__parrafo p:last-child { margin-bottom: 0; }

.bpc-promo-historia__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid color-mix( in srgb, currentColor 12%, transparent );
}
.bpc-promo-historia__punto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 120px;
}
.bpc-promo-historia__punto-titulo {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	color: var( --bpc-historia-acento, #E3A530 );
}
.bpc-promo-historia__punto-texto {
	font-size: 0.88rem;
	line-height: 1.4;
	color: inherit;
	opacity: 0.62;
}

.bpc-promo-historia__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	overflow: hidden;
	background: color-mix( in srgb, currentColor 6%, transparent );
}
.bpc-promo-historia__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Solo se ve en el panel: si el cliente todavía no ha subido su foto, un
   marcador de posición discreto en vez de dejar el hueco totalmente en
   blanco — en el sitio público, .bpc-promo-historia__media directamente
   no se imprime si no hay imagen_url (ver BPC_CPT::shortcode_promo()). */
.bpc-promo-historia__media-vacio {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed color-mix( in srgb, currentColor 25%, transparent );
	border-radius: 24px;
	opacity: 0.35;
}

@media ( max-width: 760px ) {
	.bpc-promo-historia__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.bpc-promo-historia__media { aspect-ratio: 16 / 11; order: -1; }
	.bpc-promo-historia__puntos { gap: 28px; }
}

/* ---------- Bloque tipo "contacto" (Formulario de Contacto) ----------
   v1.17.0. Mismo lenguaje "limpio, moderno y minimalista" que 'servicios':
   tarjeta blanca, sombra casi imperceptible, un solo acento de color
   (#6366F1, mismo tono de respaldo que ya usa 'servicios' en su hover —
   así los bloques nuevos se sienten de la misma familia visual que los
   que ya existían) en vez de bordes o degradados marcados. */
.bpc-promo-contacto-seccion .bpc-icon { width: 20px; height: 20px; flex-shrink: 0; }
.bpc-promo-contacto-seccion .bpc-icon--lg { width: 30px; height: 30px; }

.bpc-promo-contacto-seccion {
	--bpc-contacto-acento: #6366F1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}
.bpc-promo-contacto-seccion *,
.bpc-promo-contacto-seccion *::before,
.bpc-promo-contacto-seccion *::after {
	box-sizing: border-box;
}

.bpc-promo-contacto__header {
	text-align: center;
	margin: 0 0 28px;
}
.bpc-promo-contacto__titulo {
	margin: 0 0 10px;
	font-size: clamp( 1.4rem, 1.1rem + 1.2vw, 2rem );
	font-weight: 800;
	line-height: 1.25;
}
.bpc-promo-contacto__subtitulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.7;
}

.bpc-promo-contacto__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
	border: 1px solid rgba( 15, 23, 42, 0.07 );
	border-radius: 22px;
	padding: 32px 30px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 10px 28px rgba( 15, 23, 42, 0.06 );
}
/* assets/js/contacto-form.js hace form.hidden = true al enviar con éxito
   (para dar paso a .bpc-promo-contacto__confirmacion) — sin esto, el
   "display: flex" de arriba le gana en especificidad al
   [hidden] { display:none } por defecto del navegador y el formulario se
   queda visible encima del mensaje de confirmación (mismo patrón ya
   usado en panel.css para .bpc-modal-overlay/.bpc-icon-picker__panel). */
.bpc-promo-contacto__form[hidden] { display: none; }

/* Trampa anti-bots: fuera de pantalla en vez de display:none — algunos
   bots sí saltan campos con display:none, pocos revisan la posición. */
.bpc-promo-contacto__trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

.bpc-promo-contacto__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bpc-promo-contacto__fila--simple { grid-template-columns: 1fr; }

.bpc-promo-contacto__campo { display: flex; flex-direction: column; gap: 7px; font-size: 0.88rem; }
.bpc-promo-contacto__campo > span { font-weight: 600; }
.bpc-promo-contacto__campo input,
.bpc-promo-contacto__campo textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba( 15, 23, 42, 0.14 );
	border-radius: 12px;
	font-size: 0.95rem;
	font-family: inherit;
	color: inherit;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bpc-promo-contacto__campo textarea { resize: vertical; min-height: 110px; }
.bpc-promo-contacto__campo input:focus,
.bpc-promo-contacto__campo textarea:focus {
	outline: none;
	border-color: var( --bpc-contacto-acento );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --bpc-contacto-acento ) 18%, transparent );
}
.bpc-promo-contacto__campo--full { grid-column: 1 / -1; }

.bpc-promo-contacto__error {
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #FDECEC;
	color: #B4232A;
	font-size: 0.85rem;
	font-weight: 600;
}

.bpc-promo-contacto__enviar {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border: none;
	border-radius: 999px;
	background: var( --bpc-contacto-acento );
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier( 0.22, 1, 0.36, 1 ), background 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 10px 24px -10px var( --bpc-contacto-acento );
}
.bpc-promo-contacto__enviar:hover:not( :disabled ) {
	transform: translateY( -2px );
	background: color-mix( in srgb, var( --bpc-contacto-acento ) 100%, black 12% );
}
.bpc-promo-contacto__enviar:disabled { opacity: 0.6; cursor: default; transform: none; }

.bpc-promo-contacto__confirmacion {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	background: #fff;
	border: 1px solid rgba( 15, 23, 42, 0.07 );
	border-radius: 22px;
	padding: 44px 30px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 10px 28px rgba( 15, 23, 42, 0.06 );
	color: var( --bpc-contacto-acento );
}
.bpc-promo-contacto__confirmacion[hidden] { display: none; }
.bpc-promo-contacto__confirmacion p {
	margin: 0;
	color: #191A2B;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.5;
}

@media ( prefers-reduced-motion: reduce ) {
	.bpc-promo-contacto__enviar { transition: none; }
}

@media ( max-width: 560px ) {
	.bpc-promo-contacto__fila { grid-template-columns: 1fr; }
	.bpc-promo-contacto__form { padding: 26px 22px; }
}

/* ---------- Bloque tipo "carrusel" (Carrusel de Productos) ----------
   v1.17.0. Marquee infinito en CSS puro (sin JS público): la lista se
   dibuja DOS veces seguidas (ver BPC_CPT::shortcode_promo()) y la
   animación mueve el track de -50% a 0% — como la segunda copia empieza
   exactamente donde la primera termina, el "salto" al reiniciar el bucle
   es invisible. Se mueve hacia la DERECHA (pedido explícito de Irvin):
   -50% -> 0% arrastra el contenido hacia la derecha, no hacia la
   izquierda (el sentido contrario del marquee "de toda la vida"). */
.bpc-promo-carrusel-seccion .bpc-icon { width: 16px; height: 16px; flex-shrink: 0; }

.bpc-promo-carrusel-seccion {
	width: 100%;
	font-family: inherit;
	box-sizing: border-box;
}
.bpc-promo-carrusel-seccion *,
.bpc-promo-carrusel-seccion *::before,
.bpc-promo-carrusel-seccion *::after {
	box-sizing: border-box;
}

.bpc-promo-carrusel__header {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}
.bpc-promo-carrusel__titulo {
	margin: 0 0 10px;
	font-size: clamp( 1.4rem, 1.1rem + 1.2vw, 2rem );
	font-weight: 800;
	line-height: 1.25;
}
.bpc-promo-carrusel__subtitulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.7;
}

.bpc-promo-carrusel__viewport {
	overflow: hidden;
	width: 100%;
	/* overflow:hidden recorta en el borde de la caja de padding, no en el
	   borde del contenido — por eso el padding de abajo (y un poco arriba,
	   para que quede parejo) le da aire a la sombra de .bpc-promo-carrusel__item
	   sin ese padding, la sombra se cortaba en seco justo debajo de los
	   chips (reportado por Irvin, v1.17.2). Se compensa con un margen
	   negativo para que el bloque no "baje" visualmente más de la cuenta. */
	padding: 6px 0 18px;
	margin: -6px 0 -18px;
	/* Los bordes se desvanecen en vez de cortar los chips a la mitad —
	   detalle "moderno" estándar en este tipo de carrusel continuo. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent );
}
.bpc-promo-carrusel__track {
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	animation: bpc-promo-carrusel-marquee var( --bpc-carrusel-duracion, 28s ) linear infinite;
}
/* En pausa al pasar el cursor — así se puede leer un nombre sin que se
   siga moviendo, sin necesidad de flechas ni botones. */
.bpc-promo-carrusel-seccion:hover .bpc-promo-carrusel__track,
.bpc-promo-carrusel-seccion:focus-within .bpc-promo-carrusel__track {
	animation-play-state: paused;
}
@keyframes bpc-promo-carrusel-marquee {
	from { transform: translateX( -50% ); }
	to   { transform: translateX( 0% ); }
}

.bpc-promo-carrusel__item {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px 12px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba( 15, 23, 42, 0.08 );
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 6px 16px rgba( 15, 23, 42, 0.05 );
	white-space: nowrap;
}
.bpc-promo-carrusel__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}
.bpc-promo-carrusel__texto {
	font-size: 0.92rem;
	font-weight: 600;
	color: inherit;
}

@media ( prefers-reduced-motion: reduce ) {
	/* Sin animación: se muestra una sola pasada de chips, envuelta en
	   varias líneas en vez de un riel que nunca se mueve (que se vería
	   como una fila cortada a la mitad, ya que el track mide el DOBLE del
	   ancho visible a propósito para el bucle). */
	.bpc-promo-carrusel__viewport { -webkit-mask-image: none; mask-image: none; }
	.bpc-promo-carrusel__track {
		animation: none;
		transform: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bpc-promo-carrusel__item[ aria-hidden="true" ] { display: none; }
}