/* =========================================================================
   Blog Mungos — calcado de Recurso 4 (marca pet, estilo claymorphism).
   Título rojo «Blog» · post DESTACADO tipo banner (café oscuro) · rejilla teal ·
   «ver más» que despliega un GRID NUEVO full-width de 3–4 columnas hacia abajo ·
   barra «temas». Responsive 375 / 768 / 1024 / 1440.
   ========================================================================= */
.mu-blog {
  --bl-bg: transparent;
  --bl-title: #fd472e;
  --bl-feat: #331900;
  --bl-feat-ink: #fff7eb;
  --bl-card: #4dacb8;
  --bl-card-ink: #331900;
  --bl-arrow: #c2e535;
  --bl-arrow-ink: #00330b;
  --bl-topbar: #331900;
  --bl-shadow: #540000;      /* sombra dura de las cards (del arte) */
  --bl-more-cols: 4;         /* columnas del grid «ver más» (3 o 4) */
  --bl-radius: 16px;

  background: var(--bl-bg);
  padding: clamp(20px, 3vw, 44px) clamp(16px, 3vw, 48px);
  font-family: "Fredoka", "Baloo 2", system-ui, sans-serif;
}
.mu-blog, .mu-blog * { box-sizing: border-box; }
.mu-blog a { text-decoration: none; color: inherit; }
.mu-blog img { max-width: 100%; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.mu-blog__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 0 0 clamp(16px, 2.2vw, 30px); }
.mu-blog__title {
  font-family: "sans-plomb", "Oswald", sans-serif;
  font-weight: 400; color: var(--bl-title);
  font-size: clamp(52px, 8.5vw, 120px); line-height: 0.82; letter-spacing: -0.01em; margin: 0;
}
.mu-blog__subtitle {
  font-family: "xanti-typewriter-variable", monospace; font-style: italic;
  color: #331900; font-size: clamp(13px, 1.3vw, 16px); margin: 0 0 6px;
}

/* ── Main: destacado + rejilla ────────────────────────────────────────── */
.mu-blog__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.mu-blog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }

/* ── Cards (base) ─────────────────────────────────────────────────────── */
.mu-blog__card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--bl-radius); overflow: hidden;
  box-shadow: 4px 4px 0 var(--bl-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mu-blog__card:hover { transform: translateY(-3px); box-shadow: 6px 7px 0 var(--bl-shadow); }
.mu-blog__thumb { display: block; width: 100%; }
.mu-blog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-blog__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; flex: 1 1 auto; }
.mu-blog__ptitle { margin: 0; font-family: "sans-plomb", "Oswald", sans-serif; font-weight: 400; line-height: 1.05; }

/* Un solo enlace por card que cubre TODA la card = target táctil grande + accesible */
.mu-blog__plink::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.mu-blog__plink:focus { outline: none; }
.mu-blog__card:focus-within { outline: 3px solid var(--bl-arrow); outline-offset: 3px; }

/* Kicker / categoría del destacado */
.mu-blog__kicker {
  align-self: flex-start; display: inline-block;
  background: var(--bl-card); color: var(--bl-card-ink);
  font-family: "xanti-typewriter-variable", "Fredoka", monospace; font-style: italic; font-weight: 700;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px; margin: 0;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

/* Destacado (banner, café oscuro) */
.mu-blog__card--feat { grid-row: span 2; background: var(--bl-feat); color: var(--bl-feat-ink); }
.mu-blog__card--feat .mu-blog__thumb { flex: 1 1 auto; }
.mu-blog__card--feat .mu-blog__thumb img { border-radius: 10px; aspect-ratio: 16 / 11; }
.mu-blog__card--feat .mu-blog__body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 5% 20px; }
.mu-blog__card--feat .mu-blog__ptitle {
  font-size: clamp(19px, 1.9vw, 28px);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* CTA de texto del destacado — claymorphism, área táctil ≥44px */
.mu-blog__cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--bl-arrow); color: var(--bl-arrow-ink);
  border: 2px solid var(--bl-arrow-ink); box-shadow: 2px 2px 0 var(--bl-arrow-ink);
  font-family: "sans-plomb", "Oswald", sans-serif; font-size: 16px; line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mu-blog__card--feat:hover .mu-blog__cta { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--bl-arrow-ink); }
