/* ==========================================================================
   Catálogo público — listado de comercios adheridos
   Identidad visual institucional Redes Mutual de Servicios
   (replica el prototipo: franja azul, banner en tarjetas, verde suave)
   ========================================================================== */

.mb-publico {
	--mb-azul: #2b2464;
	--mb-azul-oscuro: #1a1540;
	--mb-azul-medio: #3d348f;
	--mb-azul-palido: #eeedfe;
	--mb-azul-suave: #f4f3fd;
	--mb-verde: #33aa54;
	--mb-verde-oscuro: #228a3e;
	--mb-verde-palido: #e8f8ed;
	--mb-fondo: #eef0f7;
	--mb-superficie: #ffffff;
	--mb-borde: #e2e1ee;
	--mb-borde-fuerte: #cfcde2;
	--mb-texto: #1f1d33;
	--mb-texto-secundario: #5b5878;
	--mb-texto-tenue: #9491ab;
	--mb-radio: 20px;
	--mb-radio-medio: 14px;
	--mb-radio-chico: 10px;
	--mb-sombra: 0 1px 4px rgba(43, 36, 100, 0.07);
	--mb-sombra-media: 0 4px 24px rgba(43, 36, 100, 0.13);
	--mb-sombra-hover: 0 16px 56px rgba(43, 36, 100, 0.18);
	--mb-transicion: 200ms cubic-bezier(0.22, 1, 0.36, 1);

	font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--mb-texto);
	background-color: var(--mb-fondo);

	/* El listado vive en una página real dentro del tema. Rompemos el
	   contenedor centrado del tema/Elementor para que la franja azul y el
	   fondo lleguen de borde a borde. Los contenedores internos siguen
	   limitados a 1160px centrados, así que el contenido no se mueve. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
}

.mb-publico *,
.mb-publico *::before,
.mb-publico *::after {
	box-sizing: border-box;
}

.mb-cat-svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ---- Franja azul de cabecera (page header) ---- */
.mb-cat-phdr {
	position: relative;
	overflow: hidden;
	background: var(--mb-azul);
	padding: 56px 20px 48px;
}

.mb-cat-phdr::before {
	content: "";
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: rgba(51, 170, 84, 0.1);
	right: -160px;
	top: -190px;
	pointer-events: none;
}

.mb-cat-phdr-in {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 0 auto;
}

.mb-cat-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.mb-cat-breadcrumb a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color var(--mb-transicion);
}

.mb-cat-breadcrumb a:hover {
	color: #fff;
}

.mb-cat-titulo {
	margin: 0 0 8px;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #fff;
}

