/* ripieghi vh per iOS < 15.4 */
/* =========================================================
   Dimora Dogana — base: token, reset, tipografia, componenti comuni
   Scala, griglia e curve misurate su era-residence.com (docs/riferimento.md §1):
   - ≥ 992px tutto in vw: h1 12vw, h2 8,5vw, h3 6vw, h4 3,9375vw, h5 2,5vw, h6 1,75vw,
     p1 0,8125vw, l1 0,6875vw, l2 0,5625vw; griglia 10 colonne da 8,5vw, gap 1vw, margini 3vw
   - < 992px scala da telefono, sempre in vw: h1 23,14vw, h2 17,55vw, h4 9,615vw, h5 6,73vw,
     p1 3,125vw, l1 2,644vw, l2 2,163vw; griglia 4 colonne, gap 3,846vw, margini 5,77vw
   - curve: Ease (.25,.1,.25,1), In (.5,0,.75,0), Out (.25,1,.5,1), InOut (.76,0,.24,1)
   Differenze volute (docs/differenze.md): font Cormorant Garamond + Inter al posto di
   Ambroise Francois + Maison Neue, e soglie minime di leggibilità sui testi piccoli.
   ========================================================= */

:root {
  /* colori dal logo */
  --avorio: #FAF5F1;
  --antracite: #1D201F;
  /* accento terracotta, dalle foto del bagno e delle lenzuola */
  --terracotta: #B8674A;
  /* terracotta per testi e fondi pieni (4/10): 5,3:1 sull'avorio, 4,5:1 sulla sabbia */
  --terracotta-testo: #9C5238;
  /* tinta calda per le sezioni alternate (ruolo del powder-sky del riferimento) */
  --sabbia: #EFE3D8;
  --antracite-60: rgba(29, 32, 31, .6);
  --antracite-10: rgba(29, 32, 31, .1);
  --avorio-60: rgba(250, 245, 241, .6);
  --avorio-20: rgba(250, 245, 241, .2);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-testo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala da telefono (< 992px) */
  --fs-h1: 23.14vw;
  --fs-h2: 17.55vw;
  --fs-h3: 13vw;
  --fs-h4: 9.615vw;
  --fs-h5: 6.73vw;
  --fs-h6: 5vw;
  --fs-a1: 23.14vw;
  --fs-a2: 15vw;
  --fs-p1: max(12px, 3.125vw);
  --fs-l1: max(10px, 2.644vw);
  --fs-l2: max(8.5px, 2.163vw);

  --colonne: 4;
  --gap: 3.846vw;
  --margine: 5.77vw;
  --colonna: calc((100vw - 2 * var(--margine) - (var(--colonne) - 1) * var(--gap)) / var(--colonne));

  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --dur-s: .4s;
  --dur-m: .8s;
  --dur-l: 1.2s;

  --altezza-testata: 24vw;
}

@media (min-width: 992px) {
  :root {
    --fs-h1: 12vw;
    --fs-h2: 8.5vw;
    --fs-h3: 6vw;
    --fs-h4: 3.9375vw;
    --fs-h5: 2.5vw;
    --fs-h6: 1.75vw;
    --fs-a1: 12vw;
    --fs-a2: 7.5vw;
    /* il riferimento scende a 8px a 1024: qui c'è una soglia minima */
    --fs-p1: max(11px, .8125vw);
    --fs-l1: max(9.5px, .6875vw);
    --fs-l2: max(8px, .5625vw);
    --colonne: 10;
    --gap: 1vw;
    --margine: 3vw;
    --altezza-testata: 11.5vw;
  }
}

