/**
 * Portada corporativa de BONISA: encabezado, hero, secciones y pie.
 *
 * Los colores salen todos de las variables de bonisa-theme.css. Cuando llegue el brand
 * book aprobado se cambian allí y esta hoja no se toca.
 */

/* Todo lo que dibuja esta hoja mide con border-box: el relleno va dentro del ancho. */
.bh *,
.bf *,
.bhero *,
.bsec *,
.bshell * {
	box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────── Contenedor ── */

.bshell {
	width: min(1240px, 92vw);
	margin-inline: auto;
}

.bsec {
	padding-block: clamp(56px, 8vw, 112px);
}

.bsec--surface { background: var(--bonisa-surface); }

/*
 * Sección oscura: invierte los tokens para que el formulario que contiene se dibuje
 * claro sobre oscuro en vez de oscuro sobre oscuro.
 *
 * El fondo NO puede escribirse como var(--bonisa-ink). Esa variable se redefine en este
 * mismo bloque, y una propiedad personalizada se resuelve con el valor que tiene en el
 * elemento donde se usa: el fondo tomaría el blanco nuevo y la sección quedaba blanca
 * con texto blanco encima. Por eso el fondo va con el valor literal de la marca.
 */
.bsec--oscura {
	background: #1c1b1f;
	color: #ffffff;

	--bonisa-ink: #ffffff;
	--bonisa-ink-soft: #c9c6cf;
	--bonisa-paper: #26252b;
	--bonisa-surface: #26252b;
	--bonisa-line: #3c3a43;
	--bonisa-error: #ff8f89;
}

.bsec__head {
	max-width: 62ch;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.bsec__head h2 { margin: 0 0 10px; }
.bsec__head p  { margin: 0; color: var(--bonisa-ink-soft); font-size: 1.05rem; }

.bsec__eyebrow {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bonisa-accent-text);
}

.bsec__mas { margin-top: clamp(28px, 4vw, 44px); }

/* ───────────────────────────────────────────────────────────── Encabezado ── */

/*
 * El encabezado se apoya en `--bonisa-tope`, que mide la barra de aviso de staging.
 * En producción esa barra no existe, la variable vale 0 y el encabezado queda pegado
 * al borde sin tener que cambiar nada. Ninguna hoja lleva «50px» escrito a mano.
 */
:root { --bonisa-tope: 0px; }

/*
 * Dos estados. Arriba del todo el encabezado casi no se ve: fondo del papel, sin
 * sombra, y solo una línea. Al desplazar aparece el fondo sólido y una sombra muy
 * corta, lo justo para separarlo del contenido que pasa por debajo. La altura del
 * contenedor no cambia en ningún momento, así que nada salta de sitio.
 */
.bh {
	position: sticky;
	top: var(--bonisa-tope, 0px);
	z-index: 500;
	background: color-mix(in srgb, var(--bonisa-paper) 92%, transparent);
	border-bottom: 1px solid transparent;
	box-shadow: 0 0 0 rgba(12, 34, 58, 0);
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease;
}

/* Mejora progresiva: donde no haya `backdrop-filter`, el fondo opaco basta. */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
	.bh {
		-webkit-backdrop-filter: saturate(160%) blur(10px);
		backdrop-filter: saturate(160%) blur(10px);
	}
}

.bh.is-scrolled {
	background: color-mix(in srgb, var(--bonisa-paper) 97%, transparent);
	border-bottom-color: var(--bonisa-line);
	box-shadow: 0 1px 12px rgba(12, 34, 58, .07);
}

/* El logo cede dos píxeles al desplazarse: se nota que la página avanzó, sin salto. */
.bh .bonisa-logo { transition: height 200ms ease; }
.bh.is-scrolled .bonisa-logo { height: 28px; }

@media (prefers-reduced-motion: reduce) {
	.bh,
	.bh .bonisa-logo { transition: none; }
	.bh.is-scrolled .bonisa-logo { height: 30px; }
}

.bh__inner {
	width: min(1240px, 92vw);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	min-height: 64px;
}

.bh__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--bonisa-ink);
	flex: 0 0 auto;
}

/*
 * Logotipo oficial. El símbolo cuadrado con la «B» que había antes estaba dibujado
 * con SVG en la plantilla: no era el logo de BONISA. Ahora sale de un archivo.
 */
.bonisa-logo {
	display: block;
	width: auto;
	max-width: 190px;
	height: 30px;
	object-fit: contain;
}

/*
 * Si BONISA todavía no cargó la versión clara del logo, se aclara la normal.
 * Funciona porque el logo es de un solo color plano; en cuanto suban el archivo
 * inverso real, esta clase deja de aplicarse sola.
 */
.bonisa-logo--aclarado { filter: brightness(0) invert(1); }

.bonisa-logo__texto {
	font-family: var(--bonisa-font-display);
	font-weight: 800;
	font-size: 1.22rem;
	letter-spacing: .06em;
}

.bh__nav { margin-left: auto; }

.bh__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.2vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh__list a {
	display: block;
	padding: 8px 2px;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bonisa-ink);
	border-bottom: 2px solid transparent;
}

.bh__list a:hover,
.bh__list a[aria-current="page"] {
	border-bottom-color: var(--bonisa-estado);
}

.bh__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--bonisa-line);
	border-radius: 10px;
	cursor: pointer;
	color: var(--bonisa-ink);
}

.bh__toggle-bars { display: grid; gap: 4px; width: 20px; }
.bh__toggle-bars i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.bh__toggle[aria-expanded="true"] .bh__toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bh__toggle[aria-expanded="true"] .bh__toggle-bars i:nth-child(2) { opacity: 0; }
.bh__toggle[aria-expanded="true"] .bh__toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bh__panel {
	border-top: 1px solid var(--bonisa-line);
	background: var(--bonisa-paper);
	padding: 18px 4vw 28px;
}

.bh__panel[hidden] { display: none; }

.bh__panel-list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	display: grid;
}

.bh__panel-list a {
	display: block;
	/* 52 px: objetivo táctil holgado, que es lo que más se agradece en un menú móvil. */
	min-height: 52px;
	display: flex;
	align-items: center;
	font-size: 1.06rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bonisa-ink);
	border-bottom: 1px solid var(--bonisa-line);
}

.bh__panel-list a[aria-current="page"] { color: var(--bonisa-cta-hover); }

@media (max-width: 900px) {
	.bh__nav { display: none; }
	.bh__toggle { display: inline-flex; }

	/* 66 px de alto y un objetivo táctil de 48, por encima del mínimo de 44. */
	.bh__inner { min-height: 66px; }
	.bh__toggle { width: 48px; height: 48px; }

	/*
	 * El panel se desplaza por dentro cuando no cabe, y respeta la franja inferior de
	 * los teléfonos con gesto de inicio.
	 */
	.bh__panel {
		max-height: calc(100dvh - var(--bonisa-tope, 0px) - 66px);
		overflow-y: auto;
		padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	}
}

/* ─────────────────────────────────────────────────────────────────── Hero ── */

/*
/* ════════════════════════════════════ Hero del Home ═════════════════════ */

/*
 * Composición dividida: el copy ocupa su columna y la fotografía la suya.
 *
 * La foto es vertical (1707 × 2560). A sangre bajo el texto habría que recortarle dos
 * tercios del alto para llenar una franja apaisada, y las botellas quedaban fuera. Con
 * columna propia conserva su proporción y el texto ya no necesita un velo encima.
 */
.bhero {
	position: relative;
	background: var(--bonisa-azul);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Hero fotográfico a sangre, con el titular encima. La composición partida se
 * descartó: el usuario prefiere la portada anterior con el brindis de fondo.
 */
.bhero--foto {
	display: flex;
	align-items: flex-end;
	min-height: clamp(680px, 74vh, 760px);
}

.bhero__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

/*
 * Velo azul desde la izquierda: garantiza la lectura del titular sin apagar la
 * fotografía. A la derecha llega casi transparente, así que las copas se ven.
 */
.bhero__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg,
			rgba(var(--bonisa-blue-rgb), .90) 0%,
			rgba(var(--bonisa-blue-rgb), .78) 30%,
			rgba(var(--bonisa-blue-rgb), .42) 54%,
			rgba(var(--bonisa-blue-rgb), .08) 76%,
			rgba(var(--bonisa-blue-rgb), 0) 100%),
		linear-gradient(to top, rgba(var(--bonisa-blue-rgb), .5) 0%, rgba(var(--bonisa-blue-rgb), 0) 40%);
}

/*
 * La imagen va fuera del flujo. Si participa, la fila del grid crece hasta su alto
 * natural: a 778 px de ancho, una foto de 1707 × 2560 pide 1167 px y el hero se iba
 * a 1173. Con position:absolute la altura la manda el min-height, no la foto.
 */
.bhero__fondo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bhero-focal, center 46%);
}

.bhero__inner {
	position: relative;
	width: min(1240px, 92vw);
	margin-inline: auto;
	padding-block: clamp(48px, 7vw, 88px);
}

/* El copy se alinea con la retícula del sitio, no con el borde de la pantalla. */
.bhero__texto {
	min-width: 0;
	width: 100%;
	max-width: 620px;
	color: #fff;
}