.mb-cat-bajada {
	margin: 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- Contenedor del cuerpo ---- */
.mb-cat-contenedor {
	max-width: 1160px;
	margin: 0 auto;
	padding: 32px 20px 64px;
}

/* ---- Buscador ---- */
.mb-cat-buscador {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 32px;
	padding: 4px 6px 4px 20px;
	background: var(--mb-superficie);
	border-radius: 999px;
	box-shadow: var(--mb-sombra-media);
	transition: box-shadow var(--mb-transicion);
}

/* ---- Buscador predictivo (typeahead) ----
   Mismo lenguaje que el del panel admin (.mb-typeahead): filas de borde a
   borde con separador fino, nombre en tinta oscura y meta tenue. Los
   selectores van scopeados bajo .mb-cat-typeahead (0,2,0) para ganarle al
   override de <button> del tema Royal sin recurrir a !important. */
.mb-cat-typeahead {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 360px;
	overflow-y: auto;
	background: var(--mb-superficie);
	border: 1px solid var(--mb-borde);
	border-radius: var(--mb-radio-medio);
	box-shadow: var(--mb-sombra-media);
}

.mb-cat-typeahead.is-open {
	display: block;
}

.mb-cat-typeahead .mb-cat-typeahead__it {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 14px;
	margin: 0;
	border: none;
	border-bottom: 1px solid var(--mb-borde);
	border-radius: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.mb-cat-typeahead .mb-cat-typeahead__it:last-child {
	border-bottom: none;
}

.mb-cat-typeahead .mb-cat-typeahead__it:hover,
.mb-cat-typeahead .mb-cat-typeahead__it:focus {
	background: var(--mb-azul-palido);
	outline: none;
}

.mb-cat-typeahead__nom {
	font-size: 14px;
	font-weight: 600;
	color: var(--mb-texto);
}

.mb-cat-typeahead__meta {
	font-size: 12px;
	color: var(--mb-texto-secundario);
}

.mb-cat-typeahead__vacio {
	padding: 12px 14px;
	font-size: 13px;
	color: var(--mb-texto-tenue);
}

.mb-cat-buscador:focus-within {
	box-shadow: 0 0 0 2px var(--mb-azul), var(--mb-sombra-media);
}

/* ==========================================================================
   RESET DURO DE CONTROLES (REGLA DURA — no quitar).
   El tema Royal le impone su estética a los <button> y <a> que quedan dentro del
   contenido del plugin (fondos, bordes lilas, sombras, color de texto verde).
   Acá los neutralizamos con !important para partir SIEMPRE de cero: cada control
   muestra únicamente lo que le da el plugin. Los componentes que sí llevan
   fondo/borde propio DEBEN redeclararlos con !important y specificity ≥ (0,1,1)
   (por eso van prefijados con .mb-publico). Ver memoria tema-royal-pisa-css.
   ========================================================================== */
.mb-publico button,
.mb-publico input[type="submit"],
.mb-publico input[type="reset"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0;
	/* Solo el COLOR de fondo del tema, nunca background-image: si reseteáramos el
	   shorthand `background` borraríamos las miniaturas de la galería (botones con
	   background-image inline). Ese fue el bug de "no renderizan las fotos". */
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Enlaces que funcionan como control (no las cards ni el texto corrido): sin
   subrayado ni color heredado del tema; el color propio lo fija cada componente. */
.mb-publico a.mb-cat-btn,
.mb-publico .mb-cat-toggle-btn,
.mb-publico .mb-mapa-toggle-lista,
.mb-publico .mb-mapa-det-accion,
.mb-publico .mb-mapa-det-ficha,
.mb-publico .mb-destacados-vertodos {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* La lupa es el botón de envío: alcanza, no hace falta un botón "Buscar". */
.mb-publico .mb-cat-buscador-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	background: transparent;
	font-size: 21px;
	color: var(--mb-texto-tenue);
	cursor: pointer;
	border-radius: var(--mb-radio-chico);
	transition: color var(--mb-transicion);
}

.mb-publico .mb-cat-buscador-btn:hover {
	color: var(--mb-azul);
}

.mb-cat-buscador input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	color: var(--mb-azul);
}

.mb-cat-buscador input[type="search"]::placeholder {
	color: var(--mb-texto-tenue);
}

/* ---- Botones ---- */
.mb-cat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	border: 1px solid transparent;
	border-radius: 999px !important; /* Royal pisa el radius de los <button> */
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--mb-transicion), color var(--mb-transicion), transform var(--mb-transicion);
}

.mb-publico .mb-cat-btn--primario {
	background: var(--mb-azul);
	color: #fff;
}

.mb-publico .mb-cat-btn--primario:hover {
	background: var(--mb-azul-medio);
	color: #fff;
	transform: translateY(-1px);
}

.mb-cat-btn--texto {
	height: auto;
	background: transparent;
	color: var(--mb-texto-secundario);
	padding: 4px 6px;
}

.mb-cat-btn--texto:hover {
	color: var(--mb-azul);
}

/* ---- Barra: buscador + botón de filtros (siempre en una sola línea) ---- */
.mb-cat-toolbar {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 28px;
}

.mb-cat-toolbar .mb-cat-buscador {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

/* Botón Filtros: minimalista, SOLO el ícono (embudo), sin borde/sombra ni la
   palabra "Filtros" (redundante). Mismo control en el listado y en el mapa. */
.mb-publico .mb-cat-filtros-btn {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--mb-azul) !important;
	background: var(--mb-azul-suave) !important;
	border: 0 !important;
	border-radius: var(--mb-radio-chico) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background var(--mb-transicion);
}

.mb-publico .mb-cat-filtros-btn:hover,
.mb-publico .mb-cat-filtros-btn:focus-visible {
	background: var(--mb-azul-palido) !important;
	outline: none;
}

.mb-cat-filtros-btn .mb-cat-svg {
	width: 20px;
	height: 20px;
}

