/* Rediseño premium JB (nov-2026) · FOOTER.
   Marcado: site/diseno/footer.html, dentro de la plantilla footer de Elementor Pro «Footer premium JB (nov-2026)»
   (widget HTML). Todo va bajo .jbf, así que esta hoja no afecta a nada más aunque se cargue en todo el sitio.
   Variables: las de tokens.css (--jb-*), con valor de reserva por si tokens.css no estuviera cargada.
   Sin JavaScript: en móvil, Tienda/Ayuda/Legal son <details> cerrados (acordeón nativo); en escritorio se
   muestran abiertos con ::details-content (Chrome 131+, Safari 18.4+, Firefox 143+). En navegadores más viejos
   las tres columnas salen plegadas y se abren con un clic. */

.jbf {
	--f-negro: var(--jb-negro, #0d0d0d);
	--f-marfil: var(--jb-marfil, #f6f2ea);
	--f-dorado: var(--jb-dorado, #c6a15b);
	--f-dorado-osc: var(--jb-dorado-oscuro, #9c7b3c);
	--f-texto: var(--jb-texto, #1c1c1c);
	--f-texto-suave: var(--jb-texto-suave, #6b665e);
	--f-linea: var(--jb-linea, rgba(198, 161, 91, .35));
	--f-serif: var(--jb-serif, 'Cormorant Garamond', Georgia, serif);
	--f-sans: var(--jb-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
	--f-tracking: var(--jb-tracking, .14em);
	--f-radio: var(--jb-radio, 2px);
	--f-claro: rgba(246, 242, 234, .68);
	--f-linea-osc: rgba(246, 242, 234, .12);
	background: var(--f-negro);
	color: var(--f-marfil);
	font-family: var(--f-sans);
	font-variant-numeric: lining-nums;
	-webkit-font-smoothing: antialiased;
}
.jbf *, .jbf *::before, .jbf *::after { box-sizing: border-box; }
.jbf a { color: inherit; text-decoration: none; transition: color .2s ease; }
.jbf ul { list-style: none; margin: 0; padding: 0; }
.jbf p { margin: 0; }
.jbf-in { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
/* El contenedor y el widget de Elementor no deben añadir aire alrededor. */
.elementor-widget-html:has(> .jbf), .elementor-widget-html:has(> .elementor-widget-container > .jbf) { margin: 0 !important; width: 100%; }

/* 1 · Franja de confianza */
.jbf-confianza { background: var(--f-marfil); color: var(--f-texto); border-top: 1px solid var(--f-linea); }
.jbf-confianza .jbf-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.jbf-conf { display: flex; gap: 16px; align-items: center; padding: 30px 24px; }
.jbf-conf + .jbf-conf { border-left: 1px solid var(--f-linea); }
.jbf-conf svg { flex: 0 0 34px; width: 34px; height: 34px; stroke: var(--f-dorado-osc); stroke-width: 1.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jbf-conf b { display: block; font-family: var(--f-serif); font-weight: 600; font-size: 19px; line-height: 1.15; color: var(--f-texto); }
.jbf-conf span { display: block; font-size: 13px; line-height: 1.45; color: var(--f-texto-suave); margin-top: 3px; }

/* 2 · Cuerpo */
.jbf-cuerpo { padding: 72px 0 52px; }
.jbf-cuerpo > .jbf-in { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.25fr; gap: 48px; }
.jbf img.jbf-logo { width: 150px; height: auto; display: block; margin: -6px 0 18px -4px; }
.jbf-lema { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--f-marfil); margin: 0 0 22px !important; max-width: 280px; }
.jbf-sello-fila { display: flex; align-items: center; gap: 18px; }
.jbf-sello { width: 104px; height: 104px; flex: 0 0 104px; }
.jbf-sello .jbf-s1 { fill: none; stroke: var(--f-dorado); stroke-width: .7; }
.jbf-sello .jbf-s2 { fill: none; stroke: var(--f-dorado); stroke-width: .45; }
.jbf-sello .jbf-s3 { font-family: var(--f-sans); font-size: 7.4px; letter-spacing: 1.2px; fill: var(--f-dorado); }
.jbf-sello .jbf-s4 { font-family: var(--f-serif); font-weight: 600; font-size: 21px; fill: var(--f-marfil); }
.jbf-sello .jbf-s5 { font-family: var(--f-sans); font-size: 5.6px; letter-spacing: 1.8px; fill: var(--f-dorado); }
.jbf-redes { display: flex; gap: 10px; }
.jbf-redes a { width: 40px; height: 40px; border: 1px solid var(--f-linea); border-radius: 50%; display: grid; place-items: center; }
.jbf-redes svg { width: 16px; height: 16px; fill: var(--f-dorado); transition: fill .2s; }
.jbf-redes a:hover { border-color: var(--f-dorado); }
.jbf-redes a:hover svg { fill: var(--f-marfil); }

.jbf-col summary, .jbf-col .jbf-h { list-style: none; display: block; font-family: var(--f-sans); font-weight: 500; font-size: 12px; letter-spacing: var(--f-tracking); text-transform: uppercase; color: var(--f-dorado); margin: 0 0 22px; padding: 0; }
.jbf-col summary::-webkit-details-marker { display: none; }
.jbf-col summary::marker { content: ''; }
.jbf-col li { margin: 0; padding: 0; }
.jbf-col li + li { margin-top: 12px; }
.jbf-col li a, .jbf-contacto li { font-size: 15px; line-height: 1.45; font-weight: 300; color: var(--f-claro); }
.jbf-col li a:hover { color: var(--f-dorado); }
.jbf-contacto li { display: flex; gap: 10px; align-items: flex-start; }
.jbf-contacto li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--f-dorado); stroke-width: 1.3; }
.jbf-contacto li a { color: var(--f-marfil); font-weight: 400; }

@media (min-width: 768px) {
	/* Escritorio: las tres columnas siempre abiertas y sin comportamiento de acordeón. */
	.jbf details.jbf-col::details-content { content-visibility: visible; display: block; }
	@supports selector(::details-content) {
		.jbf-col summary { pointer-events: none; cursor: default; }
	}
}

/* 3 · Pagos (logos monocromos marfil, alto óptico igualado) */
.jbf-pagos .jbf-in { display: flex; align-items: center; gap: 36px; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid var(--f-linea-osc); }
.jbf-etq { font-size: 11px; letter-spacing: var(--f-tracking); text-transform: uppercase; color: var(--f-claro); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.jbf-etq svg { width: 14px; height: 14px; fill: none; stroke: var(--f-dorado); stroke-width: 1.4; }
.jbf-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; opacity: .9; }
.jbf .jbf-logos > *, .jbf .jbf-logos img { display: block; height: 26px; width: auto; max-width: none; }
.jbf .jbf-logos svg { fill: var(--f-marfil); }
.jbf .jbf-logos .l-visa { height: 34px; margin: -4px 0; }
.jbf .jbf-logos .l-mc, .jbf .jbf-logos .l-mp { height: 30px; }
.jbf .jbf-logos img.l-pse { height: 28px; opacity: .85; }
.jbf .jbf-logos img.l-nq { height: 27px; }
.jbf .jbf-logos img.l-dp { height: 27px; }
.jbf .jbf-logos img.l-sc { height: 15px; }
.jbf .jbf-logos .l-txt { height: auto; font-size: 11px; letter-spacing: var(--f-tracking); text-transform: uppercase; color: var(--f-marfil); border: 1px solid var(--f-linea-osc); padding: 6px 10px; border-radius: var(--f-radio); }

/* 4 · Legal y crédito (discreto) */
.jbf-legal .jbf-in { display: flex; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid var(--f-linea-osc); font-size: 12px; letter-spacing: .04em; color: rgba(246, 242, 234, .5); }
.jbf-credito { color: rgba(246, 242, 234, .38); }

/* ── Móvil ── */
@media (max-width: 767px) {
	.jbf-in { padding: 0 20px; }
	.jbf-confianza .jbf-in { grid-template-columns: 1fr 1fr; padding: 0; }
	.jbf-conf { gap: 10px; padding: 16px 14px; }
	.jbf-conf + .jbf-conf { border-left: 0; }
	.jbf-conf:nth-child(even) { border-left: 1px solid var(--f-linea); }
	.jbf-conf:nth-child(n+3) { border-top: 1px solid var(--f-linea); }
	.jbf-conf span { display: none; }
	.jbf-conf svg { width: 24px; height: 24px; flex-basis: 24px; }
	.jbf-conf b { font-size: 16px; }

	.jbf-cuerpo { padding: 44px 0 8px; }
	.jbf-cuerpo > .jbf-in { grid-template-columns: 1fr; gap: 0; }
	.jbf-marca { text-align: center; padding-bottom: 30px; }
	.jbf img.jbf-logo { width: 128px; margin: 0 auto 14px; }
	.jbf-lema { margin: 0 auto 20px !important; font-size: 19px; }
	.jbf-sello-fila { justify-content: center; }
	.jbf-sello { width: 92px; height: 92px; flex-basis: 92px; }
	.jbf-col { border-top: 1px solid var(--f-linea-osc); }
	.jbf-col summary, .jbf-col .jbf-h { margin: 0; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; }
	.jbf-col summary { cursor: pointer; }
	.jbf-col summary::after { content: ''; width: 9px; height: 9px; border-right: 1px solid var(--f-dorado); border-bottom: 1px solid var(--f-dorado); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
	.jbf-col[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
	.jbf-col ul { padding: 0 0 20px; }
	.jbf-col li + li { margin-top: 14px; }
	.jbf-contacto ul { padding-bottom: 26px; }

	.jbf-pagos .jbf-in { flex-direction: column; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
	.jbf-logos { justify-content: center; gap: 16px 26px; }
	.jbf .jbf-logos > *, .jbf .jbf-logos img { height: 21px; }
	.jbf .jbf-logos .l-visa { height: 27px; }
	.jbf .jbf-logos .l-mc, .jbf .jbf-logos .l-mp { height: 24px; }
	.jbf .jbf-logos img.l-pse, .jbf .jbf-logos img.l-nq { height: 23px; }
	.jbf .jbf-logos img.l-dp { height: 22px; }
	.jbf .jbf-logos img.l-sc { height: 12px; }
	.jbf .jbf-logos .l-txt { height: auto; padding: 5px 8px; font-size: 10px; }

	/* Hueco para el botón flotante de WhatsApp (Joinchat), que si no tapa el copyright. */
	.jbf-legal .jbf-in { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-bottom: 96px; }
}