/* ==========================================================================
   Maosol Core — catálogo, categorías, marcas y ficha de producto
   Espacio de diseño del boceto: 1920px. Medidas fluidas con vw + clamp.
   ========================================================================== */

:root {
	--ms-verde: #00483d;
	--ms-verde-oscuro: #003a31;
	--ms-crema: #f6f5e3;
	--ms-blanco: #fff;
	--ms-bordo: #7c2529;
	--ms-titulo: 'Cooper BT', Georgia, serif;
	--ms-texto: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
	--ms-radio-card: clamp(14px, 1.25vw, 24px);
	--ms-sombra-card: 0 10px 30px rgba(0, 72, 61, 0.06);
	--ms-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ms-dur: 0.45s;
	--ms-container: 1920px; /* 1760 de contenido + 80 de margen a cada lado (boceto) */
	--ms-gutter: clamp(20px, 4.17vw, 80px);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ms-main {
	width: 100%;
	max-width: var(--ms-container);
	margin: 0 auto;
	padding: 0 var(--ms-gutter);
	box-sizing: border-box;
	color: var(--ms-verde);
	font-family: var(--ms-texto);
}

.ms-catalog-view .page-header {
	display: none;
}

/* El tema (Hello Elementor) limita .site-main a su content-width: acá manda .ms-main. */
body.ms-catalog-view main.site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.ms-catalog-view .page-content {
	margin: 0;
	padding: 0;
}

.ms-catalog .screen-reader-text,
.ms-brandpage .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Animaciones de entrada (reveal) — respetan prefers-reduced-motion
   -------------------------------------------------------------------------- */

.ms-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur) var(--ms-ease);
	will-change: opacity, transform;
}

.ms-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.no-js .ms-reveal,
.ms-no-observer .ms-reveal {
	opacity: 1;
	transform: none;
}

@keyframes ms-pop {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ms-card--pop {
	animation: ms-pop 0.5s var(--ms-ease) both;
}

@media (prefers-reduced-motion: reduce) {
	.ms-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Carrusel de categorías (.ms-cats)
   Boceto (1920): círculos de 143px con centros cada 275px (el primero en x 271),
   flechas de 18px en x 99 y x 1803. Los PNG de las categorías ya traen el aro.
   -------------------------------------------------------------------------- */

.ms-cats {
	--ms-cat-cols: 6;
	--ms-cat-size: clamp(88px, 7.45vw, 143px);
	--ms-cat-label: clamp(14px, 1.1vw, 21px);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 clamp(10px, 0.9vw, 17px);
	width: 100%;
	padding: 0 1vw;
	box-sizing: border-box;
	font-family: var(--ms-titulo);
}

.ms-cats__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ms-cats__viewport::-webkit-scrollbar {
	display: none;
}

/* Páginas de 6 categorías: 1 fila de 6 en escritorio, 2 filas de 3 en tablet/móvil. */
.ms-cats__track,
.ms-cats__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-cats__track {
	display: flex;
}

.ms-cats__page {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.ms-cats__items {
	display: grid;
	grid-template-columns: repeat(var(--ms-cat-cols), minmax(0, 1fr));
	row-gap: clamp(16px, 2vw, 32px);
}

.ms-cats__item {
	display: flex;
	justify-content: center;
	padding: 8px 4px;
	box-sizing: border-box;
}

.ms-cats .ms-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 0.95vw, 18px);
	width: 100%;
	color: var(--ms-verde);
	text-decoration: none;
	outline: none;
}

.ms-cat__circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ms-cat-size);
	height: var(--ms-cat-size);
	border-radius: 50%;
	background-color: transparent;
	transition:
		background-color 0.35s var(--ms-ease),
		transform 0.35s var(--ms-ease),
		box-shadow 0.35s var(--ms-ease);
}

.ms-cat__icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: filter 0.35s var(--ms-ease);
}

