/* ============================================================
   Fantasie d'Oro
   Palette estratta dalle fotografie della bottega:
   l'ocra dell'intonaco, il bruno della cornice, il bordeaux
   dell'insegna, l'oro del cofanetto, il nero delle vetrine.
   ============================================================ */

:root{
  --avorio:      #F1EEE7;
  --avorio-2:    #E7E2D8;
  --lava:        #14110D;
  --lava-2:      #1F1A14;

  --ink:         #2A211B;
  --ink-2:       #574A40;
  --ink-3:       #7A6B5D;

  --bordeaux:    #7A1F1F;
  --oro:         #A8813C;
  --oro-chiaro:  #C9A465;
  --bronzo:      #6E3C21;
  --verde-wa:    #1F7A52;

  --filo:        #D3CCBE;
  --filo-scuro:  #372F26;

  --fondo:   var(--avorio);
  --fondo-2: var(--avorio-2);
  --testo:   var(--ink);
  --testo-2: var(--ink-2);
  --testo-3: var(--ink-3);
  --rigo:    var(--filo);
  --accento: var(--bordeaux);
  --metallo: var(--oro);
  --marchio: var(--bronzo);
  --wa:      var(--verde-wa);

  --serif: "EB Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --geom:  "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;

  --t-xs: .8125rem;  --t-sm: .9375rem; --t-base: 1.0625rem;
  --t-md: 1.1875rem; --t-lg: 1.5rem;
  --t-xl:  clamp(1.9rem, 4.2vw, 3rem);
  --t-2xl: clamp(2.3rem, 6.5vw, 4.4rem);
  --t-3xl: clamp(3.4rem, 11vw, 7rem);

  --misura: 58ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --sez:    clamp(4rem, 10vw, 9rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:   var(--lava);
    --fondo-2: var(--lava-2);
    --testo:   #EDE6D9;
    --testo-2: #C2B6A5;
    --testo-3: #928675;
    --rigo:    var(--filo-scuro);
    --accento: #C4655C;
    --metallo: var(--oro-chiaro);
    --marchio: #C08A5E;
    --wa:      #35A06E;
  }
}
:root[data-theme="dark"]{
  --fondo:   var(--lava);
  --fondo-2: var(--lava-2);
  --testo:   #EDE6D9;
  --testo-2: #C2B6A5;
  --testo-3: #928675;
  --rigo:    var(--filo-scuro);
  --accento: #C4655C;
  --metallo: var(--oro-chiaro);
  --marchio: #C08A5E;
  --wa:      #35A06E;
}

/* ============================================================ base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--testo);
  font-family:var(--serif);
  font-size:var(--t-base);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* height:auto e' indispensabile: gli attributi width/height nell'HTML valgono
   come altezza specificata e, senza questo, annullano ogni aspect-ratio. */
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:var(--accento); color:var(--avorio); }
:focus-visible{ outline:2px solid var(--accento); outline-offset:3px; border-radius:2px; }

.salta{
  position:absolute; top:0; left:0; z-index:200;
  clip-path:inset(50%); width:1px; height:1px; overflow:hidden;
  background:var(--accento); color:#F3EDE2;
  padding:.7rem 1.1rem; font-family:var(--geom); font-size:var(--t-sm);
}
.salta:focus{ clip-path:none; width:auto; height:auto; margin:.5rem; }

.contenuto{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.06;
          letter-spacing:-.012em; text-wrap:balance; margin:0; }
h1{ font-size:var(--t-2xl); }
h2{ font-size:var(--t-xl); margin-bottom:1.4rem; max-width:17ch; }
h3{ font-size:var(--t-md); margin-bottom:.5rem; }

.occhio{
  font-family:var(--geom);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--testo-3);
  margin:0 0 1.2rem;
}
.occhio--chiaro{ color:rgba(243,237,226,.82); }

.brano{ max-width:var(--misura); }
.brano--largo{ max-width:64ch; }
.brano p{ margin:0 0 1.1em; }
.brano p:last-child{ margin-bottom:0; }
.apertura-brano{ font-size:var(--t-md); line-height:1.6; color:var(--testo-2); }

