/* ============================================================
   Sicily Home Rentals — foglio principale.
   Legge tutto da tokens.css: qui non compare nessun valore inventato.
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
  background:var(--s-page);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:var(--lh-head);margin:0}
p{margin:0 0 1em}

/* Anello di fuoco visibile ovunque: chi naviga da tastiera deve sempre
   sapere dove si trova. Impostato una volta sola, non componente per componente. */
:focus-visible{outline:3px solid var(--c-sea);outline-offset:2px;border-radius:2px}

/* Salto al contenuto: la prima cosa che incontra chi usa la tastiera o
   uno screen reader, così non deve attraversare il menu a ogni pagina. */
.skip{
  position:absolute;left:var(--sp-4);top:-100px;z-index:var(--z-modal);
  background:var(--c-ink);color:#fff;padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-sm);font-weight:600;
  transition:top var(--ms-fast) var(--ease);
}
.skip:focus{top:var(--sp-4)}

/* ---------------------------------------------------------- barra alta */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--s-line-soft);
}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:var(--sp-3) var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-6)}

/* Marchio: il file originale. Le misure stanno nell'HTML, quindi lo spazio
   e' riservato prima che l'immagine arrivi e la barra non sobbalza. */
.brand{display:inline-flex;align-items:center;position:relative;flex:0 0 auto}
.brand-logo{display:block;width:auto;height:44px;max-width:64vw;object-fit:contain}
@media (max-width:600px){.brand-logo{height:36px}}

.nav-links{display:flex;gap:var(--sp-6);flex:1;font-size:15px;color:var(--c-ink-soft)}
.nav-links a{position:relative;transition:color var(--ms-fast) var(--ease)}
.nav-links a:hover{color:var(--c-ink)}
/* Area sensibile portata a 44px senza ingrandire il testo né alzare la barra */
.nav-links a::after,.brand::after,.foot-contact a::after{content:"";position:absolute;inset:-11px -6px}

.nav-right{display:flex;align-items:center;gap:var(--sp-5)}
.langs{display:flex;gap:18px;font-size:var(--t-micro);letter-spacing:.06em;color:var(--c-ink-soft)}
.langs a{position:relative;transition:color var(--ms-fast) var(--ease)}
.langs a::after{content:"";position:absolute;inset:-12px -7px}
.langs a:hover{color:var(--c-ink)}
.langs a.on{color:var(--c-sea-deep);font-weight:700}

/* ------------------------------------------------------------- bottoni */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:var(--sp-3) var(--sp-5);
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--f-text);font-weight:600;font-size:15px;cursor:pointer;
  transition:background var(--ms-base) var(--ease),color var(--ms-base) var(--ease),
             box-shadow var(--ms-base) var(--ease),border-color var(--ms-base) var(--ease);
}
/* Terracotta e non oro: l'oro su bianco sta a 3,3 di contrasto e non
   raggiunge il minimo. La terracotta con testo bianco arriva a 5,2 ed è
   altrettanto mediterranea. */
.btn-gold{background:var(--c-terra);color:#fff;box-shadow:var(--sh-1)}
.btn-gold:hover{background:var(--c-terra-deep);box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--s-line)}
.btn-ghost:hover{border-color:var(--c-ink);background:var(--s-sand)}
.btn-lg{min-height:52px;padding:var(--sp-4) var(--sp-7);font-size:16px}
.btn-block{display:flex;width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:min(84vh,720px);
  display:flex;align-items:flex-end;
  background:var(--s-ink) center/cover no-repeat;
  color:#fff;overflow:hidden;
}
.hero-sm{min-height:min(52vh,420px)}
.hero-plain{background-image:linear-gradient(135deg,#1d3a4c,#10222E)}
/* Velo verticale: scurisce solo dove sta il testo, così la fotografia
   resta viva nella parte alta invece di essere spenta ovunque. */
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,34,46,.18) 0%,rgba(16,34,46,.20) 45%,rgba(16,34,46,.80) 100%)}
.hero-in{position:relative;z-index:var(--z-base);width:100%;max-width:var(--wrap);
  margin:0 auto;padding:var(--sp-9) var(--sp-5) var(--sp-8)}