/* La palabra "Filtros" es redundante junto al ícono: solo queda como aria-label. */
.mb-cat-filtros-btn-texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.mb-cat-filtros-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--mb-verde);
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
}

/* ---- Panel lateral de filtros (off-canvas) ----
   Por defecto (sin JS) es un bloque estático y usable. Con JS pasa a ser un
   panel flotante a la derecha que se abre desde el botón "Filtros". */
.mb-cat-filtros {
	margin-bottom: 28px;
	background: var(--mb-superficie);
	border: 1px solid var(--mb-borde);
	border-radius: var(--mb-radio-medio);
	box-shadow: var(--mb-sombra);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mb-cat-filtros-overlay {
	display: none;
}

body.mb-filtros-abiertos {
	overflow: hidden;
}

/* La ✕ y "Ver resultados" solo tienen sentido con el panel flotante. */
.mb-cat-filtros-cerrar,
.mb-cat-filtros-pie [data-mb-filtros-cerrar] {
	display: none;
}

.mb-cat-filtros-overlay {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(26, 21, 64, 0.45);
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
	transition: opacity var(--mb-transicion), visibility var(--mb-transicion);
}

body.mb-filtros-abiertos .mb-cat-filtros-overlay {
	opacity: 1;
	visibility: visible;
}

.mb-cat-filtros {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 88vw);
	margin-bottom: 0;
	border: none;
	border-radius: 0;
	box-shadow: -16px 0 56px rgba(43, 36, 100, 0.22);
	z-index: 1001;
	transform: translateX(100%);
	transition: transform var(--mb-transicion);
}

.mb-cat-filtros.is-abierto {
	transform: translateX(0);
}

.mb-cat-filtros-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--mb-borde);
}

.mb-cat-filtros-titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--mb-azul);
}

.mb-cat-filtros-cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: var(--mb-azul-suave);
	color: var(--mb-azul);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--mb-transicion);
}

.mb-cat-filtros-cerrar:hover {
	background: var(--mb-azul-palido);
}

.mb-cat-filtros-cerrar .mb-cat-svg {
	width: 20px;
	height: 20px;
}

.mb-cat-filtros-cuerpo {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 6px 14px 18px;
}

.mb-cat-filtros-grupo {
	margin-top: 16px;
}

.mb-cat-filtros-grupo-titulo {
	margin: 0 0 8px;
	padding: 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mb-texto-tenue);
}

.mb-cat-filtros-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-cat-filtro-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: var(--mb-radio-chico);
	color: var(--mb-texto);
	text-decoration: none;
	transition: background-color var(--mb-transicion);
}

.mb-cat-filtro-item:hover {
	background: var(--mb-azul-suave);
}

.mb-cat-filtro-item.is-activo {
	background: var(--mb-azul-palido);
	color: var(--mb-azul);
	font-weight: 600;
}

.mb-cat-filtro-icono {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mb-azul-suave);
	color: var(--mb-azul);
	overflow: hidden;
}

.mb-cat-filtro-icono .mb-cat-svg {
	width: 18px;
	height: 18px;
}

.mb-cat-filtro-nombre {
	flex: 1;
	min-width: 0;
	font-size: 15px;
}

.mb-cat-filtro-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--mb-verde);
	opacity: 0;
}

.mb-cat-filtro-item.is-activo .mb-cat-filtro-check {
	opacity: 1;
}

.mb-cat-filtros-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	border-top: 1px solid var(--mb-borde);
}

.mb-cat-filtros-pie [data-mb-filtros-cerrar] {
	display: inline-flex;
	flex: 1;
}

/* ---- Bloques de filtro ---- */
.mb-cat-bloque {
	margin-bottom: 28px;
}

.mb-cat-bloque-titulo {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mb-verde-oscuro);
}

/* ---- Carrusel genérico (estilo MercadoLibre) ----
   Scroll nativo, el próximo ítem asoma para invitar a arrastrar. Las flechas
   no ocupan lugar fijo: flotan sobre el borde y solo aparecen en desktop, al
   pasar el mouse, hacia el lado al que todavía se puede desplazar. */
.mb-carrusel {
	position: relative;
}

