/* =========================================================
   MASS GROUP – stile condiviso del gruppo
   Grigio e nero del logo, rosso Milano come unico accento.
   ========================================================= */
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.woff2") format("woff2"),url("fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Regular.woff2") format("woff2"),url("fonts/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Bold.woff2") format("woff2"),url("fonts/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --carta:#EEEDEA; --pietra:#E2E1DD; --grafite:#1E1E1D; --inchiostro:#161616;
  --fumo:#55554F; --nebbia:#ABABA5; --marchio:#6E6E6E; --rosso:#C1121F; --rosso-scuro:#9E0E19;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
  --s-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --s-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --s-lead:clamp(1.375rem,1.15rem + .9vw,2rem);
  --s-head:clamp(2.5rem,1.2rem + 4.9vw,6.25rem);
  --m:clamp(52px,8vw,128px);           /* margini larghi: il serpente ci passa dentro */
  --g:clamp(14px,1.8vw,28px);
  --sez:clamp(104px,12vw,200px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{overflow-x:clip}
[hidden]{display:none!important}   /* "nascosto" vale anche per pulsanti e blocchi con uno stile proprio */
body{position:relative;background:var(--carta);color:var(--inchiostro);font-family:var(--sans);font-size:var(--s-body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}   /* numeri di telefono ed email non vanno mai a capo */
img,svg{display:block;max-width:100%}
picture{display:contents}
:focus-visible{outline:2px solid var(--rosso);outline-offset:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h2{font-size:var(--s-head);line-height:.95;letter-spacing:-.025em;text-wrap:balance}
.lead{font-size:var(--s-lead);line-height:1.3}
.sez{position:relative;padding:var(--sez) var(--m)}
.contenuto{position:relative;z-index:2}

/* pulsanti: rosso per l'azione principale, nero per il resto */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;background:var(--rosso);color:#fff;font-weight:700;font-size:var(--s-body);text-decoration:none;border:0;cursor:pointer;font-family:var(--sans);transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:var(--rosso-scuro)}
.btn:active{transform:scale(.97)}
.btn.nero{background:var(--inchiostro)}
.btn.nero:hover{background:#3a3a38}
/* nell'apertura dei brand con fondo scuro il pulsante nero ha un bordo chiaro, se no sparisce */
.apertura-brand .btn.nero{box-shadow:inset 0 0 0 1.5px rgba(242,240,236,.6)}

/* barra fissa in alto */
.barra{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--m) 14px;background:var(--carta);transition:transform .35s var(--ease)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--carta);z-index:21}
.barra .logo img{height:34px;width:auto;transition:opacity .3s}
.barra.in-cima .logo img{opacity:0}
.barra nav ul{list-style:none;display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);font-size:var(--s-small)}
.barra nav a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color .25s}
.barra nav a:hover{text-decoration-color:currentColor}
.barra .btn{min-height:44px;padding:0 18px;font-size:var(--s-small);white-space:nowrap}
@media (max-width:860px){ .barra nav ul li:not(.sempre){display:none} }

/* ingressi: brevi e con poco spostamento; partono prima che l'elemento entri nello schermo (assets/mass.js),
   così quando lo si vede è già pieno. Se arriva in ritardo (scorrimento veloce, telefono lento) compare subito. */
