/* ! INDEX */

/* carrousel */

.carousel {
    position: relative;
    min-height: clamp(25rem, 19.643rem + 26.786vw, 43.75rem);
}

#carousel-container {
    position: relative;
    overflow: hidden;
}

#carousel-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(45deg, var(--primary-700) 40%, var(--primary-900) 60%);
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
    opacity: 1;
}


.carousel__content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    perspective: 1000px;
    position: relative;
}

.carousel__item {
    width: clamp(9.375rem, 6.161rem + 16.071vw, 20.625rem);
    height: clamp(9.375rem, 6.161rem + 16.071vw, 20.625rem);
    margin: 0 6rem;
    border-radius: 50%;
    transform: scale(0.6);
    position: absolute;
    opacity: 0;
    z-index: 10;
    /*  transition: 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);  */
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
}

.carousel__item__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
}

.carousel__item.active a:hover img {
    transform: scale(1) translateY(-15%);
}

.carousel__item.active {
    transform: scale(1.5);
    z-index: 30;
    opacity: 1;
    box-shadow: var(--shadow-card);
}

.carousel__item.left {
    transform: translateX(calc(-1 * clamp(15.625rem, 11.161rem + 22.321vw, 31.25rem))) scale(0.8);
    z-index: 20;
    opacity: 0.5;
}

.carousel__item.right {
    transform: translateX(clamp(15.625rem, 11.161rem + 22.321vw, 31.25rem)) scale(0.8);
    z-index: 20;
    opacity: 0.5;
}

.carousel__item.rainbow-slide {
    background-color: var(--primary-400);
}

.carousel__item.castillo-gusano {
    background-color: var(--secondary-400);
}

.carousel__item.diversion-arcoiris {
    background-color: var(--green-400);
}

.carousel__item picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.carousel__item img {
    transform: scale(.8) translateY(0);
    width: 100%;
    object-fit: contain;
    position: absolute;
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
}

.carousel__item.active img {
    transform: scale(1) translateY(calc(-1 * clamp(0.938rem, 0.67rem + 1.339vw, 1.875rem)));
    transition: 0.8s ease-in-out;
}

.content__support {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: var(--radius-full-round-perc);
    z-index: -10;
}

.content__confeti {
    height: 200%;
    width: 200%;
    top: 0;
    border-radius: 50%;
    background-image: url('../images/support/index/confeti.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
}

@media screen and (max-width: 720px) {
    .content__confeti {
        background-image: url('../images/support/index/confeti--001.webp');
    }
}


.carousel__item.left .content__confeti {
    background-position: left;
}

.carousel__item.right .content__confeti {
    background-position: right;
}


/* Controles */
.controls {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: clamp(20rem, 13.214rem + 33.929vw, 43.75rem);
    position: absolute;
    z-index: 100;
    pointer-events: none;
}

#prev,
#next {
    transition: 0.8s ease-in-out;
    pointer-events: all;
}

#prev span,
#next span {
    font-size: var(--font-size-xl) !important;
}

.button--control {
    background-color: #fff;
    border: none;
    padding: var(--padding-xs);
    cursor: pointer;
    margin: 0 10px;
    border-radius: var(--radius-full-round-perc);
    transition: background-color 0.3s;
}

.button--control .button__highlight {
    display: block;
    left: 20%;
    top: 10%;
}

#button__hover--right,
#button__hover--left {
    transition: .3s ease-in;
}

.carousel__item.rainbow-slide.active~.controls #button__hover--left,
.carousel__item.rainbow-slide.active~.controls #button__hover--right {
    background: linear-gradient(45deg, var(--primary-600), var(--primary-800));
}

.carousel__item.castillo-gusano.active~.controls #button__hover--left,
.carousel__item.castillo-gusano.active~.controls #button__hover--right {
    background: linear-gradient(45deg, var(--secondary-600), var(--secondary-800));
}

.carousel__item.diversion-arcoiris.active~.controls #button__hover--left,
.carousel__item.diversion-arcoiris.active~.controls #button__hover--right {
    background: linear-gradient(45deg, var(--green-600), var(--green-800));
}


#prev:hover .button__content,
#next:hover .button__content {
    transform: scale(1.3);
}

.carousel__text {
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: start;
    width: 80%;
    overflow: hidden;
    height: clamp(4rem, 3.143rem + 4.286vw, 7rem);
    top: clamp(2.5rem, 1.214rem + 6.429vw, 7rem);
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
    pointer-events: none;
}

.text__names {
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.35, 1.00);
}

.carousel__item.rainbow-slide.active~.carousel__text .text__names {
    transform: translateY(0px);
}

