/* =========================================================
   COMPONENTE - CARRUSEL ORGÁNICO
========================================================= */

.carrusel-organico {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carrusel-organico__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 34px;
    padding-bottom: 110px;
}

.carrusel-organico__track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: max-content;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.carrusel-organico__sequence {
    display: flex;
    align-items: flex-start;
    flex: none;
    gap: 0;
    width: max-content;
    padding: 0;
}

.carrusel-organico__item {
    position: relative;
    flex: 0 0 clamp(240px, 23vw, 390px);
    margin-left: clamp(-82px, -4.2vw, -48px);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        filter 0.55s ease,
        box-shadow 0.55s ease;
    will-change: transform;
}

/* =========================================================
   ITEMS
========================================================= */

.carrusel-organico__item {
    position: relative;
    flex: 0 0 clamp(240px, 23vw, 390px);
    margin-left: clamp(-82px, -4.2vw, -48px);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        filter 0.55s ease,
        box-shadow 0.55s ease;
    will-change: transform;
}

.carrusel-organico__media,
.carrusel-organico__text-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(93, 69, 113, 0.08);
}

.carrusel-organico__media,
.carrusel-organico__text-card {
    transition:
        box-shadow 0.55s ease,
        filter 0.55s ease;
}

/* Imágenes */

.carrusel-organico__media {
    aspect-ratio: 0.82 / 1;
    background: #f3edf7;
}