.bhero__titulo {
	margin: 0;
	font-size: clamp(2.1rem, 3.9vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.025em;
	color: #fff;
}

.bhero__titulo span { display: block; }
.bhero__titulo span:nth-child(2) { color: var(--bonisa-acento-claro); }

.bhero__sub {
	margin: 18px 0 0;
	max-width: 44ch;
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}

.bhero .bonisa-credentials { margin-top: 22px; color: rgba(255, 255, 255, .85); }
.bhero .bonisa-credentials li { color: inherit; }
.bhero .bonisa-credentials__sep { color: var(--bonisa-acento-claro); }

.bhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.bhero--sin-foto { grid-template-columns: minmax(0, 1fr); min-height: clamp(420px, 52vh, 560px); }

/* ── Entrada del titular ──────────────────────────────────────────────── */

/*
 * Solo cambian opacidad y desplazamiento: el espacio ya está reservado por el propio
 * texto, así que la animación no mueve el layout ni afecta al CLS.
 */
.bhero__titulo--animar span {
	opacity: 0;
	transform: translateY(14px);
	animation: bhero-entra .5s cubic-bezier(.22, .61, .36, 1) forwards;
}

.bhero__titulo--animar span:nth-child(1) { animation-delay: .05s; }
.bhero__titulo--animar span:nth-child(2) { animation-delay: .19s; }
.bhero__titulo--animar span:nth-child(3) { animation-delay: .33s; }

@keyframes bhero-entra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.bhero__titulo--animar span { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 900px) {
	/* Texto primero y fotografía después: lo decide el grid, no el orden del HTML. */
	/* En móvil el hero sigue a sangre, más bajo y con el velo algo más denso. */
	.bhero--foto { min-height: clamp(560px, 76vh, 680px); }

	.bhero__inner { padding-block: clamp(36px, 8vw, 56px); }

	.bhero__texto { max-width: none; }

	.bhero__fondo img { object-position: var(--bhero-focal-movil, 58% 34%); }

	.bhero__velo {
		background:
			linear-gradient(to top,
				rgba(var(--bonisa-blue-rgb), .94) 0%,
				rgba(var(--bonisa-blue-rgb), .72) 42%,
				rgba(var(--bonisa-blue-rgb), .22) 74%,
				rgba(var(--bonisa-blue-rgb), .06) 100%);
	}

	.bhero__ctas .bonisa-btn { flex: 1 1 auto; justify-content: center; }
}


/* ───────────────────────────────────────────── Pie: marca y contacto ── */

.bf__logo {
	display: inline-block;
	margin-bottom: 14px;
}

.bf__logo .bonisa-logo { height: 32px; max-width: 200px; }

/*
 * La columna de Contacto tenía título y lista vacía porque los datos vivían en
 * ajustes y nadie los había cargado. Ahora vienen por defecto y cada línea lleva
 * su etiqueta, para distinguir el teléfono del WhatsApp: es el mismo número.
 */
.bf__contacto { display: grid; gap: 10px; }

.bf__contacto li { display: flex; flex-direction: column; gap: 1px; }

.bf__etiqueta {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .62;
}

/* ─────────────────────────────────────── Credenciales editoriales ── */

/*
 * No son botones. Se quitó el borde, el fondo y la forma de píldora: quedan como
 * una línea de texto separada por un punto. Sin hover y sin cursor de mano.
 */
.bonisa-credentials {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--bonisa-ink-soft);
}

.bonisa-credentials li {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	cursor: auto;
}

.bonisa-credentials__sep { color: var(--bonisa-accent); font-weight: 700; }

/* En móvil se apilan en tres líneas compactas y el punto sobra. */
@media (max-width: 560px) {
	.bonisa-credentials { flex-direction: column; gap: 4px; }
	.bonisa-credentials__sep { display: none; }
}

/*
 * Los canales de cobertura tampoco son botones: pasan a etiqueta suave, sin
 * borde ni forma de píldora.
 */
.bonisa-coverage__channel {
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: rgba(0, 0, 0, .05);
	font-size: .88rem;
	font-weight: 600;
	color: var(--bonisa-ink);
}

/* ══════════════════════════════ Franja de credibilidad ══════════════════ */

/*
 * Dos mitades sobre el amarillo: marcas a la izquierda, clientes a la derecha.
 * En móvil se apilan. Las tarjetas son blancas y todas del mismo tamaño, para que
 * un logo apaisado y uno cuadrado no se vean como piezas de distinto peso.
 */





/*
 * El desplazamiento es nativo: scroll-snap da el gesto táctil y el teclado gratis.
 * `scrollbar-width: none` esconde la barra pero NO impide desplazar.
 */






/* El logo se contiene: nunca se deforma ni se recorta. */

.bcred__nombre {
	font-weight: 700;
	font-size: .95rem;
	text-align: center;
	line-height: 1.25;
}

/* Espacio sin logo: solo lo ve el equipo desde el escritorio. */







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

@media (max-width: 430px) {
	.bcarrusel__slide { flex-basis: calc((100% - 14px) / 2); }
	.bcred__tarjeta { height: 78px; padding: 10px 12px; }
}

/* Sin movimiento: el botón de pausa sobra porque nada se mueve solo. */
@media (prefers-reduced-motion: reduce) {
	.bcarrusel__pista { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════ Página Contacto ══════ */

/*
 * En escritorio: formulario a la izquierda, canales directos a la derecha.
 * En móvil el orden es otro y lo fija el HTML: primero el selector y el
 * formulario, y los canales al final.
 */
.bcon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.bcon__principal { min-width: 0; }

/* ── Selector de tipo de negocio ──────────────────────────────────────── */

.bcon__tipos {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
}

.bcon__tipos legend {
	padding: 0;
	margin-bottom: 12px;
	font-family: var(--bonisa-font-display);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 800;
}

.bcon__opciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

/*
 * Tarjeta seleccionable. El radio real se mantiene en el DOM para el teclado y
 * los lectores de pantalla: se oculta a la vista, nunca con display:none.
 */
.bcon__opcion {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 14px;
	border: 2px solid var(--bonisa-line);
	border-radius: 12px;
	background: var(--bonisa-paper);
	font-weight: 600;
	font-size: .95rem;
	text-align: center;
	cursor: pointer;
}

.bcon__opcion input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.bcon__opcion:hover { border-color: var(--bonisa-accent); }

.bcon__opcion:has(input:checked) {
	border-color: var(--bonisa-azul);
	background: var(--bonisa-azul);
	color: var(--bonisa-paper);
}

.bcon__opcion:has(input:focus-visible) {
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 2px;
}

/* ── Canales directos ─────────────────────────────────────────────────── */

.bcon__canales {
	padding: clamp(20px, 3vw, 30px);
	border-radius: 16px;
	background: var(--bonisa-surface);
}

.bcon__canales h2 { margin: 0 0 16px; font-size: clamp(1.1rem, 2vw, 1.4rem); }

.bcon__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

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

.bcon__etiqueta {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bonisa-ink-faint);
}

.bcon__lista a { font-weight: 600; color: var(--bonisa-ink); }

.bcon__convino {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--bonisa-line);
}

.bcon__convino h3 { margin: 0 0 8px; }
.bcon__convino p { margin: 0 0 14px; font-size: .95rem; }

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */

.bcon__faqwrap { max-width: 820px; }

.bcon__faq {
	border-bottom: 1px solid var(--bonisa-line);
	padding: 4px 0;
}

.bcon__faq summary {
	padding: 16px 34px 16px 0;
	position: relative;
	font-weight: 700;
	font-size: 1.02rem;
	cursor: pointer;
	list-style: none;
}

.bcon__faq summary::-webkit-details-marker { display: none; }

.bcon__faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--bonisa-accent);
}

.bcon__faq[open] summary::after { content: "−"; }

.bcon__faq p { margin: 0 0 18px; color: var(--bonisa-ink-soft); }