/* ---------- reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: var(--avorio); }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--antracite);
  font-family: var(--font-testo);
  font-size: var(--fs-p1);
  font-weight: 400;
  line-height: 1.38;
  -webkit-font-smoothing: antialiased;
}
/* le comparse spostano lettere e righe fuori dallo schermo: clip (non hidden) non rompe gli sticky */
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
/* 5/10: il contorno serve a chi usa la tastiera; dopo un tocco o un clic (js/main.js mette .puntatore) non si vede */
html.puntatore :focus-visible { outline: none; }
::selection { background: var(--antracite); color: var(--avorio); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.salta {
  position: fixed; left: var(--margine); top: .75rem; z-index: 200;
  background: var(--antracite); color: var(--avorio); padding: .6rem 1rem;
  transform: translateY(-200%); transition: transform .3s;
}
.salta:focus { transform: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- tipografia (nomi dei ruoli come nel riferimento) ---------- */
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; }
.h1 { font-size: var(--fs-h1); line-height: .875; letter-spacing: -.024em; }
.h2 { font-size: var(--fs-h2); line-height: .882; letter-spacing: -.024em; }
.h3 { font-size: var(--fs-h3); line-height: .917; letter-spacing: -.024em; }
.h4 { font-size: var(--fs-h4); line-height: .95; letter-spacing: -.016em; }
.h5 { font-size: var(--fs-h5); line-height: 1; letter-spacing: -.008em; }
.h6 { font-size: var(--fs-h6); line-height: 1; letter-spacing: 0; }
.a1, .a2 { font-family: var(--font-display); font-style: italic; font-weight: 400; text-transform: none; line-height: 1; letter-spacing: 0; }
.a1 { font-size: var(--fs-a1); }
.a2 { font-size: var(--fs-a2); }
.p1 { font-family: var(--font-testo); font-size: var(--fs-p1); line-height: 1.38; letter-spacing: -.012em; font-weight: 400; }
.l1 { font-family: var(--font-testo); font-size: var(--fs-l1); line-height: 1.45; letter-spacing: .048em; font-weight: 700; text-transform: uppercase; }
.l2 { font-family: var(--font-testo); font-size: var(--fs-l2); line-height: 1.33; letter-spacing: .32em; font-weight: 700; text-transform: uppercase; }

/* parole, righe e lettere divise dal JS per le comparse */
.divisa-parola { display: inline-block; vertical-align: top; }
.divisa-riga { display: block; }
.divisa-maschera { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em; margin-block: -.08em; }
.divisa-parola > span, .divisa-riga > span, .divisa-lettera { display: inline-block; will-change: transform; }
.divisa-lettere { perspective: 60em; }

/* temi di sezione */
.tema-chiaro { background: var(--avorio); color: var(--antracite); }
.tema-sabbia { background: var(--sabbia); color: var(--antracite); }
.tema-scuro { background: var(--antracite); color: var(--avorio); }

/* ---------- griglia ---------- */
.griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--margine); }

/* ---------- segnaposto visibili ---------- */
/* [parentesi] del cliente e [DA CONFERMARE] restano leggibili finché non arrivano i dati */
.ph {
  /* terracotta scurita: 5:1 anche sul fondo sabbia (quella del marchio, #B8674A, arriva a 3:1) */
  color: #86452E;
  background: rgba(134, 69, 46, .1);   /* ripiego per iOS < 16.2 */
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-bottom: 1px dashed currentColor;
  padding: 0 .15em;
  font-style: normal;
}
.tema-scuro .ph, .s-comfort .ph, .s-palazzo .ph { color: #E6A98F; }
.ph-conferma {
  display: inline-block;
  font-family: var(--font-testo); font-size: max(9px, .62em); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: .2em; line-height: 1.3;
  border: 1px dashed currentColor; padding: .1em .45em; cursor: help;
  margin-left: .35em;
}
.h1 .ph-conferma, .h2 .ph-conferma, .h4 .ph-conferma, .h5 .ph-conferma { font-size: max(9px, .22em); vertical-align: .7em; }
/* anteprima per il cliente (?anteprima=1, classe messa nella <head>): niente etichette DA CONFERMARE
   e segnaposto senza evidenziazione, così il sito si vede pulito */
.senza-segnaposto .ph-conferma { display: none; }
.senza-segnaposto .ph { color: inherit; background: none; border-bottom: 0; padding: 0; }

/* ---------- lunetta ---------- */
.lunetta-piccola { width: 3.4em; height: 1.7em; color: currentColor; }

/* ---------- bottone pillola: fondo che sale dal basso (hover-btn, 0,8s InOut) ---------- */
.pillola {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 44px; padding: .9em 1.6em;
  border: 1px solid currentColor; border-radius: 999px; isolation: isolate;
}
.pillola-fondo {
  position: absolute; inset: 100% 0 auto; height: 100%; z-index: -1;
  background: var(--antracite); border-radius: 100%;
  transition: inset var(--dur-m) var(--ease-in-out), border-radius var(--dur-m) var(--ease-in-out);
}
.pillola-testo { transition: color var(--dur-m) var(--ease-in-out); }
@media (min-width: 992px) {
  .pillola:hover .pillola-fondo { inset: 0 0 auto; border-radius: 0; }
  .pillola:hover .pillola-testo { color: var(--avorio); }
}
.pillola-piena { background: var(--antracite); color: var(--avorio); border-color: var(--antracite); }
.pillola-piena .pillola-fondo { background: var(--terracotta); }

/* ---------- CTA circolare: arco disegnato (circle strokeDasharray, 0,8s InOut) ---------- */
.cerchio-cta {
  position: relative; display: grid; place-items: center;
  /* misura unica per tutti i cerchi del sito (16/09): a 360 px il testo più lungo ("Verificate la disponibilità",
     "Scoprite l'appartamento") entra con margine. Corpo e spaziatura scendono un po' rispetto al l2 normale. */
  width: 36vw; height: 36vw; min-width: 116px; min-height: 116px; border-radius: 50%;
  text-align: center; padding: .9em; line-height: 1.45;
}
.cerchio-cta span { position: relative; z-index: 1; }
.cerchio-cta .l2 { font-size: max(8px, 2.1vw); letter-spacing: .18em; }
.cerchio-cta-arco { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-60deg); overflow: visible; }
.cerchio-cta-arco circle {
  fill: none; stroke: currentColor; stroke-width: .6;
  stroke-dasharray: .25 .75; transition: stroke-dasharray var(--dur-m) var(--ease-in-out);
}
.cerchio-cta::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: .18; }
/* tablet (29/09): a 768 il 36vw faceva un cerchio di 276 px che nell'hero copriva "Il porto sotto casa";
   stesso rapporto fra testo e cerchio del telefono */
