/* Botería Negreiros — Diseño a tu medida
   Sistema monocromo a propósito: el único color en pantalla es el del cuero.
   La costura punteada es el elemento estructural, tomado del pespunte a mano.

   Todo va prefijado con .bn-conf y con especificidad suficiente para no
   pelearse con XStore, Elementor ni ningún otro tema. */

.bn-conf {
	--bn-ink: #17150F;
	--bn-ink-70: rgba(23,21,15,.78);
	--bn-tenue: rgba(23,21,15,.58);
	--bn-superficie: rgba(23,21,15,.045);
	--bn-lienzo: rgba(23,21,15,.03);
	--bn-campo: rgba(23,21,15,.05);
	--bn-linea: rgba(23,21,15,.2);
	--bn-linea-fuerte: rgba(23,21,15,.38);
	--bn-btn-bg: #17150F;
	--bn-btn-tx: #FFFFFF;
	--bn-alerta: #A33B2A;
	--bn-r: 3px;

	font-family: var(--bn-sans, inherit);
	font-size: 16px;
	color: var(--bn-ink);
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;

	box-sizing: border-box;
	width: 100%;
}

/*
 * El exterior lleva el fondo y puede ocupar toda la ventana.
 * El interior es el que limita el ancho del contenido y lo centra.
 */
.bn-conf .bn-conf-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--bn-ancho, 1180px), calc(100vw - 2rem));
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
}

/* Ancho de pantalla completa: el JS calcula el desplazamiento real */
.bn-conf--pantalla { max-width: none; }

/* Alto mínimo con el contenido centrado verticalmente */
.bn-conf--alto .bn-conf-inner {
	min-height: var(--bn-alto, 70vh);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bn-conf--fondo {
	background: var(--bn-fondo);
	border-radius: var(--bn-r);
}

.bn-conf--fondo .bn-conf-inner {
	padding-top: clamp(24px, 4vw, 52px);
	padding-bottom: clamp(24px, 4vw, 52px);
}

/* A pantalla completa las esquinas redondeadas sobran */
.bn-conf--pantalla.bn-conf--fondo { border-radius: 0; }

/* ---------- Tarjeta de taller ----------
   El hero como pieza autocontenida: fondo propio, imagen a sangre hasta el
   borde y una costura que enmarca el conjunto. Nada depende del contenedor. */

.bn-conf--tarjeta {
	border-radius: 6px;
	position: relative;
	max-width: min(var(--bn-ancho, 1180px), calc(100vw - 16px));
	margin-left: auto;
	margin-right: auto;
}

/* El pespunte que enmarca la tarjeta, como una etiqueta cosida al cuero */
.bn-conf--tarjeta::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px dashed var(--bn-linea-fuerte);
	border-radius: 3px;
	pointer-events: none;
	z-index: 2;
}

.bn-conf.bn-conf--tarjeta .bn-conf-inner {
	padding: 0;
	max-width: none;
}

.bn-conf.bn-conf--tarjeta .bn-hero {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	margin-bottom: 0;
	min-height: var(--bn-alto, 0);
}

.bn-conf.bn-conf--tarjeta .bn-hero-tx {
	padding: clamp(32px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	order: 1;
}

.bn-conf.bn-conf--tarjeta .bn-hero-img {
	order: 2;
	display: block;
	min-height: 100%;
}

.bn-conf.bn-conf--tarjeta .bn-hero--izq .bn-hero-img { order: 0; }
.bn-conf.bn-conf--tarjeta .bn-hero--izq .bn-hero-tx { order: 1; }

/* La foto llena su mitad hasta los bordes de la tarjeta */
.bn-conf.bn-conf--tarjeta .bn-hero-img > img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: var(--bn-foco, center);
	display: block;
	/* El redondeo va en la imagen, no en la tarjeta: así nada recorta el texto */
	border-radius: 0 6px 6px 0;
}

.bn-conf.bn-conf--tarjeta .bn-hero--izq .bn-hero-img > img { border-radius: 6px 0 0 6px; }

/* Blindaje del texto: la columna nunca puede desbordar su celda */
.bn-conf.bn-conf--tarjeta .bn-hero-tx {
	min-width: 0;
	overflow-wrap: break-word;
}