@media (max-width: 900px) {
	/* El orden en móvil: selector y formulario primero, canales al final. */
	.bcon__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════ Botón flotante de WhatsApp ══════════ */

/*
 * Se achica en móvil y respeta la zona segura del dispositivo. El selector correcto
 * es `.qlwapp__container`: `.qlwapp-toggle` no existe en esta versión del plugin.
 */
@media (max-width: 782px) {
	.qlwapp__container {
		transform: scale(.72);
		transform-origin: bottom right;
		margin-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* Se aparta cuando se solaparía con un campo, un botón o la leyenda del calendario. */
.qlwapp__container {
	transition: opacity .18s ease;
}

/*
 * `!important` a propósito: la hoja del plugin se encola después de la del tema y
 * fija su propia opacidad. Es el único punto del sitio donde hace falta, y es para
 * sobrescribir CSS de terceros, no CSS propio.
 *
 * Ojo: el estado oculto NO puede tocar `transform`. Al hacerlo cambiaba el tamaño
 * del botón, la comprobación de solape volvía a medir con otra geometría y el botón
 * entraba en un ciclo de aparecer y desaparecer.
 */
.qlwapp__container.bonisa-wa--oculto {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

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

/* `[hidden]` debe ganar también en los campos condicionales de Contacto. */
.bonisa-form [hidden] { display: none !important; }

/* ═══════════════════════════════════ Entrada del titular del Home ════════ */

/*
 * Aparición escalonada de las tres líneas: máscara que sube y un desplazamiento
 * corto. Una sola vez por carga, sin máquina de escribir, sin palabras que se
 * intercambian y sin mover el layout — cada línea ocupa su sitio desde el inicio,
 * solo que recortada.
 *
 * La clase la pone un script en línea junto al titular. Sin JavaScript el texto
 * queda visible y quieto: la animación es un adorno, nunca un requisito para leer.
 */
.bhero__titulo--animar span {
	animation: bonisa-entra-linea 520ms cubic-bezier(.22, .61, .36, 1) both;
}

.bhero__titulo--animar span:nth-child(1) { animation-delay: 60ms; }
.bhero__titulo--animar span:nth-child(2) { animation-delay: 190ms; }
.bhero__titulo--animar span:nth-child(3) { animation-delay: 320ms; }

@keyframes bonisa-entra-linea {
	from {
		opacity: 0;
		transform: translateY(16px);
		/* Recorte desde abajo: la línea se descubre, no se desliza dentro. */
		clip-path: inset(0 0 100% 0);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		/* Holgura para que no se recorten tildes ni rasgos descendentes. */
		clip-path: inset(-18% -4% -28% -4%);
	}
}

/*
 * Segunda barrera por si la clase llegara a aplicarse: con «reducir movimiento»
 * el titular aparece de una vez.
 */
@media (prefers-reduced-motion: reduce) {
	.bhero__titulo--animar span {
		animation: none;
		opacity: 1;
		transform: none;
		clip-path: none;
	}
}


/* ────────────────────────────── Controles del carrusel ── */

/*
 * Discretos, no invisibles.
 *
 * Los botones grandes con la palabra «Pausar» debajo del carrusel competían con los
 * logos, que son el contenido. Ahora son flechas circulares sobre los bordes y una
 * pausa en la esquina. Bajan de opacidad en reposo, pero suben al hover y SIEMPRE al
 * recibir foco, conservan 40 px de área táctil y llevan su etiqueta accesible.
 */
.bcarrusel__flecha,
.bcarrusel__pausa {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	color: var(--bonisa-ink);
	cursor: pointer;
	transition: opacity .16s ease, transform .16s ease, background .16s ease;
}


.bcarrusel__flecha svg { width: 20px; height: 20px; }

.bcarrusel__flecha--prev { left: -6px; }
.bcarrusel__flecha--next { right: -6px; }

.bcarrusel__pausa {
	top: -6px;
	right: -6px;
	width: 34px;
	height: 34px;
	opacity: .45;
}

.bcarrusel__pausa svg { width: 15px; height: 15px; }

/* Al pasar el ratón por el carrusel completo se revelan todos los controles. */
.bcarrusel:hover .bcarrusel__flecha,
.bcarrusel:hover .bcarrusel__pausa { opacity: .9; }

.bcarrusel__flecha:hover,
.bcarrusel__pausa:hover { opacity: 1; background: #fff; transform: scale(1.06); }

/* El foco de teclado manda sobre cualquier atenuación. */
.bcarrusel__flecha:focus-visible,
.bcarrusel__pausa:focus-visible {
	opacity: 1;
	outline: 3px solid var(--bonisa-ink);
	outline-offset: 2px;
}

.bcarrusel__icono-play { display: none; }
.bcarrusel__pausa[aria-pressed="true"] .bcarrusel__icono-pausa { display: none; }
.bcarrusel__pausa[aria-pressed="true"] .bcarrusel__icono-play { display: block; }

/* En táctil no hay hover: los controles se ven siempre. */
@media (hover: none) {
	.bcarrusel__flecha { opacity: .85; }
	.bcarrusel__pausa  { opacity: .7; }
}

/* ─────────────────────────────── Notas al pie de la franja ── */

.bcred__nota {
	margin: 16px 0 0;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--bonisa-ink);
}

.bcred__nota--dato { opacity: .82; }

.bcred__enlace {
	font-weight: 700;
	color: var(--bonisa-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bcred__enlace:hover { color: #000; }

.bcred__enlace:focus-visible {
	outline: 3px solid var(--bonisa-ink);
	outline-offset: 3px;
}

/* ───────────────────────────────────── Sello PYME ── */

/*
 * Va junto al copy corporativo, con un tamaño de acompañamiento. No es una sección
 * ni un logo de marca: es una credencial.
 */
.bsplit__sello { margin-top: 26px; }

.bonisa-pyme {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bonisa-pyme img {
	width: auto;
	height: clamp(110px, 13vw, 160px);
	object-fit: contain;
}

.bonisa-pyme__texto {
	margin: 0;
	max-width: 18em;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bonisa-ink-soft);
}

/* ───────────────────────────────────────── ConVino ── */

/*
 * Fondo oscuro a propósito: el archivo oficial de ConVino que BONISA tiene cargado
 * es la versión clara del logo, así que se usa tal cual, sin filtros ni recreaciones.
 */
.bsec--convino { background: var(--bonisa-azul); color: var(--bonisa-paper); }

.bonisa-convino {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.bonisa-convino__logo img {
	width: 100%;
	max-width: 190px;
	height: auto;
	object-fit: contain;
}

.bonisa-convino__title {
	margin: 0 0 6px;
	color: var(--bonisa-paper);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

/*
 * Se declara desde el contenedor de sección: una regla más general del tema pintaba
 * este párrafo en gris de texto corrido y quedaba casi ilegible sobre el azul.
 */
.bsec--convino .bonisa-convino__subtitle {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bonisa-paper);
}

.bsec--convino .bonisa-convino__texto { color: rgba(255, 255, 255, .88); }

.bonisa-convino__texto {
	margin: 0 0 20px;
	max-width: 46ch;
	color: rgba(255, 255, 255, .88);
}

.bonisa-convino__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.bonisa-convino--sin-logo { grid-template-columns: minmax(0, 1fr); }

/* Botón claro para el segundo CTA sobre el azul. */
.bonisa-btn--claro {
	border: 2px solid rgba(255, 255, 255, .75);
	background: transparent;
	color: var(--bonisa-paper);
}

.bonisa-btn--claro:hover,
.bonisa-btn--claro:focus { background: rgba(255, 255, 255, .14); color: var(--bonisa-paper); }

.bonisa-admin-hint--claro { color: rgba(255, 255, 255, .8); }

@media (max-width: 720px) {
	.bonisa-convino { grid-template-columns: minmax(0, 1fr); }
	.bonisa-convino__logo img { max-width: 150px; }
	.bonisa-pyme { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────── Pie: teléfono y WhatsApp en una sola entrada ── */

.bf__contacto-doble { gap: 4px; }

.bf__numero { font-weight: 700; font-size: 1.02rem; }

.bf__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.bf__accion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 600;
	text-decoration: none;
}

.bf__accion svg { width: 15px; height: 15px; flex: 0 0 auto; }

/*
 * Objetivo táctil de 44 px en las acciones del pie. «Llamar» y «WhatsApp» medían 36
 * de alto: en un teléfono eso es un botón al que se le falla. El texto y el aire
 * visual no cambian; lo que crece es la zona sensible.
 */
.bf__accion { min-height: 44px; }

.bf__acciones { gap: 10px; }

.bf__accion:hover { background: rgba(255, 255, 255, .12); }

.bf__accion:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Encabezado del formulario cuando se llega con motivo=marca. */
.bcon__motivo { margin-bottom: 22px; }
.bcon__motivo h2 { margin: 0 0 8px; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.bcon__motivo p { margin: 0; color: var(--bonisa-ink-soft); }

/* ═════════════════════════ Fotografía del equipo en Quiénes somos ═══════ */

/*
 * La foto ocupa la columna que antes llevaba los bloques de color. Se recorta con
 * `object-position` alto y no centrado: en el encuadre original las personas quedan
 * en la mitad superior y un centrado automático les cortaba la cabeza.
 */
.bsplit__foto {
	margin: 0;
	border-radius: var(--bonisa-radius, 16px);
	overflow: hidden;
	background: var(--bonisa-surface);
}

.bsplit__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center 38%;
}

@media (max-width: 900px) {
	/* En móvil el texto va primero y la foto después: lo dice el orden del HTML. */
	.bsplit__foto img { max-height: 260px; }
}

/* ═══════════════════════════════ ConVino con fotografía ═════════════════ */

/*
 * Con foto, el bloque pasa a tres zonas: imagen, logo y texto. El logo nunca se
 * coloca encima de la fotografía — es de un solo color y sobre la tienda deja de
 * leerse.
 */
.bonisa-convino--con-foto {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.bonisa-convino__foto {
	grid-row: span 2;
	margin: 0;
	border-radius: var(--bonisa-radius, 16px);
	overflow: hidden;
}

.bonisa-convino__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 360px;
	object-fit: cover;
}

.bonisa-convino--con-foto .bonisa-convino__logo {
	margin-bottom: 14px;
}

@media (max-width: 860px) {
	.bonisa-convino,
	.bonisa-convino--con-foto { grid-template-columns: minmax(0, 1fr); }
	.bonisa-convino__foto { grid-row: auto; }
	.bonisa-convino__foto img { max-height: 240px; }
}

/* ═══════════════════════════════════ Ficha de producto ══════════════════ */

.bficha__inner { padding-block: clamp(28px, 5vw, 56px); }

.bficha__migas { margin-bottom: clamp(18px, 3vw, 28px); }

.bficha__migas a {
	font-weight: 600;
	font-size: .95rem;
	color: var(--bonisa-ink-soft);
	text-decoration: none;
}

.bficha__migas a:hover { color: var(--bonisa-accent-text); }

.bficha__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

/*
 * La botella se ve completa sobre un fondo neutro: `contain`, nunca `cover`.
 * Recortar el cuello o la base de una botella arruina la foto de producto.
 */
.bficha__media {
	margin: 0;
	padding: clamp(20px, 4vw, 42px);
	border-radius: var(--bonisa-radius, 16px);
	background: var(--bonisa-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bficha__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 460px;
	height: auto;
	object-fit: contain;
}

.bficha__titulo {
	margin: 0 0 14px;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.08;
}

.bficha__extracto {
	margin: 0 0 22px;
	font-size: 1.05rem;
	color: var(--bonisa-ink-soft);
}

.bficha__datos {
	display: grid;
	gap: 12px;
	margin: 0 0 26px;
	padding: 20px 0;
	border-block: 1px solid var(--bonisa-line);
}

.bficha__datos > div {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	gap: 12px;
}

.bficha__datos dt {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bonisa-ink-faint);
}

.bficha__datos dd { margin: 0; font-weight: 600; }

.bficha__aviso {
	margin: 22px 0 14px;
	font-size: .92rem;
	color: var(--bonisa-ink-soft);
}

@media (max-width: 860px) {
	.bficha__grid { grid-template-columns: minmax(0, 1fr); }
	.bficha__media img { max-height: 320px; }
	.bficha__datos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/*
 * El logo de ConVino es de trazo negro y el bloque tiene fondo azul oscuro: sobre él
 * casi no se lee. Se le da una superficie clara propia en vez de recolorear el
 * archivo oficial, que no se toca.
 */
.bonisa-convino__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 22px;
	border-radius: 14px;
	background: var(--bonisa-paper);
}



/* ═══════════════════════════════ Ritmo vertical del Home ════════════════ */

/*
 * Escala de espaciado única para las secciones de la portada. Antes cada bloque
 * traía su propio padding y entre el hero y «Quiénes somos» quedaba una franja
 * blanca que no era de nadie.
 */
:root {
	--bonisa-sec-y: clamp(56px, 6vw, 96px);
}

.bhero + .bsec { padding-top: var(--bonisa-sec-y); }

.bsec { padding-block: var(--bonisa-sec-y); }

@media (max-width: 900px) {
	:root { --bonisa-sec-y: clamp(48px, 7vw, 64px); }
}

@media (max-width: 560px) {
	:root { --bonisa-sec-y: clamp(36px, 9vw, 48px); }
}


/* ═════════════════════════ Franjas de marcas y clientes ════════════════ */

/*
 * Dos franjas de ancho completo, no dos columnas apretadas.
 *
 * La sección deja de ser un rectángulo amarillo: el amarillo queda como una línea
 * de acento sobre el título. Lo que tiene que destacar son los logos.
 */
.bsec--acento {
	background: var(--bonisa-crema);
	color: var(--bonisa-ink);
}

.bcred__franjas {
	display: grid;
	gap: clamp(40px, 5vw, 68px);
}

.bcred__col { min-width: 0; }

.bcred__titulo {
	position: relative;
	margin: 0 0 22px;
	padding-top: 14px;
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	line-height: 1.15;
	color: var(--bonisa-ink);
}

/* El acento amarillo, reducido a una línea corta sobre el título. */
.bcred__titulo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background: var(--b-amarillo);
}


/*
 * Caja óptica idéntica para todos. Los archivos que BONISA cargó traen su propio
 * fondo blanco horneado, así que la teja es blanca: sobre crema se vería el
 * rectángulo del archivo.
 */


/*
 * Caja óptica del logo, con la escala de cada uno.
 *
 * Los archivos son cuadrados de 800 × 800 con el logo inscrito y bastante aire
 * alrededor. Con una caja de 150 × 80 un logo cuadrado se resolvía en 80 × 80 dentro
 * de una teja de 150 de alto y parecía una miniatura perdida. Con 165 × 100 llena la
 * teja sin deformar nada.
 */

.bcred__nombre {
	font-weight: 700;
	font-size: .95rem;
	text-align: center;
	line-height: 1.25;
}

.bcred__tarjeta--vacia {
	background: rgba(255, 255, 255, .6);
	border-style: dashed;
}

.bcred__hueco { font-size: .8rem; font-weight: 600; opacity: .55; }

/* Flechas dentro del carril, no encima del logo. */


@media (max-width: 700px) {
	/* Se asoma el siguiente logo: indica que la tira se desliza. */
	.bcarrusel__slide { flex-basis: clamp(150px, 44vw, 190px); }
	.bcred__tarjeta { height: 112px; padding: 14px; }
	.bcred__tarjeta img { max-width: 120px; max-height: 64px; }
}


/* ═══════════════════════════ Quiénes somos, recompuesto ════════════════ */

/*
 * Dos columnas equilibradas y realmente centradas entre sí. Antes el texto, el sello
 * y la fotografía no compartían eje: el sello colgaba dentro de una tarjeta blanca
 * enorme y medio vacía que pesaba más que la propia fotografía.
 */
.bsec--quienes { background: var(--bonisa-crema); }

.bsplit--texto {
	display: grid;
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.bsplit__texto {
	min-width: 0;
	/* Título, párrafo, divisor y sello se centran juntos frente a la fotografía. */
	align-self: center;
}

.bsplit__texto h2 {
	margin: 0 0 16px;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.08;
}

.bsplit__texto .bsec__parrafo {
	max-width: 64ch;
	margin: 0;
	color: var(--bonisa-ink-soft);
}

/*
 * Sello PYME: credencial compacta, sin tarjeta.
 *
 * El sello vive dentro de `.bonisa-pyme`, que es lo que imprime el shortcode; por eso
 * las medidas se aplican ahí y no al contenedor. Se le quita cualquier caja heredada:
 * antes ocupaba un recuadro blanco casi vacío más alto que el propio texto.
 */
.bsplit__sello {
	margin-top: 28px;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid var(--bonisa-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bsplit__sello .bonisa-pyme {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.bsplit__sello .bonisa-pyme img {
	flex: 0 0 auto;
	width: auto;
	height: 76px;
	max-width: none;
	object-fit: contain;
}

.bsplit__sello .bonisa-pyme__texto {
	margin: 0;
	max-width: 34ch;
	font-size: .92rem;
	line-height: 1.45;
	text-align: left;
	color: var(--bonisa-ink-soft);
}

.bsplit__foto {
	margin: 0;
	border-radius: var(--bonisa-radius, 14px);
	overflow: hidden;
	background: var(--bonisa-surface);
	aspect-ratio: 4 / 3;
}

.bsplit__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center 38%;
}

@media (max-width: 900px) {
	.bsplit--texto { grid-template-columns: minmax(0, 1fr); }
	.bsplit__foto { aspect-ratio: 3 / 2; }
	.bsplit__sello { margin-top: 22px; padding-top: 18px; }
	.bsplit__sello .bonisa-pyme img { height: 62px; }
}

/* ═══════════════════════════════════════ ConVino ════════════════════════ */

/*
 * Mismo lenguaje en portada y en Productos: medio a un lado, texto al otro. En la
 * portada el medio es el video de la tienda; en Productos, la fotografía.
 *
 * El logo ya no va dentro de una tarjeta blanca. Mientras no exista la versión
 * transparente, el bloque se sostiene con el título: es preferible a un recuadro
 * blanco pegado sobre el azul.
 */
.bsec--convino {
	background: var(--bonisa-azul);
	color: #fff;
}

.bconvino {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.bconvino__media {
	position: relative;
	border-radius: var(--bonisa-radius, 14px);
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	aspect-ratio: 16 / 10;
}

.bconvino__media video,
.bconvino__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bconvino__logo {
	display: block;
	width: auto;
	height: 64px;
	margin-bottom: 18px;
	object-fit: contain;
}

.bconvino__titulo {
	margin: 0;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.08;
	color: #fff;
}

.bconvino__sub {
	margin: 10px 0 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bonisa-acento-claro);
}

.bconvino__texto {
	margin: 14px 0 0;
	max-width: 52ch;
	color: rgba(255, 255, 255, .88);
}

.bconvino__acciones { margin-top: 26px; }

/* En Productos el bloque es más compacto: ahí el catálogo es el protagonista. */
.bconvino--productos { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.bconvino--productos .bconvino__media { aspect-ratio: 4 / 3; }
.bconvino--productos .bconvino__titulo { font-size: clamp(1.5rem, 2.6vw, 2rem); }

@media (max-width: 860px) {
	.bconvino,
	.bconvino--productos { grid-template-columns: minmax(0, 1fr); }
	.bconvino__media { aspect-ratio: 16 / 10; }
}

/* ═══════════════════════════ Catálogo agrupado por marca ═══════════════ */

.bcat__head { max-width: 62ch; padding-block: clamp(22px, 3vw, 36px) 0; }

.bcat__titulo {
	margin: 0;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.06;
	letter-spacing: -.02em;
}

.bcat__sub { margin: 12px 0 0; color: var(--bonisa-ink-soft); }

/* ── Índice de marcas ─────────────────────────────────────────────────── */

/*
 * Es la navegación del catálogo. Se queda pegado arriba al desplazar, por debajo del
 * encabezado del sitio, para no perder el punto de referencia entre marcas.
 */
.bcat__indice {
	position: sticky;
	/* Justo debajo del encabezado, contando la barra de pruebas si existe. */
	top: calc(var(--bonisa-tope, 0px) + 64px);
	z-index: 5;
	margin: clamp(22px, 3vw, 34px) 0 clamp(28px, 4vw, 44px);
	padding: 12px 0;
	background: var(--bonisa-paper);
	border-bottom: 1px solid var(--bonisa-line);
}

.bcat__indice ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.bcat__indice ul::-webkit-scrollbar { display: none; }

/*
 * La fila se desplaza a lo ancho cuando no cabe, y tiene que notarse que se desplaza.
 * Tres piezas, ninguna decorativa:
 *
 *  · el ajuste por pasos deja cada filtro alineado al borde y no a medias;
 *  · el relleno final asegura que el último no quede pegado al margen;
 *  · la máscara desvanece el borde derecho, de modo que el filtro siguiente asoma
 *    cortado y se lee como «hay más», en vez de terminar en un corte seco.
 *
 * La máscara se apaga sola cuando la fila ya cabe entera.
 */
.bcat__indice ul,
.bcat__paises ul {
	scroll-snap-type: x proximity;
	scroll-padding-inline: 4px;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.bcat__indice li,
.bcat__paises li { scroll-snap-align: start; }

@media (max-width: 700px) {
	.bcat__indice ul,
	.bcat__paises ul {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-right: 28px;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
	}

	.bcat__paises ul::-webkit-scrollbar { display: none; }

	.bcat__indice li,
	.bcat__paises li { flex: 0 0 auto; }
}

.bcat__indice a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid var(--bonisa-line);
	border-radius: 999px;
	background: var(--bonisa-paper);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bonisa-ink);
	scroll-snap-align: start;
}

.bcat__indice a:hover { border-color: var(--bonisa-accent); }

.bcat__indice a:focus-visible {
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 2px;
}

/* Estado activo: la marca que se está viendo. */
.bcat__indice a.is-activo {
	border-color: var(--bonisa-azul);
	background: var(--bonisa-azul);
	color: #fff;
}

.bcat__total {
	margin: 10px 0 0;
	font-size: .84rem;
	color: var(--bonisa-ink-faint);
}

/* ── Bloques de marca ─────────────────────────────────────────────────── */


/* El ancla no puede quedar debajo del encabezado ni del índice pegajoso. */

/*
 * Ojo: con `aspect-ratio` puesto, un `max-height` también recorta el ANCHO, y el
 * bloque dejaba de ocupar la fila. La altura se acota con `min-height` y el ratio
 * queda solo como suelo.
 */




/* Con fotografía cargada, el título necesita contraste sobre ella. */




.bcat__marca-head h2 {
	margin: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}



/* ── Tarjetas ─────────────────────────────────────────────────────────── */

/*
 * Columnas más estrechas para que cada marca quepa en menos filas: con tarjetas de
 * 190 px la página quedaba más larga que la cuadrícula plana que vino a sustituir.
 */
.bcat__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}


/*
 * Proporción 4:5 reservada desde ahora. Cuando lleguen las fotografías nuevas entran
 * en este mismo hueco y la página no da ningún salto.
 */
/*
 * Sin fondo. Las fotos de producto vienen recortadas sobre blanco, así que el crema
 * dibujaba un rectángulo alrededor de cada botella en vez de dejarla flotar sobre la
 * página. Se conserva la proporción para que la fila siga alineada.
 */
/*
 * La caja de la fotografía es un <button>. Los estilos de abajo la dejan exactamente
 * como cuando era un <span>; lo que cambia es que ahora recibe foco, responde a Enter
 * y a la barra espaciadora, y abre la ficha.
 */
.bcat__media-trigger {
	width: 100%;
	margin: 0;
	padding: 12px;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.bcat__media-trigger:focus-visible {
	outline: 3px solid var(--bonisa-azul);
	outline-offset: 3px;
	border-radius: 12px;
}

/* Señal discreta de que la fotografía se puede tocar. No cambia el alto de la tarjeta. */
.bcat__media-trigger img { transition: transform 180ms ease; }
.bcat__media-trigger:hover img,
.bcat__media-trigger:focus-visible img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
	.bcat__media-trigger img,
	.bcat__media-trigger:hover img,
	.bcat__media-trigger:focus-visible img { transition: none; transform: none; }
}

.bcat__media {
	display: flex;
	align-items: center;
	justify-content: center;
	/* En una tarjeta centrada el hueco tiene que ocupar la columna entera; si no,
	   encoge hasta el ancho de la botella y la proporción reservada se pierde. */
	width: 100%;
	justify-self: stretch;
	aspect-ratio: 4 / 5;
	margin-bottom: 8px;
	padding: 12px;
	border-radius: 12px;
	background: transparent;
	overflow: hidden;
}

/*
 * El hueco sin fotografía sí necesita marcarse: si no, queda un espacio vacío que
 * parece un fallo de carga. Va con borde punteado, no con relleno.
 */
.bcat__media:has(.bcat__sin-foto) {
	border: 1px dashed var(--bonisa-line);
	background: transparent;
}

.bcat__media img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.bcat__media img { transition: transform .18s ease; }

.bcat__sin-foto {
	max-width: 14ch;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--bonisa-ink-faint);
}

.bcat__nombre {
	display: block;
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.25;
}

.bcat__marca-nombre {
	display: block;
	margin-top: 2px;
	font-size: .84rem;
	color: var(--bonisa-ink-soft);
}

@media (max-width: 700px) {
	.bcat__indice { top: calc(var(--bonisa-tope, 0px) + 66px); }
	.bcat__marca { scroll-margin-top: calc(var(--bonisa-tope, 0px) + 122px); }
	.bcat__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
	.bcat__familia {
		aspect-ratio: 16 / 10;
		min-height: 200px;
		max-height: 260px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.bcat__media img { transition: none; }
	.bcat__enlace:hover .bcat__media img { transform: none; }
}

/* ═════════════════════ Capacidades: composición editorial ══════════════ */

/*
 * Tres columnas numeradas, sin tarjetas de color.
 *
 * Eran tres cajas grandes con un tono distinto cada una y un icono genérico. La
 * numeración 01 / 02 / 03 ordena la lectura mucho mejor que un camión dibujado, y la
 * sección deja de competir con la franja de marcas que tiene justo encima.
 */
.bonisa-capabilities {
	counter-reset: bcap;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(24px, 3vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Cada tarjeta usa la misma retícula interna, así que número, título, descripción y
 * credencial caen siempre en la misma fila aunque los textos midan distinto. La
 * credencial se ancla al fondo: antes las tres terminaban a alturas diferentes.
 */
.bonisa-capability {
	counter-increment: bcap;
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(3.5rem, auto) minmax(8rem, 1fr) auto;
	height: 100%;
	padding: 26px 0 0;
	border: 0;
	border-top: 2px solid var(--bonisa-line);
	border-radius: 0;
	background: none;
}

.bonisa-capability__credential { align-self: end; }

.bonisa-capability::before {
	content: "0" counter(bcap);
	display: block;
	margin-bottom: 12px;
	font-family: var(--bonisa-font-display);
	font-size: .9rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--bonisa-accent-text);
}

/* La línea superior de la primera columna lleva el acento, como hilo conductor. */
.bonisa-capability:first-child { border-top-color: var(--bonisa-accent); }

/* El icono genérico no aportaba información: fuera. */
.bonisa-capability__icon { display: none; }

.bonisa-capability__title {
	margin: 0 0 8px;
	font-size: clamp(1.05rem, 1.9vw, 1.28rem);
	line-height: 1.2;
}

.bonisa-capability__text {
	margin: 0;
	max-width: 46ch;
	color: var(--bonisa-ink-soft);
}

.bonisa-capability__credential {
	display: block;
	margin-top: 14px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bonisa-ink-faint);
}

/* Los fondos tintados por posición ya no aplican. */
.bonisa-capability:nth-child(1),
.bonisa-capability:nth-child(2),
.bonisa-capability:nth-child(3) { background: none; }

/* ═══════════════ Catálogo: familias, vinos y vista previa ══════════════ */

.bcat__seccion { margin-bottom: clamp(34px, 4vw, 60px); scroll-margin-top: calc(var(--bonisa-tope, 0px) + 132px); }

/* ── Cabecera de familia ──────────────────────────────────────────────── */

.bcat__familia {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	/*
	 * Franja de 2.6:1 aproximadamente. La anterior rondaba 1178 × 205 —casi 5.7:1—
	 * y a esa proporción las fotos de familia se quedaban en una tira donde no se
	 * distinguía ni una botella.
	 */
	aspect-ratio: 26 / 10;
	min-height: clamp(300px, 26vw, 420px);
	max-height: 420px;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	padding: clamp(18px, 3vw, 32px);
	border-radius: var(--bonisa-radius, 14px);
	overflow: hidden;
	background: var(--bonisa-crema);
}

.bcat__familia-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bcat-focal, center 45%);
}

/* Velo solo cuando hay fotografía: el título tiene que leerse sobre ella. */
.bcat__familia--con-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(var(--bonisa-blue-rgb), .82), rgba(var(--bonisa-blue-rgb), .1) 68%);
}

.bcat__familia-cuerpo { position: relative; z-index: 1; max-width: 52ch; }

.bcat__familia-titulo {
	margin: 0;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.05;
	color: var(--bonisa-ink);
}

.bcat__familia--con-foto .bcat__familia-titulo { color: #fff; }

.bcat__familia-intro { margin: 8px 0 0; color: var(--bonisa-ink-soft); }
.bcat__familia--con-foto .bcat__familia-intro { color: rgba(255, 255, 255, .9); }

/* ── Vinos tradicionales ──────────────────────────────────────────────── */

.bcat__seccion--vinos { padding-top: clamp(20px, 3vw, 34px); border-top: 2px solid var(--bonisa-line); }

.bcat__vinos-head { max-width: 62ch; margin-bottom: clamp(18px, 2.4vw, 28px); }

.bcat__vinos-head h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.bcat__vinos-head p { margin: 0; color: var(--bonisa-ink-soft); }

/* ── Tarjeta ──────────────────────────────────────────────────────────── */

/*
 * Todo centrado sobre el mismo eje. Antes la botella iba centrada dentro de su hueco
 * y el título y el botón arrancaban pegados al borde izquierdo, así que cada tarjeta
 * parecía descuadrada respecto a su propia fotografía.
 *
 * La cuarta fila se lleva el espacio sobrante y la acción se ancla abajo: es lo que
 * mantiene los botones de una misma fila a la misma altura aunque un nombre ocupe
 * tres líneas y el de al lado una. Recortar los títulos habría sido la otra vía, y
 * cortar «Oveja Negra Reserva Carménère–Merlot» no es una opción.
 */
.bcat__tarjeta {
	display: grid;
	grid-template-rows: auto minmax(2.5em, auto) auto 1fr;
	justify-items: center;
	align-items: start;
	text-align: center;
	height: 100%;
}

.bcat__nombre { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.25; }

/*
 * La marca acompaña al nombre sin competir con él: más pequeña, en versalitas y en
 * el gris azulado secundario. Es una firma, no un segundo título.
 */
.bcat__marca-nombre {
	margin: 3px 0 0;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bonisa-ink-soft);
}

.bcat__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	grid-row: 4;
	align-self: end;
	margin-top: 6px;
}

/*
 * Enlace por fuera, objetivo táctil por dentro. Los 44 px de alto son los de la pauta
 * de accesibilidad; el relleno lateral evita que el texto toque el borde de la
 * columna en las tarjetas más estrechas.
 */
.bcat__accion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 6px;
	border: 0;
	background: none;
	font: inherit;
	font-size: .86rem;
	font-weight: 700;
	line-height: 1.2;
	/*
	 * Azul, no naranja. Con siete tarjetas por familia el acento se repetía siete
	 * veces por fila y la cuadrícula se leía como una hilera de avisos; el naranja
	 * queda para las llamadas reales del sitio. El azul corporativo contrasta 15,8:1
	 * sobre el blanco, así que el enlace se distingue igual.
	 */
	color: var(--bonisa-azul);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.bcat__accion:hover { text-decoration: underline; }

.bcat__accion:focus-visible {
	/* El foco acompaña al color del enlace. */
	outline: 3px solid var(--bonisa-azul);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Vista previa de ficha ────────────────────────────────────────────── */

.bcat__panel { position: fixed; inset: 0; z-index: 1000; }
.bcat__panel[hidden] { display: none; }

.bcat__panel-fondo {
	position: absolute;
	inset: 0;
	background: rgba(var(--bonisa-blue-rgb), .55);
}

/*
 * Cajón lateral en escritorio; hoja inferior en móvil. En ambos casos el contenido
 * se desplaza dentro del panel, no la página de atrás.
 */
.bcat__panel-caja {
	position: absolute;
	top: 0;
	right: 0;
	width: min(440px, 92vw);
	height: 100%;
	padding: clamp(22px, 3vw, 34px);
	overflow-y: auto;
	background: var(--bonisa-paper);
	box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
}

.bcat__panel-caja:focus { outline: none; }

.bcat__panel-cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--bonisa-line);
	border-radius: 50%;
	background: var(--bonisa-paper);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	/* Objetivo táctil completo: medía 42 de ancho. */
	min-width: 44px;
	min-height: 44px;
}

.bcat__panel-cerrar:focus-visible {
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 2px;
}

.bcat__panel-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	max-height: 46vh;
	margin-bottom: 20px;
	border-radius: 12px;
	background: var(--bonisa-surface);
	overflow: hidden;
}

.bcat__panel-media img { width: auto; height: 100%; object-fit: contain; }

.bcat__panel-titulo { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; }

.bcat__panel-marca { margin: 4px 0 0; font-weight: 600; color: var(--bonisa-accent-text); }

.bcat__panel-datos { display: grid; gap: 12px; margin: 22px 0 0; }

.bcat__panel-datos > div {
	display: grid;
	grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bonisa-line);
}

.bcat__panel-datos dt {
	margin: 0;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bonisa-ink-faint);
}

.bcat__panel-datos dd { margin: 0; font-weight: 600; }

.bcat__panel-vacio { margin: 22px 0 0; color: var(--bonisa-ink-soft); }
.bcat__panel-vacio[hidden] { display: none; }

/* ── Variantes que agrupa una colección ───────────────────────────────── */

.bcat__panel-variantes { margin: 22px 0 0; }
.bcat__panel-variantes[hidden] { display: none !important; }

.bcat__panel-subtitulo {
	margin: 0 0 10px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bonisa-ink-soft);
}

