/**
 * Banner principal de la portada (index.php, body.landing-context).
 * Reglas para .banner-part, .banner-hero-img, título del hero y búsqueda.
 */

.banner-part {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 280px;
    margin-top: 117px;
    display: grid;
    place-items: center;
}

body.landing-context .banner-part {
    margin-top: 0 !important;
    min-height: clamp(520px, 58vh, 680px);
    padding-top: 100px;
    padding-bottom: 100px;
    height: auto !important;
    display: block !important;
    --landing-hero-object-position: center 26%;
}

@media (min-width: 992px) {
    body.landing-context .banner-part {
        margin-top: 0 !important;
        padding-top: 88px;
    }
}

@media (max-width: 768px) {
    body.landing-context .banner-part {
        padding-top: 92px;
        background-position: left;
        --landing-hero-object-position: center center;
    }
}

.hero-banner-stage .hero-banner-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-banner-stage .hero-banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
}

.hero-banner-stage .hero-banner-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    pointer-events: auto;
}

.hero-banner-stage .hero-banner-slide[class*="is-leaving--"] {
    z-index: 1;
}

.hero-banner-stage .hero-banner-slide[class*="is-entering--"] {
    z-index: 2;
}

.hero-banner-stage .hero-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: var(--brand-navy, #1a2b4a);
    transform: scale(1) translate(0, 0) rotate(0deg);
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: hidden;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    will-change: transform, filter, clip-path, opacity;
}

.hero-banner-stage .hero-slide-bg .banner-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--landing-hero-object-position);
    display: block;
}

.hero-banner-stage .hero-slide-bg.is-effect-hidden .banner-hero-img,
.hero-banner-stage .hero-slide-bg.is-fragment-hidden .banner-hero-img {
    opacity: 0;
}

.hero-banner-stage .hero-slide-fragments {
    --fx-cols: 8;
    --fx-rows: 5;
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(var(--fx-cols), 1fr);
    grid-template-rows: repeat(var(--fx-rows), 1fr);
    gap: 1px;
    pointer-events: none;
    overflow: hidden;
}

.hero-banner-stage .hero-slide-fragment {
    position: relative;
    overflow: hidden;
    background: rgba(26, 43, 74, 0.35);
    will-change: transform, opacity, filter;
}

.hero-banner-stage .hero-slide-fragment-img {
    position: absolute;
    width: calc(var(--fx-cols) * 100%);
    height: calc(var(--fx-rows) * 100%);
    max-width: none;
    left: calc(var(--fx-col) * -100%);
    top: calc(var(--fx-row) * -100%);
    object-fit: cover;
    object-position: var(--landing-hero-object-position);
    display: block;
    pointer-events: none;
}

/* Ken Burns suave mientras la diapositiva está activa (sin transición) */
@keyframes heroKbZoomIn { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes heroKbPanDown { from { transform: scale(1.08) translateY(-2%); } to { transform: scale(1.08) translateY(2%); } }

.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active:not([class*="is-entering--"]):not([class*="is-leaving--"]) .hero-slide-bg {
    animation-duration: 10s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="zoom-dezoom"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="dolly-in"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="focus-pull"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="bounce-zoom"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="flash-reveal"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="blur-zoom"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="heart-wipe"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="heart-focus"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="opacity-bloom"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="veil-zoom"]:not([class*="is-entering--"]) .hero-slide-bg,
.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="scale-fade"]:not([class*="is-entering--"]) .hero-slide-bg {
    animation-name: heroKbZoomIn;
}

.hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active[data-transition="ken-burns"]:not([class*="is-entering--"]) .hero-slide-bg {
    animation-name: heroKbPanDown;
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-stage .hero-slider-ready .hero-banner-slide.is-active .hero-slide-bg {
        animation: none;
    }
}

.hero-banner-stage .hero-slide-event-title {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    margin: 0;
    padding: 0.55rem 1.6rem 0.6rem;
    border-radius: 999px;
    border: 2px solid var(--brand-gold, #c8a45a);
    background: linear-gradient(135deg, rgba(26, 43, 74, 0.72) 0%, rgba(15, 23, 42, 0.58) 100%);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2.4vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 4px 22px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px));
    transition: opacity 0.45s ease 0.15s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
    pointer-events: none;
}