.occhiello{ font-size:var(--t-md); line-height:1.55; color:var(--testo-2);
            font-style:italic; max-width:46ch; margin:0 0 1rem; }

.oltre{ margin:1.6rem 0 0; font-family:var(--geom); font-size:var(--t-sm);
        letter-spacing:.12em; text-transform:uppercase; display:block; }
.oltre a, a.oltre{ text-decoration:none; color:var(--accento);
                   border-bottom:1px solid currentColor; padding-bottom:.2rem; }

/* ============================================================ pulsanti */
.bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  max-width:100%;
  font-family:var(--geom); font-size:var(--t-sm); font-weight:500;
  letter-spacing:.06em; text-decoration:none;
  padding:.78rem 1.25rem; border:1px solid transparent; border-radius:2px;
  transition:background .22s, color .22s, border-color .22s, opacity .22s;
  white-space:nowrap;
}
.bottone svg{ width:1.05em; height:1.05em; flex:none; }

.bottone--primario{ background:var(--wa); color:#FFF; border-color:var(--wa); }
.bottone--primario:hover{ filter:brightness(1.08); }

.bottone--chiaro{ background:rgba(243,237,226,.13); color:#F3EDE2;
                  border-color:rgba(243,237,226,.5); backdrop-filter:blur(6px); }
.bottone--chiaro:hover{ background:rgba(243,237,226,.95); color:var(--ink);
                        border-color:transparent; }

.bottone--contorno{ color:var(--testo); border-color:var(--rigo); }
.bottone--contorno:hover{ border-color:var(--accento); color:var(--accento); }

.bottone--piccolo{ background:var(--wa); color:#FFF; border-color:var(--wa);
                   padding:.5rem .85rem; font-size:var(--t-xs); }
.bottone--minimo{ color:var(--testo-2); padding:.5rem .5rem; font-size:var(--t-xs); }
.bottone--minimo:hover{ color:var(--accento); }

/* numero WhatsApp non ancora disponibile */
.bottone--in-attesa{ opacity:.5; cursor:not-allowed; }

.azioni{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.azioni--eroe{ margin-top:2.2rem; }

/* ============================================================ testata */
.testata{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:.7rem var(--gutter);
  background:color-mix(in srgb, var(--fondo) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transform:translateY(-101%);
  transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .45s;
}
.testata.visibile{ transform:translateY(0); border-bottom-color:var(--rigo); }
.testata .marchio{ width:168px; color:var(--marchio); flex:none; }
.testata .marchio svg{ width:100%; height:auto; display:block; }

.menu{
  display:flex; gap:clamp(1rem,2.2vw,2.2rem); margin-inline-start:auto;
  font-family:var(--geom); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
}
.menu a{
  text-decoration:none; color:var(--testo-2); padding-block:.35rem;
  border-bottom:1px solid transparent; transition:color .22s, border-color .22s;
  white-space:nowrap;
}
.menu a:hover{ color:var(--accento); }
.menu a[aria-current="page"]{ color:var(--testo); border-bottom-color:var(--metallo); }

.testata__azioni{ display:flex; align-items:center; gap:.4rem; flex:none; }

.apri-menu{
  display:none; align-items:center; margin-inline-start:auto;
  background:none; border:0; cursor:pointer; padding:.5rem 0 .5rem .5rem;
  color:var(--testo); font-family:var(--geom); font-size:var(--t-xs);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}
.apri-menu span{ border-bottom:1px solid var(--metallo); padding-bottom:.25rem;
                 transition:color .25s, border-color .25s; }
.apri-menu[aria-expanded="true"] span{ border-bottom-color:var(--accento); color:var(--accento); }

.menu-mobile{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:4.5rem var(--gutter) 2.5rem;
  background:color-mix(in srgb, var(--fondo) 97%, transparent);
  backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.menu-mobile.aperto{ opacity:1; visibility:visible; transform:none; }
.menu-mobile__voci{ display:flex; flex-direction:column;
                    border-top:1px solid var(--rigo); }
.menu-mobile__voci a{
  font-family:var(--serif); font-size:var(--t-lg); text-decoration:none;
  color:var(--testo); padding:.85rem 0; line-height:1.25;
  border-bottom:1px solid var(--rigo);
}
.menu-mobile__voci a[aria-current="page"]{ color:var(--accento); }
.menu-mobile__nota{
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.06em;
  color:var(--testo-3); line-height:1.9; margin:1.6rem 0 0;
}
.menu-mobile__nota a{ color:var(--testo-2); text-decoration:none;
                      border-bottom:1px solid var(--rigo); }

@media (max-width:900px){
  .menu{ display:none; }
  .testata__azioni{ margin-inline-start:auto; }
  .apri-menu{ margin-inline-start:1rem; display:flex; }
}
@media (max-width:380px){ .testata__azioni{ display:none; } }

/* ============================================================ eroe */
.eroe{
  position:relative; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--lava);
}
.eroe--grande{ min-height:100svh; }
.eroe--medio{ min-height:min(62svh, 620px); }

.eroe__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
}
.eroe--grande .eroe__foto{ object-position:center 62%; }

.eroe__velo{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(11,8,5,.93) 0%, rgba(11,8,5,.62) 34%,
    rgba(11,8,5,.18) 68%, rgba(11,8,5,.42) 100%);
}
.eroe__testo{
  position:relative; width:100%; color:#F3EDE2;
  padding-block:clamp(2.5rem,8vh,6rem);
}
.eroe--medio .eroe__testo{ padding-block:clamp(2rem,5vh,3.5rem); }
.eroe h1{ max-width:14ch; }
.eroe__sotto{
  font-size:var(--t-md); line-height:1.55; max-width:40ch;
  color:rgba(243,237,226,.88); margin:1.2rem 0 0;
}

/* ============================================================ briciole */
.briciole{
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--testo-3);
  padding-block:1.1rem; border-bottom:1px solid var(--rigo);
}
.briciole a{ text-decoration:none; }
.briciole a:hover{ color:var(--accento); }
.briciole span[aria-hidden]{ margin-inline:.45rem; opacity:.6; }