@media (min-width: 600px) and (max-width: 991px) {
  .cerchio-cta { width: 22vw; height: 22vw; }
  .cerchio-cta .l2 { font-size: max(8px, 1.3vw); }
}
@media (min-width: 992px) {
  .cerchio-cta { width: 8.5vw; height: 8.5vw; padding: 1.2em; line-height: 1.35; }
  .cerchio-cta .l2 { font-size: var(--fs-l2); letter-spacing: .32em; }
  .cerchio-cta:hover .cerchio-cta-arco circle { stroke-dasharray: 1 0; }
}

/* linea verticale con comparsa a clip (line-v) */
.linea-v { display: block; width: 1px; height: 22vw; background: currentColor; margin-inline: auto; }
@media (min-width: 992px) { .linea-v { height: 11vw; } }

/* =========================================================
   HEADER (partial) — colore per tema della sezione sotto, transition 0,4s Out
   ========================================================= */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 3vw;
  padding: 3vw var(--margine);
  color: var(--antracite); pointer-events: none;
  transition: color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out), padding var(--dur-s) var(--ease-out),
              transform .5s var(--ease-out), border-color var(--dur-s) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.testata > * { pointer-events: auto; }
.testata.su-scuro, .progresso.su-scuro { color: var(--avorio); }
.testata-sinistra { display: flex; align-items: center; gap: 4vw; justify-self: start; }
.testata-destra { display: flex; align-items: center; gap: 2.4vw; justify-self: end; }

/* menu: tre linee */
.testata-menu { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin-left: -10px; }
.testata-hamburger { display: grid; gap: 6px; width: 30px; }
.testata-hamburger i { display: block; height: 1.5px; background: currentColor; transition: width var(--dur-s) var(--ease-out); }

/* lingua a tendina: "Ita ⌄" */
.lingua-scelta { position: relative; }
.lingua-attuale { display: flex; align-items: center; gap: .45em; min-height: 44px; font-family: var(--font-display); font-size: max(15px, 4.2vw); font-weight: 500; line-height: 1; }
.lingua-freccia { width: .62em; height: auto; margin-top: .1em; transition: transform var(--dur-s) var(--ease-out); }
.lingua-attuale[aria-expanded="true"] .lingua-freccia { transform: rotate(180deg); }
.lingua-tendina { position: absolute; left: -.9em; top: 100%; display: grid; min-width: 9.5em; padding: .4em 0; background: var(--avorio); color: var(--antracite); box-shadow: 0 10px 30px rgba(29,32,31,.12); }
.lingua-tendina[hidden] { display: none; }
.lingua { min-height: 44px; padding: 0 .9em; text-align: left; font-family: var(--font-testo); font-size: 14px; letter-spacing: .02em; opacity: .65; transition: opacity var(--dur-s) var(--ease-out); }
.lingua[aria-pressed="true"], .lingua:hover { opacity: 1; }
.lingua[aria-pressed="true"]::after { content: " ·"; }
/* nel menu a tutto schermo restano IT / EN in riga */
.menu-piede .lingua { min-height: 44px; padding-inline: .15em; font-size: inherit; letter-spacing: inherit; }
.menu-piede .lingua[aria-pressed="true"]::after { content: none; }
.lingue { display: flex; align-items: center; gap: .35em; }

