/* Mixing / estudio: película controlada por scroll y secciones de servicio. */

.studio-film-page {
  --studio-line: rgba(240, 240, 235, .16);
  --studio-muted: #a3a39c;
  --studio-panel: #0d0d0c;
  background: var(--black);
  color: var(--paper);
}

/* Cabecera legible sobre el vídeo: sin fusión "difference" y con un fundido oscuro. */
.studio-film-page:not(.nav-open) .site-header {
  mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(5, 5, 5, .82) 0%, rgba(5, 5, 5, .45) 60%, rgba(5, 5, 5, 0) 100%);
}

/* ---------- Película: modo base (sin JS o con movimiento reducido) ---------- */

.film { position: relative; background: var(--black); }
.film-stage { display: none; }

.film-chapter {
  position: relative;
  min-height: 100svh;
  background: var(--black) var(--poster) center / cover no-repeat;
}
.film-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .35) 48%, rgba(5, 5, 5, .1) 100%);
}
@media (max-aspect-ratio: 4/5) {
  .film-chapter { background-image: var(--poster-m); }
}

.film-frame {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: calc(var(--header-h) + 2rem) var(--pad) clamp(2.5rem, 7vh, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3rem;
}

.film-copy { max-width: 62rem; text-shadow: 0 .15rem 1.6rem rgba(5, 5, 5, .7); }
.film-copy .button { text-shadow: none; }
.film-copy-right { margin-left: auto; text-align: right; }
.film-copy-right ul { justify-content: flex-end; }
.film-copy-statement { display: none; }

.film-title {
  margin: 0;
  font-size: clamp(3.6rem, 10.5vw, 10.5rem);
  line-height: .8;
  letter-spacing: -.08em;
  text-transform: uppercase;
  font-weight: 950;
}
.film-title span { color: var(--red); }
.film-lede {
  max-width: 34ch;
  margin: 1.6rem 0 0;
  font-size: clamp(1.02rem, 1.35vw, 1.3rem);
  line-height: 1.35;
  text-wrap: pretty;
}
.film-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.film-copy-right .film-actions { justify-content: flex-end; }

.film-copy-statement p {
  margin: 0;
  text-shadow: 0 .2rem 2.4rem rgba(5, 5, 5, .75);
  font-size: clamp(2.6rem, 6.6vw, 6.6rem);
  line-height: .86;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 950;
}

.film-index {
  display: block;
  margin-bottom: .6rem;
  color: var(--red);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.film-copy-service h2 {
  margin: 0;
  font-size: clamp(4.4rem, 13vw, 13rem);
  line-height: .78;
  letter-spacing: -.085em;
  text-transform: uppercase;
  font-weight: 950;
}
.film-copy-service p {
  max-width: 40ch;
  margin: 1.4rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.film-copy-right p { margin-left: auto; }
.film-copy-service ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.film-copy-service li {
  padding: .5rem .75rem;
  border: 1px solid rgba(240, 240, 235, .35);
  background: rgba(5, 5, 5, .35);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Película: modo en directo ---------- */

.film.is-live .film-stage {
  display: block;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--black);
}
.film.is-live .film-chapters { position: relative; z-index: 2; margin-top: -100svh; }
.film.is-live .film-chapter { min-height: 0; height: 170svh; background: none; }
.film.is-live .film-chapter::before { content: none; }
.film.is-live .film-chapter-hero { height: 240svh; }
.film.is-live .film-chapter-last { height: 190svh; }
.film.is-live .film-frame {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100svh;
  min-height: 0;
  display: block;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}
.film.is-live .film-copy {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(3rem, 9vh, 6rem);
  opacity: 0;
  will-change: opacity, transform;
}
.film.is-live .film-copy.is-active { pointer-events: auto; }
.film.is-live .film-copy-right { left: auto; }
.film.is-live .film-copy-statement { display: block; }

.film-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.film-layer:first-child { opacity: 1; }
.film-layer img,
.film-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-layer video { opacity: 0; transition: opacity .35s linear; }
.film-layer.is-ready video { opacity: 1; }

.film-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .72) 26%, rgba(5, 5, 5, .3) 50%, rgba(5, 5, 5, 0) 70%),
    radial-gradient(120% 90% at 50% 40%, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .55) 100%);
  pointer-events: none;
}

