/* Hallmark · component layer · Monólogos sin propina
 * Depende de tokens.css. Cero valores en crudo: cada color/tipo/espacio es un token.
 * Las clases .is-hover / .is-focus / .is-active existen solo para la página de demo de estados.
 */

/* ——— Base ——— */
.msp { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.msp-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .98; letter-spacing: -.02em; overflow-wrap: anywhere; }
.msp-mono { font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: .04em; text-transform: uppercase; }
.msp-dim { color: var(--color-ink-2); }
.msp-wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
.msp :focus-visible, .msp-focusable:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ——— Iconos ——— */
.msp-icon { width: 1.25rem; height: 1.25rem; flex: none; color: currentColor; }
.msp-icon--sm { width: 1rem; height: 1rem; }
.msp-icon--lg { width: 1.75rem; height: 1.75rem; }

/* ——— Botón ——— */
.msp-btn {
  --_bg: var(--color-accent); --_fg: var(--color-ink-on-accent); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  font-size: var(--text-xl); line-height: 1; padding: var(--space-md) var(--space-lg);
  background: var(--_bg); color: var(--_fg); border: 2px solid var(--_bd); border-radius: var(--radius-none);
  clip-path: var(--clip-banner); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.msp-btn:hover, .msp-btn.is-hover { --_bg: var(--color-accent-lift); }
.msp-btn:active, .msp-btn.is-active { --_bg: var(--color-accent-press); }
.msp-btn:focus-visible, .msp-btn.is-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.msp-btn[disabled], .msp-btn[aria-disabled="true"] { --_bg: var(--color-paper-3); --_fg: var(--color-ink-3); cursor: not-allowed; }
.msp-btn[data-state="loading"] { --_bg: var(--color-accent-press); cursor: progress; }
.msp-btn[data-state="loading"] .msp-icon { animation: msp-spin 900ms linear infinite; }
.msp-btn[data-state="error"] { --_bg: var(--color-sold-out); --_fg: var(--color-ink); }
.msp-btn[data-state="success"] { --_bg: transparent; --_fg: var(--color-accent); --_bd: var(--color-accent); clip-path: none; }
@keyframes msp-spin { to { transform: rotate(1turn); } }

.msp-btn--outline { --_bg: transparent; --_fg: var(--color-ink); --_bd: var(--color-ink); clip-path: none; }
.msp-btn--outline:hover, .msp-btn--outline.is-hover { --_bg: var(--color-ink); --_fg: var(--color-paper); --_bd: var(--color-ink); }
.msp-btn--outline:active, .msp-btn--outline.is-active { --_bg: var(--color-ink-2); --_bd: var(--color-ink-2); }
.msp-btn--lg { font-size: var(--text-2xl); padding: var(--space-lg) var(--space-xl); }
.msp-btn--sm { font-size: var(--text-base); padding: var(--space-xs) var(--space-md); --chamfer: 9px; }
.msp-btn--icon { padding: var(--space-xs); clip-path: none; }
/* Sobre banda amarilla o crema, el sólido se invierte a tinta */
.msp-on-accent .msp-btn, .msp-on-cream .msp-btn { --_bg: var(--color-ink-on-accent); --_fg: var(--color-accent); }
.msp-on-accent .msp-btn:hover, .msp-on-cream .msp-btn:hover { --_bg: var(--color-paper-2); }

/* ——— Enlace (subrayado que se dibuja) ——— */
.msp-link { position: relative; color: inherit; text-decoration: none; }
.msp-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: currentColor; transition: right var(--dur-2) var(--ease-out); }
.msp-link:hover::after, .msp-link:focus-visible::after, .msp-link.is-hover::after { right: 0; }
.msp-link[aria-current="page"] { color: var(--color-accent); }
.msp-link[aria-current="page"]::after { right: 0; }

/* ——— Fila de función / listado (el motivo interactivo central) ——— */
.msp-fn {
  display: grid; grid-template-columns: 8.5rem minmax(0,1fr) 15rem 8rem; gap: var(--space-lg);
  align-items: baseline; padding: var(--space-lg) var(--space-md);
  border-top: var(--rule-hairline); color: inherit; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.msp-fn:last-of-type { border-bottom: var(--rule-hairline); }
.msp-fn:hover, .msp-fn:focus-visible, .msp-fn.is-hover { background: var(--color-accent); color: var(--color-ink-on-accent); }
.msp-fn:hover .msp-dim, .msp-fn:focus-visible .msp-dim, .msp-fn.is-hover .msp-dim { color: var(--color-ink-on-accent); }
.msp-fn:active { background: var(--color-accent-press); }
.msp-fn[aria-disabled="true"]:hover { background: var(--color-paper-2); color: inherit; }
.msp-fn__go { opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.msp-fn:hover .msp-fn__go, .msp-fn:focus-visible .msp-fn__go, .msp-fn.is-hover .msp-fn__go { opacity: 1; transform: none; }

/* ——— Encabezado de sección (filete grueso, dato a la derecha) ——— */
.msp-rule { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
  border-bottom: var(--rule-heavy); padding-bottom: var(--space-xs); margin-bottom: var(--space-lg); }
.msp-rule h2 { font-size: var(--text-4xl); margin: 0; }

/* ——— Badge ——— */
.msp-badge { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono);
  font-size: var(--text-mono-xs); letter-spacing: .04em; text-transform: uppercase; padding: 5px var(--space-xs);
  border: 1px solid currentColor; color: var(--color-ink-2); }
.msp-badge--open { color: var(--color-accent); }
.msp-badge--sold { color: var(--color-sold-out); }
.msp-badge--solid { background: var(--color-accent); color: var(--color-ink-on-accent); border-color: transparent; }

/* ——— Campos ——— */
.msp-label { display: block; font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-ink-2); margin-bottom: var(--space-xs); }
.msp-field { width: 100%; background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hairline);
  border-radius: var(--radius-none); font-family: var(--font-body); font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md); transition: border-color var(--dur-1) var(--ease-out); }
