/* =========================================================
   PORTALE CITTÀ — foglio di stile del tema
   Giallo su nero, angoli arrotondati, micro-etichette
   maiuscole, linee sottili, numerazioni e frecce.

   I colori si cambiano da Amministrazione → Impostazioni:
   le variabili qui sotto sono solo i valori di riserva.
========================================================= */

*{
    margin:0;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:16px;
    line-height:1.6;

    background:#fff;
}

img{
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
}

:root{
    --glp-accent:#ffd400;
    --glp-on-accent:#000;
    --glp-dark:#0d0d0d;
    --glp-on-dark:#fff;
    --glp-text:#111;
    --glp-soft:#f5f5f6;
    --glp-radius:5px;
}

.glp-hero.glp-hero,
.glp-sections.glp-sections{
    --glp-muted-dark:rgba(255,255,255,.72);
    --glp-line-dark:rgba(255,255,255,.16);
    --glp-muted:rgba(17,17,17,.62);
    --glp-line:rgba(17,17,17,.14);

    color:var(--glp-text);
}

.glp-hero.glp-hero *,
.glp-hero.glp-hero *::before,
.glp-hero.glp-hero *::after,
.glp-sections.glp-sections *,
.glp-sections.glp-sections *::before,
.glp-sections.glp-sections *::after,
.glp-citymenu.glp-citymenu,
.glp-citymenu.glp-citymenu *,
.glp-topbar.glp-topbar,
.glp-topbar.glp-topbar *,
.glp-bottombar.glp-bottombar,
.glp-bottombar.glp-bottombar *,
.glp-grid.glp-grid,
.glp-grid.glp-grid *{
    box-sizing:border-box;
}


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

.glp-hero.glp-hero{
    position:relative;

    overflow:hidden;

    margin:0 0 clamp(48px,7vw,90px);

    padding:clamp(52px,7vw,96px) clamp(22px,4vw,54px) clamp(46px,6vw,80px);

    border-radius:var(--glp-radius);

    background-color:var(--glp-dark);
    background-size:cover;
    background-position:center;

    color:var(--glp-on-dark);
}

.glp-hero--image.glp-hero--image{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.glp-hero--image.glp-hero--image::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(105deg,rgba(0,0,0,.92),rgba(0,0,0,.72));
}

.glp-hero__inner.glp-hero__inner{
    position:relative;
    z-index:2;

    width:100%;
    margin:0 auto;
}


/* ---------- riga alta ---------- */

.glp-hero__top.glp-hero__top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    margin-bottom:35px;
}

.glp-hero__eyebrow.glp-hero__eyebrow{
    display:flex;
    align-items:center;
    gap:12px;

    margin:0;

    color:#fff;

    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.glp-hero__eyebrow.glp-hero__eyebrow::before{
    content:"";

    flex:none;

    width:35px;
    height:2px;

    background:var(--glp-accent);
}

.glp-hero__status.glp-hero__status{
    display:flex;
    align-items:center;
    gap:10px;

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

    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.glp-hero__status-dot.glp-hero__status-dot{
    position:relative;

    flex:none;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--glp-accent);
}

.glp-hero__status-dot.glp-hero__status-dot::after{
    content:"";

    position:absolute;
    inset:-5px;

    border:1px solid rgba(255,212,0,.45);
    border-radius:50%;

    animation:glpPulse 2.4s ease-out infinite;
}


/* ---------- griglia principale ---------- */

.glp-hero__main.glp-hero__main{
    display:grid;

    grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);

    gap:90px;
    align-items:end;
}

.glp-hero__main--solo.glp-hero__main--solo{
    grid-template-columns:minmax(0,1fr);
}

.glp-hero__content.glp-hero__content{
    min-width:0;
}

.glp-hero__title.glp-hero__title{
    max-width:950px;

    margin:0 0 32px;

    color:#fff;

    font-size:clamp(40px,5.4vw,78px);
    font-weight:700;
    line-height:.98;
    letter-spacing:-.05em;
}

.glp-hero__title.glp-hero__title span{
    color:var(--glp-accent);
}

.glp-hero__text.glp-hero__text{
    max-width:760px;

    margin:0 0 38px;

    color:var(--glp-muted-dark);

    font-size:18px;
    line-height:1.7;
}

.glp-hero__text.glp-hero__text strong{
    color:#fff;
    font-weight:600;
}


/* ---------- pulsanti ---------- */

.glp-hero__cta.glp-hero__cta,
.glp-cta.glp-cta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;
}

.glp-btn.glp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    min-height:55px;

    padding:0 25px;

    border:1px solid transparent;
    border-radius:var(--glp-radius);

    background:var(--glp-accent);

    color:var(--glp-on-accent);

    font-size:13px;
    font-weight:700;
    line-height:1.2;

    text-decoration:none;

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

.glp-btn.glp-btn::after{
    content:"→";

    font-size:17px;

    transition:transform .3s ease;
}

