﻿/* =========================================================
   ALICERCE — SERVIÇOS CINEMATIC CARDS
   File separato. Non modifica style.css.
   ========================================================= */


/* =========================================================
   SEZIONE
   ========================================================= */

.alicerce-services-cinematic{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding:
        110px
        clamp(30px,5vw,90px)
        125px !important;

    background:
        radial-gradient(
            circle at 78% 12%,
            rgba(32,74,116,.24),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #07182d 0%,
            #061426 100%
        ) !important;

    color:#fff !important;

    overflow:hidden !important;
}


/* piccolo bagliore decorativo */

.alicerce-services-cinematic::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-210px;
    top:-230px;

    border-radius:50%;

    background:
        rgba(255,90,24,.08);

    filter:blur(35px);

    pointer-events:none;
}


/* =========================================================
   TESTATA
   ========================================================= */

.alicerce-services-cinematic
.home-services-head{
    position:relative;

    z-index:2;

    width:min(1500px,100%) !important;

    margin:
        0 auto
        68px !important;

    padding:0 !important;

    text-align:left !important;
}


.alicerce-services-cinematic
.home-services-head .small-title{
    color:#ff5a18 !important;
}


.alicerce-services-cinematic
.home-services-head h2{
    max-width:1100px !important;

    margin:
        12px
        0
        0 !important;

    color:#fff !important;

    font-size:
        clamp(58px,7vw,118px) !important;

    line-height:.88 !important;

    letter-spacing:-.06em !important;

    font-weight:900 !important;

    text-transform:uppercase !important;

    text-align:left !important;
}


.alicerce-services-cinematic
.home-services-head p{
    max-width:700px !important;

    margin:
        27px
        0
        0 !important;

    color:
        rgba(255,255,255,.67) !important;

    font-size:17px !important;

    line-height:1.65 !important;

    text-align:left !important;
}


/* =========================================================
   GRIGLIA
   ========================================================= */

.alicerce-service-grid{
    position:relative;

    z-index:2;

    width:min(1500px,100%) !important;

    margin:0 auto !important;

    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:24px !important;
}


/* =========================================================
   CARD
   ========================================================= */

.alicerce-service-card{
    position:relative !important;

    min-height:400px !important;

    margin:0 !important;

    padding:
        38px
        40px
        42px !important;

    overflow:hidden !important;

    border:
        1px solid rgba(7,24,45,.08) !important;

    border-radius:28px !important;

    background:#f4f0e7 !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.13) !important;

    cursor:pointer !important;

    isolation:isolate !important;

    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        box-shadow .55s ease,
        border-color .55s ease !important;
}


.alicerce-service-card:hover,
.alicerce-service-card.is-open,
.alicerce-service-card:focus-visible{
    transform:
        translateY(-8px) !important;

    border-color:
        rgba(255,90,24,.35) !important;

    box-shadow:
        0 28px 75px rgba(0,0,0,.30) !important;

    outline:none !important;
}


/* =========================================================
   FOTO
   ========================================================= */

.alicerce-service-media{
    position:absolute;

    inset:0;

    z-index:-2;

    overflow:hidden;

    opacity:0;

    clip-path:
        inset(100% 0 0 0 round 28px);

    transition:
        opacity .50s ease,
        clip-path .85s cubic-bezier(.16,1,.3,1);
}


.alicerce-service-media img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transform:
        scale(1.13);

    filter:
        saturate(.92)
        contrast(1.04);

    transition:
        transform 1.35s cubic-bezier(.16,1,.3,1),
        filter .8s ease;
}


.alicerce-service-card:hover
.alicerce-service-media,

.alicerce-service-card.is-open
.alicerce-service-media,

.alicerce-service-card:focus-visible
.alicerce-service-media{
    opacity:1;

    clip-path:
        inset(0 0 0 0 round 28px);
}


.alicerce-service-card:hover
.alicerce-service-media img,

.alicerce-service-card.is-open
.alicerce-service-media img,

