#nube1,#nube2,#nube3,#nube4{
    position: absolute;
    left: -300px;
    display: block;
    height: 20%;
    aspect-ratio: 2/1;
    object-fit: contain;
    object-position: center;
}

#nube1{
    top: 20%;
    animation: nubes  50s  infinite ease-out;
}

#nube2{
    top:25%;
    animation: nubes  60s 2s infinite ease-in-out;
}

#nube3{
    top:35%;
    animation: nubes   90s infinite ease-in-out;
}

#nube4{
    top:40%;
    animation: nubes  70s 5s infinite ease-in-out;
}

@keyframes nubes {
    0%{
        margin-left: -300px;
    }
    95%{
       opacity: 1;;
    }
    100%{
        opacity: 0;
        margin-left: 300%;
    }
    
}
.cover{
    position: relative;
    height: calc(100vh - 80px);
    height: 620px;
    max-width: 100%;
    background:linear-gradient(var(--bgColor),#fff);
    overflow-x: hidden;
}

.cover-carrousel{
    position: relative;
    display: flex;
    height: 100%;
    max-height: 100%;
    width: auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;    
    max-width: 300%;
}

.cover-carrousel::-webkit-scrollbar{
    height: 10px;
    cursor: pointer;
}

.cover-carrousel::-webkit-scrollbar-thumb{
    background-color: var(--principal-color);
    border-radius: 20px;
    cursor: pointer;
}

.cover-carrousel-card{
    position: relative;
    min-width: 50%;
    scroll-snap-align: start;
    background-image: url(../../src/img/hero/trees.svg);
    background-repeat: repeat-x;
    background-position: bottom center;
    padding-top: 88px;
}

.cover-carrousel-card:first-child{
    position: relative;
    min-width: 100%;
    background: none;
}

.cover-carrousel-card:nth-child(3){
    position: relative;
}

.carrousel-vertical-bg{
    position: absolute;
    bottom:0;
    left: 0;
    z-index: 10;
    width: 100%
}

.carrousel-vertical-bg img{
    display: block;
    object-fit: contain;
    width: 100%;
}

.cover-nav-bullets{
    position: absolute;
    top: calc(var(--space-padding) + 80px);
    right: var(--space-padding);
    z-index: 15;
}

.cover-nav-bullets-container{
    display: flex;
    gap:15px;
    padding: var(--short-padding);
    border-radius: 25px;
    background: rgba(250, 250, 250, .5);
}

.cover-nav-bullets-container:hover{
    background-color: #fff;
}

    .cover-nav-bullets-point{
    display: block;
    list-style: none;
    height: 25px;
    width: 25px;
    background-color: var(--gray);
    border-radius: 50%;
    cursor: pointer;
    }

    /* CLASE PARA QUE EL PRIMER BULLET ESTE EN COLOR CYAN */
    .cover-bg-principal{
        background-color: var(--principal-color);
    }

    .cover-nav-bullets-point:hover{
    background-color: lightgray;
    }

    /* ESTILOS ESPECIALES  */
    .bgGray{
    background-color: lightgray;
    }

    .bg-principal-color{
    background: var(--principal-color);
    }

    .bg-first-card{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    }

.bg-first-card>*{
    width: 50%;
    background-image: url(../../src/img/hero/trees.svg);
    background-repeat: repeat-x;
    background-position: bottom center;
    }


    /*DISEÑO DE LA PORTADA*/
    .cardPortada{
        position: relative;
        height: 100%;
        width: 100%;

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

    .cardPortada-logo{
        aspect-ratio: 2/1;
        height: 30% ;
        margin: var(--space-padding) 0 0 var(--space-padding);
        z-index: 5;
    }

    .cardPortada-logo-img{
        display: block;

        max-height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: left center;
        box-sizing: border-box;
    }
    
    .cardPortada-membrete{
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-y: hidden;
        height: 20%;

    }

    .cardPortada-membrete ul{
        margin: auto;
        margin-top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;   
        overflow-y: hidden;
        }   

    .cardPortada-membrete ul li{
        list-style: none;
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font-size-big);
        line-height: 100%;
        animation: portadaMembrete infinite  8s ;
        color: var(--highlightColor);

    }

    @keyframes portadaMembrete {
       0%,20%{
            transform: translateY(0);
        }
        21%,40%{
            transform: translateY(-100%);
        }
        41%,60%{
            transform: translateY(-200%);
        }
        61%,80%{
            transform: translateY(-300%);
        } 

        81%,100%{
            transform: translateY(-400%);
        } 
    }
    .cardPortada-advice{
        flex:1;
        height: 50%;
        position: relative;   
        max-width: 100%;
    }

    .cardPortada-advice section{        
        text-align: center;
        flex-direction: column;
        aspect-ratio: 1/1;
        max-height: 100%;
        background: url("../../src/img/hero/canva.png") no-repeat;
        background-position: center bottom;
        background-size: contain;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 30px;  
        color: var(--highlightColor);
    }

    .cover-carrousel-card-section{
        height: 100%;
        width: 100%;
        max-width: 100%;
        padding: var(--space-padding);
        
        z-index: 100; 
    }

    .cover-carrousel-card-section-article{
        background: rgba(250, 250, 250, .5);
        height: 100%;
        aspect-ratio: 1/1;
        max-width: 100%;
        margin: auto;
    }

    .cover-carrousel-card-section-article figure{
        height: 60%;
        padding: var(--short-padding);
    }

    .cover-carrousel-card-section-article figure img{
        display: block;
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }

    .cover-carrousel-card-section-article figure video{
        display: block;
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }

   .cover-carrousel-card-section-article-textbox{
    padding: var(--short-padding);
   }

   .cover-carrousel-card-section-article-textbox h2{
    color: var(--highlightColor);
    text-align: center;
   }

   .cover-carrousel-card-section-article-textbox a{
    color: var(--highlightColor);
   }

   .cover-carrousel-card-section-article-textbox a:visited{
    color: var(--highlightColor);
   }

   .carrousel-vertical{
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
   }

   .carrousel-vertical ul{
    animation: carrouselVertical linear normal 40s infinite;

   }

   @keyframes carrouselVertical {
    from{
        transform: translateY(0%);
    }to{
        transform: translateY(-50%);
    }
    
   }

   .carrousel-vertical ul li{
    list-style: none;
   }

   .carrousel-vertical ul li img{
    display: block;
    margin-top: var(--space-padding);
    width: 40%;
    aspect-ratio: 1/1;    
   }

   .carrousel-vertical-header{
    position: absolute;
    bottom: 0;
    right: 0;
    aspect-ratio: 1/1;
    width: 50%;
    max-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url(../../src/img/hero/canva.png) no-repeat center;
    background-size: contain;
    color:var(--highlightColor)
   }

    /* ESTILOS PARA MÓVIL   */
@media (max-width:900px) {

    .cover{
        height: calc(100vh - 100px);
        max-height: 600px;
    }   

    .cover-nav-bullets{
        top: 20px;
    }

    .cardPortada-logo-img{
        padding: 20px;
        display: block;
        margin: auto;
        object-position: center;
    }

    /* Animación de las nubes*/
    @keyframes nubes {
        0%{
            margin-left: -300px;
        }
        95%{
           opacity: 1;;
        }
        100%{
            opacity: 0;
            margin-left: 500%;
        }
    }

    .cover-carrousel-card:first-child{
        background-image: url(../../src/img/hero/trees.svg);
    background-repeat: repeat-x;
    background-position: bottom center;
    }
    .cover-carrousel-card{
        min-width: 100vw;
        padding-top: 0;
    }

    .cover-carrousel-card>section{
        padding-top: 50px;
    }

    .bg-first-card>*{
        background: none;
    }

    .cardPortada-advice section{
        padding-top: 30px;
    }
    
    .cover-carrousel-card-section-article{
        aspect-ratio: 3/4;
    }
    
    .cover-carrousel-card-section-article figure{
        height: 50%;
    }

    .carrousel-vertical ul li{
        margin:auto;
        margin-bottom: 20px;
    }

    .carrousel-vertical ul li img{
        width: 80%;
        margin-left: 0;
        margin: auto;
    }
}

@media (max-height:600px){   

 
    .cardPortada-membrete{
        display: none;
    }

    .cover-carrousel-card-section-article-textbox{
        font-size: small;
    }

  
}