/* Capa de layout del tema — Monólogos sin propina.
 * Depende de tokens.css + components.css. Color/tipo/espacio siempre por token. */

html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); }
h1, h2, h3 { margin: 0; }
img { max-width: 100%; height: auto; }

/* ——— Cabecera / nav (N6 masthead) ——— */
.msp-masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-lg); padding-top: var(--space-lg); padding-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.msp-logo img { height: clamp(34px, 5vw, 52px); width: auto; display: block; }
.msp-masthead__meta { padding-bottom: var(--space-2xs); }
.msp-nav {
  display: flex; gap: var(--space-xl); flex-wrap: wrap;
  padding-block: var(--space-sm);
  border-top: var(--rule-hairline); border-bottom: var(--rule-hairline);
}
.msp-nav .msp-link { color: var(--color-ink); white-space: nowrap; }

/* ——— Banda 10 años ——— */
.msp-banda { padding-block: var(--space-2xl) var(--space-xl); }
.msp-banda__title { font-size: var(--text-display); }
.msp-banda__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-xl); margin-top: var(--space-xl);
  border-top: 2px solid currentColor; padding-top: var(--space-lg);
}
.msp-banda__lede { margin: 0; font-size: var(--text-xl); line-height: 1.45; font-weight: 500; }
.msp-banda__aside { margin: 0; line-height: 2; font-size: var(--text-xs); }

/* ——— Secciones ——— */
.msp-seccion { padding-bottom: var(--space-4xl); }
.msp-seccion--cartelera { padding-top: var(--space-3xl); }
.msp-seccion__nota { margin-top: var(--space-lg); }

/* ——— Fila de función: contenido interno ——— */
.msp-fn__fecha { display: flex; align-items: baseline; gap: var(--space-xs); }
.msp-fn__dia { font-size: var(--text-3xl); line-height: .8; }
.msp-fn__titulo { display: block; font-size: var(--text-2xl); font-weight: 700; line-height: .95; }
.msp-fn__meta { display: block; margin-top: var(--space-2xs); }
.msp-fn__sede { font-size: var(--text-sm); }
.msp-fn__accion { text-align: right; white-space: nowrap; }
.msp-fn__agotado { color: var(--color-sold-out); }

/* ——— Los tres ——— */
.msp-tres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-xl); align-items: start;
}
.msp-tres__foto { display: block; margin-bottom: var(--space-sm); }
.msp-tres__foto .msp-ph { width: 100%; }
.msp-tres__nombre { font-size: var(--text-3xl); }
.msp-tres__bio { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); margin: var(--space-xs) 0 0; max-width: 34ch; }

/* ——— El canal ——— */
.msp-canal {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}
.msp-canal__destacado { display: block; color: inherit; }
.msp-canal__still { width: 100%; clip-path: var(--clip-banner); }
.msp-canal__titulo { font-size: var(--text-3xl); color: var(--color-ink); margin-top: var(--space-sm); }
.msp-canal__fila { grid-template-columns: minmax(0, 1fr) 4.5rem; padding: var(--space-sm) var(--space-xs); }
.msp-canal__filatitulo { display: block; font-size: var(--text-xl); font-weight: 700; line-height: 1; }
.msp-canal__dur { text-align: right; }
.msp-canal__ver { display: inline-block; margin-top: var(--space-lg); }
@media (max-width: 900px) { .msp-canal { grid-template-columns: minmax(0, 1fr); } }

/* ——— Mero bar ——— */
.msp-mero { padding-block: var(--space-4xl); }
.msp-mero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-2xl); align-items: end;
}
.msp-mero__kicker { color: oklch(45% .02 60); }
.msp-mero__title { font-size: var(--text-display-s); margin-top: var(--space-xs); }
.msp-mero__lede { font-size: var(--text-xl); line-height: 1.45; max-width: 38ch; margin: var(--space-md) 0 0; }
.msp-mero__acciones { display: flex; flex-direction: column; gap: var(--space-sm); border-top: 2px solid currentColor; padding-top: var(--space-md); }
.msp-mero__acciones .msp-link { color: inherit; align-self: flex-start; }

/* ——— Cierre ——— */
.msp-site-footer { padding-top: var(--space-4xl); padding-bottom: calc(var(--space-4xl) + 56px); }
.msp-footer__title { font-size: var(--text-display); }
.msp-footer__accent { color: var(--color-accent); }
.msp-footer__links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-xl); border-top: var(--rule-hairline); margin-top: var(--space-xl); padding-top: var(--space-lg);
}
.msp-footer__links .msp-link { justify-self: start; }

/* ——— Riel ——— */
.msp-rail__lead { font-weight: 600; }
.msp-rail__title { font-size: var(--text-xl); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msp-rail__cta { margin-left: auto; font-weight: 600; white-space: nowrap; }