:root {
      --side: 28px;
      --yellow: #f6c21a;
      --ink: #2e2200;
      --accent: #f6c21a;
      --accent-soft: #fff6b7
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      color: #fff;
      background: #05030d;
      overflow: hidden
    }

    body {
    background:url('../../css/img/fondonew5.png') center center / cover no-repeat;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .15), transparent 28%), linear-gradient(180deg, rgba(5, 2, 16, .05), rgba(4, 1, 10, .54));
      z-index: 0
    }

    .header,
    .footer {
      position: fixed;
      left: var(--side);
      right: var(--side);
      z-index: 40;
      border: 1px solid rgba(255, 255, 255, .6);
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, .16);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .22)
    }

    .header {
      top: 22px;
      height: 66px;
      border-radius: 999px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      text-decoration: none
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      padding: 3px;
      background: linear-gradient(135deg, #fff, #f6c21a)
    }

    .avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover
    }

    .brand-title {
      font-size: 21px;
      font-weight: 900
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .icon-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(246, 194, 26, .62);
      border: 1px solid rgba(255, 255, 255, .5);
      text-decoration: none
    }

    .icon-btn img {
      width: 28px;
      height: 28px;
      object-fit: contain
    }

    .footer {
      bottom: 18px;
      height: 78px;
      border-radius: 999px;
      padding: 0 44px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .tab {
      width: 70px;
      height: 62px;
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-decoration: none;
      color: #fff;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .24)
    }

    .tab-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 20px;
      background: rgba(255, 255, 255, .84);
      color: #5f4a20
    }

    .tab-label {
      font-size: 10px;
      font-weight: 900
    }

    .tab.active {
      background: #f6c21a
    }

    .cinema-bg {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden
    }

    .planet-img {
      position: absolute;
      object-fit: contain;
      filter: drop-shadow(0 0 34px rgba(255, 255, 255, .2)) drop-shadow(0 24px 44px rgba(0, 0, 0, .28))
    }

    .p1 {
      width: min(330px, 25vw);
      left: 5vw;
      bottom: 10vh;
      animation: float1 9s ease-in-out infinite
    }

    .p2 {
      width: min(250px, 20vw);
      right: 3vw;
      top: 13vh;
      animation: float2 11s ease-in-out infinite
    }

    .beam {
      position: absolute;
      top: 12vh;
      width: 46vw;
      height: 72vh;
      filter: blur(2px);
      opacity: .25;
      mix-blend-mode: screen
    }

    .beam.left {
      left: -12vw;
      background: linear-gradient(76deg, transparent 20%, rgba(255, 229, 146, .72), transparent 72%);
      transform: rotate(-6deg)
    }

    .beam.right {
      right: -12vw;
      background: linear-gradient(104deg, transparent 20%, rgba(194, 223, 255, .65), transparent 72%);
      transform: rotate(6deg)
    }

    .dust {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .6) 1px, transparent 1.6px);
      background-size: 46px 46px;
      opacity: .18;
      animation: dust 14s linear infinite
    }

    .curtain {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 18vw;
      opacity: .5;
      filter: blur(.2px)
    }

    .curtain.left {
      left: 0;
      background: linear-gradient(90deg, rgba(58, 0, 65, .65), transparent)
    }

    .curtain.right {
      right: 0;
      background: linear-gradient(-90deg, rgba(58, 0, 65, .65), transparent)
    }

    @keyframes float1 {
      50% {
        transform: translateY(-22px) rotate(4deg)
      }
    }

    @keyframes float2 {
      50% {
        transform: translateY(18px) rotate(-5deg)
      }
    }

    @keyframes dust {
      to {
        transform: translateY(-46px)
      }
    }

    .page {
      position: relative;
      z-index: 5;
      height: 100vh;
      padding: 112px var(--side) 150px;
      display: grid;
      grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
      gap: 36px;
      align-items: center
    }

    .copy {
      align-self: center;
      min-width: 0
    }

    .copy-panel {
      transition: opacity .28s ease, transform .28s ease
    }

    .copy-panel.is-changing {
      opacity: 0;
      transform: translateY(12px)
    }

    .kicker {
      display: inline-flex;
      height: 36px;
      padding: 0 14px;
      border-radius: 999px;
      align-items: center;
      background: color-mix(in srgb, var(--accent) 88%, white 12%);
      color: #271900;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
      transition: background .35s ease
    }

    .copy h1 {
      margin: 18px 0 10px;
      font-size: clamp(44px, 5.1vw, 76px);
      line-height: .9;
      letter-spacing: -.06em;
      font-weight: 900;
      text-shadow: 0 18px 40px rgba(0, 0, 0, .38)
    }

    .copy-tagline {
      margin: 0 0 12px;
      max-width: 360px;
      color: var(--accent-soft);
      font-size: 18px;
      line-height: 1.28;
      font-weight: 900
    }

    .copy p {
      margin: 0;
      max-width: 370px;
      color: rgba(255, 255, 255, .84);
      font-size: 16px;
      line-height: 1.42;
      font-weight: 750
    }

    .series-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px
    }

    .meta-chip {
      height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .24);
      font-size: 12px;
      font-weight: 900;
      backdrop-filter: blur(8px)
    }

    .watch-btn {
      margin-top: 22px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      height: 56px;
      padding: 0 24px;
      border-radius: 999px;
      color: #241700;
      background: linear-gradient(135deg, var(--accent-soft), var(--accent));
      font-weight: 900;
      font-size: 17px;
      text-decoration: none;
      box-shadow: 0 18px 36px rgba(0, 0, 0, .3);
      transition: background .35s ease, transform .2s ease
    }

    .watch-btn:hover {
      transform: translateY(-2px)
    }

    .cinema {
      position: relative;
      min-width: 0;
      height: min(610px, 68vh);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .marquee {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(900px, 92%);
      height: 86px;
      border-radius: 26px 26px 12px 12px;
      background: linear-gradient(180deg, #7d2c83, #32103c);
      border: 2px solid rgba(255, 255, 255, .55);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .marquee::before,
    .marquee::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      height: 8px;
      background: radial-gradient(circle, #ffe48a 0 3px, transparent 4px) 0 0/30px 8px repeat-x
    }

    .marquee::before {
      top: 9px
    }

    .marquee::after {
      bottom: 9px
    }

    .marquee-title {
      font-size: clamp(16px, 2vw, 24px);
      text-shadow: 0 4px 12px rgba(0, 0, 0, .5)
    }

    .screen-shell {
      position: relative;
      width: min(920px, 94%);
      height: calc(100% - 118px);
      margin-top: 70px;
      border-radius: 34px;
      padding: 16px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .07));
      border: 1px solid rgba(255, 255, 255, .42);
      box-shadow: 0 36px 90px rgba(0, 0, 0, .5), 0 0 70px rgba(246, 194, 26, .15);
      overflow: visible
    }

    .screen {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 24px;
      overflow: hidden;
      background: #000;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12)
    }

    .screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s ease
    }

    .screen::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .02) 30%, rgba(0, 0, 0, .72) 100%)
    }

    .screen.is-changing img {
      transform: scale(1.06);
      filter: brightness(.72)
    }

    .screen-copy {
      position: absolute;
      z-index: 3;
      left: 36px;
      right: 36px;
      bottom: 30px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px
    }

    .screen-text h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 54px);
      line-height: .95;
      letter-spacing: -.05em
    }

    .screen-text p {
      margin: 8px 0 0;
      color: rgba(255, 255, 255, .82);
      font-weight: 800
    }

    .screen-play {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, .9);
      background: linear-gradient(135deg, var(--accent-soft), var(--accent));
      font-size: 30px;
      font-weight: 900;
      color: #3a2700;
      cursor: pointer;
      box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
      animation: pulse 2.8s ease-in-out infinite
    }

    .arrow {
      position: absolute;
      z-index: 8;
      top: 54%;
      transform: translateY(-50%);
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .7);
      background: rgba(255, 255, 255, .85);
      font-size: 34px;
      font-weight: 900;
      color: #714e00;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(0, 0, 0, .26)
    }

    .arrow.prev {
      left: -28px
    }

    .arrow.next {
      right: -28px
    }

    .posters {
      position: absolute;
      left: 50%;
      bottom: -35px;
      transform: translateX(-50%);
      width: min(760px, 84%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 12px
    }

    .poster {
      width: 72px;
      height: 82px;
      border-radius: 18px;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, .5);
      background: #111;
      opacity: .62;
      transform: translateY(12px) scale(.92);
      transition: .35s ease;
      cursor: pointer;
      box-shadow: 0 16px 28px rgba(0, 0, 0, .32)
    }

    .poster img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .poster.active {
      opacity: 1;
      transform: translateY(12px) scale(.97);
      border-color: var(--accent-soft);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .42), 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent)
    }

    @keyframes pulse {
      50% {
        transform: scale(1.07);
        box-shadow: 0 24px 54px rgba(246, 194, 26, .35)
      }
    }

    .ticket {
      position: absolute;
      z-index: 2;
      bottom: 16px;
      width: 128px;
      height: 64px;
      border-radius: 10px;
      background: linear-gradient(135deg, #ffe780, #f2b727);
      color: #4b3200;
      display: grid;
      place-items: center;
      font-weight: 900;
      transform: rotate(-7deg);
      box-shadow: 0 16px 32px rgba(0, 0, 0, .3)
    }

    .ticket.left {
      left: 3vw;
            bottom: 76px;

    }

    .ticket.right {
      right: 3vw;
                  bottom: 76px;

      transform: rotate(8deg)
    }

    @media(max-width:1050px) {

      html,
      body {
        overflow: auto
      }

      .page {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        padding-top: 98px;
        padding-bottom: 150px
      }

      .copy {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px
      }

      .copy p {
        display: none
      }

      .cinema {
        height: 560px
      }

      .screen-shell {
        width: 92%
      }

      .posters {
        bottom: -66px
      }
    }

    @media(max-width:760px) {
      :root {
        --side: 14px
      }

      .header {
        top: 12px;
        height: 58px
      }

      .avatar {
        width: 42px;
        height: 42px
      }

      .brand-title {
        font-size: 18px
      }

      .icon-btn {
        width: 40px;
        height: 40px
      }

      .page {
        padding: 90px 14px 170px;
        display: block
      }

      .copy {
        display: block
      }

      .copy h1 {
        font-size: 42px
      }

      .copy p {
        display: block;
        font-size: 14px
      }

      .watch-btn {
        height: 50px;
        margin-top: 18px
      }

      .cinema {
        height: 520px;
        margin-top: 16px
      }

      .marquee {
        height: 70px
      }

      .screen-shell {
        margin-top: 58px;
        height: 360px;
        width: 100%;
        padding: 10px;
        border-radius: 26px
      }

      .screen {
        border-radius: 18px
      }

      .screen-copy {
        left: 18px;
        right: 18px;
        bottom: 18px
      }

      .screen-text h2 {
        font-size: 30px
      }

      .screen-text p {
        font-size: 12px
      }

      .screen-play {
        width: 64px;
        height: 64px;
        font-size: 24px
      }

      .arrow {
        width: 48px;
        height: 48px;
        font-size: 28px;
        top: 55%
      }

      .arrow.prev {
        left: -4px
      }

      .arrow.next {
        right: -4px
      }

      .posters {
        width: 94%;
        bottom: -112px;
        gap: 8px;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 22px 8px
      }

      .poster {
        min-width: 78px;
        width: 78px;
        height: 104px
      }

      .footer {
        left: 12px;
        right: 12px;
        bottom: 10px;
        height: 72px;
        padding: 0 12px
      }

      .tab {
        width: 50px;
        height: 50px
      }

      .ticket {
        display: none
      }

      .p1 {
        width: 190px;
        left: -80px
      }

      .p2 {
        width: 150px;
        right: -55px
      }
    }