.home-hero {
  position: relative;
  min-height: calc(100svh - 3.5rem);
  padding-block: var(--space-8) var(--space-9);
  overflow: hidden;
}

.home-hero__layout {
  display: grid;
  min-height: calc(100svh - 10rem);
  gap: var(--space-8);
}

.home-hero__copy {
  align-self: center;
}

.home-hero h1 {
  max-width: 11ch;
  font-size: var(--text-display);
}

.home-hero__dek {
  max-width: 39rem;
  margin-block-end: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}

.home-hero__issue {
  display: grid;
  align-content: space-between;
  min-height: 19rem;
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--color-border-strong);
  background: var(--color-text);
  color: var(--color-bg);
}

.home-hero__issue-number {
  font-family: var(--font-editorial);
  font-size: clamp(7rem, 30vw, 16rem);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: .68;
  text-align: right;
}

.home-hero__issue-copy {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: end;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid #4d4b46;
}

.home-hero__rail {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  overflow: hidden;
  border-block: var(--border-hairline) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  text-transform: uppercase;
}

.home-hero__rail span {
  padding-inline: var(--space-6);
}

.recent-list {
  display: grid;
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.recent-item {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.recent-item__number {
  color: var(--color-accent);
  font-family: var(--font-editorial);
  font-size: 3.5rem;
  line-height: .8;
}

.recent-item__title {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-h3);
  font-weight: 600;
}

.recent-item__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.battle-intro {
  display: grid;
  min-height: 34rem;
  padding: var(--space-7) 0;
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.battle-intro__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.battle-intro__versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.battle-intro__frame {
  aspect-ratio: 2 / 3;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
}

.battle-intro__vs {
  color: var(--color-accent);
  font-family: var(--font-editorial);
  font-size: 3rem;
  font-style: italic;
}

.page-intro {
  padding-block: var(--space-9) var(--space-8);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.page-intro__layout {
  display: grid;
  gap: var(--space-6);
}

.page-intro__aside {
  align-self: end;
  color: var(--color-text-muted);
}

.search-states {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-7);
}

.search-toolbar {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.search-results {
  padding-block: var(--space-8) var(--space-10);
}

.state-preview {
  min-height: 7.5rem;
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--color-border);
  background: var(--color-surface);
}

.editor-shell {
  padding-block: var(--space-7) var(--space-10);
}

.editor-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.editor-layout {
  display: grid;
  gap: var(--space-8);
}

.editor-panel {
  display: grid;
  gap: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.editor-panel__summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.editor-panel__metric strong {
  display: block;
  font-family: var(--font-editorial);
  font-size: 2.5rem;
  line-height: 1;
}

.rank-list {
  margin: 0;
  padding: 0;
  border-block-start: var(--border-hairline) solid var(--color-border);
  list-style: none;
}

.rank-item {
  display: grid;
  grid-template-columns: 2.75rem 3.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  min-height: 8.5rem;
  padding-block: var(--space-5);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.rank-item__drag {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-content: center;
  gap: 4px;
  color: var(--color-text-muted);
}

.rank-item__drag i {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}

.rank-item__position {
  font-family: var(--font-editorial);
  font-size: 2.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.rank-item .poster {
  display: none;
}

.rank-item__content {
  min-width: 0;
}

.rank-item__content h3,
.rank-item__content p {
  margin: 0;
}

.rank-item__content h3 {
  overflow-wrap: anywhere;
}

.rank-item__content p {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.rank-item__actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.battle-page {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
}

.battle-header {
  border-color: var(--color-border);
}

.battle-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.battle-stage {
  padding-block: var(--space-7) var(--space-10);
}

.battle-stage__question {
  max-width: none;
  margin-block: var(--space-8);
  text-align: center;
}

.battle-grid {
  display: grid;
  gap: var(--space-7);
  max-width: 58rem;
  margin-inline: auto;
}

.battle-card {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}

.battle-card:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-subtle);
}

.battle-card .poster {
  width: min(56vw, 13.75rem);
  margin-inline: auto;
}

.battle-card__caption {
  display: flex;
  min-height: 4.5rem;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.battle-card__caption strong {
  font-size: var(--text-title-ui);
}

.battle-card__caption span {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.battle-card[data-chosen="true"] {
  border: var(--border-emphasis) solid var(--color-accent);
}

.battle-vs {
  color: var(--color-accent);
  font-family: var(--font-editorial);
  font-size: 2.5rem;
  font-style: italic;
  line-height: 1;
  text-align: center;
}

.export-shell {
  padding-block: var(--space-7) var(--space-10);
}

.export-layout {
  display: grid;
  gap: var(--space-8);
}

.export-controls {
  display: grid;
  gap: var(--space-7);
}

.template-grid {
  display: grid;
  gap: var(--space-4);
}

.template-option {
  position: relative;
}

.template-option input {
  position: absolute;
  opacity: 0;
}

.template-option__label {
  display: grid;
  min-height: 8.5rem;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border-strong);
  background: var(--color-surface);
}

.template-option input:checked + .template-option__label {
  border: var(--border-emphasis) solid var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-bg);
}

.template-option input:checked + .template-option__label::after {
  content: "Seleccionada";
  color: var(--color-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.template-option input:focus-visible + .template-option__label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.template-swatch {
  display: grid;
  height: 4.25rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: var(--space-3);
  background: var(--brand-charcoal);
}

.template-swatch i {
  display: block;
  background: var(--brand-paper);
}

.template-swatch--archive {
  grid-template-columns: 1fr;
  align-content: space-between;
}

.template-swatch--archive i {
  height: 1px;
}

.template-swatch--editorial {
  grid-template-columns: 2fr 1fr;
}

.export-preview-wrap {
  min-width: 0;
}

.export-preview {
  --preview-ratio: 9 / 16;
  position: relative;
  display: grid;
  width: min(100%, 31rem);
  aspect-ratio: var(--preview-ratio);
  margin-inline: auto;
  overflow: hidden;
  border: var(--border-hairline) solid var(--color-border-strong);
  background: var(--brand-paper);
  color: var(--brand-charcoal);
}

.export-preview[data-format="square"] {
  --preview-ratio: 1 / 1;
}

.export-preview__inner {
  display: grid;
  gap: 3%;
  padding: 7%;
}

.export-preview__kicker {
  margin: 0;
  font-size: clamp(.45rem, 1.5vw, .7rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.export-preview__title {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(1.75rem, 7vw, 4rem);
  font-weight: 600;
  line-height: .86;
}

.export-preview__posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2%;
  align-self: center;
}

.export-preview__poster {
  position: relative;
}

.export-preview__poster img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.export-preview__poster span {
  position: absolute;
  inset: auto auto -6% -2%;
  display: grid;
  width: 1.4em;
  aspect-ratio: 1;
  place-items: center;
  background: var(--brand-wine);
  color: #fff;
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 4vw, 2rem);
  line-height: 1;
}

.export-preview__credits {
  align-self: end;
  margin: 0;
  padding-block-start: 3%;
  border-block-start: 1px solid #8d887f;
  font-size: clamp(.5rem, 1.7vw, .75rem);
}

.export-preview[data-template="archive"] .export-preview__posters {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.export-preview[data-template="posters"] .export-preview__title {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.export-preview[data-template="posters"] .export-preview__posters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 30rem) {
  .rank-item {
    grid-template-columns: 2.75rem 4.25rem 4.5rem minmax(0, 1fr);
  }

  .rank-item .poster {
    display: block;
  }

  .rank-item__actions {
    grid-column: 3 / -1;
  }

  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .home-hero__layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    align-items: stretch;
  }

  .home-hero__issue {
    min-height: 34rem;
  }

  .home-hero__issue-number {
    font-size: clamp(11rem, 22vw, 18rem);
  }

  .recent-item {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    align-items: center;
  }

  .battle-intro__inner {
    grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr);
  }

  .page-intro__layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr);
  }

  .rank-item {
    grid-template-columns: 2.75rem 5rem 5rem minmax(0, 1fr) auto;
    min-height: 7.5rem;
  }

  .rank-item__actions {
    grid-column: auto;
    flex-wrap: nowrap;
  }

  .battle-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .battle-card .poster {
    width: min(24vw, 17rem);
  }

  .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64.0625rem) {
  .home-hero {
    min-height: calc(100svh - 4.5rem);
    padding-block-start: var(--space-9);
  }

  .home-hero__layout {
    min-height: calc(100svh - 13rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .home-hero__copy {
    grid-column: 1 / span 7;
  }

  .home-hero__issue {
    grid-column: 9 / -1;
  }

  .editor-layout {
    grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr);
    align-items: start;
    gap: var(--space-9);
  }

  .editor-panel {
    position: sticky;
    top: var(--space-6);
  }

  .export-layout {
    grid-template-columns: minmax(20rem, 5fr) minmax(24rem, 7fr);
    align-items: start;
    gap: var(--space-9);
  }

  .export-preview-wrap {
    position: sticky;
    top: var(--space-6);
  }
}

@media (forced-colors: active) {
  .demo-flag,
  .button,
  .poster,
  .template-option__label,
  .battle-card {
    forced-color-adjust: auto;
  }
}

/* Phase 2: editorial home and TMDB search */
.site-header--quiet {
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
}

.cover-story {
  position: relative;
  min-height: calc(100svh - 3.5rem);
  padding-block: clamp(2.5rem, 8vw, 6rem) 5rem;
  overflow: hidden;
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.cover-story::before {
  position: absolute;
  inset: 0 auto 0 7vw;
  width: 1px;
  background: var(--color-border);
  content: "";
  pointer-events: none;
}

.cover-story__grid {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

.cover-story__copy {
  position: relative;
  z-index: 2;
}

.cover-story__copy h1 {
  max-width: 8.5ch;
  margin-block-end: var(--space-6);
  font-size: clamp(4rem, 16vw, 8.75rem);
  letter-spacing: -.045em;
  line-height: .8;
}

.cover-story__dek {
  max-width: 35rem;
  margin-block-end: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}

.cover-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.text-link {
  display: inline-flex;
  min-height: var(--size-target-min);
  align-items: center;
  border-block-end: 1px solid currentColor;
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
}

.text-link--light { color: var(--brand-paper); }

.cover-collage {
  position: relative;
  min-height: clamp(29rem, 110vw, 43rem);
}

.cover-collage::before {
  position: absolute;
  inset: 6% 3% 5% 9%;
  border: var(--border-hairline) solid var(--color-border-strong);
  content: "";
}

.cover-collage__poster {
  position: absolute;
  margin: 0;
  width: 45%;
  box-shadow: 0 1rem 2.5rem rgb(34 33 30 / .18);
}

.cover-collage__poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.cover-collage__poster figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: .55rem .7rem;
  background: var(--brand-paper);
  color: var(--brand-charcoal);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cover-collage__poster--one { z-index: 3; inset: 4% auto auto 7%; transform: rotate(-4deg); }
.cover-collage__poster--two { z-index: 2; inset: 17% 5% auto auto; transform: rotate(5deg); }
.cover-collage__poster--three { z-index: 4; inset: auto auto 4% 29%; width: 41%; transform: rotate(1deg); }

.cover-collage__note {
  position: absolute;
  inset: auto 0 1rem auto;
  margin: 0;
  color: var(--color-text-muted);
  font-size: .68rem;
  letter-spacing: .07em;
  line-height: 1.6;
  text-align: right;
  text-transform: uppercase;
}

.cover-story__ticker {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-around;
  border-block-start: var(--border-hairline) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cover-story__ticker i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--color-accent); }

.editorial-heading {
  display: grid;
  gap: var(--space-6);
  align-items: end;
  margin-block-end: var(--space-8);
}

.editorial-heading > div:first-child { position: relative; }
.editorial-heading h2 { margin: 0; font-size: var(--text-h1); }
.editorial-heading .eyebrow { margin-block-end: var(--space-2); }
.editorial-heading__number {
  position: absolute;
  inset: -.55em auto auto -.05em;
  color: color-mix(in srgb, var(--color-accent) 14%, transparent);
  font-family: var(--font-editorial);
  font-size: clamp(5rem, 17vw, 10rem);
  line-height: 1;
  pointer-events: none;
}

.editorial-heading__copy { max-width: 30rem; margin: 0; color: var(--color-text-muted); }

.state-switch {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border-block-end: var(--border-hairline) solid var(--color-border-strong);
}

.state-switch button {
  min-height: var(--size-target-min);
  padding-inline: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.state-switch button[aria-pressed="true"] { border-block-end: 3px solid var(--color-accent); color: var(--color-text); }

.archive-empty {
  display: grid;
  gap: var(--space-7);
  align-items: end;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: var(--border-hairline) solid var(--color-border-strong);
  background: var(--color-surface);
}

.archive-empty__mark { margin: 0; color: var(--color-accent); font-family: var(--font-editorial); font-size: 5rem; line-height: .6; }
.archive-empty h3 { margin-block: var(--space-5) var(--space-3); font-family: var(--font-editorial); font-size: var(--text-h2); }
.archive-empty p { max-width: 35rem; color: var(--color-text-muted); }

.archive-demo { border-block-start: var(--border-hairline) solid var(--color-border); }
.archive-demo[hidden] { display: none; }
.archive-demo article { display: grid; gap: var(--space-4); padding-block: var(--space-6); border-block-end: var(--border-hairline) solid var(--color-border); }
.archive-demo article > span { color: var(--color-accent); font-family: var(--font-editorial); font-size: 2.75rem; line-height: 1; }
.archive-demo h3, .archive-demo p { margin: 0; }
.archive-demo h3 { font-family: var(--font-editorial); font-size: var(--text-h3); }
.archive-demo p { color: var(--color-text-muted); font-size: var(--text-small); }
.archive-demo a { align-self: center; font-size: var(--text-small); font-weight: 700; }

.discovery-section {
  padding-block: var(--space-10);
  overflow: hidden;
  background: var(--brand-charcoal);
  color: var(--brand-paper);
}

.editorial-heading--inverse .editorial-heading__number { color: rgb(255 255 255 / .07); }
.editorial-heading--inverse .eyebrow, .editorial-heading--inverse .editorial-heading__copy { color: #bdb9b0; }

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-4);
}

.discovery-card__poster { aspect-ratio: 2/3; min-height: 12rem; overflow: hidden; background: #272622; }
.discovery-card__poster > img { width: 100%; height: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.discovery-card__poster .poster { height: 100%; min-height: 12rem; border-color: #4d4b46; }
.discovery-card__body { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding-block-start: var(--space-4); }
.discovery-card__index { color: #d48794; font-family: var(--font-editorial); font-size: 1.75rem; line-height: 1; }
.discovery-card h3, .discovery-card p { margin: 0; }
.discovery-card h3 { font-size: .92rem; line-height: 1.25; }
.discovery-card p { margin-block-start: var(--space-2); color: #aaa69f; font-size: .76rem; }

.movie-skeleton {
  aspect-ratio: 2 / 3;
  background: linear-gradient(100deg, #272622 25%, #35332e 40%, #272622 55%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton { to { background-position-x: -200%; } }

.catalog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-7); padding-block-start: var(--space-5); border-block-start: 1px solid #45443f; }
.catalog-note { margin: 0; color: #aaa69f; font-size: var(--text-small); }
.catalog-note--error { color: #e6b1ba; }
.button--light { border-color: #706d65; background: transparent; color: var(--brand-paper); }
.button--light:hover { background: #35332e; }

.catalog-empty { grid-column: 1 / -1; padding: clamp(1.5rem, 5vw, 3rem); border: var(--border-hairline) solid currentColor; }
.catalog-empty h2, .catalog-empty h3 { margin-block: 0 var(--space-3); font-family: var(--font-editorial); font-size: var(--text-h3); }
.catalog-empty p { max-width: 42rem; margin: 0; color: inherit; }
.catalog-empty--error { color: var(--color-error-text); background: var(--color-error-bg); }
.discovery-section .catalog-empty--error { border-color: #875562; background: #351f24; color: #f3d9de; }

.method-list { margin: 0; padding: 0; border-block-start: var(--border-hairline) solid var(--color-border); list-style: none; }
.method-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-7); border-block-end: var(--border-hairline) solid var(--color-border); }
.method-list li > span { color: var(--color-accent); font-family: var(--font-editorial); font-size: 3rem; line-height: .8; }
.method-list h3 { margin-block: 0 var(--space-3); font-family: var(--font-editorial); font-size: var(--text-h3); }
.method-list p { max-width: 36rem; margin: 0; color: var(--color-text-muted); }

.search-hero { padding-block: clamp(3.5rem, 8vw, 7rem); border-block-end: var(--border-hairline) solid var(--color-border); }
.search-hero__grid { display: grid; gap: var(--space-7); }
.search-hero h1 { max-width: 10ch; margin-block-end: var(--space-5); font-size: var(--text-display); }
.search-hero p { max-width: 42rem; color: var(--color-text-muted); font-size: var(--text-body-lg); }
.search-hero__aside { align-self: end; padding-block-start: var(--space-5); border-block-start: var(--border-hairline) solid var(--color-border-strong); font-size: var(--text-small) !important; }
.search-hero__aside span { display: block; margin-block-end: var(--space-4); color: var(--color-accent); font-family: var(--font-editorial); font-size: 3rem; line-height: 1; }
.search-workspace { padding-block-end: var(--space-10); }
.search-console { display: grid; gap: var(--space-5); padding-block: var(--space-7); border-block-end: var(--border-hairline) solid var(--color-border); }
.selection-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--color-text); color: var(--color-bg); }
.selection-bar > div:first-child { display: flex; align-items: center; gap: var(--space-4); }
.selection-bar__count { font-family: var(--font-editorial); font-size: 2.5rem; line-height: 1; }
.selection-bar p { margin: 0; font-size: var(--text-small); font-weight: 700; }
.selection-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.selection-bar .button--text { color: var(--color-bg); }
.search-status { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }
.search-results__list { display: grid; border-block-start: var(--border-hairline) solid var(--color-border); }
.search-movie { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6); border-block-end: var(--border-hairline) solid var(--color-border); }
.search-movie__poster > img, .search-movie__poster .poster { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.search-movie__content { display: grid; gap: var(--space-4); align-items: start; }
.search-movie h3 { margin: 0; font-family: var(--font-editorial); font-size: var(--text-h3); line-height: 1; }
.search-movie__year, .search-movie__original, .search-movie__synopsis { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }
.search-movie__year { margin-block-end: var(--space-2); color: var(--color-accent); font-weight: 700; }
.search-movie__original { margin-block-start: var(--space-2); font-style: italic; }
.search-movie__synopsis { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.search-movie__action { justify-self: start; }
.search-movie--selected { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.search-movie--selected .search-movie__poster { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.search-results__actions { display: flex; justify-content: center; gap: var(--space-4); padding-block-start: var(--space-7); }
.button[hidden] { display: none; }

@media (min-width: 30rem) {
  .discovery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archive-demo article { grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; }
  .search-movie { grid-template-columns: 7rem minmax(0, 1fr); }
}

@media (min-width: 48rem) {
  .cover-story__grid { grid-template-columns: minmax(0, 1fr) minmax(23rem, .9fr); }
  .cover-collage { min-height: 38rem; }
  .editorial-heading { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); }
  .state-switch { justify-self: end; }
  .archive-empty { grid-template-columns: minmax(0, 1fr) auto; }
  .discovery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .method-list li { grid-template-columns: 7rem minmax(0, 1fr); }
  .search-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); }
  .search-movie { grid-template-columns: 9rem minmax(0, 1fr); }
  .search-movie__content { grid-template-columns: minmax(13rem, .65fr) minmax(16rem, 1fr) auto; align-items: center; }
}

@media (min-width: 64.0625rem) {
  .cover-story { min-height: calc(100svh - 4.5rem); }
  .cover-story__grid { min-height: calc(100svh - 12rem); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cover-story__copy { grid-column: 1 / span 7; }
  .cover-collage { grid-column: 8 / -1; min-height: min(42rem, 70vh); }
  .cover-story__copy h1 { font-size: clamp(6rem, 10vw, 9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .movie-skeleton { animation: none; }
}

/* CORTE · workspace */
.brand--corte { font-family: var(--font-editorial); font-size: 1.9rem; font-weight: 700; letter-spacing: .13em; }
.home-intro { padding-block: clamp(3rem, 8vw, 6rem); border-block-end: var(--border-hairline) solid var(--color-border); }
.home-intro__grid { display: grid; gap: var(--space-7); align-items: end; }
.home-intro h1 { max-width: 8ch; margin: 0 0 var(--space-4); font-size: clamp(4.5rem, 12vw, 8.5rem); line-height: .76; letter-spacing: -.055em; }
.home-intro p:not(.eyebrow) { max-width: 38rem; color: var(--color-text-muted); font-size: var(--text-body-lg); }
.home-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.home-intro--compact { padding-block: clamp(2.25rem, 5vw, 4rem); }
.home-intro--compact h1 { font-variation-settings: "opsz" 110; }
.discovery-section--priority { padding-block: clamp(3rem, 7vw, 5.5rem); }
.battle-invite { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--color-surface-subtle); color: var(--color-text); }
.battle-invite__grid { display: grid; gap: var(--space-7); align-items: end; }
.battle-invite h2 { max-width: 11ch; margin: 0; }
.battle-invite p:not(.eyebrow) { max-width: 36rem; color: var(--color-text-muted); font-size: var(--text-body-lg); }
.archive-list { display: block; }
.editor-workbench { display: grid; gap: var(--space-7); align-items: start; }
.editor-main { min-width: 0; }
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block: var(--space-6) var(--space-4); padding-block: var(--space-3); border-block: var(--border-hairline) solid var(--color-border); }
.editor-toolbar p { margin: 0; color: var(--color-text-muted); }
.editor-search { min-width: 0; padding: var(--space-5); border: var(--border-hairline) solid var(--color-border-strong); background: var(--color-surface); }
.editor-search__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.editor-search h2 { margin: 0; font-family: var(--font-editorial); font-size: var(--text-h2); }
.editor-search .search-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin-block: var(--space-5); }
.recent-searches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-4); color: var(--color-text-muted); font-size: var(--text-small); }
.recent-searches button { border: 0; border-block-end: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font: inherit; }
.editor-results { display: grid; max-height: 65vh; overflow: auto; }
.editor-result { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-5); border-block-end: var(--border-hairline) solid var(--color-border); }
.editor-result__poster { width: 100%; aspect-ratio: 2/3; overflow: hidden; background: var(--brand-charcoal); }
.editor-result__poster img, .editor-result__poster .poster { width: 100%; height: 100%; aspect-ratio: 2/3; object-fit: contain; }
.editor-result__copy h3 { margin: 0; font-family: var(--font-editorial); font-size: 1.35rem; line-height: 1; }
.editor-result__copy p { margin: 0 0 .2rem; color: var(--color-accent); font-size: .75rem; }
.editor-result__copy span { display: -webkit-box; overflow: hidden; margin-block-start: .55rem; color: var(--color-text-muted); font-size: .8125rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.editor-result > .button { grid-column: 2; justify-self: start; }
.editor-search-state { padding: var(--space-6) 0; }
.rank-item--functional { transition: opacity .15s, transform .15s; }
.rank-item--functional.is-dragging { opacity: .45; }
.rank-item--functional.is-drop-target { transform: translateY(.25rem); outline: 2px solid var(--color-accent); }
.rank-item__drag { border: 0; background: transparent; cursor: grab; }
.button--danger { color: var(--color-error-text); }
.save-strip { position: sticky; z-index: 3; bottom: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-block-start: var(--space-5); padding: var(--space-3) var(--space-4); border: var(--border-hairline) solid var(--color-border); background: var(--color-bg); font-size: var(--text-small); }
.save-strip[data-state="error"] { background: var(--color-error-bg); color: var(--color-error-text); }
.save-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-success, #487758); }
.undo-bar, .conflict-panel { position: fixed; z-index: 20; right: var(--space-5); bottom: var(--space-5); max-width: 30rem; padding: var(--space-4); border: 1px solid var(--brand-paper); background: var(--color-text); color: var(--color-bg); box-shadow: 0 12px 35px #0004; }
.undo-bar { display: flex; align-items: center; gap: var(--space-5); }
.undo-bar .button--text { color: inherit; }
.conflict-panel h2 { margin-block-start: 0; font-family: var(--font-editorial); }
.is-disabled { pointer-events: none; opacity: .45; }
.discovery-card__add { margin: var(--space-3); }
.rank-empty { display: none; }
.archive-empty[hidden], .undo-bar[hidden], .conflict-panel[hidden] { display: none; }

@media (max-width: 29.99rem) {
  .input--editorial { font-size: clamp(2.35rem, 13vw, 3.6rem); }
  .rank-item { grid-template-columns: 2.25rem 3.25rem minmax(0, 1fr); gap: var(--space-3); }
  .rank-item__drag { width: 2.25rem; }
  .rank-item__position { font-size: 2.35rem; }
}

@media (min-width: 48rem) {
  .home-intro__grid { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); }
  .home-intro__actions { justify-content: flex-end; }
  .battle-invite__grid { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr); }
  .editor-workbench { grid-template-columns: minmax(0, 1.65fr) minmax(20rem, .75fr); }
  .editor-search[hidden] { display: block; }
  [data-search-toggle], [data-search-close] { display: none; }
}

/* Batallas funcionales */
.battle-context { color: var(--color-text-muted); font-size: var(--text-small); }
.battle-setup { min-height: 55vh; padding-block: var(--space-10); }
.battle-setup h1 { max-width: 12ch; font-size: var(--text-display); }
.battle-stage--live { min-height: 70vh; }
.battle-question { margin-block: var(--space-7); text-align: center; }
.battle-question h1 { max-width: none; margin: 0; font-size: clamp(2.6rem, 7vw, 5.5rem); }
.battle-grid--live { max-width: 64rem; }
.battle-card--live { min-height: 18rem; padding: var(--space-4); }
.battle-card--live .poster { width: min(58vw, 16rem); background: #0e0e0d; }
.battle-card--live .poster img { object-fit: contain; }
.battle-card__caption { flex-wrap: wrap; }
.battle-card__caption em { width: 100%; color: var(--color-accent); font-size: var(--text-small); font-style: normal; font-weight: 700; }
.battle-poster-fallback { display: grid; height: 100%; place-items: center; color: var(--color-text-muted); }
.battle-status { max-width: 42rem; margin: var(--space-7) auto 0; color: var(--color-text-muted); text-align: center; }
.battle-result { max-width: 52rem; min-height: 70vh; margin-inline: auto; padding-block: var(--space-9); }
.battle-result > h1 { max-width: none; font-size: var(--text-display); }
.battle-result ol { margin: var(--space-7) 0; padding: 0; border-block-start: 1px solid var(--color-border); list-style: none; }
.battle-result li { display: grid; grid-template-columns: 3rem 3.25rem minmax(0, 1fr); gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
.battle-result li > span { color: var(--color-accent); font-family: var(--font-editorial); font-size: 2rem; }
.battle-result li strong, .battle-result li small { display: block; }
.battle-result li small { color: var(--color-text-muted); }
.battle-result__thumb { width: 3.25rem; aspect-ratio: 2/3; overflow: hidden; background: #0e0e0d; }
.battle-result__thumb img { width: 100%; height: 100%; object-fit: contain; }
.battle-result__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

@media (min-width: 48rem) {
  .battle-card--live { min-height: 31rem; }
  .battle-card--live .poster { width: min(26vw, 18rem); }
}

/* Estudio de exportación */
.export-studio { padding-block: var(--space-7) var(--space-10); }
.export-studio__intro { display: grid; gap: var(--space-5); align-items: end; margin-block-end: var(--space-8); padding-block-end: var(--space-7); border-block-end: var(--border-hairline) solid var(--color-border); }
.export-studio__intro h1 { max-width: 15ch; margin: 0; }
.export-studio__intro > p { max-width: 34rem; margin: 0; color: var(--color-text-muted); }
.export-studio__workspace { display: grid; gap: var(--space-8); align-items: start; }
.export-stage { min-width: 0; }
.export-stage__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.export-stage__head h2 { margin-block-end: var(--space-4); }
.export-dimensions { color: var(--color-text-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.export-canvas-frame { display: grid; min-height: 24rem; place-items: center; padding: clamp(.6rem, 2vw, 1.25rem); overflow: hidden; border: var(--border-hairline) solid var(--color-border-strong); background: var(--color-surface-subtle); }
.export-canvas-frame canvas { display: block; width: auto; max-width: 100%; max-height: min(74vh, 52rem); box-shadow: 0 18px 48px #17171533; }
.export-canvas-frame[data-format="long"] .export-canvas-wrap { width: min(100%, 40rem); }
.export-canvas-frame[data-format="long"] canvas { width: 100%; height: auto; max-height: none; }
.export-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding-block: var(--space-4); }
.export-pagination strong { min-width: 9rem; font-size: var(--text-small); text-align: center; }
.export-status { min-height: 1.6rem; margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }
.export-status[data-state="ready"] { color: var(--color-success-text); }
.export-status[data-state="warning"], .export-status[data-state="error"] { color: var(--color-error-text); }
.export-downloads { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-4); }
.export-panel { border: var(--border-hairline) solid var(--color-border-strong); background: var(--color-surface); }
.export-panel__section { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-5); border-block-end: var(--border-hairline) solid var(--color-border); }
.export-panel__step { margin: 0; color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.export-template-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.export-template { position: relative; min-width: 0; }
.export-template input, .export-choice-grid input, .palette-option input { position: absolute; opacity: 0; }
.export-template > strong, .export-template > small { display: block; }
.export-template > strong { margin-block-start: var(--space-2); font-size: .84rem; }
.export-template > small { color: var(--color-text-muted); font-size: .76rem; }
.export-template > em { display: block; visibility: hidden; min-height: 1rem; margin-block-start: .15rem; color: var(--color-accent); font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.export-template input:checked ~ em { visibility: visible; }
.export-template__preview { display: grid; height: 5.5rem; gap: 4px; padding: .45rem; border: 1px solid var(--color-border); background: var(--brand-paper); color: var(--brand-charcoal); }
.export-template input:checked + .export-template__preview { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.export-template input:focus-visible + .export-template__preview, .export-choice-grid input:focus-visible + span, .palette-option input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.export-template__preview--editorial { grid-template-columns: .6fr 1fr; grid-template-rows: repeat(3, 1fr); }
.export-template__preview--editorial i:first-child { grid-row: 1/-1; font-family: var(--font-editorial); font-size: 1.5rem; font-style: normal; }
.export-template__preview--editorial i:not(:first-child) { border-block-end: 1px solid currentColor; }
.export-template__preview--archive { grid-template-columns: repeat(2, 1fr); }
.export-template__preview--archive i { background: var(--brand-charcoal); }
.export-template__preview--posters { grid-template-columns: repeat(2, 1fr); gap: .45rem; background: var(--brand-charcoal); }
.export-template__preview--posters i { background: var(--brand-paper); }
.export-template__preview--wall { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; background: var(--brand-charcoal); }
.export-template__preview--wall i { position: relative; background: var(--brand-paper); }
.export-template__preview--wall i::after { position: absolute; inset: auto auto 2px 2px; width: 35%; height: 4px; background: var(--brand-wine); content: ""; }
.export-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.export-choice-grid label { position: relative; }
.export-choice-grid span { display: grid; min-height: 4.5rem; place-content: center; padding: var(--space-3); border: 1px solid var(--color-border); font-size: .75rem; text-align: center; }
.export-choice-grid small { display: block; color: var(--color-text-muted); font-size: .65rem; }
.export-choice-grid input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: var(--button-primary-text); }
.export-choice-grid input:checked + span small { color: inherit; }
.palette-options { display: grid; gap: var(--space-2); }
.palette-option { position: relative; }
.palette-option span { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-3); padding: .45rem; border: 1px solid var(--color-border); font-size: var(--text-small); }
.palette-option i { display: block; width: 3.5rem; height: 1.75rem; border: 6px solid var(--swatch-bg); background: linear-gradient(90deg,var(--swatch-text) 0 60%,var(--swatch-accent) 60%); }
.palette-option input:checked + span { border: 2px solid var(--color-accent); }
.check-row { display: flex; min-height: var(--size-target-min); align-items: center; gap: var(--space-3); font-size: var(--text-small); }
.check-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); }
.export-credit { padding: var(--space-5); background: var(--brand-charcoal); color: var(--brand-paper); font-size: .75rem; }
.export-credit p { margin-block: var(--space-2); color: #bdb8ae; }
.export-error { max-width: 30rem; padding: var(--space-6); background: var(--color-error-bg); color: var(--color-error-text); }

@media (min-width: 48rem) {
  .export-studio__intro { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); }
}
@media (min-width: 64.0625rem) {
  .export-studio__workspace { grid-template-columns: minmax(0, 1.45fr) minmax(22rem, .55fr); }
  .export-stage { position: sticky; top: 1rem; }
}

/* Phase 6: adaptive editorial export studio */
.export-history { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-4); border-block-end: var(--border-hairline) solid var(--color-border); background: var(--color-surface-subtle); }
.button--compact { min-height: 2.35rem; padding: .55rem .75rem; font-size: .75rem; }
.export-tools { margin: 0; border-block-end: var(--border-hairline) solid var(--color-border); }
.export-tools > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 3.4rem; padding: var(--space-3) var(--space-5); cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.export-tools > summary::-webkit-details-marker { display: none; }
.export-tools > summary::after { margin-inline-start: auto; content: "+"; color: var(--color-accent); font-family: var(--font-editorial); font-size: 1.25rem; }
.export-tools[open] > summary::after { content: "−"; }
.export-tools > summary span { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; background: var(--brand-charcoal); color: var(--brand-paper); font-family: var(--font-editorial); font-size: .9rem; }
.export-tools__body { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
.export-tools textarea.input { resize: vertical; line-height: 1.35; }
.range-field { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; font-size: .78rem; font-weight: 700; }
.range-field output { color: var(--color-text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.range-field input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--color-accent); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; }
.segmented legend { width: 100%; margin-block-end: var(--space-2); font-size: .75rem; font-weight: 700; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: grid; min-height: 2.7rem; place-items: center; padding: .45rem; border: 1px solid var(--color-border); font-size: .68rem; text-align: center; }
.segmented label + label span { border-inline-start: 0; }
.segmented input:checked + span { background: var(--color-text); color: var(--color-bg); }
.segmented input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.segmented--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.export-layout-summary { margin: 0; padding-block: var(--space-3); border-block: var(--border-hairline) solid var(--color-border); color: var(--color-text-muted); font-size: .75rem; line-height: 1.45; }
.export-layout-manual { display: grid; gap: var(--space-4); padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--color-accent); }
.export-layout-manual[hidden] { display: none; }
.export-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.export-color-grid label { display: grid; gap: var(--space-2); color: var(--color-text-muted); font-size: .7rem; font-weight: 700; }
.export-color-grid input { width: 100%; height: 2.75rem; padding: .2rem; border: 1px solid var(--color-border-strong); background: transparent; }
.export-canvas-frame[data-invalid="true"] { border-color: var(--color-error-text); }
.export-canvas-frame[aria-busy="true"] { cursor: progress; }
.export-panel .field__help { margin: 0; }

/* Phase 8: social export flow and preview-only safe zones */
.export-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--space-7); padding: 0; overflow: hidden; border: var(--border-hairline) solid var(--color-border-strong); list-style: none; background: var(--color-border); }
.export-flow li { display: flex; min-width: 0; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); color: var(--color-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.export-flow span { color: var(--color-accent); font-family: var(--font-editorial); font-size: 1rem; }
.export-panel__section h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.export-panel__section--custom { padding: 0; gap: 0; }
.export-panel__section--custom > .export-panel__step { padding: var(--space-5) var(--space-5) 0; }
.export-panel__section--custom > h2 { padding: var(--space-2) var(--space-5) var(--space-4); }
.export-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.export-preset-grid label { position: relative; min-width: 0; }
.export-preset-grid input { position: absolute; opacity: 0; }
.export-preset-grid span { display: grid; min-height: 4.7rem; align-content: center; gap: .18rem; padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-surface); }
.export-preset-grid strong { font-size: .75rem; }
.export-preset-grid small { color: var(--color-text-muted); font-size: .63rem; font-variant-numeric: tabular-nums; }
.export-preset-grid input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: var(--button-primary-text); }
.export-preset-grid input:checked + span small { color: inherit; }
.export-preset-grid input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.check-row--guide { align-items: start; padding-block-start: var(--space-2); border-block-start: var(--border-hairline) solid var(--color-border); }
.export-canvas-wrap { position: relative; display: grid; width: max-content; max-width: 100%; place-items: center; overflow: hidden; line-height: 0; }
.export-canvas-wrap canvas { grid-area: 1 / 1; }
.export-safe-guide { position: absolute; z-index: 2; inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); border: 2px dashed rgb(255 250 241 / .92); box-shadow: 0 0 0 100vmax rgb(120 47 58 / .24); pointer-events: none; }
.export-safe-guide span { position: absolute; top: -1.45rem; left: 0; padding: .28rem .4rem; background: rgb(23 23 21 / .84); color: #fffaf1; font-family: var(--font-sans); font-size: clamp(.48rem, 1.2vw, .68rem); font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.export-safe-guide[hidden] { display: none; }
.export-recommendation { margin: var(--space-2) 0 0; padding: var(--space-3) 0; border-block: var(--border-hairline) solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-small); }
.export-download-panel { display: grid; gap: var(--space-4); margin-block-start: var(--space-6); padding: var(--space-5); border: var(--border-hairline) solid var(--color-border-strong); background: var(--color-surface-subtle); }
.export-download-panel h2 { margin: var(--space-2) 0; }
.export-download-panel p:not(.export-panel__step) { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }
.export-download-panel .export-downloads { margin: 0; }

@media (max-width: 47.99rem) {
  .export-studio { padding-block-start: var(--space-5); }
  .export-studio__intro { margin-block-end: var(--space-6); }
  .export-canvas-frame { min-height: 18rem; padding: .45rem; }
  .export-canvas-frame canvas { max-height: 64vh; }
  .export-downloads .button { flex: 1 1 100%; }
  .export-panel { margin-inline: 0; }
  .export-tools > summary { min-height: 3.75rem; }
  .export-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-download-panel { padding: var(--space-4); }
}

@media (min-width: 23rem) {
  .export-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 22.99rem) {
  .export-template { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--space-3); align-items: start; }
  .export-template__preview { grid-row: 1 / 4; height: 4.75rem; }
  .export-template > strong { margin-block-start: 0; }
}

@media (max-width: 64rem) {
  .export-panel { order: -1; }
}

@media (min-width: 64.0625rem) {
  .export-studio__workspace { grid-template-columns: minmax(0, 1.3fr) minmax(23rem, .7fr); }
  .export-panel { max-height: calc(100vh - 2rem); overflow-y: auto; scrollbar-gutter: stable; }
}

/* Phase 7: cinematic home and purposeful motion */
.home-page {
  background: var(--color-bg);
}

.site-header--cinematic {
  position: sticky;
  inset-block-start: 0;
  border-color: rgb(242 238 230 / .18);
  background: rgb(17 17 15 / .94);
  color: var(--brand-paper);
  backdrop-filter: none;
}

.site-header--cinematic .nav-panel {
  border-color: #4d4b46;
  background: #171715;
  color: var(--brand-paper);
}

.site-header--cinematic .primary-nav a {
  border-color: #4d4b46;
}

.site-header--cinematic .theme-control { color: #f2eee6; }
.site-header--cinematic .theme-control__select { border-color: #827f78; background: #232320; color: #f2eee6; }

.site-header--cinematic .primary-nav a[aria-current="page"]::after {
  color: #e098a4;
}

.button--glass {
  border-color: rgb(242 238 230 / .45);
  background: rgb(17 17 15 / .32);
  color: var(--brand-paper);
  backdrop-filter: blur(10px);
}

.button--glass:hover {
  border-color: var(--brand-paper);
  background: rgb(242 238 230 / .12);
}

.cinema-hero {
  position: relative;
  display: grid;
  min-height: clamp(38rem, 84svh, 56rem);
  overflow: hidden;
  background: #161613;
  color: var(--brand-paper);
  isolation: isolate;
}

.cinema-hero__media,
.cinema-hero__shade {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.cinema-hero__media {
  background:
    linear-gradient(135deg, #3f2026, #171715 58%),
    repeating-linear-gradient(90deg, transparent 0 12%, rgb(255 255 255 / .025) 12% 12.15%);
}

.cinema-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 28%;
  opacity: .72;
  transform: scale(1.015);
  transition: opacity var(--duration-base) var(--ease-enter), scale var(--duration-slow) var(--ease-enter);
}

.cinema-hero__media img.is-changing {
  opacity: .12;
  transform: scale(1.04);
}

.cinema-hero__shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(9 9 8 / .96) 0%, rgb(9 9 8 / .78) 46%, rgb(9 9 8 / .18) 82%),
    linear-gradient(0deg, rgb(9 9 8 / .9) 0%, transparent 45%, rgb(9 9 8 / .24) 100%);
}

.cinema-hero__layout {
  display: grid;
  min-height: inherit;
  gap: var(--space-8);
  align-content: center;
  padding-block: clamp(4rem, 10vw, 8rem) 7rem;
}

.cinema-hero__copy {
  max-width: 51rem;
}

.cinema-hero__eyebrow,
.cinema-hero__meta {
  color: #d5d0c7;
}

.cinema-hero h1 {
  max-width: 10ch;
  min-height: 1.6em;
  margin-block-end: var(--space-6);
  color: #fff;
  font-size: clamp(3.75rem, 12vw, 8.75rem);
  font-variation-settings: "opsz" 120;
  letter-spacing: -.055em;
  line-height: .8;
  text-shadow: 0 .08em .6em rgb(0 0 0 / .24);
}

.cinema-hero__dek {
  display: -webkit-box;
  max-width: 40rem;
  min-height: 3.1em;
  margin-block-end: var(--space-4);
  overflow: hidden;
  color: #e2ddd4;
  font-size: var(--text-body-lg);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cinema-hero__meta {
  margin-block-end: var(--space-7);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.cinema-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cinema-hero__actions .button {
  min-height: 3.25rem;
}

.cinema-hero__discover {
  display: inline-flex;
  min-height: var(--size-target-min);
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: var(--space-2);
  color: #e2ddd4;
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
}

.cinema-hero__discover span {
  color: #e098a4;
  transition: translate var(--duration-base) var(--ease-standard);
}

.cinema-hero__discover:hover span {
  translate: 0 var(--motion-distance-sm);
}

.cinema-hero__edition {
  display: flex;
  align-self: end;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgb(242 238 230 / .32);
}

.cinema-hero__edition-label {
  color: #d5d0c7;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cinema-hero__edition-label b {
  margin-inline-start: var(--space-2);
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 1.25rem;
}

.cinema-hero__controls,
.popular-program__controls {
  display: flex;
  gap: var(--space-2);
}

.cinema-hero__rail {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: space-around;
  border-block-start: 1px solid rgb(242 238 230 / .2);
  background: rgb(10 10 9 / .48);
  color: #aaa69e;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.cinema-hero__rail i {
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: #c76d7c;
}

.popular-program {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

.popular-program__head,
.home-section-heading {
  display: grid;
  gap: var(--space-5);
  align-items: end;
  margin-block-end: clamp(2rem, 5vw, 4rem);
}

.popular-program__head h2,
.home-section-heading h2 {
  margin: 0;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  letter-spacing: -.04em;
}

.popular-program__head > p,
.home-section-heading > div:last-child > p {
  max-width: 34rem;
  margin: 0;
  color: var(--color-text-muted);
}

.popular-program__toolbar,
.popular-program__footer {
  display: flex;
  min-height: var(--size-target-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.popular-program__toolbar {
  margin-block-end: var(--space-5);
}

.popular-program .catalog-note {
  margin: 0;
  color: var(--color-text-muted);
}

.popular-program__viewport {
  display: grid;
  grid-auto-columns: minmax(14rem, 78vw);
  grid-auto-flow: column;
  gap: var(--space-5);
  padding-block: var(--space-2) var(--space-6);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--space-2);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.popular-program__viewport::-webkit-scrollbar {
  display: none;
}

.program-card {
  position: relative;
  min-width: 0;
  scroll-snap-align: start;
}

.program-card__feature {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--color-surface);
  color: inherit;
  text-align: start;
}

.program-card__poster {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.program-card__poster > img,
.program-card__poster > .poster {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

.program-card__feature:hover img,
.program-card[data-featured] .program-card__feature img {
  transform: scale(1.025);
}

.program-card[data-featured] .program-card__feature::after {
  position: absolute;
  inset: 0;
  border: 3px solid #e098a4;
  content: "";
  pointer-events: none;
}

.program-card__index {
  position: absolute;
  inset: auto auto var(--space-4) var(--space-4);
  display: grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  background: var(--color-surface-subtle);
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: 1.4rem;
  line-height: 1;
}

.program-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  min-height: 6.5rem;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.program-card h3,
.program-card p {
  margin: 0;
}

.program-card h3 {
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-card p {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: .75rem;
}

.program-card__add {
  min-height: var(--size-target-min);
  padding: .45rem .65rem;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .72rem;
  font-weight: 700;
}

.program-card__add:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.program-card__add:disabled {
  border-color: transparent;
  color: var(--color-text-muted);
}

.program-card--skeleton .movie-skeleton {
  min-height: 0;
  aspect-ratio: 2 / 3;
}

.program-card--skeleton::after {
  display: block;
  min-height: 6.5rem;
  border-block-end: 1px solid var(--color-border);
  content: "";
}

.popular-program__progress {
  position: relative;
  width: min(30rem, 72vw);
  height: 2px;
  overflow: hidden;
  background: var(--color-surface-subtle);
}

.popular-program__progress i {
  display: block;
  width: var(--gallery-progress, 0%);
  height: 100%;
  background: var(--color-accent);
  transition: width var(--duration-fast) linear;
}

.popular-program__footer {
  margin-block-start: var(--space-4);
}

.home-archive {
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background: var(--color-bg);
  color: var(--color-text);
}

.home-section-heading > div:last-child {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.home-section-heading > div:last-child > p {
  color: var(--color-text-muted);
}

.ranking-shelf {
  display: grid;
  gap: var(--space-8);
}

.ranking-shelf[hidden] {
  display: none;
}

.ranking-card {
  min-width: 0;
}

.ranking-card__visual {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #232320;
  color: var(--brand-paper);
  text-decoration: none;
}

.ranking-card__posters {
  display: grid;
  height: 100%;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.ranking-card__posters img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  transition: transform var(--duration-base) var(--ease-standard);
}

.ranking-card__visual:hover img {
  transform: scale(1.02);
}

.ranking-card__placeholder {
  display: grid;
  height: 100%;
  place-items: center;
  background:
    linear-gradient(135deg, transparent 45%, #782f3a 45% 62%, transparent 62%),
    #232320;
}

.ranking-card__placeholder span {
  font-family: var(--font-editorial);
  font-size: clamp(2.5rem, 9vw, 5rem);
  letter-spacing: .1em;
}

.ranking-card__number {
  position: absolute;
  inset: auto auto var(--space-4) var(--space-4);
  color: #fff;
  font-family: var(--font-editorial);
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  line-height: .7;
  text-shadow: 0 .05em .45em #000;
}

.ranking-card__body {
  padding-block-start: var(--space-5);
}

.ranking-card__body h3 {
  margin-block-end: var(--space-2);
  font-family: var(--font-editorial);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.ranking-card__body h3 a {
  text-decoration: none;
}

.ranking-card__body > p {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.ranking-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.archive-empty--editorial {
  min-height: 24rem;
  background:
    linear-gradient(90deg, transparent 0 74%, rgb(120 47 58 / .07) 74%),
    var(--color-surface);
}

.archive-empty--editorial .archive-empty__mark {
  margin-block-end: var(--space-6);
  font-size: clamp(5rem, 16vw, 9rem);
}

.battle-editorial {
  padding-block: clamp(4rem, 10vw, 9rem);
  overflow: hidden;
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.battle-editorial__layout {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

.battle-editorial__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  min-height: 18rem;
}

.battle-editorial__visual > span {
  display: grid;
  aspect-ratio: 2 / 3;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-accent);
  font-family: var(--font-editorial);
  font-size: clamp(3rem, 10vw, 6rem);
}

.battle-editorial__visual > i {
  color: var(--color-accent);
  font-family: var(--font-editorial);
  font-size: clamp(2rem, 5vw, 4rem);
  font-style: italic;
}

.battle-editorial__visual figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: #232320;
}

.battle-editorial__visual figure > img,
.battle-editorial__visual figure > .poster {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.battle-editorial__visual figcaption {
  position: absolute;
  inset: auto auto var(--space-3) var(--space-3);
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 2.5rem;
  text-shadow: 0 .1em .35em #000;
}

.battle-editorial__copy h2 {
  max-width: 10ch;
  margin-block-end: var(--space-6);
  color: var(--color-text);
  font-size: clamp(3rem, 8vw, 6.5rem);
  letter-spacing: -.045em;
  line-height: .85;
}

.battle-editorial__copy > p:not(.eyebrow) {
  max-width: 38rem;
  margin-block-end: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-body-lg);
}

.home-footer { border-color: var(--color-border); background: var(--color-bg); color: var(--color-text); }

.toast__link {
  flex: none;
  font-size: var(--text-small);
  font-weight: 700;
}

.motion-ready [data-reveal-ready]:not(.is-visible) {
  will-change: opacity, transform;
}

.editor-export-cta { position: relative; min-width: 9.5rem; }
.editor-export-cta.is-loading { cursor: progress; }
.editor-export-cta.is-loading::after { width: .8rem; height: .8rem; margin-inline-start: .45rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: corte-spin .6s linear infinite; content: ""; }
@keyframes corte-spin { to { transform: rotate(1turn); } }

/* Existing workspaces receive restrained feedback without changing their logic. */
.rank-item--functional {
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-base) var(--ease-enter),
    background-color var(--duration-fast) var(--ease-standard);
}

.rank-item--functional:focus-within,
.rank-item--functional:hover {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.battle-card--live {
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-base) var(--ease-enter);
}

.battle-card--live:hover {
  transform: translateY(calc(-1 * var(--motion-distance-sm)));
}

.export-tools > summary {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.export-tools > summary:hover {
  background: var(--color-surface-subtle);
}

@media (max-width: 29.99rem) {
  .editor-actions { width: 100%; }
  .editor-actions .button { flex: 1 1 0; }
  .cinema-hero__actions .button {
    flex: 1 1 100%;
  }

  .cinema-hero__discover {
    margin-inline-start: 0;
  }

  .popular-program__toolbar {
    align-items: end;
  }

  .popular-program__controls .button {
    width: 2.75rem;
  }

  .program-card__body {
    grid-template-columns: 1fr;
  }

  .program-card__add {
    justify-self: start;
  }

  .toast {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .toast > [data-toast-message] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 30rem) {
  .popular-program__viewport {
    grid-auto-columns: minmax(14rem, 46vw);
  }
}

@media (min-width: 48rem) {
  .cinema-hero__layout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .cinema-hero__copy {
    align-self: center;
  }

  .cinema-hero__edition {
    min-width: 13rem;
  }

  .popular-program__head,
  .home-section-heading {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  }

  .popular-program__viewport {
    grid-auto-columns: minmax(14rem, 31vw);
  }

  .ranking-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .battle-editorial__layout {
    grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.1fr);
  }
}

@media (min-width: 64.0625rem) {
  .site-header--cinematic .primary-nav a[aria-current="page"]::after {
    background: #d67b8b;
  }

  .cinema-hero__layout {
    grid-template-columns: minmax(0, 8.5fr) minmax(12rem, 3.5fr);
  }

  .popular-program__viewport {
    grid-auto-columns: minmax(13rem, calc((100% - (4 * var(--space-5))) / 5));
  }

  .battle-editorial__visual {
    gap: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-hero__media img,
  .cinema-hero__discover span,
  .program-card__poster > img,
  .program-card__poster > .poster,
  .ranking-card__posters img,
  .popular-program__progress i,
  .battle-card--live {
    transform: none;
    translate: 0;
  }

}