﻿.tips-carousel {
    position: relative;
    z-index: 1;
    height: 20vh;
    align-content:center;
}

    .tips-carousel::before {
        align-content: center;
        overflow: hidden;
        content: "";
        position: absolute;
        inset: 0;
        background-position: center;
        background-repeat: repeat;
        background-size: auto 180%; /* altura completa, ancho automático */
        background-position: center;
        background-image: url('../images/TipsFondo.webp');
        animation: rebote-horizontal 12s ease-in-out infinite alternate, rebote-vertical 10s ease-in-out infinite alternate;
        object-fit: contain;
        z-index: 0;
        pointer-events: none;
    }

    .tips-carousel .carousel-control-prev {

        color:red;
        left:-5%;

    }

    .tips-carousel .carousel-control-next {
        color: red;
        right: -5%;
    }

    .texto-ajustable {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 1rem;
        font-size: calc(2vh + 0.5vw);
        font-weight: bold;
    }

    .texto-ajustable svg {
        height: auto;
    }

@keyframes rebote-vertical {

    0% {
        
        background-position-y: 250px;

    }

    100% {

        background-position-y: 100px;

    }
}

@keyframes rebote-horizontal {
    0% {
        background-position-x: 0;
        
    }

    100% {
        background-position-x: 300px;
        
    }
}