.hero-banner-stage .hero-banner-slide.is-active .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--zoom-dezoom .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--dolly-in .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--focus-pull .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--bounce-zoom .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--flash-reveal .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--blur-zoom .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--heart-wipe .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--heart-focus .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--opacity-bloom .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--veil-zoom .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--scale-fade .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--ken-burns .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--shatter .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--fall-pieces .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--color-burst .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--puzzle .hero-slide-event-title,
.hero-banner-stage .hero-banner-slide.is-entering--event-announce .hero-slide-event-title {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.hero-banner-stage .hero-banner-slide.is-active .hero-slide-event-title {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.hero-banner-stage .hero-banner-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(24px, 2.4vw, 32px);
    height: clamp(108px, 19vw, 158px);
    margin: 0;
    padding: 0;
    border: 2px solid var(--brand-gold, #c8a45a);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(26, 43, 74, 0.82) 0%, rgba(26, 43, 74, 0.62) 100%);
    backdrop-filter: blur(6px);
    color: var(--brand-gold, #c8a45a);
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-banner-stage .hero-banner-slider-arrow--prev {
    left: clamp(8px, 1.2vw, 16px);
}

.hero-banner-stage .hero-banner-slider-arrow--next {
    right: clamp(8px, 1.2vw, 16px);
}

.hero-banner-stage .hero-banner-slider-arrow:hover,
.hero-banner-stage .hero-banner-slider-arrow:focus-visible {
    background: linear-gradient(180deg, var(--brand-gold, #c8a45a) 0%, #d4b068 100%);
    color: var(--brand-navy, #1a2b4a);
    border-color: #fff;
    box-shadow: 0 6px 22px rgba(200, 164, 90, 0.45);
}

.hero-banner-stage .hero-banner-slider-arrow--prev:hover,
.hero-banner-stage .hero-banner-slider-arrow--prev:focus-visible {
    transform: translateY(-50%) translateX(-2px);
}

.hero-banner-stage .hero-banner-slider-arrow--next:hover,
.hero-banner-stage .hero-banner-slider-arrow--next:focus-visible {
    transform: translateY(-50%) translateX(2px);
}

.hero-banner-stage .hero-banner-slider-arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .hero-banner-stage .hero-slide-event-title {
        left: 58%;
    }
}

@media (max-width: 768px) {
    body.landing-context .banner-part {
        padding-bottom: 170px;
    }

    body.landing-context .serach-iu {
        margin-top: 95px;
        margin-bottom: -90px;
    }

    .hero-banner-stage .hero-slide-event-title {
        left: 54%;
        font-size: 0.88rem;
        padding: 0.4rem 1.1rem 0.45rem;
        letter-spacing: 0.08em;
    }

    .hero-banner-stage .hero-banner-slider-arrow {
        height: 90px;
        width: 22px;
        font-size: 0.75rem;
    }

    .hero-banner-stage .hero-banner-slider-dots {
        bottom: 96px;
    }
}

.hero-banner-stage .hero-banner-slide[class*="is-leaving--"],
.hero-banner-stage .hero-banner-slide[class*="is-entering--"] {
    visibility: visible;
}

.hero-banner-stage .hero-banner-slide[class*="is-entering--"] {
    z-index: 2;
}

.hero-banner-stage .hero-banner-slide[class*="is-leaving--"] {
    z-index: 1;
}

/* ===== Transiciones tipo PowerPoint: entradas/salidas completas ===== */
.hero-banner-stage .hero-banner-slide[class*="is-leaving--"],
.hero-banner-stage .hero-banner-slide[class*="is-entering--"],
.hero-banner-stage .hero-banner-slide[class*="is-leaving--"] .hero-slide-bg,
.hero-banner-stage .hero-banner-slide[class*="is-entering--"] .hero-slide-bg {
    animation-duration: 1.72s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.82, 0.22, 1);
}

.hero-banner-stage .hero-banner-slide.is-leaving--zoom-dezoom { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--zoom-dezoom { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--zoom-dezoom .hero-slide-bg { animation-name: heroPptZoomDezoomOut; }
.hero-banner-stage .hero-banner-slide.is-entering--zoom-dezoom .hero-slide-bg { animation-name: heroPptZoomDezoomIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--dolly-in { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--dolly-in { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--dolly-in .hero-slide-bg { animation-name: heroPptDollyOut; }
.hero-banner-stage .hero-banner-slide.is-entering--dolly-in .hero-slide-bg { animation-name: heroPptDollyIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--focus-pull { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--focus-pull { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--focus-pull .hero-slide-bg { animation-name: heroPptFocusPullOut; }
.hero-banner-stage .hero-banner-slide.is-entering--focus-pull .hero-slide-bg { animation-name: heroPptFocusPullIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--bounce-zoom { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--bounce-zoom { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--bounce-zoom .hero-slide-bg { animation-name: heroPptBounceZoomOut; }
.hero-banner-stage .hero-banner-slide.is-entering--bounce-zoom .hero-slide-bg { animation-name: heroPptBounceZoomIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--flash-reveal { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--flash-reveal { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--flash-reveal .hero-slide-bg { animation-name: heroPptFlashRevealOut; }
.hero-banner-stage .hero-banner-slide.is-entering--flash-reveal .hero-slide-bg { animation-name: heroPptFlashRevealIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--blur-zoom { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--blur-zoom { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--blur-zoom .hero-slide-bg { animation-name: heroPptBlurZoomOut; }
.hero-banner-stage .hero-banner-slide.is-entering--blur-zoom .hero-slide-bg { animation-name: heroPptBlurZoomIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--heart-wipe { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--heart-wipe { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--heart-wipe .hero-slide-bg { animation-name: heroPptHeartWipeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--heart-wipe .hero-slide-bg { animation-name: heroPptHeartWipeIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--heart-focus { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--heart-focus { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--heart-focus .hero-slide-bg { animation-name: heroPptHeartFocusOut; }
.hero-banner-stage .hero-banner-slide.is-entering--heart-focus .hero-slide-bg { animation-name: heroPptHeartFocusIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--opacity-bloom { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--opacity-bloom { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--opacity-bloom .hero-slide-bg { animation-name: heroPptOpacityBloomOut; }
.hero-banner-stage .hero-banner-slide.is-entering--opacity-bloom .hero-slide-bg { animation-name: heroPptOpacityBloomIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--veil-zoom { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--veil-zoom { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--veil-zoom .hero-slide-bg { animation-name: heroPptVeilZoomOut; }
.hero-banner-stage .hero-banner-slide.is-entering--veil-zoom .hero-slide-bg { animation-name: heroPptVeilZoomIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--scale-fade { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--scale-fade { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--scale-fade .hero-slide-bg { animation-name: heroPptScaleDownOut; }
.hero-banner-stage .hero-banner-slide.is-entering--scale-fade .hero-slide-bg { animation-name: heroPptScaleUpIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--ken-burns { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--ken-burns { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--ken-burns .hero-slide-bg { animation-name: heroPptCinemaOut; }
.hero-banner-stage .hero-banner-slide.is-entering--ken-burns .hero-slide-bg { animation-name: heroPptCinemaIn; }

/* shatter — la imagen se rompe y se arma en pedazos */
.hero-banner-stage .hero-banner-slide.is-leaving--shatter .hero-slide-fragments--out .hero-slide-fragment {
    animation: heroPptShardExplode 1.95s cubic-bezier(0.22, 0.72, 0.24, 1) both;
    animation-delay: calc(var(--fx-idx) * 11ms);
}

.hero-banner-stage .hero-banner-slide.is-entering--shatter .hero-slide-fragments--in .hero-slide-fragment {
    animation: heroPptShardAssemble 2.15s cubic-bezier(0.16, 0.9, 0.22, 1) both;
    animation-delay: calc(var(--fx-idx) * 13ms);
}

/* fall-pieces — pedazos caen desde arriba y encajan */
.hero-banner-stage .hero-banner-slide.is-leaving--fall-pieces .hero-slide-fragments--out .hero-slide-fragment {
    animation: heroPptShardDropOut 1.75s ease-in both;
    animation-delay: calc((var(--fx-cols) - var(--fx-col)) * 18ms + var(--fx-row) * 24ms);
}

.hero-banner-stage .hero-banner-slide.is-entering--fall-pieces .hero-slide-fragments--in .hero-slide-fragment {
    animation: heroPptShardFallIn 2.2s cubic-bezier(0.18, 0.86, 0.24, 1) both;
    animation-delay: calc(var(--fx-col) * 42ms + var(--fx-row) * 58ms);
}

/* color-burst — cambio de colores simultáneo en todos los pedazos */
.hero-banner-stage .hero-banner-slide.is-leaving--color-burst .hero-slide-fragments--out .hero-slide-fragment {
    animation: heroPptColorBurstOut 2s ease both;
    animation-delay: calc(var(--fx-idx) * 9ms);
}

.hero-banner-stage .hero-banner-slide.is-entering--color-burst .hero-slide-fragments--in .hero-slide-fragment {
    animation: heroPptColorBurstIn 2.15s cubic-bezier(0.2, 0.82, 0.22, 1) both;
    animation-delay: calc(var(--fx-idx) * 11ms);
}

/* puzzle — rompecabezas: piezas vuelan desde afuera y encajan */
.hero-banner-stage .hero-slide-puzzle {
    --fx-cols: 6;
    --fx-rows: 4;
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(var(--fx-cols), 1fr);
    grid-template-rows: repeat(var(--fx-rows), 1fr);
    gap: 3px;
    padding: 2px;
    pointer-events: none;
    overflow: hidden;
    background: rgba(12, 20, 38, 0.55);
}

.hero-banner-stage .hero-slide-puzzle-piece {
    position: relative;
    overflow: hidden;
    background: rgba(18, 28, 48, 0.4);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.28);
    will-change: transform, opacity, filter;
    transform-origin: center center;
}

.hero-banner-stage .hero-slide-puzzle-piece .hero-slide-fragment-img {
    position: absolute;
    width: calc(var(--fx-cols) * 100%);
    height: calc(var(--fx-rows) * 100%);
    max-width: none;
    left: calc(var(--fx-col) * -100%);
    top: calc(var(--fx-row) * -100%);
    object-fit: cover;
    object-position: var(--landing-hero-object-position);
    display: block;
    pointer-events: none;
}

/* Formas de pieza tipo rompecabezas (pestañas alternadas) */
.hero-banner-stage .hero-slide-puzzle-piece[data-tab="0"] {
    clip-path: polygon(0 6%, 6% 0, 44% 0, 50% 10%, 56% 0, 94% 0, 100% 6%, 100% 44%, 90% 50%, 100% 56%, 100% 94%, 94% 100%, 6% 100%, 0 94%, 0 56%, 10% 50%, 0 44%);
}

.hero-banner-stage .hero-slide-puzzle-piece[data-tab="1"] {
    clip-path: polygon(0 0, 100% 0, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 0 100%, 0 60%, 10% 50%, 0 40%);
}

.hero-banner-stage .hero-slide-puzzle-piece[data-tab="2"] {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 60%, 10% 50%, 0 40%, 0 0, 40% 0, 50% 10%, 60% 0);
}

.hero-banner-stage .hero-slide-puzzle-piece[data-tab="3"] {
    clip-path: polygon(6% 0, 94% 0, 100% 6%, 100% 94%, 94% 100%, 56% 100%, 50% 90%, 44% 100%, 6% 100%, 0 94%, 0 6%);
}

/* persianas horizontales */
.hero-banner-stage .hero-slide-blinds {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    pointer-events: none;
    overflow: hidden;
}

.hero-banner-stage .hero-slide-blinds--horizontal {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--fx-rows), 1fr);
    gap: 2px;
}

.hero-banner-stage .hero-slide-blinds--vertical {
    grid-template-columns: repeat(var(--fx-cols), 1fr);
    grid-template-rows: 1fr;
    gap: 2px;
}

.hero-banner-stage .hero-slide-blinds--checker {
    grid-template-columns: repeat(var(--fx-cols), 1fr);
    grid-template-rows: repeat(var(--fx-rows), 1fr);
    gap: 2px;
}

.hero-banner-stage .hero-slide-blinds--doors {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
}

.hero-banner-stage .hero-slide-blind {
    position: relative;
    overflow: hidden;
    background: rgba(26, 43, 74, 0.28);
    will-change: transform, opacity, filter;
}

.hero-banner-stage .hero-banner-slide.is-leaving--blinds-h .hero-slide-blinds--out .hero-slide-blind {
    animation: heroPptBlindHOut 1.65s ease-in both;
    animation-delay: calc(var(--fx-row) * 42ms);
    transform-origin: center bottom;
}

.hero-banner-stage .hero-banner-slide.is-entering--blinds-h .hero-slide-blinds--in .hero-slide-blind {
    animation: heroPptBlindHIn 1.9s cubic-bezier(0.2, 0.82, 0.22, 1) both;
    animation-delay: calc(var(--fx-row) * 48ms);
    transform-origin: center top;
}

.hero-banner-stage .hero-banner-slide.is-leaving--blinds-v .hero-slide-blinds--out .hero-slide-blind {
    animation: heroPptBlindVOut 1.65s ease-in both;
    animation-delay: calc(var(--fx-col) * 34ms);
    transform-origin: center right;
}

.hero-banner-stage .hero-banner-slide.is-entering--blinds-v .hero-slide-blinds--in .hero-slide-blind {
    animation: heroPptBlindVIn 1.9s cubic-bezier(0.2, 0.82, 0.22, 1) both;
    animation-delay: calc(var(--fx-col) * 40ms);
    transform-origin: center left;
}

.hero-banner-stage .hero-banner-slide.is-leaving--checkerboard .hero-slide-blinds--out .hero-slide-blind {
    animation: heroPptCheckerOut 1.55s ease both;
    animation-delay: calc(var(--fx-idx) * 22ms);
}

.hero-banner-stage .hero-banner-slide.is-entering--checkerboard .hero-slide-blinds--in .hero-slide-blind {
    animation: heroPptCheckerIn 1.95s cubic-bezier(0.18, 0.86, 0.22, 1) both;
    animation-delay: calc(var(--fx-idx) * 28ms);
}

.hero-banner-stage .hero-banner-slide.is-leaving--split-doors .hero-slide-blinds--out .hero-slide-blind:nth-child(1) {
    animation: heroPptDoorLeftOut 1.7s ease-in both;
}

.hero-banner-stage .hero-banner-slide.is-leaving--split-doors .hero-slide-blinds--out .hero-slide-blind:nth-child(2) {
    animation: heroPptDoorRightOut 1.7s ease-in both;
}

.hero-banner-stage .hero-banner-slide.is-entering--split-doors .hero-slide-blinds--in .hero-slide-blind:nth-child(1) {
    animation: heroPptDoorLeftIn 1.9s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.hero-banner-stage .hero-banner-slide.is-entering--split-doors .hero-slide-blinds--in .hero-slide-blind:nth-child(2) {
    animation: heroPptDoorRightIn 1.9s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

/* ripple — onda circular */
.hero-banner-stage .hero-banner-slide.is-leaving--ripple { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--ripple { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--ripple .hero-slide-bg { animation-name: heroPptRippleOut; }
.hero-banner-stage .hero-banner-slide.is-entering--ripple .hero-slide-bg { animation-name: heroPptRippleIn; }

/* swirl — remolino */
.hero-banner-stage .hero-banner-slide.is-leaving--swirl { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--swirl { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--swirl .hero-slide-bg { animation-name: heroPptSwirlOut; }
.hero-banner-stage .hero-banner-slide.is-entering--swirl .hero-slide-bg { animation-name: heroPptSwirlIn; }

/* ocean-waves — oleaje marino con difuminación cromática */
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves .hero-slide-bg { animation-name: heroOceanWavesOut; }
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves .hero-slide-bg { animation-name: heroOceanWavesIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::before,
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::after,
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::before,
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 34%, rgba(150, 190, 205, 0.42) 36%, rgba(55, 95, 130, 0.34) 47%, transparent 49%) 0 0 / 190px 76px repeat,
        linear-gradient(115deg, rgba(35, 65, 95, 0.38), rgba(120, 175, 185, 0.3), rgba(165, 150, 195, 0.28));
    mix-blend-mode: soft-light;
    filter: blur(16px) saturate(1.15);
    opacity: 0;
    will-change: transform, filter, opacity;
}

.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::before {
    animation: heroOceanFoamIn 1.85s cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::after {
    animation: heroOceanFoamIn 1.85s cubic-bezier(0.18, 0.82, 0.2, 1) 0.12s reverse both;
    transform: scaleY(-1);
}

.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::before,
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::after {
    animation: heroOceanFoamOut 1.85s ease-in both;
}

/* event-announce — blanco y negro periódico, luego revela el color (anuncio del evento) */
.hero-banner-stage .hero-banner-slide.is-leaving--event-announce { animation-name: heroPptFadeOut; }
.hero-banner-stage .hero-banner-slide.is-entering--event-announce { animation-name: heroPptFadeIn; }
.hero-banner-stage .hero-banner-slide.is-leaving--event-announce .hero-slide-bg { animation-name: heroEventAnnounceOut; }
.hero-banner-stage .hero-banner-slide.is-entering--event-announce .hero-slide-bg { animation-name: heroEventAnnounceIn; }

.hero-banner-stage .hero-banner-slide.is-leaving--event-announce .hero-slide-bg,
.hero-banner-stage .hero-banner-slide.is-entering--event-announce .hero-slide-bg {
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.22, 0.82, 0.24, 1);
}

.hero-banner-stage .hero-banner-slide.is-leaving--event-announce::before,
.hero-banner-stage .hero-banner-slide.is-leaving--event-announce::after,
.hero-banner-stage .hero-banner-slide.is-entering--event-announce::before,
.hero-banner-stage .hero-banner-slide.is-entering--event-announce::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    will-change: opacity, transform, filter;
}

.hero-banner-stage .hero-banner-slide.is-entering--event-announce::before {
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.09) 0 1px,
            transparent 1px 5px
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 10%, transparent 10% 90%, rgba(0, 0, 0, 0.22) 90% 100%);
    mix-blend-mode: overlay;
    animation: heroEventAnnounceScan 2.2s steps(10, end) both;
}

.hero-banner-stage .hero-banner-slide.is-entering--event-announce::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42) 0%, transparent 58%),
        linear-gradient(115deg, rgba(210, 160, 165, 0.34), rgba(155, 180, 200, 0.28), rgba(220, 195, 150, 0.32));
    mix-blend-mode: soft-light;
    filter: blur(10px) saturate(0.2);
    animation: heroEventAnnounceColorBloom 2.2s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.hero-banner-stage .hero-banner-slide.is-leaving--event-announce::before {
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
    mix-blend-mode: overlay;
    animation: heroEventAnnounceScanOut 2.2s ease-in both;
}

.hero-banner-stage .hero-banner-slide.is-leaving--event-announce::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0 12%, transparent 12% 88%, rgba(0, 0, 0, 0.38) 88% 100%);
    animation: heroEventAnnounceBarsOut 2.2s ease-in both;
}

.hero-banner-stage .hero-banner-slide.is-entering--event-announce .hero-slide-event-title {
    animation: heroEventAnnounceTitleIn 2.2s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.hero-banner-stage .hero-banner-slide[class*="is-leaving--"] .hero-slide-event-title {
    animation: heroPptTitleOut 0.42s ease both;
}

.hero-banner-stage .hero-banner-slide[class*="is-entering--"] .hero-slide-event-title {
    animation: heroPptTitleIn 0.9s cubic-bezier(0.18, 0.9, 0.22, 1) 0.48s both;
}

@keyframes heroPptFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes heroPptFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes heroOceanWavesIn {
    0% {
        clip-path: polygon(0 72%, 12% 66%, 24% 75%, 37% 62%, 50% 72%, 63% 58%, 76% 69%, 88% 59%, 100% 67%, 100% 100%, 0 100%);
        transform: scale(1.18) translateY(8%);
        filter: blur(24px) hue-rotate(24deg) saturate(1.12) brightness(1.08);
        opacity: 0.18;
    }
    48% {
        clip-path: polygon(0 20%, 12% 27%, 24% 17%, 37% 30%, 50% 18%, 63% 32%, 76% 21%, 88% 31%, 100% 22%, 100% 100%, 0 100%);
        filter: blur(9px) hue-rotate(12deg) saturate(1.08) brightness(1.04);
        opacity: 0.92;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scale(1);
        filter: blur(0) hue-rotate(0deg) saturate(1) brightness(1);
        opacity: 1;
    }
}

@keyframes heroOceanWavesOut {
    0% {
        transform: scale(1);
        filter: blur(0) hue-rotate(0deg) saturate(1) brightness(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.14) translateY(-6%);
        filter: blur(22px) hue-rotate(-20deg) saturate(1.12) brightness(0.82);
        opacity: 0;
    }
}

@keyframes heroEventAnnounceIn {
    0% {
        opacity: 0;
        transform: scale(1.08);
        filter: grayscale(1) contrast(1.22) brightness(0.88) saturate(0);
    }
    10% { opacity: 1; filter: grayscale(1) contrast(1.18) brightness(1.02) saturate(0); }
    20% { filter: grayscale(0.55) contrast(1.12) brightness(1.04) saturate(0.35); }
    30% { filter: grayscale(1) contrast(1.2) brightness(0.96) saturate(0); }
    40% { filter: grayscale(0.42) contrast(1.1) brightness(1.03) saturate(0.45); }
    50% { filter: grayscale(1) contrast(1.16) brightness(0.98) saturate(0); }
    58% { filter: grayscale(0.68) contrast(1.08) brightness(1.02) saturate(0.55); }
    66% { filter: grayscale(0.92) contrast(1.12) brightness(1) saturate(0.2); }
    74% { filter: grayscale(0.35) contrast(1.06) brightness(1.05) saturate(0.75); }
    82% { filter: grayscale(0.12) contrast(1.04) brightness(1.06) saturate(0.92); }
    90% { filter: grayscale(0.04) contrast(1.02) brightness(1.03) saturate(1.02); }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: grayscale(0) contrast(1) brightness(1) saturate(1);
    }
}

@keyframes heroEventAnnounceOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: grayscale(0) contrast(1) brightness(1) saturate(1);
    }
    35% { filter: grayscale(0.72) contrast(1.12) brightness(0.94) saturate(0.35); }
    100% {
        opacity: 0;
        transform: scale(1.04);
        filter: grayscale(1) contrast(1.2) brightness(0.82) saturate(0);
    }
}

@keyframes heroEventAnnounceScan {
    0% { opacity: 0; transform: translateY(-6%); }
    12% { opacity: 0.72; }
    24% { opacity: 0.38; }
    36% { opacity: 0.78; }
    48% { opacity: 0.42; }
    60% { opacity: 0.82; }
    72% { opacity: 0.35; }
    82% { opacity: 0.2; filter: grayscale(1); }
    100% { opacity: 0; transform: translateY(6%); filter: grayscale(0); }
}

@keyframes heroEventAnnounceColorBloom {
    0%, 62% { opacity: 0; filter: blur(12px) saturate(0); transform: scale(1.08); }
    74% { opacity: 0.42; filter: blur(8px) saturate(0.85); }
    88% { opacity: 0.55; filter: blur(6px) saturate(1.08); }
    100% { opacity: 0; filter: blur(14px) saturate(1.12); transform: scale(1); }
}

@keyframes heroEventAnnounceScanOut {
    0% { opacity: 0.55; }
    100% { opacity: 0; }
}

@keyframes heroEventAnnounceBarsOut {
    0% { opacity: 0.45; }
    100% { opacity: 0; transform: scaleY(1.08); }
}

@keyframes heroEventAnnounceTitleIn {
    0%, 58% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 18px));
        filter: grayscale(1) blur(2px);
    }
    72% {
        opacity: 0.65;
        transform: translate(-50%, calc(-50% + 8px));
        filter: grayscale(0.45) blur(0.5px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
        filter: grayscale(0) blur(0);
    }
}

@keyframes heroOceanFoamIn {
    0% {
        transform: translate3d(-18%, 42%, 0) rotate(-5deg) scale(1.12);
        filter: blur(24px) hue-rotate(28deg) saturate(1.15);
        opacity: 0;
    }
    42% {
        opacity: 0.55;
    }
    100% {
        transform: translate3d(18%, -38%, 0) rotate(4deg) scale(1);
        filter: blur(10px) hue-rotate(0deg) saturate(1.08);
        opacity: 0;
    }
}

@keyframes heroOceanFoamOut {
    0% {
        transform: translate3d(-12%, 38%, 0) rotate(-4deg);
        opacity: 0;
    }
    45% {
        opacity: 0.45;
    }
    100% {
        transform: translate3d(16%, -32%, 0) rotate(5deg);
        filter: blur(22px) hue-rotate(-24deg) saturate(1.12);
        opacity: 0;
    }
}

@keyframes heroPptZoomDezoomIn {
    0% { transform: scale(3); filter: brightness(1.1) saturate(1.05); opacity: 0.88; }
    38% { opacity: 1; }
    100% { transform: scale(1); filter: brightness(1) saturate(1); opacity: 1; }
}

@keyframes heroPptZoomDezoomOut {
    0% { transform: scale(1); filter: brightness(1); opacity: 1; }
    100% { transform: scale(1.45); filter: brightness(0.68); opacity: 0; }
}

@keyframes heroPptDollyIn {
    0% { transform: scale(1.45); filter: brightness(0.92); opacity: 0.75; }
    55% { opacity: 1; }
    100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}

@keyframes heroPptDollyOut {
    0% { transform: scale(1); filter: brightness(1); opacity: 1; }
    100% { transform: scale(1.22); filter: brightness(0.72); opacity: 0; }
}

@keyframes heroPptFocusPullIn {
    0% { transform: scale(2.35); filter: blur(16px) brightness(1.15); opacity: 0.55; }
    42% { opacity: 0.92; filter: blur(6px) brightness(1.08); }
    100% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
}

@keyframes heroPptFocusPullOut {
    0% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
    100% { transform: scale(1.28); filter: blur(12px) brightness(0.7); opacity: 0; }
}

@keyframes heroPptBounceZoomIn {
    0% { transform: scale(1.58); opacity: 0; filter: brightness(1.14); }
    52% { transform: scale(0.94); opacity: 1; }
    72% { transform: scale(1.05); }
    100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}

@keyframes heroPptBounceZoomOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.62); opacity: 0; filter: brightness(0.75); }
}

@keyframes heroPptFlashRevealIn {
    0% { transform: scale(1.12); filter: brightness(3.2) saturate(0.4); opacity: 0.35; }
    28% { filter: brightness(2.4) saturate(0.75); opacity: 0.85; }
    58% { filter: brightness(1.15) saturate(1); opacity: 1; }
    100% { transform: scale(1); filter: brightness(1) saturate(1); opacity: 1; }
}

@keyframes heroPptFlashRevealOut {
    0% { transform: scale(1); filter: brightness(1); opacity: 1; }
    35% { filter: brightness(2.6); opacity: 0.75; }
    100% { transform: scale(1.08); filter: brightness(3) saturate(0.3); opacity: 0; }
}

@keyframes heroPptBlurZoomIn {
    0% { transform: scale(2.15); filter: blur(18px) brightness(1.24) saturate(0.85); opacity: 0; }
    38% { opacity: 0.92; filter: blur(8px) brightness(1.14) saturate(1.04); }
    72% { transform: scale(1.04); filter: blur(1px) brightness(1.04); }
    100% { transform: scale(1); filter: blur(0) brightness(1) saturate(1); opacity: 1; }
}

@keyframes heroPptBlurZoomOut {
    0% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
    100% { transform: scale(1.42); filter: blur(16px) brightness(0.62) saturate(0.75); opacity: 0; }
}

@keyframes heroPptHeartWipeIn {
    0% {
        clip-path: polygon(50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%);
        transform: scale(1.2);
        filter: blur(8px) brightness(1.28);
        opacity: 0.12;
    }
    48% {
        clip-path: polygon(50% 92%, 12% 56%, 7% 32%, 22% 13%, 39% 17%, 50% 31%, 61% 17%, 78% 13%, 93% 32%, 88% 56%);
        opacity: 1;
        filter: blur(1px) brightness(1.1);
    }
    100% {
        clip-path: polygon(-14% -14%, 50% -14%, 114% -14%, 114% 50%, 114% 114%, 50% 114%, -14% 114%, -14% 50%, -14% -14%, 50% -14%);
        transform: scale(1);
        filter: blur(0) brightness(1);
        opacity: 1;
    }
}

@keyframes heroPptHeartWipeOut {
    0% {
        clip-path: polygon(-14% -14%, 50% -14%, 114% -14%, 114% 50%, 114% 114%, 50% 114%, -14% 114%, -14% 50%, -14% -14%, 50% -14%);
        transform: scale(1);
        filter: blur(0) brightness(1);
        opacity: 1;
    }
    54% {
        clip-path: polygon(50% 92%, 12% 56%, 7% 32%, 22% 13%, 39% 17%, 50% 31%, 61% 17%, 78% 13%, 93% 32%, 88% 56%);
        opacity: 0.72;
        filter: blur(2px) brightness(0.82);
    }
    100% {
        clip-path: polygon(50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%, 50% 48%);
        transform: scale(1.18);
        filter: blur(10px) brightness(0.58);
        opacity: 0;
    }
}

@keyframes heroPptHeartFocusIn {
    0% {
        clip-path: polygon(50% 92%, 12% 56%, 7% 32%, 22% 13%, 39% 17%, 50% 31%, 61% 17%, 78% 13%, 93% 32%, 88% 56%);
        transform: scale(1.85);
        filter: blur(20px) brightness(1.3) saturate(0.7);
        opacity: 0;
    }
    42% {
        opacity: 0.9;
        filter: blur(7px) brightness(1.16) saturate(1.05);
    }
    100% {
        clip-path: polygon(-14% -14%, 50% -14%, 114% -14%, 114% 50%, 114% 114%, 50% 114%, -14% 114%, -14% 50%, -14% -14%, 50% -14%);
        transform: scale(1);
        filter: blur(0) brightness(1) saturate(1);
        opacity: 1;
    }
}

@keyframes heroPptHeartFocusOut {
    0% {
        clip-path: polygon(-14% -14%, 50% -14%, 114% -14%, 114% 50%, 114% 114%, 50% 114%, -14% 114%, -14% 50%, -14% -14%, 50% -14%);
        transform: scale(1);
        filter: blur(0) brightness(1);
        opacity: 1;
    }
    100% {
        clip-path: polygon(50% 92%, 12% 56%, 7% 32%, 22% 13%, 39% 17%, 50% 31%, 61% 17%, 78% 13%, 93% 32%, 88% 56%);
        transform: scale(1.34);
        filter: blur(16px) brightness(0.64);
        opacity: 0;
    }
}

@keyframes heroPptOpacityBloomIn {
    0% { transform: scale(1.34); filter: blur(12px) brightness(0.72) saturate(0.8); opacity: 0; }
    32% { filter: blur(7px) brightness(1.55) saturate(1.25); opacity: 0.72; }
    64% { transform: scale(1.04); filter: blur(1px) brightness(1.12) saturate(1.08); opacity: 1; }
    100% { transform: scale(1); filter: blur(0) brightness(1) saturate(1); opacity: 1; }
}

@keyframes heroPptOpacityBloomOut {
    0% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
    45% { filter: blur(2px) brightness(1.35); opacity: 0.72; }
    100% { transform: scale(0.82); filter: blur(14px) brightness(0.48) saturate(0.75); opacity: 0; }
}

@keyframes heroPptVeilZoomIn {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 24%);
        transform: scale(1.5) translate3d(0, -5%, 0);
        filter: blur(14px) brightness(1.2);
        opacity: 0;
    }
    52% {
        clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
        opacity: 1;
        filter: blur(3px) brightness(1.08);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scale(1);
        filter: blur(0) brightness(1);
        opacity: 1;
    }
}

@keyframes heroPptVeilZoomOut {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scale(1);
        filter: blur(0) brightness(1);
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 76%, 100% 100%, 100% 100%, 0 100%);
        transform: scale(1.24) translate3d(0, 4%, 0);
        filter: blur(12px) brightness(0.58);
        opacity: 0;
    }
}

@keyframes heroPptScaleUpIn {
    0% { transform: scale(1.42); opacity: 0; filter: brightness(1.12); }
    64% { transform: scale(0.98); opacity: 1; }
    100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes heroPptScaleDownOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.58); opacity: 0; }
}

@keyframes heroPptCinemaIn {
    0% { transform: scale(1.32) translate3d(5%, 4%, 0); opacity: 0; filter: brightness(1.16); }
    42% { opacity: 1; }
    100% { transform: scale(1.03) translate3d(0, 0, 0); opacity: 1; filter: brightness(1); }
}

@keyframes heroPptCinemaOut {
    0% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
    100% { transform: scale(1.24) translate3d(-5%, -3%, 0); opacity: 0; }
}

@keyframes heroPptTitleIn {
    0% { opacity: 0; transform: translate(-50%, calc(-50% + 28px)) scale(0.88); letter-spacing: 0.22em; }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: 0.12em; }
}

@keyframes heroPptTitleOut {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(0.94); }
}

@keyframes heroPptShardExplode {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; filter: brightness(1); }
    55% { opacity: 0.85; }
    100% {
        transform: translate3d(var(--shard-x), var(--shard-y), 0) rotate(var(--shard-rot)) scale(0.35);
        opacity: 0;
        filter: blur(3px) brightness(0.55);
    }
}

@keyframes heroPptShardAssemble {
    0% {
        transform: translate3d(var(--asm-x), var(--asm-y), 0) rotate(var(--asm-rot)) scale(0.15);
        opacity: 0;
        filter: blur(6px) brightness(1.2);
    }
    58% { opacity: 1; filter: blur(1px) brightness(1.05); }
    78% { transform: translate3d(0, 6px, 0) rotate(2deg) scale(1.03); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; filter: blur(0) brightness(1); }
}

@keyframes heroPptShardFallIn {
    0% {
        transform: translate3d(var(--fall-x), var(--fall-drop), 0) rotate(var(--fall-rot)) scale(0.92);
        opacity: 0;
    }
    62% { opacity: 1; }
    84% { transform: translate3d(0, 10px, 0) rotate(2deg) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes heroPptShardDropOut {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(0, 72px, 0) scale(0.82); opacity: 0; filter: blur(4px); }
}

@keyframes heroPptColorBurstOut {
    0% { filter: hue-rotate(0deg) saturate(1) brightness(1) contrast(1); transform: scale(1); opacity: 1; }
    35% { filter: hue-rotate(45deg) saturate(1.25) brightness(1.08) contrast(1.05); transform: scale(1.03); }
    70% { filter: hue-rotate(90deg) saturate(1.15) brightness(0.95) contrast(1.02); }
    100% { filter: hue-rotate(120deg) saturate(0.85) brightness(0.72) contrast(0.92); transform: scale(0.82); opacity: 0; }
}

@keyframes heroPptColorBurstIn {
    0% {
        filter: hue-rotate(100deg) saturate(1.3) brightness(1.1) contrast(1.05);
        transform: scale(1.14) rotate(var(--color-rot));
        opacity: 0;
    }
    30% { opacity: 1; filter: hue-rotate(50deg) saturate(1.2) brightness(1.06) contrast(1.02); }
    62% { filter: hue-rotate(20deg) saturate(1.1) brightness(1.03) contrast(1); transform: scale(1.01); }
    100% { filter: hue-rotate(0deg) saturate(1) brightness(1) contrast(1); transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes heroPuzzlePieceIn {
    0% {
        transform: translate3d(var(--puzzle-from-x), var(--puzzle-from-y), 0) rotate(var(--puzzle-rot)) scale(0.28);
        opacity: 0;
        filter: brightness(1.15) saturate(1.2);
    }
    55% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04);
    }
    78% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.98);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 1;
        filter: none;
    }
}

@keyframes heroPuzzlePieceOut {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--puzzle-from-x), var(--puzzle-from-y), 0) rotate(calc(var(--puzzle-rot) * -1.4)) scale(0.22);
        opacity: 0;
        filter: blur(2px) brightness(0.65);
    }
}

@keyframes heroPptBlindHIn {
    0% { transform: scaleY(0); opacity: 0.45; filter: brightness(1.15); }
    100% { transform: scaleY(1); opacity: 1; filter: brightness(1); }
}

@keyframes heroPptBlindHOut {
    0% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0); opacity: 0; filter: brightness(0.7); }
}

@keyframes heroPptBlindVIn {
    0% { transform: scaleX(0); opacity: 0.45; filter: brightness(1.15); }
    100% { transform: scaleX(1); opacity: 1; filter: brightness(1); }
}

@keyframes heroPptBlindVOut {
    0% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 0; filter: brightness(0.7); }
}

@keyframes heroPptCheckerIn {
    0% { transform: scale(0) rotate(8deg); opacity: 0; filter: brightness(1.2); }
    70% { transform: scale(1.04) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}

@keyframes heroPptCheckerOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes heroPptDoorLeftIn {
    0% { transform: translateX(-104%); filter: brightness(1.1); }
    100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes heroPptDoorRightIn {
    0% { transform: translateX(104%); filter: brightness(1.1); }
    100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes heroPptDoorLeftOut {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-104%); opacity: 0; }
}

@keyframes heroPptDoorRightOut {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(104%); opacity: 0; }
}

@keyframes heroPptRippleIn {
    0% { clip-path: circle(0% at 50% 50%); transform: scale(1.12); filter: brightness(1.2); }
    100% { clip-path: circle(150% at 50% 50%); transform: scale(1); filter: brightness(1); }
}

@keyframes heroPptRippleOut {
    0% { clip-path: circle(150% at 50% 50%); opacity: 1; }
    100% { clip-path: circle(0% at 50% 50%); opacity: 0; filter: brightness(0.65); }
}

@keyframes heroPptSwirlIn {
    0% { transform: rotate(-220deg) scale(0.2); opacity: 0; filter: blur(8px) brightness(1.2); }
    65% { opacity: 1; filter: blur(0); }
    100% { transform: rotate(0deg) scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes heroPptSwirlOut {
    0% { transform: rotate(0deg) scale(1); opacity: 1; }
    100% { transform: rotate(180deg) scale(0.15); opacity: 0; filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-stage .hero-banner-slide[class*="is-leaving--"],
    .hero-banner-stage .hero-banner-slide[class*="is-entering--"],
    .hero-banner-stage .hero-banner-slide[class*="is-leaving--"] .hero-slide-bg,
    .hero-banner-stage .hero-banner-slide[class*="is-entering--"] .hero-slide-bg,
    .hero-banner-stage .hero-slide-fragment,
    .hero-banner-stage .hero-slide-puzzle-piece,
    .hero-banner-stage .hero-slide-blind,
    .hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::before,
    .hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::after,
    .hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::before,
    .hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::after,
    .hero-banner-stage .hero-banner-slide.is-leaving--event-announce::before,
    .hero-banner-stage .hero-banner-slide.is-leaving--event-announce::after,
    .hero-banner-stage .hero-banner-slide.is-entering--event-announce::before,
    .hero-banner-stage .hero-banner-slide.is-entering--event-announce::after {
        animation: none;
    }
}

.hero-banner-stage .hero-banner-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: min(92vw, 560px);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(4px);
}

.hero-banner-stage .hero-banner-slider-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-banner-stage .hero-banner-slider-dot.is-active {
    background: var(--brand-gold, #c8a45a);
    transform: scale(1.2);
}

.hero-banner-stage .hero-banner-slider-dot:hover {
    background: #fff;
    transform: scale(1.1);
}

.hero-banner-stage .hero-banner-slider-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body.landing-context .banner-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--landing-hero-object-position);
    z-index: 0;
    pointer-events: none;
}

.banner-part > .container {
    position: relative;
    z-index: 2;
}

.hero-banner-stage .hero-banner-title {
    position: relative;
    z-index: 2;
}

body.landing-context .serach-iu {
    position: relative;
}

/* ===== Elementos sobre el slider animados con cada transición ===== */
body.landing-context .banner-part.is-hero-transitioning .hero-banner-title .hero-title-word {
    animation: heroOverlayWordIn 1.45s cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

body.landing-context .banner-part.is-hero-transitioning .hero-banner-title .hero-title-word:nth-child(1) { animation-delay: 0.05s; }
body.landing-context .banner-part.is-hero-transitioning .hero-banner-title .hero-title-word:nth-child(2) { animation-delay: 0.13s; }
body.landing-context .banner-part.is-hero-transitioning .hero-banner-title .hero-title-word:nth-child(3) { animation-delay: 0.21s; }
body.landing-context .banner-part.is-hero-transitioning .hero-banner-title .hero-title-word:nth-child(4) { animation-delay: 0.29s; }

body.landing-context .banner-part.is-hero-transitioning .serach-iu {
    animation: heroOverlayCardIn 1.6s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

body.landing-context .banner-part.is-hero-transitioning .celebration-item {
    animation: heroOverlayChoiceIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.landing-context .banner-part.is-hero-transitioning .celebration-item:nth-child(1) { animation-delay: 0.12s; }
body.landing-context .banner-part.is-hero-transitioning .celebration-item:nth-child(2) { animation-delay: 0.22s; }
body.landing-context .banner-part.is-hero-transitioning .celebration-item:nth-child(3) { animation-delay: 0.32s; }
body.landing-context .banner-part.is-hero-transitioning .celebration-item:nth-child(4) { animation-delay: 0.42s; }
body.landing-context .banner-part.is-hero-transitioning .celebration-item:nth-child(5) { animation-delay: 0.52s; }
body.landing-context .banner-part.is-hero-transitioning .celebration-item:nth-child(6) { animation-delay: 0.62s; }

body.landing-context .banner-part.is-hero-transitioning .hero-bouquet-toss {
    animation: heroOverlayBouquetIn 1.65s ease-out both;
}

body.landing-context .banner-part.is-hero-transitioning .hero-banner-slider-arrow {
    animation: heroOverlayArrowsPulse 1.35s ease both;
}

body.landing-context .banner-part.is-hero-transitioning .hero-banner-slider-dots {
    animation: heroOverlayDotsIn 1.15s ease both;
}

body.landing-context .banner-part.hero-stage--entering--blinds-h .hero-banner-title,
body.landing-context .banner-part.hero-stage--entering--blinds-v .hero-banner-title {
    animation: heroOverlayTitleBlinds 1.75s ease both;
}

body.landing-context .banner-part.hero-stage--entering--blinds-h .hero-banner-title .hero-title-word,
body.landing-context .banner-part.hero-stage--entering--blinds-v .hero-banner-title .hero-title-word {
    animation: none;
}

body.landing-context .banner-part.hero-stage--entering--shatter .serach-iu,
body.landing-context .banner-part.hero-stage--entering--fall-pieces .serach-iu {
    animation: heroOverlayCardShake 2s ease both;
}

body.landing-context .banner-part.hero-stage--entering--color-burst .hero-banner-title .hero-title-word--gold {
    animation: heroOverlayWordColor 2.05s ease both;
}

body.landing-context .banner-part.hero-stage--entering--ripple .serach-iu {
    animation: heroOverlayCardRipple 1.85s ease both;
}

body.landing-context .banner-part.hero-stage--entering--zoom .hero-banner-title,
body.landing-context .banner-part.hero-stage--entering--zoom-dezoom .hero-banner-title {
    animation: heroOverlayTitleZoom 1.55s ease both;
}

body.landing-context .banner-part.hero-stage--entering--zoom .hero-banner-title .hero-title-word,
body.landing-context .banner-part.hero-stage--entering--zoom-dezoom .hero-banner-title .hero-title-word {
    animation: none;
}

body.landing-context .banner-part.hero-stage--entering--split-doors .serach-iu {
    animation: heroOverlayCardDoors 1.8s ease both;
}

@keyframes heroOverlayWordIn {
    0% { opacity: 0; transform: translateY(22px) scale(0.9); letter-spacing: 0.2em; }
    100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: normal; }
}

@keyframes heroOverlayCardIn {
    0% { opacity: 0.35; transform: translateX(-28px) scale(0.96); filter: blur(2px); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes heroOverlayChoiceIn {
    0% { opacity: 0; transform: translateY(14px) scale(0.92); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes heroOverlayBouquetIn {
    0% { transform: translateY(18px) rotate(-8deg) scale(0.92); opacity: 0.65; }
    55% { transform: translateY(-6px) rotate(4deg) scale(1.03); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes heroOverlayArrowsPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    45% { opacity: 0.55; transform: translateY(-50%) scale(0.92); }
}

@keyframes heroOverlayDotsIn {
    0% { opacity: 0.4; transform: translateX(-50%) translateY(10px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes heroOverlayTitleBlinds {
    0% { transform: scaleY(0.2); opacity: 0.4; letter-spacing: 0.24em; }
    60% { transform: scaleY(1.04); opacity: 1; }
    100% { transform: scaleY(1); opacity: 1; letter-spacing: normal; }
}

@keyframes heroOverlayCardShake {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-6px) rotate(-0.6deg); }
    36% { transform: translateX(5px) rotate(0.5deg); }
    54% { transform: translateX(-4px); }
    72% { transform: translateX(3px); }
}

@keyframes heroOverlayWordColor {
    0% { filter: hue-rotate(60deg) saturate(1.2); transform: scale(1.06); }
    50% { filter: hue-rotate(25deg) saturate(1.1); }
    100% { filter: hue-rotate(0deg) saturate(1); transform: scale(1); }
}

@keyframes heroOverlayCardRipple {
    0% { transform: scale(0.88); box-shadow: 0 0 0 0 rgba(200, 164, 90, 0.55); }
    45% { transform: scale(1.02); box-shadow: 0 0 0 16px rgba(200, 164, 90, 0); }
    100% { transform: scale(1); }
}

@keyframes heroOverlayTitleZoom {
    0% { transform: scale(0.55); opacity: 0.3; }
    70% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes heroOverlayCardDoors {
    0% { transform: perspective(900px) rotateY(18deg) scale(0.94); opacity: 0.5; }
    100% { transform: perspective(900px) rotateY(0deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.landing-context .banner-part.is-hero-transitioning .hero-banner-title .hero-title-word,
    body.landing-context .banner-part.is-hero-transitioning .serach-iu,
    body.landing-context .banner-part.is-hero-transitioning .hero-bouquet-toss,
    body.landing-context .banner-part.is-hero-transitioning .hero-banner-slider-arrow,
    body.landing-context .banner-part.is-hero-transitioning .hero-banner-slider-dots,
    body.landing-context .banner-part[class*="hero-stage--entering--"] .hero-banner-title,
    body.landing-context .banner-part[class*="hero-stage--entering--"] .serach-iu {
        animation: none;
    }
}

/* ===== Capas de color creativas en TODAS las transiciones (paleta suave, vista delicada) ===== */
.hero-banner-stage .hero-color-flash {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: soft-light;
    will-change: opacity, transform, filter;
}

.hero-banner-stage.is-hero-transitioning .hero-color-flash {
    animation: heroColorFlashPulse 2s cubic-bezier(0.22, 0.82, 0.22, 1) both;
}

.hero-banner-stage.hero-stage--entering--shatter .hero-color-flash {
    background:
        conic-gradient(from 120deg at 30% 40%, rgba(210, 155, 165, 0.38), rgba(220, 190, 130, 0.32), rgba(175, 160, 210, 0.34), rgba(150, 195, 185, 0.3), rgba(210, 155, 165, 0.38));
    filter: blur(20px) saturate(1.15);
    animation-name: heroColorFlashShatter;
}

.hero-banner-stage.hero-stage--entering--fall-pieces .hero-color-flash {
    background:
        linear-gradient(180deg, rgba(205, 165, 175, 0.34) 0%, rgba(165, 185, 205, 0.3) 38%, rgba(220, 200, 150, 0.32) 72%, rgba(185, 165, 205, 0.28) 100%);
    filter: blur(16px) saturate(1.12);
    animation-name: heroColorFlashRainfall;
}

.hero-banner-stage.hero-stage--entering--color-burst .hero-color-flash {
    background:
        radial-gradient(circle at 20% 30%, rgba(205, 150, 165, 0.36), transparent 42%),
        radial-gradient(circle at 78% 24%, rgba(155, 185, 200, 0.32), transparent 40%),
        radial-gradient(circle at 52% 78%, rgba(220, 200, 155, 0.34), transparent 44%),
        radial-gradient(circle at 84% 72%, rgba(185, 165, 205, 0.3), transparent 38%);
    filter: blur(14px) saturate(1.18);
    animation-name: heroColorFlashBurst;
}

.hero-banner-stage.hero-stage--entering--puzzle .hero-color-flash {
    background:
        repeating-conic-gradient(from 18deg at 50% 50%, rgba(200, 164, 90, 0.28) 0 14deg, rgba(155, 175, 195, 0.24) 14deg 28deg, rgba(205, 170, 175, 0.26) 28deg 42deg, transparent 42deg 90deg);
    filter: blur(14px) saturate(1.12);
    animation-name: heroColorFlashPuzzle;
}

.hero-banner-stage.hero-stage--entering--blinds-h .hero-color-flash {
    background: repeating-linear-gradient(
        180deg,
        rgba(205, 160, 170, 0.3) 0 8%,
        rgba(160, 185, 205, 0.28) 8% 16%,
        rgba(220, 200, 155, 0.3) 16% 24%,
        rgba(180, 170, 205, 0.26) 24% 32%,
        transparent 32% 100%
    );
    filter: blur(10px) saturate(1.1);
    animation-name: heroColorFlashBlindsH;
}

.hero-banner-stage.hero-stage--entering--blinds-v .hero-color-flash {
    background: repeating-linear-gradient(
        90deg,
        rgba(215, 175, 155, 0.3) 0 7%,
        rgba(160, 195, 180, 0.28) 7% 14%,
        rgba(200, 165, 185, 0.3) 14% 21%,
        rgba(165, 180, 205, 0.26) 21% 28%,
        transparent 28% 100%
    );
    filter: blur(10px) saturate(1.12);
    animation-name: heroColorFlashBlindsV;
}

.hero-banner-stage.hero-stage--entering--checkerboard .hero-color-flash {
    background:
        linear-gradient(45deg, rgba(200, 155, 170, 0.26) 25%, transparent 25% 50%, rgba(160, 190, 205, 0.24) 50% 75%, transparent 75%),
        linear-gradient(-45deg, rgba(220, 195, 150, 0.26) 25%, transparent 25% 50%, rgba(180, 165, 200, 0.24) 50% 75%, transparent 75%);
    background-size: 48px 48px;
    filter: blur(8px) saturate(1.15);
    animation-name: heroColorFlashChecker;
}

.hero-banner-stage.hero-stage--entering--split-doors .hero-color-flash {
    background:
        linear-gradient(90deg, rgba(220, 185, 140, 0.36) 0%, rgba(220, 185, 140, 0.36) 49.5%, transparent 49.5% 50.5%, rgba(155, 180, 205, 0.34) 50.5%, rgba(155, 180, 205, 0.34) 100%);
    filter: blur(14px) saturate(1.12);
    animation-name: heroColorFlashDoors;
}

.hero-banner-stage.hero-stage--entering--ocean-waves .hero-color-flash {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(150, 190, 205, 0.38), transparent 55%),
        linear-gradient(115deg, rgba(35, 65, 95, 0.32), rgba(120, 175, 185, 0.28), rgba(165, 150, 195, 0.26));
    filter: blur(18px) saturate(1.15);
    animation-name: heroColorFlashOcean;
}

.hero-banner-stage.hero-stage--entering--event-announce .hero-color-flash {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.34), transparent 52%),
        linear-gradient(115deg, rgba(210, 160, 165, 0.32), rgba(155, 180, 200, 0.28), rgba(220, 195, 150, 0.3));
    filter: blur(16px) saturate(0.15);
    animation-name: heroColorFlashEventAnnounce;
}

/* Tintes por tema en cada diapositiva (tonos apagados) */
.hero-banner-stage .hero-color-theme--rose-gold { --hero-tint-a: rgba(210, 160, 165, 0.34); --hero-tint-b: rgba(220, 195, 150, 0.3); }
.hero-banner-stage .hero-color-theme--ocean-teal { --hero-tint-a: rgba(145, 185, 190, 0.32); --hero-tint-b: rgba(130, 165, 195, 0.28); }
.hero-banner-stage .hero-color-theme--violet-dusk { --hero-tint-a: rgba(175, 160, 205, 0.3); --hero-tint-b: rgba(200, 165, 185, 0.28); }
.hero-banner-stage .hero-color-theme--emerald-glow { --hero-tint-a: rgba(150, 195, 175, 0.3); --hero-tint-b: rgba(175, 210, 195, 0.26); }
.hero-banner-stage .hero-color-theme--sunset-amber { --hero-tint-a: rgba(220, 175, 140, 0.34); --hero-tint-b: rgba(205, 160, 165, 0.3); }
.hero-banner-stage .hero-color-theme--magenta-bloom { --hero-tint-a: rgba(195, 155, 175, 0.32); --hero-tint-b: rgba(185, 165, 205, 0.28); }

.hero-banner-stage .hero-banner-slide[class*="is-entering--"]:not(.is-entering--ocean-waves):not(.is-entering--event-announce)::before,
.hero-banner-stage .hero-banner-slide[class*="is-leaving--"]:not(.is-leaving--ocean-waves):not(.is-leaving--event-announce)::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 35% 40%, var(--hero-tint-a, rgba(210, 160, 165, 0.32)), transparent 58%),
        radial-gradient(circle at 72% 62%, var(--hero-tint-b, rgba(155, 180, 200, 0.28)), transparent 55%);
    mix-blend-mode: soft-light;
    filter: blur(14px) saturate(1.12) hue-rotate(var(--hero-hue-shift, 0deg));
    will-change: opacity, filter, transform;
}

.hero-banner-stage .hero-banner-slide[class*="is-entering--"]:not(.is-entering--ocean-waves):not(.is-entering--event-announce)::before {
    animation: heroSlideColorVeilIn 1.95s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.hero-banner-stage .hero-banner-slide[class*="is-leaving--"]:not(.is-leaving--ocean-waves):not(.is-leaving--event-announce)::before {
    animation: heroSlideColorVeilOut 1.75s ease-in both;
}

/* No duplicar velo genérico en ocean-waves (restaura ::before/::after originales) */
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::before,
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::before,
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::after,
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 34%, rgba(150, 190, 205, 0.42) 36%, rgba(55, 95, 130, 0.34) 47%, transparent 49%) 0 0 / 190px 76px repeat,
        linear-gradient(115deg, rgba(35, 65, 95, 0.38), rgba(120, 175, 185, 0.3), rgba(165, 150, 195, 0.28));
    mix-blend-mode: soft-light;
    filter: blur(16px) saturate(1.15);
    will-change: transform, filter, opacity;
}

.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::before {
    animation: heroOceanFoamIn 1.85s cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves::after {
    animation: heroOceanFoamIn 1.85s cubic-bezier(0.18, 0.82, 0.2, 1) 0.12s reverse both;
    transform: scaleY(-1);
}

.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::before,
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves::after {
    animation: heroOceanFoamOut 1.85s ease-in both;
}

/* Fragmentos: matices distintos por pieza (giros suaves) */
.hero-banner-stage .hero-slide-fragment {
    --fx-piece-hue: calc(var(--fx-idx) * 8deg + var(--hero-hue-shift, 0deg));
}

.hero-banner-stage .hero-banner-slide.is-entering--puzzle .hero-slide-puzzle--in .hero-slide-puzzle-piece {
    animation-name: heroPuzzlePieceIn, heroFragmentColorIn;
    animation-duration: 2.25s, 2.1s;
    animation-timing-function: cubic-bezier(0.16, 0.9, 0.22, 1), ease-out;
    animation-fill-mode: both, both;
    animation-delay: calc(var(--fx-idx) * 30ms), calc(var(--fx-idx) * 30ms);
}

.hero-banner-stage .hero-banner-slide.is-leaving--puzzle .hero-slide-puzzle--out .hero-slide-puzzle-piece {
    animation-name: heroPuzzlePieceOut, heroFragmentColorOut;
    animation-duration: 1.95s, 1.85s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.68, 0.2), ease-in;
    animation-fill-mode: both, both;
    animation-delay: calc(var(--fx-idx) * 24ms), calc(var(--fx-idx) * 24ms);
}

.hero-banner-stage .hero-banner-slide.is-entering--shatter .hero-slide-fragments--in .hero-slide-fragment,
.hero-banner-stage .hero-banner-slide.is-entering--fall-pieces .hero-slide-fragments--in .hero-slide-fragment {
    animation-name: heroPptShardAssemble, heroFragmentColorIn;
    animation-duration: 2.15s, 2.05s;
    animation-timing-function: cubic-bezier(0.16, 0.9, 0.22, 1), ease-out;
    animation-fill-mode: both, both;
}

.hero-banner-stage .hero-banner-slide.is-leaving--shatter .hero-slide-fragments--out .hero-slide-fragment,
.hero-banner-stage .hero-banner-slide.is-leaving--fall-pieces .hero-slide-fragments--out .hero-slide-fragment {
    animation-name: heroPptShardExplode, heroFragmentColorOut;
    animation-duration: 1.95s, 1.85s;
    animation-timing-function: cubic-bezier(0.22, 0.72, 0.24, 1), ease-in;
    animation-fill-mode: both, both;
}

.hero-banner-stage .hero-banner-slide.is-entering--fall-pieces .hero-slide-fragments--in .hero-slide-fragment {
    animation-name: heroPptShardFallIn, heroFragmentColorIn;
    animation-duration: 2.2s, 2.05s;
}

.hero-banner-stage .hero-banner-slide.is-leaving--fall-pieces .hero-slide-fragments--out .hero-slide-fragment {
    animation-name: heroPptShardDropOut, heroFragmentColorOut;
    animation-duration: 1.75s, 1.85s;
}

.hero-banner-stage .hero-slide-fragment-img {
    filter: saturate(1.05) hue-rotate(calc(var(--fx-piece-hue) * 0.35));
}

.hero-banner-stage .hero-banner-slide[class*="is-entering--"] .hero-slide-fragment-img {
    animation: heroFragmentImgColorIn 2s ease both;
    animation-delay: calc(var(--fx-idx) * 10ms);
}

/* Persianas y tablero: franjas de color */
.hero-banner-stage .hero-slide-blind::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        118deg,
        rgba(205, 160, 170, 0.26),
        rgba(160, 185, 200, 0.24),
        rgba(220, 200, 155, 0.26),
        rgba(180, 165, 200, 0.22)
    );
    mix-blend-mode: soft-light;
    filter: hue-rotate(calc(var(--fx-idx) * 10deg + var(--hero-hue-shift, 0deg))) saturate(1.12);
}

.hero-banner-stage .hero-banner-slide.is-entering--blinds-h .hero-slide-blinds--in .hero-slide-blind::after,
.hero-banner-stage .hero-banner-slide.is-entering--blinds-v .hero-slide-blinds--in .hero-slide-blind::after,
.hero-banner-stage .hero-banner-slide.is-entering--checkerboard .hero-slide-blinds--in .hero-slide-blind::after,
.hero-banner-stage .hero-banner-slide.is-entering--split-doors .hero-slide-blinds--in .hero-slide-blind::after {
    animation: heroBlindColorIn 1.9s ease both;
    animation-delay: calc(var(--fx-idx) * 22ms);
}

.hero-banner-stage .hero-banner-slide.is-leaving--blinds-h .hero-slide-blinds--out .hero-slide-blind::after,
.hero-banner-stage .hero-banner-slide.is-leaving--blinds-v .hero-slide-blinds--out .hero-slide-blind::after,
.hero-banner-stage .hero-banner-slide.is-leaving--checkerboard .hero-slide-blinds--out .hero-slide-blind::after,
.hero-banner-stage .hero-banner-slide.is-leaving--split-doors .hero-slide-blinds--out .hero-slide-blind::after {
    animation: heroBlindColorOut 1.65s ease-in both;
    animation-delay: calc(var(--fx-idx) * 18ms);
}

.hero-banner-stage .hero-banner-slide.is-entering--split-doors .hero-slide-blinds--in .hero-slide-blind:nth-child(1)::after {
    filter: hue-rotate(12deg) saturate(1.1);
    background: linear-gradient(135deg, rgba(220, 190, 145, 0.32), rgba(205, 165, 170, 0.28));
}

.hero-banner-stage .hero-banner-slide.is-entering--split-doors .hero-slide-blinds--in .hero-slide-blind:nth-child(2)::after {
    filter: hue-rotate(160deg) saturate(1.1);
    background: linear-gradient(135deg, rgba(155, 180, 205, 0.32), rgba(175, 165, 200, 0.28));
}

/* Fondo: pulso cromático en todas las transiciones de capa completa */
.hero-banner-stage .hero-banner-slide[class*="is-entering--"]:not([class*="is-entering--shatter"]):not([class*="is-entering--fall-pieces"]):not([class*="is-entering--color-burst"]):not([class*="is-entering--blinds-"]):not([class*="is-entering--checkerboard"]):not([class*="is-entering--split-doors"]):not([class*="is-entering--event-announce"]) .hero-slide-bg,
.hero-banner-stage .hero-banner-slide.is-entering--ocean-waves .hero-slide-bg {
    animation: heroSlideBgColorPulseIn 1.85s cubic-bezier(0.2, 0.82, 0.22, 1) both !important;
}

.hero-banner-stage .hero-banner-slide[class*="is-leaving--"]:not([class*="is-leaving--shatter"]):not([class*="is-leaving--fall-pieces"]):not([class*="is-leaving--color-burst"]):not([class*="is-leaving--blinds-"]):not([class*="is-leaving--checkerboard"]):not([class*="is-leaving--split-doors"]):not([class*="is-leaving--event-announce"]) .hero-slide-bg,
.hero-banner-stage .hero-banner-slide.is-leaving--ocean-waves .hero-slide-bg {
    animation: heroSlideBgColorPulseOut 1.72s ease-in both !important;
}

@keyframes heroColorFlashPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    18% { opacity: 0.42; }
    55% { opacity: 0.28; transform: scale(1.02); }
}

@keyframes heroColorFlashShatter {
    0% { opacity: 0; transform: scale(0.7) rotate(-8deg); filter: blur(22px) hue-rotate(0deg); }
    30% { opacity: 0.48; filter: blur(16px) hue-rotate(35deg); }
    100% { opacity: 0; transform: scale(1.08) rotate(6deg); filter: blur(26px) hue-rotate(70deg); }
}

@keyframes heroColorFlashRainfall {
    0% { opacity: 0; transform: translateY(-18%); }
    35% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(14%); filter: hue-rotate(45deg); }
}

@keyframes heroColorFlashBurst {
    0% { opacity: 0; filter: blur(18px) hue-rotate(0deg) saturate(1.15); transform: scale(0.9); }
    25% { opacity: 0.45; filter: blur(10px) hue-rotate(35deg) saturate(1.2); }
    70% { opacity: 0.32; filter: blur(12px) hue-rotate(60deg) saturate(1.12); }
    100% { opacity: 0; transform: scale(1.04); filter: blur(20px) hue-rotate(80deg); }
}

@keyframes heroColorFlashPuzzle {
    0% { opacity: 0; transform: scale(0.6) rotate(-12deg); filter: hue-rotate(0deg); }
    35% { opacity: 0.4; transform: scale(1.03) rotate(4deg); filter: hue-rotate(25deg); }
    100% { opacity: 0; transform: scale(1.05) rotate(8deg); filter: hue-rotate(50deg); }
}

@keyframes heroColorFlashBlindsH {
    0% { opacity: 0; transform: translateY(-100%); }
    40% { opacity: 0.38; }
    100% { opacity: 0; transform: translateY(100%); filter: hue-rotate(30deg); }
}

@keyframes heroColorFlashBlindsV {
    0% { opacity: 0; transform: translateX(-100%); }
    40% { opacity: 0.38; }
    100% { opacity: 0; transform: translateX(100%); filter: hue-rotate(-25deg); }
}

@keyframes heroColorFlashChecker {
    0% { opacity: 0; transform: scale(1.3); background-position: 0 0, 24px 24px; }
    45% { opacity: 0.42; filter: hue-rotate(20deg); }
    100% { opacity: 0; transform: scale(0.96); background-position: 48px 48px, 72px 72px; filter: hue-rotate(45deg); }
}

@keyframes heroColorFlashDoors {
    0% { opacity: 0; transform: scaleX(0.2); }
    35% { opacity: 0.45; }
    100% { opacity: 0; transform: scaleX(1.04); filter: hue-rotate(40deg); }
}

@keyframes heroColorFlashOcean {
    0% { opacity: 0; transform: translateY(12%) scale(1.1); filter: hue-rotate(0deg); }
    40% { opacity: 0.4; filter: hue-rotate(18deg) saturate(1.12); }
    100% { opacity: 0; transform: translateY(-10%) scale(1.02); filter: hue-rotate(35deg); }
}

@keyframes heroColorFlashEventAnnounce {
    0%, 58% { opacity: 0; filter: blur(18px) grayscale(1) saturate(0); transform: scale(1.04); }
    68% { opacity: 0.28; filter: blur(12px) grayscale(0.55) saturate(0.45); }
    80% { opacity: 0.42; filter: blur(8px) grayscale(0.15) saturate(0.95); }
    100% { opacity: 0; filter: blur(16px) grayscale(0) saturate(1.08); transform: scale(1); }
}

@keyframes heroSlideColorVeilIn {
    0% { opacity: 0; transform: scale(1.12); filter: blur(20px) saturate(1.2) hue-rotate(calc(var(--hero-hue-shift, 0deg) + 30deg)); }
    45% { opacity: 0.38; }
    100% { opacity: 0; transform: scale(1); filter: blur(10px) saturate(1.05) hue-rotate(var(--hero-hue-shift, 0deg)); }
}

@keyframes heroSlideColorVeilOut {
    0% { opacity: 0.32; filter: blur(6px) saturate(1.08); }
    100% { opacity: 0; transform: scale(0.94); filter: blur(18px) saturate(1.15) hue-rotate(calc(var(--hero-hue-shift, 0deg) + 50deg)); }
}

@keyframes heroFragmentColorIn {
    0% { filter: hue-rotate(calc(var(--fx-piece-hue) + 35deg)) saturate(1.2) brightness(1.06); opacity: 0.5; }
    55% { filter: hue-rotate(calc(var(--fx-piece-hue) + 15deg)) saturate(1.1) brightness(1.03); opacity: 1; }
    100% { filter: hue-rotate(calc(var(--fx-piece-hue) * 0.15)) saturate(1.02) brightness(1); opacity: 1; }
}

@keyframes heroFragmentColorOut {
    0% { filter: hue-rotate(calc(var(--fx-piece-hue) * 0.15)) saturate(1.02); opacity: 1; }
    100% { filter: hue-rotate(calc(var(--fx-piece-hue) + 55deg)) saturate(1.15) brightness(0.85); opacity: 0; }
}

@keyframes heroFragmentImgColorIn {
    0% { filter: saturate(1.18) hue-rotate(calc(var(--fx-piece-hue) + 25deg)) brightness(1.05); }
    100% { filter: saturate(1.03) hue-rotate(calc(var(--fx-piece-hue) * 0.2)); }
}

@keyframes heroBlindColorIn {
    0% { opacity: 0; transform: scale(1.04); }
    40% { opacity: 0.38; }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes heroBlindColorOut {
    0% { opacity: 0.35; }
    100% { opacity: 0; filter: hue-rotate(45deg) saturate(1.12); }
}

@keyframes heroSlideBgColorPulseIn {
    0% { filter: blur(10px) saturate(1.15) hue-rotate(calc(var(--hero-hue-shift, 0deg) + 25deg)) brightness(1.06); }
    55% { filter: blur(2px) saturate(1.08) hue-rotate(calc(var(--hero-hue-shift, 0deg) + 10deg)) brightness(1.03); }
    100% { filter: blur(0) saturate(1) hue-rotate(0deg) brightness(1); }
}

@keyframes heroSlideBgColorPulseOut {
    0% { filter: blur(0) saturate(1) brightness(1); }
    100% { filter: blur(14px) saturate(1.12) hue-rotate(calc(var(--hero-hue-shift, 0deg) + 40deg)) brightness(0.88); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-stage .hero-color-flash,
    .hero-banner-stage .hero-banner-slide[class*="is-entering--"]::before,
    .hero-banner-stage .hero-banner-slide[class*="is-leaving--"]::before,
    .hero-banner-stage .hero-slide-blind::after,
    .hero-banner-stage .hero-banner-slide[class*="is-entering--"] .hero-slide-fragment-img {
        animation: none !important;
        opacity: 0 !important;
    }
}

body.landing-context {
    opacity: 0;
    animation: landingFadeIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards;
}

@keyframes landingFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}