/* Las dos tipografías del formulario, en un solo sitio.
   Por defecto las de siempre —Sora en títulos, Inter en texto—. Si en el
   formulario se elige otra, la página las cambia aquí y se aplica a todo: un
   formulario con dos fuentes elegidas por separado casi siempre acaba
   desentonando. */
:root {
	--bbf-font-title: Sora, Inter;
	--bbf-font-text: Inter;

	/* Los colores que se pueden elegir: el panel de la izquierda y el botón.
	   Los textos que van ENCIMA no se eligen: se calculan para que se lean. Si
	   se pudiera elegir un panel claro con el texto en blanco, alguien lo
	   haría, y el formulario de su campaña sería ilegible. */
	--bbf-panel-bg: #14161f;
	--bbf-panel-ink: #fff;
	--bbf-panel-ink-soft: rgba(255, 255, 255, 0.72);
	--bbf-cta-ink: #d7f94f;
	--bbf-cta-bg: rgba(215, 249, 79, 0.12);
	--bbf-btn-bg: #14161f;
	--bbf-btn-ink: #d7f94f;
}

/**
 * Landing del formulario de captación.
 *
 * La ve alguien que acaba de pinchar tu anuncio y tiene 3 segundos para decidir
 * si rellena o se va. Autónoma: no depende del tema de WordPress.
 */

* { box-sizing: border-box; }