.rv{opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.subito,.rv.subito .w{transition:none!important}
.no-js .rv{opacity:1;transform:none}

/* immagini indicative (da sostituire con le foto vere) */
.indicativa{position:relative}
.indicativa figcaption{position:absolute;left:12px;bottom:12px;padding:4px 10px;background:rgba(22,22,22,.72);color:#fff;font-size:13px;line-height:1.4}

/* modulo preventivo */
.modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--g)}
.campo{display:grid;gap:8px}
.campo.largo{grid-column:1/-1}
.campo label{font-size:var(--s-small);font-weight:700}
.campo .aiuto{font-size:var(--s-small);color:var(--fumo)}
.campo input,.campo select,.campo textarea{font:inherit;color:var(--inchiostro);background:#fff;border:1px solid #C9C8C3;padding:14px 16px;min-height:52px;width:100%;border-radius:0;transition:border-color .2s}
.campo textarea{min-height:150px;resize:vertical}
.campo input[type=file]{min-height:auto;padding:12px;background:#fff;font-size:var(--s-small)}
.campo .facoltativo{font-weight:400;color:var(--fumo)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--inchiostro);outline-offset:0;border-color:var(--inchiostro)}
.campo .errore{color:var(--rosso);font-size:var(--s-small);display:none}
.campo.non-valido input,.campo.non-valido select,.campo.non-valido textarea{border-color:var(--rosso)}
.campo.non-valido .errore{display:block}
.consenso{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:var(--s-small)}
.consenso input{width:22px;height:22px;margin-top:2px;accent-color:var(--rosso);flex:none}
.consenso{flex-wrap:wrap}
.consenso .errore{flex-basis:100%;padding-left:34px;color:var(--rosso);display:none}
.consenso.non-valido{color:var(--rosso)}
.consenso.non-valido .errore{display:block}
.esito{flex-basis:100%;padding:14px 16px;border-left:4px solid var(--rosso);background:#fff;font-size:var(--s-small)}
/* campo trappola contro i programmi automatici: fuori dallo schermo, le persone non lo vedono */
.trappola{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.invio{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.invio .nota{font-size:var(--s-small);color:var(--fumo)}
.conferma{display:none;padding:28px;background:var(--grafite);color:var(--carta)}
.conferma.si{display:block}
@media (max-width:700px){ .modulo{grid-template-columns:1fr} }

/* piè di pagina */
.piede{position:relative;z-index:3;background:var(--grafite);color:var(--carta);display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding:56px var(--m) 28px}
.piede .colonne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);font-size:var(--s-small);line-height:1.7}
.piede h3{font-family:var(--sans);font-size:var(--s-small);font-weight:700;letter-spacing:0;margin-bottom:6px}
.piede ul{list-style:none}
.piede li,.piede p{color:var(--nebbia)}
.piede a{text-decoration:none}
.piede a:hover{color:var(--carta);text-decoration:underline}
.piede .marchio img{width:min(420px,70vw);height:auto}
.piede .legale{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:var(--s-small);color:var(--nebbia)}
@media (max-width:760px){ .piede .colonne{grid-template-columns:1fr 1fr;row-gap:28px} }

/* domande frequenti: elenco a righe, la risposta si apre toccando la domanda */
.faq .contenuto{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px}
.faq h2{grid-column:1/6}
.faq .corpo{grid-column:7/13}
.faq-elenco{border-top:1px solid rgba(22,22,22,.18)}
.faq-elenco details{border-bottom:1px solid rgba(22,22,22,.18)}
.faq-elenco summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;cursor:pointer;list-style:none}
.faq-elenco summary::-webkit-details-marker{display:none}
.faq-elenco summary h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem);line-height:1.2}
.faq-elenco summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--rosso);flex:none;transition:transform .3s var(--ease)}
.faq-elenco details[open] summary::after{transform:rotate(45deg)}
.faq-elenco summary:focus-visible{outline:2px solid var(--rosso);outline-offset:4px}
.faq-elenco details p{padding:0 0 24px;max-width:40em;color:var(--fumo)}
@media (max-width:760px){ .faq h2,.faq .corpo{grid-column:1/13} }


/* =========================================================
   RINNOVO DEL DISEGNO (ramo rinnovo-design)
   ========================================================= */