/* Lienzo con grano (studio.js): se muestra encima del póster en cuanto tiene fotograma. */
.film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.film-layer.has-frame .film-canvas { opacity: 1; }
.film.has-grain .film-layer video,
.film.has-grain .film-layer.is-ready video { opacity: 0; }

.film-progress {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 1.25rem;
  z-index: 2;
  height: 2px;
  background: rgba(240, 240, 235, .14);
}
.film-progress i {
  display: block;
  height: 100%;
  background: var(--red);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- Manifiesto ---------- */

.studio-manifesto {
  padding: clamp(6rem, 16vh, 11rem) var(--pad) clamp(4rem, 10vh, 7rem);
  border-top: 1px solid var(--studio-line);
}
.manifesto-text {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.2rem, 5.6vw, 6rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-weight: 950;
  text-wrap: balance;
}
.manifesto-text .word { opacity: .2; transition: opacity .7s var(--ease); }
.manifesto-text .word.is-on { opacity: 1; }
.manifesto-text .word-red { color: var(--red); }
.manifesto-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-top: clamp(3.5rem, 9vh, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--studio-line);
}
.manifesto-foot p {
  max-width: 46ch;
  margin: 0;
  color: var(--studio-muted);
  font-size: 1.05rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.manifesto-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.manifesto-facts dt {
  color: var(--studio-muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.manifesto-facts dd {
  margin: .4rem 0 0;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 950;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* ---------- Cabeceras de sección ---------- */

.studio-section-head { max-width: 62rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.studio-section-head h2 {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 7.2rem);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
  font-weight: 950;
}
.studio-section-head p {
  max-width: 50ch;
  margin: 1.4rem 0 0;
  color: var(--studio-muted);
  font-size: 1.05rem;
  text-wrap: pretty;
}

/* ---------- Tarifas ---------- */

.studio-pricing { padding: clamp(5rem, 12vh, 8rem) var(--pad); }
.studio-price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}
.studio-price {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--studio-line);
  background: var(--studio-panel);
}
.studio-price-main {
  grid-row: span 2;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.studio-price-tag {
  margin: 0;
  color: var(--red);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.studio-price h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  font-weight: 950;
}
.studio-price-main h3 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); max-width: 10ch; }
.studio-price-amount { display: flex; align-items: baseline; gap: .6rem; margin: auto 0 0; }
.studio-price-amount strong {
  font-size: clamp(3.6rem, 7vw, 6.5rem);
  line-height: .8;
  letter-spacing: -.08em;
  font-weight: 950;
}
.studio-price-main .studio-price-amount strong { font-size: clamp(6rem, 13vw, 12rem); }
.studio-price-amount span {
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.studio-price > p:not([class]) { max-width: 42ch; margin: 0; color: var(--studio-muted); line-height: 1.45; }
.studio-price-main > p:not([class]) { color: #4b4b46; }
.studio-price .button { align-self: flex-start; }

.studio-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  align-self: flex-start;
  padding: .35rem 0;
  border-bottom: 1px solid currentColor;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .3s, gap .3s var(--ease);
}
.studio-link::after {
  content: "";
  width: .45rem;
  height: .45rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.studio-link:hover, .studio-link:focus-visible { color: var(--red); gap: 1rem; }

/* ---------- Trabajos ---------- */

.studio-works {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(4rem, 10vh, 7rem) var(--pad);
  background: var(--black);
}
.studio-works-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}
.studio-works-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.studio-works.has-frame .studio-works-canvas { opacity: .6; }
.studio-works.has-frame .studio-works-video { opacity: 0; }
.studio-works::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .55) 45%, rgba(5, 5, 5, .1) 100%);
}
.studio-works-copy { position: relative; z-index: 2; max-width: 60rem; }
.studio-works-copy h2 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .84;
  letter-spacing: -.075em;
  text-transform: uppercase;
  font-weight: 950;
}
.studio-works-copy p { max-width: 38ch; margin: 1.4rem 0 2rem; color: #d2d2cc; font-size: 1.05rem; }

/* ---------- Proceso ---------- */

.studio-process { padding: clamp(5rem, 12vh, 8rem) var(--pad); }
.studio-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.studio-steps li {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--studio-line);
  counter-increment: step;
}
.studio-steps li::before {
  content: "0" counter(step);
  position: absolute;
  top: -2px;
  left: 0;
  padding-top: .9rem;
  border-top: 2px solid var(--red);
  width: 3rem;
  color: var(--red);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.studio-steps h3 {
  margin: 1.6rem 0 0;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 950;
}
.studio-steps p { max-width: 34ch; margin: 1rem 0 0; color: var(--studio-muted); line-height: 1.5; }

/* ---------- FAQ ---------- */

.studio-faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(5rem, 12vh, 8rem) var(--pad);
  border-top: 1px solid var(--studio-line);
}
.studio-faq .studio-section-head { margin: 0; }
.studio-faq-list details { border-bottom: 1px solid var(--studio-line); }
.studio-faq-list details:first-child { border-top: 1px solid var(--studio-line); }
.studio-faq-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.studio-faq-list summary::-webkit-details-marker { display: none; }
.studio-faq-list summary span { position: relative; width: 1.25rem; height: 1.25rem; }
.studio-faq-list summary span::before,
.studio-faq-list summary span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--red);
  transition: transform .4s var(--ease);
}
.studio-faq-list summary span::after { transform: rotate(90deg); }
.studio-faq-list details[open] summary span::after { transform: rotate(0deg); }
.studio-faq-list details p { max-width: 60ch; margin: 0 0 1.6rem; color: var(--studio-muted); line-height: 1.55; }