/* La cascada de croquis, si no hay foto, respira con su propio aire */
.bn-conf.bn-conf--tarjeta .bn-hero-croquis {
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.bn-conf.bn-conf--tarjeta .bn-hero { grid-template-columns: 1fr; min-height: 0; }
	.bn-conf.bn-conf--tarjeta .bn-hero-img { order: 0; max-width: none; }
	.bn-conf.bn-conf--tarjeta .bn-hero-img > img {
		height: clamp(220px, 45vw, 340px);
		border-radius: 6px 6px 0 0;
	}
	.bn-conf.bn-conf--tarjeta .bn-hero-tx { order: 1; padding: clamp(24px, 6vw, 40px); }
	.bn-conf--tarjeta::after { inset: 9px; }
}

/* Nada dentro del bloque puede empujarlo más allá de su ancho */
.bn-conf-inner > *,
.bn-conf .bn-hero,
.bn-conf .bn-rejilla,
.bn-conf .bn-marco { min-width: 0; max-width: 100%; }

.bn-conf *,
.bn-conf *::before,
.bn-conf *::after { box-sizing: border-box; }

.bn-conf p,
.bn-conf h2,
.bn-conf h3,
.bn-conf ul,
.bn-conf li,
.bn-conf hr,
.bn-conf figure {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	background: none;
}

.bn-conf li::before,
.bn-conf li::marker { content: none; display: none; }

/* El tema suele forzar mayúsculas y sombras en botones: los neutralizamos */
.bn-conf button {
	font: inherit;
	font-family: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-text-fill-color: currentColor;
	background-image: none;
	min-height: 0;
	width: auto;
}

.bn-conf button:hover,
.bn-conf button:focus { box-shadow: none; text-decoration: none; }

.bn-conf [hidden] { display: none !important; }

.bn-conf :focus-visible {
	outline: 2px solid var(--bn-ink);
	outline-offset: 3px;
}

/* ---------- Tipografía ---------- */

.bn-conf .bn-eyebrow {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bn-tenue);
	line-height: 1.4;
}

.bn-conf .bn-titulo {
	font-family: var(--bn-serif, inherit);
	font-weight: 400;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.14;
	margin-top: 10px;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--bn-ink);
}

.bn-conf .bn-bajada {
	margin-top: 10px;
	color: var(--bn-ink-70);
	font-size: 15px;
	max-width: 46ch;
}

/* ---------- Hero ---------- */

.bn-conf .bn-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(24px, 5vw, 60px);
	align-items: center;
	margin-bottom: clamp(30px, 5vw, 56px);
}

/* Cascada: el mismo taller en tres cueros, escalonado */
/* Imagen a la derecha (por defecto) o a la izquierda con lado="izquierda" */
.bn-conf .bn-hero--der .bn-hero-img { order: 2; }
.bn-conf .bn-hero--der .bn-hero-tx { order: 1; }