/* marchio circolare al centro */
.testata-marchio { position: relative; width: 18vw; height: 18vw; display: grid; place-items: center; transition: width var(--dur-s) var(--ease-out), height var(--dur-s) var(--ease-out); }
.testata-anello { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.testata-anello text { fill: currentColor; font-family: var(--font-testo); font-size: 9.6px; font-weight: 500; letter-spacing: .34em; }
.testata-anello circle { fill: currentColor; }
.testata-lunetta { width: 46%; height: 23%; margin-top: -4%; }

/* destra: icone tonde, separatore, PRENOTA */
.testata-contatti { display: none; align-items: center; gap: 1.1vw; }
.testata-icona { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out); }
.testata-icona svg { width: 46%; height: 46%; }
.testata-icona[hidden] { display: none; }
.testata-separatore { display: none; width: 1px; height: 3.2vw; background: currentColor; opacity: .8; }
.testata-prenota { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: max(15px, 4.2vw); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.testata-prenota:hover { opacity: .75; }

/* scendendo: via; risalendo: fascia sottile avorio con tutto più piccolo */
.testata.compatta { padding-block: 1.2vw; background: var(--avorio); color: var(--antracite); border-bottom-color: var(--antracite-10); }
.testata.compatta .testata-marchio { width: 12vw; height: 12vw; }
.testata.compatta .lingua-attuale, .testata.compatta .testata-prenota { font-size: max(13px, 3.6vw); }
.testata.nascosta { transform: translateY(-105%); }

@media (min-width: 992px) {
  .testata { padding: 1.3vw var(--margine); column-gap: 2vw; }
  .testata-sinistra { gap: 2.6vw; }
  .testata-destra { gap: 1.8vw; }
  .testata-menu { margin-left: 0; }
  .testata-hamburger { width: 2.3vw; min-width: 30px; gap: .45vw; }
  .lingua-attuale, .testata-prenota { font-size: max(16px, 1.45vw); }
  .testata-marchio { width: 8.6vw; height: 8.6vw; }
  .testata-contatti, .testata-separatore { display: flex; }
  .testata-icona { width: 2.6vw; height: 2.6vw; min-width: 36px; min-height: 36px; }
  .testata-icona:hover { background: currentColor; }
  .testata-icona:hover svg { color: var(--avorio); }
  .testata.su-scuro:not(.compatta) .testata-icona:hover svg { color: var(--antracite); }
  .testata.compatta { padding-block: .35vw; }
  .testata.compatta .testata-marchio { width: 3.6vw; height: 3.6vw; min-width: 48px; min-height: 48px; }
  .testata.compatta .lingua-attuale, .testata.compatta .testata-prenota { font-size: max(14px, 1.05vw); }
  .testata.compatta .testata-icona { width: 2vw; height: 2vw; min-width: 32px; min-height: 32px; }
  .testata.compatta .testata-separatore { height: 2vw; }
  .testata.compatta .testata-anello text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .testata { transition: color var(--dur-s), background-color var(--dur-s); } }

/* barra di scroll a sinistra (s-bar): traccia, pollice, percentuale, "Scorri" */
.progresso {
  position: fixed; left: var(--margine); top: 50%; bottom: 3vw; z-index: 55;
  display: none; flex-direction: column; align-items: center; justify-content: space-between;
  transform: translateY(-16vw);
  color: var(--antracite); transition: color var(--dur-s) var(--ease-out), opacity var(--dur-m) var(--ease-in-out);
}
.progresso-traccia { position: relative; width: 1px; height: 11vw; }
.progresso-traccia::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .25; }
.progresso-traccia i { position: absolute; left: 0; right: 0; top: 0; height: var(--progresso, 0%); background: currentColor; }
.progresso-numero { margin-top: .8vw; }
.progresso-etichetta { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: .8vw; }
.progresso-etichetta::before { content: ""; width: 1px; height: 3vw; background: currentColor; }
@media (min-width: 992px) { .progresso { display: flex; } }

