/*
 * Portada B2B (F2a; plan ~/diagnosticos/2026-10-26-home-b2b.md, diseño
 * ~/disenos/diseno-home-b2b/ v30 + v31). Solo con body.fd-home-b2b
 * (inc/portada-b2b.php; F3: también el registro y las legales, con
 * body.fd-publico-b2b y .fdb-documento). Todo lleva el prefijo fdb- (el diseño usa nombres
 * genéricos que chocan con WooCommerce y el tema). box-sizing solo dentro de
 * .fdb-pagina. Estado fijo, sin animaciones: el movimiento es F2b.
 */

body.fd-home-b2b {
	/* Paleta del diseño. El naranja es el del sitio (--fd-orange). */
	--fdb-naranja: var(--fd-orange);
	--fdb-naranja-claro: #FB923C;
	--fdb-naranja-suave: #FDBA74;
	--fdb-naranja-hover: #FB8A3C;
	--fdb-sobre-naranja: #1A0D03;
	--fdb-fondo: #0B0E14;
	--fdb-fondo-2: #0E1219;
	--fdb-panel: #121722;
	--fdb-panel-2: #151A23;
	--fdb-borde: #232A36;
	--fdb-borde-2: #2A303A;
	--fdb-separador: #1A1F29;
	--fdb-texto: #F2F2F0;
	--fdb-texto-2: #C9C9C3;
	--fdb-texto-3: #B5B5AE;
	--fdb-tenue: #8A8F99;
	--fdb-etiqueta: #E6E6E1;
	--fdb-crema: #F7F4EE;
	--fdb-crema-2: #EFEBE3;
	--fdb-blanco: #FFFFFF;
	--fdb-tinta: #14171D;
	--fdb-tinta-2: #555A63;
	--fdb-tinta-3: #5E636B;
	--fdb-tinta-boton: #3A3F47;
	--fdb-borde-claro: #E4DED3;
	--fdb-borde-criterio: #DDD5C8;
	--fdb-marron: #9A3412;
	--fdb-final-texto: #3A1C06;
	/* Pantallas de la demo. */
	--fdb-demo-fondo: #0B0F14;
	--fdb-demo-borde: #1C222B;
	--fdb-demo-texto: #E6E8EB;
	--fdb-demo-tenue: #8A929E;
	--fdb-demo-gris: #9EA3AD;
	--fdb-demo-control: #C9CED6;
	--fdb-demo-linea: #2A313B;
	--fdb-verde: #4ADE80;
	--fdb-verde-oscuro: #12291A;
	--fdb-fuente: "Barlow", system-ui, sans-serif;
	--fdb-fuente-titulo: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
	--fdb-fuente-mono: "IBM Plex Mono", ui-monospace, monospace;
	--fdb-fuente-sans: "IBM Plex Sans", system-ui, sans-serif;

	margin: 0;
	background: var(--fdb-fondo);
}

.fdb-pagina {
	min-height: 100vh;
	overflow-x: clip;
	background: var(--fdb-fondo);
	color: var(--fdb-texto);
	font-family: var(--fdb-fuente);
	-webkit-font-smoothing: antialiased;
}

.fdb-pagina *,
.fdb-pagina *::before,
.fdb-pagina *::after {
	box-sizing: border-box;
}

/* Las variantes de texto que el JS no muestra (F2b) llevan hidden. */
.fdb-pagina [hidden] {
	display: none;
}

.fdb-pagina a {
	color: var(--fdb-naranja-claro);
}

.fdb-pagina a:hover {
	color: var(--fdb-naranja-suave);
}

.fdb-pagina a:focus-visible,
.fdb-pagina button:focus-visible {
	outline: 2px solid var(--fdb-naranja-suave);
	outline-offset: 2px;
}

.fdb-pagina h1,
.fdb-pagina h2,
.fdb-pagina h3,
.fdb-pagina p,
.fdb-pagina ul,
.fdb-pagina ol {
	margin: 0;
}

.fdb-pagina ul,
.fdb-pagina ol {
	padding: 0;
	list-style: none;
}

.fd-fz-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.fdb-pagina .fd-fz {
	display: block;
	flex: none;
	overflow: visible;
}

/* ---------- Cabecera ---------- */

.fdb-cabecera {
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.fdb-pagina .fdb-marca {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.fdb-marca__logo {
	display: block;
	width: 168px;
	height: 32px;
	object-fit: contain;
}

.fdb-marca__etiqueta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--fdb-naranja);
	border: 1px solid #3A2A1C;
	border-radius: var(--fd-radius-pill, 999px);
	padding: 4px 10px;
}

.fdb-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.fdb-pagina .fdb-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	font-size: 15px;
	border-radius: var(--fd-radius-pill, 999px);
}

.fdb-pagina .fdb-nav__ancla {
	color: var(--fdb-texto-2);
	font-weight: 500;
	padding: 0 12px;
}

.fdb-pagina .fdb-nav__ancla:hover {
	color: var(--fdb-texto);
}

.fdb-pagina .fdb-nav__ingresar {
	color: var(--fdb-texto);
	font-weight: 600;
	padding: 0 16px;
	border: 1px solid var(--fdb-borde-2);
}

.fdb-pagina .fdb-nav__ingresar:hover {
	color: var(--fdb-texto);
	border-color: var(--fdb-tenue);
}

.fdb-pagina .fdb-nav__registrar {
	color: var(--fdb-sobre-naranja);
	background: var(--fdb-naranja);
	font-weight: 700;
	padding: 0 18px;
}

.fdb-pagina .fdb-nav__registrar:hover {
	color: var(--fdb-sobre-naranja);
	background: var(--fdb-naranja-hover);
}

/* ---------- Botones ---------- */

.fdb-pagina .fdb-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border-radius: var(--fd-radius-pill, 999px);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.fdb-pagina .fdb-boton--naranja {
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
}

.fdb-pagina .fdb-boton--naranja:hover {
	background: var(--fdb-naranja-hover);
	color: var(--fdb-sobre-naranja);
}

.fdb-pagina .fdb-boton--borde {
	color: var(--fdb-texto);
	font-weight: 600;
	padding: 0 22px;
	border: 1px solid var(--fdb-borde-2);
}

.fdb-pagina .fdb-boton--borde:hover {
	color: var(--fdb-texto);
	border-color: var(--fdb-tenue);
}

.fdb-pagina .fdb-boton--oscuro {
	background: var(--fdb-fondo);
	color: var(--fdb-texto);
}

.fdb-pagina .fdb-boton--oscuro:hover {
	background: #1B2130;
	color: var(--fdb-texto);
}

.fdb-pagina .fdb-boton--linea {
	color: var(--fdb-sobre-naranja);
	padding: 0 22px;
	border: 2px solid var(--fdb-sobre-naranja);
}

.fdb-pagina .fdb-boton--linea:hover {
	color: var(--fdb-sobre-naranja);
	background: rgba(26, 13, 3, .08);
}

/* ---------- Portada ---------- */

.fdb-portada {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 32px 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}

.fdb-portada__texto {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fdb-portada__asistente {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--fdb-texto-2);
	background: var(--fdb-panel-2);
	border: 1px solid var(--fdb-borde);
	border-radius: var(--fd-radius-pill, 999px);
	padding: 7px 14px 7px 8px;
}

.fdb-portada__asistente strong {
	color: var(--fdb-texto);
	font-weight: 600;
}

.fdb-portada__titulo {
	font-family: var(--fdb-fuente-titulo);
	font-size: clamp(52px, 7vw, 92px);
	font-weight: 800;
	line-height: .92;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--fdb-texto);
}

.fdb-portada__titulo span,
.fdb-encabezado__titulo span {
	color: var(--fdb-naranja);
}

.fdb-portada__entrada {
	max-width: 560px;
	font-size: 19px;
	line-height: 1.55;
	color: var(--fdb-texto-3);
}

.fdb-portada__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fdb-portada__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
	color: var(--fdb-texto-2);
}

.fdb-portada__sellos li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fdb-portada__para {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fdb-tenue);
}

.fdb-portada__para-titulo {
	font-weight: 600;
}

.fdb-etiqueta {
	color: var(--fdb-etiqueta);
	background: var(--fdb-panel-2);
	border: 1px solid var(--fdb-borde);
	border-radius: var(--fd-radius-pill, 999px);
	padding: 5px 12px;
}

.fdb-portada__demo {
	flex: 1 1 600px;
	min-width: 0;
	position: relative;
}

.fdb-pagina .fdb-nota {
	position: relative;
	margin-top: 12px;
	text-align: center;
	font-size: 12.5px;
	color: var(--fdb-tenue);
}

/* Órbita */

.fdb-orbita {
	position: relative;
	width: 100%;
	aspect-ratio: 640 / 500;
	font-family: var(--fdb-fuente);
}

.fdb-orbita__brillo {
	position: absolute;
	inset: -12% -8%;
	background: radial-gradient(circle at 50% 40%, rgba(249, 115, 22, .30), rgba(249, 115, 22, .08) 38%, rgba(249, 115, 22, 0) 64%);
	pointer-events: none;
}

.fdb-orbita__chispa {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: var(--fdb-naranja-suave);
	opacity: .35;
	pointer-events: none;
}