.mb-carrusel-pista {
	list-style: none;
	margin: 0;
	padding: 4px 2px;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mb-carrusel-pista::-webkit-scrollbar {
	display: none;
}

.mb-carrusel-pista > li {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.mb-carrusel-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--mb-azul);
	background: var(--mb-superficie);
	border: 1px solid var(--mb-borde);
	border-radius: 50%;
	box-shadow: var(--mb-sombra-media);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mb-transicion);
}

.mb-carrusel-flecha--prev {
	left: -8px;
}

.mb-carrusel-flecha--next {
	right: -8px;
}

/* Solo en dispositivos con mouse real: la flecha aparece al pasar por encima
   del carrusel y únicamente si queda contenido hacia ese lado. En táctil
   nunca aparece; se arrastra con el dedo. */
@media (hover: hover) and (pointer: fine) {
	.mb-carrusel.is-puede-prev:hover .mb-carrusel-flecha--prev,
	.mb-carrusel.is-puede-next:hover .mb-carrusel-flecha--next {
		opacity: 1;
		pointer-events: auto;
	}

	.mb-carrusel-flecha:hover {
		color: #fff;
		background: var(--mb-azul);
		border-color: var(--mb-azul);
	}
}

/* ---- Carrusel de rubros: imagen en círculo + nombre ---- */
.mb-cat-rubro {
	width: 92px;
}

.mb-cat-rubro-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
	color: var(--mb-texto-secundario);
}

.mb-cat-rubro-img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--mb-borde);
	background: var(--mb-superficie);
	transition: border-color var(--mb-transicion), box-shadow var(--mb-transicion);
}

.mb-cat-rubro-link:hover .mb-cat-rubro-img {
	border-color: var(--mb-verde);
	box-shadow: var(--mb-sombra);
}

.mb-cat-rubro.is-activo .mb-cat-rubro-img {
	border-color: var(--mb-verde);
	box-shadow: 0 0 0 3px rgba(51, 170, 84, 0.25);
}

/* Fallback con inicial: tono suave del azul, no azul pleno */
.mb-cat-rubro-img--inicial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--mb-azul);
	background: var(--mb-azul-palido);
	border-color: transparent;
}

/* "Todos" usa el verde como acento para diferenciarse */
.mb-cat-rubro-img--todos {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #fff;
	background: var(--mb-verde);
	border-color: var(--mb-verde);
}

.mb-cat-rubro-img--todos .mb-cat-svg {
	font-size: 30px;
}

.mb-cat-rubro-nombre {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mb-azul-oscuro);
}

.mb-cat-rubro.is-activo .mb-cat-rubro-nombre {
	color: var(--mb-verde-oscuro);
}

/* ---- Carrusel de chips (tipo de beneficio) ---- */
.mb-publico .mb-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mb-texto-secundario);
	background: var(--mb-azul-suave);
	border: 1.5px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color var(--mb-transicion), color var(--mb-transicion), border-color var(--mb-transicion);
}

.mb-cat-chip .mb-cat-svg {
	font-size: 16px;
}

.mb-publico .mb-cat-chip:hover {
	border-color: var(--mb-azul);
	color: var(--mb-azul);
}

.mb-publico .mb-cat-chip.is-activo {
	background: var(--mb-azul);
	border-color: var(--mb-azul);
	color: #fff;
}

/* ---- Barra de resultados + toggle ---- */
.mb-cat-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0;
}

.mb-cat-conteo {
	margin: 0;
	font-size: 14px;
	color: var(--mb-texto-secundario);
}

.mb-cat-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: transparent;
	border-radius: 999px;
}

.mb-publico .mb-cat-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: var(--mb-texto-tenue);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--mb-transicion), color var(--mb-transicion);
}

.mb-cat-toggle-btn .mb-cat-svg {
	font-size: 17px;
}

.mb-publico .mb-cat-toggle-btn:hover {
	color: var(--mb-azul);
}

.mb-publico .mb-cat-toggle-btn.is-activo {
	background: var(--mb-azul-palido);
	color: var(--mb-azul);
}

.mb-cat-limpiar {
	margin: 12px 0 0;
}

/* Las cards de comercio (home y listado /comercios) usan .mb-logos / .mb-logo-*,
   definidas más abajo. */