.bcat__panel-variantes ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Cada sabor lleva a su ficha real dentro del mismo panel. Es un botón porque no
 * navega: cambia el contenido del diálogo que ya está abierto.
 */
.bcat__panel-variante {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bonisa-line);
	border-radius: 10px;
	background: none;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	color: var(--bonisa-ink);
	text-align: left;
	cursor: pointer;
}

.bcat__panel-variante::after {
	content: "→";
	margin-left: auto;
	color: var(--bonisa-accent-text);
}

.bcat__panel-variante:hover {
	border-color: var(--bonisa-accent);
	background: var(--bonisa-cream);
}

.bcat__panel-variante:focus-visible {
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 2px;
}

.bcat__panel-enlace {
	display: inline-block;
	margin-top: 24px;
	font-weight: 700;
	color: var(--bonisa-accent-text);
}

.bcat__panel-enlace[hidden] { display: none; }

body.bonisa-sin-scroll { overflow: hidden; }

/*
 * El botón flotante de WhatsApp lo pinta un plugin con z-index propio y se quedaba
 * encima del panel, tapando la última fila de datos justo cuando alguien terminaba de
 * leer la ficha. Con el panel o el menú abiertos se retira; al cerrarlos vuelve solo.
 * No se toca el WhatsApp del pie ni los enlaces dentro del contenido: solo la burbuja.
 */