/* ============================================================ sezioni */
.sezione{ padding-block:var(--sez); }
.sezione--scura{
  background:var(--lava); color:#EDE6D9;
  --testo:#EDE6D9; --testo-2:#C2B6A5; --testo-3:#928675;
  --rigo:var(--filo-scuro); --accento:#C4655C; --metallo:var(--oro-chiaro);
}

/* blocco asimmetrico: la colonna di testo è più larga
   e l'immagine scende, così le due colonne non partono mai alla stessa quota */
.scaglione{
  display:grid;
  grid-template-columns:minmax(0,6.4fr) minmax(0,4.6fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
}
.scaglione__figura{ margin:0; margin-top:clamp(1.5rem,6vw,5.5rem); }
.scaglione--rovescio .scaglione__figura{ order:-1; margin-top:0; }
.scaglione--rovescio .scaglione__testo{ margin-top:clamp(1.5rem,6vw,5.5rem); }
.scaglione__figura img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
/* per le fotografie orizzontali: il taglio verticale le spezzerebbe */
.scaglione__figura--larga img{ aspect-ratio:3/2; }
.scaglione__figura figcaption,
.griglia figcaption{
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--testo-3); margin-top:.8rem; line-height:1.6;
}
@media (max-width:880px){
  .scaglione{ grid-template-columns:1fr; gap:2.5rem; }
  .scaglione__figura,
  .scaglione--rovescio .scaglione__testo{ margin-top:0; }
  .scaglione--rovescio .scaglione__figura{ order:0; }
}

.manifesto{
  font-size:var(--t-xl); line-height:1.22; letter-spacing:-.015em;
  max-width:20ch; margin:0 0 1.8rem;
}
.manifesto em{ font-style:italic; color:var(--accento); }

