/* Musicantes · Episodios
   Hereda las variables del tema Musicantes Hub (--ink, --pink, --yellow, --display…);
   si el tema no las define, cae a la paleta oficial de Musicantes.
   Manual de marca: colores planos, formas redondeadas, sin sombras ni degradados. */

.mepi {
  --mepi-purpura: var(--ink, #200548);
  --mepi-fucsia: #FF005C;
  --mepi-rosa: #E6A8F7;
  --mepi-violeta: #7A1FFF;
  --mepi-celeste: #00C2FF;
  --mepi-amarillo: var(--yellow, #FFE600);
  --mepi-negro: #1D1D1B;
  --mepi-texto: var(--text, #1D1D1B);
  --mepi-suave: var(--muted, #5d5873);
  --mepi-linea: #eee6f6;
  --mepi-radio: var(--radius, 18px);
  --mepi-display: var(--display, "Anton", Impact, sans-serif);
  --mepi-body: var(--body, "Nunito", system-ui, sans-serif);
  font-family: var(--mepi-body);
  color: var(--mepi-texto);
}

.mepi .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Página «Episodios» ---------- */
/* --mepi-offset: lo que tapa la barra fija del menú (la mide assets/episodios.js). */
.mepi-archive { padding: calc(clamp(40px, 7vw, 80px) + var(--mepi-offset, 0px)) 0 clamp(40px, 7vw, 80px); }
.mepi-archive__head { max-width: 760px; margin-bottom: clamp(28px, 5vw, 48px); }
.mepi-archive__title { color: var(--mepi-purpura); }
.mepi-archive__lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--mepi-suave); max-width: 52ch; }

/* ---------- Grilla y tarjetas ---------- */
.mepi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.mepi-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 2px solid var(--mepi-linea);
  border-radius: var(--mepi-radio);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.mepi-card:hover, .mepi-card:focus-within { border-color: var(--mepi-violeta); transform: translateY(-3px); }

.mepi-card__media { aspect-ratio: 16 / 9; /* la portada del Dashboard es 16:9 y trae el título dibujado */ background: var(--mepi-purpura); }
.mepi-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mepi-card__placeholder {
  height: 100%; display: grid; place-items: center;
  font-family: var(--mepi-display); font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--mepi-amarillo); text-transform: uppercase; letter-spacing: .02em;
}

.mepi-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.mepi-card__label {
  margin: 0 0 .5em; font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mepi-fucsia);
}
.mepi-card__title {
  font-family: var(--mepi-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1;
  text-transform: uppercase; color: var(--mepi-purpura); margin: 0 0 .45em;
}
.mepi-card__excerpt { color: var(--mepi-suave); font-size: .98rem; margin: 0 0 1em; }
.mepi-card__actions { margin-top: auto; display: flex; }
/* «Ver episodio» es un botón; el cuadernito no va en la tarjeta: se descubre al entrar (Paul, 2026-10-08). */
.mepi-card__link {
  align-self: flex-start; display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--mepi-violeta); color: #fff; font-weight: 800; text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
}
.mepi-card:hover .mepi-card__link { filter: brightness(1.1); }
.mepi-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--mepi-radio); } /* toda la tarjeta es clicable */
.mepi-card__link:focus-visible { outline: none; }
.mepi-card:has(.mepi-card__link:focus-visible) { outline: 3px solid var(--mepi-fucsia); outline-offset: 3px; }

.mepi-empty { font-weight: 800; color: var(--mepi-purpura); }