.ms-cat__label {
	width: max-content;
	max-width: 7em;
	font-size: var(--ms-cat-label);
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.ms-cat:hover .ms-cat__circle,
.ms-cat:focus-visible .ms-cat__circle {
	transform: translateY(-4px);
	box-shadow: 0 14px 26px rgba(0, 72, 61, 0.14);
}

.ms-cat:focus-visible .ms-cat__circle {
	outline: 2px solid var(--ms-verde);
	outline-offset: 4px;
}

/* Activo: círculo relleno verde con el dibujo en crema (boceto pág. 2). */
.ms-cat.is-active .ms-cat__circle {
	background-color: var(--ms-verde);
}

.ms-cat.is-active .ms-cat__icon {
	filter: brightness(0) invert(0.97) sepia(0.25) brightness(1.02);
}

.ms-cats {
	--ms-arrow: clamp(12px, 0.95vw, 18px);
}

.ms-cats .ms-cats__arrow {
	min-width: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ms-arrow);
	height: calc(var(--ms-cat-size) + 16px);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ms-verde);
	cursor: pointer;
	transition: opacity 0.25s, transform 0.25s var(--ms-ease);
}

.ms-cats .ms-cats__arrow svg {
	display: block;
	width: var(--ms-arrow);
	height: calc(var(--ms-arrow) * 20 / 12);
	fill: currentColor;
}

.ms-cats .ms-cats__arrow:hover {
	background: none;
	color: var(--ms-verde);
	transform: scale(1.2);
}

.ms-cats .ms-cats__arrow:focus-visible {
	outline: 2px solid var(--ms-verde);
	outline-offset: 6px;
	border-radius: 4px;
}

.ms-cats .ms-cats__arrow[disabled] {
	opacity: 0.25;
	cursor: default;
	transform: none;
}

.ms-cats.is-static .ms-cats__arrow {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   Catálogo (.ms-catalog)
   -------------------------------------------------------------------------- */

.ms-catalog {
	padding: clamp(40px, 5.8vw, 111px) 0 clamp(56px, 5vw, 96px);
}

.ms-catalog__hero {
	position: relative;
	width: 100vw;
	box-sizing: border-box;
	margin: calc(-1 * clamp(40px, 5.8vw, 111px)) calc(50% - 50vw) clamp(40px, 5.2vw, 88px);
	padding: clamp(32px, 4vw, 56px) var(--ms-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1vw, 16px);
	min-height: clamp(200px, 18vw, 340px);
	text-align: center;
	background: var(--ms-verde);
	overflow: hidden;
}

.ms-catalog__hero-title {
	margin: 0;
	color: var(--ms-blanco);
	font-family: var(--ms-titulo);
	font-size: clamp(34px, 4vw, 64px);
	font-weight: 500;
	line-height: 1.1;
	animation: ms-fade-up 0.9s 0.15s var(--ms-ease) both;
}

.ms-catalog__hero-sub {
	margin: 0;
	max-width: 640px;
	color: var(--ms-crema);
	font-family: var(--ms-texto);
	font-size: clamp(15px, 1.1vw, 20px);
	font-weight: 400;
	line-height: 1.5;
	animation: ms-fade-up 0.9s 0.3s var(--ms-ease) both;
}

.ms-catalog .ms-cats {
	margin-bottom: clamp(48px, 6.7vw, 128px);
}

/* Filtro de marcas: logos a 1 tinta, alto máx. 119px en el boceto. */
.ms-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.2vw, 42px) clamp(24px, 3.9vw, 75px);
	min-height: clamp(48px, 6.2vw, 119px);
	margin: 0 auto clamp(56px, 10.2vw, 197px);
	max-width: 1700px;
}

.ms-brands .ms-brand {
	position: relative;
	width: clamp(64px, 8vw, 150px);
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(44px, 6.2vw, 119px);
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important;
	color: var(--ms-verde);
	cursor: pointer;
	opacity: 0.55;
	transition:
		opacity 0.3s var(--ms-ease),
		transform 0.3s var(--ms-ease),
		filter 0.3s var(--ms-ease);
}