.hero-title{font-size:var(--t-hero);line-height:var(--lh-tight);margin:.12em 0 .3em;
  text-wrap:balance;max-width:16ch}
.hero-sub{font-size:var(--t-lead);max-width:52ch;opacity:.94;margin:0 0 var(--sp-6)}
.eyebrow{text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--t-micro);
  font-weight:700;margin:0;opacity:.92}
.eyebrow-dark{color:var(--c-sea)}

/* ------------------------------------------------------------ sezioni */
.sec{max-width:var(--wrap);margin:0 auto;padding:var(--sp-9) var(--sp-5)}
.sec-alt{max-width:none;background:var(--s-sand)}
.sec-alt > *{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.sec-narrow{max-width:820px}
.sec-label{text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--t-micro);
  font-weight:700;color:var(--c-sea);text-align:center}
.sec-title{font-size:var(--t-h2);text-align:center;margin:.3em 0 .9em;text-wrap:balance}
.sec-title-sm{font-size:var(--t-h3);text-align:left;margin-top:1.6em}
.center{text-align:center}
.lead{font-size:var(--t-lead);color:var(--c-ink-soft);max-width:var(--wrap-text)}

/* ------------------------------------------------------------ griglie */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ------------------------------------------------------------- schede */
.card{
  position:relative;background:var(--s-page);border:1px solid var(--s-line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--ms-base) var(--ease),box-shadow var(--ms-base) var(--ease),
             border-color var(--ms-base) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--s-sand-deep)}
.card:focus-visible{outline:3px solid var(--c-sea);outline-offset:3px}
.card-img{position:relative;aspect-ratio:var(--ar-card);background:var(--s-sand-deep) center/cover no-repeat;overflow:hidden}
/* L'ingrandimento vive sull'immagine, non sulla scheda: così nulla si
   sposta e le schede vicine restano ferme. */
.card-img::after{content:"";position:absolute;inset:0;transition:transform var(--ms-slow) var(--ease)}
.card-price{position:absolute;left:var(--sp-3);bottom:var(--sp-3);
  background:rgba(255,255,255,.95);color:var(--c-ink);font-size:var(--t-small);font-weight:700;
  padding:6px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.card-body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.card-place{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--c-sea)}
.card-title{font-size:var(--t-h3);margin:.25em 0 .3em}
.card-sub{margin:0 0 var(--sp-3);color:var(--c-ink-soft);font-size:15px}
.card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--t-small);
  color:var(--c-ink-soft);border-top:1px solid var(--s-line-soft);padding-top:var(--sp-3)}

/* Scheda senza foto: riquadro sobrio, non un'immagine rotta */
.card-img-empty{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--s-sand),var(--s-sand-deep))}
.card-img-empty span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-soft)}

.why h3{font-size:var(--t-h3);margin:0 0 .4em}
.why p{margin:0;color:var(--c-ink-soft)}

/* ------------------------------------------------------------ ricerca */
.search{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;
  justify-content:center;margin:0 0 var(--sp-7);
  background:var(--s-sand);border:1px solid var(--s-line);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5)}
.search-field{display:flex;flex-direction:column;gap:4px;min-width:190px}
.search-field label{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--c-ink-soft)}
.search-field select{min-height:44px;padding:0 var(--sp-3);font:inherit;font-size:15px;
  color:var(--c-ink);background:var(--s-page);border:1px solid var(--s-line);
  border-radius:var(--r-sm);cursor:pointer}
.search-reset{min-height:44px;padding:0 var(--sp-4);background:none;border:1px solid var(--s-line);
  border-radius:var(--r-pill);font:inherit;font-size:var(--t-small);color:var(--c-ink-soft);cursor:pointer;
  transition:color var(--ms-fast) var(--ease),border-color var(--ms-fast) var(--ease)}
.search-reset:hover{color:var(--c-ink);border-color:var(--c-ink)}
.search-count{width:100%;margin:0;font-size:var(--t-small);color:var(--c-ink-soft);text-align:center}
.no-results{text-align:center;color:var(--c-ink-soft);padding:var(--sp-6) 0 0}