/* ---------- passaggio dalla home alla pagina del brand (View Transitions tra documenti) ----------
   Il riquadro su cui si fa clic diventa l'apertura della pagina del brand: il fondo colorato si allarga
   e il marchio scivola al suo posto. I nomi si danno solo al riquadro scelto (assets/mass.js, pageswap e
   pagereveal); dove il browser non lo supporta la navigazione resta normale. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.barra{view-transition-name:barra}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}
::view-transition-group(brand-fondo){background:var(--t,var(--ardesia,var(--grafite)))}
::view-transition-old(brand-fondo){animation:vt-esce .22s linear both}
::view-transition-new(brand-fondo){animation:vt-entra .3s .3s linear both}
::view-transition-old(root){animation:vt-esce .3s linear both}
::view-transition-new(root){animation:vt-entra .35s .2s linear both}
@keyframes vt-esce{to{opacity:0}}
@keyframes vt-entra{from{opacity:0}}

/* ---------- impaginazione editoriale: sezioni numerate con occhiello e filo sottile ---------- */
main{counter-reset:sez}
.sez{counter-increment:sez}
.sez>.contenuto::before{
  content:counter(sez,decimal-leading-zero) "\2003" var(--occhio,"");
  content:counter(sez,decimal-leading-zero) "\2003" var(--occhio,"") / "";   /* i lettori di schermo lo saltano */
  display:block;grid-column:1/-1;align-self:start;
  padding-top:18px;margin-bottom:clamp(36px,4.2vw,72px);border-top:1px solid rgba(22,22,22,.16);
  font-size:12.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--fumo);
  font-variant-numeric:tabular-nums
}
.faq>.contenuto::before,.blocco>.contenuto::before{margin-bottom:0}   /* lì c'è già lo spazio della griglia */
/* nomi brevi degli occhielli, presi dai titoli delle sezioni */
#brand{--occhio:"I brand"} #gruppo{--occhio:"Il gruppo"} .garanzie{--occhio:"Garanzie"} .chi{--occhio:"Chi siamo"}
#domande{--occhio:"Domande frequenti"} #preventivo{--occhio:"Preventivo"} #contatti{--occhio:"Contatti"}
[aria-labelledby=t-ingressi]{--occhio:"Da dove partiamo"} [aria-labelledby=t-servizi]{--occhio:"Cosa facciamo"}
[aria-labelledby=t-esempio]{--occhio:"Un esempio"} [aria-labelledby=t-garanzie]{--occhio:"Garanzie"}
[aria-labelledby=t-studio]{--occhio:"Lo studio"} [aria-labelledby=t-passi]{--occhio:"Come lavoriamo"}
[aria-labelledby=t-altri]{--occhio:"Il gruppo"} [aria-labelledby=t-orari]{--occhio:"Orari e indirizzo"}
[aria-labelledby=t-prenota]{--occhio:"Prenota"}

/* ---------- microinterazioni: sottolineature che si disegnano, frecce che scivolano ---------- */
@media (hover:hover) and (pointer:fine){
  .barra nav a:not(.btn),.piede a,.contatti dd a,.preventivo .altri a,.pagina .altri a{text-decoration:none;position:relative}
  .barra nav a:not(.btn)::after,.piede a::after,.contatti dd a::after,.preventivo .altri a::after,.pagina .altri a::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .barra nav a:not(.btn):hover::after,.piede a:hover::after,.contatti dd a:hover::after,.preventivo .altri a:hover::after,.pagina .altri a:hover::after{transform:scaleX(1);transform-origin:left}
  .piede a:hover{text-decoration:none}
  .contatti dd a:hover{text-decoration:none}
}
a.btn:not([href^="tel:"])::after,button.btn[type=submit]::after,.btn.avanti::after{content:"\2192";display:inline-block;font-weight:400;transition:transform .45s var(--ease)}
a.btn[href^="#"]::after{content:"\2193"}
.barra .btn::after{content:none!important}
a.btn:not([href^="tel:"]):hover::after,button.btn[type=submit]:hover::after,.btn.avanti:hover::after{transform:translateX(5px)}
a.btn[href^="#"]:hover::after{transform:translateY(3px)}

/* ---------- riquadri dei brand: al passaggio del mouse si accendono e seguono il puntatore ---------- */
@media (hover:hover) and (pointer:fine){
  .griglia-brand .riquadro a{position:relative;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .8s var(--ease),opacity .5s var(--ease),outline-color .4s;outline:1px solid transparent;outline-offset:-12px}
  .griglia-brand .riquadro a:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
    transition-duration:.25s,.5s,.4s;outline-color:color-mix(in srgb,var(--ti) 38%,transparent)}
  /* gli altri riquadri si spengono un poco, così quello scelto si accende */
  .griglia-brand:has(.riquadro a:hover) .riquadro a:not(:hover){opacity:.6}
  .griglia-brand .riquadro a::after{content:"\2192";position:absolute;right:26px;bottom:20px;font-size:1.6rem;line-height:1;
    opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .5s var(--ease)}
  .griglia-brand .riquadro a:hover::after{opacity:1;transform:none}
  .griglia-brand .riquadro p{transition:opacity .4s}
  .griglia-brand .riquadro a:hover p{opacity:1}
}

