/* =========================================================
   AYS OBRAS — SERVICES
   ========================================================= */


/* =========================================================
   SECCIÓN PRINCIPAL
   ========================================================= */

.ays-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ays-services {
    position: relative;

    width: 100%;
    height: 100dvh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: #fdfdfd;

    /*
       El pin del Hero reserva 200dvh de scroll al terminar.
       Este margen recupera su último viewport para que Services
       entre sobre el Hero, sin cambiar el Hero ni su pin.
    */
    margin-top: -100dvh;

    overflow: hidden;
}


/* =========================================================
   LÍNEA DE ENTRADA — CONTINUIDAD DESDE EL HERO
   ========================================================= */

.ays-services::before {
    content: "";

    position: absolute;

    top: 0;
    right: 5%;

    width: 3px;
    /* .ays-services-visual mide 70vh y está centrado verticalmente. */
    height: calc((100dvh - 70vh) / 2);

    background: #FEEAAF;

    z-index: 30;

    pointer-events: none;

    transform: scaleY(var(--ays-services-entry-line-scale, 0));
    transform-origin: top center;
    will-change: transform;
}


/* =========================================================
   CONTENEDOR INTERNO
   ========================================================= */

.ays-services-inner {
    position: relative;

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns: 32% 68%;

    align-items: center;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   LISTA DE SERVICIOS
   ========================================================= */

.ays-services-list {
    position: relative;

    padding-left: 5vw;
    padding-right: 3vw;
    padding-top: 50px;
    padding-bottom: 50px;

    z-index: 10;
    background-color:#F3F3F3;

    box-sizing: border-box;
}

/* =========================================================
   SERVICIOS
   ========================================================= */

.ays-service-item {
    position: relative;

    display: block;
    width: fit-content;

    margin: 0 0 18px 0;
    padding: 0;

    cursor: pointer;

    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(12px, 3vw, 22px);
    font-weight: 400;
    line-height: 0.95;

    color: #738290;

    text-transform: uppercase;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


.ays-service-item:hover,
.ays-service-item.active {
    color: #102B3F;
}


.ays-service-item:hover {
    transform: translateX(10px);
}


/* =========================================================
   VISUAL
   ========================================================= */

.ays-services-visual {
    position: relative;

    width: 100%;
    height: 70vh;

    align-self: center;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* =========================================================
   IMÁGENES — TRANSICIÓN
   ========================================================= */

.ays-service-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;;

    visibility: hidden;

    z-index: 1;

    overflow: hidden;
}


.ays-service-image.active {
    visibility: visible;

    z-index: 2;
}
/* Todas las imágenes rellenan EXACTAMENTE el mismo marco */

.ays-service-image img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center;

    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   IMAGEN ACTIVA
   ========================================================= */

.ays-service-image.active {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


/* =========================================================
   CAJA DE INFORMACIÓN
   ========================================================= */

.ays-service-info {
    position: absolute;

    left: 6%;
    
    top: 60%;

    width: min(420px, 55%);

    z-index: 50;
}


.ays-service-info-item {
    display: none;

    box-sizing: border-box;

    padding: 28px 32px;

    background: #102B3F;

    color: #FFFFFF;
}


.ays-service-info-item.active {
    display: block;
}


.ays-service-info-item h3 {
    margin: 0 0 12px 0;
    padding: 0;

    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 400;
    line-height: 0.95;

    color: #FEEAAF;
}


.ays-service-info-item p {
    margin: 0;
    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 400;
    line-height: 1.5;

    color: #FFFFFF;
}


/* =========================================================
   LÍNEA HACIA LA SIGUIENTE SECCIÓN
   ========================================================= */

.ays-services-next-line {
    position: absolute;

    left: 15%;
    bottom: 0;

    width: 3px;
    height: 320px;

    background: #FEEAAF;

    z-index: 30;

    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

/* =========================================================
   SERVICES — ENTRADA SOBRE EL HERO
   ========================================================= */

.ays-services {
    position: relative;
    z-index: 50 !important;
}

/* =========================================================
   SERVICIOS — MÓVIL
   Selector táctil + imagen protagonista, sin cambiar el pin
   ========================================================= */

@media (max-width: 767px) {

    .ays-services {
        min-height: 650px;
    }

    .ays-services::before {
        right: 20px;
        height: 56px;
    }

    .ays-services-inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 178px minmax(0, 1fr);
    }

    .ays-services-list {
        position: relative;

        display: flex;
        align-items: end;
        gap: 0;

        width: calc(100% - 40px);
        height: 100%;
        margin: 0 20px;
        padding: 94px 0 0;

        background: transparent;

        overflow: visible;
        isolation: isolate;
    }

    .ays-services-list::before {
        position: absolute;
        top: 46px;
        left: 20px;

        content: "SERVICIOS";

        color: #102b3f;

        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(42px, 12vw, 58px);
        font-weight: 400;
        line-height: .9;
        letter-spacing: .02em;

    }

    .ays-service-item {
        display: flex;
        align-items: flex-end;

        position: relative;
        z-index: 1;

        flex: 1 1 0;
        min-width: 0;
        min-height: 76px;
        margin: 0;
        margin-left: -10px;
        padding: 12px;

        border: 0;
        border-radius: 30px 30px 0 0;

        box-sizing: border-box;

        background: #102b3f;
        color: #fdfdfd;

        box-shadow: 9px -2px 14px rgba(7, 25, 38, .18);

        font-size: clamp(10px, 2.4vw, 13px);
        line-height: .95;
        text-align: left;
        overflow: hidden;

        transition:
            background-color .25s ease,
            color .25s ease,
            transform .3s ease,
            box-shadow .3s ease;
    }

    .ays-service-item:first-child {
        margin-left: 0;
        z-index: 4;
    }

    .ays-service-item:nth-child(2) {
        z-index: 3;
    }

    .ays-service-item:nth-child(3) {
        z-index: 2;
    }

    .ays-service-item:nth-child(4) {
        z-index: 1;
    }

    .ays-service-item > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .ays-service-item::after {
        position: absolute;
        inset: 0;

        display: grid;
        place-items: center;

        color: inherit;

        content: "REFORMAS";

        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(17px, 4.5vw, 19px);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .ays-service-item:nth-child(2)::after {
        content: "SANEAMIENTO";
    }

    .ays-service-item:nth-child(3)::after {
        content: "CANALIZACIÓN";
    }

    .ays-service-item:nth-child(4)::after {
        content: "URBANIZACIÓN";
    }

    .ays-service-item.active {
        z-index: 10;
        background: #dce2e5;
        color: #102b3f;
        box-shadow: 9px -2px 14px rgba(7, 25, 38, .1);
        transform: none;
    }

    .ays-service-item:focus-visible {
        outline: 2px solid #feeAAF;
        outline-offset: -2px;
    }

    .ays-services-visual {
        align-self: stretch;

        height: auto;
        min-height: 0;
        margin: 0 20px 18px;
        width: auto;

        border: 1px solid rgba(16, 43, 63, .22);
    }

    .ays-service-info {
        right: 16px;
        bottom: 16px;
        left: 16px;
        top: auto;

        width: auto;
    }

    .ays-service-info-item {
        padding: 20px 22px 22px;
    }

    .ays-service-info-item h3 {
        margin-bottom: 10px;

        font-size: clamp(34px, 10vw, 44px);
        line-height: .88;
    }

    .ays-service-info-item p {
        font-size: 15px;
        line-height: 1.42;
    }

    .ays-services-next-line {
        left: 20px;
        height: 72px;
    }
}

@media (max-width: 390px) {
    .ays-service-item {
        margin-left: 0;
    }

    .ays-service-item::after {
        font-size: 15px;
    }
}