/* ---- Vacío y mapa (placeholder hasta 17.2) ---- */
.mb-cat-vacio,
.mb-cat-mapa-aviso {
	padding: 48px 20px;
	text-align: center;
	color: var(--mb-texto-secundario);
	background: var(--mb-superficie);
	border: 1px dashed var(--mb-borde);
	border-radius: var(--mb-radio);
}

.mb-cat-vacio p {
	margin: 0 0 16px;
	font-size: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.mb-cat-phdr {
		padding: 40px 16px 36px;
	}

	.mb-cat-contenedor {
		padding: 24px 16px 48px;
	}

	.mb-cat-barra {
		flex-direction: column;
		align-items: flex-start;
	}

	.mb-cat-rubro {
		width: 84px;
	}

	.mb-cat-rubro-img {
		width: 60px;
		height: 60px;
	}
}

/* ==========================================================================
   Destacados de la home + cards de beneficio (D-028)
   Cada card está pensada para el flujo (decidir → consultar), no para mostrar
   datos: lo justo arriba, el detalle completo en el popup.
   ========================================================================== */

.mb-destacados {
	padding: 44px 20px;
}

.mb-destacados-in {
	max-width: 1160px;
	margin: 0 auto;
}

.mb-destacados-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.mb-destacados-titulo {
	margin: 0;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mb-azul);
	text-wrap: balance;
}

.mb-destacados-vertodos {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mb-verde-oscuro);
	text-decoration: none;
}

.mb-destacados-vertodos:hover {
	color: var(--mb-azul);
}

.mb-destacados-vertodos .mb-cat-svg {
	transition: transform var(--mb-transicion);
}

.mb-destacados-vertodos:hover .mb-cat-svg {
	transform: translateX(2px);
}

/* ---- Card de beneficio (home y /beneficios): logo+nombre arriba, beneficio en grande ---- */
.mb-bgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.mb-bcard {
	display: flex;
}

.mb-bcard-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 20px;
	background: var(--mb-superficie);
	border: 1px solid var(--mb-borde);
	border-radius: var(--mb-radio-medio);
	box-shadow: var(--mb-sombra);
	text-decoration: none;
	color: var(--mb-texto);
	cursor: pointer;
	transition: transform var(--mb-transicion), box-shadow var(--mb-transicion), border-color var(--mb-transicion);
}

.mb-bcard-link:hover,
.mb-bcard-link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--mb-sombra-media);
	border-color: var(--mb-borde-fuerte);
	outline: none;
}

.mb-bcard-comercio {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mb-bcard-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mb-azul-suave);
	flex-shrink: 0;
}

.mb-bcard-logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-bcard-logo-inicial {
	font-size: 16px;
	font-weight: 700;
	color: var(--mb-azul);
}

.mb-bcard-comercio-nombre {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mb-texto-secundario);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* El beneficio: lo más grande de la card */
.mb-bcard-beneficio {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
}

.mb-bcard-valor {
	font-size: clamp(30px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--mb-verde-oscuro);
	text-wrap: balance;
}

.mb-bcard-titulo {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mb-azul);
}

.mb-bcard-tipo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mb-texto-secundario);
}

.mb-bcard-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mb-verde-oscuro);
}

.mb-bcard-cta .mb-cat-svg {
	transition: transform var(--mb-transicion);
}

.mb-bcard-link:hover .mb-bcard-cta .mb-cat-svg,
.mb-bcard-link:focus-visible .mb-bcard-cta .mb-cat-svg {
	transform: translateX(3px);
}

/* ---- Cards de "solo logo": comercios destacados de la home (carrusel) y
   listado /comercios (grilla). Mismo átomo: logo en marco + nombre debajo.
   En /comercios, los chips de beneficio van DENTRO del marco. ---- */
.mb-logos {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, 160px);
	justify-content: center;
	gap: 16px;
}

.mb-logo-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.mb-logo-marco {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	max-width: 150px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--mb-superficie);
	border: 1px solid var(--mb-borde);
	box-shadow: var(--mb-sombra);
	transition: transform var(--mb-transicion), box-shadow var(--mb-transicion), border-color var(--mb-transicion);
}

.mb-logo-link:hover .mb-logo-marco,
.mb-logo-link:focus-visible .mb-logo-marco {
	transform: translateY(-4px);
	box-shadow: var(--mb-sombra-media);
	border-color: var(--mb-azul);
}