.fdb-orbita__chispa:nth-of-type(1) { left: 8%; top: 30%; }
.fdb-orbita__chispa:nth-of-type(2) { left: 26%; top: 4%; }
.fdb-orbita__chispa:nth-of-type(3) { left: 40%; top: 22%; }
.fdb-orbita__chispa:nth-of-type(4) { left: 62%; top: 6%; }
.fdb-orbita__chispa:nth-of-type(5) { left: 93%; top: 30%; }
.fdb-orbita__chispa:nth-of-type(6) { left: 95%; top: 70%; }
.fdb-orbita__chispa:nth-of-type(7) { left: 60%; top: 74%; }
.fdb-orbita__chispa:nth-of-type(8) { left: 38%; top: 70%; }
.fdb-orbita__chispa:nth-of-type(9) { left: 5%; top: 76%; }
.fdb-orbita__chispa:nth-of-type(10) { left: 50%; top: 96%; }

.fdb-orbita__lineas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.fdb-orbita__lineas line {
	vector-effect: non-scaling-stroke;
	fill: none;
}

.fdb-orbita__linea {
	stroke: rgba(255, 255, 255, .10);
	stroke-width: 1;
}

.fdb-orbita__linea.is-on {
	stroke: rgba(249, 115, 22, .55);
	stroke-width: 1.5;
}

.fdb-orbita__flujo {
	stroke: transparent;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 10 90;
}

.fdb-orbita__flujo.is-on {
	stroke: var(--fdb-naranja-suave);
	filter: drop-shadow(0 0 4px #F97316);
}

.fdb-orbita__nucleo {
	position: absolute;
	left: 50%;
	top: 40%;
	z-index: 2;
	width: 132px;
	height: 132px;
	margin: -66px 0 0 -66px;
	border-radius: 999px;
	background: radial-gradient(circle, #1B1510 0%, #0E1219 70%);
	border: 1px solid rgba(249, 115, 22, .45);
	display: grid;
	place-items: center;
	box-shadow: 0 0 60px -8px rgba(249, 115, 22, .55);
}

.fdb-orbita__ping {
	position: absolute;
	inset: -1px;
	border-radius: 999px;
	border: 1px solid var(--fdb-naranja);
	opacity: 0;
}

.fdb-orbita__anillo {
	position: absolute;
	inset: -16px;
	border-radius: 999px;
	border: 1px dashed rgba(249, 115, 22, .35);
}

.fdb-orbita__fersho {
	width: 104px;
	height: 104px;
	display: grid;
	place-items: center;
	margin-top: -10px;
	filter: drop-shadow(0 14px 22px rgba(249, 115, 22, .45));
}

/* Giro del Fersho y ojos hacia el paso activo (sin JS: «Cotización»). */
.fdb-orbita[data-activo="0"] .fdb-orbita__fersho { transform: rotate(-6deg); }
.fdb-orbita[data-activo="1"] .fdb-orbita__fersho { transform: rotate(6deg); }
.fdb-orbita[data-activo="2"] .fdb-orbita__fersho { transform: rotate(5deg); }
.fdb-orbita[data-activo="3"] .fdb-orbita__fersho { transform: rotate(3deg); }
.fdb-orbita[data-activo="4"] .fdb-orbita__fersho { transform: rotate(-3deg); }
.fdb-orbita[data-activo="5"] .fdb-orbita__fersho { transform: rotate(-5deg); }

.fdb-orbita[data-activo="0"] .fdb-orbita__fersho .fd-fz-cara { transform: translate(-3.3px, -2.3px); }
.fdb-orbita[data-activo="1"] .fdb-orbita__fersho .fd-fz-cara { transform: translate(3.3px, -2.3px); }
.fdb-orbita[data-activo="2"] .fdb-orbita__fersho .fd-fz-cara { transform: translate(3.9px, .8px); }
.fdb-orbita[data-activo="3"] .fdb-orbita__fersho .fd-fz-cara { transform: translate(2.1px, 3.4px); }
.fdb-orbita[data-activo="4"] .fdb-orbita__fersho .fd-fz-cara { transform: translate(-2.1px, 3.4px); }
.fdb-orbita[data-activo="5"] .fdb-orbita__fersho .fd-fz-cara { transform: translate(-3.9px, .8px); }

.fdb-burbuja {
	position: absolute;
	left: 50%;
	top: 59%;
	z-index: 3;
	transform: translate(-50%, 0);
	min-width: 190px;
	max-width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(18, 23, 34, .92);
	border: 1px solid #2E3646;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
	text-align: center;
}

.fdb-burbuja__quien {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fdb-naranja);
}

.fdb-burbuja__texto {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fdb-texto);
}

.fdb-punto {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--fdb-naranja);
}

.fdb-punto--oscuro {
	background: var(--fdb-sobre-naranja);
}