.ms-brand[hidden] {
	display: none;
}

.ms-brand__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s var(--ms-ease);
}

.ms-brand__logo--color {
	opacity: 0;
}

.ms-brands .ms-brand:hover .ms-brand__logo--color,
.ms-brands .ms-brand:focus-visible .ms-brand__logo--color,
.ms-brands .ms-brand.is-active .ms-brand__logo--color {
	opacity: 1;
}

.ms-brands .ms-brand:hover .ms-brand__logo--tinta,
.ms-brands .ms-brand:focus-visible .ms-brand__logo--tinta,
.ms-brands .ms-brand.is-active .ms-brand__logo--tinta {
	opacity: 0;
}

.ms-brand__name {
	font-family: var(--ms-titulo);
	font-size: clamp(15px, 1.15vw, 22px);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.ms-brands .ms-brand:hover,
.ms-brands .ms-brand:focus-visible,
.ms-brands .ms-brand.is-active {
	background: none !important;
	color: var(--ms-verde);
	opacity: 1;
	transform: translateY(-3px);
}

.ms-brand:focus-visible {
	outline: 2px solid var(--ms-verde);
	outline-offset: 6px;
	border-radius: 6px;
}

.ms-brands.has-active .ms-brand:not(.is-active):not(:hover) {
	opacity: 0.3;
}

/* Grilla de productos: 3 columnas, tarjetas 444×449 entre x196 y x1724. */
.ms-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(40px, 3.8vw, 72px) clamp(24px, 5vw, 96px);
	width: 100%;
	max-width: 1528px;
	margin: 0 auto;
}

.ms-card {
	min-width: 0;
}

.ms-card[hidden] {
	display: none;
}

.ms-grid .ms-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--ms-verde);
	text-decoration: none;
}

.ms-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 444 / 449;
	padding: clamp(16px, 2vw, 40px);
	border-radius: var(--ms-radio-card);
	background: var(--ms-blanco);
	box-shadow: var(--ms-sombra-card);
	box-sizing: border-box;
	overflow: hidden;
	transition:
		transform var(--ms-dur) var(--ms-ease),
		box-shadow var(--ms-dur) var(--ms-ease);
}

.ms-card__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.6s var(--ms-ease);
}

.ms-card__media--placeholder .ms-card__img {
	max-width: 70%;
	max-height: 70%;
	opacity: 0.9;
}

.ms-card__link:hover .ms-card__media,
.ms-card__link:focus-visible .ms-card__media {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(0, 72, 61, 0.12);
}

.ms-card__link:hover .ms-card__img {
	transform: scale(1.04);
}

.ms-card__link:focus-visible {
	outline: none;
}

.ms-card__link:focus-visible .ms-card__media {
	outline: 2px solid var(--ms-verde);
	outline-offset: 4px;
}

.ms-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: clamp(16px, 2.6vw, 50px);
	font-size: clamp(14px, 0.99vw, 19px);
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

.ms-card__title {
	font-weight: 500;
}

.ms-card__brand,
.ms-card__size {
	font-weight: 400;
}

.ms-card__sizes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.4em;
}

/* Los tamaños van en una línea separados por "·", también en la página de marca
   (07/10/2026: se quitó el override que los apilaba en columna). */
.ms-card__size + .ms-card__size::before {
	content: '·';
	margin-right: 0.4em;
	opacity: 0.6;
}

.ms-catalog__empty {
	margin: clamp(24px, 3vw, 48px) auto;
	font-size: clamp(16px, 1.15vw, 22px);
	text-align: center;
	opacity: 0.75;
}