.alicerce-service-card:focus-visible
.alicerce-service-media img{
    transform:
        scale(1.03);

    filter:
        saturate(1)
        contrast(1.06);
}


/* =========================================================
   OVERLAY
   ========================================================= */

.alicerce-service-overlay{
    position:absolute;

    inset:0;

    z-index:-1;

    opacity:0;

    background:
        linear-gradient(
            180deg,
            rgba(4,13,27,.13) 0%,
            rgba(4,13,27,.58) 56%,
            rgba(4,13,27,.92) 100%
        );

    transition:
        opacity .55s ease;
}


.alicerce-service-card:hover
.alicerce-service-overlay,

.alicerce-service-card.is-open
.alicerce-service-overlay,

.alicerce-service-card:focus-visible
.alicerce-service-overlay{
    opacity:1;
}


/* =========================================================
   ACCENTO SOPRA
   ========================================================= */

.alicerce-service-card::before{
    content:"";

    position:absolute;

    z-index:5;

    left:40px;
    top:33px;

    width:47px;
    height:4px;

    border-radius:99px;

    background:#ff5a18;

    transform-origin:left center;

    transition:
        width .55s cubic-bezier(.16,1,.3,1),
        background .4s ease;
}


.alicerce-service-card:nth-child(even)::before{
    background:#102d4d;
}


.alicerce-service-card:hover::before,
.alicerce-service-card.is-open::before{
    width:90px;

    background:#ff5a18;
}


/* =========================================================
   TESTO CARD
   ========================================================= */

.alicerce-service-card h3{
    position:relative;

    z-index:3;

    max-width:90%;

    margin:
        67px
        0
        18px !important;

    color:#07182d !important;

    font-size:
        clamp(25px,2.15vw,37px) !important;

    line-height:1.04 !important;

    letter-spacing:-.035em !important;

    font-weight:850 !important;

    transition:
        color .45s ease,
        transform .65s cubic-bezier(.16,1,.3,1);
}


.alicerce-service-card p{
    position:relative;

    z-index:3;

    max-width:620px;

    margin:0 !important;

    color:
        rgba(7,24,45,.75) !important;

    font-size:
        clamp(16px,1.15vw,19px) !important;

    line-height:1.55 !important;

    transition:
        color .45s ease,
        transform .65s cubic-bezier(.16,1,.3,1);
}


.alicerce-service-card:hover h3,
.alicerce-service-card.is-open h3,
.alicerce-service-card:focus-visible h3{
    color:#fff !important;

    transform:
        translateY(150px);
}


.alicerce-service-card:hover p,
.alicerce-service-card.is-open p,
.alicerce-service-card:focus-visible p{
    color:
        rgba(255,255,255,.84) !important;

    transform:
        translateY(150px);
}


/* =========================================================
   NUMERO
   ========================================================= */

.alicerce-service-number{
    position:absolute;

    z-index:4;

    top:31px;
    right:36px;

    color:
        rgba(7,24,45,.30);

    font-size:12px;

    font-weight:850;

    letter-spacing:.17em;

    transition:
        color .45s ease;
}


.alicerce-service-card:hover
.alicerce-service-number,

.alicerce-service-card.is-open
.alicerce-service-number{
    color:
        rgba(255,255,255,.70);
}


/* =========================================================
   ETICHETTA FOTO
   ========================================================= */

.alicerce-service-view{
    position:absolute;

    z-index:4;

    left:40px;
    bottom:35px;

    display:flex;
    align-items:center;

    gap:10px;

    color:
        rgba(7,24,45,.52);

    font-size:11px;

    font-weight:850;

    letter-spacing:.15em;

    text-transform:uppercase;

    transition:
        color .45s ease;
}


.alicerce-service-view::after{
    content:"↗";

    color:#ff5a18;

    font-size:16px;
}


.alicerce-service-card:hover
.alicerce-service-view,