.fdb-onodo {
	position: absolute;
	z-index: 2;
	width: 150px;
	transform: translate(-50%, -22px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.fdb-onodo[data-nodo="0"] { left: 18%; top: 12%; }
.fdb-onodo[data-nodo="1"] { left: 82%; top: 12%; }
.fdb-onodo[data-nodo="2"] { left: 88%; top: 50%; }
.fdb-onodo[data-nodo="3"] { left: 72%; top: 84%; }
.fdb-onodo[data-nodo="4"] { left: 28%; top: 84%; }
.fdb-onodo[data-nodo="5"] { left: 12%; top: 50%; }

.fdb-onodo__ico {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: var(--fdb-panel);
	border: 1px solid var(--fdb-borde-2);
	color: var(--fdb-demo-gris);
}

.fdb-onodo__titulo {
	font-size: 14px;
	font-weight: 700;
	color: var(--fdb-texto-2);
}

.fdb-onodo__sub {
	font-size: 12px;
	color: var(--fdb-tenue);
}

.fdb-onodo.is-on .fdb-onodo__ico {
	background: radial-gradient(circle at 35% 30%, #FDBA74, #F97316 60%, #EA580C);
	border-color: var(--fdb-naranja-suave);
	color: var(--fdb-sobre-naranja);
	transform: scale(1.22);
	box-shadow: 0 0 0 7px rgba(249, 115, 22, .16), 0 0 30px rgba(249, 115, 22, .7);
}

.fdb-onodo.is-on .fdb-onodo__titulo {
	color: var(--fdb-blanco);
}

.fdb-onodo.is-on .fdb-onodo__sub {
	color: var(--fdb-naranja-suave);
}

.fdb-onodo.is-hecho .fdb-onodo__ico {
	color: var(--fdb-naranja);
	border-color: #3A2A1C;
}

/* Tarjeta de ejemplo y tasa */

.fdb-ejemplo {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.fdb-ejemplo__tarjeta {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	border-radius: 18px;
	background: linear-gradient(120deg, #F97316, #FB923C 60%, #FDBA74);
	color: var(--fdb-sobre-naranja);
	box-shadow: 0 24px 60px -24px rgba(249, 115, 22, .7);
}

.fdb-ejemplo__cabeza {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.fdb-ejemplo__titulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.fdb-ejemplo__sello,
.fdb-ejemplo__chip {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	background: rgba(26, 13, 3, .14);
	border-radius: 999px;
	padding: 4px 10px;
}

.fdb-ejemplo__chip {
	font-size: 12px;
}

.fdb-ejemplo__montos {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.fdb-ejemplo__usd {
	font-family: var(--fdb-fuente-titulo);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.5px;
}

.fdb-ejemplo__bs {
	font-size: 13px;
	font-weight: 600;
}

.fdb-ejemplo__pie {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.fdb-ejemplo__delta {
	font-size: 12px;
	font-weight: 800;
	background: var(--fdb-sobre-naranja);
	color: var(--fdb-naranja-suave);
	border-radius: 999px;
	padding: 4px 10px;
}

.fdb-tasa {
	flex: 0 1 200px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--fdb-panel);
	border: 1px solid var(--fdb-borde);
}

.fdb-tasa__ico {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: #1B2130;
	color: var(--fdb-naranja);
}

.fdb-tasa__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fdb-tasa__texto strong {
	font-family: var(--fdb-fuente-titulo);
	font-size: 22px;
	font-weight: 800;
	color: var(--fdb-texto);
}

.fdb-tasa__texto span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fdb-tenue);
}

/* ---------- Franja ---------- */

.fdb-franja {
	border-top: 1px solid var(--fdb-separador);
	border-bottom: 1px solid var(--fdb-separador);
	background: var(--fdb-fondo-2);
}

.fdb-pagina .fdb-franja__interior {
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 32px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.fdb-franja li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fdb-franja strong {
	font-family: var(--fdb-fuente-titulo);
	font-size: 26px;
	font-weight: 800;
	color: var(--fdb-naranja);
}

.fdb-franja span {
	font-size: 14px;
	color: var(--fdb-texto-3);
}

/* ---------- Encabezados de sección ---------- */

.fdb-encabezado {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fdb-encabezado__antetitulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--fdb-naranja);
}

.fdb-encabezado__antetitulo--claro {
	color: var(--fdb-marron);
}

.fdb-encabezado__titulo {
	font-family: var(--fdb-fuente-titulo);
	font-size: clamp(34px, 4.4vw, 60px);
	font-weight: 800;
	line-height: .95;
	text-transform: uppercase;
	color: var(--fdb-texto);
}

.fdb-encabezado__titulo--claro {
	color: var(--fdb-tinta);
}

.fdb-encabezado__entrada {
	font-size: 17px;
	line-height: 1.55;
	color: var(--fdb-tinta-2);
}

.fdb-una-linea {
	white-space: nowrap;
}

/* ---------- Cómo funciona ---------- */

.fdb-como {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
	padding: 96px max(32px, calc((100% - 1256px) / 2));
	background: radial-gradient(ellipse at 75% 45%, rgba(251, 191, 36, .22), rgba(251, 191, 36, 0) 55%), linear-gradient(180deg, var(--fdb-crema), var(--fdb-crema-2));
	color: var(--fdb-tinta);
}

.fdb-como__texto {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.fdb-como .fdb-encabezado__titulo {
	font-size: clamp(40px, 5vw, 60px);
}

.fdb-como__sello {
	font-family: var(--fdb-fuente-titulo);
	letter-spacing: 1px;
	font-size: 13px;
	color: var(--fdb-sobre-naranja);
	background: var(--fdb-naranja);
	border-radius: 6px;
	padding: 2px 8px;
}

.fdb-pasos {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fdb-paso {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid transparent;
}

.fdb-paso.is-on {
	background: var(--fdb-blanco);
	border-color: var(--fdb-borde-claro);
	box-shadow: 0 14px 34px -18px rgba(120, 80, 20, .35);
	transform: translateX(4px);
}

.fdb-paso__boton {
	width: 100%;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fdb-paso__num {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-family: var(--fdb-fuente-titulo);
	font-size: 17px;
	font-weight: 800;
	background: var(--fdb-blanco);
	color: var(--fdb-tinta-3);
	border: 1px solid var(--fdb-borde-claro);
}

.fdb-paso.is-on .fdb-paso__num {
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
	border-color: var(--fdb-naranja);
	box-shadow: 0 8px 20px -8px rgba(249, 115, 22, .9);
}

.fdb-paso:not(.is-on) .fdb-paso__boton:hover .fdb-paso__num {
	color: var(--fdb-tinta);
	border-color: #C9C2B5;
}

.fdb-paso__textos {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.fdb-paso__titulo {
	font-size: 16px;
	font-weight: 700;
	color: var(--fdb-tinta);
}

.fdb-paso__texto {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fdb-tinta-3);
}

.fdb-paso__barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
}

.fdb-paso__barra span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--fdb-naranja);
	transform: scaleX(0);
	transform-origin: left center;
}

.fdb-paso.is-on .fdb-paso__barra {
	background: #EFE9DF;
}

/* Avance del paso en el estado fijo (tick 8 de 20); la demo lo cambia. */
.fdb-paso.is-on .fdb-paso__barra span {
	transform: scaleX(.45);
}

.fdb-criterios {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px 14px 12px 62px;
}

.fdb-como:not([data-paso="2"]) .fdb-criterios {
	display: none;
}

.fdb-criterio {
	min-height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--fdb-borde-criterio);
	background: #FAF8F4;
	color: var(--fdb-tinta-boton);
	font: 600 12px var(--fdb-fuente);
	cursor: pointer;
}

.fdb-criterio:hover {
	border-color: #A39B8E;
	color: var(--fdb-tinta);
}

.fdb-criterio.is-on {
	background: var(--fdb-naranja);
	border-color: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
}

.fdb-como__ayuda {
	font-size: 13px;
	color: var(--fdb-tinta-3);
}

.fdb-como__demo {
	flex: 1 1 680px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fdb-como__nota {
	text-align: center;
	font-size: 12.5px;
	color: var(--fdb-tinta-3);
}

/* Escenario y dispositivo */

.fdb-escenario {
	position: relative;
	height: 600px;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
}

.fdb-escenario__brillo {
	position: absolute;
	inset: -30px -10px;
	background: radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, .16), rgba(249, 115, 22, 0) 62%);
	pointer-events: none;
}

.fdb-fantasma {
	position: absolute;
	top: 50%;
	width: 46%;
	height: 62%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: 22px;
	background: var(--fdb-blanco);
	border: 1px solid var(--fdb-borde-claro);
	box-shadow: 0 20px 50px -30px rgba(80, 60, 30, .4);
	filter: blur(1.5px);
	pointer-events: none;
}

.fdb-fantasma__barra {
	display: block;
	height: 10px;
	border-radius: 6px;
	background: #EEE9E0;
}

.fdb-fantasma__barra--30 { width: 30%; }
.fdb-fantasma__barra--40 { width: 40%; }
.fdb-fantasma__barra--55 { width: 55%; }
.fdb-fantasma__barra--60 { width: 60%; }
.fdb-fantasma__barra--70 { width: 70%; }
.fdb-fantasma__barra--80 { width: 80%; }

.fdb-fantasma__fila {
	display: flex;
	flex: 1;
	gap: 10px;
}

.fdb-fantasma__fila span {
	flex: 1;
	border-radius: 12px;
	background: #F4F0E9;
}

.fdb-fantasma--a { left: 0; }
.fdb-fantasma--b { right: 0; }
.fdb-como[data-paso="0"] .fdb-fantasma--a { transform: translateX(-4.35%) translateY(-50%) rotate(-4deg) scale(.92); opacity: .55; }
.fdb-como[data-paso="0"] .fdb-fantasma--b { transform: translateX(4.35%) translateY(-50%) rotate(4deg) scale(.92); opacity: .55; }
.fdb-como[data-paso="1"] .fdb-fantasma--a { transform: translateX(8.7%) translateY(-42%) scale(.8); opacity: .25; }
.fdb-como[data-paso="1"] .fdb-fantasma--b { transform: translateX(-8.7%) translateY(-58%) scale(.8); opacity: .25; }
.fdb-como[data-paso="2"] .fdb-fantasma--a { transform: translateX(-13.04%) translateY(-50%) scale(.75); opacity: .2; }
.fdb-como[data-paso="2"] .fdb-fantasma--b { transform: translateX(13.04%) translateY(-50%) scale(.75); opacity: .2; }
.fdb-como[data-paso="3"] .fdb-fantasma--a { transform: translateY(-56%) rotate(3deg) scale(.9); opacity: .5; }
.fdb-como[data-paso="3"] .fdb-fantasma--b { transform: translateY(-44%) rotate(-3deg) scale(.9); opacity: .5; }

.fdb-equipos {
	position: relative;
	z-index: 2;
	align-self: stretch;
	justify-self: stretch;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
}

.fdb-como[data-paso="3"] .fdb-equipo--laptop,
.fdb-como:not([data-paso="3"]) .fdb-equipo--tablet {
	display: none;
}

.fdb-equipo {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: #05070A;
	border: 1px solid var(--fdb-borde-2);
	box-shadow: 0 50px 90px -30px rgba(40, 25, 5, .55), 0 0 0 1px rgba(255, 255, 255, .02);
	/* Laptop (pasos 0 a 2). */
	width: 92%;
	height: 500px;
	margin-bottom: 30px;
	padding: 14px 14px 18px;
	border-radius: 18px 18px 6px 6px;
}

/* Tablet vertical (paso 3). */
.fdb-equipo.fdb-equipo--tablet {
	width: 440px;
	height: 580px;
	margin-bottom: 0;
	padding: 16px;
	border-radius: 34px;
}

.fdb-equipo__camara {
	position: absolute;
	top: 5px;
	left: 50%;
	z-index: 5;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #1F2530;
}

.fdb-equipo__base {
	position: absolute;
	left: -4%;
	bottom: -22px;
	width: 108%;
	height: 22px;
	border-radius: 2px 2px 18px 18px;
	background: linear-gradient(#2A303A, #151A23 40%, #0B0E14);
	border-top: 1px solid #3A404C;
	box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8);
}

.fdb-equipo__muesca {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 16%;
	height: 7px;
	border-radius: 0 0 10px 10px;
	background: var(--fdb-fondo);
}

.fdb-pantalla {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--fdb-demo-fondo);
}

.fdb-equipo--tablet .fdb-pantalla {
	border-radius: 20px;
}

.fdb-escena {
	display: none;
	position: relative;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.fdb-como[data-paso="0"] .fdb-escena[data-escena="0"],
.fdb-como[data-paso="1"] .fdb-escena[data-escena="1"],
.fdb-como[data-paso="2"] .fdb-escena[data-escena="2"],
.fdb-como[data-paso="3"] .fdb-escena[data-escena="3"] {
	display: flex;
}

/* Pantallas de la demo (el .cz del diseño) */

.fdb-demo {
	flex-direction: column;
	font-family: var(--fdb-fuente-mono);
	color: var(--fdb-demo-texto);
	background: var(--fdb-demo-fondo);
}

.fdb-sans {
	font-family: var(--fdb-fuente-sans);
}

.fdb-mut {
	color: var(--fdb-demo-tenue);
}

.fdb-up {
	text-transform: uppercase;
	letter-spacing: .08em;
}

.fdb-fila {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	font-size: 12px;
	line-height: 1.75;
}

.fdb-fila b {
	font-weight: 600;
	color: var(--fdb-demo-texto);
}

/* Escena 0: tu lista */

.fdb-chat__cabeza {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--fdb-demo-borde);
}

.fdb-chat__quien {
	display: flex;
	flex-direction: column;
}

.fdb-chat__quien strong {
	font-size: 15px;
	color: var(--fdb-blanco);
}

.fdb-chat__quien span {
	font-size: 11px;
	color: var(--fdb-verde);
}

.fdb-chat__listas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px 0;
}

.fdb-lista-chip {
	position: relative;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--fdb-demo-linea);
	background: transparent;
	color: var(--fdb-demo-control);
	font: 600 11.5px var(--fdb-fuente-sans);
	cursor: pointer;
}

.fdb-lista-chip.is-on {
	background: #2A1A0E;
	border-color: var(--fdb-naranja);
	color: var(--fdb-naranja-suave);
}

