.escena-pin {
  position: relative;
}

.escena {
  position: sticky;
  top: 0;
  height: 100svh;
  --escena-extra: 0px;
  display: flex;

  align-items: flex-end;
  background: var(--p-noche);
  color: var(--p-paper);
  padding-top: calc(var(--p-nav-h) + var(--p-s-8));
  padding-bottom: calc(var(--p-s-20) + var(--p-s-8));
  overflow: hidden;
}

@supports (height: 100lvh) {
  .escena {
    height: 100lvh;
    --escena-extra: calc(100lvh - 100svh);
  }
}
.escena > .carril { margin-bottom: var(--escena-extra, 0px) }

.escena-medio {
  position: absolute;
  inset: 0;
  z-index: var(--p-z-fondo);
  pointer-events: none;

}

.escena-medio-video { transition: opacity .55s var(--p-ease-suave) }
.escena-medio-video.costura { opacity: 0 }

.escena-medio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.escena-medio-relleno {
  background:
    radial-gradient(64% 78% at 82% 84%, color-mix(in oklab, var(--p-paper) 13%, transparent) 0%, transparent 70%),
    radial-gradient(52% 64% at 96% 46%, color-mix(in oklab, var(--p-paper) 7%, transparent) 0%, transparent 74%),
    var(--p-noche-2);

  animation: escena-deriva 44s var(--p-ease-suave) infinite alternate;
}
@keyframes escena-deriva {
  from { transform: scale(1.06) translate3d(0, 0, 0) }
  to   { transform: scale(1.14) translate3d(-2.5%, -1.5%, 0) }
}

.escena-velo {
  position: absolute;
  inset: 0;
  z-index: var(--p-z-fondo);
  pointer-events: none;
  background:
    radial-gradient(64% 54% at 50% 42%, rgba(6,8,14,.90) 0%, rgba(6,8,14,.66) 52%, rgba(6,8,14,.10) 100%),

    linear-gradient(to top,
                    var(--p-pilares-fondo-plano) 0%,
                    var(--p-pilares-fondo-plano) 8%,
                    rgba(8,8,10,.90) 15%,
                    rgba(8,8,10,.68) 24%,
                    rgba(8,8,10,.40) 34%,
                    rgba(8,8,10,.16) 45%,
                    rgba(8,8,10,0) 56%),
    linear-gradient(to bottom, rgba(6,8,14,.82) 0%, rgba(6,8,14,.30) 10%, rgba(6,8,14,0) 20%);
}

.escena > .carril { position: relative; z-index: var(--p-z-contenido) }

.escena-carril { max-width: none }
.escena-texto  {

  max-width: 56%;

  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(120px, 18vh, 240px);

  container-type: inline-size;
}

.escena-titular {
  font-size: var(--p-t-escena);
  line-height: var(--p-lh-escena);

  margin-bottom: var(--p-rueda-cola);
}

.escena-titular .linea { display: block; white-space: nowrap }

.escena-rueda {
  position: relative;
  display: inline-block;
  vertical-align: bottom;

  overflow: visible;

  clip-path: inset(0 -0.35em calc(-1 * var(--p-rueda-cola)) -0.35em);

  height: calc(var(--p-lh-escena) * 1em);
}

.escena-rueda-medida {
  display: block;
  visibility: hidden;
  white-space: nowrap;
  height: calc(var(--p-lh-escena) * 1em);
}