.bn-conf .bn-hero--izq { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.bn-conf .bn-hero--izq .bn-hero-img { order: 1; }
.bn-conf .bn-hero--izq .bn-hero-tx { order: 2; }

.bn-conf .bn-hero-img {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bn-conf .bn-hero-img > img {
	width: 100%;
	height: auto;
	max-height: clamp(280px, 40vw, 460px);
	object-fit: cover;
	display: block;
	border-radius: var(--bn-r);
}

.bn-conf .bn-hero-croquis { display: block; }

.bn-conf .bn-hero-pieza {
	width: 62%;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

/* Se solapan: la cascada ocupa menos alto y se lee como una familia */
.bn-conf .bn-hero-pieza:nth-child(2) { margin: -13% 0 0 19%; }
.bn-conf .bn-hero-pieza:nth-child(3) { margin: -13% 0 0 38%; }
.bn-conf .bn-hero-pieza svg { width: 100%; height: auto; display: block; }
.bn-conf .bn-hero:hover .bn-hero-pieza { transform: translateX(6px); }
.bn-conf .bn-hero:hover .bn-hero-pieza:nth-child(2) { transform: translateX(0); }
.bn-conf .bn-hero:hover .bn-hero-pieza:nth-child(3) { transform: translateX(-6px); }

.bn-conf .bn-hero-tx { min-width: 0; }

.bn-conf .bn-hero-puntos {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bn-conf .bn-hero-puntos li {
	font-size: 14px;
	color: var(--bn-ink-70);
	padding: 10px 0;
	border-top: 1px dashed var(--bn-linea);
}

.bn-conf .bn-hero-puntos li:last-child { border-bottom: 1px dashed var(--bn-linea); }

.bn-conf .bn-hero-cta {
	margin-top: 20px;
	padding: 0 0 3px;
	border-bottom: 1px dashed var(--bn-linea-fuerte);
	transition: border-color .18s ease;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bn-ink);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.bn-conf .bn-hero-cta:hover { border-bottom-color: var(--bn-ink); }
.bn-conf .bn-hero-cta span { font-size: 15px; color: var(--bn-tenue); }

/* ---------- Galería ---------- */

.bn-conf .bn-cab { margin-bottom: 30px; }

.bn-conf .bn-rejilla {
	display: grid;
	/* auto-fit, no auto-fill: con 3 modelos no deja columnas fantasma */
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 14px;
}

.bn-conf .bn-card {
	background: var(--bn-superficie);
	border: 1px solid var(--bn-linea);
	border-radius: var(--bn-r);
	overflow: hidden;
	transition: border-color .18s ease;
}

.bn-conf .bn-card:hover { border-color: var(--bn-linea-fuerte); }

.bn-conf .bn-card-btn {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
}

.bn-conf .bn-card-img {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bn-lienzo);
	border-bottom: 1px solid var(--bn-linea);
	overflow: hidden;
}

.bn-conf .bn-card-num {
	position: absolute;
	top: 12px;
	left: 13px;
	z-index: 2;
	font-family: var(--bn-serif, inherit);
	font-size: 12px;
	color: var(--bn-linea-fuerte);
	letter-spacing: .04em;
}

.bn-conf .bn-card-img img,
.bn-conf .bn-card-croquis {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	padding: 16px 12px;
	transition: transform .4s cubic-bezier(.2,.7,.3,1);
}

.bn-conf .bn-card-croquis svg { width: 100%; height: 100%; }

.bn-conf .bn-card-btn:hover .bn-card-img img,
.bn-conf .bn-card-btn:hover .bn-card-croquis { transform: scale(1.04); }

.bn-conf .bn-card-pie {
	display: block;
	padding: 15px 16px 17px;
}

.bn-conf .bn-card-nombre {
	display: block;
	font-family: var(--bn-serif, inherit);
	font-size: 19px;
	line-height: 1.25;
	color: var(--bn-ink);
}

.bn-conf .bn-card-precio {
	display: block;
	font-size: 13px;
	color: var(--bn-tenue);
	margin-top: 3px;
}

.bn-conf .bn-card-cta {
	display: inline-block;
	margin-top: 13px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-bottom: 3px;
	color: var(--bn-ink);
	border-bottom: 1px dashed var(--bn-linea-fuerte);
	transition: border-color .18s ease;
}

.bn-conf .bn-card-btn:hover .bn-card-cta { border-bottom-color: var(--bn-ink); }

/* ---------- Taller ---------- */

.bn-conf .bn-volver {
	padding: 0 0 14px;
	font-size: 13px;
	color: var(--bn-tenue);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.bn-conf .bn-volver:hover { color: var(--bn-ink); }

.bn-conf .bn-marco {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	border: 1px solid var(--bn-linea);
	border-radius: var(--bn-r);
	background: var(--bn-superficie);
	overflow: hidden;
}

/* Lienzo */

.bn-conf .bn-lienzo {
	padding: 18px;
	border-right: 1px solid var(--bn-linea);
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.bn-conf .bn-escena {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bn-lienzo);
	border: 1px dashed var(--bn-linea-fuerte);
	border-radius: var(--bn-r);
	overflow: hidden;
	/* Aísla el multiply: sin esto la mezcla se llevaría por delante el fondo
	   de la sección de Elementor que haya debajo. */
	isolation: isolate;
}

/* Tinte por máscara. mask-size:contain y el centrado replican el object-fit
   de la foto base, para que el recorte caiga píxel a píxel donde debe. */
.bn-conf .bn-tinte {
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background-color .2s ease;
}

.bn-conf .bn-capa {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bn-conf .bn-croquis {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bn-conf .bn-croquis svg { width: 100%; height: 100%; }

/* El contorno del croquis usa currentColor: se aclara sobre fondos oscuros */
.bn-conf .bn-croquis,
.bn-conf .bn-card-croquis,
.bn-conf .bn-hero-croquis { color: var(--bn-ink); }

.bn-conf .bn-croquis path,
.bn-conf .bn-croquis circle,
.bn-conf .bn-croquis rect { transition: fill .22s ease, stroke .22s ease; }

.bn-conf .bn-escena model-viewer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	--poster-color: transparent;
}

/* Aviso de que el 3D es referencial. Abajo a la izquierda: el botón AR de
   model-viewer vive abajo a la derecha y el calzado queda centrado, así que
   esta esquina es la que nunca tapa nada. Mismo lenguaje que el resto del
   sistema: papel, tinta y borde punteado. */
.bn-conf .bn-3d-nota {
	position: absolute;
	left: 12px;
	bottom: 12px;
	max-width: min(78%, 380px);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 10px 9px 13px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--bn-ink);
	background: rgba(255, 255, 255, .92);
	border: 1px dashed var(--bn-linea-fuerte);
	border-radius: var(--bn-r);
	z-index: 2;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .45s ease, transform .45s ease;
}

.bn-conf .bn-3d-nota strong {
	font-weight: 600;
	letter-spacing: .02em;
}

.bn-conf .bn-3d-nota-x {
	flex: 0 0 auto;
	margin: -3px -2px 0 0;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bn-ink-70);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bn-conf .bn-3d-nota-x:hover { color: var(--bn-ink); }

.bn-conf .bn-3d-nota-fuera {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

/* Distintivo residual: queda cuando el aviso se recoge, para que la
   advertencia nunca desaparezca del todo. */
.bn-conf .bn-3d-badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 4px 10px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bn-ink-70);
	background: rgba(255, 255, 255, .85);
	border: 1px dashed var(--bn-linea);
	border-radius: var(--bn-r);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity .45s ease .25s;
}

.bn-conf .bn-3d-badge-dentro { opacity: 1; }

/* En móvil el aviso ocupa el ancho, pero arriba: el botón AR de model-viewer
   queda abajo y es justo en el teléfono donde ese botón importa. El distintivo
   residual sí puede vivir abajo a la izquierda porque es pequeño. */
@media (max-width: 700px) {
	.bn-conf .bn-3d-nota {
		left: 8px;
		right: 8px;
		top: 8px;
		bottom: auto;
		max-width: none;
		font-size: 13px;
	}

	.bn-conf .bn-3d-nota-fuera { transform: translateY(-8px); }

	.bn-conf .bn-3d-badge {
		left: 8px;
		bottom: 8px;
		font-size: 11px;
	}
}

.bn-conf .bn-cedula {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 24px;
}

.bn-conf .bn-cedula-fila {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-bottom: 11px;
	border-bottom: 1px dashed var(--bn-linea);
}

.bn-conf .bn-cedula-fila:last-child { border-bottom: 0; padding-bottom: 0; }

.bn-conf .bn-cedula-tinta {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,.14);
}

.bn-conf .bn-cedula-zona { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bn-tenue); display: block; }
.bn-conf .bn-cedula-opcion { font-family: var(--bn-serif, inherit); font-size: 16px; display: block; }

.bn-conf .bn-vistas { display: flex; gap: 6px; flex-wrap: wrap; }

.bn-conf .bn-vista {
	flex: 1 1 auto;
	border: 1px solid var(--bn-linea);
	padding: 8px 10px;
	font-size: 12px;
	letter-spacing: .05em;
	border-radius: var(--bn-r);
	color: var(--bn-ink-70);
	background: transparent;
	text-align: center;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.bn-conf .bn-vista:hover { border-color: var(--bn-linea-fuerte); }

.bn-conf .bn-vista[aria-pressed="true"] {
	background: var(--bn-btn-bg);
	border-color: var(--bn-btn-bg);
	color: var(--bn-btn-tx);
	-webkit-text-fill-color: var(--bn-btn-tx);
}

/* Panel */

.bn-conf .bn-panel {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bn-conf .bn-panel-cab { margin-bottom: 16px; }

.bn-conf .bn-panel-nombre {
	font-family: var(--bn-serif, inherit);
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.18;
}

.bn-conf .bn-panel-plazo { font-size: 13px; color: var(--bn-tenue); margin-top: 4px; }

/* Riel de pasos: pespunte horizontal, desplazable si no cabe */

.bn-conf .bn-pasos {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 20px;
	padding-bottom: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}

.bn-conf .bn-pasos::-webkit-scrollbar { display: none; }

.bn-conf .bn-paso {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 0;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bn-linea-fuerte);
	transition: color .16s ease;
}

.bn-conf .bn-paso::after {
	content: "";
	width: 18px;
	flex: none;
	border-top: 1px dashed var(--bn-linea-fuerte);
	margin: 0 9px;
}

.bn-conf .bn-paso:last-child::after { display: none; }
.bn-conf .bn-paso[data-visto="1"] { color: var(--bn-ink-70); }
.bn-conf .bn-paso[aria-current="step"] { color: var(--bn-ink); }

.bn-conf .bn-paso-n {
	font-family: var(--bn-serif, inherit);
	font-size: 13px;
	letter-spacing: 0;
}

/* Zona activa */

.bn-conf .bn-zona-nombre { font-family: var(--bn-serif, inherit); font-size: 20px; line-height: 1.25; }
.bn-conf .bn-zona-ayuda { font-size: 13px; color: var(--bn-tenue); margin-top: 3px; }

.bn-conf .bn-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
	gap: 16px 12px;
	margin-top: 16px;
	/* start, no stretch: una muestra con recargo no estira la fila entera */
	align-items: start;
	align-content: start;
}

.bn-conf .bn-sw {
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-self: start;
}

.bn-conf .bn-sw-tinta {
	display: block;
	flex: none;
	width: 100%;
	height: 66px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,.12);
	position: relative;
	transition: transform .16s ease;
}

