.hero {
    position: relative;
    height: clamp(34rem, 56vw, 60rem);
    margin-bottom: 1.6rem;
    overflow: hidden;
    background: var(--surface-2);
    touch-action: pan-y;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

.hero-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 18%;
    transform: scale(1.02);
}

.hero-slide__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--bg) 4%, rgba(28, 25, 23, .55) 38%, rgba(28, 25, 23, .1) 70%),
        linear-gradient(to right, rgba(28, 25, 23, .9) 0%, rgba(28, 25, 23, .35) 45%, transparent 75%);
}

.hero-slide.is-active .hero-slide__bg { animation: hero-zoom 9s ease-out forwards; }
@keyframes hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide.is-active .hero-slide__bg { transition: none; animation: none; }
}

.hero-slide__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4rem;
}
.hero-slide__content { max-width: 62rem; }
.hero-slide.is-active .hero-slide__content { animation: hero-rise .7s var(--ease) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }

.hero-slide__eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-muted);
}
.hero-slide__tag {
    padding: .4rem 1rem;
    background: var(--primary);
    color: #06121f;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hero-slide__title {
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
.hero-slide__subtitle {
    margin-top: .8rem;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 600;
    color: var(--primary-hover);
}

.hero-slide__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.2rem;
    margin-top: 1.4rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}
.hero-slide__year { color: var(--text-muted); }