/*
 * Con el pie a la vista en móvil, la burbuja se retira: ahí abajo el propio pie ya
 * ofrece WhatsApp con su etiqueta, y la burbuja solo tapaba contenido. En escritorio
 * no estorba —el pie es ancho y bajo— así que se queda.
 */
@media (max-width: 767px) {
	body.bonisa-pie-a-la-vista .qlwapp,
	body.bonisa-pie-a-la-vista .qlwapp__container {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* La burbuja respeta la franja inferior de los teléfonos con gesto de inicio. */
@supports (padding: env(safe-area-inset-bottom)) {
	.qlwapp { margin-bottom: env(safe-area-inset-bottom, 0px); }
}

body.bonisa-sin-scroll .qlwapp,
body.bonisa-sin-scroll .qlwapp__container,
body.bonisa-menu-abierto .qlwapp,
body.bonisa-menu-abierto .qlwapp__container {
	/*
	 * Se retira, no se desvanece. Un fundido depende de que la transición llegue a su
	 * fin y deja la burbuja encima mientras dura; además el plugin marca varias de sus
	 * reglas como `!important`, así que la salida tiene que pesar igual.
	 */
	display: none !important;
}

@media (max-width: 700px) {
	/*
	 * Hoja inferior: la mano llega al botón de cerrar sin estirarse.
	 *
	 * El alto se mide con `dvh` porque en móvil la barra del navegador aparece y
	 * desaparece: con `vh` la hoja se pasaba de largo y el final quedaba debajo del
	 * borde. `vh` queda de reserva para navegadores que no entiendan la unidad nueva.
	 */
	.bcat__panel-caja {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: auto;
		max-height: 92vh;
		max-height: min(92dvh, 100dvh - var(--bonisa-tope, 0px) - 24px);
		padding-bottom: calc(clamp(22px, 3vw, 34px) + env(safe-area-inset-bottom, 0px));
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, .22);
	}

	/* El botón de cerrar se queda visible aunque la ficha se desplace por dentro. */
	.bcat__panel-cerrar {
		position: sticky;
		top: 0;
		float: right;
		z-index: 2;
	}

	.bcat__panel-media { aspect-ratio: 3 / 2; max-height: 32vh; }
	.bcat__panel-datos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.bcat__panel-caja { transition: none; }
}

/* Migas de pan de la ficha de producto. */
.bficha__migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .88rem;
	color: var(--bonisa-ink-faint);
}

