/* ==========================================================================
   SECCIÓN TRABAJO CON — Efecto Acordeón Ola & Carrusel Responsivo
   ========================================================================== */

/* Contenedor envolvente */
.isla-trabajo-con-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
    overflow: hidden;
    padding: 80px 0 0 0;
    position: relative;
    background-color: transparent;
}

/* Contenedor principal de columnas */
.isla-trabajo-con {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 68px;
    box-sizing: border-box;
    overflow: visible;
}

/* Columna individual — base flex para el acordeón nativo */
.isla-trabajo-con__column {
    flex: 1 1 0px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrado vertical local y estable */
    opacity: 1;
    padding: 0 12px;
    box-sizing: border-box;
    /* Transición simétrica para hover-in y hover-out para evitar saltos y vibraciones */
    transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Tarjeta contenedora de la imagen */
.isla-trabajo-con__card {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
    background-color: #eaeaea;
    will-change: transform, height; /* Optimiza el renderizado del cambio de altura y traslación */
    /* Transición simétrica para hover-in y hover-out para evitar saltos y vibraciones */
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s ease;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Imagen de fondo (etiqueta img responsiva) */
.isla-trabajo-con__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transform: translate3d(0, 0, 0) scale(1.01); /* Previene aberraciones de escala sub-píxel */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast; /* Optimización para renderizado nítido en WebKit/Blink */
}

/* Capa de contraste */
.isla-trabajo-con__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0.8;
    transition: opacity 0.6s ease;
}

/* Título debajo de cada tarjeta */
.isla-trabajo-con__title {
    display: block;
    margin-top: 18px;
    font-size: clamp(15px, 1.1vw, 19px);
    font-weight: 600;
    color: var(--isla-color-text);
    text-align: center;
    /* Transición simétrica en transform para acompañar a la tarjeta */
    transition: color 0.4s ease,
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    transform: translateY(0);
}

/* ==========================================================================
   ESTADOS DESKTOP — Acordeón con flex-grow Nativo y CSS :hover
   ========================================================================== */
@media (min-width: 1025px) {
    /* Altura fija para evitar que la página salte al hacer hover */
    .isla-trabajo-con {
        height: 760px;
        align-items: center;
    }

    /* Altura fija de las columnas en escritorio para evitar que modifiquen su caja y fuercen reflow vertical */
    .isla-trabajo-con__column {
        height: 100%;
    }

    /* Alturas iniciales escalonadas proporcionales (silueta de ola estilizada) */
    .isla-trabajo-con__column:nth-child(1) .isla-trabajo-con__card { height: 480px; }
    .isla-trabajo-con__column:nth-child(2) .isla-trabajo-con__card { height: 600px; }
    .isla-trabajo-con__column:nth-child(3) .isla-trabajo-con__card { height: 400px; }
    .isla-trabajo-con__column:nth-child(4) .isla-trabajo-con__card { height: 450px; }
    .isla-trabajo-con__column:nth-child(5) .isla-trabajo-con__card { height: 530px; }

    /* Estado expandido al pasar el cursor (flex-grow nativo) — hereda la transición simétrica base */
    .isla-trabajo-con__column:hover {
        flex: 0 0 685px !important; /* Cierra el ancho exacto: 661px de tarjeta + 24px de padding (12px por lado) */
    }

    /* Tarjeta en columna hovered se eleva y crece en altura — hereda la transición simétrica base */
    .isla-trabajo-con__column:hover .isla-trabajo-con__card {
        height: 696px !important;
        flex-shrink: 0 !important; /* Evita que el flexbox vertical encoja la tarjeta en altura */
        transform: translateY(-12px) translate3d(0, 0, 0);
        box-shadow: 0 30px 60px rgba(74, 124, 89, 0.16);
    }

    /* Resaltar texto hovered (Verde Jardín) — hereda la transición simétrica base */
    .isla-trabajo-con__column:hover .isla-trabajo-con__title {
        color: var(--isla-color-accent, #4a7c59);
        transform: translateY(-2px);
    }
}

/* ==========================================================================
   ESTADOS LAPTOP (Alturas más suaves y menor padding)
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
    .isla-trabajo-con__column:nth-child(1) .isla-trabajo-con__card { height: 400px; }
    .isla-trabajo-con__column:nth-child(2) .isla-trabajo-con__card { height: 500px; }
    .isla-trabajo-con__column:nth-child(3) .isla-trabajo-con__card { height: 340px; }
    .isla-trabajo-con__column:nth-child(4) .isla-trabajo-con__card { height: 380px; }
    .isla-trabajo-con__column:nth-child(5) .isla-trabajo-con__card { height: 440px; }

    .isla-trabajo-con {
        padding: 20px 32px;
    }

    .isla-trabajo-con__column {
        padding: 0 8px;
    }

    .isla-trabajo-con__column:hover {
        flex: 0 0 677px !important; /* 661px de tarjeta + 16px de padding (8px por lado) */
    }
}

/* ==========================================================================
   ESTADOS TABLETS Y MÓVILES (Carrusel CSS Scroll Snap para dispositivos touch)
   ========================================================================== */
@media (max-width: 1024px) {
    .isla-trabajo-con-wrapper {
        padding: 40px 0;
    }

    .isla-trabajo-con {
        display: flex;
        flex-direction: row;
        justify-content: flex-start !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        padding: 20px 30px 40px 30px;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        box-sizing: border-box;
        height: auto; /* Reset: sin altura fija en móvil */
    }

    .isla-trabajo-con::-webkit-scrollbar {
        height: 4px !important;
        display: block !important;
    }
    .isla-trabajo-con::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 10px !important;
        margin: 0 40px !important;
    }
    .isla-trabajo-con::-webkit-scrollbar-thumb {
        background: var(--isla-color-accent, #4a7c59) !important;
        border-radius: 10px !important;
    }

    .isla-trabajo-con {
        -ms-overflow-style: auto !important;
        scrollbar-width: thin !important;
        scrollbar-color: var(--isla-color-accent, #4a7c59) rgba(0, 0, 0, 0.05) !important;
    }

    .isla-trabajo-con__column {
        flex: 0 0 75%;
        padding: 0;
        scroll-snap-align: center;
        opacity: 1 !important;
        transition: transform 0.4s ease;
        will-change: auto;
    }



    .isla-trabajo-con__card {
        height: 320px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
        will-change: auto;
    }

    .isla-trabajo-con__column.is-active {
        transform: scale(1.02);
    }
    .isla-trabajo-con__column.is-active .isla-trabajo-con__card {
        box-shadow: 0 10px 24px rgba(74, 124, 89, 0.1);
    }
    .isla-trabajo-con__column.is-active .isla-trabajo-con__title {
        color: var(--isla-color-accent, #4a7c59);
    }

    @media (min-width: 768px) {
        .isla-trabajo-con__column,
        .isla-trabajo-con__column.is-ready {
            flex: 0 0 45%;
        }
        .isla-trabajo-con__card {
            height: 400px !important;
        }
    }
}