/* ---------- Cierre ---------- */

.studio-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
  padding: clamp(6rem, 14vh, 10rem) var(--pad) clamp(4rem, 10vh, 6rem);
  border-top: 1px solid var(--studio-line);
}
.studio-cta h2 {
  margin: 0;
  font-size: clamp(2.8rem, 7.2vw, 7.6rem);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
  font-weight: 950;
}
.studio-cta h2 span { color: var(--red); }
.studio-cta-copy > p { max-width: 42ch; margin: 1.5rem 0 0; color: var(--studio-muted); font-size: 1.05rem; }
.studio-contact-list { margin: 0; padding: 0; list-style: none; }
.studio-contact-list li { border-top: 1px solid var(--studio-line); }
.studio-contact-list li:last-child { border-bottom: 1px solid var(--studio-line); }
.studio-contact-list a { display: grid; gap: .3rem; padding: 1rem 0; transition: color .3s; }
.studio-contact-list a:hover, .studio-contact-list a:focus-visible { color: var(--red); }
.studio-contact-list span {
  color: var(--studio-muted);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.studio-contact-list strong { font-size: clamp(1rem, 1.5vw, 1.25rem); overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .manifesto-foot,
  .studio-faq,
  .studio-cta { grid-template-columns: minmax(0, 1fr); }
  .studio-price-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-price-main { grid-row: auto; }
  .studio-steps { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

@media (max-width: 600px) {
  .film-title { font-size: clamp(2.4rem, 13.4vw, 5.4rem); }
  .film-copy-service h2 { font-size: clamp(2.6rem, 13.4vw, 6rem); }
  .film-copy-statement p { font-size: clamp(2.2rem, 11.5vw, 3.6rem); }
  .film-copy-right { text-align: left; margin-left: 0; }
  .film-copy-right p { margin-left: 0; }
  .film-copy-right ul,
  .film-copy-right .film-actions { justify-content: flex-start; }
  .film.is-live .film-copy-right { left: var(--pad); }
  .film.is-live .film-copy { bottom: clamp(2.75rem, 7vh, 4rem); }
  .film-actions .button { flex: 1 1 8rem; }
  .manifesto-facts { grid-template-columns: minmax(0, 1fr); }
  .studio-price-main .studio-price-amount strong { font-size: clamp(5rem, 28vw, 7rem); }
  .studio-works { min-height: 80svh; }
  .studio-works::after { background: linear-gradient(0deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .5) 55%, rgba(5, 5, 5, .2) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-text .word { opacity: 1; transition: none; }
  .studio-link { transition: none; }
}