/*
Theme Name: Kadence Child
Theme URI: https://www.liquidweb.com/software/kadence/
Template: kadence
Author: Kadence WP
Author URI: https://www.liquidweb.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.5.2.1789487088
Updated: 2026-09-15 17:44:48

*/


/* =========================================================
   ESCENA DE SCROLL
   ========================================================= */

.scroll-scene {
    position: relative;

    /*
     * 300vh = 200vh reales de recorrido,
     * porque 100vh están ocupados por el viewport.
     */
    height: 300vh;

    /*
     * Si Kadence / el theme limita el ancho de la página,
     * esto permite que la escena llegue a los bordes.
     */
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);

    overflow: visible;
}


/*
 * MUY IMPORTANTE.
 *
 * Este es el wrapper que genera Kadence entre
 * .scroll-scene y .scroll-scene__sticky.
 *
 * Tiene que ocupar TODA la altura de la escena.
 */
.scroll-scene > .kt-row-column-wrap {
    position: relative;

    height: 100%;
    min-height: 100%;

    width: 100%;
    max-width: none;

    padding: 0;
}


/* =========================================================
   VIEWPORT STICKY
   ========================================================= */

.scroll-scene__sticky {
    position: sticky !important;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    padding: 0 !important;
    margin: 0 !important;
}


/*
 * Interior automático de la columna Kadence
 */