.hero-chip {
    padding: .4rem 1rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 600;
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.hero-chip:hover { background: var(--primary); color: #06121f; border-color: transparent; }

.hero-slide__overview {
    margin-top: 1.6rem;
    max-width: 56rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #e7e5e4;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.hero-slide__actions { margin-top: 2.2rem; }

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    color: var(--white);
    backdrop-filter: blur(6px);
    transition: background-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.hero-arrow:hover { background: var(--primary); color: #06121f; }
.hero-arrow svg { width: 2.6rem; height: 2.6rem; }
.hero-arrow--prev { left: 1.6rem; }
.hero-arrow--next { right: 1.6rem; }
@media (min-width: 768px) { .hero-arrow { display: inline-flex; } }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: .8rem;
}
.hero-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    transition: background-color var(--speed) var(--ease), width var(--speed) var(--ease);
}
.hero-dot:hover { background: rgba(255, 255, 255, .7); }
.hero-dot.is-active { width: 2.8rem; background: var(--primary); }

@media (max-width: 767px) {
    .hero-slide__inner { padding-bottom: 3rem; align-items: flex-end; }
    .hero-slide__overview { display: none; }
    .hero-dots { bottom: 1rem; }
}

/* Franja promocional centrada: entre las diapositivas y los estrenos. */
.pe-reward-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    max-width: calc(100% - 3.2rem);
    margin: 1.4rem auto -1.1rem;
    padding: .75rem 1.6rem;
    color: var(--text);
    font-size: clamp(1.25rem, 1.5vw, 1.55rem);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(105deg, #24242b, #1b1b21);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
}
.pe-reward-strip__gift { flex: none; font-size: 1.5rem; }
.pe-reward-strip strong { color: #f4c96a; font-weight: 800; white-space: nowrap; }
@media (max-width: 767px) {
    .pe-reward-strip {
        max-width: calc(100% - 2rem);
        margin-top: 1rem;
        margin-bottom: -1.2rem;
        padding: .8rem 1rem;
        border-radius: 1.1rem;
        font-size: 1.2rem;
    }
}

/* novela CTA: no altera las dimensiones de los carruseles existentes */
.novela-download-btn { font:inherit; font-weight:800; cursor:pointer; border:1px solid rgba(255,255,255,.13); color:#1b1710; background:linear-gradient(130deg,#ffdb86,#e9a949); box-shadow:0 5px 18px rgba(0,0,0,.25); border-radius:999px; transition:filter .2s,transform .2s; }
.novela-download-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.novela-download-btn:focus-visible {outline:3px solid white;outline-offset:3px}
.novela-download-btn--inline { display:block; margin:2.1rem auto 0; padding:.95rem 2.2rem; font-size:1.35rem; }
.novela-mobile-download { display:none; }
.novela-modal-open { overflow:hidden; }
.novela-download-modal[hidden] {display:none!important}
.novela-download-modal {position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:2rem}
.novela-download-modal__backdrop {position:absolute;inset:0;background:rgba(4,5,8,.78);backdrop-filter:blur(5px)}
.novela-download-modal__panel {position:relative;width:min(100%,42rem);padding:3.3rem 2.4rem 2.5rem;text-align:center;border-radius:2rem;border:1px solid rgba(255,255,255,.16);background:linear-gradient(155deg,#292832,#15151b);box-shadow:0 22px 60px rgba(0,0,0,.5);color:#f9fafb}
.novela-download-modal__close {position:absolute;right:1.3rem;top:1rem;background:transparent;color:#ddd;border:0;font-size:3rem;cursor:pointer}
.novela-download-modal__symbol {font-size:2.8rem;color:#f4c96a;margin-bottom:1.2rem}
.novela-download-modal__panel h2{font-size:2.3rem;line-height:1.25;margin-bottom:1rem;color:#fff}
.novela-download-modal__panel p{font-size:1.45rem;line-height:1.5;color:#d4d4d8;margin-bottom:1.8rem}
.novela-download-btn--modal {padding:1.15rem 2.5rem;width:100%;font-size:1.55rem}
.novela-download-modal__later{display:block;margin:1.6rem auto 0;padding:.5rem;background:transparent;border:0;color:#bbb;cursor:pointer;font:inherit;font-size:1.3rem}
.novela-download-modal__status:not([hidden]) {margin:1rem 0 0;color:#f4c96a;font-size:1.25rem}
@media(max-width:767px){
 body{padding-bottom:8.5rem}
 .novela-download-btn--inline {font-size:1.25rem;margin-top:1.7rem;padding:1rem 2rem}
 .novela-mobile-download{position:fixed;bottom:0;left:0;right:0;z-index:999;display:flex;align-items:center;gap:1rem;padding:1rem 1.3rem calc(1rem + env(safe-area-inset-bottom));background:linear-gradient(110deg,rgba(25,25,31,.97),rgba(39,34,32,.97));border-top:1px solid rgba(244,201,106,.22);box-shadow:0 -8px 30px rgba(0,0,0,.32)}
 .novela-mobile-download__copy{min-width:0;flex:1;color:white;display:flex;flex-direction:column;line-height:1.25;gap:.4rem}
 .novela-mobile-download__copy strong{font-size:1.1rem}
 .novela-mobile-download__copy span{font-size:1rem;color:#bbb}
 .novela-download-btn--floating{flex:none;padding:1.15rem 1.1rem;font-size:1.15rem;white-space:nowrap}
 .novela-download-modal__panel{padding:3rem 1.8rem 2rem}
 .novela-download-modal__panel h2{font-size:2rem}
}
@media(max-width:365px){.novela-mobile-download__copy span{display:none}.novela-mobile-download__copy strong{font-size:1rem}.novela-download-btn--floating{font-size:1.05rem}}

/* Identidad peruana: CTA celeste y blanco, adaptado al fondo oscuro. */
.novela-download-btn {
 position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
 color:#08354d; background:linear-gradient(115deg,#e7faff 0%,#9feaff 30%,#66c7ee 65%,#b9f3ff 100%);
 border:1px solid rgba(225,251,255,.94); font-weight:900; letter-spacing:.01em;
 box-shadow:0 6px 0 rgba(19,86,116,.5),0 9px 28px rgba(92,197,240,.34),inset 0 1px 0 #fff;
 text-shadow:0 1px 0 rgba(255,255,255,.55);
 transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.novela-download-btn::after {content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.34) 48%,transparent 72%);transform:translateX(-120%);pointer-events:none;}
.novela-download-btn:hover {transform:translateY(-2px);filter:saturate(1.09) brightness(1.04);box-shadow:0 7px 0 rgba(19,86,116,.5),0 13px 32px rgba(92,197,240,.4),inset 0 1px 0 #fff;}
.novela-download-btn:hover::after{transform:translateX(120%);transition:transform .8s ease;}
.novela-download-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(19,86,116,.5),0 5px 15px rgba(92,197,240,.3);}
.novela-download-btn--inline{min-height:45px;border-radius:999px;padding:1rem 2.8rem;}
.novela-download-btn--modal {min-height:51px;}
.novela-download-modal__panel{border-color:rgba(120,206,240,.38);box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 0 1px rgba(101,193,230,.1);}
.novela-download-modal__symbol{color:#8bdcf7;}
.novela-download-modal__status:not([hidden]){color:#a8e9ff;}
@media(max-width:767px){
 .novela-mobile-download{background:linear-gradient(115deg,rgba(10,25,38,.98),rgba(18,39,56,.97));border-top:1px solid rgba(131,218,247,.35);box-shadow:0 -8px 30px rgba(0,0,0,.4);}
 .novela-mobile-download__copy strong{color:#eafaff;}
 .novela-mobile-download__copy span{color:#add7e7;}
 .novela-download-btn--floating{min-height:46px;padding:1.13rem 1.2rem;}
}
@media(prefers-reduced-motion:reduce){.novela-download-btn,.novela-download-btn::after{transition:none!important;}}

/* CTA móvil peruana: mensaje y acción centrados, tipografía destacada. */
@media (max-width: 767px) {
  body { padding-bottom: 13.5rem; }
  .novela-mobile-download {
    display:flex; flex-direction:column; gap:.8rem; align-items:stretch;
    padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(10,27,42,.97), rgba(5,14,24,.99));
    border-top:2px solid #78d9fb; box-shadow:0 -9px 32px rgba(0,0,0,.55),0 -2px 18px rgba(83,190,239,.15);
  }
  .novela-mobile-download__copy {align-items:center; text-align:center; gap:.28rem;}
  .novela-mobile-download__copy strong {color:#fff; font-size:1.37rem; line-height:1.25; font-weight:850; letter-spacing:.01em;}
  .novela-mobile-download__copy span {color:#bcdfec; font-size:1.07rem; line-height:1.25;}
  .novela-download-btn--floating {
    display:flex; width:100%; min-height:5.25rem; gap:1rem; padding:.65rem 1.35rem;
    border-radius:1.3rem; border:2px solid #def8ff;
    background:linear-gradient(105deg,#9deaff 0%,#51c9f4 55%,#b0eeff 100%);
    box-shadow:0 4px 0 #155c7a, 0 9px 25px rgba(51,186,241,.42),inset 0 1px 0 #fff;
    color:#042b43; text-shadow:none;
  }
  .novela-download-btn__icon {display:grid;place-items:center;width:3.1rem;height:3.1rem;flex:none;border-radius:50%;color:#fff;background:#0a5678;font-size:2.4rem;font-weight:900;line-height:1;}
  .novela-download-btn__label {display:flex;flex:1;flex-direction:column;align-items:center;gap:.1rem;font-size:1.55rem;font-weight:950;line-height:1.15;letter-spacing:.055em;}
  .novela-download-btn__label small {font-size:.94rem;letter-spacing:.015em;font-weight:650;opacity:.84;}
  .novela-download-btn__arrow {font-size:2.7rem;font-weight:800;line-height:1;}
}
@media(max-width:365px){
  .novela-mobile-download__copy strong{font-size:1.2rem}
  .novela-mobile-download__copy span{display:block;font-size:.96rem}
  .novela-download-btn--floating{min-height:4.9rem;padding:.55rem .9rem}
  .novela-download-btn__label{font-size:1.3rem}
}

/* Poster artwork in the first five hero slides: preserve entire poster typography. */
.hero-slide:nth-child(-n+5) .hero-slide__bg { background-size: contain; background-repeat: no-repeat; background-color: #171b20; background-position: center center; }
@media(max-width:767px){.hero-slide:nth-child(-n+5) .hero-slide__bg{background-position:center top;}}

/* CTA final: mayor contraste en ambos puntos de descarga, sin tocar las cards */
.novela-download-btn--inline {
  width:min(30rem, calc(100% - 2.4rem));min-height:5rem;margin:1.55rem auto .45rem;
  padding:1.05rem 1.9rem;font-size:1.5rem;letter-spacing:.055em;font-weight:950;
  border-radius:1.25rem;border:2px solid #e2faff;
  background:linear-gradient(110deg,#d1f7ff 0%,#55cfff 48%,#81e4ff 100%);
  box-shadow:0 4px 0 #135873,0 9px 26px rgba(43,188,250,.42),inset 0 1px 0 #fff;
}
@media(max-width:767px){
  .novela-mobile-download { gap:.75rem; padding:1.05rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom)); border-top:2px solid #67cfff; }
  .novela-mobile-download__copy strong {font-size:clamp(1.22rem,3.85vw,1.55rem);font-weight:950;letter-spacing:.018em;}
  .novela-mobile-download__copy span {font-size:1.08rem;color:#d3eaf6;}
  .novela-download-btn--floating {min-height:5.9rem;border-radius:1.4rem;border:2px solid #e7fbff;
     background:linear-gradient(105deg,#e4fbff 0%,#67d5ff 42%,#38bdf8 77%,#a7edff 100%);
     box-shadow:0 4px 0 #155973,0 9px 30px rgba(55,192,255,.48),inset 0 2px 0 rgba(255,255,255,.95);}
  .novela-download-btn__label {font-size:clamp(1.45rem,4.4vw,1.85rem);letter-spacing:.07em;font-weight:1000;}
  .novela-download-btn__label small {font-size:1.07rem;font-weight:750;opacity:.88;letter-spacing:0;}
  .novela-download-btn__icon {width:3.7rem;height:3.7rem;font-size:2.5rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
  .novela-download-btn__arrow {font-size:3rem;}
  body {padding-bottom:14.6rem;}
}
@media(max-width:365px){.novela-download-btn__label{font-size:1.32rem}.novela-download-btn__label small{font-size:.93rem}.novela-download-btn__icon{width:3rem;height:3rem}}

/* Bottom CTA: brief, gentle shake every 4.5 seconds (no layout shift). */
@keyframes novela-cta-nudge {
  0%, 78%, 100% { transform: translateX(0) rotate(0); }
  80% { transform: translateX(-3px) rotate(-.65deg); }
  82% { transform: translateX(3px) rotate(.65deg); }
  84% { transform: translateX(-2px) rotate(-.4deg); }
  86% { transform: translateX(2px) rotate(.4deg); }
  88% { transform: translateX(0) rotate(0); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .novela-mobile-download .novela-download-btn--floating {
    animation: novela-cta-nudge 4.5s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
  }
  .novela-mobile-download .novela-download-btn--floating:active,
  .novela-mobile-download .novela-download-btn--floating:focus-visible {
    animation-play-state: paused;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .novela-mobile-download .novela-download-btn--floating { animation: none !important; }
}
