/* ==========================================================================
   Milar 2026 · home (especificación §3). Depende de milar2026.css (tokens).
   ========================================================================== */

.m26-page { background: #fff; }
.m26-main { display: block; }

.m26-home ul { list-style: none; margin: 0; padding: 0; }
.m26-home a { text-decoration: none; color: inherit; }
.m26-home img { max-width: 100%; }

/* --------------------------------------------------------------------------
   1 · Hero
   -------------------------------------------------------------------------- */
.m26-hero {
	background: var(--m26-ink);
	color: #fff;
	overflow: hidden;
}

.m26-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	padding-block: 8px 36px;
}

.m26-hero__art {
	order: -1;
	position: relative;
	display: flex;
	justify-content: center;
	padding-bottom: 46px;
	background: var(--m26-ink);
	isolation: isolate;
}

.m26-hero__m {
	display: block;
	width: min(62vw, 270px);
	height: auto;
	mix-blend-mode: lighten;
}

.m26-hero__copy .m26-eyebrow { color: var(--m26-green); }

.m26-hero__title {
	margin: 0 0 14px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
}

.m26-hero__title em {
	font-family: var(--m26-voice);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -.01em;
}

.m26-hero__lead {
	margin: 0 0 24px;
	max-width: 34em;
	color: var(--m26-muted-on-ink);
	font-size: 16px;
	line-height: 1.5;
}

.m26-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.m26-hero__ctas .m26-btn { flex: 1 1 auto; }

/* mini tarjeta de producto superpuesta */
.m26-mini {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(100%, 340px);
	padding: 10px 14px 10px 10px;
	border-radius: 16px;
	background: #fff;
	color: var(--m26-ink);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	transform: translateX(-50%);
	box-sizing: border-box;
	transition: transform .25s var(--m26-ease);
}

.m26-home .m26-mini { color: var(--m26-ink); }
.m26-mini[hidden] { display: none; }
.m26-mini:hover { transform: translateX(-50%) translateY(-3px); }

.m26-mini__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.m26-mini__img img { width: 100%; height: 100%; object-fit: contain; }
.m26-mini__txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.m26-mini__kicker { color: var(--m26-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.m26-mini__name { overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.m26-mini__meta { font-size: 13px; color: var(--m26-green-text); font-weight: 600; }
.m26-mini__price { color: var(--m26-ink); font-weight: 800; }

/* --------------------------------------------------------------------------
   2 · Categorías con la M (continuas sobre tinta)
   -------------------------------------------------------------------------- */
.m26-cats-home {
	padding-block: 8px 40px;
	background: var(--m26-ink);
	color: #fff;
}

.m26-mgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.m26-mgrid a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 6px;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}

.m26-mgrid__img {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 350 / 365;
	background: var(--m26-ink);
	overflow: hidden;
}

.m26-mgrid__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: lighten;
	transition: transform .3s var(--m26-ease);
}

.m26-mgrid__img--obj { align-items: center; background: var(--m26-ink-2); border-radius: 14px; }
.m26-mgrid__img--obj img { width: 70%; height: auto; object-fit: contain; mix-blend-mode: normal; }

.m26-mgrid__lbl {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.m26-mgrid a:hover .m26-mgrid__img img { transform: scale(1.04); }
.m26-mgrid a:hover .m26-mgrid__lbl { color: var(--m26-green); }
.m26-mgrid a:active { transform: scale(.97); transition: transform .15s var(--m26-ease); }

/* --------------------------------------------------------------------------
   3 · Campañas del gestor
   -------------------------------------------------------------------------- */
.m26-camp { padding-block: 24px 8px; }

.m26-camp__grid { display: grid; gap: 12px; }

.m26-camp__slide { width: 100%; }
.m26-camp__slide a, .m26-camp__side a { display: block; }

.m26-camp picture, .m26-camp__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	overflow: hidden;
}

.m26-camp__rail .m26-rail__track { gap: 0; scroll-padding-inline: 0; }

/* --------------------------------------------------------------------------
   5 · Promociones de marca
   -------------------------------------------------------------------------- */
.m26-promo .m26-rail__track { gap: 12px; scroll-padding-inline: 0; }
.m26-promo__slide { width: 86%; }
.m26-promo__slide a { display: block; }
.m26-promo picture, .m26-promo__img { display: block; width: 100%; height: auto; border-radius: 18px; overflow: hidden; }

/* --------------------------------------------------------------------------
   6 · Criterio Milar
   -------------------------------------------------------------------------- */
.m26-criterio__grid { display: grid; gap: 28px; }

.m26-guides .m26-head { margin-bottom: 8px; }
.m26-guides__list { display: grid; gap: 10px; }

.m26-guide {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border: 1px solid var(--m26-line);
	border-radius: var(--m26-radius-card);
	background: #fff;
	transition: border-color .2s var(--m26-ease), transform .25s var(--m26-ease);
}

.m26-guide:hover { border-color: var(--m26-ink); }
.m26-guide:active { transform: scale(.98); }

.m26-guide__img { width: 96px; height: 72px; flex: none; border-radius: 10px; overflow: hidden; background: var(--m26-bone); }
.m26-guide__img img { width: 100%; height: 100%; object-fit: cover; }
.m26-guide__img--none { background: var(--m26-ink) url("../../../images/Milar/logo-m.svg") center / 28px no-repeat; }
.m26-guide__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m26-guide__meta { color: var(--m26-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.m26-guide__title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   7 · Marcas: carril de logos en móvil, rejilla de 2 filas en escritorio
   -------------------------------------------------------------------------- */
.m26-brandsec__toggle { padding: 0; border: 0; background: none; color: var(--m26-ink); font-family: inherit; cursor: pointer; }

.m26-brandlist {
	display: grid !important;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 64px);
	grid-auto-columns: 132px;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--m26-gutter)) !important;
	padding-inline: var(--m26-gutter) !important;
}

.m26-brandlist::-webkit-scrollbar { display: none; }
.m26-brandlist li { scroll-snap-align: start; }

.m26-brandlist a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 12px 16px;
	border: 1px solid var(--m26-line);
	border-radius: 14px;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .2s var(--m26-ease), transform .2s var(--m26-ease);
}

.m26-brandlist a:hover { border-color: var(--m26-ink); transform: translateY(-2px); }
.m26-brandlist img { max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; }

.m26-brandsec__toggle { display: none; }

@media (min-width: 1024px) {
	.m26-brandsec__toggle { display: inline; }
	.m26-brandlist {
		grid-auto-flow: row;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 72px;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
		overflow: visible;
	}
	.m26-brandlist li:nth-child(n + 17) { display: none; }
	.m26-brandlist.is-all li { display: block; }
}

/* --------------------------------------------------------------------------
   8 · Tienda compacta + servicios + opiniones
   -------------------------------------------------------------------------- */