.bn-conf .bn-sw[aria-pressed="true"] .bn-sw-tinta::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px dashed var(--bn-ink);
	border-radius: 4px;
}

.bn-conf .bn-sw:hover .bn-sw-tinta { transform: translateY(-2px); }

.bn-conf .bn-sw-tx {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 10px;
}

.bn-conf .bn-sw-nombre {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bn-ink-70);
}

.bn-conf .bn-sw[aria-pressed="true"] .bn-sw-nombre { color: var(--bn-ink); }

.bn-conf .bn-sw-mas {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	min-height: 1.3em;
	color: var(--bn-tenue);
}

/* Formulario */

.bn-conf .bn-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13px 12px;
	margin-top: 16px;
	align-items: start;
}

.bn-conf .bn-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bn-conf .bn-campo--full { grid-column: 1 / -1; }

.bn-conf .bn-campo label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bn-tenue);
	margin: 0;
	font-weight: 400;
}

.bn-conf input[type="text"],
.bn-conf input[type="email"],
.bn-conf input[type="tel"],
.bn-conf select,
.bn-conf textarea {
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 16px; /* 16px evita el zoom automático en iOS */
	line-height: 1.4;
	color: var(--bn-ink);
	background: var(--bn-campo);
	border: 1px solid var(--bn-linea);
	border-radius: var(--bn-r);
	padding: 10px 11px;
	margin: 0;
	height: auto;
	min-height: 0;
	box-shadow: none;
	transition: border-color .16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bn-conf select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C776C' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	padding-right: 30px;
}

