/* =========================================================
   ALICERCE — INTRO CON SCROLL BLOCCATO
   ========================================================= */

body{
    padding-top:0 !important;
}


/* =========================================================
   HERO = UNA SOLA SCHERMATA
   ========================================================= */

.alice-cine-hero.alice-intro-v2{
    position:relative !important;

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

    height: 145vh !important;
    min-height: 145vh !important;

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

    overflow:hidden !important;

    background:#07182d !important;
}


/* =========================================================
   SCENA
   ========================================================= */

.alice-intro-stage{
    position:absolute !important;

    inset:0 !important;

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

    overflow:hidden !important;

    background:#07182d !important;
}


/* =========================================================
   TESTI INTRO
   ========================================================= */

.alice-intro-copy{
    position:absolute;

    inset:0;

    z-index:10;

    pointer-events:none;
}


.alice-intro-name{
    position:absolute;

    left:0;
    top:28%;

    width:100%;

    margin:0;
    padding:0 32px;

    text-align:center;

    color:#fff;

    font-size:clamp(58px,7vw,122px);

    line-height:.88;

    letter-spacing:-.055em;

    font-weight:900;

    text-transform:uppercase;

    white-space:nowrap;

    opacity:0;

    will-change:
        transform,
        opacity;
}


.alice-intro-subtitle{
    position:absolute;

    left:0;
    top:46%;

    width:100%;

    margin:0;
    padding:0 24px;

    text-align:center;

    color:rgba(255,255,255,.78);

    font-size:clamp(11px,.95vw,15px);

    line-height:1;

    letter-spacing:.22em;

    font-weight:800;

    text-transform:uppercase;

    white-space:nowrap;

    opacity:0;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   QUESTA È PRIMA LA LINEA
   POI DIVENTA LA FESSURA DEL VIDEO
   POI DIVENTA FULL SCREEN
   ========================================================= */

.alice-intro-window{
    position:absolute;

    left:50%;
    top:59%;

    transform:translate(-50%,-50%);

    width:0;
    height:4px;

    z-index:4;

    overflow:hidden;

    border-radius: 0;

    background:#ff5a18;

    will-change:
        width,
        height,
        top,
        border-radius;
}


/* VIDEO */

.alice-intro-window .alice-cine-video{
    position:absolute !important;

    inset:0 !important;

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

    display:block !important;

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

    clip-path:none !important;

    transform:scale(1.18) !important;

    opacity:0;

    z-index:1 !important;

    will-change:
        transform,
        opacity;
}


/* OVERLAY */

.alice-intro-window .alice-cine-overlay{
    position:absolute !important;

    inset:0 !important;

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

    z-index:2 !important;

    clip-path:none !important;

    opacity:0;

    pointer-events:none;
}


/* =========================================================
   HERO FINALE
   ========================================================= */

.alice-intro-stage > .alice-cine-content{
    position:absolute !important;

    inset:0 !important;

    z-index:20 !important;

    width:min(920px,66%) !important;
    height: 100vh !important;

    display:flex !important;

    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;

    padding:
        155px
        0
        70px
        clamp(70px,7vw,140px) !important;

    opacity:0;
    visibility:hidden;

    transform:translateY(35px);
}


.alice-intro-stage > .alice-cine-scroll{
    z-index:21 !important;

    opacity:0;
    visibility:hidden;
}


/* =========================================================
   MENU
   ========================================================= */

.site-header{
    opacity:0;
    visibility:hidden;
}


/*
SOLTANTO mentre l'intro è bloccata
il menu appartiene al viewport.
*/

.site-header{
    position:fixed !important;
}


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

@media(max-width:800px){

    body{
        padding-top:0 !important;
    }


    .alice-cine-hero.alice-intro-v2{
        height: 135svh !important;
        min-height: 135svh !important;
    }


    .alice-intro-name{
        top:27%;

        padding:0 18px;

        font-size:clamp(40px,11vw,67px);

        line-height:.92;

        white-space:normal;
    }


    .alice-intro-subtitle{
        top:47%;

        padding:0 20px;

        font-size:10px;

        line-height:1.45;

        white-space:normal;
    }


    .alice-intro-window{
        top:61%;
    }


    .alice-intro-stage > .alice-cine-content{
        width:100% !important;

        justify-content:flex-end !important;

        padding:
            120px
            28px
            74px !important;
    }

}


/* ==== HERO BUTTONS BOTTOM START ==== */

.alice-intro-stage .alice-cine-actions{
    position:absolute !important;
    left:clamp(70px,7vw,140px) !important;
    bottom:45px !important;

    margin:0 !important;

    display:flex !important;
    gap:16px !important;

    z-index:30 !important;
}

@media(max-width:800px){

    .alice-intro-stage .alice-cine-actions{
        left:28px !important;
        right:28px !important;
        bottom:32px !important;

        flex-wrap:wrap !important;
    }

}

/* ==== HERO BUTTONS BOTTOM END ==== */




/* ==== HERO FINAL OVERLAY START ==== */


/* =========================================================
   CONTENITORE SOPRA IL VIDEO DA 145VH
   ========================================================= */

.alice-intro-stage > .alice-cine-content{

    position:absolute !important;

    left:0 !important;
    top:0 !important;

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

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

    z-index:20 !important;

    opacity:0 !important;
    visibility:hidden !important;

    transform:none !important;

    pointer-events:none;

    transition:
        opacity .70s ease,
        visibility .70s ease !important;
}


/* SOLO QUANDO IL VIDEO HA FINITO DI APRIRSI */

body.alice-intro-finished
.alice-intro-stage > .alice-cine-content{

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto;
}


/* =========================================================
   ALICERCE IMBATÍVEL
   CENTRATO NELLA PRIMA SCHERMATA DEL VIDEO
   ========================================================= */

.alice-intro-stage > .alice-cine-content::before{

    content:"ALICERCE IMBATÍVEL";

    position:absolute;

    left:0;

    top: calc(72.5vh - 160px);

    width:100%;

    color:rgba(255,255,255,.88);

    font-size:
        clamp(12px,1vw,16px);

    line-height:1;

    letter-spacing:.27em;

    font-weight:500;

    text-align:center;

    text-transform:uppercase;

    pointer-events:none;
}


/* =========================================================
   OBRAS E REMODELAÇÕES
   CENTRO DEL VIEWPORT MENTRE IL VIDEO È FERMO
   ========================================================= */

.alice-intro-stage .alice-cine-title{

    position:absolute !important;

    left:50% !important;
    top: 72.5vh !important;

    transform:
        translate(-50%,-50%) !important;

    width:min(94vw,1450px) !important;

    margin:0 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    text-align:center !important;

    font-size:
        clamp(62px,6.8vw,116px) !important;

    line-height:.89 !important;

    letter-spacing:-.055em !important;
}


.alice-intro-stage .alice-title-fixed{

    display:block !important;

    width:100% !important;

    color:#fff !important;

    text-align:center !important;
}


/* FRASE DINAMICA */

.alice-intro-stage .alice-title-dynamic{

    display:block !important;

    width:100% !important;

    margin-top:22px !important;

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

    font-size:
        clamp(13px,1.1vw,18px) !important;

    line-height:1.2 !important;

    letter-spacing:.035em !important;

    font-weight:500 !important;

    text-align:center !important;

    text-transform:uppercase !important;
}


.alice-intro-stage #alice-typeword{

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

    font-size:inherit !important;

    line-height:inherit !important;

    letter-spacing:inherit !important;
}