.bbf {
	margin: 0;
	padding: 40px 20px 60px;
	min-height: 100vh;
	background: linear-gradient(180deg, #eef1fb 0%, #e9edf9 100%);
	font-family: var(--bbf-font-text), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #14161f;
	-webkit-font-smoothing: antialiased;
}

.bbf-sheet {
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	/* Las esquinas se eligen en el formulario; sin elegir, las de siempre. */
	border-radius: var(--bbf-sheet-radius, 26px);
	box-shadow: 0 20px 60px rgba(16, 18, 27, 0.1), 0 2px 8px rgba(16, 18, 27, 0.04);
	overflow: hidden;
}

.bbf-head { padding: 40px 40px 26px; }
.bbf-logo { max-height: 40px; max-width: 180px; margin-bottom: 20px; display: block; }
.bbf-brand {
	display: block;
	margin-bottom: 18px;
	font: 600 11.5px/1 var(--bbf-font-text), sans-serif;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #8b93a7;
}
.bbf-head h1 {
	margin: 0;
	font: 700 28px/1.25 var(--bbf-font-title), var(--bbf-font-text), sans-serif;
	letter-spacing: -0.02em;
}
.bbf-intro {
	margin: 12px 0 0;
	font: 400 15px/1.65 var(--bbf-font-text), sans-serif;
	color: #5b6178;
}

.bbf-form { padding: 6px 40px 34px; }

.bbf-field { display: block; margin-bottom: 16px; }
.bbf-field span {
	display: block;
	margin-bottom: 6px;
	font: 600 11.5px/1 var(--bbf-font-text), sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #8b93a7;
}
.bbf-field input,
.bbf-field select,
.bbf-field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid #e2e5ee;
	border-radius: 13px;
	font: 500 15px/1.45 var(--bbf-font-text), sans-serif;
	color: #14161f;
	background: #fff;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	appearance: none;
	-webkit-appearance: none;
}
.bbf-field textarea { resize: vertical; min-height: 100px; }
.bbf-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}
.bbf-field input:focus,
.bbf-field select:focus,
.bbf-field textarea:focus {
	outline: none;
	border-color: #3e63f2;
	box-shadow: 0 0 0 3px rgba(62, 99, 242, 0.12);
}
.bbf-field .is-invalid,
.is-invalid { border-color: #e25c5c !important; background: rgba(226, 92, 92, 0.04); }

.bbf-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	cursor: pointer;
}
.bbf-check input {
	appearance: none;
	-webkit-appearance: none;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	border: 1.5px solid #e2e5ee;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.bbf-check input:checked {
	background: #3e63f2;
	border-color: #3e63f2;
}
.bbf-check input:checked::after {
	content: '';
	position: absolute;
	left: 5.5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.bbf-check span {
	font: 400 12.5px/1.6 var(--bbf-font-text), sans-serif;
	color: #5b6178;
}
.bbf-check a { color: #3e63f2; }

.bbf-btn {
	width: 100%;
	padding: 16px 24px;
	border: 0;
	border-radius: 14px;
	background: var(--bbf-btn-bg);
	color: var(--bbf-btn-ink);
	font: 600 15.5px/1.2 var(--bbf-font-text), sans-serif;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(16, 18, 27, 0.22);
	transition: transform 0.14s ease, box-shadow 0.16s ease, opacity 0.16s ease;
	margin-top: 6px;
}
.bbf-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(16, 18, 27, 0.28); }
.bbf-btn:disabled { opacity: 0.6; cursor: default; }

.bbf-error {
	margin: 0 0 14px;
	padding: 11px 14px;
	border-radius: 11px;
	background: rgba(226, 92, 92, 0.1);
	color: #b13c3c;
	font: 500 13px/1.5 var(--bbf-font-text), sans-serif;
}

/* Gracias */
.bbf-thanks { padding: 20px 40px 46px; text-align: center; }
.bbf-tick {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #eaf7f0;
	color: #2f9e6b;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bbf-thanks h2 { margin: 0 0 8px; font: 700 22px/1.35 var(--bbf-font-title), var(--bbf-font-text), sans-serif; }
.bbf-thanks p { margin: 0; font: 400 14.5px/1.65 var(--bbf-font-text), sans-serif; color: #5b6178; }

.bbf-foot {
	padding: 18px 40px;
	text-align: center;
	background: #14161f;
	color: rgba(255, 255, 255, 0.55);
	font: 500 12px/1.4 var(--bbf-font-text), sans-serif;
}

.bbf-404 { padding: 60px 40px; text-align: center; }
.bbf-404 h1 { font: 700 24px/1.35 var(--bbf-font-title), var(--bbf-font-text), sans-serif; margin: 0 0 10px; }
.bbf-404 p { font: 400 14px/1.65 var(--bbf-font-text), sans-serif; color: #5b6178; margin: 0; }

/* Móvil: donde se va a abrir el 70% de los anuncios */
@media (max-width: 560px) {
	.bbf { padding: 14px 12px 40px; }
	.bbf-sheet { border-radius: var(--bbf-sheet-radius, 20px); }
	.bbf-head { padding: 28px 22px 18px; }
	.bbf-head h1 { font-size: 23px; }
	.bbf-form, .bbf-thanks, .bbf-foot { padding-left: 22px; padding-right: 22px; }
}

/* Logotipo: cuadrado 1:1, cantos redondos, sin deformar. */
.bbf-logo-mark {
	display: block;
	width: 68px;
	height: 68px;
	margin-bottom: 18px;
	border-radius: 18px;
	object-fit: cover;
	background: #fff;
	border: 1px solid #eceef5;
	box-shadow: 0 4px 14px rgba(16, 18, 27, 0.08);
}

/* Página de privacidad */
.bbf-legal .bbf-head { padding-bottom: 12px; }
.bbf-legal h1 { font-size: 24px; }
.bbf-legal-body {
	padding: 8px 40px 34px;
	font: 400 14.5px/1.75 var(--bbf-font-text), sans-serif;
	color: #5b6178;
}
.bbf-legal-body h2 {
	margin: 28px 0 10px;
	font: 600 16px/1.4 var(--bbf-font-title), var(--bbf-font-text), sans-serif;
	color: #14161f;
}
.bbf-legal-body h3 { margin: 22px 0 8px; font: 600 14px/1.4 var(--bbf-font-text), sans-serif; color: #14161f; }
.bbf-legal-body ul, .bbf-legal-body ol { padding-left: 20px; }
.bbf-legal-body a { color: #3e63f2; }
.bbf-legal-body hr { border: 0; border-top: 1px solid #eceef5; margin: 28px 0 20px; }
.bbf-legal-who { font-size: 13px; line-height: 1.7; color: #8b93a7; }

@media (max-width: 560px) {
	.bbf-legal-body { padding-left: 22px; padding-right: 22px; }
	.bbf-logo-mark { width: 56px; height: 56px; border-radius: 15px; }
}

/* =====================================================================
   PLANTILLA «SPLIT»: lo que convence a la izquierda, el formulario a la
   derecha. Cada pieza se pinta solo si la has puesto: sin galería, sin
   párrafo o sin CTA, la columna se ajusta sola y sigue quedando bien.
   ===================================================================== */
.bbf-split .bbf-sheet {
	max-width: 1020px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
}

.bbf-hero {
	padding: 46px 42px;
	background: var(--bbf-panel-bg);
	color: var(--bbf-panel-ink);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.bbf-hero .bbf-logo-mark {
	margin-bottom: 4px;
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.bbf-hero h1 {
	margin: 0;
	font: 700 32px/1.2 var(--bbf-font-title), var(--bbf-font-text), sans-serif;
	letter-spacing: -0.025em;
	color: var(--bbf-panel-ink);
}
.bbf-hero-text {
	font: 400 15px/1.7 var(--bbf-font-text), sans-serif;
	color: var(--bbf-panel-ink-soft);
}
.bbf-hero-text p { margin: 0 0 10px; }
.bbf-hero-text p:last-child { margin-bottom: 0; }

/* Galería: hasta 4 imágenes, centradas y en cuadrícula.
   Con 1 imagen ocupa el ancho; con 2, media; con 3-4, dos filas. */
.bbf-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.bbf-gallery[data-count="1"] { grid-template-columns: 1fr; }
.bbf-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: block;
}
.bbf-gallery[data-count="1"] img { aspect-ratio: 16 / 9; }

.bbf-cta {
	margin: 0;
	padding: 14px 16px;
	border-radius: 13px;
	background: var(--bbf-cta-bg);
	border-left: 3px solid var(--bbf-cta-ink);
	font: 500 14px/1.6 var(--bbf-font-text), sans-serif;
	color: var(--bbf-cta-ink);
}

.bbf-split .bbf-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
}
.bbf-split .bbf-head { padding: 40px 40px 20px; }
.bbf-panel-title {
	margin: 0;
	font: 700 22px/1.3 var(--bbf-font-title), var(--bbf-font-text), sans-serif;
	letter-spacing: -0.015em;
	color: #14161f;
}
.bbf-split .bbf-foot { border-radius: 0; }

/* Tablet y móvil: las columnas se apilan. Primero lo que convence. */
@media (max-width: 900px) {
	.bbf-split .bbf-sheet { grid-template-columns: 1fr; max-width: 560px; }
	.bbf-hero { padding: 34px 26px; gap: 16px; }
	.bbf-hero h1 { font-size: 26px; }
	.bbf-gallery img { aspect-ratio: 1 / 1; }
	.bbf-split .bbf-head { padding: 30px 26px 16px; }
	.bbf-split .bbf-form { padding-left: 26px; padding-right: 26px; }
}

@media (max-width: 560px) {
	.bbf-hero { padding: 28px 22px; }
	.bbf-hero h1 { font-size: 23px; }
	.bbf-gallery { gap: 8px; }
}

/* =====================================================================
   EMBEBIDO (iframe): sin fondo ni sombras, para fundirse con la web de
   destino. La página de fuera pone el marco, no nosotros.
   ===================================================================== */
.bbf-embed {
	padding: 0;
	background: transparent;
	min-height: 0;
	/* Sin barra propia: la altura la pone la página de fuera con lo que le
	   dice el formulario. Si durante un instante va por detrás, mejor que el
	   borde se recorte un fotograma a que aparezca y desaparezca una barra. */
	overflow: hidden;
}
.bbf-embed .bbf-sheet {
	max-width: 100%;
	/* Incrustado, recto salvo que se elija otra cosa: así se comportaba y así
	   sigue para quien no toque nada. */
	border-radius: var(--bbf-sheet-radius, 0);
	box-shadow: none;
	background: transparent;
}
.bbf-embed .bbf-head { padding-top: 22px; }
.bbf-embed .bbf-foot { display: none; }

/* El señuelo. Invisible para las personas, visible para los bots.
   NO se usa display:none: los bots buenos lo detectan. Se saca de la pantalla. */
.bbf-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.bbf-turnstile { margin-bottom: 16px; }

/* El campo del logotipo, si aparece dentro de la columna oscura, va sobre
   blanco: sobre negro no se leía. */
.bbf-hero .bbcrm-company-logo-field,
.bbf-hero .bbcrm-field-wide {
	background: #fff;
	color: #14161f;
	padding: 14px;
	border-radius: 14px;
}
.bbf-hero .bbcrm-company-logo-field * ,
.bbf-hero .bbcrm-field-wide * { color: #14161f; }

/* Botón de descarga en la página de gracias.

   Mismo lenguaje que el botón de enviar —negro con lima, que es la firma de
   esta pantalla— porque en ese momento ES la acción principal: la persona ya
   ha dejado su correo y lo único que queda es que se lleve lo que vino a
   buscar. */
.bbf-download {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	padding: 15px 26px;
	border-radius: 14px;
	background: #14161f;
	color: #d7f94f;
	font: 600 15px/1.2 var(--bbf-font-text), sans-serif;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(16, 18, 27, 0.22);
	transition: transform 0.14s ease, box-shadow 0.16s ease;
}
.bbf-download:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(16, 18, 27, 0.28);
}
.bbf-download svg { flex-shrink: 0; }

/* En móvil ocupa todo el ancho, como el botón de enviar: a 390 px un botón
   centrado y estrecho se pulsa peor. */
@media (max-width: 480px) {
	.bbf-download { display: flex; width: 100%; justify-content: center; }
}