.bn-conf textarea { resize: vertical; min-height: 92px; }

.bn-conf ::placeholder { color: var(--bn-tenue); opacity: 1; }

/* La flecha del desplegable se dibuja con la tinta, así funciona en claro y oscuro */
.bn-conf select {
	background-image: none;
}

.bn-conf .bn-campo { position: relative; }

.bn-conf .bn-campo--select::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 17px;
	width: 8px;
	height: 8px;
	border-right: 1.4px solid var(--bn-tenue);
	border-bottom: 1.4px solid var(--bn-tenue);
	transform: rotate(45deg) translateY(-2px);
	pointer-events: none;
}

.bn-conf input:focus,
.bn-conf select:focus,
.bn-conf textarea:focus {
	border-color: var(--bn-ink);
	outline: none;
	box-shadow: none;
}

.bn-conf input[aria-invalid="true"] { border-color: var(--bn-alerta); }

.bn-conf .bn-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pie del panel */

.bn-conf .bn-pie { margin-top: auto; padding-top: 18px; }

.bn-conf .bn-linea-costura {
	border-top: 1px dashed var(--bn-linea-fuerte);
	margin: 0 0 14px;
	height: 0;
}

.bn-conf .bn-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 13px;
	min-width: 0;
}

.bn-conf .bn-total-et {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bn-tenue);
	flex: none;
}

.bn-conf .bn-total-n {
	font-family: var(--bn-serif, inherit);
	font-size: clamp(20px, 2.6vw, 26px);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}

.bn-conf .bn-acciones { display: flex; gap: 10px; }

