@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}





/* temp */


.s_sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
    /* view-timeline-name: --image; */
    /* view-timeline-axis: block; */
}

.img_movey {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* view-timeline-name: --image; */
    /* view-timeline-axis: block; */
}

.bloque-c {
    width: 188px;
    height: 43vh;
    margin: 13px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 0 15px #0000001a;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}

/* .texto-scroll {
    position: absolute;
    top: 139px;
    left: 0;
    width: 100%;
    --numcards: 4;
    --index: 9;
    --index0: calc(var(--index) - 1);
    --reverse-index: calc(var(--numcards) - var(--index0));

    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-name: scalem;
    animation-timeline: scroll(root);

}

@keyframes scalem {
    0% {
        transform: scale(0.9) translateY(0%);

    }

    

    50% {
        transform: scale(0.9) translateY(-70%);
    }

    100% {
        transform: scale(0.9) translateY(-100%);
    }
} */


/* bulge texto scroll */
/* 
.texto-scroll {

    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: bulge-effect;
    animation-timeline: scroll(root);
    animation-range-start: normal;
    animation-range: entry 0% cover 50%;

}

@keyframes bulge-effect {
    0% {
        transform: scale(1);
        transform: translateY(0%);
    }

    50% {
        transform: scale(1.1);
        transform: translateY(-50%);
    }

    100% {
        transform: scale(1);
        transform: translateY(-100%);
    }
} */


/* bulge texto scroll  */
.z-in-pos-rel {
    z-index: 1;
    position: relative;

}

/* Aplica la animación */
/* animation: moverTexto linear animate-in, linear animate-out;
        animation-duration: auto;
        animation-timeline: scroll();
        animation-range: entry, exit; */
/* } */





.box-ac {
    /* background: #9c9ccf; */
    height: 190px;
    /* animation-timeline: --image; */
    /* animation-name: mscale; */

    /* animation-timing-function: ease-in-out; */
    /* animation-fill-mode: both; */
    /* animation-range: entry-crossing 10% exit-crossing 50% ; */



    /* animation: linear animate-in, linear animate-out;
                animation-duration: auto;
                animation-timeline: scroll();
                animation-range: entry, exit; */


}

@keyframes mscale {
    0% {
        /* scale: 1; */
        transform: scale(60%);
    }

    100% {
        /* scale: 1.2; */
        transform: scale(100%);
    }
}

@keyframes moverTexto {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-80%);
    }
}


/* temp */


/* animacion text scroll  */
 
.wrapper {
    display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 3vh; */
        /* padding-top: 0vh; */
        animation-name: scroll_box;
        /* animation-timeline: scroll(root); */
        position: relative;
        height: 136px;
}
@keyframes scroll_box {
    0% {
        transform: translateY(0%) ;
    }

    20% {
        transform: translateY(-50%) ;
    }

    100% {
        transform: translateY(-100%);
    }
}
.box-a{
        font-size: 2rem;
            color: #333;
            animation: scaleInCenter 1s linear(0 0%, 1.03 32.21%, 1 100%);
            animation-timeline: view();
            /* animation-range: entry 0% cover 89%; */
            animation-fill-mode: both;
            transform: scale(0.3);
            z-index: 99;
}
    
        @keyframes scaleInCenter {
            20% {
                transform:  scale(0.3) ;
            }
             /* 2% {
            transform: scale(0.7);
        }  */
            50% {
                transform:  scale(0.7);
            }
            100%{
                    transform: scale(0.3);
            }
        } 
/* 
        .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
  padding-top: 0vh;
  position: relative; 
  animation-name: scroll_box;
  animation-timeline: scroll();
}

@keyframes scroll_box {
  0% { transform: translateY(0%); }
  20% { transform: translateY(-50%); }
  100% { transform: translateY(-100%); }
}

.box-a {
  font-size: 2rem;
  color: #333;
  transform: scale(0.3);
  z-index: 99;
  transition: transform 0.6s ease;
}

.box-a.active {
  transform: scale(1);
} */
/* animacion text scroll  */

.hide_nav {
    animation-name: hide_nav_scroll;
    animation-timeline: scroll(root);
    animation-fill-mode: both;
}

@keyframes hide_nav_scroll {
    0% {
        display: none;
    }

    120% {
        display: block;
    }
}

/* nav animate  */
/* .bar_nav_visible_b{
    display: none;
    opacity: 0;
        visibility: hidden;
}

 .bar_nav {
        width: 163px;
    } */

        .bar_nav {
            width: 163px;
        }
    
        .bar_nav_visible_b {
            opacity: 1;
                visibility: visible;
                display: block;
        }
    
      

