/* ==================================================================
   AVS GLASS - stylesheet globale
   Colori e misure presi dal file XD "Sito e landing - AVS Glass".
   Artboard di riferimento: 1920px.
   ================================================================== */

:root{
    /* palette bozzetto */
    --verde-scuro:  #166031;
    --verde:        #40a966;
    --azzurro:      #9bcbe3;
    --azzurro-form: #70b9df;
    --blu-unipol:   #0050b4;
    --navy:         #0f3250;
    --bg-chiaro:    #eff4f1;
    --grigio:       #d0d3d0;
    --nero:         #1c1c1c;
    --white-color:  #fff;

    /* tipografia */
    --font-display: "obviously", sans-serif;
    --font-body:    "noka", sans-serif;

    /* raggi del bozzetto */
    --r-card:   40px;   /* 80px su artboard 1920 */
    --r-pill:   70px;
    --r-box:    50px;
}

html{ scroll-behavior:smooth; }

body{
    font-family:var(--font-body);
    font-weight:500;
    color:var(--nero);
    background-color:var(--bg-chiaro);
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:-.01em;
}

p,a,li,label,input,textarea,button{ font-family:var(--font-body); }

a{ color:inherit; }

.text-verde{ color:var(--verde-scuro); }
.bg-verde{ background-color:var(--verde); }
.bg-verde-scuro{ background-color:var(--verde-scuro); }
.bg-azzurro{ background-color:var(--azzurro); }
.bg-chiaro{ background-color:var(--bg-chiaro); }

/* titoli di sezione ------------------------------------------------ */
.titolo-sezione{
    font-size:clamp(2rem, 3.2vw, 3.125rem);   /* 60px @1920 */
    line-height:1.1;
    text-align:center;
    margin:0;
}
.sottotitolo-sezione{
    font-size:clamp(1rem, 1.25vw, 1.125rem);
    text-align:center;
    max-width:900px;
    margin:1rem auto 0;
}

/* icone svg -------------------------------------------------------- */
.ico{ width:1em; height:1em; display:inline-block; vertical-align:middle; }
.ico-svg{ display:block; width:100%; height:100%; }

/* ==================================================================
   HEADER
   ================================================================== */
#header{
    padding-top:1.25rem;
    padding-bottom:1.25rem;
    transition:background-color .3s ease, padding .3s ease;
}
#header.header-scrolled{
    background-color: color-mix(in srgb, var(--verde-scuro), transparent 30%);
    backdrop-filter:blur(6px);
    padding-top:.5rem;
    padding-bottom:.5rem;
}
.img-logo{ width:150px; height:auto; transition: transform .3s ease; }

.img-logo:hover{
    transform: scale(1.1);
}

#header .nav-link{
    color:#fff;
    font-size:1.25rem;
    font-weight:500;
    padding:.5rem 1rem;
    opacity:.95;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
#header .nav-link:hover{ opacity:.8; transform: scale(1.05); }

@media (min-width: 992px){
    #header .nav-link{
        padding:.5rem 1.5rem;
    }
}

.btn-contatti{
    text-decoration:none;
    background-color:var(--azzurro);
    color:#fff !important;
    border-radius:var(--r-pill);
    padding:.55rem 2.2rem;
    font-family: var(--font-display);
    font-weight:600;
    font-size:1.05rem;
    border:none;
    white-space:nowrap;
    transition: transform .3s ease-in-out, background-color .3s ease-in-out, color .3s ease-in-out;
}
.btn-contatti:hover{ background-color:#86bcd9; color:#fff !important; transform: scale(1.05); }

.navbar-toggler{ border-color:rgba(255,255,255,.5); }
.navbar-toggler:focus{ box-shadow:none; }
@media(max-width:767.98px){
    #navMain{
        background-color: color-mix(in srgb, var(--verde-scuro), transparent 30%);
        backdrop-filter: blur(6px);
        border-radius:24px;
        margin-top:.5rem;
        padding:1rem;
    }

    #header.header-scrolled #navMain{
        background-color: transparent;
        backdrop-filter: none;
    }
}

/* ==================================================================
   HERO HOME
   ================================================================== */
.hero-home{
    position:relative;
    min-height: max(100vh, 480px);
    display:flex;
    align-items:center;
    background-image:url('../images/hero-home.webp');
    background-size:cover;
    background-position:right;
}
.hero-home::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);
}
.hero-home .container{ position:relative; z-index:2; }
.hero-home h1{
    color:#fff;
    font-size:clamp(2.1rem, 4.2vw, 4.2rem);
    line-height:1.08;
    max-width:14em;
}
.hero-home .hero-sub{
    color:#fff;
    font-size:clamp(1.3rem, 1.75vw, 2rem);
    max-width:30em;
    margin-top:1.25rem;
}

