/*
 * Perfil Empresa Premium — lenguaje visual aprobado con Juan mediante
 * mockups (dorado de marca + negro, sistema de rótulos de sección,
 * marcas/productos como vidriera, contacto como píldoras clickeables).
 * Pendiente: revisión fina con contenido real (colores exactos de marca,
 * mobile) directamente sobre el sitio antes de darlo por terminado.
 */

/*
 * "Breakout": este bloque ignora el max-width que pueda imponer un
 * contenedor padre del tema (ListingHive/Bootstrap suelen envolver el
 * contenido en un .container con su propio ancho fijo). En vez de andar
 * cazando el selector exacto de ese contenedor —frágil, puede cambiar
 * con una actualización del tema—, esto hace que la sección directamente
 * IGNORE cualquier límite heredado y ocupe el ancho real del viewport;
 * el ancho visual final lo sigue definiendo .ma-company con su propio
 * max-width, centrado adentro.
 */
.ma-company-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * Capa extra de robustez: si además del "breakout" de arriba, el tema
 * tiene un contenedor con nombres típicos (Bootstrap/ListingHive) que
 * insista en imponer su propio ancho incluso por dentro del breakout,
 * esto lo neutraliza — SOLO en páginas de Empresa (body.single-ma_company,
 * la clase que WordPress agrega solo a esta URL), nunca en el resto del
 * sitio.
 */
body.single-ma_company .container,
body.single-ma_company #content,
body.single-ma_company #primary,
body.single-ma_company .site-content,
body.single-ma_company main {
	max-width: none;
}

/*
 * Reset defensivo: neutraliza estilos globales típicos de un tema
 * (títulos, listas, links, imágenes) que podrían filtrarse acá adentro
 * y romper la jerarquía visual pensada. Todo lo que sigue abajo vuelve
 * a definir explícitamente cómo se ve cada cosa.
 */
.ma-company,
.ma-company *,
.ma-company *::before,
.ma-company *::after {
	box-sizing: border-box;
}

.ma-company h1,
.ma-company h2,
.ma-company h3,
.ma-company p {
	margin: 0;
}

.ma-company ul,
.ma-company ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ma-company a {
	text-decoration: none;
	color: inherit;
}

.ma-company img {
	max-width: 100%;
	display: block;
}

.ma-company {
	/*
	 * Ancho de contenedor: hoy es una variable LOCAL a este bloque, a
	 * propósito — no toca nada del resto del sitio. Si en el futuro se
	 * decide adoptar este mismo criterio de ancho en otras secciones de
	 * Mercado Avícola, esta es la línea a "subir" a una variable global
	 * del tema (o del plugin), sin tener que rediseñar nada de acá.
	 *
	 * Valor ajustado con una referencia empírica: al hacer zoom del
	 * navegador al 125% sobre el ancho anterior (1180px), la ocupación
	 * horizontal se sentía "correcta". Como el zoom escala todo parejo,
	 * un contenedor de ancho fijo ocupa una proporción del viewport que
	 * crece en la misma medida que el zoom, sin importar la resolución
	 * de pantalla — por eso alcanza con multiplicar por 1,25 para lograr
	 * al 100% la misma sensación que antes se lograba solo al 125%.
	 * 1180 × 1,25 ≈ 1475 → redondeado a 1480.
	 */
	--ma-container-max: 1480px;
	--ma-accent: #F2A900;
	--ma-accent-text: #3D2900;
	--ma-accent-tint: #FAEEDA;
	--ma-accent-tint-text: #633806;
	max-width: var(--ma-container-max);
	margin: 0 auto;
	padding: 0 24px 64px;
}

.ma-company__hero {
	position: relative;
}

.ma-company__cover {
	position: relative;
	height: 320px;
	border-radius: 14px;
	overflow: hidden;
}

.ma-company__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 900px) {
	.ma-company__cover {
		height: 380px;
	}
}