@supports (animation-timeline: scroll()) {
    .two_section {
        animation: trigger steps(1) both, fade linear both;
        animation-timeline: scroll();
        /* container-type: size; */
    }

    /* @container style(--animate: true) {
        */
    @container style(--animate: true) {
        .bar_nav {
            animation: scale_w 600ms both,
                text-gradient 1s cubic-bezier(0, 0.55, 0.45, 1) both;
        }

        .bar_nav_visible_b {
            animation: hide_nav_scroll2 600ms both,
                text-gradient 1s cubic-bezier(0, 0.55, 0.45, 1) both;
        }

        .bar_nav_hide_b {
            animation: hide_nav_scroll3 600ms both,
                text-gradient 1s cubic-bezier(0, 0.55, 0.45, 1) both;
        }
    }

    @container style(--animate: false) {
        .bar_nav {
            width: 163px;
        }

        .bar_nav_visible_b {
            opacity: 0;
            visibility: hidden;
            display: none;
        }

        .bar_nav_hide_b {
            opacity: 1;
            visibility: visible;
            display: block;
        }
    }
}

@keyframes trigger {
    0% {
        --animate: false;
    }

    1% {
        --animate: true;
    }
}

@keyframes scale_w {
    from {
        /* scale: var(0.5); */
        width: 163px;
    }

    to {
        /* scale: var(1.001); */
        width: 382px;
    }
}

@keyframes hide_nav_scroll2 {

    /* 0% {
        display: none;
    } */
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}
  @media (min-width : 768px) {
@keyframes hide_nav_scroll3 {
    /* Laptop */
      
to {
        opacity: 1;
        visibility: hidden;
    }
        }
               
}

/* nav animate  */
/* .nav_animate{
            animation-name: v_scroll ;
            animation-timeline: scroll();
}

 
@keyframes v_scroll {
    0% {
        width: 163px;
    }

    1% {
        width: 397px;
    }
}
@keyframes shrinkFadeOut {
    0% {
        opacity: 1;
    }

    0.1% {
        opacity: 0;
    }
    100%{
        opacity: 0;
    } 
}*/

/* comentarios */

/* .comment {
    display: inline-block;
    animation-name: moverComment;
    animation-timeline: scroll(root);
}

@keyframes moverComment {
    from {
        transform: translateX(-150%);
    }

    to {
        transform: translateX(0%);
    }
} */

.comment {

    display: inline-block;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-name: moverComment;
    animation-timeline: scroll(root);

}

@keyframes moverComment {
    0% {
        transform: scale(0.9) translateX(120%);
    }

    50% {
        transform: scale(1.2) translateX(80%);
    }

    100% {
        transform: scale(0.9) translateX(0%);
    }
}

/* comentarios */

/* bw */


.fixe_img {
    /* The image used */
    background-image: url("/img/img_parallax_a.jpg");

    /* Set a specific height */
    min-height: 500px;
    /* background: #ff0000; */

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img_move {
    width: 100%;
    /* background: #d9d9dc; */
    height: 100vh;
    margin-top: 100vh;


    background-image: url("/img/img_parallax_b.jpg");

    /* Set a specific height */
    min-height: 500px;
    /* background: #ff0000; */

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 
.fixed_move {

    animation-direction: alternate;
    animation-name: moverBW;
    animation-timeline: scroll(root);

}

@keyframes moverBW {
    0% {
        transform:  translateY(0%);
    }

     50% {
        transform: translateY(-50%);
    } 

    100% {
        transform:  translateY(-50%);
    }
}

.img_move {
    width: 100%;
    background: #d9d9dc;
        height: 100vh;
            margin-top: 100vh;
} */
/* bw */

.scrollvisibleInv {
    animation-name: shrinkFadeOut;
    animation-timeline: scroll(root);
    animation-fill-mode: both;
}

* {
    font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.de-a {
    height: 81px;
    z-index: 9;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 0) 100%);
}

.de-b {
    height: 81px;
    z-index: 9;
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 0) 100%);
}

html,
body {
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
    width: 100%;
    /* height: 1900px; */

}

.backg-aj {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}



.sq {
    width: 22px;
    height: 22px;
    background: #1dac7f;
    margin-top: 7px;
    margin-bottom: 7px;
}


.temp-circle {
    height: 100px;
    background: #b2b2b2;
    width: 144px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 66px;
    margin-bottom: 8px;

}