/* ==================================================================
   CHI SIAMO
   ================================================================== */
.sezione{ padding:clamp(3rem, 6vw, 6rem) clamp(1rem, 2.35vw, 2rem); }

.chi-siamo-testo{
    font-size:clamp(1rem, 1.15vw, 1.2rem);
    line-height:1.55;
}

@media(max-width: 992px) {
    .chi-siamo-testo {
        text-align: center;
    }
}

.container-pillole{
    margin: 0 auto;
    max-width: 450px;
}

/* pillole "Qualita' e sicurezza" ecc. */
.pillola{
    display:flex;
    align-items:center;
    gap:1rem;
    max-width:520px;
}
.pillola.pillola-dx{ flex-direction:row-reverse; }

.pillola-label{
    flex:1 1 auto;
    border:2px solid var(--verde-scuro);
    border-radius:var(--r-pill);
    padding: .5rem 1.5rem;
    text-align:center;
    font-size: clamp(1.35rem, 1.8vw, 1.8rem);
    line-height:1.2;
    height: 75px;
    align-content: center;
}
.pillola-ico{
    flex:0 0 auto;
    width: clamp(75px, 5vw, 90px);
    height: clamp(75px, 5vw, 90px);
    border-radius:50%;
    background-color:var(--verde-scuro);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.pillola-ico .ico{ width:46px; height:46px; }
.pillola:hover .pillola-ico{ background-color:var(--verde); }
.pillola:hover .pillola-label{ transform: rotate(-3deg); }
.pillola-ico, .pillola-label{ transition:background-color .3s ease, color .3s ease, transform .3s ease; }

/* ==================================================================
   SERVIZI
   ================================================================== */
.card-servizio{
    border-radius:var(--r-card);
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    background-color:#fff;
    box-shadow:0 10px 30px rgba(22,96,49,.06);
}
.card-servizio-head{
    background-color:var(--verde);
    color:#fff;
    text-align:center;
    padding:1.75rem 1.5rem;
}
.card-servizio-head .ico{ width:74px; height:74px; margin-bottom:.75rem; }
.card-servizio-head h3{
    font-family:var(--font-body);
    font-weight:600;
    font-size:clamp(1.5rem, 1.75vw, 2rem);
    line-height:1.2;
    margin:0;
}
.card-servizio-body{
    flex:1 1 auto;
    padding: 1.65rem 1.75rem;
    font-size:clamp(.95rem, 1.05vw, 1.05rem);
    line-height:1.5;
}
.card-servizio-body p:last-child{ margin-bottom:0; }

/* riquadri immagine azzurri della griglia servizi */
.riquadro-azzurro{
    background-color:var(--azzurro);
    border-radius:var(--r-card);
    overflow:hidden;
    height:100%;
    min-height:220px;
    display:flex; align-items:center; justify-content:center;
}
.riquadro-azzurro img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
#servizi .riquadro-azzurro.riquadro-auto-sopra img{ object-fit:contain; padding:1rem; transition: transform .5s ease-in-out; max-height: 500px; }

#servizi .riquadro-azzurro.riquadro-auto-sopra:hover img{
    transform: scale(1.05);
}

#servizi .riquadro-azzurro.riquadro-auto-sinistra, #servizi .riquadro-azzurro.riquadro-auto-destra{ padding: 0.75rem 0; }

#servizi .riquadro-azzurro.riquadro-auto-sinistra img, #servizi .riquadro-azzurro.riquadro-auto-destra img {
    transition: transform .5s ease-in-out, object-position .5s ease-in-out;
    object-fit:contain;
}

#servizi .riquadro-azzurro.riquadro-auto-sinistra:hover img{
    transform: scale(1.05);
    object-position: calc(100% - 5%) 50%;
}

#servizi .riquadro-azzurro.riquadro-auto-destra:hover img{
    transform: scale(1.05);
    object-position: calc(0% + 5%) 50%;
}

@media(min-width: 992px){
    #servizi .riquadro-azzurro.riquadro-auto-sinistra img{ object-position: right; object-fit:cover; }
    #servizi .riquadro-azzurro.riquadro-auto-destra img{ object-position: left; object-fit:cover; }

    #servizi .riquadro-azzurro.riquadro-auto-sinistra, #servizi .riquadro-azzurro.riquadro-auto-destra{ padding: 0.5rem 0; }

    #servizi .riquadro-azzurro.riquadro-auto-sopra:hover img{
        transform: translateY(5px) scale(1.05);
    }
}