/* =========================================================
   MENU OVERLAY (partial)
   ========================================================= */
.menu-overlay {
  /* 5/10: sopra il banner dei cookie (100), che sul telefono copriva IT / EN; sotto la modale (120) */
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4vw var(--margine) 6vw;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-l) var(--ease-in-out);
}
.menu-overlay.is-aperto { clip-path: inset(0 0 0 0); }
.menu-testa { display: flex; justify-content: space-between; align-items: center; min-height: 13vw; }
.menu-chiudi { min-height: 44px; }
.menu-voci { display: flex; flex-direction: column; gap: .05em; }
.menu-voci a { width: fit-content; }
/* 5/10: sul telefono la h2 (17,55vw) faceva uscire L'APPARTAMENTO dallo schermo: 9vw ci sta, anche in inglese */
@media (max-width: 991px) { .menu-voci { font-size: 9vw; line-height: 1.12; } }
.menu-piede { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 992px) {
  .menu-overlay { padding: 1.6vw var(--margine) 3vw; }
  .menu-testa { min-height: 4vw; }
  .menu-voci { padding-left: calc(var(--colonna) + var(--gap)); }
  .menu-voci a { transition: opacity var(--dur-m) var(--ease-out); }
  .menu-voci:has(a:hover) a:not(:hover) { opacity: .2; }
}

/* =========================================================
   FOOTER (partial) — riferimento §2.14
   ========================================================= */
.piede { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 30vw var(--margine) 6vw; overflow: hidden; }
.piede-centro { display: flex; flex-direction: column; align-items: center; gap: 4vw; text-align: center; margin-block: auto; }
/* il numero vero (29/09) non si spezza: sul telefono scende sotto la misura h2 quanto basta per stare su una riga */
.piede-telefono { white-space: nowrap; font-size: min(var(--fs-h2), 11.5vw); }
.piede-contatti { display: grid; gap: 4vw 6vw; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4vw; }
.piede-contatti dt { opacity: .6; }
.piede-fondo { display: grid; gap: 5vw; margin-top: 12vw; padding-top: 4vw; border-top: 1px solid var(--avorio-20); }
.piede-link, .piede-social { display: flex; flex-wrap: wrap; gap: .5em 1.4em; }
.piede-link { margin-top: .8em; }
.piede a { transition: opacity var(--dur-m) var(--ease-out); }
.piede a:hover { opacity: .6; }
.piede-su { position: absolute; left: var(--margine); top: 8vw; display: inline-flex; align-items: center; gap: .6em; min-height: 44px; }
@media (min-width: 992px) {
  .piede { padding: 12vw var(--margine) 3vw calc(var(--margine) + var(--colonna) + var(--gap)); }
  .piede-centro { gap: 1.6vw; }
  .piede-contatti { grid-template-columns: repeat(4, auto); gap: 1vw 3vw; margin-top: 1vw; }
  .piede-fondo { grid-template-columns: 1.5fr 1fr auto; align-items: end; gap: 2vw; margin-top: 5vw; padding-top: 1.4vw; }
  .piede-su { top: auto; bottom: 3vw; writing-mode: vertical-rl; transform: rotate(180deg); }
}

/* =========================================================
   MODALE
   ========================================================= */