/* VECCHI PULSANTI VIA */

.alice-intro-stage .alice-cine-actions{
    display:none !important;
}


.alice-intro-stage .alice-cine-scroll{
    display:none !important;
}


/* =========================================================
   FRECCIA
   RESTA VICINO ALLA FASCIA FINALE
   ========================================================= */

.alice-hero-down-arrow{

    position:absolute !important;

    left:50% !important;

    top:auto !important;
    bottom:48px !important;

    width:28px !important;
    height:48px !important;

    transform:translateX(-50%) !important;

    z-index:40 !important;

    pointer-events:none !important;

    animation:
        aliceArrowBounce
        1.3s
        ease-in-out
        infinite !important;
}


.alice-hero-down-arrow::before{

    content:"";

    position:absolute;

    left:50%;
    top:0;

    width:3px;
    height:32px;

    transform:translateX(-50%);

    background:#ff5a18;
}


.alice-hero-down-arrow::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    transform:translateX(-50%);

    width:0;
    height:0;

    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:15px solid #ff5a18;
}


@keyframes aliceArrowBounce{

    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);

        opacity:.72;
    }

    50%{
        transform:
            translateX(-50%)
            translateY(8px);

        opacity:1;
    }

}


/* =========================================================
   PEDIR ORÇAMENTO
   ULTIMISSIMA COSA DEL VIDEO
   ========================================================= */

.alice-hero-budget-bar{

    position:absolute !important;

    left:0 !important;
    right:0 !important;

    top:auto !important;
    bottom:0 !important;

    transform:none !important;

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

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

    z-index:41 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:#ff641c !important;

    color:#07182d !important;

    font-size:10px !important;

    line-height:1 !important;

    letter-spacing:.19em !important;

    font-weight:800 !important;

    text-transform:uppercase !important;

    text-decoration:none !important;
}


.alice-hero-budget-bar:hover{

    background:#ff7530 !important;

    letter-spacing:.22em !important;
}


/* MOBILE */