.carrusel-organico__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nota dentro de la imagen, en la esquina inferior izquierda. */
.carrusel-organico__nota {
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    bottom: 12px;
    width: fit-content;
    padding: 6px 8px;
    border-radius: 4px;
    background: transparent;
    color: #343434;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Tarjetas de texto */

.carrusel-organico__text-card {
    min-height: clamp(330px, 32vw, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15% 0px;
    background: var(--carrusel-organico-fondo, #b9dccf);
    font-size: 26px;
    line-height: 1.02;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}

.carrusel-organico__text-card p{
    padding: 0px;
}

/* =========================================================
   PATRÓN ORGÁNICO AUTOMÁTICO
========================================================= */

/*
 * El PHP aplica automáticamente:
 * posicion-1, posicion-2, posicion-3,
 * posicion-4, posicion-5 y vuelve a empezar.
 */

.carrusel-organico__item--posicion-1 {
    z-index: 2;
    transform:
        translateY(54px)
        rotate(-7deg)
        scale(0.94);
}

.carrusel-organico__item--posicion-2 {
    z-index: 5;
    transform:
        translateY(0)
        rotate(4deg)
        scale(1);
}

.carrusel-organico__item--posicion-3 {
    z-index: 3;
    transform:
        translateY(76px)
        rotate(-3deg)
        scale(0.91);
}

.carrusel-organico__item--posicion-4 {
    z-index: 6;
    transform:
        translateY(24px)
        rotate(8deg)
        scale(0.97);
}

.carrusel-organico__item--posicion-5 {
    z-index: 4;
    transform:
        translateY(92px)
        rotate(-5deg)
        scale(0.89);
}

.carrusel-organico__item.is-first {
    transform:
        translateY(46px)
        rotate(-6deg)
        scale(0.94)
        translateZ(4px);
}

.carrusel-organico__item.is-last {
    transform:
        translateY(34px)
        rotate(-1deg)
        scale(0.94)
        translateZ(8px);
}

/* Ligera variación adicional según tipo */

.carrusel-organico__item--texto {
    flex-basis: clamp(250px, 25vw, 410px);
}

.carrusel-organico__item--texto.carrusel-organico__item--posicion-2,
.carrusel-organico__item--texto.carrusel-organico__item--posicion-4 {
    z-index: 7;
}

/* Hover solo en dispositivos con ratón */

@media (hover: hover) {

    .carrusel-organico__item:hover {
        z-index: 30;
        filter: brightness(1.02);
    }

    .carrusel-organico__item:hover .carrusel-organico__media,
    .carrusel-organico__item:hover .carrusel-organico__text-card {
        box-shadow:
            0 28px 60px rgba(93, 69, 113, 0.16),
            0 8px 24px rgba(93, 69, 113, 0.1);
    }

    .carrusel-organico__item--posicion-1:hover {
        transform:
            translateY(45px)
            rotate(-5deg)
            scale(0.97)
            translateZ(55px);
    }

    .carrusel-organico__item--posicion-2:hover {
        transform:
            translateY(-6px)
            rotate(3deg)
            scale(1.025)
            translateZ(55px);
    }

    .carrusel-organico__item--posicion-3:hover {
        transform:
            translateY(67px)
            rotate(-2deg)
            scale(0.94)
            translateZ(55px);
    }

    .carrusel-organico__item--posicion-4:hover {
        transform:
            translateY(17px)
            rotate(6deg)
            scale(1)
            translateZ(55px);
    }

    .carrusel-organico__item--posicion-5:hover {
        transform:
            translateY(83px)
            rotate(-4deg)
            scale(0.92)
            translateZ(55px);
    }

    .carrusel-organico__item.is-last:hover {
        transform:
            translateY(27px)
            rotate(0deg)
            scale(0.97)
            translateZ(55px);
    }

    .carrusel-organico__item.is-first:hover {
        transform:
            translateY(38px)
            rotate(-4deg)
            scale(0.97)
            translateZ(55px);
    }
}


.carrusel-organico__media,
.carrusel-organico__text-card {
    animation: carrusel-organico-flotar 5.5s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes carrusel-organico-flotar {
    from {
        transform:
            translateY(-6px)
            rotate(-0.35deg)
            scale(0.985);
    }

    to {
        transform:
            translateY(6px)
            rotate(0.35deg)
            scale(1.015);
    }
}

.carrusel-organico__item--posicion-1 .carrusel-organico__media,
.carrusel-organico__item--posicion-1 .carrusel-organico__text-card {
    animation-duration: 5.2s;
    animation-delay: -1s;
}

.carrusel-organico__item--posicion-2 .carrusel-organico__media,
.carrusel-organico__item--posicion-2 .carrusel-organico__text-card {
    animation-duration: 6.1s;
    animation-delay: -3s;
}

.carrusel-organico__item--posicion-3 .carrusel-organico__media,
.carrusel-organico__item--posicion-3 .carrusel-organico__text-card {
    animation-duration: 5.7s;
    animation-delay: -2s;
}

.carrusel-organico__item--posicion-4 .carrusel-organico__media,
.carrusel-organico__item--posicion-4 .carrusel-organico__text-card {
    animation-duration: 6.4s;
    animation-delay: -4s;
}

.carrusel-organico__item--posicion-5 .carrusel-organico__media,
.carrusel-organico__item--posicion-5 .carrusel-organico__text-card {
    animation-duration: 5.4s;
    animation-delay: -2.8s;
}

@media (prefers-reduced-motion: reduce) {

    .carrusel-organico__media,
    .carrusel-organico__text-card {
        animation: none;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
    .carrusel-organico__viewport {
        padding-top: 24px;
        padding-bottom: 58px;
    }

    .carrusel-organico__sequence {
        padding: 0px;
    }

    .carrusel-organico__item {
        flex-basis: clamp(230px, 34vw, 340px);
        margin-left: -52px;
    }

    .carrusel-organico__item--texto {
        flex-basis: clamp(240px, 36vw, 350px);
    }

    .carrusel-organico__item--posicion-1 {
        transform:
            translateY(40px)
            rotate(-6deg)
            scale(0.95);
    }

    .carrusel-organico__item--posicion-2 {
        transform:
            translateY(0)
            rotate(4deg)
            scale(1);
    }

    .carrusel-organico__item--posicion-3 {
        transform:
            translateY(58px)
            rotate(-3deg)
            scale(0.92);
    }

    .carrusel-organico__item--posicion-4 {
        transform:
            translateY(20px)
            rotate(7deg)
            scale(0.97);
    }

    .carrusel-organico__item--posicion-5 {
        transform:
            translateY(68px)
            rotate(-5deg)
            scale(0.9);
    }
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {
    .carrusel-organico__viewport {
        padding-top: 18px;
        padding-bottom: 42px;
    }

    .carrusel-organico__sequence {
        padding: 0px;
    }

    .carrusel-organico__item {
        flex: 0 0 72vw;
        max-width: 310px;
        margin-left: -36px;
    }

    .carrusel-organico__item--texto {
        flex-basis: 76vw;
        max-width: 320px;
    }

    .carrusel-organico__text-card {
        min-height: 360px;
        padding: 30px;
        font-size: 24px;
    }

    .carrusel-organico__item--posicion-1 {
        transform:
            translateY(30px)
            rotate(-5deg)
            scale(0.96);
    }

    .carrusel-organico__item--posicion-2 {
        transform:
            translateY(0)
            rotate(3deg)
            scale(1);
    }

    .carrusel-organico__item--posicion-3 {
        transform:
            translateY(42px)
            rotate(-2deg)
            scale(0.94);
    }

    .carrusel-organico__item--posicion-4 {
        transform:
            translateY(16px)
            rotate(6deg)
            scale(0.98);
    }

    .carrusel-organico__item--posicion-5 {
        transform:
            translateY(48px)
            rotate(-4deg)
            scale(0.93);
    }

}