.mb-logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-logo-inicial {
	font-size: 46px;
	font-weight: 700;
	color: var(--mb-azul);
}

.mb-logo-nombre {
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
	color: var(--mb-texto-secundario);
	line-height: 1.3;
}

/* Chips de beneficio dentro del marco (arriba, a la izquierda), con degradado
   para legibilidad sobre el logo */
.mb-logo-chips {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 7px 7px 22px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 4px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 50%, rgba(255, 255, 255, 0));
}

.mb-logo-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--mb-verde-oscuro);
	background: var(--mb-verde-palido);
	border-radius: 100px;
}

.mb-logo-chip .mb-cat-svg {
	font-size: 12px;
}

/* ---- Ancho de los ítems dentro del carrusel de destacados de la home ---- */
.mb-destacados-carrusel .mb-bcard {
	width: 250px;
}

.mb-destacados-carrusel .mb-logo-card {
	width: 150px;
}

/* ==========================================================================
   Popup de beneficio (<dialog> nativo): datos completos + consulta directa
   ========================================================================== */

.mb-pop {
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 0;
	border-radius: var(--mb-radio);
	background: transparent;
	box-shadow: var(--mb-sombra-hover);
	overflow: visible;
}

.mb-pop::backdrop {
	background: rgba(27, 21, 64, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.mb-pop-caja {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	padding: 26px 24px 24px;
	background: var(--mb-superficie);
	border-radius: var(--mb-radio);
}

.mb-pop-cerrar-form {
	position: absolute;
	top: 12px;
	right: 12px;
	margin: 0;
}

.mb-pop-cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mb-azul-suave);
	color: var(--mb-texto-secundario);
	cursor: pointer;
	transition: background var(--mb-transicion), color var(--mb-transicion);
}

.mb-pop-cerrar:hover {
	background: var(--mb-azul-palido);
	color: var(--mb-azul);
}

.mb-pop-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 40px;
}

.mb-pop-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--mb-azul-suave);
	flex-shrink: 0;
}

.mb-pop-logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-pop-logo-inicial {
	font-size: 22px;
	font-weight: 700;
	color: var(--mb-azul);
}

.mb-pop-head-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mb-pop-comercio {
	font-size: 16px;
	font-weight: 700;
	color: var(--mb-azul);
}

.mb-pop-rubro {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--mb-texto-secundario);
}

.mb-pop-ben {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px;
	background: var(--mb-verde-palido);
	border-radius: var(--mb-radio-medio);
}

.mb-pop-tag {
	padding: 4px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--mb-superficie);
	color: var(--mb-verde-oscuro);
}

.mb-pop-valor {
	font-size: clamp(34px, 7vw, 46px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--mb-verde-oscuro);
	text-wrap: balance;
}

.mb-pop-titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mb-azul);
}

.mb-pop-desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mb-texto);
}

.mb-pop-cond {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mb-texto-secundario);
	background: var(--mb-azul-suave);
	border-radius: var(--mb-radio-chico);
}

.mb-pop-cond .mb-cat-svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--mb-azul-medio);
}

.mb-pop-acciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.mb-pop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: var(--mb-radio-chico);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: filter var(--mb-transicion), transform var(--mb-transicion);
}

.mb-pop-btn:hover {
	filter: brightness(0.95);
	transform: translateY(-1px);
}

.mb-pop-btn--wa {
	background: var(--mb-verde);
	color: #fff;
}

.mb-pop-btn--tienda {
	background: var(--mb-azul);
	color: #fff;
}

.mb-pop-vermas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mb-azul-medio);
	text-decoration: none;
}

.mb-pop-vermas:hover {
	color: var(--mb-azul);
	text-decoration: underline;
}

/* Animación de entrada del popup (con degradación elegante) */
.mb-pop,
.mb-pop::backdrop {
	transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}

.mb-pop {
	opacity: 0;
	transform: translateY(10px) scale(0.98);
}

.mb-pop[open] {
	opacity: 1;
	transform: none;
}

.mb-pop::backdrop {
	opacity: 0;
}

