.aqa-apps{
    --aqa-blue:#2f7fd3;
    --aqa-white:#fff;
    position:relative;
    width:100%;
    min-height:520px;
    overflow:hidden;
    background:#111820;
    isolation:isolate;
}
.aqa-apps *{box-sizing:border-box}
.aqa-apps__backgrounds,
.aqa-apps__bg,
.aqa-apps__shade{position:absolute;inset:0}
.aqa-apps__backgrounds{z-index:-2}
.aqa-apps__bg{
    opacity:0;
    background-size:cover;
    background-position:center center;
    transform:scale(1.025);
    transition:opacity .45s ease,transform 1s ease;
}
.aqa-apps__bg.is-active{opacity:1;transform:scale(1)}
.aqa-apps__shade{
    z-index:3;
    background:linear-gradient(90deg,rgba(9,15,21,.72),rgba(9,15,21,.44) 50%,rgba(9,15,21,.58));
}
.aqa-apps__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:520px;
}
.aqa-apps__item{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-width:0;
    padding:38px 38px 40px;
    color:var(--aqa-white)!important;
    text-decoration:none!important;
    border-left:1px solid rgba(255,255,255,.22);
    transition:background-color .3s ease;
    overflow:hidden;
}
.aqa-apps__item:last-child{border-right:1px solid rgba(255,255,255,.22)}
.aqa-apps__item:hover,
.aqa-apps__item:focus-visible,
.aqa-apps__item.is-active{background:rgba(10,22,34,.12)}
.aqa-apps__label{
    position:absolute;
    top:42px;
    right:26px;
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.4px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    text-transform:uppercase;
}
.aqa-apps__number{
    display:block;
    margin-bottom:22px;
    font-size:82px;
    line-height:.85;
    font-weight:600;
    letter-spacing:-4px;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.7);
    text-stroke:1px rgba(255,255,255,.7);
}
.aqa-apps__content{display:flex;flex-direction:column;align-items:flex-start;max-width:290px}
.aqa-apps__title{
    display:block;
    font-size:25px;
    line-height:1.12;
    font-weight:700;
    color:#fff;
    margin:0 0 14px;
}
.aqa-apps__text{
    display:block;
    color:rgba(255,255,255,.76);
    font-size:14px;
    line-height:1.55;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(8px);
    transition:max-height .35s ease,opacity .3s ease,transform .3s ease,margin .3s ease;
}
.aqa-apps__link{
    display:block;
    margin-top:0;
    max-height:0;
    opacity:0;
    overflow:hidden;
    font-size:13px;
    line-height:1.2;
    font-weight:700;
    color:#fff;
    transition:max-height .35s ease,opacity .3s ease,margin .3s ease;
}
.aqa-apps__item:hover .aqa-apps__text,
.aqa-apps__item:focus-visible .aqa-apps__text,
.aqa-apps__item.is-active .aqa-apps__text{max-height:120px;opacity:1;transform:none}
.aqa-apps__item:hover .aqa-apps__link,
.aqa-apps__item:focus-visible .aqa-apps__link,
.aqa-apps__item.is-active .aqa-apps__link{max-height:30px;opacity:1;margin-top:18px}

@media(max-width:1024px){
    .aqa-apps,.aqa-apps__grid{min-height:620px}
    .aqa-apps__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .aqa-apps__item{min-height:310px;border-bottom:1px solid rgba(255,255,255,.22)}
    .aqa-apps__label{top:30px}
    .aqa-apps__number{font-size:68px}
}
@media(max-width:767px){
    /*
     * Mobile: não há interação de hover/touch.
     * Cada aplicação vira um card estático com sua própria imagem,
     * conteúdo sempre visível e overlay mais escuro para leitura.
     */
    .aqa-apps{
        min-height:0;
        background:#0b1219;
        overflow:visible;
    }

    .aqa-apps__backgrounds{
        display:none!important;
    }

    .aqa-apps__grid{
        display:block;
        min-height:0;
    }

    .aqa-apps__item{
        position:relative;
        isolation:isolate;
        min-height:345px;
        padding:28px 24px 30px;
        border:0;
        border-bottom:1px solid rgba(255,255,255,.18);
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
        transition:none!important;
    }

    /* Overlay escuro fixo para favorecer a leitura. */
    .aqa-apps__item::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:0;
        pointer-events:none;
        background:
            linear-gradient(
                180deg,
                rgba(5,12,19,.58) 0%,
                rgba(5,12,19,.70) 42%,
                rgba(5,12,19,.92) 100%
            );
    }

    /* Pequena vinheta lateral para aumentar contraste sem "apagar" a foto. */
    .aqa-apps__item::after{
        content:"";
        position:absolute;
        inset:0;
        z-index:0;
        pointer-events:none;
        background:linear-gradient(90deg,rgba(2,8,14,.18),transparent 58%);
    }

    .aqa-apps__item > *{
        position:relative;
        z-index:1;
    }

    .aqa-apps__item:nth-child(1){background-image:url('images/pressurizacao.png')}
    .aqa-apps__item:nth-child(2){background-image:url('images/esgoto.jpg')}
    .aqa-apps__item:nth-child(3){background-image:url('images/efluentes.jpg')}
    .aqa-apps__item:nth-child(4){background-image:url('images/tratamento.jpg')}

    /* No mobile não existe estado ativo/hover visual. */
    .aqa-apps__item:hover,
    .aqa-apps__item:focus-visible,
    .aqa-apps__item.is-active{
        background-color:transparent;
    }

    .aqa-apps__label{
        top:24px;
        right:18px;
        color:#fff;
        font-size:11px;
        letter-spacing:1.2px;
        text-shadow:0 2px 10px rgba(0,0,0,.75);
    }

    .aqa-apps__number{
        margin-bottom:16px;
        font-size:60px;
        letter-spacing:-3px;
        -webkit-text-stroke:1px rgba(255,255,255,.82);
        text-stroke:1px rgba(255,255,255,.82);
    }

    .aqa-apps__content{
        max-width:calc(100% - 26px);
    }

    .aqa-apps__title{
        margin-bottom:11px;
        font-size:24px;
        line-height:1.12;
        color:#fff;
        text-shadow:0 2px 12px rgba(0,0,0,.55);
    }

    .aqa-apps__text{
        max-height:none!important;
        opacity:1!important;
        overflow:visible!important;
        transform:none!important;
        margin:0!important;
        color:rgba(255,255,255,.90);
        font-size:14px;
        line-height:1.55;
        text-shadow:0 1px 8px rgba(0,0,0,.45);
        transition:none!important;
    }

    .aqa-apps__link{
        display:inline-flex;
        align-items:center;
        max-height:none!important;
        opacity:1!important;
        overflow:visible!important;
        margin-top:16px!important;
        color:#fff;
        font-size:13px;
        line-height:1.25;
        transition:none!important;
        text-shadow:0 1px 8px rgba(0,0,0,.45);
    }
}