.bficha__migas li + li::before { content: "/"; margin-right: 6px; opacity: .6; }

.bficha__migas a { color: var(--bonisa-ink-soft); text-decoration: none; }
.bficha__migas a:hover { color: var(--bonisa-accent-text); }

.bficha__estado {
	margin: 18px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--b-amarillo);
	background: var(--bonisa-crema);
	font-size: .86rem;
	color: var(--bonisa-ink-soft);
}


/* ══════════════════════════ Cinta continua de logos ════════════════════ */

/*
 * Sin tarjetas: los logos se apoyan directamente sobre el crema de la sección. La
 * caja blanca con borde y sombra que había antes competía con los propios logos y
 * hacía que un archivo con fondo blanco se notara aún más.
 */
.bcarrusel {
	position: relative;
	padding-inline: 4px;
}

.bcarrusel__viewport {
	overflow: hidden;
	/* Desvanecido en los bordes: la cinta entra y sale, no se corta en seco. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	touch-action: pan-y;
	cursor: grab;
}

.bcarrusel__viewport:active { cursor: grabbing; }

/*
 * El bucle es una animación CSS, no un temporizador de JavaScript.
 *
 * La cinta contiene la secuencia dos veces y recorre exactamente el 50% de su ancho:
 * el fotograma final es idéntico al inicial, así que el reinicio es invisible. Además
 * la compone la GPU y sigue corriendo aunque el hilo principal esté ocupado.
 */
.bcarrusel__cinta {
	display: flex;
	width: max-content;
	will-change: transform;
}

.bcarrusel.is-auto .bcarrusel__cinta {
	animation: bcar-desliza var(--bcar-vuelta, 42s) linear infinite;
}

@keyframes bcar-desliza {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Pausa al pasar el ratón, al recibir foco y cuando la persona lo pide. */
.bcarrusel:hover .bcarrusel__cinta,
.bcarrusel:focus-within .bcarrusel__cinta,
.bcarrusel.esta-pausado .bcarrusel__cinta { animation-play-state: paused; }

/*
 * Capa aparte para el desfase manual —flechas y arrastre—. Va anidada para que se
 * sume a la animación en lugar de pelearse con ella: si ambas escribieran en el mismo
 * `transform`, la última en aplicarse borraría a la otra.
 */
.bcarrusel__desfase {
	display: flex;
	transform: translate3d(var(--bcar-desfase, 0px), 0, 0);
}

.bcarrusel__pista {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0 9px;
	list-style: none;
}

.bcarrusel__slide {
	flex: 0 0 clamp(230px, 23vw, 280px);
	min-width: 0;
}

/* Caja óptica común. El logo respira dentro, sin recuadro que lo encierre. */
.bcred__tarjeta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: clamp(150px, 14vw, 185px);
	padding: 16px 22px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-decoration: none;
	color: var(--bonisa-ink);
}

.bcred__tarjeta img {
	width: auto;
	height: auto;
	max-width: calc(clamp(200px, 20vw, 240px) * var(--bcred-escala, 1));
	max-height: calc(clamp(145px, 14vw, 170px) * var(--bcred-escala, 1));
	object-fit: contain;
}

a.bcred__tarjeta:hover img { transform: scale(1.04); }
.bcred__tarjeta img { transition: transform .18s ease; }

a.bcred__tarjeta:focus-visible {
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 4px;
}

.bcred__tarjeta--vacia {
	border: 1px dashed rgba(0, 0, 0, .18);
	border-radius: 10px;
}

/* Con «reducir movimiento» no hay cinta automática: se recorre a mano. */
@media (prefers-reduced-motion: reduce) {
	.bcarrusel.is-auto .bcarrusel__cinta { animation: none; }
	.bcarrusel__viewport { overflow-x: auto; scrollbar-width: thin; }
	.bcarrusel__pista--clon { display: none; }
}

.bcarrusel.sin-movimiento .bcarrusel__cinta { animation: none; }
.bcarrusel.sin-movimiento .bcarrusel__viewport { overflow-x: auto; }
.bcarrusel.sin-movimiento .bcarrusel__pista--clon { display: none; }

/* ── Controles ────────────────────────────────────────────────────────── */

.bcarrusel__flecha {
	position: absolute;
	top: calc(50% - 20px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
	color: var(--bonisa-ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity .16s ease, transform .16s ease;
}

.bcarrusel__flecha svg { width: 20px; height: 20px; }
.bcarrusel__flecha--prev { left: -4px; }
.bcarrusel__flecha--next { right: -4px; }

/* Aparecen al acercarse; con el teclado, siempre. */
.bcarrusel:hover .bcarrusel__flecha { opacity: .92; }
.bcarrusel__flecha:focus-visible {
	opacity: 1;
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 2px;
}

.bcarrusel__flecha:hover { opacity: 1; transform: scale(1.06); }

@media (hover: none) {
	/* En táctil no hay hover: los controles se quedan visibles pero discretos. */
	.bcarrusel__flecha { opacity: .8; }
}

@media (max-width: 700px) {
	.bcarrusel__slide { flex-basis: clamp(160px, 46vw, 200px); }
	.bcred__tarjeta { height: 118px; padding: 12px 16px; }
	.bcred__tarjeta img { max-width: 150px; max-height: 78px; }
}

/* Más aire entre la cinta y su nota, sin engordar la sección. */
.bcred__nota { margin-top: 22px; }

/* ════════════════════════════ Contacto: hero y tarjeta ═════════════════ */

/*
 * Hero corto y centrado, texto claro sobre azul. El anterior medía unos 560 px, con
 * el H1 casi al final de la franja y pintado oscuro sobre fondo oscuro.
 */
.bcon__hero {
	display: flex;
	align-items: center;
	min-height: clamp(320px, 34vh, 400px);
	background: var(--bonisa-azul);
	color: #fff;
}

.bcon__hero-inner { text-align: center; padding-block: clamp(28px, 4vw, 44px); }

.bcon__hero h1 {
	margin: 0 auto;
	max-width: 18ch;
	font-size: clamp(2rem, 4.2vw, 3rem);
	line-height: 1.06;
	letter-spacing: -.02em;
	color: #fff;
}

.bcon__hero p {
	margin: 14px auto 0;
	max-width: 56ch;
	font-size: clamp(1rem, 1.5vw, 1.12rem);
	color: rgba(255, 255, 255, .9);
}

@media (max-width: 700px) {
	.bcon__hero { min-height: clamp(280px, 40vh, 340px); }
}

/* ── Tarjeta de contacto ──────────────────────────────────────────────── */

.bcon__tarjeta {
	padding: clamp(20px, 3vw, 28px);
	border-radius: var(--bonisa-radius, 14px);
	background: var(--bonisa-paper);
	border: 1px solid var(--bonisa-line);
}

.bcon__etiqueta {
	margin: 0;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bonisa-ink-faint);
}

.bcon__etiqueta--sep { margin-top: 22px; }

.bcon__numero {
	margin: 4px 0 14px;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -.01em;
}

.bcon__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Objetivo táctil de 44 px de alto, como pide la pauta de accesibilidad. */
.bcon__accion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--bonisa-line);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bonisa-ink);
}