.mepi-pagination { margin-top: 40px; }
.mepi-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mepi-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 2px solid var(--mepi-linea); border-radius: 999px;
  color: var(--mepi-purpura); font-weight: 800; text-decoration: none;
}
.mepi-pagination .page-numbers.current { background: var(--mepi-purpura); border-color: var(--mepi-purpura); color: #fff; }
.mepi-pagination a.page-numbers:hover { border-color: var(--mepi-violeta); }

/* ---------- Página de un episodio ---------- */
.mepi-single { padding: calc(clamp(40px, 7vw, 80px) + var(--mepi-offset, 0px)) 0 clamp(40px, 7vw, 80px); max-width: 860px; }
.mepi-single__content p, .mepi-single .entry__content p { margin: 0 0 1em; }
.mepi-drafts { margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; border: 2px dashed var(--mepi-violeta, #7A1FFF); }
.mepi-single__title { color: var(--mepi-purpura); }

/* Portada a todo el ancho, como imagen principal, y el reproductor debajo (2026-10-08: la tarjeta de
   220 px al lado del reproductor se veía chica y la página, pobre). */
.mepi-single__top {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin: 8px 0 40px;
}
.mepi-single__top > :only-child { grid-column: 1 / -1; }
.mepi-single__cover { margin: 0; }
.mepi-single__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--mepi-radio); display: block;
  box-shadow: 0 18px 40px rgba(32, 5, 72, .18); }
.mepi-player { display: block; width: 100%; height: 232px; border: 0; border-radius: 12px; }

.mepi-single__content { margin-bottom: 40px; }

.mepi-section-title {
  font-family: var(--mepi-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); color: var(--mepi-purpura); margin: 0 0 .5em;
}

.mepi-ideas { margin-bottom: 48px; }
.mepi-ideas__list { list-style: none; counter-reset: idea; padding: 0; margin: 0; display: grid; gap: 14px; }
.mepi-ideas__item {
  counter-increment: idea;
  position: relative; padding: 18px 20px 18px 72px;
  background: #fff; border: 2px solid var(--mepi-linea); border-radius: var(--mepi-radio);
}
.mepi-ideas__item::before {
  content: counter(idea);
  position: absolute; left: 18px; top: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mepi-amarillo); color: var(--mepi-purpura); font-weight: 800;
}
.mepi-ideas__title { font-family: var(--mepi-body); font-weight: 800; font-size: 1.1rem; text-transform: none; letter-spacing: 0; color: var(--mepi-purpura); margin: 0 0 .25em; line-height: 1.3; }
.mepi-ideas__text { margin: 0; color: var(--mepi-texto); }

.mepi-cuadernito {
  margin-bottom: 40px; padding: clamp(22px, 4vw, 36px);
  background: var(--mepi-rosa); border-radius: var(--mepi-radio);
}
.mepi-cuadernito__lead { font-weight: 800; color: var(--mepi-purpura); font-size: 1.1rem; }
.mepi-cuadernito__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 24px; }
.mepi-cuadernito__btn.btn { font-size: 1rem; padding: 1em 1.8em; background: var(--mepi-purpura); color: #fff; }
.mepi-cuadernito__btn.btn:hover { background: var(--mepi-violeta); }
.mepi-cuadernito__size { font-size: .9rem; font-weight: 800; color: var(--mepi-purpura); }
.mepi-cuadernito__preview {
  background: #fff; border-radius: 12px; overflow: hidden;
}
.mepi-cuadernito__preview object { display: block; width: 100%; height: min(80vh, 760px); border: 0; }
.mepi-cuadernito__fallback { margin: 0; padding: 24px; }
.mepi-cuadernito__fallback a { color: var(--mepi-violeta); font-weight: 800; }

.mepi-single__back { margin: 0; }

@media (max-width: 640px) {
  .mepi-grid { grid-template-columns: 1fr; }
  .mepi-single__top { grid-template-columns: 1fr; }
  .mepi-ideas__item { padding: 16px 16px 16px 64px; }
  .mepi-ideas__item::before { left: 14px; }
  .mepi-cuadernito__btn.btn { width: 100%; }
  .mepi-cuadernito__preview object { height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .mepi-card, .mepi-card:hover, .mepi-card:focus-within { transition: none; transform: none; }
}