.glp-btn--ghost.glp-btn--ghost{
    border-color:rgba(255,255,255,.25);

    background:rgba(0,0,0,.35);

    color:#fff;

    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

.glp-btn--tel.glp-btn--tel::after{
    content:"↗";
}

@media(hover:hover){

    .glp-btn.glp-btn:hover{
        transform:translateY(-3px);

        box-shadow:0 12px 30px rgba(255,212,0,.22);
    }

    .glp-btn.glp-btn:hover::after{
        transform:translateX(4px);
    }

    .glp-btn--ghost.glp-btn--ghost:hover{
        border-color:var(--glp-accent);

        box-shadow:none;
    }
}


/* ---------- indice dei servizi ---------- */

.glp-hero__index.glp-hero__index{
    position:relative;

    border-top:1px solid var(--glp-line-dark);

    background:rgba(0,0,0,.30);

    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
}

.glp-hero__index-title.glp-hero__index-title{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:15px 18px;

    border-bottom:1px solid var(--glp-line-dark);

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

    font-size:8px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.glp-hero__index-title.glp-hero__index-title::after{
    content:attr(data-count);

    color:var(--glp-accent);
}

.glp-hero__service.glp-hero__service{
    display:grid;

    grid-template-columns:28px minmax(0,1fr) 20px;

    gap:10px;
    align-items:center;

    min-height:52px;

    padding:0 18px;

    border-bottom:1px solid var(--glp-line-dark);

    color:#fff;

    text-decoration:none;

    transition:background .3s ease,padding-left .35s cubic-bezier(.16,1,.3,1);
}

.glp-hero__service-number.glp-hero__service-number{
    color:rgba(255,255,255,.3);

    font-size:8px;
    font-weight:700;
}

.glp-hero__service-name.glp-hero__service-name{
    color:#fff;

    font-size:11px;
    font-weight:600;
    line-height:1.3;
}

.glp-hero__service-arrow.glp-hero__service-arrow{
    color:var(--glp-accent);

    font-size:15px;

    transition:transform .3s ease;
}

@media(hover:hover){

    .glp-hero__service.glp-hero__service:hover{
        padding-left:23px;

        background:rgba(255,212,0,.08);
    }

    .glp-hero__service.glp-hero__service:hover .glp-hero__service-arrow{
        transform:translateX(4px);
    }
}


/* ---------- riga bassa ---------- */

.glp-hero__bottom.glp-hero__bottom{
    display:grid;

    grid-template-columns:auto minmax(50px,1fr) auto;

    gap:18px;
    align-items:center;

    margin-top:52px;

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

    font-size:8px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.glp-hero__bottom-line.glp-hero__bottom-line{
    position:relative;

    height:1px;

    background:rgba(255,255,255,.14);
}

.glp-hero__bottom-line.glp-hero__bottom-line::after{
    content:"";

    position:absolute;

    top:-2px;
    left:0;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--glp-accent);

    animation:glpScan 6s ease-in-out infinite alternate;
}

.glp-hero__corner.glp-hero__corner{
    position:absolute;

    z-index:1;

    right:28px;
    bottom:28px;

    width:70px;
    height:70px;

    border-right:1px solid rgba(255,212,0,.55);
    border-bottom:1px solid rgba(255,212,0,.55);

    pointer-events:none;
}


/* =========================================================
   SEZIONI
========================================================= */

.glp-sections.glp-sections{
    margin-top:clamp(40px,6vw,72px);
}

.glp-section.glp-section{
    margin:0 0 clamp(46px,6.5vw,86px);
}

.glp-section__title.glp-section__title{
    margin:0 0 28px;

    color:var(--glp-text);

    font-size:clamp(27px,3.3vw,44px);
    font-weight:700;
    line-height:1.04;
    letter-spacing:-.035em;
}

.glp-section__label.glp-section__label{
    display:flex;
    align-items:center;
    gap:12px;

    margin:0 0 14px;

    color:var(--glp-muted);

    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.glp-section__label.glp-section__label::before{
    content:"";

    flex:none;

    width:35px;
    height:2px;

    background:var(--glp-accent);
}

.glp-intro.glp-intro{
    max-width:820px;

    font-size:18px;
    line-height:1.7;
    color:var(--glp-muted);
}

/* Solo i paragrafi del testo, non tutti i <p> della sezione: il
   soprattitolo è un <p> anche lui, e prendeva questa misura invece
   della sua. Affiancate, le due sezioni partivano sfalsate di 18px. */
.glp-section--approfondimento.glp-section--approfondimento .glp-prosa p{
    font-size:16px;
    line-height:1.8;
}


/* ---------- elenchi ---------- */

.glp-list.glp-list{
    list-style:none;
    margin:0;
    padding:0;

    display:grid;
    gap:0;

    border-top:1px solid var(--glp-line);
}

.glp-list--check.glp-list--check li,
.glp-list--why.glp-list--why li,
.glp-list--certs.glp-list--certs li{
    position:relative;

    padding:15px 0 15px 34px;

    border-bottom:1px solid var(--glp-line);

    font-size:15px;
    line-height:1.5;
}

.glp-list--check.glp-list--check li::before,
.glp-list--why.glp-list--why li::before,
.glp-list--certs.glp-list--certs li::before{
    content:"→";

    position:absolute;
    left:0;
    top:14px;

    color:var(--glp-accent);

    font-size:15px;
    font-weight:700;
}


/* ---------- indice servizi nel contenuto ---------- */

.glp-cards.glp-cards{
    list-style:none;
    margin:0;
    padding:0;

    border-top:1px solid var(--glp-line);

    counter-reset:glp-card;
}

.glp-card.glp-card{
    counter-increment:glp-card;
}

.glp-card__link.glp-card__link{
    display:grid;

    grid-template-columns:38px minmax(0,1fr) auto 20px;

    gap:14px;
    align-items:center;

    min-height:74px;

    padding:14px 14px 14px 0;

    border-bottom:1px solid var(--glp-line);

    color:inherit;

    text-decoration:none;

    transition:background .3s ease,padding-left .35s cubic-bezier(.16,1,.3,1);
}

.glp-card__link.glp-card__link::before{
    content:counter(glp-card,decimal-leading-zero);

    color:var(--glp-muted);

    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
}

.glp-card__body.glp-card__body{
    min-width:0;
}

.glp-card__title.glp-card__title{
    display:block;

    font-size:17px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.01em;
}

.glp-card__text.glp-card__text{
    display:block;

    margin-top:3px;

    color:var(--glp-muted);

    font-size:13px;
    line-height:1.5;
}

.glp-card__price.glp-card__price{
    color:var(--glp-text);

    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;

    white-space:nowrap;
}

.glp-card__link.glp-card__link::after{
    content:"→";

    color:var(--glp-accent);

    font-size:16px;

    transition:transform .3s ease;
}

@media(hover:hover){

    .glp-card__link.glp-card__link:hover{
        padding-left:14px;

        background:rgba(255,212,0,.07);
    }

    .glp-card__link.glp-card__link:hover::after{
        transform:translateX(4px);
    }
}


/* ---------- numeri ---------- */

.glp-stats.glp-stats{
    list-style:none;
    margin:34px 0 0;
    padding:0;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    border-top:1px solid var(--glp-line);
}

.glp-stats.glp-stats li{
    padding:22px 20px 22px 0;

    border-bottom:1px solid var(--glp-line);
}

.glp-stats.glp-stats strong{
    display:block;

    color:var(--glp-text);

    font-size:clamp(32px,3.6vw,48px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.04em;
}

.glp-stats.glp-stats span{
    display:block;

    margin-top:9px;

    color:var(--glp-muted);

    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.glp-stat--text.glp-stat--text strong{
    font-size:19px;
    line-height:1.3;
    letter-spacing:-.01em;
}


/* ---------- passaggi ---------- */

.glp-steps.glp-steps{
    list-style:none;
    margin:0;
    padding:0;

    counter-reset:glp-step;

    border-top:1px solid var(--glp-line);
}

.glp-step.glp-step{
    counter-increment:glp-step;

    display:grid;
    grid-template-columns:52px minmax(0,1fr);

    gap:18px;

    padding:26px 0;

    border-bottom:1px solid var(--glp-line);
}

.glp-step.glp-step::before{
    content:counter(glp-step,decimal-leading-zero);

    color:var(--glp-accent);

    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
}

.glp-step__body.glp-step__body{
    min-width:0;
}

.glp-step__title.glp-step__title{
    margin:0 0 6px;

    font-size:17px;
    font-weight:700;
    letter-spacing:-.01em;
}

.glp-step.glp-step p{
    margin:0;

    color:var(--glp-muted);

    font-size:15px;
    line-height:1.65;
}

.glp-step__time.glp-step__time{
    margin-top:8px !important;

    color:var(--glp-text) !important;

    font-size:9px !important;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}


/* ---------- prezzi ---------- */

.glp-section--prezzi.glp-section--prezzi{
    padding:clamp(24px,3vw,40px);

    border:1px solid var(--glp-line);
    border-left:3px solid var(--glp-accent);
    border-radius:var(--glp-radius);
}

.glp-price.glp-price{
    margin:0 0 10px;

    font-size:clamp(30px,3.6vw,46px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.04em;
}

.glp-price__free.glp-price__free,
.glp-guarantee.glp-guarantee,
.glp-payments.glp-payments{
    margin:6px 0 0;

    color:var(--glp-muted);

    font-size:15px;
    line-height:1.6;
}


/* ---------- zone ---------- */

.glp-tags.glp-tags{
    list-style:none;
    margin:0 0 22px;
    padding:0;

    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.glp-tags.glp-tags li{
    padding:8px 14px;

    border:1px solid var(--glp-line);
    border-radius:3px;

    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.glp-tags--links.glp-tags--links li{
    padding:0;
    border:0;
}

.glp-tags--links.glp-tags--links a{
    display:inline-block;

    padding:8px 14px;

    border:1px solid var(--glp-line);
    border-radius:3px;

    color:inherit;

    text-decoration:none;

    transition:border-color .3s ease,background .3s ease;
}

.glp-tags--links.glp-tags--links a:hover{
    border-color:var(--glp-accent);

    background:rgba(255,212,0,.08);
}

.glp-areas__label.glp-areas__label{
    margin:0 0 12px;

    color:var(--glp-muted);

    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}


/* ---------- recensioni ---------- */

.glp-reviews.glp-reviews{
    list-style:none;
    margin:0;
    padding:0;

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:18px;
}

.glp-review.glp-review{
    padding:24px;

    border:1px solid var(--glp-line);
    border-radius:var(--glp-radius);
}

.glp-review__rating.glp-review__rating{
    color:var(--glp-accent);

    font-size:13px;
    letter-spacing:.22em;
}

.glp-review.glp-review blockquote{
    margin:12px 0;
    padding:0;

    border:0;

    font-size:15px;
    line-height:1.65;
}

.glp-review.glp-review cite{
    color:var(--glp-muted);

    font-size:9px;
    font-weight:700;
    font-style:normal;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.glp-review__src.glp-review__src{
    font-size:11px;
}


/* ---------- persone e sede ---------- */

.glp-person.glp-person{
    margin:0 0 6px;

    font-size:17px;
}

.glp-person__creds.glp-person__creds{
    margin:0 0 20px;

    color:var(--glp-muted);

    font-size:15px;
    line-height:1.6;
}

.glp-address.glp-address{
    display:inline-block;

    margin:0 0 16px;
    padding:12px 18px;

    border:1px solid var(--glp-line);
    border-left:3px solid var(--glp-accent);
    border-radius:0 var(--glp-radius) var(--glp-radius) 0;

    font-size:14px;
    font-weight:600;
}

.glp-map.glp-map{
    position:relative;

    margin-top:22px;
    padding-top:50%;

    border:1px solid var(--glp-line);
    border-radius:var(--glp-radius);

    overflow:hidden;
}

.glp-map.glp-map iframe{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    border:0;
}


/* ---------- FAQ ---------- */

.glp-faq.glp-faq{
    border-top:1px solid var(--glp-line);
}

.glp-faq__item.glp-faq__item{
    border-bottom:1px solid var(--glp-line);
}

.glp-faq__q.glp-faq__q{
    position:relative;

    padding:22px 46px 22px 0;

    cursor:pointer;
    list-style:none;

    font-size:17px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:-.01em;
}

.glp-faq__q.glp-faq__q::-webkit-details-marker{
    display:none;
}

.glp-faq__q.glp-faq__q::after{
    content:"+";

    position:absolute;
    right:0;
    top:50%;

    display:grid;
    place-items:center;

    width:26px;
    height:26px;

    border:1px solid var(--glp-line);
    border-radius:3px;

    color:var(--glp-accent);

    font-size:15px;
    line-height:1;

    transform:translateY(-50%);
    transition:background .3s ease,border-color .3s ease;
}

.glp-faq__item.glp-faq__item[open] .glp-faq__q::after{
    content:"−";

    border-color:var(--glp-accent);

    background:rgba(255,212,0,.12);
}

.glp-faq__a.glp-faq__a{
    padding:0 46px 24px 0;

    color:var(--glp-muted);

    font-size:15px;
    line-height:1.75;
}

.glp-faq__a.glp-faq__a p:last-child{
    margin-bottom:0;
}


/* ---------- chiamata all'azione ---------- */

.glp-section--cta.glp-section--cta{
    position:relative;

    overflow:hidden;

    padding:clamp(34px,5vw,64px);

    border-radius:var(--glp-radius);

    background:var(--glp-dark);

    color:var(--glp-on-dark);
}

.glp-section--cta.glp-section--cta .glp-section__title{
    color:var(--glp-on-dark);
}

.glp-section--cta.glp-section--cta .glp-section__label{
    color:rgba(255,255,255,.55);
}

.glp-section--cta.glp-section--cta::after{
    content:"";

    position:absolute;
    right:24px;
    bottom:24px;

    width:56px;
    height:56px;

    border-right:1px solid rgba(255,212,0,.55);
    border-bottom:1px solid rgba(255,212,0,.55);

    pointer-events:none;
}

.glp-form.glp-form{
    margin-top:28px;
    max-width:520px;
}


/* ---------- briciole e indici ---------- */

.glp-breadcrumbs.glp-breadcrumbs ol{
    list-style:none;
    margin:0 0 22px;
    padding:0;

    display:flex;
    flex-wrap:wrap;
    gap:8px;

    color:rgba(17,17,17,.5);

    font-size:9px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.glp-breadcrumbs.glp-breadcrumbs a{
    color:inherit;
    text-decoration:none;
}

.glp-breadcrumbs.glp-breadcrumbs a:hover{
    color:#000;
}

.glp-breadcrumbs.glp-breadcrumbs li+li::before{
    content:"/";

    margin-right:8px;

    color:var(--glp-accent);
}

.glp-index__title.glp-index__title{
    margin:0 0 20px;

    font-size:clamp(24px,3vw,38px);
    font-weight:700;
    letter-spacing:-.035em;
}

.glp-index__list.glp-index__list{
    list-style:none;
    margin:0;
    padding:0;

    display:grid;
    grid-template-columns:repeat(var(--glp-cols,3),minmax(0,1fr));

    gap:0 30px;

    border-top:1px solid rgba(17,17,17,.14);
}

.glp-index__list.glp-index__list a{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:13px 0;

    border-bottom:1px solid rgba(17,17,17,.14);

    color:inherit;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:padding-left .35s cubic-bezier(.16,1,.3,1),color .3s ease;
}

.glp-index__list.glp-index__list a::after{
    content:"→";

    color:var(--glp-accent);

    font-size:14px;
}

.glp-index__list.glp-index__list a:hover{
    padding-left:10px;
}

.glp-index__prov.glp-index__prov{
    margin-left:auto;
    margin-right:12px;

    color:rgba(17,17,17,.45);

    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
}


/* =========================================================
   COMPARSA
========================================================= */

/*
 * Il contenuto parte nascosto SOLO se il JavaScript è attivo
 * (classe glp-js messa da uno script nell'head). Senza JS, o se
 * lo script non parte, la pagina resta visibile: un'animazione
 * non deve mai poter far sparire il contenuto.
 */

.glp-js.glp-js .glp-reveal{
    opacity:0;

    transform:translateY(25px);

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

.glp-js.glp-js .glp-reveal.is-visible,
.glp-reveal-fallback.glp-reveal-fallback .glp-reveal,
.elementor-editor-active .glp-reveal.glp-reveal,
.elementor-editor-preview .glp-reveal.glp-reveal{
    opacity:1;
    transform:none;
}


/* =========================================================
   ANIMAZIONI
========================================================= */

@keyframes glpPulse{

    0%{
        opacity:1;
        transform:scale(.6);
    }

    100%{
        opacity:0;
        transform:scale(1.8);
    }
}

@keyframes glpScan{

    from{
        left:0;
    }

    to{
        left:calc(100% - 5px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){

    .glp-hero__main.glp-hero__main{
        grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);

        gap:45px;
    }

    .glp-hero__title.glp-hero__title{
        font-size:clamp(38px,6vw,62px);
    }

    .glp-hero__text.glp-hero__text{
        font-size:16px;
    }

    .glp-index__list.glp-index__list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


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

@media(max-width:767px){

    .glp-hero__top.glp-hero__top{
        display:block;

        margin-bottom:28px;
    }

    .glp-hero__status.glp-hero__status{
        margin-top:16px;
    }

    .glp-hero__main.glp-hero__main{
        display:block;
    }

    .glp-hero__title.glp-hero__title{
        max-width:none;

        margin-bottom:25px;

        font-size:clamp(34px,10vw,52px);

        line-height:1.01;
        letter-spacing:-.045em;
    }

    .glp-hero__text.glp-hero__text{
        margin-bottom:30px;

        font-size:15px;
    }

    .glp-hero__cta.glp-hero__cta,
    .glp-cta.glp-cta{
        display:grid;
        grid-template-columns:1fr;
    }

    .glp-btn.glp-btn{
        width:100%;
    }

    .glp-hero__index.glp-hero__index{
        margin-top:48px;
    }

    .glp-hero__service.glp-hero__service{
        min-height:56px;
        padding:0 14px;
    }

    .glp-hero__bottom.glp-hero__bottom{
        grid-template-columns:auto 1fr;

        margin-top:32px;
    }

    .glp-hero__bottom.glp-hero__bottom>span:last-child{
        display:none;
    }

    .glp-hero__corner.glp-hero__corner{
        right:15px;
        bottom:15px;

        width:45px;
        height:45px;
    }

    .glp-card__link.glp-card__link{
        grid-template-columns:30px minmax(0,1fr) 18px;

        gap:10px;
    }

    .glp-card__price.glp-card__price{
        grid-column:2;

        margin-top:4px;
    }

    .glp-index__list.glp-index__list{
        grid-template-columns:1fr;
    }

    .glp-faq__q.glp-faq__q{
        font-size:15px;
    }
}


/* =========================================================
   MOVIMENTO RIDOTTO
========================================================= */

@media(prefers-reduced-motion:reduce){

    .glp-hero.glp-hero *,
    .glp-hero.glp-hero *::before,
    .glp-hero.glp-hero *::after,
    .glp-sections.glp-sections *,
    .glp-sections.glp-sections *::before,
    .glp-sections.glp-sections *::after{
        animation:none !important;
        transition:none !important;
    }

    .glp-js.glp-js .glp-reveal{
        opacity:1;
        transform:none;
    }
}


/* =========================================================
   MENU DELLA CITTÀ
========================================================= */

.glp-citymenu.glp-citymenu{
    --glp-accent:#ffd400;
    --glp-dark:#0d0d0d;

    margin:0 0 clamp(32px,4vw,52px);

    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--glp-radius,5px);

    background:var(--glp-dark);

    color:#fff;
}

.glp-citymenu--sticky.glp-citymenu--sticky{
    position:sticky;
    top:0;
    z-index:20;

    border-radius:0;
}

.glp-citymenu__inner.glp-citymenu__inner{
    display:flex;
    align-items:stretch;

    /* Su schermi larghi le voci vanno a capo: lo scorrimento
       orizzontale nasconderebbe metà menu senza farlo capire. */
    flex-wrap:wrap;
}

.glp-citymenu__inner.glp-citymenu__inner::-webkit-scrollbar{
    display:none;
}

/* La città: sempre prima, separata dal resto. */

.glp-citymenu__home.glp-citymenu__home{
    display:flex;
    align-items:center;
    gap:9px;

    flex:none;

    padding:15px 20px;

    border-right:1px solid rgba(255,255,255,.14);

    color:#fff;

    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;

    text-decoration:none;
}

.glp-citymenu__dot.glp-citymenu__dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--glp-accent);
}

/* Le voci. */

.glp-citymenu__list.glp-citymenu__list{
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;

    /* base 0: in un contenitore che va a capo, l'elemento viene collocato
       secondo la sua dimensione naturale, non secondo quella ridotta. Con
       base auto l'intero elenco scenderebbe sotto il nome della città. */
    flex:1 1 0;
    min-width:0;

    list-style:none;
    margin:0;
    padding:0;
}

.glp-citymenu__link.glp-citymenu__link{
    display:flex;
    align-items:center;

    position:relative;

    padding:15px 18px;

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

    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    white-space:nowrap;

    text-decoration:none;

    transition:color .3s ease,background .3s ease;
}

.glp-citymenu__link.glp-citymenu__link::after{
    content:"";

    position:absolute;
    left:18px;
    right:18px;
    bottom:9px;

    height:2px;

    background:var(--glp-accent);

    opacity:0;

    transition:opacity .3s ease;
}

.glp-citymenu__link.is-current,
.glp-citymenu__home.is-current{
    color:#fff;
}

/* Quando sei sulla pagina città, anche il nome è marcato. */
.glp-citymenu__home.glp-citymenu__home{
    position:relative;
}

.glp-citymenu__home.is-current::after{
    content:"";

    position:absolute;
    left:20px;
    right:20px;
    bottom:9px;

    height:2px;

    background:var(--glp-accent);
}

.glp-citymenu__link.is-current::after{
    opacity:1;
}

@media(hover:hover){

    .glp-citymenu__link.glp-citymenu__link:hover{
        color:#fff;

        background:rgba(255,212,0,.08);
    }

    .glp-citymenu__link.glp-citymenu__link:hover::after{
        opacity:.5;
    }
}

@media(max-width:767px){

    /* Sul telefono una riga sola che scorre: occupa meno spazio. */
    .glp-citymenu__inner.glp-citymenu__inner{
        flex-wrap:nowrap;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .glp-citymenu__inner.glp-citymenu__inner::-webkit-scrollbar{
        display:none;
    }

    .glp-citymenu__list.glp-citymenu__list{
        flex-wrap:nowrap;
    }

    /* Il nome della città resta fermo mentre si scorre. */
    .glp-citymenu__home.glp-citymenu__home{
        position:sticky;
        left:0;
        z-index:2;

        background:var(--glp-dark);
    }

    .glp-citymenu__home.glp-citymenu__home,
    .glp-citymenu__link.glp-citymenu__link{
        padding:13px 14px;
    }
}


/* =========================================================
   BLINDATURA CONTRO I TEMI

   Molti temi azzerano liste, intestazioni e link dentro al
   contenuto usando !important. Qui riaffermiamo soltanto le
   proprietà senza le quali la pagina si rompe, con una
   specificità alta abbastanza da avere la meglio.
========================================================= */

.glp-hero.glp-hero{
    background-color:var(--glp-dark) !important;
    color:var(--glp-on-dark) !important;

    padding:clamp(52px,7vw,96px) clamp(22px,4vw,54px) clamp(46px,6vw,80px) !important;
}

.glp-hero.glp-hero .glp-hero__title,
.glp-hero.glp-hero .glp-hero__text,
.glp-hero.glp-hero .glp-hero__service-name{
    color:var(--glp-on-dark) !important;
}

.glp-hero.glp-hero .glp-hero__title span,
.glp-hero.glp-hero .glp-hero__service-arrow{
    color:var(--glp-accent) !important;
}

.glp-hero.glp-hero .glp-hero__service,
.glp-hero.glp-hero .glp-btn{
    text-decoration:none !important;
}

/* Elenchi: nessun pallino, nessun rientro ereditato dal tema. */

.glp-sections.glp-sections .glp-list,
.glp-sections.glp-sections .glp-cards,
.glp-sections.glp-sections .glp-tags,
.glp-sections.glp-sections .glp-steps,
.glp-sections.glp-sections .glp-reviews,
.glp-sections.glp-sections .glp-stats,
.glp-breadcrumbs.glp-breadcrumbs ol,
.glp-index.glp-index .glp-index__list{
    list-style:none !important;

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

.glp-sections.glp-sections .glp-list>li,
.glp-sections.glp-sections .glp-cards>li,
.glp-sections.glp-sections .glp-tags>li,
.glp-sections.glp-sections .glp-steps>li,
.glp-sections.glp-sections .glp-reviews>li,
.glp-sections.glp-sections .glp-stats>li{
    list-style:none !important;
}

.glp-sections.glp-sections .glp-list--check>li,
.glp-sections.glp-sections .glp-list--why>li,
.glp-sections.glp-sections .glp-list--certs>li{
    padding:15px 0 15px 34px !important;
}

.glp-sections.glp-sections .glp-card__link,
.glp-sections.glp-sections .glp-tags--links a,
.glp-sections.glp-sections .glp-index__list a,
.glp-breadcrumbs.glp-breadcrumbs a{
    text-decoration:none !important;
}

.glp-sections.glp-sections .glp-section--cta{
    background:var(--glp-dark) !important;
    color:var(--glp-on-dark) !important;
}

.glp-sections.glp-sections .glp-section--cta .glp-section__title{
    color:var(--glp-on-dark) !important;
}

.glp-btn.glp-btn{
    background:var(--glp-accent);
    color:var(--glp-on-accent);
}

.glp-btn.glp-btn--ghost{
    background:rgba(0,0,0,.35);
    color:#fff;
}

.glp-sections.glp-sections .glp-review blockquote{
    margin:12px 0 !important;
    padding:0 !important;

    border:0 !important;
}

.glp-sections.glp-sections .glp-faq__item{
    border:0 !important;
    border-bottom:1px solid var(--glp-line) !important;

    padding:0 !important;
}


/* Orari */

.glp-hours.glp-hours{
    list-style:none;
    margin:0;
    padding:0;

    border-top:1px solid var(--glp-line);

    max-width:460px;
}

.glp-hours.glp-hours>li{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:13px 0;

    border-bottom:1px solid var(--glp-line);
}

.glp-hours.glp-hours>li span{
    color:var(--glp-muted);

    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.glp-hours.glp-hours>li strong{
    font-size:15px;
    font-weight:700;
}

.glp-citymenu.glp-citymenu{
    background:var(--glp-dark) !important;
}

.glp-citymenu.glp-citymenu .glp-citymenu__list{
    list-style:none !important;

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

.glp-citymenu.glp-citymenu .glp-citymenu__list>li{
    list-style:none !important;

    margin:0 !important;
}

.glp-citymenu.glp-citymenu a{
    text-decoration:none !important;
}


/* =========================================================
   SCHEDE (servizi e città)
========================================================= */

.glp-grid.glp-grid{
    list-style:none !important;

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

    display:grid;
    grid-template-columns:repeat(var(--glp-cols,3),minmax(0,1fr));

    gap:14px;
}

.glp-grid.glp-grid>li{
    list-style:none !important;

    margin:0 !important;
}

.glp-grid__link.glp-grid__link{
    display:flex;
    flex-direction:column;

    gap:8px;

    height:100%;

    padding:24px;

    border:1px solid var(--glp-line,rgba(17,17,17,.14));
    border-radius:var(--glp-radius,5px);

    color:inherit;

    text-decoration:none !important;

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

.glp-grid__link.glp-grid__link:not(.glp-grid__link--muto)::after{
    content:"→";

    margin-top:auto;
    padding-top:14px;

    color:var(--glp-accent,#ffd400);

    font-size:16px;

    transition:transform .3s ease;
}

@media(hover:hover){

    .glp-grid__link.glp-grid__link:not(.glp-grid__link--muto):hover{
        transform:translateY(-3px);

        border-color:var(--glp-accent,#ffd400);

        box-shadow:0 12px 30px rgba(0,0,0,.08);
    }

    .glp-grid__link.glp-grid__link:hover::after{
        transform:translateX(4px);
    }
}

.glp-grid__media.glp-grid__media{
    display:block;

    width:44px;
    height:44px;

    margin-bottom:6px;
}

.glp-grid__media img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.glp-grid__title.glp-grid__title{
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.01em;
}

.glp-grid__text.glp-grid__text{
    color:var(--glp-muted,rgba(17,17,17,.62));

    font-size:14px;
    line-height:1.6;
}

.glp-grid__meta.glp-grid__meta{
    color:var(--glp-muted,rgba(17,17,17,.62));

    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

/* Le città: schede più compatte. */

.glp-grid--citta .glp-grid__link.glp-grid__link{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:16px 18px;
}

.glp-grid--citta .glp-grid__link.glp-grid__link::after{
    margin-top:0;
    padding-top:0;
}

@media(max-width:1024px){

    .glp-grid.glp-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){

    .glp-grid.glp-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   PAGINA AUTONOMA
   Intestazione e piè di pagina disegnati dal plugin, senza
   dipendere dal tema.
========================================================= */

body.glp-standalone{
    margin:0 !important;

    background:#fff;

    color:var(--glp-text,#111);
}

.glp-topbar.glp-topbar{
    position:sticky;
    top:0;
    z-index:30;

    background:var(--glp-dark,#0d0d0d);

    border-bottom:1px solid rgba(255,255,255,.12);
}

.glp-topbar__inner.glp-topbar__inner{
    display:flex;
    align-items:center;

    gap:18px;

    width:min(var(--glp-wrap,1240px),calc(100% - 40px));
    margin:0 auto;

    padding:14px 0;
}

.glp-topbar__brand.glp-topbar__brand{
    display:flex;
    align-items:center;

    color:#fff;

    text-decoration:none !important;
}

.glp-topbar__brand img{
    /* L'altezza la sceglie chi amministra, in Impostazioni → Aspetto. */
    max-height:var(--glp-logo,56px);
    width:auto;

    display:block;
}

/* Senza un'immagine in barra c'è il nome scritto: cresce anche lui con
   l'altezza scelta, altrimenti l'impostazione non farebbe niente. */
.glp-topbar__name.glp-topbar__name{
    font-size:clamp(15px,calc(var(--glp-logo,56px) * .3),30px);
    font-weight:800;
    letter-spacing:-.01em;
}

.glp-topbar__city.glp-topbar__city{
    display:flex;
    align-items:center;
    gap:9px;

    padding:8px 14px;

    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--glp-radius,5px);

    color:#fff;

    /* Il pulsante della città è più piccolo delle voci, e resta in
       proporzione quando la misura del menu cambia. */
    font-size:calc(var(--glp-menu,12.5px) * .8);
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;

    text-decoration:none !important;
}

.glp-topbar__cta.glp-topbar__cta{
    margin-left:auto;

    min-height:44px;

    padding:0 18px;

    font-size:12px;
}

.glp-main__inner.glp-main__inner{
    width:min(var(--glp-wrap,1240px),calc(100% - 40px));
    margin:0 auto;

    padding:28px 0 10px;
}

.glp-standalone .glp-content{
    max-width:820px;

    font-size:16px;
    line-height:1.75;
}

/* Piè di pagina */

.glp-bottombar.glp-bottombar{
    margin-top:clamp(40px,6vw,80px);

    background:var(--glp-dark,#0d0d0d);

    color:rgba(255,255,255,.72);
}

.glp-bottombar__inner.glp-bottombar__inner{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:32px;

    width:min(var(--glp-wrap,1240px),calc(100% - 40px));
    margin:0 auto;

    padding:clamp(32px,4vw,56px) 0;
}

.glp-bottombar__name.glp-bottombar__name{
    margin:0 0 10px;

    color:#fff;

    font-size:15px;
    font-weight:800;
}

/* Il logo al posto del nome. L'altezza è quella scelta in Impostazioni,
   ridotta: nel piede non deve gridare come nell'intestazione. */
.glp-bottombar__name--logo.glp-bottombar__name--logo{
    margin:0 0 16px;
}

.glp-bottombar__name--logo img{
    display:block;

    height:calc(var(--glp-logo,56px) * .8);
    width:auto;
    max-width:min(260px,100%);

    object-fit:contain;
}

.glp-bottombar__intro.glp-bottombar__intro{
    max-width:34ch;
    margin:0 0 12px;

    opacity:.78;

    font-size:13.5px;
    line-height:1.55;
}

.glp-bottombar__label.glp-bottombar__label{
    margin:0 0 12px;

    color:var(--glp-accent,#ffd400);

    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.glp-bottombar p{
    margin:0 0 6px;

    font-size:14px;
    line-height:1.6;
}

.glp-bottombar ul{
    list-style:none !important;

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

    display:grid;
    gap:7px;
}

.glp-bottombar li{
    list-style:none !important;

    font-size:14px;
}

.glp-bottombar a{
    color:rgba(255,255,255,.72);

    text-decoration:none !important;
}

.glp-bottombar a:hover{
    color:var(--glp-accent,#ffd400);
}

.glp-bottombar__copy.glp-bottombar__copy{
    margin:0;

    padding:18px 0 26px;

    border-top:1px solid rgba(255,255,255,.12);

    text-align:center;

    /* Era 9px con il 40% di bianco: elegante e illeggibile. Il maiuscolo
       spaziato rimpicciolisce già di suo, quindi qui serve più corpo e
       più contrasto, non meno. */
    font-size:13px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;

    color:rgba(255,255,255,.66);
}

/* Il pezzo cliccabile deve vedersi che lo è: stesso corpo del resto,
   ma bianco pieno e sottolineato. I collegamenti del piede sono senza
   sottolineatura per scelta, con un !important: qui va riacceso allo
   stesso modo, o vincerebbe quello. */
.glp-bottombar .glp-bottombar__copy a{
    color:#fff;
    text-decoration:underline !important;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
}

.glp-bottombar .glp-bottombar__copy a:hover,
.glp-bottombar .glp-bottombar__copy a:focus-visible{
    color:var(--glp-accent,#ffd400);
    text-decoration-color:var(--glp-accent,#ffd400);
}

@media(max-width:767px){

    .glp-topbar__inner.glp-topbar__inner{
        flex-wrap:wrap;
        gap:10px;
    }

    .glp-topbar__cta.glp-topbar__cta{
        margin-left:0;
        width:100%;
    }
}


/* =========================================================
   CARD DELLE SEZIONI

   Ogni sezione può mostrare i suoi contenuti come riquadri
   invece che come elenco. Si sceglie da Impostazioni → Aspetto.

   Gli effetti (comparsa a scalare, sollevamento al passaggio
   del mouse, alone che segue il cursore, numeri che salgono)
   si attivano con la classe .glp-effetti sul body e si
   spengono da soli se il sistema chiede meno animazioni.
========================================================= */

.glp-boxes.glp-boxes{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
    gap:14px;

    list-style:none;
    margin:22px 0 0;
    padding:0;
}

.glp-boxes--larghe.glp-boxes--larghe{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

.glp-boxes--strette.glp-boxes--strette{
    grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}

.glp-box.glp-box{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    gap:8px;

    min-width:0;

    padding:20px;

    background:#fff;
    border:1px solid var(--glp-line);
    border-radius:var(--glp-radius);

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

/* L'alone che segue il cursore. Le due variabili le imposta il JS. */
.glp-box.glp-box::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    opacity:0;

    background:radial-gradient(
        280px circle at var(--glp-x,50%) var(--glp-y,50%),
        rgba(255,212,0,.16),
        transparent 62%
    );

    transition:opacity .35s ease;
}

/* La riga d'accento che cresce in alto. */
.glp-box.glp-box::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;

    transform:scaleX(0);
    transform-origin:left;

    background:var(--glp-accent);

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

@media(hover:hover){

    .glp-effetti .glp-box.glp-box:hover{
        transform:translateY(-4px);

        border-color:rgba(0,0,0,.14);
        box-shadow:0 14px 34px rgba(0,0,0,.09);
    }

    .glp-effetti .glp-box.glp-box:hover::before{
        opacity:1;
    }

    .glp-effetti .glp-box.glp-box:hover::after{
        transform:scaleX(1);
    }
}

/* ---------- intestazione del riquadro ---------- */

.glp-box__num.glp-box__num{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    background:var(--glp-dark);
    border-radius:6px;

    color:var(--glp-accent);

    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;

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

@media(hover:hover){

    .glp-effetti .glp-box:hover .glp-box__num.glp-box__num{
        transform:rotate(-6deg) scale(1.08);
    }
}

.glp-box__segno.glp-box__segno{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;
    flex:0 0 24px;

    background:var(--glp-accent);
    border-radius:50%;

    color:#111;

    font-size:13px;
    font-weight:700;
    line-height:1;
}

.glp-box__titolo.glp-box__titolo{
    margin:0;

    font-size:15.5px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.005em;
    color:var(--glp-text);
}

.glp-box__testo.glp-box__testo{
    margin:0;

    color:var(--glp-muted);

    font-size:13.5px;
    line-height:1.6;
}

.glp-box__nota.glp-box__nota{
    margin:auto 0 0;
    padding-top:6px;

    color:var(--glp-text);

    font-size:10.5px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.glp-box__riga.glp-box__riga{
    display:flex;
    align-items:center;
    gap:10px;
}

/* ---------- riquadri "cosa comprende" ---------- */

.glp-box--check.glp-box--check{
    flex-direction:row;
    align-items:flex-start;
    gap:11px;

    padding:16px 18px;
}

.glp-box--check .glp-box__titolo{
    font-size:14px;
    font-weight:600;
    line-height:1.45;
}

/* ---------- numeri ---------- */

.glp-box--stat.glp-box--stat{
    gap:4px;

    padding:22px 20px;

    text-align:left;
}

.glp-box--stat strong{
    font-size:34px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.03em;

    font-variant-numeric:tabular-nums;
}

.glp-box--stat span{
    color:var(--glp-muted);

    font-size:10.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* ---------- passi del processo ---------- */

.glp-boxes--processo.glp-boxes--processo{
    counter-reset:glp-passo;
}

.glp-box--step.glp-box--step{
    counter-increment:glp-passo;
}

.glp-box--step .glp-box__num::before{
    content:counter(glp-passo,decimal-leading-zero);
}

/* ---------- recensioni ---------- */

.glp-box--review.glp-box--review blockquote{
    margin:0;

    font-size:14.5px;
    font-style:normal;
    line-height:1.6;
    color:var(--glp-text);
}

.glp-box--review cite{
    margin-top:auto;
    padding-top:10px;

    color:var(--glp-muted);

    font-size:10.5px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.glp-box--review .glp-review__rating{
    color:var(--glp-accent);

    font-size:14px;
    letter-spacing:.14em;
}

/* ---------- persone ---------- */

.glp-box--person .glp-box__ruolo{
    margin:0;

    color:var(--glp-muted);

    font-size:12.5px;
}

/* ---------- zone ---------- */

.glp-box--zona.glp-box--zona{
    gap:6px;

    padding:14px 16px;
}

.glp-box--zona .glp-box__titolo{
    font-size:13.5px;
    font-weight:700;
}

.glp-box--zona .glp-box__testo{
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
}

/* ---------- orari ---------- */

.glp-boxes--orari.glp-boxes--orari{
    grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
}

.glp-box--orario.glp-box--orario{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;

    padding:13px 16px;
}

.glp-box--orario span{
    color:var(--glp-muted);

    font-size:10.5px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.glp-box--orario strong{
    font-size:14px;
    font-variant-numeric:tabular-nums;
}

.glp-box--orario.is-chiuso strong{
    color:var(--glp-muted);
    font-weight:500;
}

/* ---------- collegamenti (servizi, altre città) ---------- */

.glp-box--link.glp-box--link{
    padding:0;
}

.glp-box--link a{
    display:flex;
    flex-direction:column;
    gap:6px;

    height:100%;
    padding:20px;

    color:inherit;
    text-decoration:none;
}

.glp-box--link a::after{
    content:"→";

    margin-top:auto;
    padding-top:10px;

    color:var(--glp-accent);

    font-size:16px;

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

@media(hover:hover){

    .glp-effetti .glp-box--link:hover a::after{
        transform:translateX(5px);
    }
}

/* ---------- FAQ come riquadri ---------- */

.glp-stile-card .glp-faq.glp-faq{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:12px;

    border-top:0;
}

.glp-stile-card .glp-faq__item.glp-faq__item{
    padding:4px 18px;

    background:#fff;
    border:1px solid var(--glp-line);
    border-radius:var(--glp-radius);

    transition:border-color .3s ease,box-shadow .4s ease;
}

@media(hover:hover){

    .glp-effetti .glp-stile-card .glp-faq__item:hover{
        border-color:rgba(0,0,0,.14);
        box-shadow:0 10px 26px rgba(0,0,0,.07);
    }
}

.glp-stile-card .glp-faq__item[open]{
    border-color:rgba(0,0,0,.16);
}

/* ---------- comparsa a scalare ---------- */

.glp-js.glp-effetti .glp-reveal .glp-box,
.glp-js.glp-effetti .glp-reveal .glp-faq__item{
    opacity:0;
    transform:translateY(14px);
}

.glp-js.glp-effetti .glp-reveal.is-visible .glp-box,
.glp-js.glp-effetti .glp-reveal.is-visible .glp-faq__item,
.glp-reveal-fallback.glp-reveal-fallback .glp-box,
.glp-reveal-fallback.glp-reveal-fallback .glp-faq__item{
    opacity:1;
    transform:none;

    transition:
        opacity .5s ease var(--glp-ritardo,0ms),
        transform .55s cubic-bezier(.16,1,.3,1) var(--glp-ritardo,0ms);
}

/* ---------- schermi piccoli ---------- */

@media(max-width:640px){

    .glp-boxes.glp-boxes,
    .glp-boxes--larghe.glp-boxes--larghe,
    .glp-stile-card .glp-faq.glp-faq{
        grid-template-columns:1fr;
        gap:10px;
    }

    .glp-boxes--strette.glp-boxes--strette{
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    }

    .glp-box.glp-box{
        padding:16px;
    }

    .glp-box--stat strong{
        font-size:28px;
    }
}

/* ---------- chi preferisce meno animazioni ---------- */

@media(prefers-reduced-motion:reduce){

    .glp-box.glp-box,
    .glp-box.glp-box::before,
    .glp-box.glp-box::after,
    .glp-box__num.glp-box__num{
        transition:none !important;
        transform:none !important;
    }

    .glp-js.glp-effetti .glp-reveal .glp-box,
    .glp-js.glp-effetti .glp-reveal .glp-faq__item{
        opacity:1;
        transform:none;
    }
}


/* =========================================================
   MENU DENTRO L'INTESTAZIONE

   Il menu sta in riga con logo e telefono. Se le voci non
   ci stanno, il JavaScript aggiunge .glp-topbar--compatto
   e il menu si chiude dietro il pulsante a tre righe: vale
   a qualsiasi larghezza, non solo sul telefono.

   Senza JavaScript il menu resta sempre visibile, mandando
   a capo dentro l'intestazione: mai irraggiungibile.
========================================================= */

.glp-topbar__inner.glp-topbar__inner{
    position:relative;

    flex-wrap:wrap;
    gap:12px 14px;
}

/* ---------- il menu in riga ---------- */

.glp-topbar__nav.glp-topbar__nav{
    flex:1 1 auto;
    min-width:0;
}

.glp-topbar__list.glp-topbar__list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;

    list-style:none;
    margin:0;
    padding:0;
}

.glp-topbar__list>li{
    flex:0 0 auto;
    margin:0;
    padding:0;
    list-style:none;
}

.glp-topbar__list>li::before,
.glp-topbar__list>li::marker{
    content:none;
}

.glp-topbar__link.glp-topbar__link{
    display:block;

    padding:9px 12px;

    border-radius:var(--glp-radius,5px);

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

    /* La misura si regola da Impostazioni → Aspetto. Tutto il resto
       della barra si muove con lei, o alzandola resterebbe sfilacciata. */
    font-size:var(--glp-menu,12.5px);
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;

    text-decoration:none !important;

    transition:color .25s ease,background .25s ease;
}

@media(hover:hover){

    .glp-topbar__link.glp-topbar__link:hover{
        color:#fff;
        background:rgba(255,255,255,.09);
    }
}

.glp-topbar__link.is-current{
    color:#111;
    background:var(--glp-accent,#ffd400);
}

.glp-topbar__city.is-current{
    border-color:var(--glp-accent,#ffd400);
}

/* Con il JavaScript la misura è già stata fatta: una riga sola. */
.glp-js .glp-topbar__inner.glp-topbar__inner{
    flex-wrap:nowrap;
}

.glp-js .glp-topbar__list.glp-topbar__list{
    flex-wrap:nowrap;
}

/* ---------- pulsante a tre righe ---------- */

.glp-topbar__toggle.glp-topbar__toggle{
    display:none;

    width:42px;
    height:42px;
    flex:0 0 42px;
    order:4;

    padding:0;

    background:transparent;
    border:1px solid rgba(255,255,255,.22);
    border-radius:var(--glp-radius,5px);

    cursor:pointer;
}

.glp-topbar__burger.glp-topbar__burger{
    position:relative;
    display:block;

    width:17px;
    height:2px;
    margin:0 auto;

    background:#fff;
    border-radius:2px;

    transition:background .2s ease;
}

.glp-topbar__burger::before,
.glp-topbar__burger::after{
    content:"";
    position:absolute;
    left:0;

    width:17px;
    height:2px;

    background:#fff;
    border-radius:2px;

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

.glp-topbar__burger::before{ top:-6px; }
.glp-topbar__burger::after{ top:6px; }

.glp-topbar__toggle[aria-expanded="true"] .glp-topbar__burger{
    background:transparent;
}

.glp-topbar__toggle[aria-expanded="true"] .glp-topbar__burger::before{
    transform:translateY(6px) rotate(45deg);
}

.glp-topbar__toggle[aria-expanded="true"] .glp-topbar__burger::after{
    transform:translateY(-6px) rotate(-45deg);
}

/* ---------- seconda riga: tutte le voci restano visibili ---------- */

.glp-topbar--due-righe .glp-topbar__inner.glp-topbar__inner{
    flex-wrap:wrap;

    padding-bottom:10px;
}

.glp-topbar--due-righe .glp-topbar__nav.glp-topbar__nav{
    flex:1 1 100%;
    order:5;

    margin-top:2px;
    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.1);
}

.glp-topbar--due-righe .glp-topbar__list.glp-topbar__list{
    flex-wrap:wrap;
    gap:2px 4px;
}

.glp-topbar--due-righe .glp-topbar__cta.glp-topbar__cta{
    margin-left:auto;
}

/* ---------- forma compatta: il menu si chiude ---------- */

.glp-topbar--compatto .glp-topbar__toggle.glp-topbar__toggle{
    display:block;
    margin-left:auto;
}

.glp-topbar--compatto .glp-topbar__cta.glp-topbar__cta{
    order:3;
    margin-left:auto;
}

.glp-topbar--compatto .glp-topbar__toggle.glp-topbar__toggle{
    margin-left:0;
}

.glp-topbar--compatto .glp-topbar__nav.glp-topbar__nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:40;

    display:none;
    flex:none;

    max-height:min(72vh,480px);
    overflow-y:auto;

    padding:8px;

    background:var(--glp-dark,#0d0d0d);
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);

    box-shadow:0 18px 38px rgba(0,0,0,.36);
}

.glp-topbar--compatto .glp-topbar__nav.is-aperto{
    display:block;
}

.glp-topbar--compatto .glp-topbar__list.glp-topbar__list{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:1px;
}

.glp-topbar--compatto .glp-topbar__link.glp-topbar__link{
    padding:13px 14px;

    /* Nel menu compatto le voci stanno una sotto l'altra e possono
       permettersi un filo in più: il rapporto è quello di sempre,
       14 su 12,5. */
    font-size:calc(var(--glp-menu,12.5px) * 1.12);
}

/* ---------- schermi stretti ---------- */

@media(max-width:560px){

    .glp-topbar__inner.glp-topbar__inner{
        gap:10px;
    }

    /* Nome e numero su una riga sola: l'intestazione resta bassa. */
    .glp-topbar__name.glp-topbar__name,
    .glp-topbar__cta.glp-topbar__cta{
        white-space:nowrap;
    }

    .glp-topbar__name.glp-topbar__name{
        font-size:13.5px;
    }

    .glp-topbar__city.glp-topbar__city{
        padding:7px 10px;

        font-size:9px;
    }

    .glp-topbar__cta.glp-topbar__cta{
        min-height:40px;

        padding:0 13px;

        font-size:12px;
    }

    /* Sullo stretto il logo si rimpicciolisce, ma non oltre il necessario:
       se chi amministra l'ha già messo piccolo resta com'è. */
    .glp-topbar__brand img{
        max-height:min(var(--glp-logo,56px),40px);
    }
}

@media(prefers-reduced-motion:reduce){

    .glp-topbar__burger,
    .glp-topbar__burger::before,
    .glp-topbar__burger::after,
    .glp-topbar__link.glp-topbar__link{
        transition:none !important;
    }
}

/* La pastiglia della città dentro il menu. */
.glp-topbar__voce-citta.glp-topbar__voce-citta{
    margin-right:6px;
}

.glp-topbar--compatto .glp-topbar__voce-citta.glp-topbar__voce-citta{
    margin:0 0 6px;
    padding-bottom:6px;

    border-bottom:1px solid rgba(255,255,255,.12);
}

.glp-topbar--compatto .glp-topbar__voce-citta .glp-topbar__city{
    justify-content:flex-start;

    padding:11px 14px;

    font-size:10px;
}

/* =========================================================
   BLOG
========================================================= */

.glp-paginazione.glp-paginazione{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin:26px 0 0;
}

.glp-paginazione__stato.glp-paginazione__stato{
    color:var(--glp-muted);

    font-size:11px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.glp-breadcrumbs.glp-breadcrumbs{
    margin:0 0 6px;

    color:var(--glp-muted);

    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.glp-breadcrumbs a{
    color:inherit;
    text-decoration:none;
}

.glp-breadcrumbs a:hover{ color:var(--glp-text); }

.glp-breadcrumbs span{
    margin:0 6px;
    color:var(--glp-accent);
}

/* --- corpo dell'articolo: è HTML importato, va vestito qui --- */

.glp-articolo__corpo.glp-articolo__corpo{
    max-width:74ch;
}

.glp-articolo__corpo p{
    margin:0 0 18px;

    font-size:16px;
    line-height:1.75;
    color:var(--glp-text);
}

.glp-articolo__corpo h2{
    margin:34px 0 12px;

    font-size:24px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.02em;
}

.glp-articolo__corpo h3{
    margin:26px 0 10px;

    font-size:18px;
    font-weight:700;
    line-height:1.3;
}

.glp-articolo__corpo h4{
    margin:22px 0 8px;

    font-size:15.5px;
    font-weight:700;
}

.glp-articolo__corpo ul,
.glp-articolo__corpo ol{
    margin:0 0 20px;
    padding-left:22px;
}

.glp-articolo__corpo li{
    margin:0 0 8px;

    font-size:15.5px;
    line-height:1.7;
}

.glp-articolo__corpo a{
    color:var(--glp-text);

    text-decoration:underline;
    text-decoration-color:var(--glp-accent);
    text-decoration-thickness:2px;
    text-underline-offset:3px;
}

.glp-articolo__corpo a:hover{
    background:rgba(255,212,0,.22);
}

.glp-articolo__corpo strong{ font-weight:700; }

.glp-articolo__corpo blockquote{
    margin:0 0 20px;
    padding:2px 0 2px 18px;

    border-left:3px solid var(--glp-accent);

    font-size:16px;
    line-height:1.7;
}

.glp-articolo__corpo table{
    width:100%;
    margin:0 0 20px;

    border-collapse:collapse;

    font-size:14.5px;
}

.glp-articolo__corpo th,
.glp-articolo__corpo td{
    padding:9px 12px;
    text-align:left;
    border-bottom:1px solid var(--glp-line);
}

.glp-articolo__corpo th{
    font-size:11px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--glp-muted);
}

.glp-articolo__foto.glp-articolo__foto{
    margin:20px 0 0;
}

.glp-articolo__foto img{
    width:100%;
    height:auto;

    border-radius:var(--glp-radius);
}

@media(max-width:640px){

    .glp-articolo__corpo p,
    .glp-articolo__corpo li{ font-size:15.5px; }

    .glp-articolo__corpo h2{ font-size:21px; }
}

/* =========================================================
   RECAPITI E MODULO DI CONTATTO
========================================================= */

.glp-recapiti.glp-recapiti{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;

    list-style:none;
    margin:22px 0 0;
    padding:0;
}

.glp-box--recapito.glp-box--recapito{
    gap:4px;
}

.glp-box--recapito .glp-box__testo{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.glp-box--recapito .glp-box__titolo{
    font-size:16px;
    line-height:1.35;
    word-break:break-word;
}

.glp-box--recapito a{
    color:inherit;
    text-decoration:none;
    border-bottom:2px solid var(--glp-accent);
}

.glp-box--recapito a:hover{
    background:rgba(255,212,0,.22);
}

/* --- modulo --- */

.glp-modulo.glp-modulo{
    max-width:720px;
    margin:22px 0 0;
}

.glp-modulo__riga.glp-modulo__riga{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.glp-modulo__riga > label{
    flex:1 1 220px;
    min-width:0;
}

.glp-modulo label{
    display:block;
    margin:0 0 14px;

    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--glp-muted);
}

.glp-modulo input[type=text],
.glp-modulo input[type=tel],
.glp-modulo input[type=email],
.glp-modulo select,
.glp-modulo textarea{
    display:block;
    width:100%;
    margin-top:7px;
    padding:12px 14px;

    background:#fff;
    border:1px solid var(--glp-line);
    border-radius:var(--glp-radius);

    font:inherit;
    font-size:15px;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:var(--glp-text);

    transition:border-color .25s ease,box-shadow .25s ease;
}

.glp-modulo textarea{
    min-height:130px;
    line-height:1.6;
    resize:vertical;
}

.glp-modulo input:focus,
.glp-modulo select:focus,
.glp-modulo textarea:focus{
    outline:none;
    border-color:var(--glp-accent);
    box-shadow:0 0 0 3px rgba(255,212,0,.28);
}

/* Il campo esca non deve esistere per chi legge o per chi tabula. */
.glp-modulo__esca.glp-modulo__esca{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.glp-modulo__nota.glp-modulo__nota{
    margin:0 0 18px;

    color:var(--glp-muted);

    font-size:12.5px;
    line-height:1.6;
}

.glp-modulo__esito.glp-modulo__esito{
    margin:18px 0 0;
    padding:13px 16px;

    border-radius:var(--glp-radius);

    font-size:14.5px;
    font-weight:600;
}

.glp-modulo__esito.is-ok{
    background:#e4f5ea;
    border:1px solid #bfe4cd;
    color:#0c5c30;
}

.glp-modulo__esito.is-ko{
    background:#fdeceb;
    border:1px solid #f3c8c5;
    color:#8c1d18;
}

@media(max-width:640px){

    .glp-recapiti.glp-recapiti{
        grid-template-columns:1fr;
    }

    .glp-modulo__riga > label{
        flex:1 1 100%;
    }
}


/* =========================================================
   TELEFONO IN BARRA — vale per tutti e due gli stili
========================================================= */

.glp-topbar__cta.glp-topbar__cta{
    gap:10px;
}

.glp-topbar__cta-icona.glp-topbar__cta-icona{
    display:none;

    flex:none;
    align-items:center;
    justify-content:center;
}

.glp-topbar__cta-testo.glp-topbar__cta-testo{
    display:flex;
    flex-direction:column;
    gap:1px;

    text-align:left;
}

.glp-topbar__cta-etichetta.glp-topbar__cta-etichetta{
    display:none;

    font-size:8.5px;
    font-weight:700;
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;

    opacity:.66;
}

.glp-topbar__cta-numero.glp-topbar__cta-numero{
    font-size:inherit;
    font-weight:inherit;
    line-height:1.2;
    white-space:nowrap;
}


/* =========================================================
   SOCIAL NEL PIÈ DI PAGINA
========================================================= */

.glp-bottombar__label--social.glp-bottombar__label--social{
    margin-top:18px;
}

.glp-social.glp-social{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin:0;
    padding:0;

    list-style:none;
}

.glp-social__link.glp-social__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

    color:#fff;

    text-decoration:none !important;

    transition:border-color .25s ease,background .25s ease,color .25s ease;
}

/* Il nome resta nel documento per chi legge con la sintesi vocale. */
.glp-social__nome.glp-social__nome{
    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    clip-path:inset(50%);
    white-space:nowrap;
}

@media(hover:hover){

    .glp-social__link.glp-social__link:hover{
        border-color:var(--glp-accent,#ffd400);

        background:var(--glp-accent,#ffd400);

        color:#111;
    }
}


/* =========================================================
   STILE "CLASSICO" — l'intestazione resta una scheda dentro
   al contenitore, com'era prima che uscisse dal contenitore.
========================================================= */

.glp-tema-classico .glp-hero.glp-hero{
    width:min(var(--glp-wrap,1240px),calc(100% - 40px));
    margin-right:auto;
    margin-left:auto;

    margin-top:28px;
}


/* =========================================================
   STILE "VETRINA"

   L'intestazione va da bordo a bordo con la foto dietro, il
   testo sta in mezzo e i pulsanti sotto. Il resto della
   pagina misura come header e piè di pagina.
========================================================= */

.glp-tema-vetrina .glp-hero.glp-hero{
    margin-top:0;
    margin-bottom:clamp(44px,6vw,80px);

    padding:clamp(70px,9vw,140px) 20px clamp(62px,8vw,120px);

    border-radius:0;
}

.glp-tema-vetrina .glp-hero__inner.glp-hero__inner{
    width:min(var(--glp-wrap,1240px),calc(100% - 40px));
    margin-right:auto;
    margin-left:auto;

    text-align:center;
}

/* Sopra una foto il testo deve restare leggibile da cima a fondo:
   il velo diagonale di prima schiariva troppo in basso a destra. */
.glp-tema-vetrina .glp-hero--image.glp-hero--image::before{
    background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.8));
}

.glp-tema-vetrina .glp-hero__top.glp-hero__top{
    justify-content:center;

    margin-bottom:26px;
}

.glp-tema-vetrina .glp-hero__eyebrow.glp-hero__eyebrow{
    justify-content:center;
}

.glp-tema-vetrina .glp-hero__main.glp-hero__main{
    grid-template-columns:minmax(0,1fr);

    gap:clamp(36px,5vw,64px);
    align-items:start;
}

.glp-tema-vetrina .glp-hero__title.glp-hero__title{
    max-width:22ch;
    margin-right:auto;
    margin-left:auto;

    font-size:clamp(34px,5vw,66px);
    line-height:1.02;
    letter-spacing:-.02em;
    text-transform:uppercase;
}

.glp-tema-vetrina .glp-hero__text.glp-hero__text{
    max-width:66ch;
    margin-right:auto;
    margin-left:auto;
}

.glp-tema-vetrina .glp-hero__cta.glp-hero__cta{
    justify-content:center;
}

.glp-tema-vetrina .glp-hero__bottom.glp-hero__bottom{
    justify-content:center;
}

/* L'elenco dei servizi non sta più di fianco al titolo: diventa una
   riga di pastiglie sotto ai pulsanti. */
.glp-tema-vetrina .glp-hero__index.glp-hero__index{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;

    gap:8px;

    padding:0;

    border:0;
    background:none;
}

.glp-tema-vetrina .glp-hero__index-title.glp-hero__index-title{
    flex:1 0 100%;
    justify-content:center;

    margin-bottom:6px;
    padding:0;

    border-bottom:0;
}

.glp-tema-vetrina .glp-hero__index-title.glp-hero__index-title::after{
    content:none;
}

.glp-tema-vetrina .glp-hero__service.glp-hero__service{
    display:inline-flex;
    align-items:center;

    min-height:0;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;

    background:rgba(0,0,0,.28);
}

.glp-tema-vetrina .glp-hero__service-name.glp-hero__service-name{
    font-size:12.5px;
    white-space:nowrap;
}

.glp-tema-vetrina .glp-hero__service-number.glp-hero__service-number,
.glp-tema-vetrina .glp-hero__service-arrow.glp-hero__service-arrow{
    display:none;
}

@media(hover:hover){

    .glp-tema-vetrina .glp-hero__service.glp-hero__service:hover{
        padding-left:18px;

        border-color:var(--glp-accent,#ffd400);
    }
}

/* Riga di chiusura e squadretta: decorazioni della scheda di prima.
   In una fascia a tutta larghezza non hanno più nulla da incorniciare. */
.glp-tema-vetrina .glp-hero__bottom.glp-hero__bottom,
.glp-tema-vetrina .glp-hero__corner.glp-hero__corner{
    display:none;
}


/* --- titoli di sezione ---

   Al centro solo dove sotto c'è una griglia di riquadri: un titolo
   centrato sopra un paragrafo allineato a sinistra sembra storto. */

.glp-tema-vetrina .glp-section--servizi > .glp-section__title,
.glp-tema-vetrina .glp-section--servizi > .glp-section__label,
.glp-tema-vetrina .glp-section--correlate > .glp-section__title,
.glp-tema-vetrina .glp-section--correlate > .glp-section__label,
.glp-tema-vetrina .glp-section--citta > .glp-section__title,
.glp-tema-vetrina .glp-section--citta > .glp-section__label,
.glp-tema-vetrina .glp-section--cta > .glp-section__title,
.glp-tema-vetrina .glp-section--cta > .glp-section__label{
    justify-content:center;

    text-align:center;
}


/* --- riquadri centrati, come nel modello --- */

.glp-tema-vetrina .glp-box--link a{
    align-items:center;

    padding:26px 20px;

    text-align:center;
}

.glp-tema-vetrina .glp-box--link a::after{
    align-self:center;
}


/* --- la fascia nera dell'invito sta al centro --- */

.glp-tema-vetrina .glp-section--cta.glp-section--cta{
    text-align:center;
}

.glp-tema-vetrina .glp-section--cta .glp-cta.glp-cta{
    justify-content:center;
}


/* --- telefono in barra con etichetta e cornetta --- */

.glp-tema-vetrina .glp-topbar__cta-icona.glp-topbar__cta-icona{
    display:inline-flex;
}

.glp-tema-vetrina .glp-topbar__cta-etichetta.glp-topbar__cta-etichetta{
    display:block;
}

.glp-tema-vetrina .glp-topbar__cta.glp-topbar__cta{
    min-height:48px;

    padding:0 20px;
}

/* Sotto i 720px l'etichetta ruba spazio al numero. */
@media(max-width:720px){

    .glp-tema-vetrina .glp-topbar__cta-etichetta.glp-topbar__cta-etichetta{
        display:none;
    }
}

/* Sul telefono la riga alta va a capo: le due parti restano in mezzo. */
@media(max-width:600px){

    .glp-tema-vetrina .glp-hero__top.glp-hero__top{
        flex-direction:column;

        gap:12px;
    }

    .glp-tema-vetrina .glp-hero__status.glp-hero__status{
        justify-content:center;
    }
}


/* =========================================================
   HOME DEL PORTALE — la barra ha solo il marchio

   Non c'è una città, quindi non c'è un menu: senza niente a
   destra il marchio resterebbe appoggiato a sinistra con un
   vuoto lungo accanto. Tre colonne lo tengono in mezzo anche
   quando il telefono c'è.
========================================================= */

.glp-home-portale .glp-topbar__inner.glp-topbar__inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    gap:12px;
}

.glp-home-portale .glp-topbar__brand.glp-topbar__brand{
    grid-column:2;
    justify-self:center;

    margin:0;
}

.glp-home-portale .glp-topbar__cta.glp-topbar__cta{
    grid-column:3;
    justify-self:end;

    margin-left:0;
}

@media(max-width:600px){

    /* Sullo stretto il telefono sotto il marchio, tutti e due in mezzo. */
    .glp-home-portale .glp-topbar__inner.glp-topbar__inner{
        grid-template-columns:minmax(0,1fr);
        justify-items:center;
    }

    .glp-home-portale .glp-topbar__brand.glp-topbar__brand,
    .glp-home-portale .glp-topbar__cta.glp-topbar__cta{
        grid-column:1;
        justify-self:center;
    }
}


/* =========================================================
   TESTO SU DUE COLONNE

   Su uno schermo largo un paragrafo lungo 820px lasciava
   mezza pagina vuota. Due colonne la riempiono; sotto ai
   1100px tornano una, perché due colonne strette non si
   leggono.

   La misura è scritta in em e non in pixel: se il visitatore
   ingrandisce il testo, le colonne diventano una da sole.
========================================================= */

.glp-prosa.glp-prosa{
    /* Al massimo due colonne, e solo se ognuna sta in 30em. */
    columns:30em 2;
    column-gap:clamp(32px,3.5vw,60px);

    /* Con il contenuto largo 1800 una colonna diventerebbe
       illeggibile: qui si ferma. */
    max-width:1320px;
}

.glp-prosa.glp-prosa p{
    max-width:none;

    orphans:2;
    widows:2;
}

.glp-prosa.glp-prosa p:first-child{
    margin-top:0;
}


/* ---------------------------------------------------------
   Quello che scrive l'editor dentro al testo.

   Le colonne spezzano dove capita: un sottotitolo in fondo a
   una colonna, staccato dal suo paragrafo, è il difetto
   classico. break-after lo tiene attaccato a quello che
   introduce.
--------------------------------------------------------- */

.glp-prosa.glp-prosa h2,
.glp-prosa.glp-prosa h3,
.glp-prosa.glp-prosa h4{
    margin:1.6em 0 .5em;

    font-size:clamp(17px,1.35vw,20px);
    font-weight:800;
    line-height:1.3;
    letter-spacing:-.01em;

    break-inside:avoid;
    break-after:avoid;
}

.glp-prosa.glp-prosa h2:first-child,
.glp-prosa.glp-prosa h3:first-child,
.glp-prosa.glp-prosa h4:first-child{
    margin-top:0;
}

.glp-prosa.glp-prosa strong,
.glp-prosa.glp-prosa b{
    font-weight:700;
    color:var(--glp-text,#111);
}

.glp-prosa.glp-prosa ul,
.glp-prosa.glp-prosa ol{
    margin:0 0 1.1em;
    padding-left:1.35em;
}

.glp-prosa.glp-prosa li{
    margin:0 0 .4em;

    break-inside:avoid;
}

.glp-prosa.glp-prosa li::marker{
    color:var(--glp-accent,#ffd400);
}

.glp-prosa.glp-prosa ol li::marker{
    font-weight:700;
}

.glp-prosa.glp-prosa a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
}

.glp-prosa.glp-prosa a:hover{
    text-decoration-color:var(--glp-accent,#ffd400);
}

.glp-prosa.glp-prosa blockquote{
    margin:0 0 1.2em;
    padding:2px 0 2px 18px;

    border-left:3px solid var(--glp-accent,#ffd400);

    break-inside:avoid;
}


/* =========================================================
   TESTO E MODULO AFFIANCATI

   Si legge a sinistra e si scrive a destra. Dentro alla
   coppia ognuno dei due ha mezza pagina, quindi niente
   colonne interne: sarebbero strisce.
========================================================= */

.glp-affiancate.glp-affiancate{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px,4vw,68px);
    align-items:start;
}

.glp-affiancate.glp-affiancate > .glp-section{
    margin-bottom:0;
}

.glp-affiancate.glp-affiancate .glp-prosa{
    columns:auto;

    max-width:none;
}

@media(max-width:1099px){

    .glp-affiancate.glp-affiancate{
        grid-template-columns:minmax(0,1fr);
    }

    /* Impilate tornano due sezioni normali, con l'aria in mezzo. */
    .glp-affiancate.glp-affiancate > .glp-section{
        margin-bottom:clamp(46px,6.5vw,86px);
    }

    .glp-affiancate.glp-affiancate > .glp-section:last-child{
        margin-bottom:0;
    }
}


/* =========================================================
   MODULO DI CONTATTO SU DUE COLONNE

   Vale quando il modulo sta da solo su tutta la larghezza.
   Affiancato al testo ha già mezza pagina e resta in una.
========================================================= */

.glp-modulo.glp-modulo{
    max-width:1320px;
}

/* Il selettore figlio diretto distingue i due casi: dentro alla coppia
   la sezione sta in .glp-affiancate, non in .glp-sections. */
@media(min-width:1100px){

    .glp-sections > .glp-section .glp-modulo.glp-modulo{
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:clamp(28px,3vw,52px);
        align-items:start;
    }

    /* Il messaggio si allunga fino a pareggiare i campi di fianco. */
    .glp-sections > .glp-section .glp-modulo__colonna:last-child{
        display:flex;
        flex-direction:column;

        height:100%;
    }

    .glp-sections > .glp-section .glp-modulo__colonna:last-child label{
        flex:1 1 auto;

        display:flex;
        flex-direction:column;
    }

    .glp-sections > .glp-section .glp-modulo__colonna:last-child textarea{
        flex:1 1 auto;

        min-height:150px;
    }

    /* In una colonna flex il pulsante si stirerebbe per tutta la
       larghezza: resta della sua misura, come sul telefono. */
    .glp-sections > .glp-section .glp-modulo__colonna:last-child .glp-btn{
        align-self:flex-start;
    }
}

/* =========================================================
   ICONE DEI SERVIZI

   Un pallino con dentro il segno del servizio, nell'angolo
   in alto a destra della card. Il tracciato è disegnato nel
   portale e prende il colore dal contenitore, quindi non
   serve una copia chiara e una scura.
========================================================= */

.glp-box__icona.glp-box__icona,
.glp-card__icona.glp-card__icona{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border-radius:50%;
    background:var(--glp-accent,#ffd400);

    /* Il segno sta sul giallo: va scritto scuro, non chiaro. */
    color:var(--glp-dark,#0b0b0b);
}

/* Nelle card a riquadro il numero è già in alto a sinistra:
   l'icona si mette dall'altra parte, alla stessa altezza. */
.glp-box{
    position:relative;
}

.glp-box__icona.glp-box__icona{
    position:absolute;
    top:clamp(16px,2vw,24px);
    right:clamp(16px,2vw,24px);
}

.glp-card__icona.glp-card__icona{
    margin:0 0 14px;
}

@media(prefers-reduced-motion:no-preference){

    .glp-effetti .glp-box .glp-box__icona.glp-box__icona,
    .glp-effetti .glp-card .glp-card__icona.glp-card__icona{
        transition:transform .25s ease;
    }

    .glp-effetti .glp-box:hover .glp-box__icona.glp-box__icona,
    .glp-effetti .glp-card:hover .glp-card__icona.glp-card__icona{
        transform:rotate(-8deg) scale(1.08);
    }
}

/* Il titolo non deve finire sotto l'icona. */
.glp-box__icona.glp-box__icona ~ .glp-box__titolo{
    padding-right:56px;
}

/* =========================================================
   TAG SOTTO IL TESTO

   Le pastiglie della pagina stanno dentro la sezione di
   approfondimento, dopo il testo: staccate da quello che
   le precede, e col pallino giallo davanti che le distingue
   dai collegamenti agli altri servizi.
========================================================= */

.glp-tags--pagina.glp-tags--pagina{
    margin:28px 0 0;
}

.glp-tags--pagina.glp-tags--pagina li{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    color:var(--glp-text,#111);
}

.glp-tags--pagina.glp-tags--pagina li::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;
    background:var(--glp-accent,#ffd400);

    flex:0 0 auto;
}

/* La denominazione sociale nel piè di pagina: apre i dati legali, quindi
   sta sotto il logo e sopra l'indirizzo, in chiaro ma senza gridare. */
.glp-bottombar__societa.glp-bottombar__societa{
    margin:0 0 10px;

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

    font-size:14px;
    font-weight:700;
    line-height:1.4;
}

/* =========================================================
   FOTO NELLE CARD DEI SERVIZI

   L'immagine di anteprima della pagina, quella che va anche
   su Open Graph. Nei riquadri è una fascia in cima, a tutta
   larghezza: per uscire dai 20px di imbottitura del box usa
   margini negativi, invece di togliere l'imbottitura a tutti.
========================================================= */

.glp-box--foto.glp-box--foto > a{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.glp-box__foto.glp-box__foto{
    display:block;

    margin:-20px -20px 4px;

    aspect-ratio:16/9;

    background:var(--glp-soft,#f6f6f6);
    overflow:hidden;
}

.glp-box__foto img{
    display:block;

    width:100%;
    height:100%;

    /* Ritaglia invece di stirare: una foto storta si nota. */
    object-fit:cover;
}

/* Sulla foto il numero e l'icona diventano sovrimpressione. */
.glp-box--foto .glp-box__num.glp-box__num,
.glp-box--foto .glp-box__icona.glp-box__icona{
    position:absolute;
    top:14px;
    z-index:2;
}

.glp-box--foto .glp-box__num.glp-box__num{ left:14px; }
.glp-box--foto .glp-box__icona.glp-box__icona{ right:14px; }

@media(prefers-reduced-motion:no-preference){

    .glp-effetti .glp-box--foto .glp-box__foto img{
        transition:transform .5s cubic-bezier(.16,1,.3,1);
    }

    .glp-effetti .glp-box--foto:hover .glp-box__foto img{
        transform:scale(1.05);
    }
}

/* ---------- stile a elenco: miniatura nella riga ---------- */

.glp-card--foto .glp-card__link.glp-card__link{
    grid-template-columns:38px 76px minmax(0,1fr) auto 20px;
}

.glp-card__foto.glp-card__foto{
    display:block;

    width:76px;
    height:56px;

    border-radius:var(--glp-radius,5px);
    background:var(--glp-soft,#f6f6f6);
    overflow:hidden;
}

.glp-card__foto img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

@media(max-width:600px){

    /* In riga stretta la miniatura ruba lo spazio al titolo. */
    .glp-card--foto .glp-card__link.glp-card__link{
        grid-template-columns:38px minmax(0,1fr) auto 20px;
    }

    .glp-card__foto.glp-card__foto{ display:none; }
}

/* Firma e data sotto il testo: chi l'ha scritto e quando. Piccola, ma
   in chiaro — è quello che chiedono Google e gli assistenti IA. */
.glp-aggiornata.glp-aggiornata{
    margin:26px 0 0;

    color:var(--glp-muted,#6b6b70);

    font-size:12.5px;
    line-height:1.5;
}

.glp-aggiornata__chi{
    font-weight:700;
    color:var(--glp-text,#111);
}

/* =========================================================
   CATEGORIE DEL BLOG

   Le pastiglie delle categorie sono cliccabili, a differenza
   dei tag: portano a un archivio vero. Il colore del testo
   resta quello della pagina — l'accento è giallo, illeggibile
   su bianco — e il bordo si accende al passaggio, come già
   fanno le altre pastiglie che sono collegamenti.
========================================================= */

.glp-tags--categorie.glp-tags--categorie{
    margin:0 0 22px;
}

.glp-tags--pagina.glp-tags--pagina li a{
    color:inherit;

    font-weight:600;
    text-decoration:none;
}

.glp-tags--pagina.glp-tags--pagina li:has(a){
    border:1px solid var(--glp-line);

    transition:border-color .3s ease;
}

.glp-tags--pagina.glp-tags--pagina li:has(a):hover{
    border-color:var(--glp-accent);
}

/* Senza :has() — browser vecchi — la sottolineatura al passaggio
   resta l'unico segno che è un link, e basta. */
.glp-tags--pagina.glp-tags--pagina li a:hover,
.glp-tags--pagina.glp-tags--pagina li a:focus-visible{
    text-decoration:underline;
    text-underline-offset:3px;
}

/* La riga "Categoria: …" in fondo all'articolo: staccata dal
   testo, discreta, ma un collegamento vero. */
.glp-articolo__categoria{
    margin:26px 0 0;
    padding-top:16px;

    border-top:1px solid var(--glp-line);

    color:var(--glp-muted);
    font-size:14px;
}

.glp-articolo__categoria a{
    color:inherit;
    font-weight:600;
}