/* ==========================================================================
   MILAR 2026 · Categoría de primer nivel (cajaListadoCategorias.jsp)
   Tokens y componentes comunes (m26-wrap, m26-kicker, m26-btn, m26-rail, m26-card) en milar2026.css.
   ========================================================================== */
.m26-cat-page { background: #fff; }

/* cabecera sobre tinta */
.m26-cathead { background: var(--m26-ink); color: #fff; font-family: var(--m26-font); }
.m26-cathead__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding-block: 16px 22px; }
.m26-cathead__crumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; color: var(--m26-muted-on-ink, #AEB6C0); font-size: 13px; }
.m26-cathead__crumb a { color: inherit !important; text-decoration: none !important; }
.m26-cathead__crumb a:hover { color: #fff !important; }
.m26-cathead__h1 { margin: 0; color: #fff; font: 800 34px/1.05 var(--m26-font); letter-spacing: -.03em; text-transform: none; }
.m26-cathead__lead { max-width: 620px; margin: 10px 0 0; color: #D6DBE1; font-size: 15px; line-height: 1.45; }
.m26-cathead__art { width: 110px; }
.m26-cathead__art img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; }
.m26-cathead__ad:empty { display: none; }
.m26-cathead__ad { padding-bottom: 16px; }

.m26-cat__cms { padding-top: 20px; }
.m26-cat__h2 { margin: 0; color: var(--m26-ink); font: 800 22px/1.15 var(--m26-font); letter-spacing: -.02em; }
.m26-cat__sub { margin: 4px 0 14px; color: var(--m26-muted); font-family: var(--m26-font); font-size: 14px; }

/* familias */
.m26-catfam { padding-top: 22px; font-family: var(--m26-font); color: var(--m26-ink); }
.m26-catfam__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.m26-catfam__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m26-line); border-radius: 16px; background: #fff; transition: border-color .2s var(--m26-ease), box-shadow .2s var(--m26-ease); }
.m26-catfam__item:hover { border-color: var(--m26-line-strong); box-shadow: 0 12px 28px rgba(0, 12, 26, .07); }
.m26-catfam__img { display: flex; align-items: center; justify-content: center; height: 120px; padding: 10px; background: var(--m26-bone); box-sizing: border-box; }
.m26-catfam__img img { display: block; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; object-fit: contain; mix-blend-mode: multiply; }
.m26-catfam__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 10px 12px 12px; }
.m26-catfam__t { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.m26-catfam__t a { color: var(--m26-ink) !important; text-decoration: none !important; }
.m26-catfam__subs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.m26-catfam__subs a { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--m26-bone); color: var(--m26-ink) !important; font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none !important; }
.m26-catfam__subs a:hover { background: #E8E6DE; }
.m26-catfam__subs li:nth-child(n + 4) { display: none; }
.m26-catfam__all { margin-top: auto; color: var(--m26-ink) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.m26-catfam__all:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* recíbelo mañana */
.m26-cattom { margin-top: 28px; }
.m26-cattom[hidden] { display: none; }
.m26-cattom__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.m26-cattom .m26-rail { margin-inline: calc(-1 * var(--m26-gutter)); }
.m26-cattom .m26-rail__track { padding-inline: var(--m26-gutter); }

/* tienda */
.m26-catstore { padding-top: 26px; font-family: var(--m26-font); color: var(--m26-ink); }
.m26-catstore[hidden] { display: none; }
.m26-catstore__card { display: grid; overflow: hidden; border: 1px solid var(--m26-line); border-radius: 18px; background: #fff; }
.m26-catstore__photo { height: 140px; background: #DDE2E7; }
.m26-catstore__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m26-catstore__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.m26-catstore__body .m26-kicker { margin: 0; color: var(--m26-green-text); }
.m26-catstore__name { margin: 0; font-size: 20px; font-weight: 800; }
.m26-catstore__name a { color: var(--m26-ink) !important; text-decoration: none !important; }
.m26-catstore__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--m26-muted); font-size: 14px; }
.m26-catstore__open { display: inline-flex; align-items: center; gap: 6px; color: var(--m26-green-text); font-weight: 700; }
.m26-catstore__open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m26-green); }
.m26-catstore__open.is-closed { color: var(--m26-muted); }
.m26-catstore__open.is-closed::before { background: var(--m26-line-strong); }
.m26-catstore__open[hidden] { display: none; }
.m26-catstore__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; }
.m26-catstore__txt { margin: 0; font-size: 14px; line-height: 1.45; }
.m26-catstore__ctas { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.m26-catstore__ctas .m26-btn { min-height: 46px; }

/* texto SEO */
.m26-catseo { padding-block: 28px 36px; font-family: var(--m26-font); color: #3A4552; }
.m26-catseo__txt { position: relative; max-height: 220px; overflow: hidden; font-size: 15px; line-height: 1.6; }
.m26-catseo__txt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.m26-catseo__txt.is-open { max-height: none; }
.m26-catseo__txt.is-open::after { display: none; }
.m26-catseo__txt h2, .m26-catseo__txt h3 { margin: 22px 0 8px; color: var(--m26-ink); font: 800 20px/1.2 var(--m26-font) !important; letter-spacing: -.015em; }
.m26-catseo__txt h3 { font-size: 17px !important; }
.m26-catseo__txt p, .m26-catseo__txt li { margin: 0 0 10px; font-size: 15px !important; line-height: 1.6 !important; font-family: var(--m26-font) !important; }
.m26-catseo__txt img { max-width: 100%; height: auto; border-radius: 14px; }
.m26-catseo__more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--m26-ink); font: 700 15px/1 var(--m26-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.m26-catseo__more[hidden] { display: none; }

@media (min-width: 640px) {
	.m26-catfam__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
	.m26-cathead__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-block: 26px 34px; }
	.m26-cathead__h1 { font-size: 56px; line-height: 1; }
	.m26-cathead__lead { font-size: 18px; }
	.m26-cathead__art { width: 300px; }
	.m26-cat__h2 { font-size: 32px; }
	.m26-cat__sub { font-size: 15px; margin-bottom: 18px; }
	.m26-catfam { padding-top: 40px; }
	.m26-catfam__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.m26-catfam__item { border-radius: 20px; }
	.m26-catfam__img { height: 190px; }
	.m26-catfam__body { padding: 16px 18px 18px; gap: 10px; }
	.m26-catfam__t { font-size: 19px; }
	.m26-catfam__subs a { font-size: 13px; padding: 6px 10px; }
	.m26-catfam__subs li:nth-child(n + 4) { display: list-item; }
	.m26-cattom { margin-top: 44px; }
	.m26-cattom .m26-rail { margin-inline: 0; }
	.m26-cattom .m26-rail__track { padding-inline: 0; }
	.m26-catstore { padding-top: 40px; }
	.m26-catstore__card { grid-template-columns: 420px minmax(0, 1fr); border-radius: 22px; }
	.m26-catstore__photo { height: auto; min-height: 230px; }
	.m26-catstore__body { justify-content: center; padding: 26px 30px; }
	.m26-catstore__name { font-size: 26px; }
	.m26-catseo { padding-block: 40px 56px; }
	/* 19-oct (revisión SEO Hiberus): sin columnas CSS; el texto del gestor ya trae sus filas de texto+imagen (.boxdescMilar) y
	   con columns: 2 se partía en 4 y se perdía el orden de lectura */
	.m26-catseo__txt { max-height: 260px; }
	.m26-catseo__txt.is-open { max-height: none; }
}
.m26-catseo__txt div, .m26-catseo__txt section { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; box-sizing: border-box; }

/* 16-oct · cabecera de las categorías de primer nivel: el alto lo da el texto (poco) y no la pieza; la pieza se apoya abajo a
   la derecha y se ajusta a ese alto, como en la cabecera del listado */
@media (min-width: 1024px) {
	.m26-cathead.has-art .m26-cathead__grid { position: relative; grid-template-columns: minmax(0, 1fr); min-height: 190px; padding-right: calc(var(--m26-gutter) + 300px); }
	.m26-cathead.has-art .m26-cathead__art { position: absolute; top: 14px; bottom: 0; right: var(--m26-gutter); width: 260px; }
	.m26-cathead.has-art .m26-cathead__art img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
}