.cifra{ display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.cifra b{ font-family:var(--serif); font-weight:400; font-size:var(--t-3xl);
          line-height:.82; color:var(--accento); }
.cifra span{ font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.2em;
             text-transform:uppercase; color:var(--testo-3); line-height:1.6; }

.citazione{
  margin:2.2rem 0 0; padding-left:1.3rem; border-left:2px solid var(--metallo);
  max-width:44ch;
}
.citazione p{ font-size:var(--t-md); font-style:italic; margin:0 0 .6rem; }
.citazione cite{ font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.16em;
                 text-transform:uppercase; font-style:normal; color:var(--testo-3); }

.banda{ width:100%; height:clamp(300px,58vh,620px); object-fit:cover; display:block; }

/* ============================================================ le tre porte */
.porte{ list-style:none; margin:2.5rem 0 0; padding:0;
        display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
        gap:clamp(1.2rem,3vw,2.5rem); }
.porte li{ min-width:0; }
.porte a{ display:flex; flex-direction:column; height:100%;
          text-decoration:none; transition:opacity .3s; }
.porte a:hover{ opacity:.82; }
.porte a:hover .oltre{ border-bottom-color:currentColor; }
.porte img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:1.2rem; }
.porte a > div{ display:flex; flex-direction:column; flex:1; }
.porte__num{
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.2em;
  color:var(--metallo); display:block; margin-bottom:.5rem;
}
.porte h3{ font-size:var(--t-lg); margin-bottom:.4rem; }
.porte p{ margin:0; color:var(--testo-2); max-width:48ch; }
.porte .oltre{ margin-top:auto; padding-top:1.2rem; color:var(--metallo);
                border-bottom:1px solid transparent; align-self:flex-start; }
@media (max-width:820px){
  .porte{ grid-template-columns:1fr; gap:2.5rem; }
  .porte img{ aspect-ratio:16/9; }
}

.bottone--pieno{ background:var(--accento); color:#F3EDE2; border-color:var(--accento); }
.bottone--pieno:hover{ filter:brightness(1.12); }

/* ============================================================ le persone */
.persone{ list-style:none; margin:2.5rem 0 0; padding:0;
          display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
          gap:clamp(1.5rem,3vw,2.5rem); }
.persone li{ min-width:0; }
.persone img, .persone .vuoto{ width:100%; aspect-ratio:4/5; object-fit:cover;
                               object-position:center 22%; margin-bottom:1.1rem; }
.persone h3{ font-size:var(--t-lg); margin-bottom:.15rem; }
.persone__ruolo{ font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.18em;
                 text-transform:uppercase; color:var(--metallo); margin:0 0 .8rem; }
.persone p{ margin:0; color:var(--testo-2); }
@media (max-width:820px){ .persone{ grid-template-columns:1fr; gap:2.5rem; } }

/* ============================================================ servizi */
.servizi{ list-style:none; margin:2.5rem 0 0; padding:0; border-top:1px solid var(--rigo); }
.servizi li{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.3rem 2.5rem; padding:1.35rem 0; border-bottom:1px solid var(--rigo);
  align-items:start;
}
.servizi h3{ font-size:var(--t-md); margin:0; }
.servizi p{ margin:0; color:var(--testo-2); max-width:52ch; }
@media (max-width:680px){ .servizi li{ grid-template-columns:1fr; gap:.35rem; } }

/* ============================================================ griglie */
.griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(.7rem,1.8vw,1.4rem); margin-top:2.5rem;
}
.griglia--quattro{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.griglia > *{ min-width:0; }
.griglia figure{ margin:0; }
.griglia img{ width:100%; aspect-ratio:1; object-fit:cover; background:var(--fondo-2); }

.vuoto{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; width:100%; min-width:0;
  background:var(--fondo-2); border:1px dashed var(--rigo); color:var(--testo-3);
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; padding:1.5rem 1rem;
  overflow-wrap:anywhere; hyphens:auto;
}
.vuoto::before{ content:""; width:24px; height:24px; border:1px solid currentColor;
                border-radius:50%; opacity:.5; }
.scaglione__figura .vuoto{ aspect-ratio:4/5; }
.griglia .vuoto{ aspect-ratio:1; }

/* ============================================================ dati e mappa */
.dati{ margin:2.2rem 0 0; padding-top:1.6rem; border-top:1px solid var(--rigo);
       display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
       gap:1.5rem 2rem; }
.dati > *{ min-width:0; }
.dati dt{ font-family:var(--geom); font-size:var(--t-xs); font-weight:500;
          letter-spacing:.2em; text-transform:uppercase; color:var(--testo-3);
          margin-bottom:.4rem; }
.dati dd{ margin:0; line-height:1.7; }
.dati a{ text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accento) 40%,transparent); }
.dati a:hover{ border-bottom-color:var(--accento); }