.fdb-chat__mensajes {
	flex: 1;
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 18px;
	overflow: hidden;
}

.fdb-msj-fersho,
.fdb-msj-cliente {
	max-width: 88%;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.45;
}

.fdb-msj-fersho {
	align-self: flex-start;
	border-radius: 14px 14px 14px 4px;
	background: var(--fdb-panel-2);
	border: 1px solid var(--fdb-borde);
	color: var(--fdb-demo-texto);
}

.fdb-msj-cliente {
	align-self: flex-end;
	border-radius: 14px 14px 4px 14px;
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
	font-weight: 600;
}

.fdb-chat__entendido {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 260px;
}

.fdb-chat__entendido > span > b {
	color: var(--fdb-naranja-suave);
}

.fdb-linea-lista {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--fdb-demo-fondo);
	border: 1px solid var(--fdb-demo-borde);
	font-size: 11.5px;
}

.fdb-linea-lista b {
	color: var(--fdb-naranja-suave);
}

.fdb-chat__mas {
	font-size: 11.5px;
	color: var(--fdb-demo-tenue);
}

.fdb-chat__escribir {
	display: flex;
	gap: 8px;
	padding: 10px 12px 16px;
	border-top: 1px solid var(--fdb-demo-borde);
}

.fdb-chat__campo {
	flex: 1;
	min-height: 42px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--fdb-panel);
	border: 1px solid var(--fdb-borde);
	font-size: 12px;
	color: var(--fdb-tenue);
}

.fdb-enviar {
	position: relative;
	flex: none;
	min-height: 42px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--fdb-borde-2);
	color: var(--fdb-demo-tenue);
	font: 700 12px var(--fdb-fuente-sans);
	cursor: pointer;
}

.fdb-enviar.is-listo {
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
}

/* Escena 1: la red */

.fdb-red__cabeza,
.fdb-opciones__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fdb-red__cabeza {
	padding: 12px 16px;
	border-bottom: 1px solid var(--fdb-demo-borde);
}

.fdb-red__quien,
.fdb-opciones__quien {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fdb-red__quien > span {
	display: flex;
	flex-direction: column;
}

.fdb-red__quien strong {
	font-size: 13px;
	color: var(--fdb-blanco);
}

.fdb-red__quien .fdb-mut {
	font-size: 10.5px;
}

.fdb-red__titulo {
	font-size: 14px;
	font-weight: 600;
	color: var(--fdb-blanco);
}

.fdb-en-vivo {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--fdb-verde-oscuro);
	color: var(--fdb-verde);
	font-size: 10.5px;
	font-weight: 600;
}

.fdb-en-vivo span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--fdb-verde);
}

.fdb-red__cuerpo {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 12px;
}

.fdb-red__resumen {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
}

.fdb-mapa {
	position: relative;
	flex: 1;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--fdb-demo-borde);
	background-color: #0D1117;
	background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 40px 40px;
}

.fdb-mapa__capa {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.fdb-mapa__linea {
	stroke: #3A424E;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.fdb-mapa__linea.is-hov { stroke: var(--fdb-demo-tenue); }
.fdb-mapa__linea.is-sel { stroke: var(--fdb-naranja); stroke-width: 2; }
.fdb-mapa__linea.is-dim { opacity: .35; }

.fdb-mapa__rotulo {
	position: absolute;
	left: 14px;
	top: 12px;
	z-index: 4;
	font-size: 11px;
}

.fdb-mapa__centro {
	position: absolute;
	left: 50%;
	top: 57.87%;
	z-index: 3;
	transform: translate(-50%, -50%);
	width: 118px;
	height: 118px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 999px;
	border: 1.5px solid var(--fdb-naranja);
	background: #0D1117;
	box-shadow: 0 0 40px -6px rgba(249, 115, 22, .55);
}

.fdb-mapa__onda {
	position: absolute;
	inset: -1px;
	border-radius: 999px;
	border: 1px solid var(--fdb-naranja);
	opacity: 0;
	pointer-events: none;
}

.fdb-mapa__centro-titulo {
	font-size: 15px;
	font-weight: 600;
	color: var(--fdb-blanco);
}

.fdb-mapa__centro-sub {
	font-size: 10.5px;
}

.fdb-nodo {
	position: absolute;
	font: inherit;
	color: inherit;
	z-index: 2;
	transform: translate(-50%, -9px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

/* Área táctil de 44 px centrada en el punto (D8b). */
.fdb-nodo::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 9px;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.fdb-nodo[data-aliado="a01"] { left: 17.5%; top: 23.4%; }
.fdb-nodo[data-aliado="a04"] { left: 34.5%; top: 14.04%; }
.fdb-nodo[data-aliado="a05"] { left: 66.5%; top: 14.04%; }
.fdb-nodo[data-aliado="a06"] { left: 83%; top: 25.11%; }
.fdb-nodo[data-aliado="a02"] { left: 13.5%; top: 60.64%; }
.fdb-nodo[data-aliado="a07"] { left: 88.5%; top: 72.34%; }
.fdb-nodo[data-aliado="a03"] { left: 24.5%; top: 88.94%; }
.fdb-nodo[data-aliado="loc"] { left: 75%; top: 89.36%; }

.fdb-nodo__punto {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1.5px solid #4A525E;
	background: #0D1117;
}

.fdb-nodo:hover .fdb-nodo__punto {
	border-color: var(--fdb-demo-control);
	transform: scale(1.15);
}

.fdb-nodo.is-chk .fdb-nodo__punto {
	border-color: var(--fdb-texto);
	background: #1B2130;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .08);
	transform: scale(1.2);
}

.fdb-nodo.is-sel .fdb-nodo__punto {
	background: var(--fdb-naranja);
	border-color: var(--fdb-naranja);
	box-shadow: 0 0 0 6px rgba(249, 115, 22, .18), 0 0 18px rgba(249, 115, 22, .6);
	transform: scale(1.3);
}

.fdb-nodo__nombre {
	white-space: nowrap;
	padding: 3px 7px;
	border-radius: 5px;
	background: rgba(13, 17, 23, .85);
	border: 1px solid var(--fdb-demo-borde);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--fdb-demo-gris);
}

.fdb-nodo__codigo {
	display: none;
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	color: var(--fdb-demo-tenue);
}

.fdb-nodo__tarjeta {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	min-width: 168px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: rgba(13, 17, 23, .72);
	opacity: .62;
}

.fdb-nodo--abajo .fdb-nodo__tarjeta { top: 30px; }
.fdb-nodo--arriba .fdb-nodo__tarjeta { bottom: 30px; }

.fdb-nodo.is-sel,
.fdb-nodo.is-chk {
	z-index: 6;
}

.fdb-nodo:hover {
	z-index: 7;
}

.fdb-nodo.is-sel .fdb-nodo__tarjeta,
.fdb-nodo.is-chk .fdb-nodo__tarjeta,
.fdb-nodo:hover .fdb-nodo__tarjeta {
	display: block;
	z-index: 6;
	opacity: 1;
}

.fdb-nodo.is-chk .fdb-nodo__tarjeta,
.fdb-nodo:hover .fdb-nodo__tarjeta {
	border-color: #3A424E;
	background: rgba(18, 23, 30, .92);
}

.fdb-nodo.is-sel .fdb-nodo__tarjeta {
	border-color: var(--fdb-naranja);
	background: #11161D;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}

.fdb-nodo.is-sel .fdb-nodo__nombre,
.fdb-nodo.is-chk .fdb-nodo__nombre,
.fdb-nodo:hover .fdb-nodo__nombre {
	display: none;
}

.fdb-nodo__sello,
.fdb-eleccion__sello {
	display: inline-block;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}

.fdb-nodo__sello {
	margin-bottom: 6px;
	padding: 3px 7px;
	border-radius: 5px;
	background: var(--fdb-naranja);
	color: #111;
}

.fdb-nodo__titulo {
	display: block;
	margin-bottom: 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--fdb-blanco);
}

/* Escena 2: opciones */

.fdb-opciones {
	gap: 10px;
	padding: 12px 14px;
	overflow: hidden;
}

.fdb-opciones__quien strong {
	font-size: 13px;
	color: var(--fdb-blanco);
	white-space: nowrap;
}

.fdb-opciones__quien {
	gap: 8px;
}

.fdb-opciones__orden {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fdb-chip {
	position: relative;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--fdb-demo-linea);
	background: transparent;
	color: var(--fdb-demo-control);
	font: 500 11px var(--fdb-fuente-mono);
	letter-spacing: .04em;
	cursor: pointer;
}

.fdb-chip.is-on {
	background: var(--fdb-naranja);
	border-color: var(--fdb-naranja);
	color: #111;
}

.fdb-carril {
	flex: none;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 2px 2px 6px;
}

.fdb-opcion {
	flex: 0 0 138px;
	font: inherit;
	color: inherit;
	scroll-snap-align: start;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--fdb-demo-borde);
	background: #0F141A;
	text-align: left;
	cursor: pointer;
}

.fdb-opcion.is-sel {
	border-color: var(--fdb-naranja);
	background: #141A22;
	box-shadow: 0 14px 30px -18px rgba(249, 115, 22, .8);
}

.fdb-opcion__cabeza {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 10.5px;
}

.fdb-opcion__nombre {
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--fdb-blanco);
	white-space: nowrap;
}

.fdb-opcion__precio {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--fdb-blanco);
}