.escena-rueda-pila {
  position: absolute;
  left: 0; top: 0;
  display: block;

  transform: translateY(calc(var(--n, 0) * -1 * (var(--p-lh-escena) * 1em + var(--p-rueda-cola))));
  transition: transform var(--p-rueda-cambio) var(--p-ease-tela);
}
.escena-rueda b {
  display: block;

  height: calc(var(--p-lh-escena) * 1em + var(--p-rueda-cola));
  line-height: var(--p-lh-escena);
  font-weight: inherit;
  white-space: nowrap;

  color: var(--p-oro);
  background: linear-gradient(180deg, var(--p-oro-claro) 0%, var(--p-oro) 62%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.js .escena-parte { opacity: 0; transform: translateY(20px);
  transition: opacity var(--p-m-escena) var(--p-ease),
              transform var(--p-m-escena) var(--p-ease) }
.js .escena.dentro .escena-parte { opacity: 1; transform: none }

.js .escena-medio {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--p-m-escena-2) var(--p-ease) .55s,
              transform 2.4s var(--p-ease-suave) .55s;
}
.js .escena.dentro .escena-medio { opacity: 1; transform: none }

@media (max-width: 860px) {
  .escena { padding-top: calc(var(--p-nav-h) + var(--p-s-12)) }
  .escena-texto { max-width: 100% }

}

@media (max-width: 900px) {
  .escena-texto { margin-bottom: clamp(90px, 14vh, 150px) }
}

@media (max-height: 820px) {
  .escena { padding-top: calc(var(--p-nav-h) + var(--p-s-8)); padding-bottom: var(--p-s-12) }
}

@media (prefers-reduced-motion: reduce) {
  .js .escena-parte, .js .escena-medio { opacity: 1; transform: none }
  .escena-rueda-pila { transition: none }
  .escena-medio-relleno { animation: none }
}

.escena-propuesta { max-width: 46ch; margin-inline: auto }

.escena-propuesta-rotulo {
  color: color-mix(in oklab, var(--p-paper) 78%, var(--p-ink));
  margin-bottom: var(--p-s-3);
}

.escena-propuesta-fila {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 20px);
  flex-wrap: wrap;
}

.escena-propuesta input {
  flex: 1 1 15ch;
  min-width: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--p-paper) 26%, transparent);
  color: var(--p-paper);
  font: inherit;
  font-size: var(--p-t-sm);
  padding: 8px 0;
  border-radius: 0;
  transition: border-color var(--p-m) var(--p-ease);
}
.escena-propuesta input::placeholder { color: var(--p-paper-faint) }
.escena-propuesta input[hidden] { display: none }
.escena-propuesta-aviso {
  min-height: 1.4em;
  margin: var(--p-s-3) 0 0;
  font-size: var(--p-t-sm);
  color: color-mix(in oklab, var(--p-paper) 78%, var(--p-ink));
}
.escena-propuesta-aviso.mal { color: #E38A6E }
.escena-propuesta.hecho .escena-propuesta-fila,
.escena-propuesta.hecho .escena-propuesta-rotulo { display: none }
.escena-propuesta.hecho .escena-propuesta-aviso { margin-top: 0; font-size: var(--p-t-lede); font-weight: var(--p-peso-claro) }

.escena-propuesta input:-webkit-autofill,
.escena-propuesta input:-webkit-autofill:hover,
.escena-propuesta input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-paper);
  caret-color: var(--p-paper);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.escena-propuesta input:focus { outline: none; border-bottom-color: var(--p-oro) }
.escena-propuesta input:focus-visible { outline: 2px solid var(--p-oro); outline-offset: 3px }

.escena-propuesta button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--p-s-3);
  padding: 10px 20px;
  background: color-mix(in oklab, var(--p-paper) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--p-paper) 20%, transparent);
  border-radius: var(--p-r);
  color: var(--p-paper);
  font-family: var(--p-font-mono);
  font-size: var(--p-t-label);
  font-weight: var(--p-peso-medio);
  letter-spacing: var(--p-track-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--p-m) var(--p-ease), border-color var(--p-m) var(--p-ease);
}
.escena-propuesta button:hover {
  background: color-mix(in oklab, var(--p-paper) 16%, transparent);
  border-color: color-mix(in oklab, var(--p-paper) 40%, transparent);
}

.escena-propuesta button svg {
  width: 20px; height: 10px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--p-m) var(--p-ease);
}
.escena-propuesta button:hover svg { transform: translateX(3px) }

@media (max-width: 640px) {
  .escena-propuesta-fila { flex-direction: column; align-items: stretch }
  .escena-propuesta button { justify-content: center }

  .escena-propuesta input { flex: none; text-align: center }

  .escena-titular {
    font-size: clamp(30px, min(13.5cqw, 12.5vh), 132px);
    margin-bottom: calc(var(--p-s-8) + var(--p-rueda-cola));
  }
}