/* ---------- modulo a passi (lo costruisce assets/mass.js: senza JavaScript resta il modulo completo) ---------- */
.avanzamento{grid-column:1/-1}
.tappe{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tappe li{padding-top:12px;border-top:2px solid #C9C8C3;font-size:var(--s-small);color:var(--fumo);transition:border-color .4s,color .4s}
.tappe li b{font-weight:400;font-variant-numeric:tabular-nums;margin-right:.6em}
.tappe li.fatta{border-color:var(--inchiostro);color:var(--inchiostro)}
.tappe li.attiva{border-color:var(--rosso);color:var(--inchiostro);font-weight:700}
.tappe li.attiva b{font-weight:700}
.passo{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--g);min-width:0}
.passo.entra{animation:passo-entra .5s var(--ease) both}
@keyframes passo-entra{from{opacity:0;transform:translateY(10px)}}
.titolo-passo{grid-column:1/-1;font-family:var(--serif);font-size:var(--s-lead);line-height:1.15;outline:none}
.titolo-passo:focus-visible{outline:2px solid var(--rosso);outline-offset:6px}
.passo .campo-email,.passo .campo-servizio{grid-column:1/-1}
.passo .campo-servizio>label,.passo .campo-servizio>select{display:none}
.scelto{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:var(--s-small);color:var(--fumo)}
.scelto strong{color:var(--inchiostro)}
.link-passo{font:inherit;font-size:var(--s-small);background:none;border:0;padding:4px 0;color:var(--inchiostro);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.nav-passo{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn.indietro{background:transparent;color:var(--inchiostro);box-shadow:inset 0 0 0 1px #C9C8C3}
.btn.indietro:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--inchiostro)}
.btn.indietro::before{content:"\2190";font-weight:400;transition:transform .45s var(--ease)}
.btn.indietro:hover::before{transform:translateX(-5px)}
/* scelta del servizio a riquadri, con i marchi e i colori dei brand */
.tessere{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px}
.tessera{position:relative;display:grid;grid-template-rows:1fr auto;gap:10px;min-height:112px;padding:16px 14px 12px;background:var(--t);color:var(--ti);
  border:0;font:inherit;text-align:left;cursor:pointer;transition:transform .35s var(--ease),outline-color .2s;outline:2px solid transparent;outline-offset:3px}
.tessera .tessera-marchio{display:grid;place-items:center;min-height:40px}
.tessera img{width:auto;max-width:88%;max-height:30px;height:auto}
.tessera .sigla-t{font-family:var(--serif);font-size:24px;line-height:1;padding:6px 8px;border:1.5px solid currentColor}
.tessera .tessera-nome{font-size:13px;line-height:1.3;opacity:.85}
.tessera.altro{grid-column:1/-1;min-height:0;grid-template-rows:auto;padding:16px;background:#fff;color:var(--inchiostro);box-shadow:inset 0 0 0 1px #C9C8C3}
.tessera.altro .tessera-nome{font-size:var(--s-small);opacity:1}
.tessera[aria-pressed=true]{outline-color:var(--rosso)}
.tessera[aria-pressed=true]::after{content:"\2713";position:absolute;top:8px;right:10px;font-size:14px;line-height:1}
@media (hover:hover) and (pointer:fine){ .tessera:hover{transform:translateY(-3px)} }
.tessera:focus-visible{outline-color:var(--inchiostro)}
.campo-servizio.non-valido .tessere{outline:1px solid var(--rosso);outline-offset:6px}
@media (max-width:700px){ .passo{grid-template-columns:1fr} .tessere{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- mappa della Lombardia (sezione Contatti in home) ---------- */
.mappa{margin:0}
.mappa svg{width:100%;height:auto;overflow:visible}
.mappa .regione{fill:var(--pietra);fill-opacity:0;stroke:var(--marchio);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1),fill-opacity .8s 1.1s}
.mappa .sede{opacity:0;transition:opacity .4s 1.3s}
.mappa .punto{fill:var(--rosso)}
.mappa .alone{fill:none;stroke:var(--rosso);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.5}
.mappa text{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;fill:var(--inchiostro)}
.mappa.in .regione{stroke-dashoffset:0;fill-opacity:1}
.mappa.in .sede{opacity:1}
.mappa figcaption{margin-top:14px;font-size:var(--s-small);color:var(--fumo)}
.no-js .mappa .regione{stroke-dashoffset:0;fill-opacity:1}
.no-js .mappa .sede{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .griglia-brand .riquadro a,.griglia-brand .riquadro a:hover{transform:none!important}
  .mappa .regione{stroke-dashoffset:0;fill-opacity:1}
  .mappa .sede{opacity:1}
}

/* ---------- "Di cosa hai bisogno?" nell'apertura della home (la mostra assets/mass.js) ---------- */
.cerca{position:relative;z-index:6;width:min(100%,560px);margin:0 auto;text-align:left}
.cerca label{display:block;margin-bottom:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumo);text-align:center}
.cerca-riga{position:relative}
.cerca input{width:100%;min-height:58px;padding:0 20px;font:inherit;font-size:var(--s-body);color:var(--inchiostro);background:#fff;border:1px solid #C9C8C3;border-radius:0;transition:border-color .2s}
.cerca input::placeholder{color:#8A8A84}
.cerca input:focus{outline:2px solid var(--inchiostro);outline-offset:0;border-color:var(--inchiostro)}
.cerca-elenco{position:absolute;top:calc(100% + 6px);left:0;right:0;list-style:none;background:#fff;border:1px solid var(--inchiostro);z-index:7}
.cerca-elenco li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;cursor:pointer;border-top:1px solid #E6E5E1}
.cerca-elenco li:first-child{border-top:0}
.cerca-elenco li[aria-selected=true]{background:var(--pietra)}
.cerca-elenco .chip{width:92px;height:44px;display:grid;place-items:center;background:var(--t);color:var(--ti,#F2F0EC);font-family:var(--serif);font-size:20px}
.cerca-elenco .chip img{max-width:78%;max-height:20px;width:auto;height:auto}
.cerca-elenco strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.1}
.cerca-elenco .settore-c{display:block;font-size:var(--s-small);color:var(--fumo)}
.cerca-elenco small{display:block;font-size:12.5px;color:var(--fumo);margin-top:2px}
.cerca-elenco .vai-c{color:var(--rosso);font-size:1.2rem;transition:transform .35s var(--ease)}
.cerca-elenco li[aria-selected=true] .vai-c{transform:translateX(4px)}
.cerca-elenco li.nessuno{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:520px){ .cerca-elenco .chip{width:64px;height:38px} .cerca-elenco li{gap:10px;padding:10px} }

/* ---------- piè di pagina: la fila dei brand, i dati della società e il logo grande in fondo ---------- */
.piede{gap:clamp(48px,5vw,72px);padding-top:clamp(56px,6vw,96px)}
/* celle tutte uguali; ogni marchio centrato nella sua cella con la stessa "presenza": l'altezza dipende dalla
   forma del marchio (--o = radice di 4 / rapporto larghezza:altezza, così i marchi lunghi sono più bassi e quelli
   compatti più alti, a parità di area), con una larghezza massima per cella che lascia sempre aria tra i loghi */
.piede-brand{--alto:30px;--cella:96px;--aria:clamp(10px,1.1vw,20px);--col:7}
/* 14 marchi: celle tutte uguali (--col per riga) e l'ultima riga, se è incompleta, centrata
   (7 + 7 sul computer, 5 + 5 + 4 sul tablet, 3 × 4 + 2 e 2 × 7 sul telefono) */
.piede-brand ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid rgba(242,240,236,.16)}
.piede-brand li{flex:0 0 calc(100% / var(--col));border-bottom:1px solid rgba(242,240,236,.16);min-width:0}
.piede-brand a{display:flex;align-items:center;justify-content:center;gap:10px;height:var(--cella);padding:0 var(--aria);opacity:.62;transition:opacity .35s}
.piede-brand a:hover,.piede-brand a[aria-current]{opacity:1}
.piede-brand a::after{content:none!important}
.piede-brand img{--o:1;display:block;height:calc(var(--alto) * var(--o));width:auto;max-width:min(100%,168px);object-fit:contain;object-position:center}
.piede-brand img[src*="cantiereforma"]{--o:.71}
.piede-brand img[src*="cortile-nove"]{--o:1.22}
.piede-brand img[src*="altogrado"]{--o:.91}
.piede-brand img[src*="chiara-vista"]{--o:1.22}
.piede-brand img[src*="lustra"]{--o:1.1}
.piede-brand img[src*="spazio-libero"]{--o:1.22}
.piede-brand img[src*="quota-prima"]{--o:.88}
.piede-brand img[src*="scala-civica"]{--o:.82}
.piede-brand img[src*="ramo-vivo"]{--o:.88}
.piede-brand img[src*="dominelli"]{--o:1.14}
.piede-brand img[src*="irua"]{--o:1.2}
.piede-brand img[src*="punto-segnale"]{--o:.81}
.piede-brand img[src*="minerva-sigillo"]{--o:1.6}   /* il sigillo di Minerva (sotto i 160 px il logo intero non si usa) */
.piede-brand img[src*="polisport"]{--o:1.4}   /* il simbolo di Polisport Club Elettro (pieno e compatto: un po' meno del sigillo) */
.piede-brand .sigla-piede{flex:none;display:grid;place-items:center;width:calc(var(--alto) * 1.1);height:calc(var(--alto) * 1.1);border:1.5px solid currentColor;font-family:var(--serif);font-size:calc(var(--alto) * .5);color:var(--carta)}
.piede-brand .nome-piede{font-family:var(--serif);font-size:calc(var(--alto) * .68);line-height:1;color:var(--carta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.piede .marchio img{width:100%;max-width:1400px;height:auto}
@media (max-width:1280px){ .piede-brand{--alto:27px} }
@media (max-width:1100px){ .piede-brand{--alto:28px;--col:5;--aria:clamp(12px,1.6vw,20px)} }
@media (max-width:760px){ .piede-brand{--alto:22px;--cella:76px;--aria:12px;--col:3} }
@media (max-width:460px){ .piede-brand{--alto:22px;--cella:72px;--aria:16px;--col:2} .piede-brand img{max-width:min(100%,140px)} }

/* ---------- barra in basso sul telefono, nelle pagine dei brand: Chiama e Preventivo ---------- */
.barra-basso{display:none}
@media (max-width:760px){
  .barra-basso{position:fixed;left:0;right:0;bottom:0;z-index:19;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--carta);border-top:1px solid rgba(22,22,22,.14);
    transition:transform .4s var(--ease),visibility .4s}
  .barra-basso.via{transform:translateY(110%);visibility:hidden}
  .barra-basso .btn{min-height:48px;padding:0 12px;font-size:var(--s-small)}
  .barra-basso .btn::after{content:none!important}
  .con-barra-basso .piede{padding-bottom:calc(28px + 70px + env(safe-area-inset-bottom,0px))}
}

/* ---------- entrate: titoli parola per parola (rapidi), immagini illustrative con uno zoom lento e leggero ---------- */
.rv.parole{opacity:1;transform:none}
.parole .w{display:inline-block;opacity:0;transform:translateY(.3em);transition:opacity .3s var(--ease),transform .4s var(--ease);transition-delay:calc(min(var(--i),5) * 20ms)}
.parole.in .w{opacity:1;transform:none}
html:not(.no-js) .indicativa:not(.foto-riquadro){overflow:hidden}
html:not(.no-js) .indicativa:not(.foto-riquadro) img{transform:scale(1.05);transition:transform 2.2s cubic-bezier(.2,.65,.25,1)}
html:not(.no-js) .indicativa.vista:not(.foto-riquadro) img{transform:none}
@media (prefers-reduced-motion:reduce){
  .parole .w{opacity:1!important;transform:none!important}
  html:not(.no-js) .indicativa:not(.foto-riquadro) img{transform:none!important}
}