.bcon__accion:hover { border-color: var(--bonisa-accent); color: var(--bonisa-accent-text); }

.bcon__accion:focus-visible {
	outline: 3px solid var(--bonisa-accent);
	outline-offset: 2px;
}

/* ── Instagram ────────────────────────────────────────────────────────── */

.bonisa-ig {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.bonisa-ig:hover { color: var(--bonisa-accent-text); }
.bonisa-ig svg { flex: 0 0 auto; }

/* ── ConVino ──────────────────────────────────────────────────────────── */

.bcon__convino {
	margin-top: 26px;
	padding: clamp(20px, 3vw, 28px);
	border-radius: var(--bonisa-radius, 14px);
	background: var(--bonisa-crema);
}

.bcon__convino h3 { margin: 0 0 6px; font-size: 1.1rem; }
.bcon__dir { margin: 0 0 16px; color: var(--bonisa-ink-soft); }

.bcon__mapa {
	margin-bottom: 16px;
	border-radius: 12px;
	overflow: hidden;
	/* Alto reservado: el iframe no puede empujar el contenido al cargar. */
	aspect-ratio: 16 / 10;
	background: var(--bonisa-surface);
}

.bcon__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ═══════════════════════════════════ Pie global ═════════════════════════ */

/*
 * Este bloque se perdió al reescribir el hero: una limpieza por selectores se llevó
 * las reglas base y el pie quedó sin fondo, en display:block y con los encabezados a
 * 27 px. Se reconstruye completo y en un solo lugar, no parcheado desde cada
 * plantilla.
 */
/*
 * El pie usa un azul más oscuro que el corporativo: así el cierre del sitio se
 * distingue de los heroes en vez de fundirse con ellos. La línea naranja superior
 * marca el corte.
 */
.bf {
	border-top: 4px solid var(--bonisa-orange);
	background: var(--bonisa-footer);
	color: rgba(255, 255, 255, .86);
	padding-block: clamp(56px, 5vw, 72px) 0;
}

.bf a { color: inherit; text-decoration: none; }
.bf a:hover { color: var(--bonisa-acento-claro); }

.bf a:focus-visible {
	outline: 3px solid var(--bonisa-acento-claro);
	outline-offset: 2px;
}

/*
 * Cuatro columnas, no tres. Con tres, Contacto acumulaba teléfono, correo, dirección,
 * Instagram y «Cómo llegar» y crecía sola mientras la marca y la navegación —dos y
 * tres renglones— dejaban medio pie en blanco. Repartido en cuatro, el bloque ocupa
 * el ancho y pierde altura.
 */
.bf__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: start;
	width: min(1240px, 92vw);
	margin-inline: auto;
	padding-bottom: clamp(32px, 3.5vw, 44px);
}

.bf__col { min-width: 0; }

