/* SLIDER
   Medidas tomadas del Figma (Group 199, slide de 1441 x 822).
   1cqw = 1% del ancho del slider, así todo escala proporcionalmente. */
.slider-container {
    position: relative;
    container-type: inline-size;
}

.slider-container .slider {
    display: flex;
    aspect-ratio: 1441 / 822;
    overflow-x: auto;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider-container .slider::-webkit-scrollbar {
    display: none;
}

.slider-container .slider .slide {
    flex: 1 0 100%;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;

    & > .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        object-fit: cover;
    }
}

/* SLIDES DE SERVICIOS */
.slider-container .slide .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding-left: 10.41%;
    position: relative;

    & h2 {
        font-family: var(--font-cal-sans);
        font-size: 6.315cqw;
        line-height: 4.976cqw;
        color: #00652f;
        white-space: nowrap;
    }

    & p {
        margin-top: 1.32cqw;
        font-family: var(--font-inter);
        font-size: max(2.915cqw, 11px);
        line-height: 1;
        color: #000000;
        white-space: nowrap;
    }
}

.slider-container .slide .cotiza {
    display: inline-flex;
    align-items: center;
    gap: 0.5cqw;
    height: max(4.72cqw, 26px);
    margin-top: 2.36cqw;
    padding: 0 1.3cqw 0 2.01cqw;
    border-radius: 999px;
    background-color: #009951;
    font-family: var(--font-inter);
    font-size: max(1.943cqw, 10px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    color: #ffffff;
    transition: background-color 0.4s ease;

    & img {
        width: max(2.85cqw, 15px);
        height: max(2.85cqw, 15px);
        transform: rotate(-136.53deg);
    }

    &:hover {
        background-color: #000000;
    }
}

/* SLIDE ANIVERSARIO: piezas posicionadas como en Figma */
.slide-aniversario > * {
    position: absolute;
}

.slide-aniversario .aniv-foto {
    transform: translate(-50%, -50%) rotate(-8.85deg);
    padding: 0.45cqw;
    border-radius: 2.7cqw;
    background-color: #02a262;

    & img {
        display: block;
        width: 100%;
        height: 100%;
        border: 0.55cqw solid #ffffff;
        border-radius: 2.7cqw;
        object-fit: cover;
    }
}

.slide-aniversario .aniv-foto-1 {
    left: 68.82%;
    top: 32.79%;
    width: 35.7%;
    height: 41.1%;
}

.slide-aniversario .aniv-foto-2 {
    left: 76.15%;
    top: 66.06%;
    width: 29.51%;
    height: 33.97%;
    transform: translate(-50%, -50%) rotate(2.84deg);

    & img {
        object-position: center 45%;
    }
}

.slide-aniversario .aniv-ocho {
    left: 26.6%;
    top: 44.71%;
    width: 39.33%;
    height: 51.29%;
    overflow: hidden;
    transform: translate(-50%, -50%) rotate(-3.44deg);

    & img {
        position: absolute;
        left: -44.1%;
        top: -7.04%;
        width: 182.64%;
        height: 113.14%;
    }
}

.slide-aniversario .aniv-juntos {
    left: 35.51%;
    top: 57.83%;
    width: 18.04%;
    height: 11.9%;
    transform: translate(-50%, -50%) rotate(-3.89deg);
}

.slide-aniversario .aniv-corazon {
    left: 41.43%;
    top: 29.82%;
    width: 6.5%;
    height: 11.44%;
    transform: translate(-50%, -50%) rotate(17.78deg);
}

.slide-aniversario .aniv-mascota {
    left: 41.42%;
    top: 30.66%;
    width: 21.51%;
    aspect-ratio: 1086 / 1448;
}

.slide-aniversario .aniv-frase {
    left: 17.7%;
    top: 68.61%;
    width: 23.72%;
    aspect-ratio: 2 / 1;
}

/* NAV BUTTONS */
.nav-buttons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nav-buttons #left-arrow,
.nav-buttons #right-arrow {
    width: max(6.73cqw, 32px);
    height: max(6.73cqw, 32px);
    position: absolute;
    top: 47.75%;
    cursor: pointer;
    pointer-events: auto;

    & img {
        width: 100%;
        height: 100%;
    }
}

.nav-buttons #left-arrow {
    left: 2.01%;
    transform: translateY(-50%) rotate(90deg);
}

.nav-buttons #right-arrow {
    right: 1.94%;
    transform: translateY(-50%) rotate(-90deg);
}

.nav-buttons .indicators {
    display: flex;
    align-items: end;
    width: 37.13cqw;
    height: max(1.39cqw, 8px);
    position: absolute;
    left: 50%;
    bottom: 7.42%;
    transform: translateX(-50%);
    pointer-events: auto;
}

.nav-buttons .indicators div {
    flex: 1;
    height: max(0.83cqw, 5px);
    box-shadow: 0 4px 4px 0 #00000040;
    cursor: pointer;
    transition: height 0.3s ease;
}

.nav-buttons .indicators .active {
    height: 100%;
}

.nav-buttons .indicators .ind-1 { background-color: #000000; }
.nav-buttons .indicators .ind-2 { background-color: #083d29; }
.nav-buttons .indicators .ind-3 { background-color: #009951; }
.nav-buttons .indicators .ind-4 { background-color: #06c069; }
.nav-buttons .indicators .ind-5 { background-color: #07e97e; }

/* WHATSAPP FLOTANTE */
.slider-container .contact {
    width: 84px;
    height: 84px;
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 10;

    & img {
        width: 100%;
        height: 100%;
    }
}
/* END-SLIDER */