.m26-service__grid { display: grid; gap: 28px; }

.m26-storecard {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--m26-radius-lg);
	background: #fff;
}

.m26-storecard__photo img { display: block; width: 100%; height: 180px; object-fit: cover; }
.m26-storecard__body { padding: 22px; }
.m26-storecard .m26-kicker { color: var(--m26-green-text); }
.m26-storecard .m26-h3 a { color: var(--m26-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.m26-storecard__addr { margin: -6px 0 16px; color: var(--m26-muted); font-size: 15px; font-style: normal; line-height: 1.45; }
.m26-storecard__txt { margin: 0 0 16px; color: var(--m26-muted); font-size: 15px; line-height: 1.45; }
.m26-storecard__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m26-storecard__actions .m26-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.m26-storecard__actions .hidden, .m26-storecard .hidden { display: none !important; }

.m26-storecard__folleto {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.m26-storecard__folleto .m26-ico { width: 18px; height: 18px; color: var(--m26-green-text); }

.m26-reviews .m26-h3 { text-transform: lowercase; }
.m26-reviews .m26-h3::first-letter { text-transform: uppercase; }
.m26-reviews__list { display: grid; gap: 10px; }

.m26-reviews__list li {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: var(--m26-radius-card);
	background: #fff;
}

.m26-reviews__stars { margin: 0 0 8px; color: var(--m26-green-text); letter-spacing: 2px; }
.m26-reviews__txt { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.m26-reviews__who { margin: auto 0 0; color: var(--m26-muted); font-size: 13px; font-weight: 700; }

/* --------------------------------------------------------------------------
   10 · Texto SEO
   -------------------------------------------------------------------------- */
.m26-seo { color: var(--m26-muted); font-size: 14px; line-height: 1.6; }
.m26-seo .m26-wrap { max-width: 1100px; }
.m26-seo h2, .m26-seo h3 { color: var(--m26-ink); font-family: var(--m26-font); font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.m26-seo h2 { font-size: 22px; margin: 24px 0 10px; }
.m26-seo h3 { font-size: 17px; margin: 18px 0 8px; }
.m26-seo a { color: var(--m26-ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Aparición al hacer scroll (sin JS), una sola vez
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.m26-home .m26-sec .m26-head,
		.m26-home .m26-advisor,
		.m26-home .m26-guides,
		.m26-home .m26-storecard,
				.m26-home .m26-reviews {
			animation: m26-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}

@keyframes m26-reveal {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Tablet y escritorio
   ========================================================================== */
@media (min-width: 640px) {
	.m26-promo__slide { width: calc((100% - 12px) / 2); }
	.m26-storecard { grid-template-columns: 2fr 3fr; }
	.m26-storecard__photo img { height: 100%; min-height: 220px; }
}

@media (min-width: 1024px) {
	.m26-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		align-items: center;
		gap: 48px;
		min-height: clamp(440px, 38vw, 560px);
		padding-block: 24px;
	}

	.m26-hero__art { order: 0; align-self: end; padding-bottom: 0; }
	.m26-hero__m { width: min(100%, 470px); }
	.m26-hero__title { font-size: clamp(48px, 5.2vw, 84px); margin-bottom: 18px; }
	.m26-hero__lead { font-size: 18px; margin-bottom: 30px; }
	.m26-hero__ctas .m26-btn { flex: none; }

	.m26-mini { left: auto; right: 0; bottom: 36px; transform: none; }
	.m26-mini:hover { transform: translateY(-3px); }

	.m26-cats-home { padding-block: 16px 64px; }
	.m26-mgrid { grid-template-columns: repeat(6, 1fr); }
	.m26-mgrid__lbl { font-size: 15px; }

	.m26-camp { padding-top: 32px; }
	.m26-camp__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }

	.m26-promo__slide { width: calc((100% - 24px) / 3); }

	.m26-criterio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: stretch; }
	.m26-guide { padding: 14px; }
	.m26-guide__img { width: 140px; height: 96px; }
	.m26-guide__title { font-size: 18px; }

	.m26-service__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
	.m26-reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* opiniones a todo el ancho, en fila */

}



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

/* Si el gestor no trae imagen (src vacío) el hueco no se pinta */
.m26-camp img[src=""], .m26-promo img[src=""] { display: none; }
.m26-camp__side:has(img[src=""]):not(:has(img:not([src=""]))) { display: none; }
@media (min-width: 1024px) {
	.m26-camp__grid:has(.m26-camp__side img[src=""]):not(:has(.m26-camp__side img:not([src=""]))) { grid-template-columns: 1fr; }
}

/* tienda: estado, distancia y cambiar (datos de getNearestStoreInfo) */
.m26-storecard__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -8px 0 16px; color: var(--m26-muted); font-size: 14px; }
.m26-storecard__status[hidden] { display: none; }
.m26-storecard__open { display: inline-flex; align-items: center; gap: 6px; color: var(--m26-green-text); font-weight: 700; }
.m26-storecard__open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m26-green); }
.m26-storecard__open.is-closed { color: var(--m26-muted); }
.m26-storecard__open.is-closed::before { background: var(--m26-line-strong); }
.m26-storecard__change { padding: 0; border: 0; background: none; color: var(--m26-ink); font: 700 14px/1 var(--m26-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Enlaces SEO de la home (etiqueta seo.home.categorias): «Lo más buscado» como pastillas.
   El CSS antiguo los pintaba como carrusel con textos superpuestos. */
.m26-seo { padding-block: 36px 44px; }
.m26-seo .m26-kicker { margin: 0 0 4px; }
.m26-seo .m26-seo__t { margin: 0 0 16px; color: var(--m26-ink); font: 800 22px/1.15 var(--m26-font); letter-spacing: -.02em; }
.m26-seo .links { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; transform: none !important; width: auto !important; position: static !important; }
.m26-seo .links .item { position: static !important; display: block !important; float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; opacity: 1 !important; background: none !important; }
.m26-seo .links .item::before, .m26-seo .links .item::after, .m26-seo .links a::before, .m26-seo .links a::after { content: none !important; }
.m26-seo .links a, .m26-seo .links a.pad15 { display: inline-flex !important; align-items: center; gap: 8px; min-height: 42px; margin: 0 !important; padding: 0 16px !important; border: 1px solid var(--m26-line-strong) !important; border-radius: 999px; background: #fff !important; color: var(--m26-ink) !important; font: 600 14px/1.2 var(--m26-font) !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap; transition: border-color .2s var(--m26-ease), background-color .2s var(--m26-ease); }
.m26-seo .links a:hover { border-color: var(--m26-ink) !important; background: var(--m26-bone) !important; }
.m26-seo .links a::after { content: "" !important; width: 6px; height: 6px; border-right: 2px solid var(--m26-green-text); border-bottom: 2px solid var(--m26-green-text); transform: rotate(-45deg); }
.m26-seo > .m26-wrap > :not(.m26-kicker):not(.m26-seo__t):not(.links) { display: none; }
@media (min-width: 1024px) {
	.m26-seo .m26-seo__t { font-size: 28px; }
	.m26-seo .links { gap: 10px; }
}
.m26-seo .m26-wrap { max-width: var(--m26-container); }

/* --------------------------------------------------------------------------
   Marcas (rediseño 14-oct): cinta continua de logos sobre hueso; «Ver las 49 marcas» abre la rejilla
   -------------------------------------------------------------------------- */
.m26-brandsec__sub { margin: 6px 0 0; color: var(--m26-muted); font-size: 15px; line-height: 1.45; }
.m26-brandsec .m26-head { align-items: flex-end; }
.m26-brandsec__toggle { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 18px !important; border: 1.5px solid var(--m26-line-strong) !important; border-radius: 999px !important; background: #fff !important; font: 700 14px/1 var(--m26-font) !important; white-space: nowrap; }
.m26-brandsec__toggle:hover { border-color: var(--m26-ink) !important; }
.m26-brandmask { margin-inline: calc(-1 * var(--m26-gutter)); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.m26-brandsec .m26-brandlist {
	display: flex !important;
	gap: 0;
	width: max-content;
	margin: 0 !important;
	padding: 6px 0 !important;
	overflow: visible;
	grid-template-columns: none; grid-template-rows: none; grid-auto-flow: initial;
	animation: m26-marq calc(var(--m26-n, 49) * 2.2s) linear infinite;
}
.m26-brandsec .m26-brandlist li { flex: none; width: 148px; height: 76px; padding-right: 12px; box-sizing: content-box; }
.m26-brandsec .m26-brandlist a { height: 76px; border-color: transparent; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(0, 12, 26, .04); }
.m26-brandsec .m26-brandlist a:hover { border-color: var(--m26-ink); transform: translateY(-2px); }
.m26-brandsec .m26-brandlist img { max-height: 34px; filter: grayscale(1); opacity: .75; transition: filter .25s var(--m26-ease), opacity .25s var(--m26-ease); }
.m26-brandsec .m26-brandlist a:hover img, .m26-brandsec .m26-brandlist a:focus-visible img { filter: none; opacity: 1; }
.m26-brandmask:hover .m26-brandlist, .m26-brandmask:focus-within .m26-brandlist { animation-play-state: paused; }
@keyframes m26-marq { to { transform: translateX(-50%); } }

/* rejilla completa */
.m26-brandsec .m26-brandlist.is-all { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; width: auto; padding: 6px var(--m26-gutter) !important; animation: none; }
.m26-brandsec .m26-brandlist.is-all li { width: auto; height: 72px; padding: 0; }
.m26-brandsec .m26-brandlist.is-all li.is-clone { display: none; }
.m26-brandsec .m26-brandlist.is-all a { height: 72px; }
.m26-brandmask:has(.is-all) { -webkit-mask-image: none; mask-image: none; }

@media (prefers-reduced-motion: reduce) {
	.m26-brandsec .m26-brandlist { animation: none; }
	.m26-brandmask { overflow-x: auto; scrollbar-width: none; }
	.m26-brandsec .m26-brandlist li.is-clone { display: none; }
}
@media (min-width: 1024px) {
	.m26-brandmask { margin-inline: 0; }
	.m26-brandsec .m26-brandlist li { width: 170px; height: 84px; padding-right: 14px; }
	.m26-brandsec .m26-brandlist a { height: 84px; }
	.m26-brandsec .m26-brandlist.is-all { grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 6px 0 !important; }
}

/* --------------------------------------------------------------------------
   1 · Hero en carrusel de campañas (14-oct): slides apilados con fundido
   -------------------------------------------------------------------------- */
.m26-hero__track { display: grid; }
.m26-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.m26-hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.m26-hero__slide .m26-hero__copy > * { transition: transform .5s ease; }
.m26-hero__slide:not(.is-on) .m26-hero__copy > * { transform: translateY(10px); }
.m26-hero__grid { padding-bottom: 16px; }
.m26-hero__nav { display: flex; align-items: center; gap: 12px; padding-bottom: 28px; }
.m26-hero__dots { display: flex; gap: 2px; }
.m26-hero__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.m26-hero__dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); transition: width .3s ease, background .3s ease; }
.m26-hero__dot.is-on::before { width: 24px; background: var(--m26-green); }
.m26-hero__dot:focus-visible, .m26-hero__pause:focus-visible { outline: 2px solid var(--m26-focus, var(--m26-ink)); outline-offset: 2px; border-radius: 999px; }
.m26-hero__pause { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.m26-hero__pause .m26-ico { width: 16px; height: 16px; }
.m26-hero.is-paused .m26-hero__pause svg path { d: path("M8 5l11 7-11 7z"); fill: currentColor; }
.m26-hero__count { color: #8A93A0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m26-hero__count b { color: #fff; font-weight: 700; }
@media (max-width: 639px) { .m26-hero__count { display: none; } .m26-hero__nav { justify-content: center; } }
@media (min-width: 1024px) { .m26-hero__grid { padding-bottom: 0; } .m26-hero__nav { margin-top: -64px; position: relative; z-index: 3; padding-bottom: 36px; } }
@media (prefers-reduced-motion: reduce) { .m26-hero__slide, .m26-hero__slide .m26-hero__copy > * { transition: none !important; transform: none !important; } }

/* --------------------------------------------------------------------------
   Dos carruseles de producto diferenciados (14-oct)
   1 · «Recíbelo mañana» (.m26-tom): hueso, tarjetas compactas, la fecha como protagonista.
   2 · Selección del gestor (.m26-picks): tinta y numeradas; desde el 15-oct, tarjetas iguales a las del 1.
   -------------------------------------------------------------------------- */
.m26-tom[hidden] { display: none; }
.m26-tom__cp { display: inline-flex; margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--m26-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.m26-tom__cp:hover { color: var(--m26-green-dark, #2f7d00); }
.m26-rail--tom .m26-card { box-shadow: inset 0 0 0 1px #E4E2DB; }
.m26-rail--tom .m26-card__eta { order: -1; align-self: flex-start; max-width: 100%; margin: 0 0 6px; padding: 4px 9px; border-radius: 999px; background: #E6F4DC; color: var(--m26-green-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m26-rail--tom .m26-card__eta:not(.is-tomorrow) { background: #EEF1F4; color: var(--m26-ink); }

.m26-sec--ink { background: var(--m26-ink); color: #fff; }
.m26-picks .m26-h2 { color: #fff; }
.m26-picks .m26-sub { color: var(--m26-muted-on-ink); }
.m26-picks .m26-sub b { color: #fff; }
.m26-picks .m26-arrows button { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.m26-rail--picks .m26-rail__track { counter-reset: m26pick; }
/* 15-oct: tarjetas iguales a las de «Recíbelo mañana» (mismo tamaño, fecha en píldora arriba); se distingue por el fondo tinta
   y el número, que pasa a la esquina derecha para no pisar la píldora */
.m26-picks .m26-rail--picks .m26-rail__item { counter-increment: m26pick; position: relative; }
.m26-rail--picks .m26-rail__item:has(.m26-card--banner) { counter-increment: none; }
.m26-rail--picks .m26-card { color: var(--m26-ink); }
.m26-rail--picks .m26-rail__item:not(:has(.m26-card--banner))::before {
	content: counter(m26pick); position: absolute; z-index: 2; top: 10px; right: 10px;
	width: 24px; height: 24px; border-radius: 999px; background: var(--m26-green); color: var(--m26-ink);
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}
.m26-rail--picks .m26-card__eta { order: -1; align-self: flex-start; max-width: calc(100% - 30px); margin: 0 0 6px; padding: 4px 9px; border-radius: 999px; background: #EEF1F4; color: var(--m26-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m26-rail--picks .m26-card__eta.is-tomorrow { background: #E6F4DC; color: var(--m26-green-text); }
.m26-rail--picks .m26-card__eta--ask, .m26-rail--picks .m26-card__eta--store { background: none; padding-left: 0; padding-right: 0; }
.m26-rail--picks .m26-card__eta--none { background: none; } /* sin fecha: guarda el hueco de la píldora para que las imágenes queden alineadas */
@media (min-width: 1024px) {
	.m26-picks .m26-rail--picks .m26-rail__item,
	.m26-tom .m26-rail--tom .m26-rail__item { width: calc((min(100vw, var(--m26-container)) - 2 * var(--m26-gutter) - 5 * 16px) / 6); min-width: 190px; }
}

/* --------------------------------------------------------------------------
   8 · Tu tienda + servicios como el diseño (14-oct)
   -------------------------------------------------------------------------- */
.m26-service .m26-storecard__actions { flex-direction: column; align-items: stretch; gap: 14px; }
.m26-storecard__write { width: 100%; justify-content: center; }
.m26-storecard__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 700; }
.m26-storecard__links a, .m26-storecard__links .m26-storecard__change { color: var(--m26-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font: 700 14px/1.3 var(--m26-font); }
.m26-storecard__links a:hover { text-decoration-thickness: 2px; }
.m26-storecard__links .m26-storecard__folleto { display: inline; padding: 0; margin: 0; border: 0; background: none; }
.m26-storecard__links #phoneNumber:not([href^="tel:+"]):not([href^="tel:9"]):not([href^="tel:6"]) { display: none; }
.m26-service .m26-storecard__status { margin: -8px 0 18px; }
.m26-svc { display: grid; grid-template-columns: 1fr; gap: 22px; align-content: center; }
.m26-svc li { display: flex; gap: 14px; align-items: flex-start; }
.m26-svc .m26-ico { flex: none; width: 30px; height: 30px; color: var(--m26-green-text); }
.m26-svc span { display: flex; flex-direction: column; gap: 3px; }
.m26-svc b { font-size: 16px; }
.m26-svc small { color: var(--m26-muted); font-size: 14px; line-height: 1.45; }
@media (min-width: 640px) { .m26-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; } }
@media (min-width: 1024px) {
	.m26-service .m26-service__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: stretch; }
	.m26-service .m26-storecard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; }
	.m26-service .m26-storecard__photo img { height: 100%; min-height: 300px; }
	.m26-service .m26-storecard__body { padding: 28px; display: flex; flex-direction: column; }
	.m26-service #nearestStoreInfo:not(.display-hidden) { display: flex; flex-direction: column; flex: 1; }
	.m26-service .m26-storecard__actions { margin-top: auto; }
}
.m26-cats-home .m26-head { align-items: end; }
.m26-more--ink { color: #fff; }
.m26-more--ink:hover { color: var(--m26-green); }
.m26-home .m26-storecard__write, .m26-home .m26-storecard__write:hover { color: #fff; }

/* prefooter en la home: sin la franja de servicios, que ya está en «Tu tienda» (14-oct) */
.m26-pre__svc { display: none; }

/* --------------------------------------------------------------------------
   5 · Promociones de marca con el formato del diseño (14-oct)
   -------------------------------------------------------------------------- */
.m26-bp[hidden] { display: none; }
.m26-bp__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.m26-bp__head .m26-kicker { margin: 0; color: var(--m26-muted); }
.m26-bp__head .m26-more { margin-left: auto; }
.m26-bp__count { color: var(--m26-muted); font-size: 13px; }
.m26-bp__count b { color: var(--m26-ink); }
.m26-bp__box { position: relative; border-radius: 20px; overflow: hidden; background: #F2EDE6; }
.m26-bp__track { display: grid; list-style: none; margin: 0; padding: 0; }
.m26-bp__slide { grid-area: 1 / 1; display: flex; flex-direction: column-reverse; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.m26-bp__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.m26-bp__media { aspect-ratio: 1 / 1; background: repeating-linear-gradient(135deg, #E6DFD5 0 12px, #EDE7DE 12px 24px); }
.m26-bp__media a, .m26-bp__media picture { display: block; height: 100%; }
.m26-bp__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m26-bp__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 20px 52px; }
.m26-bp__brand { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.m26-bp__title { margin: 0; font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.m26-bp__lead { margin: 0; color: var(--m26-muted); font-size: 15px; line-height: 1.45; }
.m26-bp__txt .m26-btn { margin-top: 6px; }
.m26-home .m26-bp__txt .m26-btn--ink { color: #fff; }
.m26-bp__nav { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; }
.m26-bp__bars { display: flex; gap: 6px; }
.m26-bp__bar { width: 28px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.m26-bp__bar::before { content: ""; width: 100%; height: 4px; border-radius: 2px; background: #C9C3B8; }
.m26-bp__bar.is-on { width: 44px; }
.m26-bp__bar.is-on::before { background: var(--m26-ink); }
.m26-bp__bar:focus-visible { outline: 2px solid var(--m26-ink); outline-offset: 2px; }
.m26-bp__brands { color: var(--m26-muted); font-size: 13px; }
.m26-bp.is-single .m26-bp__nav, .m26-bp.is-single .m26-bp__count { display: none; }
@media (max-width: 639px) { .m26-bp__brands { display: none; } .m26-bp__head .m26-more { display: none; } }
@media (min-width: 640px) { .m26-bp__count { display: none; } }
@media (min-width: 900px) {
	.m26-bp__box { border-radius: 24px; }
	.m26-bp__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); min-height: 420px; }
	.m26-bp__media { aspect-ratio: auto; }
	.m26-bp__txt { justify-content: center; gap: 18px; padding: 48px 48px 72px; }
	.m26-bp__brand { font-size: 28px; }
	.m26-bp__title { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.03em; }
	.m26-bp__lead { font-size: 17px; }
	.m26-bp__nav { left: 48px; bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .m26-bp__slide { transition: none !important; } }

/* promociones de marca más bajas (14-oct: «demasiado alta») */
.m26-bp__media { aspect-ratio: 16 / 10; }
.m26-bp__txt { gap: 8px; padding: 16px 18px 44px; }
.m26-bp__brand { font-size: 16px; }
.m26-bp__title { font-size: 21px; }
.m26-bp__lead { font-size: 14px; }
.m26-bp__txt .m26-btn { margin-top: 2px; min-height: 42px; }
.m26-bp__nav { bottom: 16px; left: 18px; }
@media (min-width: 900px) {
	.m26-bp__slide { min-height: 0; height: 320px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
	.m26-bp__media { aspect-ratio: auto; height: 320px; }
	.m26-bp__txt { gap: 12px; padding: 28px 40px 56px; }
	.m26-bp__brand { font-size: 20px; }
	.m26-bp__title { font-size: clamp(24px, 2.3vw, 32px); }
	.m26-bp__lead { font-size: 15px; }
	.m26-bp__nav { left: 40px; bottom: 22px; }
}
@media (max-width: 899px) { .m26-bp__media { flex: 1 0 auto; } .m26-bp__media img { min-height: 100%; } }
/* SEO (15-oct): opiniones y h2 originales de vuelta */
.m26-reviews { margin-top: 48px; }
.m26-service__svc .m26-svc__h { margin-top: 0; }
.m26-reviews__media { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 12px; font-size: 14px; color: var(--m26-muted); }
.m26-reviews__media b { font-size: 28px; color: var(--m26-ink); letter-spacing: -.02em; }
.m26-seoh { margin: 0 0 6px; text-transform: uppercase; }
.m26-head--ink .m26-seoh { color: var(--m26-green); }
.m26-svc__h { margin: 22px 0 10px; }

/* --------------------------------------------------------------------------
   18-oct · Tarjeta de tienda de la home SIN tienda cerca (custom.js quita .display-hidden a .textWithoutStore).
   Opción A del lienzo «Home: diseño vs montada»: pieza «M» de la marca (fondo negro) en lugar de la foto de tienda,
   «Sin tienda cerca de {CP}», titular, el texto del gestor (text.without.store), tres garantías y dos acciones.
   -------------------------------------------------------------------------- */
.m26-storecard__photo .m26-storecard__pieza, .m26-storecard__none { display: none; } /* 27-oct · con más peso que «.m26-storecard__photo img { display: block }»: la pieza salía siempre debajo de la foto de la tienda */
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .m26-storecard__photo { position: relative; min-height: 260px; background: #000; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) #firstImage { display: none !important; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .m26-storecard__pieza { display: block; position: absolute; inset: 0; width: 100%; height: 100% !important; min-height: 0 !important; object-fit: cover; object-position: center 35%; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .m26-storecard__none { display: block; }
.m26-storecard__none .m26-kicker { margin: 0 0 6px; }
/* 05-nov · con el CP estimado (28020 por defecto, html.m26-cp-est) la tienda «más cercana» no es la del cliente: en lugar de la
   tienda (o de «Sin tienda cerca de 28020») sale «Encuentra tu tienda Milar» con su botón, que abre la ventana del CP.
   Y en servicios, «Envío a domicilio» en lugar del texto que depende del CP («Entrega en 24 h»…). */
.m26-cp-est #storesBar #nearestStoreInfo, .m26-cp-est #storesBar .m26-storecard__none, .m26-cp-est #storesBar .textWithoutStore { display: none !important; }
.m26-cp-est #storesBar #checkDeliveryTimeContent { display: block !important; }
.m26-cp-est #storesBar #firstImage { display: block !important; }
.m26-cp-est #storesBar .m26-storecard__pieza { display: none !important; }
.m26-svc .m26-svc__est { display: none; } /* con más peso que «.m26-svc span { display: flex }» */
.m26-cp-est .m26-svc .m26-svc__est { display: flex; }
.m26-cp-est .m26-svc .m26-svc__cp { display: none; }
.m26-storecard__nonet { margin: 0 0 10px !important; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .textWithoutStore { margin: 0; color: var(--m26-muted); font-size: 15px; line-height: 1.5; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .m26-storecard__nonelist { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.m26-storecard__nonelist li { position: relative; padding-left: 24px; color: var(--m26-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.m26-storecard__nonelist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--m26-green-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .m26-storecard__noneacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.m26-storecard__noneacts .m26-btn { min-height: 46px; padding: 0 22px; font-size: 15px; }
.m26-storecard__noneacts .m26-storecard__change { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--m26-ink); font: 700 14px var(--m26-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 18-oct (decisión del usuario): sin el párrafo del gestor en la tarjeta «sin tienda cerca»; con titular y garantías se entiende.
   El <p class="textWithoutStore"> se queda en el HTML (custom.js lo muestra y de él depende el :has de la tarjeta), solo no se ve. */
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .textWithoutStore { display: none !important; }
.m26-storecard:has(.textWithoutStore:not(.display-hidden)) .m26-storecard__nonet { margin-bottom: 4px !important; }

/* --------------------------------------------------------------------------
   26-oct · Hero · diapositiva de campaña (Adelántate / Black Friday), estilo de las creatividades de noviembre:
   fondo negro, «BLACK FRIDAY» enorme, condensado e inclinado; «¡Adelántate!» en la etiqueta verde sesgada;
   la pieza de la M en blanco y negro sobre un bloque verde redondeado (el negro de la pieza deja ver el verde).
   -------------------------------------------------------------------------- */
.m26-hero__slide--camp { background: #000; }
.m26-cslide__title { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; color: #fff; }
.m26-cslide__copy { min-width: 0; }
.m26-cslide__pre { font-size: clamp(30px, 9vw, 40px); }
/* en móvil el rótulo se ajusta al ancho (el escalado horizontal no reduce la caja: 11,5vw cabe en 375 px con margen) */
.m26-cslide__big { font-size: clamp(38px, 11.5vw, 64px); white-space: nowrap; }
.m26-cslide__tag { margin: 2px 0 18px; font-size: clamp(22px, 6.6vw, 28px); }
.m26-cslide__lead { color: var(--m26-muted-on-ink); }
.m26-cslide__cd { display: inline-block; margin: -8px 0 22px; padding: 6px 14px; border-radius: 999px; background: var(--m26-green); color: var(--m26-ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.m26-cslide__art { background: transparent; }
.m26-cslide__panel { position: absolute; z-index: -1; left: 4%; right: -40vw; bottom: 0; height: 64%; border-radius: 28px 0 0 0; background: var(--m26-green-text); }
.m26-cp--bf .m26-cslide__panel { background: #5A7E35; }
.m26-cslide__img.m26-hero__m { filter: grayscale(1) contrast(1.12); mix-blend-mode: screen; }
@media (min-width: 1024px) {
	.m26-cslide__pre { font-size: clamp(48px, 4.4vw, 68px); }
	.m26-cslide__big { font-size: clamp(76px, 7.6vw, 128px); }
	.m26-cslide__tag { font-size: clamp(30px, 2.6vw, 40px); }
	.m26-cslide__panel { left: 0; height: 70%; border-radius: 36px 0 0 0; }
}

/* 27-oct (petición del usuario) · hero: el producto destacado («La más elegida», .m26-mini) más grande y la pieza de la M
   más pequeña, para que el protagonista sea el producto. Foto 56 → 76 px en móvil y 104 px en escritorio, nombre a dos líneas
   y precio más visible. M: 270 → 220 px en móvil y 470 → 380 px en escritorio (solo en las diapositivas con producto). */
.m26-hero__art:has(.m26-mini) .m26-hero__m { width: min(52vw, 220px); }
.m26-hero__art:has(.m26-mini:not([hidden])) { margin-bottom: 20px; } /* móvil: la tarjeta, más alta, quedaba pegada al antetítulo */
.m26-mini { gap: 14px; width: min(100%, 380px); padding: 12px 18px 12px 12px; border-radius: 18px; }
.m26-mini__img { width: 76px; height: 76px; border-radius: 12px; }
.m26-mini__txt { gap: 4px; }
.m26-mini__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; white-space: normal; }
.m26-mini__meta { font-size: 14px; }
.m26-mini__price { font-size: 18px; letter-spacing: -.01em; }
/* 29-oct (4.ª vuelta, diseño nuevo del usuario) · con producto en el gestor: la foto de campaña (persona + M) a la vista y el
   producto recortado a su derecha; la tarjeta pasa a «bocadillo» (antetítulo, nombre, precio + plazo y flecha) que apunta al
   producto. Mismo marcado: el <a class="m26-mini"> queda sin caja propia y sus dos piezas se colocan respecto a .m26-hero__art.
   Móvil: imagen arriba, bocadillo debajo a todo el ancho y luego los textos. Escritorio: bocadillo flotando sobre el producto.
   (Sustituye a la 2.ª y 3.ª vuelta del 27-oct: M de fondo y tarjeta vertical grande.) */
.m26-hero__art:has(.m26-mini:not([hidden])) { flex-wrap: wrap; justify-content: flex-start; padding-bottom: 0; margin-bottom: 0; }
.m26-hero__art:has(.m26-mini:not([hidden])) .m26-hero__m { width: min(60vw, 280px); margin-left: 6%; }
.m26-hero__art .m26-mini:not([hidden]) { position: static; display: block; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none !important; transition: none; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { position: absolute; right: 2%; bottom: 0; z-index: 1; width: auto; height: 62%; aspect-ratio: 4 / 5; border-radius: 6px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 72%, rgba(0, 12, 26, .28)); pointer-events: none; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.3); } /* las fotos del catálogo traen mucho margen blanco */
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { overflow: hidden; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt { position: relative; z-index: 2; gap: 2px; margin-top: 18px; padding: 14px 76px 14px 18px; border-radius: 18px; background: #fff; color: var(--m26-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transition: transform .25s var(--m26-ease); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::before { content: ""; position: absolute; top: -9px; right: calc(2% + 15%); width: 18px; height: 18px; border-radius: 3px; background: #fff; transform: rotate(45deg); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::after { content: "\2192"; position: absolute; top: 50%; right: 14px; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0; padding: 0; border-radius: 50%; background: var(--m26-ink); color: #fff; font-size: 20px; font-weight: 400; line-height: 1; transform: translateY(-50%); }
.m26-hero__art .m26-mini:not([hidden]):hover .m26-mini__txt { transform: translateY(-3px); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__kicker { color: var(--m26-green-text); font-size: 12px; letter-spacing: .12em; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__name { display: block; min-height: 0; overflow: hidden; font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__meta { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__price { font-size: 24px; letter-spacing: -.02em; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__eta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m26-mini.is-cargando .m26-mini__name { height: 1.25em; }
/* 29-oct · rotación: línea de datos («8 kg · 1.600 rpm»), puntos junto al antetítulo y fundido al cambiar de producto.
   La línea de datos ocupa siempre su sitio (aunque vaya vacía) para que el bocadillo no cambie de alto al rotar. */
.m26-mini__spec { display: none; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__spec { display: block; min-height: 1.35em; overflow: hidden; color: var(--m26-muted); font-size: 14px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__kicker { display: flex; align-items: center; gap: 10px; }
.m26-mini__dots { display: inline-flex; gap: 4px; }
.m26-mini__dots i { width: 6px; height: 6px; border-radius: 999px; background: #D5D9DE; transition: width .3s var(--m26-ease), background-color .3s var(--m26-ease); }
.m26-mini__dots i.is-on { width: 18px; background: var(--m26-ink); }
/* pulsables (cambian de producto): zona de toque más grande que el punto, sin mover el diseño */
.m26-mini__dots i { position: relative; cursor: pointer; }
.m26-mini__dots i::after { content: ""; position: absolute; inset: -12px -4px; }
.m26-mini__dots i:hover:not(.is-on) { background: #9AA3AD; }
.m26-hero__art .m26-mini .m26-mini__img img, .m26-hero__art .m26-mini .m26-mini__name, .m26-hero__art .m26-mini .m26-mini__kt, .m26-hero__art .m26-mini .m26-mini__spec, .m26-hero__art .m26-mini .m26-mini__meta { transition: opacity .2s ease; }
.m26-hero__art .m26-mini.is-cambio .m26-mini__img img, .m26-hero__art .m26-mini.is-cambio .m26-mini__name, .m26-hero__art .m26-mini.is-cambio .m26-mini__kt, .m26-hero__art .m26-mini.is-cambio .m26-mini__spec, .m26-hero__art .m26-mini.is-cambio .m26-mini__meta { opacity: 0; }
@media (min-width: 1024px) { .m26-hero__art .m26-mini:not([hidden]) .m26-mini__spec { font-size: 12px; } }
/* 29-oct · producto recortado (sin fondo, como en el diseño): lo hace el script sobre la foto del catálogo. Mientras tanto la foto
   no se ve (evita el destello de la caja blanca); si no se puede recortar (.sin-recorte) vuelve la caja blanca de antes. */
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img::after { display: none; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img { transform: none; opacity: 0; object-position: center bottom; }
/* recortado: el hueco toma la forma del producto (frigorífico alto y estrecho, tele ancha) con el mismo alto; ancho con tope */
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img:has(img.is-recortada) { aspect-ratio: auto; width: auto; justify-content: flex-end; align-items: flex-end; }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img.is-recortada { width: auto; height: 100%; max-width: min(46vw, 240px); object-fit: contain; object-position: right bottom; }
@media (min-width: 1024px) { .m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img.is-recortada { max-width: 270px; } }
/* productos altos y estrechos (frigoríficos, columnas): casi el alto de la foto de campaña, para que no queden diminutos */
@media (max-width: 1023px) { .m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.is-alto { top: calc(min(60vw, 280px) * .04); height: calc(min(60vw, 280px) * 1.0); right: 6%; } }
@media (min-width: 640px) and (max-width: 1023px) { .m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.is-alto { right: 16%; } }
@media (min-width: 1024px) { .m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.is-alto { height: 94%; right: 6%; } }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::before { right: var(--m26-pico, calc(2% + min(60vw, 280px) * .296 - 9px)); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img.is-recortada { opacity: 1; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .4)); -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, .55)); mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, .55)); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.sin-recorte { overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.sin-recorte img { transform: scale(1.3); filter: none; -webkit-mask-image: none; mask-image: none; object-position: center; }
.m26-hero__art .m26-mini.is-cambio .m26-mini__img img.is-recortada { opacity: 0; }
.m26-hero__grid:has(.m26-mini:not([hidden])) > * { min-width: 0; } /* el nombre en una línea ensanchaba la columna y todo se salía por la derecha */
@media (max-width: 1023px) {
	/* el producto, alineado con la foto (no con el final del bloque, que incluye el bocadillo): misma base que su ancho */
	.m26-hero__art:has(.m26-mini:not([hidden])) { margin-bottom: 22px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { top: calc(min(60vw, 280px) * .30); bottom: auto; height: calc(min(60vw, 280px) * .74); }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::before { right: var(--m26-pico, calc(2% + min(60vw, 280px) * .296 - 9px)); } /* pico centrado bajo el producto (ancho = alto × 4/5) */
}
@media (min-width: 640px) and (max-width: 1023px) {
	.m26-hero__art:has(.m26-mini:not([hidden])) .m26-hero__m { margin-left: 14%; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { right: 12%; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::before { right: var(--m26-pico, calc(12% + min(60vw, 280px) * .296 - 9px)); }
}
@media (min-width: 1024px) {
	.m26-hero__art:has(.m26-mini:not([hidden])) { flex-wrap: nowrap; }
	.m26-hero__art:has(.m26-mini:not([hidden])) .m26-hero__m { width: min(74%, 470px); margin-left: 0; }
	.m26-hero__art .m26-mini:not([hidden]) { width: 0; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { right: 0; bottom: 3%; height: 64%; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt { position: absolute; right: 0; bottom: calc(67% - 10px); width: min(62%, 300px); margin: 0; padding: 12px 64px 12px 16px; border-radius: 16px; box-sizing: border-box; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::before { top: auto; bottom: -8px; right: var(--m26-pico, 24%); width: 16px; height: 16px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt::after { right: 12px; width: 40px; height: 40px; font-size: 18px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__kicker { font-size: 11px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__name { font-size: 15px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__meta { font-size: 13px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__price { font-size: 22px; }
}
/* 29-oct (auditoría CWV) · la tarjeta del hero llega del servidor ya en su sitio: con el producto del gestor, rellena; si no,
   con esqueleto (.is-cargando) hasta que el script la rellena. Alturas fijas (nombre a 2 líneas, precio y plazo en una) para que
   al llegar el contenido no se mueva nada (antes CLS 0,36 en móvil). */
.m26-hero__art .m26-mini .m26-mini__name { min-height: 2.4em; }
.m26-hero__art .m26-mini .m26-mini__meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m26-mini.is-cargando { pointer-events: none; }
.m26-hero__art .m26-mini.is-cargando:not([hidden]) .m26-mini__img,
.m26-mini.is-cargando .m26-mini__name,
.m26-mini.is-cargando .m26-mini__price { border-radius: 10px; background: linear-gradient(90deg, #EEF1EC 25%, #F7F9F5 50%, #EEF1EC 75%) 0 0 / 200% 100%; animation: m26-esqueleto 1.4s linear infinite; }
.m26-mini.is-cargando .m26-mini__name { display: block; width: 85%; }
.m26-mini.is-cargando .m26-mini__price { display: inline-block; width: 6em; height: 1.1em; vertical-align: middle; }
.m26-mini.is-cargando .m26-mini__txt::after { visibility: hidden; }
@keyframes m26-esqueleto { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .m26-mini.is-cargando .m26-mini__img, .m26-mini.is-cargando .m26-mini__name, .m26-mini.is-cargando .m26-mini__price { animation: none; } }

/* 29-oct · QA MIL-066: en escritorio el paginador sube 64 px sobre el slide; con textos largos (p. ej. a 1024 px) tapaba los botones.
   Se reserva ese hueco bajo los textos: si el texto crece, el slide crece y el paginador baja con él. */
@media (min-width: 1024px) {
	.m26-hero__slide .m26-hero__copy { padding-bottom: 76px; }
}

/* 29-oct · producto del hero MÁS GRANDE (petición del usuario): casi el alto de la foto de campaña.
   Móvil: 74 % → 92 % del alto de la foto (altos: 112 %); escritorio: 64 % → 82 % del bloque (altos: 100 %). */
@media (max-width: 1023px) {
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { top: calc(min(60vw, 280px) * .12); height: calc(min(60vw, 280px) * .92); }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.is-alto { top: calc(min(60vw, 280px) * -.08); height: calc(min(60vw, 280px) * 1.12); }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img.is-recortada { max-width: min(52vw, 300px); }
}
@media (min-width: 1024px) {
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img { height: 82%; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img.is-alto { height: 100%; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__img img.is-recortada { max-width: 360px; }
	.m26-hero__art .m26-mini:not([hidden]) .m26-mini__txt { bottom: calc(85% - 30px); }
}

/* 29-oct · QA MIL-018: en los carruseles con fundido (promociones y hero) las diapositivas eran transparentes y, durante el
   cambio, se leían los textos de las dos a la vez. Ahora la que entra se pone encima con su fondo opaco (mismo color, no se nota)
   y lo que aparece con fundido es su contenido; la que sale queda tapada y se oculta tras el fundido. */
.m26-bp__slide { z-index: 0; background: #F2EDE6; opacity: 0; transition: opacity 0s linear .5s, visibility 0s linear .5s; }
.m26-bp__slide.is-on { z-index: 1; opacity: 1; transition: none; }
.m26-bp__slide > * { opacity: 0; transition: opacity .5s ease; }
.m26-bp__slide.is-on > * { opacity: 1; }
.m26-hero__slide { z-index: 0; background: var(--m26-ink); opacity: 0; transition: opacity 0s linear .5s, visibility 0s linear .5s; }
.m26-hero__slide.is-on { z-index: 1; opacity: 1; transition: none; }
.m26-hero__slide > * { opacity: 0; transition: opacity .5s ease; }
.m26-hero__slide.is-on > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .m26-bp__slide, .m26-hero__slide, .m26-bp__slide > *, .m26-hero__slide > * { transition: none !important; } }

/* 29-oct · QA MIL-019 (equipo): en el bloque «Encuentra tu tienda» + «Servicios Milar» de la home, sin la foto de la tienda: los
   servicios son de toda la red y cada tienda ya enseña los suyos en su ficha. La tarjeta queda en una columna (nombre, dirección,
   estado y botones). La foto sigue en la ficha de la tienda. */
.m26-home .m26-storecard__photo { display: none !important; }
.m26-home .m26-storecard { grid-template-columns: minmax(0, 1fr) !important; }

/* 29-oct · QA MIL-020 / MIL-021: «Cambiar código postal» / «Cambiar» junto al CP o a la tienda, como enlace subrayado */
.m26-cpchange { display: inline; margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.m26-cpline { margin-top: 4px; }
.m26-cpline .m26-cpchange { margin-left: 0; }
.m26-advisor__change { display: block; margin: 4px 0 0; font-size: 14px; }
.m26-cpchange:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* 29-oct · QA MIL-022: servicios enlazados; mismo aspecto, el título se subraya al pasar y aparece una flecha */
.m26-svc__a { display: flex; gap: inherit; align-items: inherit; width: 100%; color: inherit !important; text-decoration: none !important; }
.m26-svc__a b { text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .2s var(--m26-ease); }
.m26-svc__a b::after { content: " →"; opacity: 0; transition: opacity .2s var(--m26-ease); }
.m26-svc__a:hover b, .m26-svc__a:focus-visible b { text-decoration-color: currentColor; }
.m26-svc__a:hover b::after, .m26-svc__a:focus-visible b::after { opacity: 1; }
.m26-svc__a:focus-visible { outline: 2px solid var(--m26-ink); outline-offset: 4px; border-radius: 8px; }

/* 29-oct · QA MIL-028 (móvil): titular del hero más pequeño (40 → 34 px; el equipo lo veía excesivo) y líneas repartidas para
   no dejar una palabra sola («años.») en una tercera línea */
.m26-hero__title { text-wrap: balance; }
@media (max-width: 639px) { .m26-hero__title { font-size: 34px; } }

/* 29-oct · transiciones más pausadas (antes daban sensación de prisa): fundido del producto del bocadillo .2 s → .35 s
   (va con el cambio a 350 ms de siguiente() en milar2026_home_ui.jsp) y fundido de diapositivas .5 s → .8 s */
.m26-hero__art .m26-mini .m26-mini__img img, .m26-hero__art .m26-mini .m26-mini__name, .m26-hero__art .m26-mini .m26-mini__kt, .m26-hero__art .m26-mini .m26-mini__spec, .m26-hero__art .m26-mini .m26-mini__meta { transition: opacity .35s ease; }
.m26-bp__slide, .m26-hero__slide { transition: opacity 0s linear .8s, visibility 0s linear .8s; }
.m26-bp__slide.is-on, .m26-hero__slide.is-on { transition: none; }
.m26-bp__slide > *, .m26-hero__slide > * { transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) { .m26-bp__slide, .m26-hero__slide, .m26-bp__slide > *, .m26-hero__slide > *, .m26-hero__art .m26-mini * { transition: none !important; } }

/* 03-nov · Adelántate: el bodegón del banner de la campaña en lugar de la persona. A color (sin el blanco y negro ni la mezcla
   de la pieza de la M), apoyado en el bloque verde oscuro del banner (#256721) y más ancho que la pieza. */
.m26-cp--pre .m26-cslide__panel { background: #256721; }
.m26-hero__art .m26-cslide__img--bodegon.m26-hero__m,
.m26-hero__art:has(.m26-mini:not([hidden])) .m26-cslide__img--bodegon.m26-hero__m { width: min(92vw, 420px); max-width: 100%; margin-left: 0; filter: none; mix-blend-mode: normal; }
@media (min-width: 1024px) {
	.m26-hero__art .m26-cslide__img--bodegon.m26-hero__m,
	.m26-hero__art:has(.m26-mini:not([hidden])) .m26-cslide__img--bodegon.m26-hero__m { width: min(100%, 560px); align-self: flex-end; }
}
/* 03-nov (2.ª vuelta) · como el banner (PSD Milar_ABF_1400x300): el bloque verde empieza bastante a la izquierda del bodegón
   (la nevera se sale de él), con la esquina superior izquierda muy redondeada, y llega al ~84 % de su alto. El producto del
   bocadillo, recortado, vuelve delante del bodegón a la derecha; el bocadillo queda encima, apuntándolo (escritorio). */
.m26-cp--pre .m26-cslide__panel { left: -2%; height: 80%; border-radius: 56px 0 0 0; }
@media (min-width: 1024px) {
	/* 03-nov (3.ª vuelta) · el producto, del mismo tamaño que en las diapositivas sin campaña: la zona de imagen mide lo
	   mismo que con la pieza de la M (≈ 490 px), así sus reglas (alto en % de esa zona) dan el mismo tamaño y el bocadillo
	   queda en su sitio de siempre. El bodegón va abajo, sobre el bloque verde (84 % del alto del bodegón). */
	.m26-cp--pre .m26-hero__art { min-height: 440px; align-items: flex-end; }
	.m26-cp--pre .m26-cslide__panel { left: -22%; height: 186px; border-radius: 90px 0 0 0; }
	.m26-hero__art:has(.m26-mini:not([hidden])) .m26-cslide__img--bodegon.m26-hero__m { width: min(calc(100% - 80px), 520px); }
}
@media (min-width: 1200px) {
	.m26-cp--pre .m26-hero__art { min-height: 490px; }
	.m26-cp--pre .m26-cslide__panel { height: 214px; }
}
/* rótulo más parecido al banner: «Hoy ya es» en minúscula y «BLACK FRIDAY» más condensado e inclinado */
.m26-cp--pre .m26-cslide__pre { text-transform: none; letter-spacing: -.02em; }

/* móvil: el producto del bocadillo, del mismo tamaño y en el mismo sitio que sin campaña (reglas generales); la zona de imagen
   tiene el alto de la pieza de la M (min(60vw, 280px) × 365/350) y el bodegón queda abajo, sobre el bloque verde */
@media (max-width: 1023px) {
	.m26-cp--pre .m26-hero__art:has(.m26-mini:not([hidden])) .m26-cslide__img--bodegon.m26-hero__m { margin-top: calc(min(60vw, 280px) * 1.043 - min(92vw, 420px) * .491); }
}