.ms-catalog__empty[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.ms-crumbs {
	margin: clamp(28px, 2.9vw, 56px) 0 clamp(24px, 2.1vw, 40px);
	font-size: clamp(13px, 0.83vw, 16px);
}

.ms-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-crumbs__item + .ms-crumbs__item::before {
	content: '/';
	margin: 0 0.5em;
	opacity: 0.5;
}

.ms-crumbs .ms-crumbs__link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

.ms-crumbs__link:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Botones y píldoras
   -------------------------------------------------------------------------- */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 2.5em;
	border-radius: 999px;
	font-family: var(--ms-texto);
	font-size: clamp(15px, 0.9vw, 17px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.25s var(--ms-ease),
		color 0.25s var(--ms-ease),
		transform 0.25s var(--ms-ease),
		box-shadow 0.25s var(--ms-ease);
}

.ms-btn--outline {
	border: 2px solid var(--ms-verde);
	background: transparent;
	color: var(--ms-verde);
}

.ms-btn--outline:hover,
.ms-btn--outline:focus-visible {
	background: var(--ms-verde);
	color: var(--ms-blanco);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 72, 61, 0.18);
}

.ms-pill {
	display: inline-block;
	padding: 0.7em 1.7em;
	border-radius: 999px;
	background: var(--ms-verde);
	color: var(--ms-blanco);
	font-size: clamp(14px, 0.83vw, 16px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Ficha de producto (.ms-product) — boceto pág. 5/7
   -------------------------------------------------------------------------- */

.ms-product {
	padding: 0 clamp(0px, 6.5vw, 125px) clamp(56px, 5vw, 96px);
}

.ms-product__wrap {
	display: flex;
	align-items: flex-start;
	gap: clamp(32px, 6vw, 110px);
}

.ms-product__photo {
	flex: 0 0 44%;
	max-width: 750px;
	margin: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 3vw, 60px);
	border-radius: var(--ms-radio-card);
	background: var(--ms-blanco);
	box-shadow: var(--ms-sombra-card);
	box-sizing: border-box;
}

.ms-product__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ms-product__photo--placeholder .ms-product__img {
	max-width: 65%;
	max-height: 65%;
}

.ms-product__info {
	flex: 1 1 320px;
	min-width: 0;
	padding-top: clamp(8px, 1.5vw, 28px);
}

.ms-product__title {
	margin: 0 0 clamp(18px, 1.5vw, 28px);
	font-family: var(--ms-titulo);
	font-size: clamp(30px, 3.1vw, 60px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--ms-verde);
}

.ms-product__desc {
	margin-bottom: clamp(20px, 1.6vw, 32px);
	font-size: clamp(15px, 0.94vw, 18px);
	line-height: 1.5;
}

.ms-product__desc p:last-child {
	margin-bottom: 0;
}

.ms-product__label {
	margin: 0 0 clamp(12px, 0.9vw, 18px);
	font-size: clamp(15px, 0.94vw, 18px);
	opacity: 0.75;
}

.ms-product__pres {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.75vw, 14px);
	margin: 0 0 clamp(32px, 3.2vw, 62px);
	padding: 0;
	list-style: none;
}

.ms-product__pres-row {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1vw, 20px);
}

.ms-product__code {
	font-size: clamp(14px, 0.9vw, 17px);
	opacity: 0.9;
}

.ms-product__cta {
	width: 100%;
	max-width: 660px;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Página de marca (.ms-brandpage) — boceto pág. 4/6
   -------------------------------------------------------------------------- */

.ms-brandpage__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 2560 / 910;
	max-height: 690px;
	overflow: hidden;
	background: var(--ms-verde);
}

.ms-brandpage__hero--plain {
	aspect-ratio: auto;
	min-height: clamp(220px, 22vw, 420px);
}

.ms-brandpage__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: ms-hero-in 1.4s var(--ms-ease) both;
}