.modale { position: fixed; inset: 0; z-index: 120; display: grid; place-items: end center; }
.modale-sfondo { position: absolute; inset: 0; background: rgba(29, 32, 31, .55); opacity: 0; transition: opacity var(--dur-m) var(--ease-out); }
.modale-pannello {
  position: relative; width: 100%; max-height: 92vh; max-height: 92svh; overflow: auto; overscroll-behavior: contain;
  background: var(--avorio); color: var(--antracite);
  padding: 6vw var(--margine) 8vw;
  transform: translateY(100%); transition: transform var(--dur-l) var(--ease-out);
}
.modale.is-aperta .modale-sfondo { opacity: 1; }
.modale.is-aperta .modale-pannello { transform: none; }
.modale-chiudi { float: right; min-height: 44px; }
.modale-titolo { margin: 12vw 0 3vw; }
.modale form, .modulo form { display: grid; gap: 4vw; margin-top: 6vw; }
.campo { display: grid; gap: .4em; }
.campo input, .campo textarea {
  width: 100%; min-height: 46px; padding: .7em 0; border: 0; border-bottom: 1px solid var(--antracite-10);
  background: transparent; font-family: var(--font-testo); font-size: 16px; border-radius: 0;
}
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--antracite); }
.campo [aria-invalid="true"] { border-bottom-color: var(--terracotta); }
/* testi attenuati con il colore, non con opacity: i segnaposto dentro tengono il loro contrasto (Lighthouse) */
.modale-consenso { color: rgba(29, 32, 31, .75); }
.modale-errore { color: var(--terracotta); }
.modale-ok { display: grid; justify-items: start; gap: 3vw; padding-block: 8vw; }
@media (min-width: 992px) {
  .modale { place-items: center end; }
  .modale-pannello { width: calc(4 * var(--colonna) + 5 * var(--gap) + var(--margine)); height: 100vh; height: 100svh; max-height: none; padding: 2vw var(--margine) 3vw calc(var(--gap) * 2); transform: translateX(100%); }
  .modale-titolo { margin: 5vw 0 1vw; }
  .modale form, .modulo form { grid-template-columns: 1fr 1fr; column-gap: 1.6vw; row-gap: 1.4vw; margin-top: 2.4vw; }
  .campo input, .campo textarea { font-size: max(14px, .9vw); }
  .campo-largo, .modale-consenso, .modale-errore, .modale form button, .modulo form button { grid-column: 1 / -1; }
  .modale form button, .modulo form button { justify-self: start; }
  .modale-ok { gap: 1vw; padding-block: 4vw; }
}

/* =========================================================
   COOKIE — riferimento §2.15
   ========================================================= */