.fdb-opcion .fdb-fila {
	font-size: 11px;
	line-height: 1.5;
}

.fdb-barra {
	display: block;
	height: 4px;
	margin-bottom: 5px;
	border-radius: 4px;
	background: #1F262F;
	overflow: hidden;
}

.fdb-barra > span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: #5B6470;
}

.fdb-opcion.is-sel .fdb-barra > span,
.fdb-barra.is-full > span {
	background: var(--fdb-naranja);
}

.fdb-eleccion {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--fdb-naranja);
	background: #10151C;
}

.fdb-eleccion__cabeza {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.fdb-eleccion__nombre {
	font-size: 14px;
	font-weight: 700;
	color: var(--fdb-blanco);
}

.fdb-eleccion__sello {
	padding: 4px 8px;
	border-radius: 5px;
	border: 1px solid var(--fdb-naranja);
	color: var(--fdb-naranja);
}

.fdb-eleccion__datos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.fdb-eleccion__rotulo {
	display: block;
	font-size: 10.5px;
}

.fdb-eleccion__total {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--fdb-blanco);
}

.fdb-eleccion__plazos {
	font-size: 11px;
}

.fdb-eleccion__cajas {
	display: flex;
	gap: 8px;
}

.fdb-eleccion__caja {
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--fdb-demo-fondo);
	border: 1px solid var(--fdb-demo-borde);
}

.fdb-eleccion__caja .fdb-mut {
	display: block;
	font-size: 10px;
}

.fdb-eleccion__caja span:last-child {
	font-size: 14px;
	font-weight: 600;
	color: var(--fdb-blanco);
}

.fdb-demo-cta {
	width: 100%;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 8px;
	background: var(--fdb-naranja);
	color: #111;
	font: 700 13px var(--fdb-fuente-mono);
	letter-spacing: .1em;
	cursor: pointer;
}

/* Escena 3: tu pedido */

.fdb-pedido {
	gap: 12px;
	padding: 22px 18px 18px;
	background: radial-gradient(circle at 50% 0%, #1E1408, #0B0F14 55%);
}

.fdb-pedido__ok {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.fdb-pedido__check {
	width: 58px;
	height: 58px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: #16A34A;
	box-shadow: 0 0 0 8px rgba(22, 163, 74, .18), 0 0 40px rgba(22, 163, 74, .5);
}

.fdb-pedido__titulo {
	font-size: 18px;
	color: var(--fdb-blanco);
}

.fdb-pedido__numero {
	font-family: var(--fdb-fuente-titulo);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--fdb-naranja);
}

.fdb-pedido__desde {
	font-size: 11px;
	color: var(--fdb-demo-tenue);
}

.fdb-pedido__pagos {
	display: flex;
	gap: 6px;
	padding: 4px;
	border-radius: 999px;
	background: var(--fdb-panel);
	border: 1px solid var(--fdb-borde);
}

.fdb-pago {
	position: relative;
	flex: 1;
	min-height: 34px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--fdb-demo-gris);
	font: 600 12px var(--fdb-fuente-sans);
	cursor: pointer;
}

.fdb-pago.is-on {
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
}

/* Áreas táctiles ampliadas sin cambiar el dibujo (v30). */
.fdb-lista-chip::before,
.fdb-chip::before,
.fdb-pago::before {
	content: "";
	position: absolute;
	inset: -8px -2px;
}

.fdb-pedido__monto {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 4px;
}

.fdb-pedido__monto .fdb-mut {
	font-size: 11.5px;
}

.fdb-pedido__monto strong {
	font-size: 18px;
	color: var(--fdb-blanco);
}

.fdb-pagina .fdb-seguimiento {
	display: flex;
	flex-direction: column;
	padding: 12px;
	border-radius: 14px;
	background: #10151C;
	border: 1px solid var(--fdb-demo-borde);
}

.fdb-seguimiento__paso {
	display: flex;
	gap: 10px;
}

.fdb-seguimiento__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fdb-seguimiento__punto {
	flex: none;
	width: 12px;
	height: 12px;
	margin-top: 2px;
	border-radius: 999px;
	border: 2px solid var(--fdb-borde-2);
}

.fdb-seguimiento__paso.is-hecho .fdb-seguimiento__punto {
	border: 0;
	background: var(--fdb-naranja);
}

.fdb-seguimiento__paso.is-actual .fdb-seguimiento__punto {
	box-shadow: 0 0 0 5px rgba(249, 115, 22, .22);
}

.fdb-seguimiento__linea {
	flex: 1;
	width: 2px;
	min-height: 12px;
	background: #1F2530;
}

.fdb-seguimiento__paso.is-hecho:not(.is-actual) .fdb-seguimiento__linea {
	background: var(--fdb-naranja);
}

.fdb-seguimiento__paso:last-child .fdb-seguimiento__linea {
	display: none;
}

.fdb-seguimiento__textos {
	display: flex;
	flex-direction: column;
	padding-bottom: 8px;
}

.fdb-seguimiento__titulo {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fdb-tenue);
}

.fdb-seguimiento__paso.is-hecho .fdb-seguimiento__titulo {
	color: var(--fdb-texto);
}

.fdb-seguimiento__nota {
	font-size: 10.5px;
	color: var(--fdb-tenue);
}

.fdb-pedido__factura {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--fdb-verde-oscuro);
	border: 1px solid #1F5130;
	color: #86EFAC;
	font-size: 11.5px;
}

/* Pestañas */

.fdb-pestanas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.fdb-pestana {
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border-radius: 14px;
	border: 1px solid var(--fdb-borde-claro);
	background: var(--fdb-blanco);
	color: var(--fdb-tinta-3);
	font-family: var(--fdb-fuente);
	cursor: pointer;
}

.fdb-pestana:hover {
	border-color: #C9C2B5;
	color: var(--fdb-tinta);
}

.fdb-pestana.is-on {
	background: var(--fdb-tinta);
	border-color: var(--fdb-tinta);
	color: var(--fdb-blanco);
	box-shadow: 0 14px 30px -14px rgba(20, 23, 29, .5);
	transform: translateY(-2px);
}

.fdb-pestana__num {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: #F4F0E9;
	color: var(--fdb-tinta-3);
	font-family: var(--fdb-fuente-titulo);
	font-size: 15px;
	font-weight: 800;
}

.fdb-pestana.is-on .fdb-pestana__num {
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
}

.fdb-pestana__textos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fdb-pestana__textos strong {
	font-size: 13px;
	font-weight: 700;
}

.fdb-pestana__textos span {
	font-size: 11px;
}

/* ---------- Beneficios ---------- */

.fdb-beneficios {
	background: var(--fdb-fondo-2);
	border-top: 1px solid var(--fdb-separador);
}

.fdb-beneficios__interior {
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 32px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.fdb-beneficios__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.fdb-beneficio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	border-radius: 18px;
	background: var(--fdb-panel);
	border: 1px solid #1F2530;
}

.fdb-beneficio__titulo {
	font-family: var(--fdb-fuente);
	font-size: 19px;
	font-weight: 700;
	color: var(--fdb-texto);
}

.fdb-beneficio__texto {
	font-size: 15px;
	line-height: 1.5;
	color: var(--fdb-texto-3);
}

/* ---------- Preguntas ---------- */

.fdb-preguntas {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 96px max(32px, calc((100% - 856px) / 2));
	background: radial-gradient(ellipse at 20% 20%, rgba(251, 191, 36, .22), rgba(251, 191, 36, 0) 55%), linear-gradient(180deg, var(--fdb-crema), var(--fdb-crema-2));
	color: var(--fdb-tinta);
}

.fdb-preguntas .fdb-encabezado__titulo {
	font-size: clamp(36px, 4.5vw, 52px);
}

.fdb-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fdb-faq__item {
	overflow: hidden;
	border-radius: 16px;
	background: var(--fdb-blanco);
	border: 1px solid var(--fdb-borde-claro);
	box-shadow: 0 10px 28px -20px rgba(120, 80, 20, .35);
}

.fdb-faq__pregunta {
	font-size: inherit;
	font-weight: inherit;
}

.fdb-faq__boton {
	width: 100%;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	border: none;
	background: none;
	color: var(--fdb-tinta);
	font-family: var(--fdb-fuente);
	font-size: 17px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.fdb-faq__boton svg {
	flex: none;
}

.fdb-faq__boton[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.fdb-faq__respuesta {
	padding: 0 22px 20px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--fdb-tinta-2);
}

/* Sin JS se ven todas las respuestas; con JS, solo la abierta. */
.fdb-js .fdb-faq__item:not(.is-abierta) .fdb-faq__respuesta {
	display: none;
}

/* ---------- Llamada final ---------- */

.fdb-final {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 32px;
}

.fdb-final__caja {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 44px 40px;
	border-radius: 28px;
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
}

.fdb-final__texto {
	flex: 1 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fdb-final__titulo {
	font-family: var(--fdb-fuente-titulo);
	font-size: clamp(26px, 2.5vw, 36px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--fdb-sobre-naranja);
}

.fdb-final__texto p {
	font-size: 17px;
	color: var(--fdb-final-texto);
}

.fdb-final__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Pie ---------- */

.fdb-pie {
	border-top: 1px solid var(--fdb-separador);
}

.fdb-pie__interior {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--fdb-tenue);
}

.fdb-pie__enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 18px;
}

.fdb-pagina .fdb-pie__enlaces a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fdb-tenue);
}

.fdb-pagina .fdb-pie__enlaces a:hover {
	color: var(--fdb-texto);
}

