body {
    #main-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        & .block {
            background-color: transparent;
            border-bottom: none;

            &::before {
                content: '';
                position: absolute;
                top: 62.43px;
                height: 1px;
                width: 100%;
                background-color: color-mix(in srgb, var(--wp--preset--color--footer-background) 50%, transparent);

            }


            &::after {
                content: '';
                position: absolute;
                top: 64.43px;
                height: 1px;
                width: 100%;
                background-color: color-mix(in srgb, var(--wp--preset--color--base) 5%, transparent);
            }

            & .content {
                & .site-brand {
                    & a {
                        color: var(--wp--preset--color--base);
                    }
                }

                & .avante-navigation {
                    & .main-navigation {
                        &>ul {
                            & li {
                                &>a {
                                    color: var(--wp--preset--color--base);

                                    &:hover {
                                        background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
                                    }
                                }
                            }
                        }
                    }

                    & .avante-custom-searchform {
                        & .section {
                            & .wp-block-search__input {
                                color: var(--wp--preset--color--base);
                                background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);

                                &::placeholder {
                                    color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
                                }
                            }

                            & .buttons-container {
                                & #searchsubmit {
                                    color: var(--wp--preset--color--base);

                                    &:hover {
                                        background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
                                    }
                                }
                            }
                        }
                    }
                }

                & .search-mobile__button {
                    &.active {
                        &:hover {
                            background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
                        }

                        &::before {
                            opacity: .2;
                        }

                        & .icon--wrapper {
                            & .bar {
                                background-color: var(--wp--preset--color--base);
                            }

                            &::before {
                                border-color: var(--wp--preset--color--base);
                            }

                            &::after {
                                background-color: var(--wp--preset--color--base);
                            }
                        }
                    }

                    & .icon--wrapper {
                        & .bar {
                            background-color: var(--wp--preset--color--base);
                        }

                        &::before {
                            border-color: var(--wp--preset--color--base);
                        }

                        &::after {
                            background-color: var(--wp--preset--color--base);
                        }
                    }
                }
            }
        }
    }

    .site-main {
        border-top: 1px solid var(--wp--preset--color--contrast) !important;
        overflow: visible;

        /* ── Sticky overlap: cada sección queda pegada y la siguiente sube por encima ── */
        &>.block {
            position: sticky;
            top: 0;
            width: 100%;
            transform-origin: center top;
            transition: filter 0.6s ease, opacity 0.6s ease;

            /* Estado: la sección queda debajo de la siguiente — baja saturación */
            &.is-bottom {
                filter: saturate(0.1) contrast(.7);
                pointer-events: none;
            }

            /* El último bloque no necesita margen inferior */
            &:last-of-type {
                margin-bottom: 0;
            }
        }

        /* Estilos de contenido de los bloques */
        & .block {
            & .content {
                padding: clamp(2rem, 5vw, 10rem) 0;

                & .span-pretext {
                    color: #285386;
                    font-size: clamp(.8rem, 2vw, 1rem);
                    text-transform: uppercase;
                    font-weight: 500;
                    letter-spacing: 2px;
                    transition: opacity 0.2s ease;
                }

                /* ── Efecto de entrada scramble ──────────────────── */
                & .pretext-reveal {
                    opacity: 0;
                    transition: opacity 1.4s ease;

                    /* Visible tras la animación de entrada */
                    &.is-visible {
                        opacity: 1;
                    }
                }

                /* ── Efecto de entrada por palabras ─────────────── */
                & .title-reveal {
                    /* Las palabras individuales controlan su visibilidad */
                }

                & .title-reveal .title-word {
                    display: inline-block;
                    opacity: 0;
                    transform: translateY(0.5em);
                    transition:
                        opacity 1.4s ease,
                        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
                    transition-delay: calc(var(--word-index) * 120ms);
                }

                & .title-reveal.is-visible .title-word {
                    opacity: 1;
                    transform: translateY(0);
                }

                & .title-section {
                    font-size: clamp(1rem, 2.5vw, 2.5rem);
                    line-height: 1.2;
                }
            }

            & .cta-container {
                .btn {
                    &.primary {
                        background-color: var(--wp--preset--color--focus) !important;
                    }
                }
            }
        }
    }
}

.card-reveal {
    opacity: 0;
    transform: perspective(1000px) scale(0.2) rotateX(-60deg) rotateY(-30deg) rotateZ(0deg) translateY(2rem);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease, opacity .3s ease;

    &.is-visible {
        opacity: 1;
        transform: perspective(1000px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);
    }
}