.mb-pop[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.mb-pop[open] {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}

	.mb-pop[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-pop,
	.mb-pop::backdrop {
		transition: none;
	}

	.mb-pop {
		transform: none;
	}
}

/* ---- Responsive de destacados / cards de beneficio ---- */
@media (max-width: 600px) {
	.mb-destacados {
		padding: 32px 16px;
	}

	.mb-bgrid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.mb-bcard-link {
		padding: 16px;
		gap: 12px;
	}

	.mb-logos {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 380px) {
	.mb-bgrid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Card de comercio unificada (.mb-ccard) — misma card en la home y /comercios.
   Replica el prototipo: portada (fachada) + rubro + logo + nombre + dirección +
   beneficio + descripción. Click → ficha del comercio (sin popup).
   ========================================================================== */
.mb-ccards {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

/* Dentro del carrusel de la home mantiene el scroll horizontal, no la grilla. */
.mb-ccards--carrusel {
	display: flex;
	margin-top: 0;
}

.mb-ccards--carrusel > .mb-ccard {
	width: 300px;
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.mb-ccard {
	display: flex;
}

.mb-ccard-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--mb-superficie);
	border: 1px solid var(--mb-borde);
	border-radius: var(--mb-radio-medio);
	overflow: hidden;
	text-decoration: none;
	color: var(--mb-texto);
	box-shadow: var(--mb-sombra);
	transition: transform var(--mb-transicion), box-shadow var(--mb-transicion), border-color var(--mb-transicion);
}

.mb-ccard-link:hover,
.mb-ccard-link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--mb-sombra-media);
	border-color: var(--mb-borde-fuerte);
	outline: none;
}

.mb-ccard-portada {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--mb-azul-suave);
}

.mb-ccard-portada-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--mb-transicion);
}

.mb-ccard-link:hover .mb-ccard-portada-img {
	transform: scale(1.04);
}

.mb-ccard-portada-vacia {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mb-azul-palido), var(--mb-azul-suave));
}

.mb-ccard-rubro {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--mb-azul);
	background: rgba(255, 255, 255, 0.94);
	border-radius: 100px;
	box-shadow: var(--mb-sombra);
}

.mb-ccard-rubro .mb-cat-svg {
	font-size: 13px;
}

.mb-ccard-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}

.mb-ccard-cab {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.mb-ccard-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--mb-azul-suave);
	border: 1px solid var(--mb-borde);
	flex-shrink: 0;
}

.mb-ccard-logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-ccard-logo-inicial {
	font-size: 20px;
	font-weight: 700;
	color: var(--mb-azul);
}

.mb-ccard-id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mb-ccard-nombre {
	font-size: 16px;
	font-weight: 700;
	color: var(--mb-azul);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-ccard-dir {
	font-size: 12.5px;
	color: var(--mb-texto-tenue);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-ccard-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 6px 11px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mb-verde-oscuro);
	background: var(--mb-verde-palido);
	border-radius: 100px;
}

.mb-ccard-badge .mb-cat-svg {
	font-size: 14px;
}

.mb-ccard-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mb-texto-secundario);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Card de beneficio restilizada al prototipo (conserva el popup): valor en
   grande + tag arriba, comercio, rubro, condiciones y CTA "Ver beneficio".
   ========================================================================== */
.mb-bcard-h {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.mb-bcard-perc {
	font-size: clamp(28px, 4.2vw, 38px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--mb-verde-oscuro);
	text-wrap: balance;
}

.mb-bcard-tag {
	flex-shrink: 0;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--mb-verde-oscuro);
	background: var(--mb-verde-palido);
	border-radius: 100px;
}

.mb-bcard-tag--cuota {
	color: var(--mb-azul);
	background: var(--mb-azul-palido);
}

/* Nombre del comercio: prominente (antes era un pie chico). */
.mb-bcard-link .mb-bcard-comercio-nombre {
	font-size: 16px;
	font-weight: 700;
	color: var(--mb-azul);
	line-height: 1.25;
	white-space: normal;
	overflow: visible;
}

.mb-bcard-rubro {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mb-texto-secundario);
}

.mb-bcard-sub {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mb-azul);
}

.mb-bcard-cond {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--mb-texto-secundario);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mb-bcard-cta {
	margin-top: auto;
}

/* En la card de beneficio el protagonista es el BENEFICIO, no el comercio: el
   comercio va como una línea secundaria arriba (logo chico + nombre discreto). */