.fdb-pie__etiqueta {
	color: var(--fdb-texto-3);
}

/* ---------- Registro y legales (F3, pagina-publico-b2b.php) ---------- */

/* Gana a body.fd-registro-b2b-pagina main (fd-registro-b2b.css). */
body.fd-publico-b2b main.fdb-documento {
	margin: 0;
	padding: 56px 32px 72px;
	background: var(--fdb-crema);
	color: var(--fdb-tinta);
	font-family: var(--fdb-fuente);
	font-size: 17px;
	line-height: 1.65;
}

.fdb-documento__interior {
	max-width: 760px;
	margin: 0 auto;
}

.fdb-pagina .fdb-documento a {
	color: var(--fdb-marron);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fdb-pagina .fdb-documento a:hover {
	color: var(--fdb-tinta);
}

.fdb-pagina .fdb-documento a:focus-visible {
	outline-color: var(--fdb-marron);
}

/* El registro conserva su título centrado con la raya (fd-registro-b2b.css). */
.fdb-pagina .fdb-documento--legal .wp-block-post-title {
	margin: 0 0 32px;
	font-family: var(--fdb-fuente-titulo);
	font-size: clamp(34px, 5vw, 48px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--fdb-tinta);
}

.fdb-pagina .fdb-documento--legal h2 {
	margin: 40px 0 12px;
	font-family: var(--fdb-fuente);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fdb-tinta);
}

.fdb-pagina .fdb-documento--legal h3 {
	margin: 28px 0 8px;
	font-family: var(--fdb-fuente);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fdb-tinta);
}

.fdb-pagina .fdb-documento--legal p {
	margin: 0 0 16px;
}

.fdb-pagina .fdb-documento--legal ul,
.fdb-pagina .fdb-documento--legal ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.fdb-pagina .fdb-documento--legal ul {
	list-style: disc;
}

.fdb-pagina .fdb-documento--legal ol {
	list-style: decimal;
}

.fdb-pagina .fdb-documento--legal li {
	margin: 0 0 6px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.fdb-beneficios__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.fdb-escenario { height: 520px; }
	.fdb-fantasma { display: none; }
	.fdb-pestana { padding: 6px 10px 6px 6px; }
	.fdb-pestana__textos span { display: none; }
	.fdb-equipo__base { left: -1%; width: 102%; }
	/* El dispositivo cabe en el escenario (en el diseño se salía). */
	.fdb-equipo { height: 440px; }
	.fdb-equipo.fdb-equipo--tablet { height: 500px; }
	.fdb-nodo__nombre { display: none; }
	.fdb-nodo__codigo { display: block; }
	.fdb-nodo__tarjeta { display: none; }
	.fdb-mapa__centro { width: 72px; height: 72px; }
	.fdb-mapa__centro-titulo { font-size: 12px; }
	.fdb-mapa__centro-sub { display: none; }
}

@media (max-width: 700px) {
	.fdb-una-linea { white-space: normal; }
}

@media (max-width: 640px) {
	.fdb-cabecera,
	.fdb-portada,
	.fdb-beneficios__interior,
	.fdb-final,
	.fdb-pie__interior {
		padding-left: 16px;
		padding-right: 16px;
	}
	body.fd-publico-b2b main.fdb-documento {
		padding: 40px 16px 56px;
	}
	.fdb-pagina .fdb-franja__interior {
		padding-left: 16px;
		padding-right: 16px;
	}
	.fdb-como,
	.fdb-preguntas {
		padding: 64px 16px;
	}
	.fdb-beneficios__interior { padding-top: 64px; padding-bottom: 64px; }
	.fdb-final { padding-top: 56px; padding-bottom: 56px; }
	.fdb-final__caja { padding: 32px 22px; }
	/* En el celular quedan Ingresar y Registrar; las anclas sobran. */
	.fdb-pagina .fdb-nav .fdb-nav__ancla { display: none; }
	.fdb-onodo__sub { display: none; }
	.fdb-onodo { width: 96px; }
	.fdb-onodo__titulo { font-size: 12px; }
	.fdb-onodo__ico { width: 36px; height: 36px; }
	.fdb-orbita__nucleo { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
	.fdb-orbita__fersho,
	.fdb-orbita__fersho svg { width: 76px; height: 76px; }
	.fdb-burbuja { min-width: 150px; max-width: 190px; top: 57%; }
	.fdb-criterios { padding-left: 14px; }
}

@media (max-width: 600px) {
	.fdb-beneficios__lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 420px) {
	.fdb-escenario { height: 480px; }
	.fdb-equipo { height: 400px; }
	.fdb-equipo.fdb-equipo--tablet { height: 460px; }
}

/* ---------- Demo animada (F2b) ----------
   fd-home-b2b.js pone .fdb-anima en #portada y #como solo cuando la demo
   corre (sin movimiento reducido). Sin JS, sin .fdb-anima o con
   prefers-reduced-motion queda el estado fijo de arriba. Todo lo que se
   mueve usa solo transform y opacity; los textos ya vienen del servidor y el
   JS solo cambia clases y atributos (hidden, data-*, style transform/order). */

/* Piezas que solo existen en la demo animada (ocultas en el estado fijo). */
.fdb-orbita__viaje,
.fdb-fz-escena,
.fdb-mapa__radar,
.fdb-mapa__viaje,
.fdb-mapa__buscando,
.fdb-opciones__pensando,
.fdb-puente,
.fdb-demo-cta__hecho {
	display: none;
}

.fdb-chat__variante {
	display: contents;
}

/* Fersho AI viaja de cada paso de la órbita al centro (antes: trazo animado). */
.fdb-orbita__viaje {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.fdb-orbita__viaje > span {
	position: absolute;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 999px;
	background: var(--fdb-naranja-suave);
	box-shadow: 0 0 8px var(--fdb-naranja);
}

.fdb-orbita__viaje[data-nodo="0"] { --fdb-vx: 32%; --fdb-vy: 28%; }
.fdb-orbita__viaje[data-nodo="0"] > span { left: 18%; top: 12%; }
.fdb-orbita__viaje[data-nodo="1"] { --fdb-vx: -32%; --fdb-vy: 28%; }
.fdb-orbita__viaje[data-nodo="1"] > span { left: 82%; top: 12%; }
.fdb-orbita__viaje[data-nodo="2"] { --fdb-vx: -38%; --fdb-vy: -10%; }
.fdb-orbita__viaje[data-nodo="2"] > span { left: 88%; top: 50%; }
.fdb-orbita__viaje[data-nodo="3"] { --fdb-vx: -22%; --fdb-vy: -44%; }
.fdb-orbita__viaje[data-nodo="3"] > span { left: 72%; top: 84%; }
.fdb-orbita__viaje[data-nodo="4"] { --fdb-vx: 22%; --fdb-vy: -44%; }
.fdb-orbita__viaje[data-nodo="4"] > span { left: 28%; top: 84%; }
.fdb-orbita__viaje[data-nodo="5"] { --fdb-vx: 38%; --fdb-vy: -10%; }
.fdb-orbita__viaje[data-nodo="5"] > span { left: 12%; top: 50%; }

.fdb-chat__pensando {
	display: flex;
	gap: 4px;
	width: 54px;
}

.fdb-tdot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--fdb-demo-tenue);
}

.fdb-enviar.is-press {
	background: #EA580C;
	transform: scale(.9);
}

/* Escena 1: radar, aviso de búsqueda y el pedido viajando a cada aliado. */
.fdb-mapa__radar {
	position: absolute;
	left: 50%;
	top: 57.87%;
	width: 260%;
	aspect-ratio: 1;
	pointer-events: none;
	background: conic-gradient(from 0deg, rgba(249, 115, 22, .22), transparent 18%);
	transform: translate(-50%, -50%);
}

.fdb-mapa__buscando {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 4;
	transform: translateX(-50%);
	font-size: 12px;
	color: var(--fdb-naranja);
	white-space: nowrap;
}

.fdb-mapa__viaje {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.fdb-mapa__viaje > span {
	position: absolute;
	left: 50%;
	top: 57.87%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 999px;
	background: var(--fdb-naranja);
	box-shadow: 0 0 6px var(--fdb-naranja);
}

.fdb-mapa__viaje[data-aliado="a01"] { --fdb-vx: -32.5%; --fdb-vy: -34.47%; }
.fdb-mapa__viaje[data-aliado="a04"] { --fdb-vx: -15.5%; --fdb-vy: -43.83%; }
.fdb-mapa__viaje[data-aliado="a05"] { --fdb-vx: 16.5%; --fdb-vy: -43.83%; }
.fdb-mapa__viaje[data-aliado="a06"] { --fdb-vx: 33%; --fdb-vy: -32.76%; }
.fdb-mapa__viaje[data-aliado="a02"] { --fdb-vx: -36.5%; --fdb-vy: 2.77%; }
.fdb-mapa__viaje[data-aliado="a07"] { --fdb-vx: 38.5%; --fdb-vy: 14.47%; }
.fdb-mapa__viaje[data-aliado="a03"] { --fdb-vx: -25.5%; --fdb-vy: 31.07%; }
.fdb-mapa__viaje[data-aliado="loc"] { --fdb-vx: 25%; --fdb-vy: 31.49%; }

/* Escena 2: Fersho AI ordena las opciones; elección hecha. */
.fdb-opciones__pensando {
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 30px 20px;
	text-align: center;
}

.fdb-opciones__fersho {
	position: relative;
	width: 150px;
	height: 150px;
	display: grid;
	place-items: center;
}

.fdb-opciones__anillo {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px dashed rgba(249, 115, 22, .45);
}

.fdb-opciones__anillo::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 999px;
	background: var(--fdb-naranja);
	box-shadow: 0 0 12px var(--fdb-naranja);
}