/* animation 001 */
@keyframes parallax {
    from {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
    }

    to {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        transform: translate3d(0px, 0px, 0px) scale3d(0.93, 0.93, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }


}

@keyframes parallax-move2 {
    from {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    to {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

}



#sticky-parallax-header {
    /* position: absolute; */
    /* animation: parallax .40s ease-in-out .10s 1 normal forwards; */
    animation-name: parallax;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-delay: 0.1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-timeline: scroll();
    animation-range: 0vh 20vh;

}

#bar-parallax {
    position: absolute;
    animation: parallax-move2 ease-in-out forwards;
    animation-timeline: scroll();
    /* animation-timing-function: ease-out; */
    animation-range: 0vh 2vh;
    transition: 0.25s;
}

/* animation 001 */

/* animation 002 */
@keyframes move {
    to {
        /* Move horizontally so that right edge is aligned against the viewport */
        transform: translateX(calc(-100% + 100vw));
    }
}

#sectionPin {
    /* Stretch it out, so that we create room for the horizontal scroll animation */
    height: 500vh;
    overflow: visible;
    /* To make position sticky work … */

    view-timeline-name: --section-pin-tl;
    view-timeline-axis: block;
}

.pin-wrap-sticky {
    /* Stick to Top */
    height: 100vh;
    width: 100vw;
    position: sticky;
    top: 0;

    width: 100vw;
    overflow-x: hidden;
}

.sectionHeight_aj {
    height: calc(100vh - 0vh);
}

.pin-wrap {
    height: 100vh;
    width: 250vmax;

    /* Hook animation */
    will-change: transform;
    animation: linear move forwards;

    /* Link animation to view-timeline */
    animation-timeline: --section-pin-tl;
    animation-range: contain 0% contain 100%;
}

/* animation 002 */

/* Laptop */
@media (min-width : 768px) {

    .bar_nav_hide_b {
            opacity: 0;
            visibility: hidden;
            /* display: none; */
        }
    .menu_mob {
        display: none !important;
    }

    .menu_default {
        display: block;
    }

    .container {
        max-width: 84rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .elegant_flag {
        background: #1b1b1b;
        padding: 16px;
        width: 149px;
        border-radius: 17px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        justify-content: flex-start;
    }



    /*--------------------------default	*/


    .card {
        width: 217px;
        background: #ffffff;
        padding: 18px;
        border-radius: 22px;
    }

    .box-over {
        position: sticky;
        top: 0;
        background: coral;
        padding: 10px;
        z-index: 1000;
        /* para que quede sobre el contenido */
    }

    .p-top-block {
        padding-top: 91px;
    }



    .h90vh {
        height: 90vh;
    }


}

/* tablet  */
@media (min-width : 480px) and (max-width: 768px) {

    .bar_nav_hide_b {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
    .container {
        max-width: 84rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .menu_mob {
        display: none !important;
    }

    .fs07 {
        font-size: 0.7em;
    }

    .fs08 {
        font-size: 0.7em;
    }

    .fs09 {
        font-size: 0.7em;
    }

    .fs10 {
        font-size: 0.8em !important;
    }

    .fs12 {
        font-size: 0.7em;
    }

    .fs120 {
        font-size: 0.7em;
    }

    .fs18 {
        font-size: 0.7em;
    }

    .fs20 {
        font-size: 1.2em !important;
    }

    .fs25 {
        font-size: 0.7em;
    }

    .fs60 {
        font-size: 3.0em !important;
    }
}

/* mobile */
@media (max-width : 480px) {

.bar_nav_hide_b {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
    /* temp */

    .temp_mob {
        width: 280px !important;
        height: 398px !important;
    }

    /* temp */


    /* efectos */


    /* body {
    padding-top: 100vh;
} */
    /* efectos */

    .card {
        width: 217px;
        background: #ffffff;
        padding: 18px;
        border-radius: 22px;
    }

    .hide_mob {
        display: none;
    }

    .elegant_flag {
        background: #1b1b1b;
        padding: 16px;
        /* width: 149px; */
        border-radius: 17px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        justify-content: flex-start;
    }

    .menu_default {
        /* display: none !important; */
    }

    .menu_mob {
        background: #ffffff;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .flex_mob {
        display: flex;
        flex-direction: column;
    }

    .ctrl_mob_header {
        justify-content: space-around;
    }

    .container {
        max-width: 22rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .ctrl-mob {
        display: none;
    }

    .fs07 {
        font-size: 0.7em !important;
    }

    .fs08 {
        font-size: 0.8em;
    }

    .fs09 {
        font-size: 0.9em;
    }

    .fs10 {
        font-size: 0.7em !important;
    }

    .fs12 {
        font-size: 1.2em;
    }

    .fs120 {
        font-size: 6.0em !important;
    }

    .fs18 {
        font-size: 1.8em;
    }

    .fs20 {
        font-size: 1.0em !important;
    }

    .fs25 {
        font-size: 2.5em;
    }

    .fs60 {
        font-size: 2.0em !important;
    }
}