.mb-bcard.mb-ccard .mb-ccard-body {
	gap: 10px;
}

.mb-bcard-comercio {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mb-bcard-comercio-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--mb-azul-suave);
	flex-shrink: 0;
}

.mb-bcard-comercio-logo .mb-ccard-logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-bcard-comercio-logo .mb-ccard-logo-inicial {
	font-size: 13px;
	font-weight: 700;
	color: var(--mb-azul);
}

/* Nombre del comercio: discreto, NO compite con el beneficio. */
.mb-bcard-comercio-nombre {
	font-size: 13px;
	font-weight: 600;
	color: var(--mb-texto-secundario);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La oferta: el beneficio en grande y verde, con el ícono del rubro adelante. */
.mb-bcard-oferta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mb-bcard.mb-ccard .mb-bcard-perc {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: clamp(22px, 3.4vw, 30px);
	line-height: 1.12;
	min-width: 0;
	text-wrap: balance;
}

.mb-bcard-perc-ico {
	width: 0.8em;
	height: 0.8em;
	margin-top: 0.14em;
	flex-shrink: 0;
	color: var(--mb-verde-oscuro);
}

/* El valor puede ir en dos líneas (p. ej. "Envío gratis") sin romper la card. */
.mb-bcard-perc-txt {
	min-width: 0;
}

/* Ancho de la card de comercio en el carrusel de la home (reemplaza logo-card). */
.mb-destacados-carrusel .mb-ccard {
	width: 300px;
}

@media (max-width: 600px) {
	.mb-ccards {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.mb-ccard-body {
		padding: 12px;
		gap: 10px;
	}

	.mb-ccard-nombre {
		font-size: 14.5px;
	}
}

@media (max-width: 400px) {
	.mb-ccards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   BLINDAJE ROYAL — reafirmación de fondos/bordes de los botones propios.
   El reset duro de arriba neutraliza <button> con !important (para tapar a
   Royal); por eso los botones que SÍ deben tener fondo/borde propio se
   reafirman acá con .mb-publico + !important, ganándole al reset y al tema.
   Si agregás un botón nuevo con fondo, agregalo también acá. (Regla dura.)
   ========================================================================== */
.mb-publico .mb-cat-btn--primario {
	background: var(--mb-azul) !important;
	color: #fff !important;
}

.mb-publico .mb-cat-btn--primario:hover {
	background: var(--mb-azul-medio) !important;
}

.mb-publico .mb-cat-toggle-btn.is-activo {
	background: var(--mb-azul-palido) !important;
	color: var(--mb-azul) !important;
}

.mb-publico .mb-carrusel-flecha {
	color: var(--mb-azul) !important;
	background: var(--mb-superficie) !important;
	border: 1px solid var(--mb-borde) !important;
	box-shadow: var(--mb-sombra-media) !important;
}

@media (hover: hover) and (pointer: fine) {
	.mb-publico .mb-carrusel-flecha:hover {
		color: #fff !important;
		background: var(--mb-azul) !important;
		border-color: var(--mb-azul) !important;
	}
}

.mb-publico .mb-pop-cerrar {
	background: var(--mb-azul-suave) !important;
	color: var(--mb-texto-secundario) !important;
}

.mb-publico .mb-pop-cerrar:hover {
	background: var(--mb-azul-palido) !important;
	color: var(--mb-azul) !important;
}

/* Botones del popup de beneficio (WhatsApp / tienda): son <a>, así que Royal les
   mete su color de link VERDE → texto verde sobre verde (ilegible) o verde sobre
   azul. Forzamos texto BLANCO (el ícono usa currentColor, sale blanco también) y
   reafirmamos el fondo. "Ver más" queda azul, no verde. */
.mb-publico .mb-pop-btn,
.mb-publico .mb-pop-btn:hover {
	color: #fff !important;
}

.mb-publico .mb-pop-btn--wa {
	background: var(--mb-verde) !important;
}

.mb-publico .mb-pop-btn--tienda {
	background: var(--mb-azul) !important;
}

.mb-publico .mb-pop-vermas {
	color: var(--mb-azul-medio) !important;
}

.mb-publico .mb-pop-vermas:hover {
	color: var(--mb-azul) !important;
}