.alicerce-service-card.is-open
.alicerce-service-view{
    color:
        rgba(255,255,255,.78);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .alicerce-services-cinematic{
        padding:
            78px
            22px
            88px !important;
    }


    .alicerce-services-cinematic
    .home-services-head{
        margin-bottom:
            45px !important;
    }


    .alicerce-services-cinematic
    .home-services-head h2{
        font-size:
            clamp(48px,12vw,76px) !important;
    }


    .alicerce-service-grid{
        grid-template-columns:
            1fr !important;

        gap:18px !important;
    }


    .alicerce-service-card{
        min-height:370px !important;

        padding:
            30px
            28px
            34px !important;
    }


    .alicerce-service-card::before{
        left:28px;
        top:28px;
    }


    .alicerce-service-card h3{
        margin-top:
            62px !important;
    }


    .alicerce-service-number{
        top:27px;
        right:27px;
    }


    .alicerce-service-view{
        left:28px;
        bottom:27px;
    }


    .alicerce-service-card:hover h3,
    .alicerce-service-card.is-open h3,
    .alicerce-service-card:focus-visible h3{
        transform:
            translateY(125px);
    }


    .alicerce-service-card:hover p,
    .alicerce-service-card.is-open p,
    .alicerce-service-card:focus-visible p{
        transform:
            translateY(125px);
    }

}


/* ==== CLEAN SECTION OVERRIDE START ==== */

.alicerce-services-cinematic{
    background:#07182d !important;
    border-radius:0 !important;
    box-shadow:none !important;

    padding:
        90px
        clamp(28px,5vw,85px)
        110px !important;
}

.alicerce-services-cinematic::before,
.alicerce-services-cinematic::after{
    display:none !important;
}

/* ELIMINA IL VECCHIO GRANDE PANNELLO GRIGIO */
.alicerce-services-cinematic > *:not(.alicerce-service-card){
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
}

.alicerce-services-cinematic .home-services-head{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;

    width:min(1450px,100%) !important;
    margin:0 auto 60px !important;
}

.alicerce-services-cinematic .home-services-head h2{
    color:#fff !important;
    font-size:clamp(48px,6vw,94px) !important;
}

.alicerce-services-cinematic .home-services-head p{
    color:rgba(255,255,255,.72) !important;
}

.alicerce-service-grid{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;

    width:min(1450px,100%) !important;
    gap:34px !important;
}

/* LE CARD RESTANO CHIARE */
.alicerce-service-card{
    background:#f6f2ea !important;
}

@media(max-width:900px){

    .alicerce-services-cinematic{
        padding:70px 18px 80px !important;
    }

    .alicerce-service-grid{
        gap:20px !important;
    }
}

/* ==== CLEAN SECTION OVERRIDE END ==== */



/* ==== PHOTO CLEAN OVERRIDE START ==== */

/* CARD: RITORNA ALLE DIMENSIONI ORIGINALI */
.alicerce-service-card{
    min-height:400px !important;
    padding:38px 40px 42px !important;
}


/* FOTO GRANDE COME PRIMA: OCCUPA TUTTA LA CARD */
.alicerce-service-media{
    position:absolute !important;

    inset:0 !important;

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

    border-radius:28px !important;

    opacity:0 !important;

    clip-path:
        inset(100% 0 0 0 round 28px) !important;

    overflow:hidden !important;

    transition:
        opacity .50s ease,
        clip-path .85s cubic-bezier(.16,1,.3,1) !important;
}


.alicerce-service-media img{
    position:absolute !important;

    inset:0 !important;

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

    object-fit:cover !important;

    transform:scale(1.12) !important;

    transition:
        transform 1.3s cubic-bezier(.16,1,.3,1) !important;
}


/* APERTURA FOTO */
.alicerce-service-card:hover .alicerce-service-media,
.alicerce-service-card.is-open .alicerce-service-media,
.alicerce-service-card:focus-visible .alicerce-service-media{
    opacity:1 !important;

    clip-path:
        inset(0 0 0 0 round 28px) !important;
}


.alicerce-service-card:hover .alicerce-service-media img,
.alicerce-service-card.is-open .alicerce-service-media img,
.alicerce-service-card:focus-visible .alicerce-service-media img{
    transform:scale(1.02) !important;
}