/* Encabezados de columna: 16–20 px, no el tamaño de un H2 heredado. */
.bf__title {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.bf ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf__col ul { display: grid; gap: 9px; }

/* Divisiones cuelga de Navegación: un escalón por debajo, no otra columna. */
.bf__subtitle {
	margin: 20px 0 10px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.bf__claim {
	margin: 0 0 12px;
	max-width: 38ch;
	font-size: .95rem;
	line-height: 1.5;
}

.bf__cobertura {
	display: inline-block;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
}

/*
 * Franja inferior. El ancho se mide igual que el resto del pie y el relleno va DENTRO
 * de ese ancho —de ahí el border-box—: antes «Términos» se salía por la derecha porque
 * el relleno se sumaba por fuera del límite. Nada aquí va posicionado en absoluto.
 */
.bf__legal {
	box-sizing: border-box;
	width: min(1240px, 92vw);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 16px 0 calc(20px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(255, 255, 255, .16);
	background: rgba(0, 0, 0, .22);
	font-size: .85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
}

.bf__legal > span { min-width: 0; }

.bf__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	min-width: 0;
}

/* Objetivo táctil sin engordar la franja: el relleno vertical es negativo en el flujo. */
.bf__legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* Tableta: 2 × 2. Cuatro columnas a 1024 px dejan renglones de cinco caracteres. */
@media (max-width: 1080px) {
	.bf__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(26px, 4vw, 40px);
	}
}

/*
 * Móvil: filas de ancho completo, no dos columnas estrechas.
 *
 * Emparejar Navegación y Contacto las dejaba en 169 px cada una. En ese ancho los
 * botones «Llamar» y «WhatsApp» se apilaban, la dirección se partía en cuatro líneas
 * y el pie acababa midiendo unos 800 px pese a tener poco contenido. Con cada bloque
 * ocupando el ancho entero, la navegación cabe en una fila, los dos botones van uno
 * al lado del otro y el pie se acorta sin perder ni un dato.
 *
 * Todo dentro de la media query: la retícula de cuatro columnas del escritorio, ya
 * aprobada, no se toca.
 */
@media (max-width: 767px) {
	.bf { padding: 26px 16px 0; }

	.bf__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		width: 100%;
		padding-bottom: 16px;
	}

	.bf__brand,
	.bf__col { width: 100%; }

	/* Separadores entre bloques, para que no se lean como una lista sola. */
	.bf__col {
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.bf__title { margin-bottom: 8px; }
	.bf__claim { margin-bottom: 8px; max-width: 46ch; }

	/* El logo del pie no compite con el del encabezado. */
	.bf__logo { margin-bottom: 8px; }
	.bf__logo .bonisa-logo { height: 24px; }
	.bf__cobertura { padding: 4px 10px; font-size: .76rem; }

	/* Navegación en fila: tres enlaces cortos no necesitan tres renglones. */
	.bf__col--nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
	}

	.bf__col--nav ul a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Llamar y WhatsApp, uno junto al otro. */
	.bf__contacto { gap: 10px; }
	.bf__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
	.bf__ubicacion { max-width: none; }

	/*
	 * Etiqueta y dato en el mismo renglón. En vertical cada par gastaba dos líneas
	 * para decir una cosa; en horizontal se leen igual de bien y el bloque pierde
	 * unos veinte píxeles por entrada.
	 */
	.bf__contacto li {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		column-gap: 10px;
		row-gap: 2px;
	}

	.bf__contacto-doble .bf__acciones,
	.bf__ubicacion .bf__dato { grid-column: 1 / -1; }

	.bf__etiqueta { margin: 0; }

	/*
	 * Correo, Instagram y el logo también son destinos táctiles, no solo texto: los
	 * tres pasan a 44 px de alto útil. Cuesta unos píxeles de alto total, y la altura
	 * del pie no es razón para dejar un enlace al que se le falla con el pulgar.
	 */
	.bf__contacto a[href^="mailto"],
	.bf__col--visitenos .bf .bonisa-ig,
	.bf .bf__col--visitenos .bonisa-ig,
	.bf__logo {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* La marca respira un poco menos: el pie no es una portada. */
	.bf__claim { font-size: .9rem; margin-bottom: 6px; }
	.bf__logo { margin-bottom: 4px; }

	/*
	 * Instagram y «Cómo llegar» comparten renglón. Apilados sumaban cien píxeles para
	 * dos elementos de una línea cada uno; en fila caben de sobra a 358 px y siguen
	 * teniendo sus 44 px de alto útil.
	 */
	.bf__col--visitenos .bf__contacto {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 18px;
	}

	.bf__col--visitenos .bf__ubicacion { flex: 1 0 100%; }
	.bf__col--visitenos .bf__mapa { margin-top: 0; }
	.bf__col--visitenos .bonisa-ig { min-height: 44px; }

	/* Copyright completo arriba, enlaces legales debajo, con aire para la safe area. */
	.bf__legal {
		width: 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px 16px;
		padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px));
		line-height: 1.45;
	}
}

.bf__dato { display: inline-flex; align-items: flex-start; gap: 7px; line-height: 1.4; }
.bf__dato svg { flex: 0 0 auto; margin-top: 3px; }
.bf__ubicacion { max-width: 34ch; }


/* «Cómo llegar»: una acción, no una línea de texto suelta. */
.bf__mapa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* 44 px: el mínimo de la pauta de accesibilidad, no 40. */
	min-height: 44px;
	margin-top: 10px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--bonisa-orange);
	font-size: .86rem;
	font-weight: 700;
	color: #fff;
}

.bf__mapa:hover { background: #d0461a; color: #fff; }

.bf__mapa:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/*
 * Cada renglón de contacto es una columna flexible y, sin esta línea, sus hijos se
 * estiran hasta el borde: «Cómo llegar» se convertía en una barra naranja del ancho
 * de la columna en vez de un botón del tamaño de su texto.
 */
.bf__contacto li { align-items: flex-start; }

/*
 * Instagram: el icono hereda el color del enlace, así que sale en el crema del pie y
 * pasa al naranja claro en hover como cualquier otro enlace. Al ser vectorial se ve
 * nítido en cualquier pantalla y no depende de ningún archivo cargado.
 */
.bf .bonisa-ig {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
}

.bf .bonisa-ig svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: currentColor;
}

/*
 * «Ver producto» y «Ver ficha técnica» son la misma acción: abren el mismo panel.
 * El rectángulo naranja sólido que llevaba el primero prometía otra cosa —parecía el
 * botón principal de la página— y estaba al lado de un enlace de texto que hacía lo
 * mismo. Se unifican en el tratamiento de enlace; el naranja se reserva para las
 * llamadas reales del sitio.
 */

/* Descripción breve. Solo la tienen los productos que la traen cargada. */
.bcat__panel-extracto {
	margin: 10px 0 0;
	font-size: .96rem;
	line-height: 1.55;
	color: var(--bonisa-ink-soft);
}

.bcat__panel-extracto[hidden] { display: none !important; }

.bcat__panel-formatos {
	margin: 6px 0 0;
	font-size: .88rem;
	font-weight: 600;
	color: var(--bonisa-ink-soft);
}

/* Aviso de añada: informativo, no una alarma. */
.bcat__panel-nota {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--bonisa-orange);
	background: var(--bonisa-cream);
	font-size: .88rem;
	line-height: 1.45;
	color: var(--bonisa-ink);
}

/* ══════════════════════ Franja blanca de los carruseles ════════════════ */

/*
 * Los archivos de logo traen su propio fondo blanco horneado. Sobre crema se veía el
 * rectángulo; sobre una franja blanca continua se funden y desaparece el recuadro.
 */
.bsec--acento { background: #fff; }

.bcat__familia-img { object-fit: var(--bcat-fit, cover); }

/*
 * Encuadre propio para móvil. La regla vivía más arriba en la hoja, con la misma
 * especificidad que la base, así que la base la pisaba y el punto focal de móvil
 * nunca se aplicaba en ninguna familia. Aquí, después de la base, sí manda.
 */
@media (max-width: 700px) {
	.bcat__familia-img { object-position: var(--bcat-focal-movil, var(--bcat-focal, center 45%)); }
}

/* Con `contain` la franja necesita un fondo claro detrás del producto. */
.bcat__familia[data-fit="contain"] { background: var(--bonisa-cream); }
.bcat__familia[data-fit="contain"]::after { display: none; }
.bcat__familia[data-fit="contain"] .bcat__familia-titulo { color: var(--bonisa-ink); }

/* ── Cabecera partida: fotografía a sangre y título al lado ───────────── */

/*
 * Para las fotografías cuadradas. Recortar un cuadrado a una franja de 3,5:1 conserva
 * menos de un tercio del alto y en la de Squizz eso significaba perder o la botella o
 * la sartén, que es justo lo que la foto cuenta. Partiendo el bloque en dos, la imagen
 * conserva una proporción que puede sostener y el título ocupa el espacio que antes
 * quedaba como banda crema vacía.
 */
.bcat__familia[data-fit="split"] {
	display: grid;
	grid-template-columns: 6fr 4fr;
	/*
	 * Altura de fila explícita. Sin ella la fotografía cuadrada manda —una columna de
	 * 700 px daba una cabecera de 700 px de alto— porque al dejar de estar posicionada
	 * en absoluto vuelve a contar para el tamaño de la fila.
	 */
	grid-template-rows: clamp(300px, 26vw, 380px);
	align-items: stretch;
	aspect-ratio: auto;
	min-height: 0;
	max-height: none;
	padding: 0;
	background: var(--bonisa-azul);
	overflow: hidden;
}

.bcat__familia[data-fit="split"]::after { display: none; }

.bcat__familia[data-fit="split"] .bcat__familia-img {
	position: static;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: var(--bcat-focal, center center);
}

.bcat__familia[data-fit="split"] .bcat__familia-cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	padding: clamp(24px, 3vw, 44px);
}

.bcat__familia[data-fit="split"] .bcat__familia-titulo,
.bcat__familia[data-fit="split"] .bcat__familia-intro { color: #fff; }

@media (max-width: 700px) {
	.bcat__familia[data-fit="split"] {
		grid-template-columns: minmax(0, 1fr);
		/* Apilada: la fotografía marca su alto y el texto ocupa lo que necesite. */
		grid-template-rows: auto auto;
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
	}

	.bcat__familia[data-fit="split"] .bcat__familia-img {
		aspect-ratio: 16 / 11;
		min-height: 220px;
		max-height: 280px;
		object-position: var(--bcat-focal-movil, var(--bcat-focal, center center));
	}

	.bcat__familia[data-fit="split"] .bcat__familia-cuerpo { padding: 20px; }
}
.bcat__familia[data-fit="contain"] .bcat__familia-img { padding: 14px 0; }

/* ── Vinos por país ───────────────────────────────────────────────────── */

.bcat__paises { margin: 18px 0 26px; }

.bcat__paises ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcat__paises a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--bonisa-line);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bonisa-ink);
}

.bcat__paises a:hover { border-color: var(--bonisa-orange); }

.bcat__paises a:focus-visible {
	outline: 3px solid var(--bonisa-orange);
	outline-offset: 2px;
}

.bcat__pais { margin-bottom: clamp(30px, 4vw, 48px); scroll-margin-top: calc(var(--bonisa-tope, 0px) + 132px); }

.bcat__pais-titulo {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bonisa-line);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

.bcat__pais-cuenta {
	font-size: .8rem;
	font-weight: 600;
	color: var(--bonisa-ink-faint);
}