.fdb-opciones__textos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.fdb-opciones__textos strong {
	font-size: 16px;
	color: var(--fdb-blanco);
}

.fdb-opciones__textos > span {
	font-size: 12px;
	color: var(--fdb-demo-tenue);
}

.fdb-opciones__puntos {
	display: flex;
	gap: 5px;
	margin-top: 2px;
}

.fdb-opciones__puntos .fdb-tdot {
	background: var(--fdb-naranja);
}

.fdb-eleccion__sello--faltan {
	border-color: #3A424E;
	color: var(--fdb-demo-control);
}

.fdb-demo-cta.is-hecho {
	background: #15803D;
	color: var(--fdb-blanco);
}

.fdb-demo-cta.is-hecho .fdb-demo-cta__elegir {
	display: none;
}

.fdb-demo-cta.is-hecho .fdb-demo-cta__hecho {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Puentes entre escenas: el botón «Buscar en la red» se vuelve el círculo
   «Tu pedido» (0 → 1) y los aliados vuelan hacia Fersho AI (1 → 2). */
.fdb-puente {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	font-family: var(--fdb-fuente-mono);
}

.fdb-puente__viaje {
	position: absolute;
	inset: 0;
}

.fdb-puente__boton,
.fdb-puente__centro,
.fdb-puente__onda {
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
}

.fdb-puente__boton {
	width: 140px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--fdb-naranja);
	color: var(--fdb-sobre-naranja);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.fdb-puente__centro {
	width: 118px;
	height: 118px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border: 1.5px solid var(--fdb-naranja);
	background: #0D1117;
	box-shadow: 0 0 40px -6px rgba(249, 115, 22, .6);
	opacity: 0;
}

.fdb-puente__centro strong {
	font-size: 15px;
	color: var(--fdb-blanco);
}

.fdb-puente__centro span {
	font-size: 10.5px;
	color: var(--fdb-demo-tenue);
}

.fdb-puente__onda {
	width: 118px;
	height: 118px;
	border: 2px solid var(--fdb-naranja);
	opacity: 0;
}

.fdb-puente__vuelo {
	position: absolute;
	inset: 0;
}

.fdb-puente__ficha {
	position: absolute;
	left: 50%;
	top: 42%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 7px 10px;
	border-radius: 8px;
	background: #11161D;
	border: 1px solid var(--fdb-demo-linea);
	color: var(--fdb-demo-texto);
	font-size: 10.5px;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.fdb-puente__ficha b {
	letter-spacing: .06em;
	color: var(--fdb-blanco);
}

.fdb-puente__ficha span {
	color: var(--fdb-demo-tenue);
}

.fdb-puente__ficha.is-sel {
	border-color: var(--fdb-naranja);
	background: #141A22;
	box-shadow: 0 10px 30px -10px rgba(249, 115, 22, .8);
}

.fdb-puente__vuelo[data-aliado="a06"] { --fdb-vx: 32.0%; --fdb-vy: -8.9%; --fdb-d: 0.00s; }
.fdb-puente__vuelo[data-aliado="a07"] { --fdb-vx: 37.3%; --fdb-vy: 25.1%; --fdb-d: 0.05s; }
.fdb-puente__vuelo[data-aliado="a04"] { --fdb-vx: -15.0%; --fdb-vy: -16.9%; --fdb-d: 0.10s; }
.fdb-puente__vuelo[data-aliado="a02"] { --fdb-vx: -35.4%; --fdb-vy: 16.7%; --fdb-d: 0.15s; }
.fdb-puente__vuelo[data-aliado="a05"] { --fdb-vx: 16.0%; --fdb-vy: -16.9%; --fdb-d: 0.20s; }
.fdb-puente__vuelo[data-aliado="a01"] { --fdb-vx: -31.5%; --fdb-vy: -10.1%; --fdb-d: 0.25s; }
.fdb-puente__vuelo[data-aliado="loc"] { --fdb-vx: 24.2%; --fdb-vy: 37.3%; --fdb-d: 0.30s; }
.fdb-puente__vuelo[data-aliado="a03"] { --fdb-vx: -24.7%; --fdb-vy: 37.0%; --fdb-d: 0.35s; }

/* Estados de la demo (solo con .fdb-anima). */
.fdb-anima .fdb-orbita__viaje.is-on,
.fdb-anima .fdb-mapa__viaje.is-on,
.fdb-anima .fdb-red.is-buscando .fdb-mapa__radar,
.fdb-anima .fdb-red.is-buscando .fdb-mapa__buscando,
.fdb-anima .fdb-puente.is-on {
	display: block;
}

.fdb-anima .fdb-opciones.is-pensando .fdb-opciones__pensando {
	display: flex;
}

.fdb-anima .fdb-red.is-buscando .fdb-nodo,
.fdb-anima .fdb-red.is-buscando .fdb-mapa__linea,
.fdb-anima .fdb-opciones.is-pensando .fdb-carril,
.fdb-anima .fdb-opciones.is-pensando .fdb-eleccion {
	display: none;
}

/* Escena que sale y equipo que sale: se quedan visibles debajo de la que
   entra hasta que termina la transición (sin pantallas vacías). */
.fdb-como.fdb-anima .fdb-escena.is-sale {
	display: flex;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.fdb-como.fdb-anima .fdb-equipo.is-sale {
	display: flex;
	z-index: 1;
	pointer-events: none;
}

.fdb-como.fdb-anima .fdb-escena.is-entra,
.fdb-como.fdb-anima .fdb-equipo.is-entra {
	z-index: 2;
}

.fdb-como.fdb-anima .fdb-pantalla::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 48%, rgba(255, 255, 255, 0) 60%);
	transform: translateX(-120%);
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes fdb-pulso { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
	@keyframes fdb-ping { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
	@keyframes fdb-gira { to { transform: rotate(360deg); } }
	@keyframes fdb-radar { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
	@keyframes fdb-burbuja-a { from { opacity: 0; transform: translate(-50%, 8px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
	@keyframes fdb-burbuja-b { from { opacity: 0; transform: translate(-50%, 8px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
	@keyframes fdb-viaje { 0% { opacity: 0; transform: translate(0, 0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--fdb-vx), var(--fdb-vy)); } }
	@keyframes fdb-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
	@keyframes fdb-mira { 0%, 30% { transform: translate(0, 0); } 38%, 55% { transform: translate(-3px, 0); } 63%, 82% { transform: translate(3px, -1px); } 90%, 100% { transform: translate(0, 0); } }
	@keyframes fdb-titila { 50% { opacity: .3; } }
	@keyframes fdb-salta { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
	@keyframes fdb-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
	@keyframes fdb-aparece { from { opacity: 0; } }
	@keyframes fdb-nodo { from { opacity: 0; transform: translate(-50%, -9px) scale(.8); } to { opacity: 1; transform: translate(-50%, -9px) scale(1); } }
	@keyframes fdb-onda { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
	@keyframes fdb-envia { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25, 1.6); } }
	@keyframes fdb-ok { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
	@keyframes fdb-llega { 0% { opacity: 0; transform: scale(.2) rotate(-20deg); } 70% { transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
	@keyframes fdb-entra-d { 0% { opacity: .2; transform: translateX(75%) scale(.9) rotate(1.5deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
	@keyframes fdb-entra-a { 0% { opacity: .2; transform: translateX(-75%) scale(.9) rotate(-1.5deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
	@keyframes fdb-sale-d { 0% { opacity: 1; transform: none; } 60% { opacity: .9; } 100% { opacity: 0; transform: translateX(-30%) scale(.86); } }
	@keyframes fdb-sale-a { 0% { opacity: 1; transform: none; } 60% { opacity: .9; } 100% { opacity: 0; transform: translateX(30%) scale(.86); } }
	@keyframes fdb-sale-f { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }
	@keyframes fdb-entra-r { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
	@keyframes fdb-entra-f { from { opacity: 0; } to { opacity: 1; } }
	@keyframes fdb-equipo-a { 0% { transform: none; } 35% { transform: translateY(10px) scale(.965); } 100% { transform: none; } }
	@keyframes fdb-equipo-b { 0% { transform: none; } 35% { transform: translateY(10px) scale(.965); } 100% { transform: none; } }
	@keyframes fdb-reflejo-a { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
	@keyframes fdb-reflejo-b { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
	@keyframes fdb-puente-fin { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
	@keyframes fdb-puente-viaje { 0%, 12% { transform: translate(38%, 34%); } 45% { transform: translate(24%, 12%); } 100% { transform: translate(0, 0); } }
	@keyframes fdb-puente-boton { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 12% { transform: translate(-50%, -50%) scale(1.07); } 40% { opacity: 1; } 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
	@keyframes fdb-puente-centro { 0%, 40% { opacity: 0; transform: translate(-50%, -50%) scale(.36); } 80% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
	@keyframes fdb-puente-onda { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); } }
	@keyframes fdb-vuelo { 0%, 18% { transform: translate(var(--fdb-vx), var(--fdb-vy)); } 80%, 100% { transform: translate(0, 0); } }
	@keyframes fdb-ficha { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(.45); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } }

	/* Portada */
	.fdb-anima .fdb-orbita__chispa { animation: fdb-pulso 3.2s ease-in-out infinite; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(2) { animation-delay: .37s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(3) { animation-delay: .74s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(4) { animation-delay: 1.11s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(5) { animation-delay: 1.48s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(6) { animation-delay: 1.85s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(7) { animation-delay: 2.22s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(8) { animation-delay: 2.59s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(9) { animation-delay: 2.96s; }
	.fdb-anima .fdb-orbita__chispa:nth-of-type(10) { animation-delay: 3.33s; }
	.fdb-anima .fdb-orbita__ping { animation: fdb-ping 2.6s ease-out infinite; }
	.fdb-anima .fdb-orbita__ping--2 { animation-delay: 1.3s; }
	.fdb-anima .fdb-orbita__anillo { animation: fdb-gira 22s linear infinite; }
	.fdb-anima .fdb-orbita__fersho { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-orbita__fersho > svg { animation: fdb-flota 3.4s ease-in-out infinite; }
	.fdb-anima .fdb-orbita__fersho .fd-fz-cara { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-orbita__viaje.is-on { animation: fdb-viaje 1.3s linear infinite; }
	.fdb-anima .fdb-onodo__ico { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-burbuja.is-a { animation: fdb-burbuja-a .45s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-burbuja.is-b { animation: fdb-burbuja-b .45s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-burbuja .fdb-punto { animation: fdb-titila 1s ease-in-out infinite; }

	/* Fersho AI: parpadea y mira alrededor (el de la órbita y los mini, solo parpadean). */
	.fdb-anima .fd-fz .fd-fz-ojo { transform-box: fill-box; transform-origin: center; animation: fdb-parpadeo 4.2s infinite; }
	.fdb-anima .fd-fz:not(.fd-fz-quieto):not(.fd-fz-mini) .fd-fz-mira { animation: fdb-mira 7s ease-in-out infinite; }

	/* Pasos, pestañas, fantasmas y equipo */
	.fdb-anima .fdb-paso { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-paso__barra span { transition: transform .42s linear; }
	.fdb-anima .fdb-pestana { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-fantasma { transition: transform 1s cubic-bezier(.2, .8, .2, 1) .1s, opacity 1s .1s; }
	.fdb-anima .fdb-equipo.is-mov-a { animation: fdb-equipo-a .8s cubic-bezier(.65, 0, .25, 1); }
	.fdb-anima .fdb-equipo.is-mov-b { animation: fdb-equipo-b .8s cubic-bezier(.65, 0, .25, 1); }
	.fdb-anima .fdb-equipo.is-mov-a .fdb-pantalla::after { animation: fdb-reflejo-a 1.1s .55s ease-out both; }
	.fdb-anima .fdb-equipo.is-mov-b .fdb-pantalla::after { animation: fdb-reflejo-b 1.1s .55s ease-out both; }
	.fdb-anima .fdb-equipo.is-entra-d { animation: fdb-entra-d .8s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-equipo.is-entra-a { animation: fdb-entra-a .8s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-equipo.is-sale-d { animation: fdb-sale-d .7s cubic-bezier(.4, 0, .2, 1) both; }
	.fdb-anima .fdb-equipo.is-sale-a { animation: fdb-sale-a .7s cubic-bezier(.4, 0, .2, 1) both; }

	/* Transiciones entre escenas del mismo equipo */
	.fdb-anima .fdb-escena.is-entra-d { animation: fdb-entra-d .8s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-escena.is-entra-a { animation: fdb-entra-a .8s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-escena.is-sale-d { animation: fdb-sale-d .7s cubic-bezier(.4, 0, .2, 1) both; }
	.fdb-anima .fdb-escena.is-sale-a { animation: fdb-sale-a .7s cubic-bezier(.4, 0, .2, 1) both; }
	.fdb-anima .fdb-escena.is-sale-f { animation: fdb-sale-f .7s .5s ease-in both; }
	.fdb-anima .fdb-escena.is-entra-r { transform-origin: 50% 57%; animation: fdb-entra-r .85s 1.05s cubic-bezier(.4, 0, .2, 1) both; }
	.fdb-anima .fdb-escena.is-entra-f { animation: fdb-entra-f .5s .55s ease-out both; }
	.fdb-anima .fdb-puente.is-on { animation: fdb-puente-fin 2s linear both; }
	.fdb-anima .fdb-puente.is-on .fdb-puente__viaje { animation: fdb-puente-viaje 1.1s .05s cubic-bezier(.65, 0, .25, 1) both; }
	.fdb-anima .fdb-puente.is-on .fdb-puente__boton { animation: fdb-puente-boton 1.1s .05s cubic-bezier(.65, 0, .25, 1) both; }
	.fdb-anima .fdb-puente.is-on .fdb-puente__centro { animation: fdb-puente-centro 1.1s .05s cubic-bezier(.65, 0, .25, 1) both; }
	.fdb-anima .fdb-puente.is-on .fdb-puente__onda { animation: fdb-puente-onda 1s 1.15s ease-out forwards; }
	.fdb-anima .fdb-puente.is-on .fdb-puente__vuelo { animation: fdb-vuelo 1.15s cubic-bezier(.6, 0, .25, 1) both; animation-delay: var(--fdb-d); }
	.fdb-anima .fdb-puente.is-on .fdb-puente__ficha { animation: fdb-ficha 1.15s cubic-bezier(.6, 0, .25, 1) both; animation-delay: var(--fdb-d); }

	/* Escena 0: fd-fersho-escena.css */
	.fdb-anima .fdb-chat.is-intro-sale > .fdb-chat__cabeza { animation: fdb-sube .45s .12s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-chat.is-intro-sale > .fdb-chat__listas { animation: fdb-sube .45s .18s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-chat.is-intro-sale > .fdb-chat__mensajes { animation: fdb-sube .45s .24s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-chat.is-intro-sale > .fdb-chat__escribir { animation: fdb-sube .45s .3s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-chat.is-intro-sale .fdb-chat__fersho { animation: fdb-llega .6s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-cursor { animation: fdb-titila 1s ease-in-out infinite; }
	.fdb-anima .fdb-tdot { animation: fdb-salta 1s infinite; }
	.fdb-anima .fdb-tdot:nth-child(2) { animation-delay: .15s; }
	.fdb-anima .fdb-tdot:nth-child(3) { animation-delay: .3s; }
	.fdb-anima .fdb-chat__entendido,
	.fdb-anima .fdb-linea-lista { animation: fdb-sube-suave .5s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-enviar { transition: transform .3s; }
	.fdb-anima .fdb-enviar.is-listo:not(.is-press)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--fdb-naranja); pointer-events: none; animation: fdb-envia 1.4s ease-out infinite; }

	/* Escena 1 */
	.fdb-anima .fdb-red.is-buscando .fdb-mapa__radar { animation: fdb-radar 1.4s linear infinite; }
	.fdb-anima .fdb-red.is-buscando .fdb-mapa__buscando { animation: fdb-titila 1s ease-in-out infinite; }
	.fdb-anima .fdb-mapa__onda { animation: fdb-onda 2.4s ease-out infinite; }
	.fdb-anima .fdb-mapa__onda--2 { animation-delay: 1.2s; }
	.fdb-anima .fdb-mapa__viaje.is-on { animation: fdb-viaje 1.6s linear infinite; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo { animation: fdb-nodo .5s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-red.is-lista .fdb-mapa__linea { animation: fdb-aparece .9s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a01"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a01"] { animation-delay: 0.10s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a04"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a04"] { animation-delay: 0.17s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a05"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a05"] { animation-delay: 0.24s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a06"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a06"] { animation-delay: 0.31s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a02"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a02"] { animation-delay: 0.38s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a07"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a07"] { animation-delay: 0.45s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="a03"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="a03"] { animation-delay: 0.52s; }
	.fdb-anima .fdb-red.is-lista .fdb-nodo[data-aliado="loc"],
		.fdb-anima .fdb-red.is-lista .fdb-mapa__linea[data-aliado="loc"] { animation-delay: 0.59s; }
	.fdb-anima .fdb-nodo__punto { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-en-vivo span { animation: fdb-titila 1s ease-in-out infinite; }

	/* Escena 2 */
	.fdb-anima .fdb-opciones__anillo { animation: fdb-gira 6s linear infinite; }
	.fdb-anima .fdb-opciones__flota { animation: fdb-flota 2.6s ease-in-out infinite; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion,
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-eleccion { animation: fdb-sube-suave .5s cubic-bezier(.2, .8, .2, 1) both; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(2) { animation-delay: .05s; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(3) { animation-delay: .1s; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(4) { animation-delay: .15s; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(5) { animation-delay: .2s; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(6) { animation-delay: .25s; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(7) { animation-delay: .3s; }
	.fdb-anima .fdb-opciones:not(.is-pensando) .fdb-opcion:nth-child(8) { animation-delay: .35s; }
	.fdb-anima .fdb-opcion { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
	.fdb-anima .fdb-opcion:hover { transform: translateY(-3px); }
	.fdb-anima .fdb-demo-cta:active { transform: scale(.98); }

	/* Escena 3 */
	.fdb-anima .fdb-pedido__check { animation: fdb-ok .6s .4s cubic-bezier(.2, .8, .2, 1) both; }
}

@media (max-width: 760px) {
	/* En el celular el botón no viaja (como en el diseño): solo el mapa entra. */
	.fdb-anima .fdb-puente--red.is-on { display: none; }
}