.cookie {
  /* 4/10: barretta discreta in basso a sinistra, niente titolo grande sopra la foto d'apertura */
  position: fixed; left: var(--margine); right: var(--margine); bottom: var(--margine); z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; gap: .2em 1.4em;
  background: var(--avorio); color: var(--antracite);
  padding: 10px 16px; border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(calc(100% + var(--margine))); transition: transform var(--dur-m) var(--ease-out) .3s;
}
.cookie.is-visibile { transform: none; }
@media (min-width: 600px) and (max-width: 991px) { .cookie { right: auto; width: min(80vw, 520px); } }
.cookie-titolo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cookie-testo { flex: 1 1 16em; margin: 0; font-family: var(--font-testo); font-size: clamp(12px, var(--fs-p1), 15px); font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.cookie-testo a { text-decoration: underline; text-underline-offset: .2em; }
.cookie-azioni { display: flex; align-items: center; gap: .6em; margin: 0; }
.cookie-azioni button { font-family: var(--font-testo); font-size: clamp(10px, var(--fs-l1), 12px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; min-height: 44px; }
.cookie-azioni button[data-cookie="accetta"] { color: var(--terracotta-testo); }
@media (min-width: 992px) {
  .cookie { right: auto; bottom: 1.4vw; width: min(34vw, 560px); padding: .7vw 1.2vw; gap: .2vw 1.6vw; }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* la lunetta del footer resta intera: il riquadro evidenziato del telefono segnaposto la copriva a metà (15/09 sera) */
.piede-centro > .lunetta-piccola { position: relative; z-index: 1; margin-bottom: max(10px, 1.2vw); }

/* =========================================================
   CURSORE PERSONALIZZATO (16/09) — solo mouse vero, creato da js/cursore.js
   Pallino 10px antracite 60% + anello 32px che insegue con ritardo; su link e bottoni il pallino
   cresce a 40px in "difference"; sulla mappa trascinabile mostra "trascinate".
   ========================================================= */
.cursore { position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity var(--dur-s) var(--ease-out); }
.cursore.is-visibile { opacity: 1; }
.cursore-punto, .cursore-anello { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursore-punto {
  display: grid; place-items: center; width: 10px; height: 10px;
  background: rgba(29, 32, 31, .6); color: var(--avorio);
  transition: width var(--dur-m) var(--ease-out), height var(--dur-m) var(--ease-out), background-color var(--dur-m) var(--ease-out);
}
.cursore-anello {
  width: 32px; height: 32px; border: 1px solid var(--antracite-60);
  transition: width var(--dur-m) var(--ease-out), height var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out);
}
.cursore.is-grande .cursore-punto { width: 40px; height: 40px; background: var(--avorio); mix-blend-mode: difference; }
.cursore.is-grande .cursore-anello { width: 56px; height: 56px; opacity: .35; }
.cursore.is-trascina .cursore-punto { width: max(74px, 5.2vw); height: max(74px, 5.2vw); }
.cursore.is-premuto .cursore-anello { width: 24px; height: 24px; }
.cursore-testo { font-size: max(7px, .48vw); letter-spacing: .18em; text-align: center; line-height: 1.1; opacity: 0; transition: opacity var(--dur-s) var(--ease-out); }
.cursore.is-trascina .cursore-testo { opacity: 1; }
/* il cursore di sistema sparisce solo quando c'è il nostro */
html.ha-cursore, html.ha-cursore * { cursor: none !important; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursore { display: none; } }

/* ---------- firma Kini Studio nel footer (5/10) ---------- */
.piede-kini { display: inline-block; line-height: 0; opacity: .85; transition: opacity var(--dur-s) var(--ease-out); }
.piede-kini:hover, .piede-kini:focus-visible { opacity: 1; }
.piede-kini img { height: 20px; width: auto; }
@media (min-width: 992px) { .piede-kini img { height: max(20px, 1.5vw); } }

/* =========================================================
   21/10 — richieste del cliente
   ========================================================= */
/* menu a tendina: voci più piccole */
.menu-overlay .menu-voci { font-size: 8.2vw; line-height: 1.16; }
@media (min-width: 992px) { .menu-overlay .menu-voci { font-size: min(4.4vw, 8.6vh); line-height: 1.1; } }
/* icone di contatto nel menu e nel footer: stesso cerchio sottile della testata */
.menu-icone, .piede-icone { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.menu-icone .testata-icona, .piede-icone .testata-icona { width: 44px; height: 44px; }
.menu-overlay .testata-icona:hover, .piede .testata-icona:hover { background: var(--avorio); opacity: 1; }
.menu-overlay .testata-icona:hover svg, .piede .testata-icona:hover svg { color: var(--antracite); }
@media (max-width: 991px) { .menu-piede { flex-direction: column; align-items: flex-start; gap: 1.6rem; } .menu-icone { justify-content: flex-start; } }

/* footer: numero più piccolo, centrato sulla pagina, icone e indirizzo sotto */
.piede-telefono { font-size: min(calc(var(--fs-h2) * .58), 8.6vw); }
.piede-icone { margin-top: 2vw; }
.piede-indirizzo { opacity: .7; }
@media (min-width: 992px) {
  /* il footer ha più spazio a sinistra (colonna del "Torna su"): il blocco centrale lo compensa e sta al centro dello schermo */
  .piede-centro { margin-left: calc((var(--colonna) + var(--gap)) * -1); gap: 1.4vw; }
  .piede-icone { gap: 1vw; margin-top: .6vw; }
  .piede-icone .testata-icona { width: 2.8vw; height: 2.8vw; min-width: 40px; min-height: 40px; }
}

/* testata: marchio più grande, lunetta più presente dentro l'anello (come nel riferimento del 21/10) */
.testata-marchio { width: 21vw; height: 21vw; }
.testata-lunetta { width: 54%; height: 27.5%; margin-top: -3%; }
@media (min-width: 992px) {
  :root { --altezza-testata: 12.6vw; }
  .testata-marchio { width: 10vw; height: 10vw; }
}

/* cursore: solo contorno, che non copre mai il testo. Tutto il cursore è in "difference" (sul contenitore, così si fonde
   con la pagina): chiaro sullo scuro e scuro sul chiaro. Sopra link e bottoni l'anello si allarga e il pallino sparisce. */
.cursore { mix-blend-mode: difference; }
.cursore-punto { width: 6px; height: 6px; background: var(--avorio); mix-blend-mode: normal; }
.cursore-anello { width: 30px; height: 30px; border: 1px solid var(--avorio); }
.cursore.is-grande .cursore-punto { width: 0; height: 0; background: var(--avorio); mix-blend-mode: normal; }
.cursore.is-grande .cursore-anello { width: 54px; height: 54px; opacity: 1; }
.cursore.is-trascina .cursore-punto { width: max(74px, 5.2vw); height: max(74px, 5.2vw); background: transparent; border: 1px solid var(--avorio); color: var(--avorio); }
.cursore.is-trascina .cursore-anello { opacity: 0; }