/* ==================================================================
   AFFILIATI
   ================================================================== */
.affiliati{ text-align:center; padding:clamp(2.5rem,5vw,5rem) 0; }
.affiliati p{ font-size:clamp(1rem,1.2vw,1.2rem); color:var(--nero); margin-bottom:1.25rem; }
.logo-unipol {
    width: 100%;
    max-width: 530px;
    height:auto;
}

/* ==================================================================
   DOVE TROVARCI
   ================================================================== */
.card-sede{
    text-decoration:none;
    border:2px solid var(--verde-scuro);
    border-radius:var(--r-card);
    padding:1.75rem 1.5rem;
    height:100%;
    text-align:center;
    color:var(--verde-scuro);
    background-color:transparent;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    transition:box-shadow .3s ease, transform .3s ease;
}
.card-sede:hover{ box-shadow:0 14px 34px rgba(22,96,49,.18); transform:translateY(-4px); color:var(--verde-scuro); }
.card-sede h3{
    font-family:var(--font-body);
    font-weight:600;
    font-size:clamp(1.65rem,2vw,2rem);
    margin:0;
}
.card-sede .sede-indirizzo{ font-size:clamp(1rem,1.25vw,1.25rem); margin:.25rem 0 0; }
.card-sede img{
    width:100%;
    aspect-ratio:509/416;
    object-fit:cover;
    border-radius:var(--r-box);
    display:block;
}
.card-sede .sede-orari{ font-size:clamp(1rem,1.25vw,1.25rem); line-height:1.45; margin:0; }

/* ==================================================================
   CONTATTACI  (pillole verdi su foto)
   ================================================================== */
.contatti-fascia{
    position:relative;
    background-image:url('../images/back-contatti.webp');
    background-size:cover;
    background-position:center;
    padding:clamp(2.5rem,5vw,5rem) 0;
    margin-top:clamp(2rem,4vw,4rem);
}
.contatti-fascia::before{
    content:"";
    position:absolute; inset:0;
    background:rgba(0,0,0,.18);
}
.contatti-fascia .container{ position:relative; z-index:2; }

.pillola-contatto{
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:1.1rem;
    background-color:var(--verde);
    border-radius:var(--r-pill);
    padding:1rem 2rem;
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    transition:background-color .3s ease, transform .3s ease;
}
.pillola-contatto:hover{ background-color:var(--verde-scuro); color:#fff; transform:translateY(-3px); }
.pillola-contatto .ico{ width:44px; height:44px; flex:0 0 auto; }
.pillola-contatto .pc-citta{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.1rem,1.55vw,1.55rem);
    line-height:1.1;
    text-transform:uppercase;
}
.pillola-contatto .pc-valore{
    display:block;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(.95rem,1.15vw,1.15rem);
    line-height:1.3;
    word-break:break-word;
    margin-top: .35rem;
}

/* ==================================================================
   FORM
   ================================================================== */