@media (max-width: 640px) {
	.ma-company__cover {
		height: auto;
		min-height: 140px; /* resguardo ante imágenes extremadamente panorámicas — nunca deja sin aire al logo/nombre/ubicación */
	}

	/* Sin portada cargada no hay ninguna imagen de la que la caja
	   pueda "derivar" una altura — mantiene el alto fijo de siempre. */
	.ma-company__cover--fallback {
		height: 300px;
	}

	.ma-company__cover img {
		height: auto;
		object-fit: contain; /* nunca recorta — la imagen se ve completa, a su proporción real */
	}

	.ma-company__hero-contenido {
		padding: 12px 16px 14px;
	}

	.ma-company__descripcion-breve {
		margin-top: 4px;
	}

	/* !important a propósito: hay una regla base (más abajo en este
	   mismo archivo, sin @media) que compite por el mismo selector —
	   sin esto, con empate de especificidad, gana la que está después
	   en el archivo, sin importar el tamaño de pantalla. Ya nos pasó
	   una vez con la imagen de portada (ahí se resolvió reordenando);
	   acá preferimos esto para no depender de mantener un orden
	   frágil en el archivo. */
	.ma-company__ubicacion {
		margin-top: 18px !important;
	}

	.ma-company__contacto-etiqueta {
		margin-top: 8px;
		margin-bottom: 4px;
	}

	/* El badge "Empresa verificada" vive acá abajo en mobile (ver
	   .ma-company__identidad-extra .ma-company__badge más abajo) — ya
	   no compite con el nombre dentro de la portada. */
}

.ma-company__cover--fallback {
	background: var(--ma-accent);
}

.ma-company__compartir {
	position: absolute;
	right: 16px;
	top: 16px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: rgba(255,255,255,0.85);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
}

#ma-redes-ancla-desktop {
	position: absolute;
	right: 16px;
	top: 60px;
	z-index: 3;
}

#ma-redes-ancla-desktop .ma-company__contacto-etiqueta {
	display: none; /* sobre la foto no hace falta la etiqueta "Seguinos" — los íconos ya se entienden solos, junto a Compartir */
}

#ma-redes-ancla-desktop .ma-company__contacto-cabecera {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#ma-redes-ancla-desktop .ma-company__contacto-cabecera-item {
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,0.85);
	border-radius: 8px;
}

/*
 * Degradado fijo y discreto — no depende de analizar cada imagen que
 * suba la Empresa. Cubre la mitad inferior de la portada, donde vive
 * el contenido, garantizando contraste con cualquier foto (clara,
 * oscura, muy cargada visualmente).
 */
.ma-company__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 50%);
	pointer-events: none;
}

.ma-company__cover--texto-negro .ma-company__hero-overlay {
	background: linear-gradient(to top, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.28) 30%, rgba(255,255,255,0) 50%);
}

.ma-company__hero-contenido {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 20px 18px;
	color: #fff;
	z-index: 2;
}

/*
 * En mobile, el script de la plantilla mueve acá Descripción breve y
 * Contacto (ver single-ma-company.php) — la portada solo tiene que
 * "adivinar" el espacio de Nombre+Badge+Ubicación, siempre corto y
 * predecible. En desktop, el script deja este bloque vacío (nada que
 * mostrar, nada que estilar) — Descripción breve y Contacto quedan
 * exactamente donde estaban siempre, adentro de la portada.
 */
.ma-company__identidad-extra:empty {
	display: none;
}

.ma-company__identidad-extra {
	background: #fff;
	border: 1px solid #eee;
	border-top: none;
	border-radius: 0 0 14px 14px;
	padding: 14px 20px 16px;
	margin-top: -1px;
}

.ma-company__identidad-extra .ma-company__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--ma-accent-tint);
	color: var(--ma-accent-tint-text);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 8px;
}

.ma-company__identidad-extra .ma-company__descripcion-breve {
	color: #444;
	text-shadow: none;
}

.ma-company__identidad-extra .ma-company__contacto-etiqueta {
	color: #999;
	text-shadow: none;
}