/* ---------------------------------------------------- mappa della Sicilia */
.map-sub{text-align:center;color:var(--c-ink-soft);margin:-.4em auto var(--sp-6);max-width:var(--wrap-text)}
.map-layout{display:grid;grid-template-columns:1fr 260px;gap:var(--sp-5);align-items:start}
.map-wrap{position:relative;background:linear-gradient(180deg,#eaf4f8,#dfeef4);
  border:1px solid var(--s-line);border-radius:var(--r-lg);padding:var(--sp-5);overflow:hidden}
.map-svg{width:100%;height:auto;display:block;overflow:visible;aspect-ratio:var(--ar-wide)}
.map-land{fill:#dce8d6;stroke:#aec5a7;stroke-linejoin:round}

.map-pin{cursor:pointer}
.map-hit{fill:transparent}
.map-pin-halo{fill:var(--c-gold);opacity:.20;transition:opacity var(--ms-base) var(--ease)}
.map-pin-dot{fill:var(--c-gold);stroke:#fff}
.map-pin:hover .map-pin-halo,.map-pin:focus-visible .map-pin-halo{opacity:.45}
.map-pin:focus-visible{outline:none}
.map-pin:focus-visible .map-pin-dot{stroke:var(--c-ink);stroke-width:4}
.map-ico{fill:#fff;pointer-events:none}
.map-ico .ico-line{stroke:#fff;stroke-width:2.6;stroke-linecap:round;fill:none}
.map-name{font-family:var(--f-display);font-weight:700;fill:var(--c-ink);
  paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.map-count{font-family:var(--f-text);fill:var(--c-ink-soft);
  paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.map-pin:hover .map-name,.map-pin:focus-visible .map-name{fill:var(--c-terra-deep)}
.map-sea{font-family:var(--f-text);font-weight:500;fill:#6f9cb3;opacity:.8;text-transform:uppercase}
.map-poi{pointer-events:none}
.poi-dot{fill:#8ba088;opacity:.85}
.poi-plane{fill:#66788a;opacity:.9}
.poi-label{font-family:var(--f-text);fill:#5d6e7a;paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.map-poi-airport .poi-label{fill:var(--c-ink-soft);font-weight:600}

.map-inset{position:absolute;bottom:14px;right:14px;width:172px;padding:9px 10px;
  background:rgba(255,255,255,.94);border:1px solid var(--s-line);border-radius:var(--r-sm);
  box-shadow:var(--sh-2);line-height:0}
.map-inset svg{width:100%;height:auto;display:block}
.inset-land{fill:#e2ecdd;stroke:#b9cbb3;stroke-width:3}
.inset-box{fill:rgba(176,134,54,.22);stroke:var(--c-gold);stroke-width:8}

.map-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.map-list a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);background:var(--s-page);border:1px solid var(--s-line);
  border-radius:var(--r-md);min-height:44px;
  transition:border-color var(--ms-fast) var(--ease),transform var(--ms-fast) var(--ease)}
.map-list a:hover{border-color:var(--c-sea);transform:translateX(2px)}
.map-list-name{font-family:var(--f-display);font-size:17px}
.map-list-count{font-size:var(--t-small);color:var(--c-ink-soft);white-space:nowrap}

.map-legend{display:flex;flex-wrap:wrap;gap:var(--sp-5);justify-content:center;
  margin:var(--sp-4) 0 0;font-size:var(--t-small);color:var(--c-ink-soft)}
.map-legend span{display:inline-flex;align-items:center;gap:7px}
.map-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.map-legend .lg-house{background:var(--c-gold);box-shadow:0 0 0 3px rgba(176,134,54,.22)}
.map-legend .lg-poi{background:#8ba088;width:8px;height:8px}
.map-credit{text-align:center;font-size:var(--t-micro);color:var(--c-ink-soft);margin:var(--sp-3) 0 0;opacity:.85}

/* ------------------------------------------------------- piè di pagina */
.foot{background:var(--s-ink);color:#cfdae1;margin-top:var(--sp-8)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:var(--sp-8) var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-6);justify-content:space-between}
.foot-brand{display:inline-flex;align-items:center;gap:var(--sp-3);color:#fff}
/* Il logo e' nero su trasparente: sul fondo scuro del pie' di pagina
   sparirebbe. Lo si schiarisce con un filtro invece di tenere due file. */
.foot-brand .brand-logo{filter:brightness(0) invert(1);opacity:.92;height:40px}
.foot-text{margin:var(--sp-3) 0 0;font-size:15px;max-width:42ch}
.foot-contact{display:flex;flex-direction:column;gap:0}
.foot-contact a{position:relative;display:inline-block;padding:9px 0;
  transition:color var(--ms-fast) var(--ease)}
.foot-contact a:hover{color:var(--c-gold)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:var(--sp-4) var(--sp-5);
  text-align:center;font-size:var(--t-small);color:#8ea0af}

.link-back{color:var(--c-ink-soft);border-bottom:1px solid var(--s-line);transition:color var(--ms-fast) var(--ease)}
.link-back:hover{color:var(--c-sea)}
.cta-row{margin-top:var(--sp-7);text-align:center}
.cin{margin-top:var(--sp-6);font-size:var(--t-micro);color:var(--c-ink-soft);opacity:.8;text-align:center}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.ticks-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ticks li{padding-left:26px;position:relative;color:var(--c-ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--c-sea)}

/* ------------------------------------------------------------- mobile */
@media (max-width:900px){
  .map-layout{grid-template-columns:1fr}
  .map-inset{width:120px;bottom:10px;right:10px;padding:7px 8px}
}
@media (max-width:820px){
  .sec{padding:var(--sp-8) var(--sp-4)}
  .nav-in{padding:var(--sp-3) var(--sp-4);gap:var(--sp-4);flex-wrap:wrap}
  .nav-links{order:3;flex-basis:100%;justify-content:center;gap:var(--sp-5);
    border-top:1px solid var(--s-line-soft);padding-top:var(--sp-3)}
  .nav-right{margin-left:auto}
  .hero-in{padding:var(--sp-8) var(--sp-4) var(--sp-7)}
  .search{flex-direction:column;align-items:stretch}
  .search-field{min-width:0}
  .foot-in{flex-direction:column;gap:var(--sp-5)}
}
@media (max-width:520px){
  .map-inset{width:96px}
}

/* ---------------------------------------------------------- apertura foto
   Una fotografia per localita', a rotazione. Le immagini stanno una sopra
   l'altra e cambiano in dissolvenza: nessuno scorrimento orizzontale, quindi
   nessun rischio di trascinare la pagina di lato sui telefoni. */
.hero-stage{position:absolute;inset:0;overflow:hidden}
.hero-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.hero-shot.is-on{opacity:1}

/* Con la barra in basso il testo ha bisogno di piu' aria, altrimenti il
   pulsante e il nome della localita' finiscono uno addosso all'altro. */
.hero-has-bar .hero-in{padding-bottom:calc(var(--sp-8) + 52px)}

.hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-base);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--sp-5) var(--sp-5)}
.hero-place{position:relative;flex:1 1 220px;min-height:1.5em;margin:0}
.hero-name{position:absolute;left:0;bottom:0;opacity:0;pointer-events:none;
  color:#fff;text-decoration:none;font-size:13px;line-height:1.4;
  transition:opacity .5s ease}
.hero-name.is-on{opacity:1;pointer-events:auto}
.hero-name:hover,.hero-name:focus-visible{text-decoration:underline}
.hero-credit{opacity:.7;margin-left:.5em;font-size:12px}
/* Il pallino resta piccolo, il bersaglio no: il pulsante e' largo 40px e alto
   44, con il pallino disegnato al centro. Allargare invece l'area con un
   ::after negativo farebbe accavallare i bersagli dei pallini vicini, e il
   dito finirebbe sulla localita' sbagliata. */
.hero-dots{display:flex;gap:0;flex:none}
.hero-dot{width:40px;height:44px;padding:0;border:0;background:none;
  position:relative;cursor:pointer}
.hero-dot::before{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:rgba(255,255,255,.45);transition:background .25s ease}
.hero-dot.is-on::before{background:#fff}
.hero-dot:hover::before{background:rgba(255,255,255,.8)}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:8px}

/* Crediti fotografici sulla pagina localita' */
.loc-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-3)}
.loc-shots img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-2);display:block}
.photo-credits{margin:0;font-size:12px;color:var(--c-ink-soft);line-height:1.6}
.photo-credits a{color:inherit}

/* Sui telefoni nome e pallini non stanno sulla stessa riga: messi in colonna
   restano leggibili, invece di andare a capo da soli in modo disordinato.
   Il credito resta visibile: e' la condizione d'uso delle foto, non un
   dettaglio da nascondere quando lo schermo si stringe. */
@media (max-width:600px){
  .hero-bar{flex-direction:column;align-items:flex-start;gap:var(--sp-2);
    padding:0 var(--sp-4) var(--sp-4)}
  .hero-place{width:100%;flex:none;min-height:2.6em}
  .hero-name{line-height:1.4}
  .hero-credit{display:block;margin:2px 0 0}
  .hero-dots{margin-left:-8px}
  .hero-has-bar .hero-in{padding-bottom:calc(var(--sp-8) + 92px)}
}

/* ------------------------------------------------------ presentazione
   Testo a sinistra e ritratto a destra. Sotto i 900px la foto passa sopra
   il testo: affiancata diventerebbe troppo stretta per leggersi un viso. */
.intro{background:var(--s-sand);border-bottom:1px solid var(--s-line)}
.intro-in{max-width:var(--wrap);margin:0 auto;padding:var(--sp-9) var(--sp-5);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-8);align-items:center}
.intro-solotesto .intro-in{grid-template-columns:minmax(0,1fr);max-width:760px}
.intro-name{font-family:var(--f-display);font-size:var(--t-hero);line-height:var(--lh-tight);
  margin:.1em 0 .35em;color:var(--c-ink)}
.intro-claim{font-size:clamp(18px,2.1vw,22px);font-weight:600;line-height:1.4;
  color:var(--c-ink);margin:0 0 var(--sp-5)}
.intro-bio{color:var(--c-ink-soft);line-height:1.7;margin:0 0 var(--sp-6);max-width:62ch}
.intro-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0}
/* Il ritratto originale e' 409x799: se lo si allarga oltre la sua misura
   diventa sfocato. Il tetto a 400px lo tiene alla risoluzione vera, e la
   colonna resta comunque piena perche' e' allineato a destra. */
.intro-photo{margin:0;justify-self:end;width:100%;max-width:400px}
/* Proporzione 2:3 e non 4:5: l'originale e' molto alto e stretto (409x799),
   un ritaglio piu' quadrato ne butterebbe via un terzo. Ancorato in alto per
   non tagliare la testa. */
.intro-photo img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  object-position:center top;border-radius:var(--r-3);box-shadow:var(--sh-2);display:block}
@media (max-width:900px){
  .intro-in{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-7) var(--sp-4)}
  .intro-photo{order:-1}
  /* Su telefono la foto sta sopra al testo: una fascia bassa occuperebbe
     mezzo schermo, quindi si stringe e resta comunque un ritratto. */
  .intro-photo{max-width:260px;justify-self:start}
  .intro-photo img{aspect-ratio:3/4;object-position:center top}
}

/* ----------------------------------------------------------- recapiti */
.contatti-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-7)}
.contatti-invito p{color:var(--c-ink-soft);line-height:1.7;max-width:44ch}
.contatti-azioni{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.contatti-intro{font-weight:600;color:var(--c-ink);line-height:1.5;margin:0 0 var(--sp-5)}
.contatti-dati dl{margin:0}
.contatti-dati dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-ink-soft);margin-top:var(--sp-4)}
.contatti-dati dt:first-child{margin-top:0}
.contatti-dati dd{margin:3px 0 0}
.contatti-dati a,.contatti-dove a{color:var(--c-sea);text-decoration:none;position:relative}
.contatti-dati a:hover,.contatti-dove a:hover{text-decoration:underline}
/* Area sensibile a 44px senza allargare la riga */
.contatti-dati a::after,.contatti-dove a::after{content:"";position:absolute;inset:-12px -6px}
.contatti-dove h3{margin:0 0 var(--sp-3);font-size:18px}
.contatti-dove address{font-style:normal;line-height:1.7}
/* Nel piè di pagina i recapiti stanno in colonna: sono cinque righe, in fila
   andrebbero a capo da sole in modo disordinato. */
.foot-contact{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.foot-address{color:#9fb3c0;font-size:14px}