.mappa{ border:1px solid var(--rigo); background:var(--fondo-2); }
.mappa iframe{ display:block; width:100%; aspect-ratio:4/5; border:0; }
.mappa__nota{ font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.08em;
              color:var(--testo-3); margin:.8rem 0 0; }
.mappa__nota a{ color:var(--accento); text-decoration:none;
                border-bottom:1px solid currentColor; }
@media (max-width:880px){ .mappa iframe{ aspect-ratio:1; } }

/* ============================================================ richiamo finale */
.richiamo{
  background:var(--fondo-2); border-top:1px solid var(--rigo);
  padding-block:clamp(3rem,8vw,6rem); text-align:left;
}
.richiamo h2{ margin-bottom:1rem; max-width:20ch; }
.richiamo__testo{ max-width:52ch; color:var(--testo-2); margin:0; }

/* ============================================================ piede */
.piede{ border-top:1px solid var(--rigo); padding-block:clamp(2.5rem,6vw,4rem) 2rem;
        font-size:1rem; }
.piede__griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem clamp(1.5rem,3vw,3rem);
}
.piede__griglia > *{ min-width:0; }
.piede__marchio{ grid-column:span 2; }
.piede__marchio .marchio{ width:180px; color:var(--marchio); margin-bottom:1rem; }
.piede__marchio .marchio svg{ width:100%; height:auto; display:block; }
.piede__marchio p{ margin:0; color:var(--testo-2); }
.piede h3{ font-family:var(--geom); font-size:var(--t-xs); font-weight:500;
           letter-spacing:.2em; text-transform:uppercase; color:var(--testo-3);
           margin-bottom:.7rem; }
.piede p{ margin:0; line-height:1.8; }
.piede a{ text-decoration:none;
          border-bottom:1px solid color-mix(in srgb,var(--accento) 35%,transparent); }
.piede a:hover{ border-bottom-color:var(--accento); }
.piede__voci a[aria-current="page"]{ color:var(--testo-3); border-bottom-color:transparent; }
.orario{ display:flex; justify-content:space-between; gap:1rem; }
.orario span{ color:var(--testo-3); }
.orario b{ font-weight:400; }
.piede__legale{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rigo);
                font-family:var(--geom); font-size:var(--t-sm); letter-spacing:.04em;
                color:var(--testo-3); line-height:1.7; }
@media (max-width:640px){ .piede__marchio{ grid-column:span 1; } }

.crediti{
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.03em;
  color:var(--testo-3); line-height:1.8; margin:1.2rem 0 0;
}
.crediti a{ color:inherit; border-bottom:1px solid var(--rigo); text-decoration:none; }

/* ============================================================ revisione */
.da-confermare{ border-bottom:1px dotted transparent;
                transition:background .2s, border-color .2s; }
body.revisione .da-confermare{
  background:color-mix(in srgb, var(--metallo) 24%, transparent);
  border-bottom-color:var(--metallo); border-radius:2px; padding:0 .12em;
}
body.revisione .da-confermare::after{
  content:"?"; font-family:var(--geom); font-size:.62em; font-weight:600;
  vertical-align:super; color:var(--accento); margin-left:.15em;
}