.ma-company__identidad-extra .ma-company__contacto-cabecera-item {
	background: #f6f6f6;
	border: 1px solid #eee;
}

.ma-company__hero-top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-right: 52px; /* deja el lugar del botón Compartir siempre libre, sin importar cuán largo sea el nombre */
}

/* Logo: ahora en línea junto al nombre (ya no superpuesto colgando
   del borde de la portada) — más simple y robusto en todas las
   pantallas, sin cálculos de superposición por breakpoint. */
.ma-company__logo {
	position: relative;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}

@media (min-width: 900px) {
	.ma-company__logo {
		width: 64px;
		height: 64px;
	}
}

/* El recorte de la imagen vive en un envoltorio APARTE, adentro del
   recuadro — así una insignia que se apoye en el borde del recuadro
   (ver editor.css) no queda cortada por este overflow:hidden. */
.ma-company__logo-img-wrap {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ma-company__logo-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ma-company__logo--vacio {
	border: 2px dashed rgba(255,255,255,0.6);
	background: rgba(255,255,255,0.15);
}

.ma-company__titulo-fila {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ma-company__nombre {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	margin: 0;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

@media (min-width: 900px) {
	.ma-company__nombre {
		font-size: 26px;
	}
}

.ma-company__badge {
	background: var(--ma-accent);
	color: var(--ma-accent-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
}

.ma-company__subtitulo {
	font-size: 14px;
	opacity: 0.7;
	margin: 6px 0 0;
}

/* Rubros ya no vive en la cabecera — este es el mismo estilo de
   píldoras, reutilizado tal cual dentro de la sección Empresa. */
.ma-company__rubros {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px;
}

.ma-company__rubros li {
	background: var(--ma-accent-tint);
	color: var(--ma-accent-tint-text);
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
}

.ma-company__descripcion-breve {
	font-size: 14px;
	line-height: 1.45;
	max-width: 640px;
	margin: 0;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* El espacio vive en el contenedor, no en el texto de adentro — así
   nunca depende de si ese texto está envuelto por el modo edición
   (que cambia el display del contenedor) o no. Misma composición en
   público y en administración, siempre. */
[data-ma-block="descripcion_breve"] {
	margin-top: 18px;
}

.ma-company__ubicacion {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	margin: 14px 0 0;
	color: rgba(255,255,255,0.8);
	text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.ma-company__contacto-etiqueta {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.7);
	text-shadow: 0 1px 3px rgba(0,0,0,0.35);
	margin-top: 14px;
	margin-bottom: 6px;
}

.ma-company__contacto-cabecera {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ma-company .ma-company__contacto-cabecera-item,
.ma-company .ma-company__contacto-cabecera-item:hover,
.ma-company .ma-company__contacto-cabecera-item:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	color: #111;
}

.ma-company__hero .ma-company__vacio {
	color: rgba(255,255,255,0.75);
}

/*
 * Alternativa manual para portadas muy claras o casi blancas, donde el
 * degradado oscuro solo no alcanza a garantizar contraste en toda la
 * zona de texto (sobre todo la parte de arriba, donde el degradado ya
 * se desvaneció). No depende de analizar la imagen — es una elección
 * simple que hace la propia Empresa, con previsualización inmediata.
 */
.ma-company__hero-contenido--texto-negro .ma-company__nombre,
.ma-company__hero-contenido--texto-negro .ma-company__descripcion-breve {
	color: #111;
	text-shadow: 0 1px 3px rgba(255,255,255,0.5);
}

.ma-company__hero-contenido--texto-negro .ma-company__ubicacion,
.ma-company__hero-contenido--texto-negro .ma-company__contacto-etiqueta {
	color: rgba(0,0,0,0.7);
	text-shadow: 0 1px 3px rgba(255,255,255,0.5);
}

.ma-company__hero-contenido--texto-negro .ma-company__vacio {
	color: rgba(0,0,0,0.55);
}

.ma-company__nav {
	display: flex;
	gap: 4px;
	margin-top: 20px;
	border-bottom: 1px solid #eee;
	padding-bottom: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ma-company__nav::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.ma-company__nav {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

.ma-company .ma-company__nav-item,
.ma-company .ma-company__nav-item:hover,
.ma-company .ma-company__nav-item:visited {
	display: inline-block;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ma-company .ma-company__nav-item.is-activa {
	color: #111;
	border-bottom-color: var(--ma-accent);
}

.ma-company .ma-company__boton-contactar,
.ma-company .ma-company__boton-contactar:hover,
.ma-company .ma-company__boton-contactar:visited {
	display: inline-block;
	margin-top: 18px;
	padding: 11px 28px;
	border-radius: 8px;
	background: #111;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
}

.ma-company .ma-company__boton-contactar:hover {
	background: #333;
}

.ma-company__seccion {
	margin-top: 36px;
}

@media (min-width: 900px) {
	.ma-company__seccion {
		margin-top: 56px;
	}
}

.ma-company__seccion-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.ma-company__seccion-header .ma-company__rotulo {
	margin: 0;
}

.ma-company__rotulo {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #C98A00;
	margin: 0 0 12px;
}

/* Ícono de ayuda ⓘ — solo en modo edición, CSS puro (hover en desktop,
   foco al tocar en pantallas táctiles), sin JavaScript. */
.ma-ayuda-i {
	position: relative;
	display: inline-flex;
	margin-left: 2px;
	margin-bottom: 12px;
	cursor: help;
	color: #bbb;
}

.ma-ayuda-i__marca {
	font-size: 13px;
	line-height: 1;
}

.ma-ayuda-i__texto {
	position: absolute;
	left: 0;
	bottom: 130%;
	background: #222;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 6px;
	white-space: normal;
	width: max-content;
	max-width: min(220px, 70vw);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	pointer-events: none;
	z-index: 5;
}

.ma-ayuda-i:hover .ma-ayuda-i__texto,
.ma-ayuda-i:focus .ma-ayuda-i__texto {
	opacity: 1;
	visibility: visible;
}

.ma-company__texto-largo {
	font-size: 15px;
	line-height: 1.75;
	max-width: 640px;
}

.ma-company__texto-largo p {
	margin: 0 0 1em;
}

.ma-company__texto-largo.is-truncado {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ma-company__ver-mas {
	background: none;
	border: none;
	padding: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: #C98A00;
	cursor: pointer;
}

.ma-company__marcas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

@media (min-width: 900px) {
	.ma-company__marcas {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

@media (min-width: 1300px) {
	.ma-company__marcas {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
}

.ma-company__marcas li {
	height: 150px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	overflow: hidden;
}

@media (min-width: 900px) {
	.ma-company__marcas li {
		height: 165px;
	}
}

.ma-company__marca-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 72px;
	overflow: hidden;
	flex-shrink: 0;
}

.ma-company__marca-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ma-company__marca-nombre {
	font-size: 13px;
	font-weight: 500;
	color: #222;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.ma-company__galeria {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 12px;
}

@media (min-width: 640px) {
	.ma-company__galeria {
		grid-template-columns: repeat(4, minmax(0,1fr));
	}
}

@media (min-width: 1300px) {
	.ma-company__galeria {
		grid-template-columns: repeat(5, minmax(0,1fr));
	}
}

.ma-company__galeria-item {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	background: #f4f4f4;
}

.ma-company__galeria-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lightbox: capa simple propia, sin librerías externas */
.ma-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

.ma-lightbox[hidden] {
	display: none;
}

.ma-lightbox__imagen {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}

.ma-lightbox__cerrar {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.ma-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.15);
	border: none;
	color: #fff;
	font-size: 32px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
}

.ma-lightbox__nav--prev {
	left: 16px;
}

.ma-lightbox__nav--next {
	right: 16px;
}

.ma-company__contacto {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ma-company .ma-company__pastilla,
.ma-company .ma-company__pastilla:hover,
.ma-company .ma-company__pastilla:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f4f4f4;
	border: 0.5px solid #e5e5e5;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	color: #222;
	text-decoration: none;
}

.ma-company .ma-company__pastilla:hover {
	border-color: #ccc;
	background: #eee;
}

/* ============================================================
   Sistema unificado de tarjetas — Productos, Servicios,
   Publicaciones, Catálogos, Novedades, Eventos. Un solo componente
   visual reutilizado por las 6 secciones (mismas clases, mismas
   reglas), con la sola variante object-fit:contain para Catálogos
   (evita recortar portadas de documentos, que suelen ser verticales).
   ============================================================ */
.ma-tarjetas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	align-items: stretch !important;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0,1fr));
}

.ma-tarjetas li {
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}

@media (min-width: 640px) {
	.ma-tarjetas {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
}

@media (min-width: 1100px) {
	.ma-tarjetas {
		grid-template-columns: repeat(4, minmax(0,1fr));
	}
}

.ma-company .ma-tarjeta,
.ma-company .ma-tarjeta:hover,
.ma-company .ma-tarjeta:visited {
	display: flex;
	flex-direction: column;
	flex-grow: 1 !important;
	min-height: 0 !important;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	overflow: hidden;
	color: #111;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
	.ma-company .ma-tarjeta:hover {
		box-shadow: 0 6px 18px rgba(0,0,0,0.09);
		transform: translateY(-2px);
	}
}

.ma-tarjeta__imagen {
	display: block;
	position: relative;
	width: 100%;
	height: 160px !important;
	background: #fafafa;
	overflow: hidden;
	flex-shrink: 0 !important;
}

@media (min-width: 640px) {
	.ma-tarjeta__imagen {
		height: 200px !important;
	}
}

@media (min-width: 1100px) {
	.ma-tarjeta__imagen {
		height: 220px !important;
	}
}

.ma-tarjeta__imagen img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	display: block;
}

/* Documentos (Catálogos): la portada suele ser vertical — se
   contiene entera en vez de recortarla como si fuera una foto. */
.ma-tarjeta__imagen--doc img {
	object-fit: contain;
	padding: 14px;
}

.ma-tarjeta__imagen-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #ccc;
}

.ma-tarjeta__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(255,255,255,0.92);
	color: #555;
}

.ma-tarjeta__cuerpo {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-grow: 1 !important;
	min-height: 0 !important;
}

.ma-tarjeta__titulo {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #111;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ma-tarjeta__secundario {
	font-size: 12px;
	color: #888;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Fecha de Evento: mismo criterio de "Ver más"/"Ver menos" que ya
   usa la descripción — cerrada, compacta (hereda el recorte de la
   regla de arriba); expandida, se ve completa (inicio y fin). Acotado
   a Evento con .ma-tarjeta--evento — no afecta el texto secundario de
   Producto/Novedad/Catálogo, que no tiene este comportamiento. */
.ma-tarjeta--evento .ma-tarjeta__secundario:not(.is-truncado) {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.ma-tarjeta__descripcion {
	font-size: 12px;
	line-height: 1.4;
	color: #999;
	margin-top: 2px;
}

.ma-tarjeta__descripcion.is-truncado {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ma-tarjeta__cta {
	margin-top: auto;
	padding-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #C98A00;
}

.ma-tarjeta__ver-mas {
	display: block;
	background: none;
	border: none;
	padding: 0;
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 500;
	color: #888;
	cursor: pointer;
	text-align: left;
}

.ma-tarjeta__ver-mas:hover {
	color: #555;
}

.ma-cargar-mas {
	display: block;
	margin: 24px auto 0;
	padding: 11px 28px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.ma-cargar-mas:hover {
	border-color: #bbb;
	background: #fafafa;
}

.ma-cargar-mas[disabled] {
	opacity: 0.6;
	cursor: default;
}