.mu-blog__cta svg { width: 22px; height: 12px; fill: none; stroke: var(--bl-arrow-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Rejilla (teal) — la card enmarca la foto (espacio arriba/lados como en el arte) */
.mu-blog__card--grid { background: var(--bl-card); color: var(--bl-card-ink); }
.mu-blog__card--grid .mu-blog__thumb { padding: 5.3% 5.3% 0; }
.mu-blog__card--grid .mu-blog__thumb img { aspect-ratio: 2 / 1; height: auto; border-radius: 8px; background: #d5d2d2; }
.mu-blog__card--grid .mu-blog__body { padding: 9px 5.3% 12px; }
.mu-blog__card--grid .mu-blog__ptitle {
  font-size: clamp(13px, 1.05vw, 18px);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Sticker (perrito) + flecha verde sobre el destacado (calcado de Recurso 4) */
.mu-blog__feat-media { position: relative; flex: 1 1 auto; padding: 5% 5% 0; }
.mu-blog__card--feat .mu-blog__feat-media .mu-blog__thumb { padding: 0; }
.mu-blog__sticker {
  position: absolute; left: 7%; top: 6%; width: 33%; z-index: 3; pointer-events: none;
  border-radius: 14px; overflow: hidden;
  transform: rotate(-6deg); box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.28);
}
/* La foto define su alto → el perrito se ve completo, sin recorte. */
.mu-blog__sticker img { width: 100%; height: auto; display: block; }
.mu-blog__sticker-arrow {
  position: absolute; left: 33%; top: 2%; width: 12%; z-index: 4;
  transform: rotate(6deg); pointer-events: none;
}
.mu-blog__sticker-arrow svg { width: 100%; height: auto; display: block; fill: var(--bl-arrow); }

/* Flecha decorativa (píldora) de las cards de rejilla */
.mu-blog__arrow {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--bl-arrow); border: 2px solid var(--bl-arrow-ink);
  box-shadow: 1px 1px 0 var(--bl-arrow-ink);
  transition: transform 0.15s ease;
}
.mu-blog__card:hover .mu-blog__arrow { transform: translateX(2px); }
.mu-blog__arrow svg { width: 22px; height: 12px; fill: none; stroke: var(--bl-arrow-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── «ver más» ────────────────────────────────────────────────────────── */
.mu-blog__vermas {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  margin: clamp(14px, 2vw, 24px) auto 0; padding: 6px 18px;
  background: none; border: 0; cursor: pointer;
  color: #331900; font-family: "sans-plomb", "Oswald", sans-serif; font-size: clamp(15px, 1.4vw, 18px);
}
.mu-blog__vermas:focus-visible { outline: 3px solid var(--bl-arrow); outline-offset: 3px; border-radius: 999px; }
.mu-blog__chev { width: 18px; height: 11px; fill: none; stroke: #331900; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.mu-blog__vermas[aria-expanded="true"] .mu-blog__chev { transform: rotate(180deg); }

/* Grid «ver más»: NUEVO, full-width, 3–4 columnas, crece hacia abajo */
.mu-blog__more { display: none; }
.mu-blog__more.is-open { display: block; animation: mu-blog-in 0.35s ease both; }
.mu-blog__more-grid {
  display: grid;
  grid-template-columns: repeat(var(--bl-more-cols, 4), minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(14px, 1.8vw, 22px);
}
@keyframes mu-blog-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Barra de temas ───────────────────────────────────────────────────── */
.mu-blog__topics {
  display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(10px, 1.6vw, 18px);
  min-height: 84px;
  background: var(--bl-topbar); border-radius: 20px;
  padding: 10px clamp(14px, 2vw, 26px);
  margin: clamp(18px, 2.5vw, 34px) auto 0; width: fit-content; max-width: 100%;
  overflow: visible;
}
.mu-blog__topics-label { flex: 0 0 auto; font-family: "sans-plomb", "Oswald", sans-serif; color: var(--bl-feat-ink); font-size: clamp(26px, 3vw, 46px); line-height: 1; }
/* Pills en el centro: se envuelven aquí sin empujar al perrito */
.mu-blog__topics-list { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Perrito (Recurso 5): elemento flex al final, tamaño fijo, centrado vertical. Al ser
   parte del layout (no absoluto) NUNCA se sale de pantalla ni se recorta, en ningún ancho.
   height:auto → SVG completo, sin deformar. */
.mu-blog__sheep {
  flex: 0 0 auto; align-self: center;
  width: clamp(82px, 8vw, 108px); height: auto; display: block; pointer-events: none;
}
.mu-blog__topic {
  background: var(--bl-card); color: var(--bl-card-ink);
  font-family: "xanti-typewriter-variable", "Fredoka", monospace; font-style: italic; font-weight: 700;
  font-size: 11px; letter-spacing: 0.02em; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0.8px 0.8px 0 rgba(27, 0, 61, 0.5); white-space: nowrap; transition: transform 0.15s ease;
}
.mu-blog__topic:hover { transform: translateY(-2px); }
.mu-blog__topic:focus-visible { outline: 2px solid var(--bl-feat-ink); outline-offset: 2px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* ≤1200: banner de 2 columnas empieza a apretarse → 3 col en «ver más» */
@media (max-width: 1200px) { .mu-blog__more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tablet: apila banner (destacado sobre rejilla) */
@media (max-width: 960px) {
  .mu-blog__main { grid-template-columns: 1fr; }
  .mu-blog__card--feat { grid-row: auto; }
  .mu-blog__card--feat .mu-blog__thumb img { aspect-ratio: 16 / 9; }
}
/* Móvil ancho: «ver más» a 2 columnas + barra de temas full-width (predecible,
   evita que fit-content se ensanche y empuje al perrito fuera de pantalla) */
@media (max-width: 680px) {
  .mu-blog__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-blog__topics { width: 100%; }
}
/* Móvil: rejilla del banner a 1 columna */
@media (max-width: 560px) {
  .mu-blog__grid { grid-template-columns: 1fr; }
  .mu-blog__head { gap: 10px; }
  /* Apila centrado: temas / pills / perrito (cada uno en su línea → el perro nunca se sale) */
  .mu-blog__topics { flex-wrap: wrap; justify-content: center; gap: 12px; text-align: center; }
  .mu-blog__topics-label { flex: 1 1 100%; }
  .mu-blog__topics-list { flex: 1 1 100%; justify-content: center; }
}
/* Móvil estrecho (≈375): todo a 1 columna, ajustes de la barra de temas */
@media (max-width: 440px) {
  .mu-blog__more-grid { grid-template-columns: 1fr; }
  .mu-blog__sheep { width: clamp(64px, 18vw, 86px); }
  .mu-blog__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-blog__card, .mu-blog__chev, .mu-blog__arrow, .mu-blog__cta, .mu-blog__topic { transition: none; }
  .mu-blog__more.is-open { animation: none; }
}