.interruttore{
  position:fixed; right:1rem; bottom:1rem; z-index:80;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; background:var(--fondo); color:var(--testo-2);
  border:1px solid var(--rigo); border-radius:999px;
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.16);
  transition:color .2s, border-color .2s;
}
.interruttore:hover{ color:var(--accento); border-color:var(--accento); }
.interruttore b{ font-weight:600; color:var(--accento); font-variant-numeric:tabular-nums; }
body.revisione .interruttore{ background:var(--accento); color:#F3EDE2; border-color:var(--accento); }
body.revisione .interruttore b{ color:#F3EDE2; }

/* ============================================================ comparsa */
.js .comparsa{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.js .comparsa.dentro{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .comparsa{ opacity:1; transform:none; } }
html:not(.js) .interruttore,
html:not(.js) .apri-menu{ display:none; }

.dd-nota{ color:var(--testo-3); font-size:var(--t-sm); }

/* elenco numeri nella pagina Chi siamo */
.dati--larghi{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.dati--larghi dt{ font-family:var(--serif); font-size:var(--t-xl); font-weight:400;
                  letter-spacing:-.01em; text-transform:none; color:var(--accento);
                  line-height:1; margin-bottom:.5rem; }
.dati--larghi dd{ font-size:var(--t-sm); color:var(--testo-2); line-height:1.55; }

/* ============================================================ tocco
   Su mobile i link incolonnati devono avere un'area comoda: 20px di
   altezza sono un bersaglio troppo piccolo per un dito. */
@media (max-width:900px){
  .piede__voci a,
  .piede p a,
  .menu-mobile__nota a,
  .crediti a{ display:inline-block; padding-block:.42rem; }
  .piede__voci a{ padding-block:.5rem; }
  .oltre a, a.oltre{ display:inline-block; padding-block:.45rem; }
  .dati a{ display:inline-block; padding-block:.3rem; }
}

/* ============================================================ griglie su mobile
   A colonna singola una galleria di 35 pezzi diventa una pagina di 26.000 pixel:
   su telefono si passa a due colonne, che dimezzano lo scorrimento. */
@media (max-width:640px){
  .griglia--quattro{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
  .griglia--quattro figcaption{ font-size:.72rem; letter-spacing:.08em; margin-top:.5rem; }
}
@media (max-width:400px){
  .griglia--quattro{ gap:.45rem; }
}

.errore-404{ padding-block:clamp(5rem,16vh,10rem); }
.errore-404 h1{ margin-bottom:1rem; }

/* ============================================================ consenso
   Compare solo se in config.json c'e almeno uno strumento di misurazione.
   «Rifiuta tutti» e «Accetta tutti» hanno la stessa classe, quindi lo stesso
   peso visivo: il Garante chiede che rifiutare costi quanto accettare. */
.consenso{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  max-height:88svh; overflow:auto; overscroll-behavior:contain;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  padding:1.2rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--fondo) 97%, transparent);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--rigo);
  box-shadow:0 -8px 30px rgba(20,17,13,.14);
  transform:translateY(102%); transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.consenso.dentro{ transform:none; }
.consenso__chiudi{
  position:absolute; top:.35rem; right:.5rem;
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  background:none; border:0; border-radius:50%; cursor:pointer;
  color:var(--testo-3); font-size:1.6rem; line-height:1; font-family:var(--geom);
}
.consenso__chiudi:hover{ color:var(--accento); }
.consenso__testo{ flex:1 1 24rem; min-width:0; padding-right:2.4rem; }
.consenso__testo b{ display:block; font-family:var(--serif); font-size:var(--t-md);
                    font-weight:400; margin-bottom:.2rem; }
.consenso__testo p{ margin:0; font-size:var(--t-sm); color:var(--testo-2); max-width:64ch; }
.consenso__testo a{ color:var(--accento); }
.consenso__pannello{ flex:1 1 100%; display:grid; border-top:1px solid var(--rigo); }
.consenso__pannello[hidden]{ display:none; }
.consenso__voce{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:.85rem 0; border-bottom:1px solid var(--rigo); cursor:pointer;
}
.consenso__voce--fissa{ cursor:default; }
.consenso__voce span{ min-width:0; }
.consenso__voce b{ display:block; font-family:var(--geom); font-size:var(--t-sm);
                   font-weight:500; letter-spacing:.04em; }
.consenso__voce small{ display:block; font-size:var(--t-sm); color:var(--testo-2); line-height:1.5; }
.interruttore-consenso{
  -webkit-appearance:none; appearance:none; flex:none; position:relative; margin:0;
  width:2.9rem; height:1.65rem; border-radius:999px; cursor:pointer;
  background:var(--rigo); transition:background .2s;
}
.interruttore-consenso::after{
  content:""; position:absolute; top:.2rem; left:.2rem;
  width:1.25rem; height:1.25rem; border-radius:50%; background:#FFF;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;
}
.interruttore-consenso:checked{ background:var(--accento); }
.interruttore-consenso:checked::after{ transform:translateX(1.25rem); }
.interruttore-consenso:disabled{ opacity:.55; cursor:not-allowed; }
.consenso__scelte{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; flex:0 0 auto; }
.consenso__scelte button{
  font-family:var(--geom); font-size:var(--t-sm); font-weight:500; letter-spacing:.06em;
  min-height:2.9rem; padding:.7rem 1.3rem; border-radius:2px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.consenso__pari{ border:1px solid var(--testo); background:var(--testo); color:var(--fondo); }
.consenso__pari:hover{ background:var(--accento); border-color:var(--accento); color:#F3EDE2; }
.consenso__secondario{ border:1px solid var(--rigo); background:transparent; color:var(--testo); }
.consenso__secondario:hover{ border-color:var(--accento); color:var(--accento); }
@media (max-width:620px){
  .consenso{ gap:.9rem; padding-top:1rem; }
  .consenso__scelte{ flex:1 1 100%; display:grid; grid-template-columns:1fr 1fr; }
  .consenso__scelte button{ width:100%; padding-inline:.6rem; }
  .consenso__scelte .consenso__secondario{ grid-column:1 / -1; order:3; }
}

/* La foto dell eroe puo arrivare da un <picture>: la regola vale in entrambi i casi */
.eroe picture{ position:absolute; inset:0; display:block; }

/* Didascalia dell eroe: serve a dichiarare quando un immagine non e documentaria.
   Deve restare leggibile, non nascosta in un angolo. */
.eroe__didascalia{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:.7rem;
  margin:0; font-family:var(--geom); font-size:.7rem; letter-spacing:.04em;
  line-height:1.5; color:rgba(243,237,226,.62); max-width:52ch;
}
@media (max-width:700px){ .eroe__didascalia{ font-size:.66rem; bottom:.5rem; } }

/* Se l eroe ha una didascalia, il testo si alza per non finirci sopra */
.eroe:has(.eroe__didascalia) .eroe__testo{ padding-bottom:clamp(5rem,9vh,6.5rem); }

/* Sul telefono il blocco di testo dell eroe deve stare basso e compatto,
   altrimenti risale fin sopra i volti. */
@media (max-width:700px){
  .eroe__sotto{ font-size:var(--t-base); line-height:1.5; max-width:34ch; margin-top:.9rem; }
  .azioni--eroe{ margin-top:1.4rem; }
  .eroe--grande .eroe__testo{ padding-block:clamp(2rem,5vh,3rem); }
}

/* Il collegamento per cambiare le preferenze ha senso solo se c e qualcosa da consentire */
body[data-misura="off"] [data-solo-con-consenso]{ display:none; }


/* ============================================================ pagine di servizio */
.servizi__link{
  display:table; margin-top:.75rem;
  font-family:var(--geom); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accento); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.15rem;
}
.servizi__link:hover{ color:var(--metallo); }

.punti{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2.2rem clamp(1.5rem,3vw,3rem); margin-top:2.5rem;
}
.punti > div{ min-width:0; padding-top:1.1rem; border-top:1px solid var(--metallo); }
.punti h3{ font-size:var(--t-lg); margin-bottom:.5rem; }
.punti p{ margin:0; color:var(--testo-2); }

.listino-tabella{ margin-top:2rem; max-width:60rem; overflow-x:auto; }
.listino{ width:100%; border-collapse:collapse; border-top:1px solid var(--rigo); }
.listino th{
  font-family:var(--geom); font-size:var(--t-xs); font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--testo-3); text-align:left;
  padding:.9rem 1.2rem .9rem 0; border-bottom:1px solid var(--rigo);
}
.listino td{ padding:.95rem 1.2rem .95rem 0; border-bottom:1px solid var(--rigo); vertical-align:top; }
.listino td + td{ color:var(--testo-2); }
.listino small{ color:var(--testo-3); }
.listino a{ color:var(--accento); }
.listino__nota{ font-size:var(--t-sm); color:var(--testo-3); margin:.9rem 0 0; max-width:60ch; }
.listino--tempi td + td{ white-space:nowrap; }
@media (max-width:620px){
  .listino thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .listino, .listino tbody, .listino tr, .listino td{ display:block; width:100%; }
  .listino tr{ padding:.9rem 0; border-bottom:1px solid var(--rigo); }
  .listino td{ border:0; padding:.1rem 0; }
  /* i tempi in auto restano una tabella: tre colonne corte stanno anche sul telefono */
  .listino.listino--tempi{ display:table; }
  .listino--tempi thead{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
  .listino--tempi tbody{ display:table-row-group; }
  .listino--tempi tr{ display:table-row; }
  .listino--tempi th, .listino--tempi td{ padding-right:.9rem; }
  .listino--tempi td{ display:table-cell; width:auto; padding-top:.7rem; padding-bottom:.7rem; border-bottom:1px solid var(--rigo); }
}

.faq{ margin-top:2.2rem; max-width:52rem; border-top:1px solid var(--rigo); }
.faq details{ border-bottom:1px solid var(--rigo); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1.15rem 0; font-size:var(--t-md); line-height:1.35; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; font-family:var(--geom); font-weight:300; font-size:1.5rem; line-height:1;
  color:var(--metallo); transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--accento); }
.faq__risposta{ padding:0 0 1.35rem; max-width:62ch; color:var(--testo-2); }
.faq__risposta p{ margin:0; }

.correlati{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rigo); }
.correlati a{ display:block; padding:1rem 0; border-bottom:1px solid var(--rigo); text-decoration:none; }
.correlati b{ display:block; font-weight:400; font-size:var(--t-md); transition:color .2s; }
.correlati span{ display:block; font-size:var(--t-sm); color:var(--testo-2); }
.correlati a:hover b{ color:var(--accento); }

/* segnaposto visibili solo in modalita revisione */
.segnaposto{ display:none; }
body.revisione .segnaposto{ display:inline-block; margin-top:1rem; }
body.revisione .segnaposto::before{ content:attr(data-testo); }

@media (max-width:900px){
  .servizi__link{ padding-block:.45rem .2rem; }
}

/* ============================================================ misurazione: modalita prova
   Compare solo aprendo il sito con ?misura=debug. Non manda niente a nessuno. */
.debug-misura{
  position:fixed; top:4.6rem; left:.6rem; z-index:140;
  width:min(24rem, calc(100vw - 1.2rem)); max-height:45svh; overflow:auto;
  background:#14110D; color:#EDE6D9; border-radius:6px;
  font:12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.debug-misura__testa{
  position:sticky; top:0; display:flex; justify-content:space-between; align-items:center;
  padding:.45rem .7rem; background:#14110D; color:#C9A465; border-bottom:1px solid #372F26;
}
.debug-misura button{ background:none; border:0; color:inherit; cursor:pointer; font:inherit; }
.debug-misura ol{ list-style:none; margin:0; padding:.3rem .7rem .6rem; }
.debug-misura li{ padding:.3rem 0; border-bottom:1px dashed #372F26; overflow-wrap:anywhere; }
.debug-misura li b{ color:#C9A465; font-weight:600; }
.debug-misura li i{ color:#A89A87; font-style:normal; }

/* Gli orari hanno righe lunghe: su schermi larghi occupano due colonne del piede */
.piede__orari{ grid-column:span 2; }
@media (max-width:640px){ .piede__orari{ grid-column:span 1; } }

/* Il pulsante di revisione e uno strumento interno: nascosto a tutti,
   compare solo con ?revisione=1 (sito.js aggiunge la classe al documento). */
.interruttore{ display:none; }
html.strumento-revisione .interruttore{ display:inline-flex; }

/* ============================================================ servizi in home
   Otto collegamenti: su due colonne non resta nessuna voce da sola. */
.correlati--griglia{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:3rem; margin-top:2rem; }
@media (min-width:760px){ .correlati--griglia{ grid-template-columns:repeat(2,minmax(0,1fr)); } }