/* VyoPulse · El Boulevard · Hero libro vivo v2 · cargar después de home.css */
.vyo-home .hero {
    isolation: isolate;
    perspective: 1800px
}

    .vyo-home .hero .sello {
        z-index: 1;
        opacity: .17;
        transition: opacity 1.2s ease
    }

    .vyo-home .hero[data-chapter="0"] .sello {
        opacity: .19
    }

    .vyo-home .hero:not([data-chapter="0"]) .sello {
        opacity: .07
    }

.vyo-home .vyo-hero-scenes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden
}

.vyo-home .vyo-hero-scene {
    position: absolute;
    inset: -3%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 2.1s ease;
    will-change: opacity,transform
}

    .vyo-home .vyo-hero-scene.is-active {
        opacity: 1;
        animation: vyoHeroBreath 13s ease-in-out both
    }

@keyframes vyoHeroBreath {
    from {
        transform: scale(1.02)
    }

    to {
        transform: scale(1.085)
    }
}

.vyo-home .hero[data-chapter="0"]::before {
    background: radial-gradient(circle at 20% 25%,rgba(255,180,90,.28),transparent 42%),radial-gradient(circle at 80% 75%,rgba(90,61,36,.5),transparent 45%),linear-gradient(180deg,rgba(58,38,20,.15),rgba(58,38,20,.55));
    backdrop-filter: blur(.5px)
}

.vyo-home .hero:not([data-chapter="0"])::before {
    background: linear-gradient(90deg,rgba(42,26,15,.81),rgba(42,26,15,.60) 53%,rgba(42,26,15,.39));
    backdrop-filter: none
}

.vyo-home .hero-wrap {
    z-index: 3
}

.vyo-home .vyo-hero-navigation {
    position: relative;
    z-index: 7;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 0 clamp(24px,5vw,72px) 17px;
    color: #f6efe4
}

.vyo-home .vyo-hero-chapter {
    font-family: 'Playfair Display',Georgia,serif;
    font-size: .8rem;
    letter-spacing: .11em
}

.vyo-home .vyo-hero-progress {
    width: 92px;
    height: 2px;
    background: rgba(255,255,255,.3);
    overflow: hidden
}

    .vyo-home .vyo-hero-progress span {
        display: block;
        height: 100%;
        width: 20%;
        background: #ffcf8f;
        transition: width .6s ease
    }

.vyo-home .vyo-hero-navigation button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.09);
    color: #fff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s
}

    .vyo-home .vyo-hero-navigation button:hover {
        background: rgba(255,255,255,.25)
    }
/* La hoja es una copia REAL del capítulo saliente, no una luz degradada. */
.vyo-home .vyo-hero-page {
    position: absolute;
    z-index: 6;
    inset: 0 0 53px;
    pointer-events: none;
    opacity: 0;
    transform-style: preserve-3d;
    transform-origin: left center;
    visibility: hidden
}

    .vyo-home .vyo-hero-page .vyo-page-face {
        position: absolute;
        inset: 0;
        overflow: hidden;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 8px 8px 0 0
    }

    .vyo-home .vyo-hero-page .vyo-page-front {
        background: linear-gradient(135deg,#5a3d24,#3a2614);
        box-shadow: 12px 0 35px rgba(0,0,0,.38)
    }

    .vyo-home .vyo-hero-page .vyo-page-back {
        transform: rotateY(180deg);
        background: repeating-linear-gradient(0deg,rgba(93,61,31,.045) 0 1px,transparent 1px 5px),linear-gradient(100deg,#e1c9a0,#f1dfbd 60%,#ae8c61);
        box-shadow: inset 20px 0 42px rgba(69,42,20,.26)
    }

        .vyo-home .vyo-hero-page .vyo-page-back::after {
            content: 'EL BOULEVARD';
            position: absolute;
            top: 46%;
            left: 0;
            width: 100%;
            text-align: center;
            font: italic 32px Georgia,serif;
            letter-spacing: .14em;
            color: rgba(83,52,28,.26)
        }

    .vyo-home .vyo-hero-page .vyo-page-background {
        position: absolute;
        inset: 0;
        background-position: center;
        background-size: cover
    }

    .vyo-home .vyo-hero-page .vyo-page-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(42,26,15,.8),rgba(42,26,15,.5) 55%,rgba(42,26,15,.3))
    }

    .vyo-home .vyo-hero-page[data-old-chapter="0"] .vyo-page-overlay {
        background: radial-gradient(circle at 20% 25%,rgba(255,180,90,.28),transparent 42%),linear-gradient(180deg,rgba(58,38,20,.15),rgba(58,38,20,.55))
    }

    .vyo-home .vyo-hero-page .hero-wrap {
        position: relative;
        z-index: 1;
        min-height: 100%;
        height: 100%
    }

    .vyo-home .vyo-hero-page .hero-left, .vyo-home .vyo-hero-page .hero-right {
        pointer-events: none
    }

    .vyo-home .vyo-hero-page.is-turning {
        visibility: visible;
        opacity: 1;
        animation: vyoPageTurnReal 1.55s cubic-bezier(.45,.02,.18,1) both
    }

        .vyo-home .vyo-hero-page.is-turning.is-reverse {
            transform-origin: right center;
            animation-name: vyoPageTurnRealReverse
        }

@keyframes vyoPageTurnReal {
    0% {
        transform: rotateY(0);
        opacity: 1
    }

    82% {
        opacity: 1
    }

    100% {
        transform: rotateY(-180deg);
        opacity: 0
    }
}

@keyframes vyoPageTurnRealReverse {
    0% {
        transform: rotateY(0);
        opacity: 1
    }

    82% {
        opacity: 1
    }

    100% {
        transform: rotateY(180deg);
        opacity: 0
    }
}

.vyo-home .hero .vyo-hero-text-fade {
    animation: vyoTextAppear .9s ease both
}

@keyframes vyoTextAppear {
    from {
        opacity: .35;
        transform: translateY(7px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:768px) {
    .vyo-home .vyo-hero-navigation {
        padding: 0 18px 16px;
        gap: 9px
    }

    .vyo-home .vyo-hero-progress {
        width: 55px
    }

    .vyo-home .vyo-hero-page {
        inset: 0 0 65px
    }
}

@media(prefers-reduced-motion:reduce) {
    .vyo-home .vyo-hero-scene.is-active, .vyo-home .vyo-hero-page.is-turning, .vyo-home .hero .vyo-hero-text-fade {
        animation: none
    }

    .vyo-home .vyo-hero-scene {
        transition: none
    }
}