.carousel__item.castillo-gusano.active~.carousel__text .text__names {
    transform: translateY(calc(-1 * clamp(5rem, 4rem + 5vw, 8.5rem)));
}

.carousel__item.diversion-arcoiris.active~.carousel__text .text__names {
    transform: translateY(calc(-1 * clamp(9.5rem, 7.357rem + 10.714vw, 17rem)));
}

.text__names {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-ml);
    width: 100%;
}

.carousel__text span {
    line-height: .9;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--font-size-mega);
    font-family: var(--font-family-secondary);
    font-weight: 800;
    text-shadow:
        1px 1px 0 var(--base-white),
        -1px 1px 0 var(--base-white),
        1px -1px 0 var(--base-white),
        -1px -1px 0 var(--base-white);
}

.carousel__text span:nth-of-type(1) {
    color: var(--primary-800);
}

.carousel__text span:nth-of-type(2) {
    color: var(--secondary-800);
}

.carousel__text span:nth-of-type(3) {
    color: var(--green-800);
}


/* container__home */
.section__attachment {
    width: 100%;
    padding: var(--padding-xxl) var(--padding-md);
    text-align: center;
    background-image: url(../images/support/index/ballon.webp);
    background-position: center;
    background-attachment: fixed;
}

@media screen and (max-width: 1024px) {
    .section__attachment {
        background-image: url(../images/support/index/ballon--003.webp);
    }
}

@media screen and (max-width: 720px) {
    .section__attachment {
        background-image: url(../images/support/index/ballon--002.webp);
    }
}


@media screen and (max-width: 480px) {
    .section__attachment {
        background-image: url(../images/support/index/ballon--001.webp);
    }
}

@media screen and (min-width: 720px) {
    .section__attachment {
        background-size: cover;
    }
}

.section__attachment h1,
.section__attachment p {
    font-size: var(--font-size-giga);
    font-family: var(--font-family-secondary);
    font-weight: 700;
}

.section__attachment h1 {
    color: var(--purple-800);
    text-shadow:
        1px 1px 0 var(--base-white),
        -1px 1px 0 var(--base-white),
        1px -1px 0 var(--base-white),
        -1px -1px 0 var(--base-white);
}

.section__attachment p {
    color: var(--base-white);
}

.section__attachment__title {
    background-color: var(--purple-400);
}

.section__attachment__catalog {
    background-color: var(--yellow-400);
}

.container:nth-child(2) {
    background-color: var(--base-white);
}

.container__home {
    min-height: clamp(25rem, 19.643rem + 26.786vw, 43.75rem);
    max-width: 1200px;
    padding: var(--padding-md);
    background: linear-gradient(#fafafae1, #fafafaf5), url(../images/support/backgrounds/background-circle-5.svg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
}

.container__home ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--padding-sm)
}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes appear_card {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.container__home li {
    flex: 1;
    padding: var(--padding-sm) 0;
    font-weight: 200;
    border-radius: var(--radius-m);
    text-align: center;
    min-width: 260px;
    animation: appear_card linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    transition: .3s ease-in-out;
}


.container__home li:hover .image {
    transform: scale(1.05);
}


.container__home li h3 {
    font-size: var(--font-size-jumbo);
    color: var(--base-white);
    font-weight: 100;
    line-height: .9;
}

.container__home li:nth-child(1):hover {
    box-shadow: 0 4px 8px rgba(104, 197, 237, .2);
}

.container__home li:nth-child(2):hover {
    box-shadow: 0 4px 8px rgba(242, 94, 191, .2);
}

.container__home li:nth-child(3):hover {
    box-shadow: 0 4px 8px rgba(135, 214, 147, .2);
}

.container__home li:nth-child(1) h3 {
    color: var(--primary-700);
}

.container__home li:nth-child(2) h3 {
    color: var(--secondary-800);
}

.container__home li:nth-child(3) h3 {
    color: var(--green-800);
}


.container__home li .image {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    mask-image: url('../images/support/blob/sssplatter-3.svg');
    -webkit-mask-image: url('../images/support/blob/sssplatter-3.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    transition: .3s ease-in-out;
}

.container__home li .image img {
    width: 100%;
}

.container__home p.home__title {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-mega);
    line-height: 1;
}

.container__home p {
    font-size: var(--font-size-lg);
    padding: var(--padding-md);
    text-align: center;
    width: 100%;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
}


@media screen and (min-width: 480px) {

    .container__home ul {
        padding: var(--padding-md);
    }

    .container__home li {
        padding: var(--padding-md) 0;
    }

}