.msp-field::placeholder { color: var(--color-ink-3); }
.msp-field:hover, .msp-field.is-hover { border-color: var(--color-ink-2); }
.msp-field:focus-visible, .msp-field.is-focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); }
.msp-field[disabled] { color: var(--color-ink-3); background: var(--color-paper); cursor: not-allowed; }
.msp-field[aria-invalid="true"] { border-color: var(--color-sold-out); }
.msp-help { font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: .04em; margin-top: var(--space-2xs); color: var(--color-ink-3); }
.msp-help--error { color: var(--color-sold-out); text-transform: uppercase; }

/* ——— Overlay ——— */
.msp-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  display: grid; place-items: center; padding: var(--page-pad); animation: msp-fade var(--dur-2) var(--ease-out); }
.msp-dialog { width: min(46rem, 100%); max-height: 86vh; overflow: auto; background: var(--color-paper-2);
  border: var(--rule-hairline); border-top: var(--rule-heavy); padding: var(--space-xl);
  animation: msp-rise var(--dur-3) var(--ease-out); }
.msp-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
/* Overlay de imagen: sin marco, la foto manda */
.msp-lightbox { position: fixed; inset: 0; z-index: 60; background: var(--color-paper); display: grid;
  grid-template-rows: auto 1fr auto; padding: var(--page-pad); gap: var(--space-md); animation: msp-fade var(--dur-2) var(--ease-out); }
/* Velo de protección de texto sobre foto — gradiente, nunca cápsula */
.msp-veil { position: relative; }
.msp-veil > img, .msp-veil > .msp-ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.msp-veil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 92%, transparent) 0%, transparent 62%); pointer-events: none; }
.msp-veil__text { position: absolute; inset-inline: var(--space-lg); bottom: var(--space-lg); z-index: 1; }
@keyframes msp-fade { from { opacity: 0; } }
@keyframes msp-rise { from { opacity: 0; transform: translateY(12px); } }

/* ——— Figura con pie (el pie es dato, va en mono) ——— */
.msp-figure { margin: 0; }
.msp-figure > img, .msp-photo { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-paper-2); }
.msp-figcaption { font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: .04em;
  color: var(--color-ink-3); margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: var(--rule-hairline); }
.msp-on-cream .msp-figcaption { color: color-mix(in oklab, var(--color-ink-on-cream) 60%, transparent); border-top: var(--rule-hairline-cream); }
/* Encuadres canónicos */
.msp-crop-apertura { aspect-ratio: 21/9; }
.msp-crop-afiche   { aspect-ratio: 4/3; }
.msp-crop-retrato  { aspect-ratio: 4/5; }
.msp-crop-cuadro   { aspect-ratio: 1/1; }
.msp-crop-canal    { aspect-ratio: 16/9; }
.msp-crop-par      { aspect-ratio: 16/10; }
.msp-crop-story    { aspect-ratio: 9/16; }
@media (max-width: 700px) { .msp-crop-apertura { aspect-ratio: 4/3; } }

/* ——— Placeholder de imagen (hasta que lleguen las fotos reales) ——— */
.msp-ph { background: var(--color-paper-2); border: var(--rule-hairline); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-ink-3); text-align: center; padding: var(--space-md); }

/* ——— Bandas de papel ——— */
.msp-on-accent { background: var(--color-accent); color: var(--color-ink-on-accent); }
.msp-on-cream { background: var(--color-paper-cream); color: var(--color-ink-on-cream); }
.msp-on-cream .msp-dim { color: color-mix(in oklab, var(--color-ink-on-cream) 65%, transparent); }
.msp-on-cream .msp-field { background: var(--color-paper-cream); border-color: color-mix(in oklab, var(--color-ink-on-cream) 25%, transparent); color: var(--color-ink-on-cream); }

/* ——— Riel fijo ——— */
.msp-rail { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; align-items: center;
  gap: var(--space-lg); padding: var(--space-sm) var(--page-pad); background: var(--color-accent);
  color: var(--color-ink-on-accent); text-decoration: none; }

/* ——— Responsive: pisos duros ——— */
@media (max-width: 900px) {
  .msp-fn { grid-template-columns: minmax(0,1fr); gap: var(--space-2xs); }
  .msp-fn > .msp-fn__col3, .msp-fn > .msp-fn__col4 { grid-column: 1; text-align: left; }
  .msp-rule { align-items: flex-start; flex-direction: column; gap: var(--space-xs); }
  .msp-rail { gap: var(--space-sm); }
  .msp-rail__meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msp *, .msp-overlay, .msp-dialog, .msp-lightbox { animation: none !important; transition-duration: 80ms !important; }
  .msp-fn__go { opacity: 1; transform: none; }
}