@keyframes ms-hero-in {
	from {
		transform: scale(1.06);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.ms-brandpage__title {
	position: relative;
	margin: 0;
	padding: 0 var(--ms-gutter);
	color: var(--ms-blanco);
	text-align: center;
	animation: ms-fade-up 0.9s 0.3s var(--ms-ease) both;
}

@keyframes ms-fade-up {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.ms-brandpage__logo {
	display: block;
	width: clamp(200px, 25vw, 480px);
	height: auto;
	max-height: clamp(150px, 22vw, 420px);
	object-fit: contain;
	/* Los logos a 1 tinta son verdes: se pasan a blanco sobre la foto. */
	filter: brightness(0) invert(1);
}

.ms-brandpage__name {
	font-family: var(--ms-titulo);
	font-size: clamp(36px, 4.5vw, 86px);
	font-weight: 500;
	line-height: 1;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.ms-brandpage__intro {
	max-width: 900px;
	margin: clamp(40px, 3.5vw, 64px) auto 0;
	padding: 0 var(--ms-gutter);
	font-family: var(--ms-titulo);
	font-size: clamp(20px, 1.6vw, 30px);
	font-weight: 300;
	line-height: 1.35;
	text-align: center;
	color: var(--ms-verde);
}

.ms-brandpage__grid {
	max-width: calc(1528px + 2 * var(--ms-gutter));
	padding: clamp(48px, 4.2vw, 80px) var(--ms-gutter) clamp(56px, 5vw, 96px);
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.ms-brandpage__bg,
	.ms-brandpage__title {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Grilla de marcas ([maosol_marcas])
   -------------------------------------------------------------------------- */

.ms-marcas-section {
	padding: clamp(40px, 5.8vw, 111px) 0 clamp(56px, 5vw, 96px);
}

.ms-section-title {
	margin: 0 0 clamp(32px, 3.5vw, 64px);
	font-family: var(--ms-titulo);
	font-size: clamp(34px, 4.6vw, 88px);
	font-weight: 500;
	line-height: 1;
	color: var(--ms-verde);
}

.ms-marcas {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(16px, 1.5vw, 28px) clamp(10px, 1vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-marcas .ms-marcas__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(60px, 6.2vw, 119px);
	color: var(--ms-verde);
	text-decoration: none;
}

.ms-marcas__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.35s var(--ms-ease);
}

.ms-marcas__logo--color {
	opacity: 0;
}

.ms-marcas__link:hover .ms-marcas__logo--color,
.ms-marcas__link:focus-visible .ms-marcas__logo--color {
	opacity: 1;
}

.ms-marcas__link:hover .ms-marcas__logo--tinta {
	opacity: 0;
}

.ms-marcas__name {
	font-family: var(--ms-titulo);
	font-size: clamp(16px, 1.2vw, 24px);
	font-weight: 500;
	text-align: center;
}

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

@media (max-width: 1180px) {
	.ms-cats {
		--ms-cat-cols: 3;
		--ms-cat-size: clamp(88px, 12vw, 130px);
		--ms-cat-label: clamp(14px, 1.8vw, 20px);
		align-items: center;
	}

	.ms-marcas {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

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

	.ms-brands .ms-brand {
		height: 48px;
	}

	.ms-brand__logo {
		max-width: 110px;
	}

	.ms-product__wrap {
		flex-direction: column;
		gap: 32px;
	}

	.ms-product__photo {
		flex-basis: auto;
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}

	.ms-product__info {
		flex-basis: auto;
		width: 100%;
	}

	.ms-marcas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Móvil: categorías en 2 filas de 3 con flechas (boceto mobile), grilla de 2. */
@media (max-width: 700px) {
	.ms-cats {
		--ms-cat-cols: 3;
		--ms-cat-size: clamp(64px, 18vw, 84px);
		--ms-cat-label: clamp(12px, 3.4vw, 15px);
		gap: 0 6px;
		padding: 0;
		align-items: center;
	}

	.ms-cats .ms-cats__arrow {
		--ms-arrow: 12px;
		height: auto;
		padding: 12px 0;
	}

	.ms-cat__label {
		max-width: 7.5em;
	}

	.ms-catalog {
		padding-top: 32px;
	}

	.ms-catalog .ms-cats {
		margin-bottom: 40px;
	}

	.ms-brands {
		gap: 14px 22px;
		margin-bottom: 44px;
	}

	.ms-brands .ms-brand {
		height: 44px;
	}

	.ms-brand__logo {
		max-width: 110px;
	}

	.ms-grid {
		gap: 28px 14px;
	}

	.ms-card__body {
		margin-top: 12px;
		font-size: 13px;
	}

	.ms-crumbs {
		margin: 20px 0 20px;
	}

	.ms-product__title {
		font-size: 30px;
	}

	.ms-product__cta {
		max-width: none;
	}

	.ms-brandpage__hero {
		aspect-ratio: 16 / 10;
	}

	.ms-marcas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   14/09/2026 — Fondo crema también en el catálogo y en los archivos de categoría
   (el tema dejaba el body en blanco). Las tarjetas siguen en blanco.
   ========================================================================== */
body.ms-catalog-view {
	background-color: var(--ms-crema);
}

/* ==========================================================================
   15/09/2026 — Cabecera
   ========================================================================== */

/* Selector Ing / Esp: texto estático sin función. Para reactivarlo cuando llegue
   la versión en inglés, borrar esta regla (el widget sigue en Elementor). */
.elementor-element-5c70e183 {
	display: none !important;
}

/* Botón Catálogo: icono de descarga delante del texto. */
.elementor-button .ms-btn-dl {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
}

.elementor-button:has(.ms-btn-dl) .elementor-button-content-wrapper,
.elementor-button:has(.ms-btn-dl) {
	display: inline-flex;
	align-items: center;
}

/* Buscador: formulario real (form.ms-buscador). La píldora es el form, no el input:
   200 × 42, transparente, borde 1 px verde, radio 30 px — misma altura y mismo
   centro vertical que el botón Catálogo y la lupa. */
.ms-buscador {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 200px;
	max-width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--ms-verde);
	border-radius: 30px;
	background: transparent;
	transition: box-shadow 0.25s var(--ms-ease);
}

.ms-buscador input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	color: var(--ms-verde);
	font-family: var(--ms-texto);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}

.ms-buscador input[type="search"]::placeholder {
	color: var(--ms-verde);
	opacity: 0.65;
}

.ms-buscador input[type="search"]::-webkit-search-decoration,
.ms-buscador input[type="search"]::-webkit-search-cancel-button,
.ms-buscador input[type="search"]::-webkit-search-results-button,
.ms-buscador input[type="search"]::-webkit-search-results-decoration {
	display: none;
	-webkit-appearance: none;
}

/* El submit existe sólo para Enter y lectores de pantalla: invisible. El tema
   pinta los <button> con borde rosa, de ahí los !important. */
.ms-buscador .ms-buscador__submit {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* La lupa de la cabecera es el disparador (initBuscadorLupa en maosol.js). */
.ms-lupa {
	cursor: pointer;
	transition: opacity 0.2s var(--ms-ease);
}

.ms-lupa:hover,
.ms-lupa:focus-visible {
	opacity: 0.7;
}

.ms-lupa:focus-visible {
	outline: 2px solid var(--ms-verde);
	outline-offset: 3px;
}

.ms-buscador:focus-within {
	box-shadow: 0 0 0 2px rgba(0, 72, 61, 0.15);
}

/* Categorías con ícono "activo" propio (SVG del cliente: círculo verde + dibujo
   crema). Se cruzan por opacidad en vez de colorear el PNG con filter. */
.ms-cat__circle.has-active-icon .ms-cat__icon--active {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s var(--ms-ease);
}

.ms-cat.is-active .ms-cat__circle.has-active-icon {
	background-color: transparent;
}

.ms-cat.is-active .ms-cat__circle.has-active-icon .ms-cat__icon {
	filter: none;
}

.ms-cat.is-active .ms-cat__circle.has-active-icon .ms-cat__icon--active {
	opacity: 1;
}

/* Ficha: presentaciones seleccionables (cambian la foto). Selectores reforzados: el reset de Hello Elementor pinta los <button> en rosa. */
.ms-product__pres .ms-pill.ms-pill--toggle {
	display: inline-block;
	margin: 0;
	padding: 0.7em 1.7em;
	border: 2px solid var(--ms-verde);
	border-radius: 999px;
	background: transparent;
	color: var(--ms-verde);
	font-family: inherit;
	font-size: clamp(14px, 0.83vw, 16px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.25s var(--ms-ease), color 0.25s var(--ms-ease);
}

.ms-product__pres .ms-pill.ms-pill--toggle:hover,
.ms-product__pres .ms-pill.ms-pill--toggle:focus {
	background: rgba(0, 72, 61, 0.1);
	color: var(--ms-verde);
	border-color: var(--ms-verde);
}

.ms-product__pres .ms-pill.ms-pill--toggle:focus-visible {
	outline: 2px solid var(--ms-verde);
	outline-offset: 2px;
}

.ms-product__pres .ms-pill.ms-pill--toggle[aria-pressed="true"] {
	background: var(--ms-verde);
	color: var(--ms-blanco);
	cursor: default;
}

.ms-product__img {
	transition: opacity 0.2s var(--ms-ease);
}

.ms-product__img.is-swapping {
	opacity: 0.35;
}

/* Home: "Nos distinguen nuestros valores" — icono y texto centrados en columnas iguales (escritorio/tablet) */
@media (min-width: 768px) {
	.elementor-element-f4709c2c {
		justify-content: space-between !important;
	}

	.elementor-element-f4709c2c > .e-con {
		flex: 1 1 0 !important;
		align-items: center !important;
		text-align: center;
	}

	.elementor-element-f4709c2c .elementor-widget-image {
		margin: 0 auto -16px !important;
		align-self: center !important;
	}

	.elementor-element-f4709c2c .elementor-heading-title {
		text-align: center !important;
	}
}

/* ===== 17/10/2026: navegación de la página de marca + newsletter del pie ===== */
.ms-brandnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	max-width: calc(1528px + 2 * var(--ms-gutter));
	margin: 0 auto;
	padding: clamp(18px, 1.6vw, 28px) var(--ms-gutter) 0;
	box-sizing: border-box;
	font-family: var(--ms-texto);
	color: var(--ms-verde);
}

.ms-brandnav__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px 10px 16px;
	border: 1px solid var(--ms-verde);
	border-radius: 40px;
	color: var(--ms-verde);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background var(--ms-dur) var(--ms-ease), color var(--ms-dur) var(--ms-ease);
}

.ms-brandnav__back svg,
.ms-brandnav__step svg {
	flex: none;
	transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-brandnav__back:hover,
.ms-brandnav__back:focus-visible,
.ms-brandnav__back--solid {
	background: var(--ms-verde);
	color: var(--ms-crema);
}

.ms-brandnav__back--solid:hover,
.ms-brandnav__back--solid:focus-visible {
	background: var(--ms-verde-oscuro);
}

.ms-brandnav__back:hover svg,
.ms-brandnav__back:focus-visible svg {
	transform: translateX(-4px);
}

.ms-brandnav__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0 auto 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	opacity: 0.8;
}

.ms-brandnav__crumbs li + li::before {
	content: '/';
	margin: 0 10px;
	opacity: 0.5;
}

.ms-brandnav__crumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}

.ms-brandnav__crumbs a:hover {
	border-bottom-color: currentColor;
}

.ms-brandnav__crumbs [aria-current] {
	font-weight: 600;
}

.ms-brandnav__pager {
	display: flex;
	gap: 10px;
}

.ms-brandnav__step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	padding: 8px 14px;
	border-radius: 40px;
	background: rgba(0, 72, 61, 0.07);
	color: var(--ms-verde);
	font-size: 14px;
	text-decoration: none;
	transition: background var(--ms-dur) var(--ms-ease), color var(--ms-dur) var(--ms-ease);
}

.ms-brandnav__step--next svg {
	transform: scaleX(-1);
}

.ms-brandnav__step:hover,
.ms-brandnav__step:focus-visible {
	background: var(--ms-verde);
	color: var(--ms-crema);
}

.ms-brandnav__step:hover svg {
	transform: translateX(-3px);
}

.ms-brandnav__step--next:hover svg {
	transform: scaleX(-1) translateX(-3px);
}

.ms-brandnav__name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ms-brandnav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ms-brandpage__more {
	display: flex;
	justify-content: center;
	padding: 0 var(--ms-gutter) clamp(56px, 5vw, 96px);
}

.ms-brandpage__grid + .ms-brandpage__more,
.ms-catalog__empty + .ms-brandpage__more {
	margin-top: calc(-1 * clamp(24px, 2.5vw, 48px));
}

.ms-brandpage__more .ms-brandnav__back {
	padding: 14px 32px 14px 24px;
	font-size: 16px;
}

@media (max-width: 767px) {
	.ms-brandnav {
		gap: 12px;
	}

	.ms-brandnav__crumbs {
		display: none;
	}

	.ms-brandnav__back {
		padding: 9px 16px 9px 12px;
		font-size: 14px;
	}

	.ms-brandnav__step {
		padding: 9px;
	}

	.ms-brandnav__step .ms-brandnav__name {
		display: none;
	}
}

/* Newsletter del pie: campo trampa oculto y mensaje de estado. */
.ms-nl .ms-nl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ms-nl button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.ms-nl-msg {
	min-height: 1.4em;
	margin: 12px 0 0;
	font-family: var(--ms-texto);
	font-size: 15px;
	color: var(--ms-verde);
}

.ms-nl-msg.is-error {
	color: var(--ms-bordo);
}

/* ===== 17/10/2026: buscador del catálogo — barra de resultados y botón flotante ===== */
.ms-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	max-width: 1528px;
	margin: 0 auto clamp(28px, 2.5vw, 44px);
	padding: 16px 22px;
	border-radius: var(--ms-radio-card);
	background: rgba(0, 72, 61, 0.06);
	box-sizing: border-box;
	font-family: var(--ms-texto);
	color: var(--ms-verde);
}

.ms-results[hidden] {
	display: none;
}

.ms-results__text {
	margin: 0;
	font-size: clamp(16px, 1.1vw, 20px);
}

.ms-results__text strong {
	font-weight: 600;
}

.ms-results__clear,
.ms-results__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--ms-verde);
	border-radius: 40px;
	background: transparent;
	color: var(--ms-verde);
	font: 500 14px/1 var(--ms-texto);
	cursor: pointer;
	transition: background var(--ms-dur) var(--ms-ease), color var(--ms-dur) var(--ms-ease);
}

.ms-results__clear::after {
	content: '\2715';
	font-size: 11px;
}

.ms-results__clear:hover,
.ms-results__clear:focus-visible,
.ms-results__cat:hover,
.ms-results__cat:focus-visible {
	background: var(--ms-verde);
	color: var(--ms-crema);
}

.ms-results__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
	margin: 0;
	font-size: 14px;
	opacity: 0.9;
}

.ms-results__cat {
	border-color: transparent;
	background: var(--ms-verde);
	color: var(--ms-crema);
}

.ms-results__cat:hover,
.ms-results__cat:focus-visible {
	background: var(--ms-verde-oscuro);
}

.ms-results-jump {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 999;
	padding: 13px 26px;
	border: 0;
	border-radius: 40px;
	background: var(--ms-verde);
	color: var(--ms-crema);
	font: 500 15px/1 var(--ms-texto);
	box-shadow: 0 10px 28px rgba(0, 72, 61, 0.28);
	cursor: pointer;
	transform: translateX(-50%);
	animation: ms-jump-in 0.35s var(--ms-ease);
}

.ms-results-jump[hidden] {
	display: none;
}

.ms-results-jump:hover,
.ms-results-jump:focus-visible {
	background: var(--ms-verde-oscuro);
}

@keyframes ms-jump-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
}

@media (max-width: 767px) {
	.ms-results {
		padding: 14px 16px;
	}

	.ms-results-jump {
		bottom: 16px;
		width: max-content;
		max-width: calc(100% - 32px);
	}
}