/* NESSUN VELO SOPRA LA FOTO */
.alicerce-service-overlay{
    display:none !important;
}


/* QUANDO APPARE LA FOTO:
   SCOMPARE TUTTO IL TESTO E OGNI ELEMENTO GRAFICO
*/
.alicerce-service-card h3,
.alicerce-service-card p,
.alicerce-service-number,
.alicerce-service-view{
    transition:
        opacity .30s ease,
        visibility .30s ease !important;
}


.alicerce-service-card:hover h3,
.alicerce-service-card:hover p,
.alicerce-service-card:hover .alicerce-service-number,
.alicerce-service-card:hover .alicerce-service-view,

.alicerce-service-card.is-open h3,
.alicerce-service-card.is-open p,
.alicerce-service-card.is-open .alicerce-service-number,
.alicerce-service-card.is-open .alicerce-service-view,

.alicerce-service-card:focus-visible h3,
.alicerce-service-card:focus-visible p,
.alicerce-service-card:focus-visible .alicerce-service-number,
.alicerce-service-card:focus-visible .alicerce-service-view{
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
}


/* TOGLIE ANCHE LA LINEETTA DALLA FOTO */
.alicerce-service-card:hover::before,
.alicerce-service-card.is-open::before,
.alicerce-service-card:focus-visible::before{
    opacity:0 !important;
}


/* DAVANTI, PRIMA DELL'APERTURA,
   TESTO NORMALE */
.alicerce-service-card h3{
    transform:none !important;
    color:#07182d !important;
}

.alicerce-service-card p{
    transform:none !important;
    color:rgba(7,24,45,.75) !important;
}


/* MOBILE */
@media(max-width:900px){

    .alicerce-service-card{
        min-height:370px !important;
        padding:30px 28px 34px !important;
    }

}

/* ==== PHOTO CLEAN OVERRIDE END ==== */


/* ==== SERVICES HEAD POLISH START ==== */

.alicerce-services-cinematic .home-services-head{
    overflow:visible !important;
}

/* PICCOLA ETICHETTA */
.alicerce-services-cinematic .home-services-head .small-title{
    display:inline-flex !important;
    align-items:center !important;

    width:auto !important;

    padding:9px 15px !important;

    border:1px solid rgba(255,90,24,.48) !important;
    border-radius:999px !important;

    background:rgba(255,90,24,.08) !important;

    color:#ff5a18 !important;

    font-size:11px !important;
    line-height:1 !important;

    font-weight:850 !important;
    letter-spacing:.14em !important;

    text-transform:uppercase !important;

    opacity:0;
    transform:translateX(-22px);

    transition:
        opacity .65s ease,
        transform .8s cubic-bezier(.16,1,.3,1) !important;
}


/* TITOLO */
.alicerce-services-cinematic .home-services-head h2{
    width:100% !important;
    max-width:none !important;

    margin:18px 0 0 !important;

    font-size:clamp(52px,5.4vw,92px) !important;
    line-height:.90 !important;

    white-space:nowrap !important;

    opacity:0;
    transform:translateY(38px);

    transition:
        opacity .75s ease .10s,
        transform .9s cubic-bezier(.16,1,.3,1) .10s !important;
}


/* SOTTOTITOLO: UNA SOLA RIGA */
.alicerce-services-cinematic .home-services-head p{
    width:auto !important;
    max-width:none !important;

    margin:22px 0 0 !important;

    font-size:clamp(14px,1.05vw,17px) !important;
    line-height:1.45 !important;

    white-space:nowrap !important;

    opacity:0;
    transform:translateY(18px);

    transition:
        opacity .75s ease .24s,
        transform .85s cubic-bezier(.16,1,.3,1) .24s !important;
}


/* ENTRATA */
.alicerce-services-cinematic.head-is-visible
.home-services-head .small-title,

.alicerce-services-cinematic.head-is-visible
.home-services-head h2,

.alicerce-services-cinematic.head-is-visible
.home-services-head p{
    opacity:1 !important;
    transform:none !important;
}