@media(max-width:800px){

    .alice-intro-stage > .alice-cine-content{

        height:135svh !important;
    }


    .alice-intro-stage >
    .alice-cine-content::before{

        top: calc(72.5vh - 160px);

        font-size:10px;

        letter-spacing:.18em;
    }


    .alice-intro-stage .alice-cine-title{

        top: 72.5vh !important;

        width:92% !important;

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


    .alice-intro-stage .alice-title-dynamic{

        margin-top:16px !important;

        font-size:11px !important;
    }


    .alice-hero-budget-bar{

        height:26px !important;

        font-size:9px !important;
    }

}


/* ==== HERO FINAL OVERLAY END ==== */





/* ==== HEADER THIN FINAL START ==== */


/* =========================================================
   BARRA SUPERIORE
   MENU = 13PX
   BARRA = 30PX
   ========================================================= */

.site-header{

    position:fixed !important;

    top:24px !important;

    left:50% !important;
    right:auto !important;

    transform:
        translateX(-50%) !important;

    width:
        calc(100% - 150px) !important;

    max-width:
        1500px !important;

    height:30px !important;
    min-height:30px !important;

    margin:0 !important;

    padding:
        0
        14px !important;

    display:flex !important;

    align-items:center !important;

    background:
        rgba(255,248,226,.64) !important;

    border:
        1px solid
        rgba(255,255,255,.22) !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    overflow:visible !important;
}


/* =========================================================
   BRAND
   ========================================================= */

.site-header .brand{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    height:30px !important;

    min-width:0 !important;

    gap:0 !important;
}


/* =========================================================
   LOGO FUORI DALLA BARRA
   ORA USA IL PNG TRASPARENTE
   ========================================================= */

.site-header .brand-logo{

    position:absolute !important;

    left:0 !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    width:30px !important;
    height:30px !important;

    padding:0 !important;

    object-fit:contain !important;

    background:transparent !important;

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

    box-shadow:none !important;

    z-index:20 !important;
}


/* =========================================================
   ALICERCE IMBATÍVEL LDA
   ========================================================= */

.site-header .brand h1{

    margin:0 0 0 42px !important;

    color:#07182d !important;

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

    font-weight:750 !important;

    white-space:nowrap !important;
}


/* NIENTE VECCHIO SOTTOTITOLO */

.site-header .brand p{
    display:none !important;
}


/* NIENTE WHATSAPP */

.site-header .header-btn{
    display:none !important;
}


/* =========================================================
   MENU CENTRATO
   ========================================================= */

@media(min-width:901px){

    .site-header nav{

        position:absolute !important;

        left:50% !important;
        top:50% !important;

        transform:
            translate(-50%,-50%) !important;

        display:flex !important;

        align-items:center !important;

        gap:36px !important;

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


    .site-header nav a{

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

        font-size:13px !important;

        line-height:1 !important;

        letter-spacing:.055em !important;

        font-weight:800 !important;

        white-space:nowrap !important;
    }

}


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

@media(max-width:900px){

    .site-header{

        top:14px !important;

        width:
            calc(100% - 90px) !important;

        height:38px !important;
        min-height:38px !important;

        padding:
            0
            10px !important;
    }


    .site-header .brand{

        height:38px !important;
    }


    .site-header .brand-logo{

    position:absolute !important;

    left:0 !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    width:30px !important;
    height:30px !important;

    padding:0 !important;

    object-fit:contain !important;

    background:transparent !important;

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

    box-shadow:none !important;

    z-index:20 !important;
}


    .site-header .brand h1{

    margin:0 0 0 42px !important;

    color:#07182d !important;

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

    font-weight:750 !important;

    white-space:nowrap !important;
}

}


/* ==== HEADER THIN FINAL END ==== */



/* ==== ALICERCE INTRO PHOTO TEXT START ==== */

.alice-photo-text{

    color:transparent !important;
    -webkit-text-fill-color:transparent !important;

    background-image:

        linear-gradient(
            110deg,

            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.12) 18%,

            rgba(10,55,110,.28) 35%,

            rgba(255,90,24,.42) 52%,
            rgba(255,120,45,.30) 67%,

            rgba(12,55,105,.26) 82%,

            rgba(255,255,255,.20) 100%
        ),

        url("../img/intro/alicerce-intro-texture.jpg") !important;


    background-size:
        100% 100%,
        cover !important;


    background-position:
        center,
        center 44% !important;


    background-repeat:
        no-repeat !important;


    background-blend-mode:
        soft-light,
        normal !important;


    -webkit-background-clip:text !important;
    background-clip:text !important;


    filter:
        brightness(1.30)
        contrast(1.14)
        saturate(1.28) !important;


    -webkit-text-stroke:
        .35px rgba(255,255,255,.20);

}


/* ==== ALICERCE INTRO PHOTO TEXT END ==== */