.box-form{
    background-color:var(--azzurro-form);
    border-radius: 2rem;
    padding:clamp(1.75rem,4vw,4rem) clamp(1rem,3.5vw,4rem);
    color:#fff;
}
.box-form h2{
    font-size:clamp(2rem, 3.65vw, 3.75rem);
    line-height:1.1;
    text-align:center;
    margin:0;
}
.box-form .form-intro{
    text-align:center;
    font-size:clamp(1.2rem,1.2vw,1.3rem);
    margin:1rem auto 2.5rem;
    max-width:44em;
}
.box-form .form-label{
    font-size:clamp(1.15rem,1.2vw,1.25rem);
    font-weight:500;
    margin-bottom:.5rem;
}
.form-control-avs{
    background-color:rgba(255,255,255,.22) !important;
    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:var(--r-pill) !important;
    padding:1rem 1.75rem !important;
    color:#fff !important;
    font-size:1rem;
    box-shadow:none !important;
}
textarea.form-control-avs{ border-radius:34px !important; min-height:150px; }
.form-control-avs::placeholder{ color:rgba(255,255,255,.85); }
.form-control-avs:focus{ background-color:rgba(255,255,255,.3) !important; border-color:#fff !important; color:#fff !important; }
.form-control-avs.is-invalid{ border-color:#ffd2d2 !important; background-color:rgba(255,120,120,.25) !important; }

.form-check-input-avs{
    width:1.6rem; height:1.6rem;
    margin-top:.1rem;
    background-color:rgba(255,255,255,.85);
    border:none;
    border-radius:8px;
}
.form-check-input-avs:checked{ background-color:var(--verde-scuro); border-color:var(--verde-scuro); }
.form-check-input-avs.is-invalid{ outline:2px solid #ffd2d2; }
.form-privacy{ font-size:.9rem; line-height:1.45; }
.form-privacy a{ color:#fff; text-decoration:underline; }

.btn-invia{
    background-color:#fff;
    color:var(--azzurro-form);
    border:none;
    border-radius:34px;
    padding:.4rem 2.35rem;
    font-weight:600;
    font-size:1.35rem;
}
.btn-invia:hover{ background-color:var(--verde-scuro); color:#fff; }

.captcha-input{ max-width:200px !important; width: 100%; text-align:center; padding:.75rem 1rem !important; }

.captcha-input::placeholder{
    font-size: .875rem;
}

/* ==================================================================
   FOOTER
   ================================================================== */
.footer{
    background:linear-gradient(180deg, var(--verde-scuro) 0%, #0d4322 100%);
    color:#fff;
    padding:clamp(2.5rem,5vw,4.5rem) 0 2rem;
}
.footer-logo{ width:200px; height:auto; transition: transform .3s ease; }
.footer-logo:hover{ transform: scale(1.1); }
.footer-col{ font-size:.95rem; line-height:1.55; }
.footer-col h3{
    font-family:var(--font-body);
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:1.5rem;
}
.footer-col strong{ font-weight:600; display:block; margin-bottom:.15rem; }
.footer-col .blocco + .blocco{ margin-top:1.25rem; }
.footer-col a{ color:#fff; text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }
@media(min-width:576px){
    .footer-col + .footer-col{ border-left:1px solid rgba(255,255,255,.3); }
}

@media(max-width:992px){
    .row-footer-col .footer-col:last-child { border-left: 0; }
}

.footer-legale{
    margin-top:2.5rem;
    text-align:center;
    font-size:.8rem;
    opacity:.9;
}
.footer-legale a{ color:#fff; text-decoration:none; }
.footer-legale a:hover{ text-decoration:underline; }

/* ==================================================================
   LANDING
   ================================================================== */
.landing-hero{
    position:relative;
    min-height:min(100vh, 780px);
    display:flex;
    background-size:cover;
    background-position:center;
    padding: 7rem 0 3rem;
}
.landing-hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.1) 100%);
}
.landing-hero > .container{ position:relative; z-index:2; }
.landing-hero-parabrezza{ background-image:url('../images/parabrezza/hero-parabrezza.webp'); }
.landing-hero-lunotto{    background-image:url('../images/lunotti/hero-lunotto.webp'); }
.landing-hero-finestrini{ background-image:url('../images/finestrini/hero-finestrini.webp'); }

.landing-hero h1{
    color:#fff;
    text-transform:uppercase;
    font-size:clamp(2.5rem, 5vw, 4.35rem);
    line-height:1.05;
}
.landing-hero .hero-sub{
    color:#fff;
    font-size:clamp(1.45rem,1.5vw,1.65rem);
    max-width:26em;
    margin:1.5rem 0 2rem;
}

.logo-landing{
    position:absolute;
    top:2rem; right:2rem;
    z-index:3;
}
.logo-landing img{ width:150px; height:auto; }
.chiama-subito, .numeri-hero a{ text-decoration:none; transition: transform .3s ease-in-out; }

.numeri-hero a:hover{
    transform: scale(1.05);
}

@media(max-width:767.98px){
    .logo-landing{ top:1rem; right:1rem; }
    .logo-landing img{ width:120px; }
}

.chiama-subito{
    display:flex;
    align-items:center;
    gap:1rem;
    color:#fff;
    text-decoration:none;
    font-family:var(--font-display);
    font-size:clamp(1.25rem,1.3vw,1.45rem);
    letter-spacing:.04em;
    text-transform:uppercase;
    font-weight: bold;
    transition: transform .3s ease-in-out, font-weight .3s ease-in-out;
}
.chiama-subito .ico{ width:60px; height:60px; flex:0 0 auto; transition: transform .3s ease-in-out; }

.numeri-hero:has( a:hover) .chiama-subito{
    transform: scale(1.1);
}

.numeri-hero:has( a:hover) .chiama-subito .ico{
    transform: translateX(-5%) rotate(-10deg);
}

.numeri-hero{ color:#fff; }
.numeri-hero a{ text-decoration:none; color:#fff; display:block; }
.numeri-hero a:hover{ opacity:.85; }
.numeri-hero .nh-citta{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(1.5rem,2vw,2rem);
    line-height:1.1;
}
.numeri-hero .nh-num{
    display:block;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(1.25rem,1.2vw,1.5rem);
}

@media (max-width: 991.98px) {
    .numeri-hero .nh-citta, .numeri-hero .nh-num{
        text-align: center;
    }
}

/* tre card verdi sotto l'hero */
.card-punto{
    background-color:var(--verde-scuro);
    color:#fff;
    border-radius:var(--r-card);
    padding:2.5rem 2rem;
    height:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.5rem;
    min-height:260px;
}
.card-punto .ico{ width:70px; height:70px; }
.card-punto p{
    margin:0;
    font-size:clamp(1rem,1.3vw,1.35rem);
    line-height:1.35;
}
.fascia-punti{ margin-top:-140px; position:relative; z-index:3; }
@media(max-width:991.98px){ .fascia-punti{ margin-top:2rem; } }

/* blocco testo + immagine */
.landing-testo h2{
    font-size:clamp(1.7rem, 3.2vw, 3.125rem);
    line-height:1.12;
    margin-bottom:2rem;
}
.landing-testo p{
    font-size:clamp(1.15rem,1.2vw,1.25rem);
    line-height:1.55;
}

@media (max-width: 991.98px) {
    .landing-testo p {
        text-align: center;
    }
}

.img-landing{
    max-width: 600px;
    width:100%;
    border-radius:var(--r-card);
    object-fit:cover;
    display:block;
}

.btn-azzurro{
    text-decoration:none;
    background-color:var(--azzurro);
    color:#fff !important;
    border:none;
    border-radius:var(--r-pill);
    padding:.85rem 2.4rem;
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.05rem;
    text-transform:uppercase;
    display:inline-block;
    transition: transform .3s ease-in-out, background-color .3s ease-in-out, color .3s ease-in-out;
}
.btn-azzurro:hover{ background-color:#86bcd9; color:#fff !important; transform: scale(1.05); }

/* perche' sceglierci */
.card-plus{
    border:2px solid var(--verde-scuro);
    border-radius:var(--r-card);
    padding:2rem 1.75rem;
    text-align:center;
    height:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.card-plus h3{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.5rem,1.6vw,1.75rem);
    margin-bottom:1rem;
}
.card-plus p{ margin:0; font-size:clamp(.95rem,1.15vw,1.2rem); line-height:1.45; }

.card-plus-centro{
    background-color:var(--verde);
    color:#fff;
    border-radius:var(--r-card);
    padding:2.5rem 2rem;
    text-align:center;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    gap:1.25rem;
}
.card-plus-centro img{ width:150px; height:auto; }
.card-plus-centro h3{
    text-transform:uppercase;
    font-size:clamp(1.5rem,1.6vw,1.75rem);
    line-height:1.15;
    margin:0;
}
.card-plus-centro p{
    margin:0;
    font-size:clamp(.95rem,1.15vw,1.2rem);
    line-height:1.45;
}
.img-plus{
    width:100%;
    border-radius:var(--r-card);
    aspect-ratio:511/429;
    object-fit:cover;
    display:block;
}

/* ==================================================================
   404
   ================================================================== */
.pagina-404{
    position:relative;
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-image:url('../images/hero-home.webp');
    background-size:cover;
    background-position: bottom right;
    padding:6rem 1rem 4rem;
}
.pagina-404::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.pagina-404 .container{ position:relative; z-index:2; }
.badge-404{
    display:inline-block;
    background-color:#fff;
    color:var(--verde-scuro);
    border-radius:var(--r-card);
    padding:1rem 3rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(3rem,4.7vw,5.6rem);
    line-height:1.1;
}
.pagina-404 h1{
    color:#fff;
    font-size:clamp(1.9rem,3.4vw,3.4rem);
    margin:2rem 0 1.25rem;
}
.pagina-404 p{ color:#fff; font-size:clamp(1rem,1.25vw,1.25rem); max-width:44em; margin:0 auto 2rem; }
.btn-404{
    text-decoration:none;
    background-color:var(--azzurro-form);
    color:#fff !important;
    border-radius:var(--r-pill);
    padding:.9rem 2.6rem;
    font-weight:700;
    text-transform:uppercase;
    display:inline-block;
    letter-spacing:.03em;
    transition: transform .3s ease-in-out, background-color .3s ease-in-out, color .3s ease-in-out;
}
.btn-404:hover{ background-color:#86bcd9; color:#fff !important; transform: scale(1.05); }


/* ==================================================================
   TOAST
   ================================================================== */
.toast-container{ z-index:1080; }