/* MOBILE: QUI PUÒ ANDARE A CAPO */
@media(max-width:900px){

    .alicerce-services-cinematic .home-services-head h2{
        white-space:normal !important;
        font-size:clamp(46px,12vw,72px) !important;
    }

    .alicerce-services-cinematic .home-services-head p{
        white-space:normal !important;
        max-width:620px !important;
    }
}

/* ==== SERVICES HEAD POLISH END ==== */



/* ==== FINAL HOME SPACING START ==== */


/* =========================================================
   SERVIZI — VIA IL GRANDE VUOTO DOPO LA STRISCIA
   ========================================================= */

.alicerce-services-cinematic{
    padding:
        30px
        clamp(30px,5vw,80px)
        46px !important;
}


.alicerce-services-cinematic .home-services-head{
    width:min(1450px,100%) !important;

    margin:
        0 auto
        28px !important;

    padding:0 !important;
}


/* =========================================================
   "SERVIÇOS PRINCIPAIS"
   NON PIÙ BOTTONE / PILLOLA
   ========================================================= */

.alicerce-services-cinematic
.home-services-head .small-title{

    position:relative !important;

    display:inline-flex !important;
    align-items:center !important;

    width:auto !important;

    margin:0 0 10px !important;
    padding:0 0 0 28px !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    color:#ff5a18 !important;

    font-size:11px !important;
    line-height:1 !important;

    font-weight:850 !important;
    letter-spacing:.15em !important;

    text-transform:uppercase !important;
}


.alicerce-services-cinematic
.home-services-head .small-title::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:18px;
    height:2px;

    transform:translateY(-50%);

    background:#ff5a18;

    border-radius:0;
}


/* =========================================================
   O QUE FAZEMOS — PIÙ VICINO ALLA STRISCIA
   ========================================================= */

.alicerce-services-cinematic
.home-services-head h2{

    margin:
        0 !important;

    font-size:
        clamp(54px,5.8vw,94px) !important;

    line-height:.90 !important;
}


/* SOTTOTITOLO PIÙ VICINO */

.alicerce-services-cinematic
.home-services-head p{

    margin:
        14px
        0
        0 !important;

    max-width:850px !important;
}


/* =========================================================
   CARD
   ========================================================= */

.alicerce-service-grid{
    margin-top:0 !important;

    gap:24px !important;
}


/* =========================================================
   FINE CARD -> CTA
   NIENTE GRANDE ZONA VUOTA
   ========================================================= */

.cta.home-final-cta{

    margin:0 !important;

    padding:
        48px
        clamp(30px,5vw,80px) !important;

    gap:36px !important;
}


.home-final-cta .small-title{
    margin-bottom:12px !important;
}


.home-final-cta-title{
    margin:0 !important;
}


.home-final-cta p{
    margin-top:14px !important;
}


/* =========================================================
   FOOTER PIÙ COMPATTO
   ========================================================= */

.footer-landmark-inner{

    min-height:500px !important;

    padding:
        56px
        0
        38px !important;
}


.footer-landmark-bottom{
    padding-top:28px !important;
}


.footer-landmark-group h3{
    margin-bottom:18px !important;
}


.footer-landmark-group a{
    margin-bottom:11px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .alicerce-services-cinematic{

        padding:
            24px
            20px
            38px !important;
    }


    .alicerce-services-cinematic
    .home-services-head{

        margin-bottom:
            24px !important;
    }


    .alicerce-services-cinematic
    .home-services-head h2{

        font-size:
            clamp(44px,11vw,68px) !important;
    }


    .alicerce-services-cinematic
    .home-services-head p{

        margin-top:
            12px !important;
    }


    .alicerce-service-grid{
        gap:18px !important;
    }


    .cta.home-final-cta{

        padding:
            40px
            22px !important;

        gap:24px !important;
    }


    .footer-landmark-inner{

        min-height:0 !important;

        padding:
            46px
            0
            34px !important;
    }

}


/* ==== FINAL HOME SPACING END ==== */