.scroll-scene__sticky > .kt-inside-inner-col {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 100svh;

    padding: 0 !important;

    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

/*
 * Estado inicial:
 *
 * ┌──────────────┬──────────────┐
 * │              │              │
 * │     HERO     │    IMAGEN    │
 * │     50%      │     50%      │
 * │              │              │
 * └──────────────┴──────────────┘
 */

.scene-hero {
    position: absolute;

    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    z-index: 10;

    box-sizing: border-box;

    /*
     * Ya NO centramos verticalmente.
     */
    display: flex;
    align-items: flex-start;

    /*
     * Acerca el contenido al menú.
     *
     * Puedes probar 70px / 90px / 110px.
     */
    padding:
        clamp(70px, 8vh, 110px)
        clamp(45px, 6vw, 110px)
        60px;
    padding-right: 0;
    will-change: opacity, transform;
}


.scene-hero > .wp-block-group__inner-container {
    width: 100%;
    max-width: 700px;
}


/* =========================================================
   CONTENEDOR DE LA IMAGEN
   ========================================================= */

/*
 * IMPORTANTE:
 *
 * Animaremos ESTE elemento:
 *
 * left: 50%  -> 0
 * width: 50% -> 100%
 *
 * Así la propia columna derecha se convierte progresivamente
 * en el fondo completo.
 */

.scene-media {
    position: absolute;

    top: 0;
    left: 50%;

    width: 50%;
    height: 100%;

    z-index: 2;

    overflow: visible;

    will-change: left, width;
}


.scene-media > .wp-block-group__inner-container {
    position: relative;

    width: 100%;
    height: 100%;

    max-width: none !important;

    padding: 0;

    overflow: visible;
}


/* =========================================================
   IMAGEN / MÁSCARA
   ========================================================= */

.scene-image {
    position: absolute;

    /*
     * La alineamos aproximadamente con el comienzo
     * del contenido del hero.
     */
    /*top: clamp(65px, 7vh, 100px);*/
    /*top: 0;

    left: 50%;

    /*
     * IMPORTANTE:
     * ahora dejamos que la máscara sea considerablemente
     * más grande que antes.
     */
    /*width: 135%;

    max-width: none !important;

    margin: 0;

    /*
     * Solamente centramos horizontalmente.
     * Ya NO usamos translateY(-50%).
     */
    /*transform-origin: center center;

    will-change: transform;*/
}
.scene-image {
    position: absolute;
    top: 0;
    left: 46%;

    width: 115%;
    max-width: none !important;
    margin: 0;

    transform-origin: center center;

    /* Máscara */
    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /*
     * Ajusta este valor a tu forma inicial.
     * 70-85% suele ser un buen punto de partida.
     */
    -webkit-mask-size: 95% auto;
    mask-size: 95% auto;

    will-change:
        transform,
        -webkit-mask-size,
        mask-size;
}



    .scene-image img {
    --mask-size: 74%;

    display: block;
    width: 100%;
    height: auto;

    object-fit: cover;

    -webkit-mask-image: url(https://new.anelis.com/wp-content/uploads/2026/09/mascara3.svg);
    mask-image: url(https://new.anelis.com/wp-content/uploads/2026/09/mascara3.svg);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: var(--mask-size) auto;
    mask-size: var(--mask-size) auto;

    will-change: -webkit-mask-size, mask-size;
}

/* =========================================================
   OVERLAY OSCURO
   ========================================================= */

.scene-overlay {
    position: absolute;

    inset: 0;

    z-index: 6;

    background:
        linear-gradient(
            180deg,
            rgba(6, 15, 34, 0.45) 0%,
            rgba(6, 15, 34, 0.68) 100%
        );

    opacity: 0;

    pointer-events: none;

    will-change: opacity;
}


/* =========================================================
   CONTENIDO FINAL
   ========================================================= */

.scene-content {
    position: absolute;

    inset: 0;

    z-index: 20;

    pointer-events: none;
}


/*
 * Esta estructura coloca:
 *
 * TITULAR arriba
 *
 *
 *
 *
 * FILA abajo
 */

.scene-content > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: min(calc(100% - 140px), 1540px);
    height: 100%;

    max-width: none !important;

    margin: 0 auto;

    padding:
        clamp(60px, 8vh, 110px)
        0
        clamp(50px, 8vh, 100px);

    box-sizing: border-box;
}


/* =========================================================
   TITULAR FINAL
   ========================================================= */

.titular-secundario {
    margin: 0;

    will-change: opacity, transform;
}


/* =========================================================
   FILA FINAL
   ========================================================= */

.fila-elementos {
    width: 100%;

    margin: 0;
}


.fila-elementos .wp-block-kadence-column {
    will-change: opacity, transform;
}




/* =========================================================
   MOBILE < 768px
   Hero natural + escena de imagen posterior
   ========================================================= */

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       SCROLL SCENE

       Una única fuente de recorrido de scroll.

       240svh significa:
       - 100svh de viewport
       - aproximadamente 140svh de recorrido animado

       Puedes ajustar 220 / 240 / 260 después.
       ===================================================== */

    .scroll-scene {
        position: relative;

        height: 240svh !important;
        min-height: 240svh !important;

        width: 100vw;

        overflow: visible;
    }


    /*
     * CRÍTICO:
     *
     * el wrapper Kadence tiene que tener exactamente
     * la misma altura que scroll-scene.
     */

    .scroll-scene > .kt-row-column-wrap {
        position: relative;

        height: 100% !important;
        min-height: 100% !important;

        width: 100%;

        padding: 0;

        overflow: visible;
    }


    /* =====================================================
       VIEWPORT STICKY

       Este es realmente "la pantalla" durante toda
       la animación.
       ===================================================== */

    .scroll-scene__sticky {
        position: sticky !important;

        top: 0;

        width: 100%;

        height: 100svh !important;
        min-height: 100svh !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden;
    }


    .scroll-scene__sticky > .kt-inside-inner-col {
        position: relative;

        width: 100%;

        height: 100%;
        min-height: 100%;

        padding: 0 !important;

        overflow: hidden;


        /*
         * En el DOM tienes primero media y luego hero.
         *
         * Visualmente lo ordenamos:
         *
         * HERO
         * MEDIA
         */

        display: flex;
        flex-direction: column;
    }


    /* =====================================================
       HERO

       Altura completamente natural.

       NO 58%.
       NO height fijo.
       ===================================================== */

    .scene-hero {
        position: relative;

        top: auto;
        left: auto;

        order: 1;

        flex: 0 0 auto;

        width: 100%;
        height: auto;

        min-height: 0;

        box-sizing: border-box;

        padding:
            35px
            24px
            35px;

        z-index: 10;

        will-change:
            opacity,
            transform;
    }


    .scene-hero > .wp-block-group__inner-container {
        width: 100%;
        max-width: none;
    }


    /* =====================================================
       MEDIA

       FLUJO NATURAL después del Hero.

       No mide 100vh inicialmente.

       Así no existe ese gran bloque invisible que teníamos
       anteriormente.
       ===================================================== */

    .scene-media {
        position: relative;

        top: auto;
        left: auto;

        order: 2;

        flex: 0 0 auto;

        width: 100%;

        /*
         * Altura inicial de la fotografía.
         *
         * NO es la altura final.
         * GSAP la llevará a 100svh.
         */

        height: min(50svh, 500px);

        min-height: 0;

        margin: 0;

        z-index: 5;

        overflow: visible;

        will-change:
            transform,
            height;
    }


    .scene-media > .wp-block-group__inner-container {
        position: relative;

        width: 100%;
        height: 100%;

        max-width: none !important;

        margin: 0;
        padding: 0;

        overflow: visible;
    }


    /* =====================================================
       FIGURE
       ===================================================== */

    .scene-image {
        position: absolute;

        top: 0;
        left: 50%;

        width: 112%;
        height: 100%;

        max-width: none !important;

        margin: 0;

        transform-origin: center center;

        will-change:
            transform,
            width,
            height;
    }


    /* =====================================================
       IMG + MÁSCARA
       ===================================================== */

    .scene-image img {
        --mask-size: 74%;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;

        -webkit-mask-image:
            url(https://new.anelis.com/wp-content/uploads/2026/09/mascara.svg);

        mask-image:
            url(https://new.anelis.com/wp-content/uploads/2026/09/mascara.svg);

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;

        -webkit-mask-position: center;
        mask-position: center;

        -webkit-mask-size:
            var(--mask-size) auto;

        mask-size:
            var(--mask-size) auto;
    }


    /* =====================================================
       OVERLAY

       Cubre todo el viewport sticky.
       ===================================================== */

    .scene-overlay {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 15;

        pointer-events: none;
    }


    /* =====================================================
       CONTENIDO FINAL
       ===================================================== */

    .scene-content {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 20;

        pointer-events: none;
    }


    .scene-content >
    .wp-block-group__inner-container {

        width: calc(100% - 40px);
        height: 100%;

        max-width: none !important;

        margin: 0 auto;

        padding:
            30px
            0
            28px;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }


    /* =====================================================
       FILA FINAL
       ===================================================== */

    .fila-elementos {
        width: 100%;
        margin: 0;
    }


    .fila-elementos > .kt-row-column-wrap {
        grid-template-columns: 1fr !important;

        row-gap: 12px;
    }


    .fila-elementos .wp-block-kadence-column {
        margin-top: 0;
        margin-bottom: 0;
    }

}
@media(max-width: 1520px){
    .titular-hero{
        max-width:643px;
    }
}
/***************/

.juntos-25{
    display:none;
}
@media (min-width:768px){
.juntos-25{
    display:block;
    max-width: 280px;
    position: absolute;
    right: 20px;
    top: clamp(324px, 30vw, 640px);
    z-index: 400;
}
}