.bn-conf .bn-btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bn-btn-bg);
	background: var(--bn-btn-bg);
	padding: 14px 18px;
	border-radius: var(--bn-r);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	transition: opacity .16s ease;
	/* XStore fuerza el color del texto en botones: aquí no. */
	color: var(--bn-btn-tx) !important;
	-webkit-text-fill-color: var(--bn-btn-tx) !important;
}

.bn-conf .bn-btn:hover { opacity: .85; background: var(--bn-btn-bg); }
.bn-conf .bn-btn:disabled { opacity: .45; cursor: not-allowed; }

.bn-conf .bn-btn--fantasma {
	background: none;
	color: var(--bn-ink) !important;
	-webkit-text-fill-color: var(--bn-ink) !important;
	border-color: var(--bn-linea-fuerte);
	flex: 0 0 auto;
	padding-inline: 18px;
}

.bn-conf .bn-btn--fantasma:hover {
	border-color: var(--bn-ink);
	background: none;
	opacity: 1;
}

.bn-conf .bn-aviso { font-size: 13px; margin-top: 11px; color: var(--bn-alerta); }
.bn-conf .bn-nota { font-size: 12px; color: var(--bn-tenue); margin-top: 10px; }

/* Confirmación */

.bn-conf .bn-gracias { padding: 46px 30px; text-align: center; }

.bn-conf .bn-gracias-folio {
	font-family: var(--bn-serif, inherit);
	font-size: 13px;
	letter-spacing: .1em;
	border: 1px dashed var(--bn-linea-fuerte);
	border-radius: var(--bn-r);
	display: inline-block;
	padding: 7px 14px;
	margin-bottom: 16px;
}

.bn-conf .bn-gracias h3 {
	font-family: var(--bn-serif, inherit);
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
}

.bn-conf .bn-gracias p {
	color: var(--bn-ink-70);
	margin: 12px auto 0;
	max-width: 42ch;
}

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

@media (max-width: 900px) {
	.bn-conf .bn-hero {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.bn-conf .bn-hero--der .bn-hero-img,
	.bn-conf .bn-hero--izq .bn-hero-img { order: -1; max-width: 440px; }
	.bn-conf .bn-hero--der .bn-hero-tx,
	.bn-conf .bn-hero--izq .bn-hero-tx { order: 1; }
	.bn-conf .bn-hero-pieza { width: 68%; }

	.bn-conf .bn-marco { grid-template-columns: 1fr; }
	.bn-conf .bn-lienzo {
		border-right: 0;
		border-bottom: 1px solid var(--bn-linea);
		padding: 14px;
	}
	.bn-conf .bn-escena { aspect-ratio: 3 / 2; }
	.bn-conf .bn-panel { padding: 18px 15px 20px; }
	.bn-conf .bn-swatches { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
	.bn-conf .bn-sw-tinta { height: 58px; }
}

@media (max-width: 560px) {
	.bn-conf .bn-campos { grid-template-columns: 1fr; }
	.bn-conf .bn-hero-puntos { margin-top: 18px; }
	.bn-conf .bn-hero-pieza { width: 74%; }
	.bn-conf .bn-rejilla { gap: 12px; }
	.bn-conf .bn-cab { margin-bottom: 22px; }
	.bn-conf .bn-escena { aspect-ratio: 4 / 3; }

	/* En móvil solo se lee el paso actual; el resto queda en números */
	.bn-conf .bn-paso { font-size: 0; letter-spacing: 0; }
	.bn-conf .bn-paso::after { width: 12px; margin: 0 7px; }
	.bn-conf .bn-paso[aria-current="step"] { font-size: 11px; letter-spacing: .1em; }

	.bn-conf .bn-acciones { flex-wrap: wrap; }
	.bn-conf .bn-btn { padding: 15px 14px; min-height: 50px; }
	.bn-conf .bn-btn--fantasma { flex: 0 0 92px; }
	.bn-conf .bn-swatches { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 9px; }
	.bn-conf .bn-sw-tinta { height: 54px; }
	.bn-conf .bn-gracias { padding: 36px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.bn-conf *,
	.bn-conf *::before,
	.bn-conf *::after { transition: none !important; animation: none !important; }
}

/* Aviso cuando el visor 3D no consigue cargar el .glb */
.bn-conf .bn-3d-error {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
}

.bn-conf .bn-3d-error p {
	margin: 0;
	font-size: 14px;
	color: var(--bn-ink-70);
}